@lijian-ui/dsh-term 0.1.1 → 0.1.2

package/lib/client.js

@@ -51207,7 +51207,7 @@ get: (_target, key) => {
 			exports.FolderOpen = FolderOpen;
 			exports.Terminal = Terminal;
 		})))();
-		const css = "._8AhSIa_dock{-webkit-backdrop-filter:blur(12px);background:#ffffff14;border:1px solid #ffffff24;border-radius:16px;align-items:flex-end;gap:8px;height:40px;padding:0 10px 4px;display:inline-flex;overflow:visible}._8AhSIa_item{aspect-ratio:1;color:var(--aion-fg-2,#c9cdd4);cursor:pointer;background:#ffffff1a;border:none;border-radius:9999px;justify-content:center;align-items:center;transition:background .18s,color .18s,box-shadow .18s;display:inline-flex;position:relative;overflow:visible}._8AhSIa_item:hover{color:var(--aion-fg-1,#fff);background:#ffffff38}._8AhSIa_item._8AhSIa_active{background:var(--aion-primary-soft,#165dff47);color:var(--aion-primary,#6ea0ff);box-shadow:0 0 0 1.5px var(--aion-primary,#6ea0ff)}._8AhSIa_tooltip{white-space:nowrap;color:var(--aion-fg-1,#fff);opacity:0;pointer-events:none;background:#14141ee6;border:1px solid #ffffff1f;border-radius:6px;padding:2px 8px;font-size:12px;line-height:1.4;transition:opacity .15s;position:absolute;top:-30px;left:50%;transform:translate(-50%)}._8AhSIa_item:hover ._8AhSIa_tooltip{opacity:1}";
+		const css = "._8AhSIa_dock{-webkit-backdrop-filter:blur(12px);background:#000000d9;border:1px solid #ffffff1f;border-radius:16px;align-items:flex-end;gap:8px;height:40px;padding:0 10px 4px;display:inline-flex;overflow:visible}._8AhSIa_item{color:#fff;cursor:pointer;transform-origin:bottom;will-change:transform;background:#000;border:none;border-radius:9999px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .18s,color .18s,box-shadow .18s;display:inline-flex;position:relative;overflow:visible}._8AhSIa_item:hover{color:#fff;background:#1a1a1a}._8AhSIa_item._8AhSIa_active{background:var(--aion-primary,#6ea0ff);color:#fff;box-shadow:0 0 0 1.5px var(--aion-primary,#6ea0ff)}._8AhSIa_tooltip{white-space:nowrap;color:var(--aion-fg-1,#fff);opacity:0;pointer-events:none;background:#14141ee6;border:1px solid #ffffff1f;border-radius:6px;padding:2px 8px;font-size:12px;line-height:1.4;transition:opacity .15s;position:absolute;top:-30px;left:50%;transform:translate(-50%)}._8AhSIa_item:hover ._8AhSIa_tooltip{opacity:1}";
 		const tagId = "@lijian-ui/dsh-term/animated-dock.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -51231,8 +51231,10 @@ get: (_target, key) => {
 		*
 		* This is a faithful port of the 21st.dev "Animated Dock" component: it uses
 		* framer-motion's `useMotionValue` + `useSpring` + `useTransform` so each
-		* circular icon grows (and pushes its neighbour) toward the cursor with real
-		* spring physics — the buttery feel you can't get from a CSS transition.
+		* circular icon scales toward the cursor with real spring physics — the
+		* buttery feel you can't get from a CSS transition. Magnification is driven by
+		* `transform: scale()` (NOT `width`), so it never reflows the layout and the
+		* dock stays perfectly stable under the cursor.
 		* Icons come from lucide-react. The dock itself is a frosted-glass pill.
 		*
 		* Two entries wire to the two right-side panels through window CustomEvents
@@ -51254,13 +51256,17 @@ get: (_target, key) => {
 			terminalState: "dsh-dock:terminal-state",
 			fileState: "dsh-dock:filepanel-state"
 		};
-		/** Resting / peak icon size (px). Peak pushes the neighbour like a real dock. */
+		/** Resting / peak icon size (px). */
 		const BASE = 40;
-		const MAX = 58;
+		/** Magnification factor at the cursor (MAX / BASE). Driven via CSS `scale()`
+		*  so it never reflows the layout — this is what removed the old "jitter". */
+		const MAX_SCALE = 58 / BASE;
 		/** Cursor distance (px) over which magnification falls to zero. */
 		const DIST = 120;
-		/** Spring tuning for the magnification. */
-		const DAMPING = .35;
+		/** Spring tuning. Near-critically damped (ratio ≈ 0.94) so the icon settles
+		*  smoothly with essentially no overshoot. The old `damping: 0.35` was
+		*  effectively zero damping and caused the wild oscillation. */
+		const DAMPING = 28;
 		const STIFFNESS = 220;
 		function AnimatedDock() {
 			const mouseX = useMotionValue(Infinity);
@@ -51302,10 +51308,12 @@ get: (_target, key) => {
 				})]
 			});
 		}
-		/** A single magnifying icon. Its width is a spring driven by cursor distance. */
+		/** A single magnifying icon. Its `scale` is a spring driven by cursor distance.
+		*  Because we animate `transform` (not `width`), the layout never reflows, so
+		*  there is no neighbour-push feedback loop and the dock stays rock-steady. */
 		function DockItem(props) {
 			const ref = (0, react.useRef)(null);
-			const width = useSpring(useTransform(useTransform(props.mouseX, (val) => {
+			const scale = useSpring(useTransform(useTransform(props.mouseX, (val) => {
 				const bounds = ref.current?.getBoundingClientRect() ?? {
 					x: 0,
 					width: BASE
@@ -51316,9 +51324,9 @@ get: (_target, key) => {
 				0,
 				DIST
 			], [
-				BASE,
-				MAX,
-				BASE
+				1,
+				MAX_SCALE,
+				1
 			]), {
 				damping: DAMPING,
 				stiffness: STIFFNESS
@@ -51326,7 +51334,7 @@ get: (_target, key) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion.button, {
 				ref,
 				type: "button",
-				style: { width },
+				style: { scale },
 				className: `${animated_dock_module_css_default.item}${props.active ? ` ${animated_dock_module_css_default.active}` : ""}`,
 				onClick: props.onClick,
 				"aria-label": props.label,