@mingxy/opencode-mascot 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "OpenCode TUI mascot plugin framework - customizable ASCII mascots for your terminal",
   "author": "mingxy",
   "license": "MIT",

package/src/components/sidebar-mascot.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @opentui/solid */
 
-import { createSignal } from "solid-js";
+import { createSignal, onCleanup } from "solid-js";
 import type { JSX } from "@opentui/solid";
 import type { MascotPack, MascotState } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
@@ -27,6 +27,11 @@ const DEFAULT_STATE_MAP: Partial<Record<MascotState, string>> = {
   sleeping: "baozi",
 };
 
+const MASCOT_WIDTH = 10;
+const PEEK = 2;
+const PEEK_INTERVAL = 1200;
+const EDGE_THRESHOLD = 3;
+
 export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   const names = Object.keys(props.mascots);
   const initialName =
@@ -37,24 +42,96 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   const [currentName, setCurrentName] = createSignal(initialName);
   const [posX, setPosX] = createSignal(20);
   const [posY, setPosY] = createSignal(2);
+  const [containerWidth, setContainerWidth] = createSignal(0);
   let dragStartX = 0;
   let dragStartY = 0;
   let dragAnchorX = 0;
   let dragAnchorY = 0;
   let lastClickTime = 0;
   let isDragging = false;
+  let hideSide: "left" | "right" | null = null;
+  let peekTimer: ReturnType<typeof setInterval> | null = null;
+  let returnTimer: ReturnType<typeof setInterval> | null = null;
 
   const renderers: Record<string, ReturnType<typeof createAnimatedRenderer>> = {};
   for (const [name, pack] of Object.entries(props.mascots)) {
     renderers[name] = createAnimatedRenderer(pack);
   }
 
+  const stopPeek = () => {
+    if (peekTimer) { clearInterval(peekTimer); peekTimer = null; }
+  };
+  const stopReturn = () => {
+    if (returnTimer) { clearInterval(returnTimer); returnTimer = null; }
+  };
+
+  onCleanup(() => { stopPeek(); stopReturn(); });
+
   const switchToNext = () => {
     const cur = currentName();
     const idx = names.indexOf(cur);
     setCurrentName(names[(idx + 1) % names.length]);
   };
 
+  const getCw = () => containerWidth() || 30;
+
+  const clampX = (rawX: number): number => {
+    const cw = getCw();
+    return Math.max(-(MASCOT_WIDTH - PEEK), Math.min(rawX, cw - PEEK));
+  };
+
+  const clampY = (rawY: number): number => {
+    return Math.max(0, rawY);
+  };
+
+  const checkEdge = () => {
+    const cw = getCw();
+    const x = posX();
+    if (x <= -(MASCOT_WIDTH - PEEK) + EDGE_THRESHOLD) {
+      hideSide = "left";
+      startPeek();
+    } else if (x >= cw - PEEK - EDGE_THRESHOLD) {
+      hideSide = "right";
+      startPeek();
+    }
+  };
+
+  const startPeek = () => {
+    stopPeek();
+    let phase = false;
+    peekTimer = setInterval(() => {
+      phase = !phase;
+      const stretch = phase ? PEEK : 0;
+      const cw = getCw();
+      if (hideSide === "left") {
+        setPosX(-(MASCOT_WIDTH - PEEK) + stretch);
+      } else if (hideSide === "right") {
+        setPosX(cw - PEEK - stretch);
+      }
+    }, PEEK_INTERVAL);
+  };
+
+  const returnToView = () => {
+    if (!hideSide) return;
+    stopPeek();
+    const cw = getCw();
+    const cur = posX();
+    const targetX = hideSide === "left" ? 0 : Math.max(0, cw - MASCOT_WIDTH);
+    const step = targetX > cur ? 1 : -1;
+
+    returnTimer = setInterval(() => {
+      const now = posX();
+      if (Math.abs(now - targetX) <= 1) {
+        setPosX(targetX);
+        stopReturn();
+        hideSide = null;
+        renderers[currentName()].bounce();
+        return;
+      }
+      setPosX(now + step);
+    }, 16);
+  };
+
   const setStateWithSwitch = (s: MascotState) => {
     const cur = currentName();
     renderers[cur].setState(s);
@@ -69,6 +146,7 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     const payload = data as { type?: string; properties?: { sessionID?: string; status?: { type?: string } } } | null;
     const statusType = payload?.properties?.status?.type;
     if (statusType === "busy" || statusType === "retry") {
+      if (hideSide) returnToView();
       renderers[currentName()].setState("busy");
     } else {
       setStateWithSwitch("idle");
@@ -110,7 +188,19 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       alignItems="center"
       zIndex={100}
       flexDirection="column"
+      ref={(node: any) => {
+        if (node) {
+          setContainerWidth(node.width || 0);
+          if (node.onSizeChange !== undefined) {
+            node.onSizeChange = () => {
+              setContainerWidth(node.width || 0);
+            };
+          }
+        }
+      }}
       onMouseDown={(e: any) => {
+        if (hideSide) { returnToView(); return; }
+
         const now = Date.now();
         if (now - lastClickTime < 300) {
           switchToNext();
@@ -133,8 +223,8 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       }}
       onMouseDrag={(e: any) => {
         if (e.modifiers?.alt && isDragging) {
-          setPosX(dragAnchorX + (e.x - dragStartX));
-          setPosY(dragAnchorY + (e.y - dragStartY));
+          setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
+          setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
           e.preventDefault();
           e.stopPropagation();
           props.api.renderer.clearSelection();
@@ -144,12 +234,14 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
         if (isDragging) {
           isDragging = false;
           renderers[currentName()].setDragging(false);
+          checkEdge();
         }
       }}
       onMouseDragEnd={() => {
         if (isDragging) {
           isDragging = false;
           renderers[currentName()].setDragging(false);
+          checkEdge();
         }
       }}
     >