@mingxy/opencode-mascot 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mingxy/opencode-mascot",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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

@@ -4,7 +4,7 @@ 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 { onCelebrate, onVersion } from "../core/celebration-bus";
 
 interface SidebarMascotProps {
   mascots: Record<string, MascotPack>;
@@ -28,13 +28,9 @@ 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;
-}
+const EDGE_THRESHOLD = 3;
 
 export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   const names = Object.keys(props.mascots);
@@ -46,6 +42,7 @@ 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;
@@ -76,17 +73,40 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     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 w = termWidth();
+      const cw = getCw();
       if (hideSide === "left") {
         setPosX(-(MASCOT_WIDTH - PEEK) + stretch);
       } else if (hideSide === "right") {
-        setPosX(w - PEEK - stretch);
+        setPosX(cw - PEEK - stretch);
       }
     }, PEEK_INTERVAL);
   };
@@ -94,13 +114,14 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
   const returnToView = () => {
     if (!hideSide) return;
     stopPeek();
-    const w = termWidth();
+    const cw = getCw();
     const cur = posX();
-    const targetX = hideSide === "left" ? 0 : Math.max(0, w - MASCOT_WIDTH);
-    const step = targetX > cur ? 2 : -2;
+    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) <= 2) {
+      if (Math.abs(now - targetX) <= 1) {
         setPosX(targetX);
         stopReturn();
         hideSide = null;
@@ -111,30 +132,6 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     }, 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);
@@ -179,6 +176,10 @@ export function SidebarMascot(props: SidebarMascotProps): JSX.Element {
     renderers[currentName()].celebrateUpdate(newVersion);
   });
 
+  onVersion((version) => {
+    renderers[currentName()].showVersion(version);
+  });
+
   return (
     <box
       position="absolute"
@@ -187,6 +188,16 @@ 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; }
 

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