@mingxy/opencode-mascot 0.2.5 → 0.2.7

package/package.json

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

package/src/components/home-mascot.tsx

@@ -4,8 +4,7 @@ import { createSignal } from "solid-js";
 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";
+import { onCelebrate, onVersion } from "../core/celebration-bus";
 
 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,21 +40,14 @@ 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);
   });
 
+  onVersion((version) => {
+    renderers[currentName()].showVersion(version);
+  });
+
   return (
     <box
       left={posX()}
@@ -55,7 +55,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

@@ -4,8 +4,7 @@ import { createSignal } 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";
+import { onCelebrate, onVersion } from "../core/celebration-bus";
 
 interface SidebarMascotProps {
   mascots: Record<string, MascotPack>;
@@ -28,9 +27,6 @@ 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 =
@@ -39,6 +35,14 @@ 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)) {
@@ -51,29 +55,10 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     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);
-    }
-  };
-
   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 +68,7 @@ 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();
       renderers[currentName()].setState("busy");
     } else {
       setStateWithSwitch("idle");
@@ -100,12 +83,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();
     }
   });
 
@@ -117,6 +98,10 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     renderers[currentName()].celebrateUpdate(newVersion);
   });
 
+  onVersion((version) => {
+    renderers[currentName()].showVersion(version);
+  });
+
   return (
     <box
       position="absolute"
@@ -125,7 +110,48 @@ export function SidebarMascot(props: SidebarMascotProps): 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/core/ascii-renderer.tsx

@@ -4,6 +4,15 @@ import { createSignal, onCleanup } from "solid-js";
 import type { JSX } from "@opentui/solid";
 import type { MascotPack, MascotState, EffectTimerCtx, EffectRenderCtx } from "./types";
 
+const SUPERSCRIPT: Record<string, string> = {
+  "0": "⁰", "1": "¹", "2": "²", "3": "³", "4": "⁴",
+  "5": "⁵", "6": "⁶", "7": "⁷", "8": "⁸", "9": "⁹", ".": "·",
+};
+
+function toSuperscript(s: string): string {
+  return s.split("").map(c => SUPERSCRIPT[c] ?? c).join("");
+}
+
 const STATE_TO_FRAME: Record<MascotState, string> = {
   idle: "default",
   busy: "default",
@@ -49,6 +58,7 @@ export function createAnimatedRenderer(pack: MascotPack): {
   setDragging: (v: boolean) => void;
   celebrateUpdate: (newVersion: string) => void;
   bounce: () => void;
+  showVersion: (version: string) => void;
 } {
   const anim = { ...DEFAULT_ANIM, ...pack.animations };
   const fg = pack.colors?.defaultFg || undefined;
@@ -345,5 +355,10 @@ export function createAnimatedRenderer(pack: MascotPack): {
     setTimeout(() => setJumpOffset(0), 450);
   };
 
-  return { element, setState, toggleWalk, setDragging, celebrateUpdate, bounce };
+  const showVersion = (version: string) => {
+    setCelebrate({ text: `ᵛ${toSuperscript(version)}`, count: 0 });
+    setTimeout(() => setCelebrate(null), 3000);
+  };
+
+  return { element, setState, toggleWalk, setDragging, celebrateUpdate, bounce, showVersion };
 }

package/src/core/celebration-bus.ts

@@ -1,6 +1,7 @@
 const bus = new EventTarget();
 
 const CELEBRATE_EVENT = "mascot:celebrate";
+const VERSION_EVENT = "mascot:version";
 
 export function emitCelebrate(newVersion: string): void {
   bus.dispatchEvent(new CustomEvent(CELEBRATE_EVENT, { detail: { newVersion } }));
@@ -14,3 +15,16 @@ export function onCelebrate(handler: (newVersion: string) => void): () => void {
   bus.addEventListener(CELEBRATE_EVENT, listener);
   return () => bus.removeEventListener(CELEBRATE_EVENT, listener);
 }
+
+export function emitVersion(version: string): void {
+  bus.dispatchEvent(new CustomEvent(VERSION_EVENT, { detail: { version } }));
+}
+
+export function onVersion(handler: (version: string) => void): () => void {
+  const listener = (e: Event) => {
+    const detail = (e as CustomEvent).detail as { version: string };
+    handler(detail.version);
+  };
+  bus.addEventListener(VERSION_EVENT, listener);
+  return () => bus.removeEventListener(VERSION_EVENT, listener);
+}

package/tui.tsx

@@ -7,7 +7,7 @@ import { loadAllMascots } from "./src/core/mascot-loader"
 import { SidebarMascot } from "./src/components/sidebar-mascot"
 import { HomeMascot } from "./src/components/home-mascot"
 import { checkAndUpdate } from "./src/core/updater"
-import { emitCelebrate } from "./src/core/celebration-bus"
+import { emitCelebrate, emitVersion } from "./src/core/celebration-bus"
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -37,6 +37,8 @@ const tui: TuiPlugin = async (api, _options) => {
   checkAndUpdate(pluginVersion, (newVersion) => {
     emitCelebrate(newVersion);
   }).catch(() => {});
+
+  setTimeout(() => emitVersion(pluginVersion), 1500);
 }
 
 const plugin: TuiPluginModule = {

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" };
-}