@mingxy/opencode-mascot 0.2.5 → 0.2.6

package/package.json

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

package/src/components/home-mascot.tsx

@@ -5,7 +5,6 @@ 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>;
@@ -21,6 +20,14 @@ 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)) {
@@ -33,17 +40,6 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
     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);
   });
@@ -55,7 +51,48 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
       alignItems="center"
       zIndex={100}
       flexDirection="column"
-      {...mouseProps}
+      onMouseDown={(e: any) => {
+        const now = Date.now();
+        if (now - lastClickTime < 300) {
+          switchToNext();
+          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);
+        }
+      }}
     >
       {renderers[currentName()]?.element() ?? null}
     </box>

package/src/components/sidebar-mascot.tsx

@@ -1,11 +1,10 @@
 /** @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";
 import { onCelebrate } from "../core/celebration-bus";
-import { useDraggableMascot } from "./use-draggable-mascot";
 
 interface SidebarMascotProps {
   mascots: Record<string, MascotPack>;
@@ -30,6 +29,12 @@ const DEFAULT_STATE_MAP: Partial<Record<MascotState, string>> = {
 
 const MASCOT_WIDTH = 10;
 const MASCOT_HEIGHT = 5;
+const PEEK = 2;
+const PEEK_INTERVAL = 1200;
+
+function termWidth(): number {
+  return (typeof process !== "undefined" && process.stdout?.columns) || 80;
+}
 
 export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   const names = Object.keys(props.mascots);
@@ -39,41 +44,101 @@ 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;
+  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 { 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 startPeek = () => {
+    stopPeek();
+    let phase = false;
+    peekTimer = setInterval(() => {
+      phase = !phase;
+      const stretch = phase ? PEEK : 0;
+      const w = termWidth();
+      if (hideSide === "left") {
+        setPosX(-(MASCOT_WIDTH - PEEK) + stretch);
+      } else if (hideSide === "right") {
+        setPosX(w - PEEK - stretch);
+      }
+    }, PEEK_INTERVAL);
+  };
 
-  const switchTo = (name: string) => {
-    if (props.mascots[name] && name !== currentName()) {
-      setCurrentName(name);
+  const returnToView = () => {
+    if (!hideSide) return;
+    stopPeek();
+    const w = termWidth();
+    const cur = posX();
+    const targetX = hideSide === "left" ? 0 : Math.max(0, w - MASCOT_WIDTH);
+    const step = targetX > cur ? 2 : -2;
+    returnTimer = setInterval(() => {
+      const now = posX();
+      if (Math.abs(now - targetX) <= 2) {
+        setPosX(targetX);
+        stopReturn();
+        hideSide = null;
+        renderers[currentName()].bounce();
+        return;
+      }
+      setPosX(now + step);
+    }, 16);
+  };
+
+  const checkEdge = () => {
+    const w = termWidth();
+    const x = posX();
+    if (x <= -(MASCOT_WIDTH - PEEK) + 1) {
+      hideSide = "left";
+      startPeek();
+    } else if (x >= w - PEEK - 1) {
+      hideSide = "right";
+      startPeek();
     }
   };
 
+  const clampX = (rawX: number): number => {
+    const w = termWidth();
+    const minX = -(MASCOT_WIDTH - PEEK);
+    const maxX = w - PEEK;
+    return Math.max(minX, Math.min(rawX, maxX));
+  };
+
+  const clampY = (rawY: number): number => {
+    const h = (typeof process !== "undefined" && process.stdout?.rows) || 24;
+    return Math.max(0, Math.min(rawY, h - MASCOT_HEIGHT));
+  };
+
   const setStateWithSwitch = (s: MascotState) => {
     const cur = currentName();
     renderers[cur].setState(s);
-
-    const stateMap = DEFAULT_STATE_MAP;
-    const target = stateMap[s];
+    const target = DEFAULT_STATE_MAP[s];
     if (target && target !== cur && props.mascots[target]) {
       setCurrentName(target);
       renderers[target].setState(s);
@@ -83,9 +148,8 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   props.api.event.on("session.status", (data: unknown) => {
     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();
+      if (hideSide) returnToView();
       renderers[currentName()].setState("busy");
     } else {
       setStateWithSwitch("idle");
@@ -100,12 +164,10 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   props.api.event.on("mascot.switch", (data: unknown) => {
     const target = data as { name?: string } | null;
     if (target?.name) {
-      switchTo(target.name);
+      const name = target.name;
+      if (props.mascots[name] && name !== currentName()) setCurrentName(name);
     } else {
-      const others = names.filter((n) => n !== currentName());
-      if (others.length > 0) {
-        switchTo(others[Math.floor(Math.random() * others.length)]);
-      }
+      switchToNext();
     }
   });
 
@@ -125,7 +187,52 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       alignItems="center"
       zIndex={100}
       flexDirection="column"
-      {...mouseProps}
+      onMouseDown={(e: any) => {
+        if (hideSide) { returnToView(); return; }
+
+        const now = Date.now();
+        if (now - lastClickTime < 300) {
+          switchToNext();
+          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(clampX(dragAnchorX + (e.x - dragStartX)));
+          setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
+          e.preventDefault();
+          e.stopPropagation();
+          props.api.renderer.clearSelection();
+        }
+      }}
+      onMouseUp={() => {
+        if (isDragging) {
+          isDragging = false;
+          renderers[currentName()].setDragging(false);
+          checkEdge();
+        }
+      }}
+      onMouseDragEnd={() => {
+        if (isDragging) {
+          isDragging = false;
+          renderers[currentName()].setDragging(false);
+          checkEdge();
+        }
+      }}
     >
       {renderers[currentName()]?.element() ?? null}
     </box>

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

@@ -1,187 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-
-import { createSignal, onCleanup, type Accessor } from "solid-js";
-
-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;
-}
-
-function getTermSize(): { width: number; height: number } {
-  const width = (typeof process !== "undefined" && process.stdout?.columns) || 80;
-  const height = (typeof process !== "undefined" && process.stdout?.rows) || 24;
-  return { width, height };
-}
-
-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);
-
-  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 } = getTermSize();
-    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 } = getTermSize();
-    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 } = getTermSize();
-      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 } = getTermSize();
-    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 } = getTermSize();
-    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" };
-}