@mingxy/opencode-mascot 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.2.6",
+  "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,7 +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 { onCelebrate, onVersion } from "../core/celebration-bus";
 
 interface HomeMascotProps {
   mascots: Record<string, MascotPack>;
@@ -44,6 +44,10 @@ export function HomeMascot(props: HomeMascotProps): JSX.Element {
     renderers[currentName()].celebrateUpdate(newVersion);
   });
 
+  onVersion((version) => {
+    renderers[currentName()].showVersion(version);
+  });
+
   return (
     <box
       left={posX()}

package/src/components/sidebar-mascot.tsx

@@ -1,10 +1,10 @@
 /** @jsxImportSource @opentui/solid */
 
-import { createSignal, onCleanup } from "solid-js";
+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 { onCelebrate, onVersion } from "../core/celebration-bus";
 
 interface SidebarMascotProps {
   mascots: Record<string, MascotPack>;
@@ -27,15 +27,6 @@ const DEFAULT_STATE_MAP: Partial<Record<MascotState, string>> = {
   sleeping: "baozi",
 };
 
-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);
   const initialName =
@@ -52,89 +43,18 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   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 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 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);
@@ -149,7 +69,6 @@ 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");
@@ -179,6 +98,10 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     renderers[currentName()].celebrateUpdate(newVersion);
   });
 
+  onVersion((version) => {
+    renderers[currentName()].showVersion(version);
+  });
+
   return (
     <box
       position="absolute"
@@ -188,8 +111,6 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       zIndex={100}
       flexDirection="column"
       onMouseDown={(e: any) => {
-        if (hideSide) { returnToView(); return; }
-
         const now = Date.now();
         if (now - lastClickTime < 300) {
           switchToNext();
@@ -212,8 +133,8 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
       }}
       onMouseDrag={(e: any) => {
         if (e.modifiers?.alt && isDragging) {
-          setPosX(clampX(dragAnchorX + (e.x - dragStartX)));
-          setPosY(clampY(dragAnchorY + (e.y - dragStartY)));
+          setPosX(dragAnchorX + (e.x - dragStartX));
+          setPosY(dragAnchorY + (e.y - dragStartY));
           e.preventDefault();
           e.stopPropagation();
           props.api.renderer.clearSelection();
@@ -223,14 +144,12 @@ 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();
         }
       }}
     >

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 = {