@mingxy/opencode-mascot 0.2.2 → 0.2.3

package/package.json

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

package/src/components/home-mascot.tsx

@@ -5,6 +5,7 @@ import type { JSX } from "@opentui/solid";
 import type { MascotPack } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
 import { onCelebrate } from "../core/celebration-bus";
+import { useDraggableMascot } from "./use-draggable-mascot";
 
 interface HomeMascotProps {
   mascots: Record<string, MascotPack>;
@@ -20,26 +21,29 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
   const initialName = names[Math.floor(Math.random() * names.length)];
 
   const [currentName, setCurrentName] = createSignal(initialName);
-  const [posX, setPosX] = createSignal(0);
-  const [posY, setPosY] = createSignal(0);
-  let dragStartX = 0;
-  let dragStartY = 0;
-  let dragAnchorX = 0;
-  let dragAnchorY = 0;
-  let lastClickTime = 0;
-  let isDragging = false;
 
   const renderers: Record<string, ReturnType<typeof createAnimatedRenderer>> = {};
   for (const [name, pack] of Object.entries(props.mascots)) {
     renderers[name] = createAnimatedRenderer(pack);
   }
 
-  const switchTo = (name: string) => {
-    if (props.mascots[name] && name !== currentName()) {
-      setCurrentName(name);
-    }
+  const switchToNext = () => {
+    const cur = currentName();
+    const idx = names.indexOf(cur);
+    setCurrentName(names[(idx + 1) % names.length]);
   };
 
+  const { posX, posY, mouseProps } = useDraggableMascot({
+    initialX: 0,
+    initialY: 0,
+    mascotWidth: 10,
+    mascotHeight: 5,
+    onSwitch: switchToNext,
+    clearSelection: () => props.api.renderer.clearSelection(),
+    setDragging: (v) => renderers[currentName()].setDragging(v),
+    enableEdge: false,
+  });
+
   onCelebrate((newVersion) => {
     renderers[currentName()].celebrateUpdate(newVersion);
   });
@@ -51,51 +55,7 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
       alignItems="center"
       zIndex={100}
       flexDirection="column"
-      onMouseDown={(e: any) => {
-        const now = Date.now();
-        if (now - lastClickTime < 300) {
-          const cur = currentName();
-          const idx = names.indexOf(cur);
-          const next = names[(idx + 1) % names.length];
-          switchTo(next);
-          lastClickTime = 0;
-          return;
-        }
-        lastClickTime = now;
-
-        if (e.modifiers?.alt) {
-          dragStartX = e.x;
-          dragStartY = e.y;
-          dragAnchorX = posX();
-          dragAnchorY = posY();
-          isDragging = true;
-          renderers[currentName()].setDragging(true);
-          e.preventDefault();
-          e.stopPropagation();
-          props.api.renderer.clearSelection();
-        }
-      }}
-      onMouseDrag={(e: any) => {
-        if (e.modifiers?.alt && isDragging) {
-          setPosX(dragAnchorX + (e.x - dragStartX));
-          setPosY(dragAnchorY + (e.y - dragStartY));
-          e.preventDefault();
-          e.stopPropagation();
-          props.api.renderer.clearSelection();
-        }
-      }}
-      onMouseUp={() => {
-        if (isDragging) {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-        }
-      }}
-      onMouseDragEnd={() => {
-        if (isDragging) {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-        }
-      }}
+      {...mouseProps}
     >
       {renderers[currentName()]?.element() ?? null}
     </box>

package/src/components/sidebar-mascot.tsx

@@ -5,6 +5,7 @@ import type { JSX } from "@opentui/solid";
 import type { MascotPack, MascotState, SwitchConfig } from "../core/types";
 import { createAnimatedRenderer } from "../core/ascii-renderer";
 import { onCelebrate } from "../core/celebration-bus";
+import { useDraggableMascot } from "./use-draggable-mascot";
 
 interface SidebarMascotProps {
   mascots: Record<string, MascotPack>;
@@ -28,6 +29,9 @@ const DEFAULT_STATE_MAP: Partial<Record<MascotState, string>> = {
   sleeping: "baozi",
 };
 
+const MASCOT_WIDTH = 10;
+const MASCOT_HEIGHT = 5;
+
 export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   const names = Object.keys(props.mascots);
   const initialName =
@@ -36,20 +40,29 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       : names[Math.floor(Math.random() * names.length)];
 
   const [currentName, setCurrentName] = createSignal(initialName);
-  const [posX, setPosX] = createSignal(20);
-  const [posY, setPosY] = createSignal(2);
-  let dragStartX = 0;
-  let dragStartY = 0;
-  let dragAnchorX = 0;
-  let dragAnchorY = 0;
-  let lastClickTime = 0;
-  let isDragging = false;
 
   const renderers: Record<string, ReturnType<typeof createAnimatedRenderer>> = {};
   for (const [name, pack] of Object.entries(props.mascots)) {
     renderers[name] = createAnimatedRenderer(pack);
   }
 
+  const switchToNext = () => {
+    const cur = currentName();
+    const idx = names.indexOf(cur);
+    setCurrentName(names[(idx + 1) % names.length]);
+  };
+
+  const { posX, posY, mouseProps, returnToView } = useDraggableMascot({
+    initialX: 20,
+    initialY: 2,
+    mascotWidth: MASCOT_WIDTH,
+    mascotHeight: MASCOT_HEIGHT,
+    onSwitch: switchToNext,
+    clearSelection: () => props.api.renderer.clearSelection(),
+    setDragging: (v) => renderers[currentName()].setDragging(v),
+    onReturnComplete: () => renderers[currentName()].bounce(),
+  });
+
   const switchTo = (name: string) => {
     if (props.mascots[name] && name !== currentName()) {
       setCurrentName(name);
@@ -69,11 +82,11 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   };
 
   props.api.event.on("session.status", (data: unknown) => {
-    // Plugin receives: { id, type, properties: { sessionID, status: { type } } }
     const payload = data as { type?: string; properties?: { sessionID?: string; status?: { type?: string } } } | null;
     const statusType = payload?.properties?.status?.type;
 
     if (statusType === "busy" || statusType === "retry") {
+      returnToView();
       renderers[currentName()].setState("busy");
     } else {
       setStateWithSwitch("idle");
@@ -113,52 +126,7 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       alignItems="center"
       zIndex={100}
       flexDirection="column"
-      onMouseDown={(e: any) => {
-        const now = Date.now();
-        if (now - lastClickTime < 300) {
-          const cur = currentName();
-          const idx = names.indexOf(cur);
-          const next = names[(idx + 1) % names.length];
-          switchTo(next);
-          lastClickTime = 0;
-          return;
-        }
-        lastClickTime = now;
-
-        if (e.modifiers?.alt) {
-          dragStartX = e.x;
-          dragStartY = e.y;
-          dragAnchorX = posX();
-          dragAnchorY = posY();
-          isDragging = true;
-          renderers[currentName()].setDragging(true);
-          e.preventDefault();
-          e.stopPropagation();
-          props.api.renderer.clearSelection();
-        }
-      }}
-      onMouseDrag={(e: any) => {
-        if (e.modifiers?.alt && isDragging) {
-          setPosX(dragAnchorX + (e.x - dragStartX));
-          setPosY(dragAnchorY + (e.y - dragStartY));
-          e.preventDefault();
-          e.stopPropagation();
-          props.api.renderer.clearSelection();
-        }
-      }}
-      onMouseUp={() => {
-        if (isDragging) {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-        }
-      }}
-      onMouseDragEnd={() => {
-        if (isDragging) {
-          isDragging = false;
-          renderers[currentName()].setDragging(false);
-        }
-      }}
-
+      {...mouseProps}
     >
       {renderers[currentName()]?.element() ?? null}
     </box>

package/src/components/use-draggable-mascot.ts

@@ -0,0 +1,183 @@
+/** @jsxImportSource @opentui/solid */
+
+import { createSignal, onCleanup, type Accessor } from "solid-js";
+import { useTerminalDimensions } from "@opentui/solid";
+
+type DragState = "normal" | "edge_hidden" | "returning";
+type HideSide = "left" | "right" | null;
+
+export interface MouseProps {
+  onMouseDown: (e: any) => void;
+  onMouseDrag: (e: any) => void;
+  onMouseUp: (e: any) => void;
+  onMouseDragEnd: (e: any) => void;
+}
+
+interface UseDraggableOpts {
+  initialX: number;
+  initialY: number;
+  mascotWidth: number;
+  mascotHeight: number;
+  onSwitch: () => void;
+  clearSelection: () => void;
+  setDragging: (v: boolean) => void;
+  onReturnComplete?: () => void;
+  peekVisible?: number;
+  enableEdge?: boolean;
+}
+
+export function useDraggableMascot(opts: UseDraggableOpts): {
+  posX: Accessor<number>;
+  posY: Accessor<number>;
+  mouseProps: MouseProps;
+  returnToView: () => void;
+  isHidden: () => boolean;
+} {
+  const peek = opts.peekVisible ?? 2;
+  const enableEdge = opts.enableEdge ?? true;
+
+  const [posX, setPosX] = createSignal(opts.initialX);
+  const [posY, setPosY] = createSignal(opts.initialY);
+  const dims = useTerminalDimensions();
+
+  let dragStartX = 0;
+  let dragStartY = 0;
+  let dragAnchorX = 0;
+  let dragAnchorY = 0;
+  let lastClickTime = 0;
+  let isDragging = false;
+  let state: DragState = "normal";
+  let hideSide: HideSide = null;
+  let peekTimer: ReturnType<typeof setInterval> | null = null;
+  let returnTimer: ReturnType<typeof setInterval> | null = null;
+
+  const stopPeek = () => {
+    if (peekTimer) { clearInterval(peekTimer); peekTimer = null; }
+  };
+  const stopReturn = () => {
+    if (returnTimer) { clearInterval(returnTimer); returnTimer = null; }
+  };
+
+  onCleanup(() => { stopPeek(); stopReturn(); });
+
+  const clampX = (rawX: number): number => {
+    if (!enableEdge) return rawX;
+    const { width } = dims();
+    const minX = -(opts.mascotWidth - peek);
+    const maxX = width - peek;
+    return Math.max(minX, Math.min(rawX, maxX));
+  };
+
+  const clampY = (rawY: number): number => {
+    if (!enableEdge) return rawY;
+    const { height } = dims();
+    return Math.max(0, Math.min(rawY, height - opts.mascotHeight));
+  };
+
+  const startPeek = () => {
+    stopPeek();
+    state = "edge_hidden";
+    let phase = false;
+    peekTimer = setInterval(() => {
+      phase = !phase;
+      const stretch = phase ? 2 : 0;
+      const { width } = dims();
+      if (hideSide === "left") {
+        setPosX(-(opts.mascotWidth - peek) + stretch);
+      } else if (hideSide === "right") {
+        setPosX(width - peek - stretch);
+      }
+    }, 1200);
+  };
+
+  const returnToView = () => {
+    if (state !== "edge_hidden") return;
+    stopPeek();
+    state = "returning";
+    const { width } = dims();
+    const cur = posX();
+    const targetX = hideSide === "left" ? 0 : Math.max(0, width - opts.mascotWidth);
+    const step = targetX > cur ? 2 : -2;
+
+    returnTimer = setInterval(() => {
+      const now = posX();
+      if (Math.abs(now - targetX) <= 2) {
+        setPosX(targetX);
+        stopReturn();
+        state = "normal";
+        hideSide = null;
+        opts.onReturnComplete?.();
+        return;
+      }
+      setPosX(now + step);
+    }, 16);
+  };
+
+  const checkEdgeOnRelease = () => {
+    if (!enableEdge) return;
+    const { width } = dims();
+    const x = posX();
+    if (x <= -(opts.mascotWidth - peek) + 1) {
+      hideSide = "left";
+      startPeek();
+    } else if (x >= width - peek - 1) {
+      hideSide = "right";
+      startPeek();
+    }
+  };
+
+  const mouseProps: MouseProps = {
+    onMouseDown(e: any) {
+      if (state === "edge_hidden") {
+        returnToView();
+        return;
+      }
+      if (state === "returning") return;
+
+      const now = Date.now();
+      if (now - lastClickTime < 300) {
+        opts.onSwitch();
+        lastClickTime = 0;
+        return;
+      }
+      lastClickTime = now;
+
+      if (e.modifiers?.alt) {
+        dragStartX = e.x;
+        dragStartY = e.y;
+        dragAnchorX = posX();
+        dragAnchorY = posY();
+        isDragging = true;
+        opts.setDragging(true);
+        e.preventDefault();
+        e.stopPropagation();
+        opts.clearSelection();
+      }
+    },
+    onMouseDrag(e: any) {
+      if (e.modifiers?.alt && isDragging) {
+        setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
+        setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
+        e.preventDefault();
+        e.stopPropagation();
+        opts.clearSelection();
+      }
+    },
+    onMouseUp() {
+      if (isDragging) {
+        isDragging = false;
+        opts.setDragging(false);
+        checkEdgeOnRelease();
+      }
+    },
+    onMouseDragEnd() {
+      if (isDragging) {
+        isDragging = false;
+        opts.setDragging(false);
+        checkEdgeOnRelease();
+      }
+    },
+  };
+
+  return { posX, posY, mouseProps, returnToView, isHidden: () => state === "edge_hidden" };
+}

package/src/core/ascii-renderer.tsx

@@ -48,6 +48,7 @@ export function createAnimatedRenderer(pack: MascotPack): {
   toggleWalk: () => void;
   setDragging: (v: boolean) => void;
   celebrateUpdate: (newVersion: string) => void;
+  bounce: () => void;
 } {
   const anim = { ...DEFAULT_ANIM, ...pack.animations };
   const fg = pack.colors?.defaultFg || undefined;
@@ -333,5 +334,13 @@ export function createAnimatedRenderer(pack: MascotPack): {
     tick();
   };
 
-  return { element, setState, toggleWalk, setDragging, celebrateUpdate };
+  const bounce = () => {
+    if (currentState() === "sleeping") setState("idle");
+    setJumpOffset(-3);
+    setTimeout(() => setJumpOffset(-2), 150);
+    setTimeout(() => setJumpOffset(-1), 300);
+    setTimeout(() => setJumpOffset(0), 450);
+  };
+
+  return { element, setState, toggleWalk, setDragging, celebrateUpdate, bounce };
 }