bongocat-react 1.0.0 → 1.2.0

package/README.md

@@ -2,7 +2,11 @@
 
 A React component that adds an animated BongoCat overlay to your app. The cat reacts to keyboard typing and mouse clicks in real-time.
 
-Based on the sprite system from [BongoCat-mac](https://github.com/Gamma-Software/BongoCat-mac) (MIT licensed).
+<p align="center">
+  <img src="assets/bongocat.gif" alt="BongoCat demo" width="300" />
+</p>
+
+Built using [BongoCat-mac](https://github.com/Gamma-Software/BongoCat-mac) as reference (MIT licensed).
 
 ## Install
 
@@ -45,9 +49,57 @@ function App() {
 | `zIndex` | `number` | `9998` | z-index of the overlay |
 | `pulse` | `boolean` | `true` | Scale pulse animation on input |
 | `spriteMarginTop` | `string \| number` | `"37%"` | Margin-top on sprites to ground the cat visually |
+| `clickTooltip` | `boolean` | `true` | Show a fun tooltip when the cat is clicked |
+| `messages` | `string[]` | Built-in cat messages | Custom tooltip messages |
+| `messageDuration` | `number` | `2000` | How long the tooltip stays visible (ms) |
 | `className` | `string` | `""` | Additional CSS class |
 | `style` | `CSSProperties` | — | Additional inline styles |
 
+## Click Tooltip
+
+Click on the cat and it'll say something fun! Enabled by default with 13 built-in messages. Customize with your own:
+
+```tsx
+{/* Use built-in messages (default) */}
+<BongoCat />
+
+{/* Custom messages */}
+<BongoCat messages={["hire me!", "star this repo ⭐", "todo: take over world"]} />
+
+{/* Disable tooltip */}
+<BongoCat clickTooltip={false} />
+
+{/* Longer display */}
+<BongoCat messageDuration={5000} />
+```
+
+## Positioning
+
+By default, the cat sits in the **bottom-right corner**. Use `bottom`, `right`, and `style` to place it wherever you want:
+
+```tsx
+{/* Bottom-right (default) */}
+<BongoCat />
+
+{/* Bottom-left */}
+<BongoCat right="auto" style={{ left: 16 }} />
+
+{/* Top-right */}
+<BongoCat bottom="auto" style={{ top: 16 }} />
+
+{/* Top-left */}
+<BongoCat bottom="auto" right="auto" style={{ top: 16, left: 16 }} />
+
+{/* Centered at bottom */}
+<BongoCat right="auto" style={{ left: "50%", transform: "translateX(-50%)" }} />
+
+{/* Custom offset */}
+<BongoCat bottom={40} right={40} />
+
+{/* Bigger cat */}
+<BongoCat width={130} height={80} />
+```
+
 ## Privacy
 
 This package does not track, collect, or transmit any data. No analytics, no telemetry, no cookies. It's intentionally kept simple — just a lil kitty reacting to your keystrokes and clicks, entirely client-side.
@@ -57,7 +109,7 @@ This package does not track, collect, or transmit any data. No analytics, no tel
 - Listens to `keydown`/`keyup` on `document` and `mousedown`/`mouseup` on `window` (capture phase)
 - Maps physical key positions (`event.code`) to left/right paw — left-half keyboard keys move the left paw, right-half keys move the right paw
 - Left mouse click → left paw, right click → right paw
-- `pointer-events: none` — the cat never intercepts your clicks
+- Click on the cat → random fun tooltip message
 - Handles context menu stealing mouseup events
 
 ## Credits

package/dist/index.d.mts

@@ -18,11 +18,17 @@ interface BongoCatProps {
     pulse?: boolean;
     /** Margin-top applied to each sprite image to ground the cat visually. Defaults to "37%" */
     spriteMarginTop?: string | number;
+    /** Show a fun tooltip when the cat is clicked. Defaults to true */
+    clickTooltip?: boolean;
+    /** Custom tooltip messages. Uses built-in cat messages if not provided */
+    messages?: string[];
+    /** How long the tooltip stays visible in ms. Defaults to 2000 */
+    messageDuration?: number;
     /** Additional className on the container */
     className?: string;
     /** Additional inline styles on the container */
     style?: CSSProperties;
 }
-declare function BongoCat({ assetsPath, bottom, right, width, height, zIndex, pulse: pulseEnabled, spriteMarginTop, className, style: userStyle, }?: BongoCatProps): react_jsx_runtime.JSX.Element;
+declare function BongoCat({ assetsPath, bottom, right, width, height, zIndex, pulse: pulseEnabled, spriteMarginTop, clickTooltip, messages, messageDuration, className, style: userStyle, }?: BongoCatProps): react_jsx_runtime.JSX.Element;
 
 export { BongoCat, type BongoCatProps };

package/dist/index.d.ts

@@ -18,11 +18,17 @@ interface BongoCatProps {
     pulse?: boolean;
     /** Margin-top applied to each sprite image to ground the cat visually. Defaults to "37%" */
     spriteMarginTop?: string | number;
+    /** Show a fun tooltip when the cat is clicked. Defaults to true */
+    clickTooltip?: boolean;
+    /** Custom tooltip messages. Uses built-in cat messages if not provided */
+    messages?: string[];
+    /** How long the tooltip stays visible in ms. Defaults to 2000 */
+    messageDuration?: number;
     /** Additional className on the container */
     className?: string;
     /** Additional inline styles on the container */
     style?: CSSProperties;
 }
-declare function BongoCat({ assetsPath, bottom, right, width, height, zIndex, pulse: pulseEnabled, spriteMarginTop, className, style: userStyle, }?: BongoCatProps): react_jsx_runtime.JSX.Element;
+declare function BongoCat({ assetsPath, bottom, right, width, height, zIndex, pulse: pulseEnabled, spriteMarginTop, clickTooltip, messages, messageDuration, className, style: userStyle, }?: BongoCatProps): react_jsx_runtime.JSX.Element;
 
 export { BongoCat, type BongoCatProps };

package/dist/index.js

@@ -97,6 +97,35 @@ var RIGHT_KEYS = /* @__PURE__ */ new Set([
   "ArrowRight"
 ]);
 var MIN_ANIMATION_MS = 100;
+var DEFAULT_MESSAGES = [
+  "meow~ keep typing! \u{1F431}",
+  "purrr... nice clicks!",
+  "i'm helping! \u{1F43E}",
+  "*bonk bonk bonk*",
+  "nyaa~ don't mind me~",
+  "cats make everything better \u2728",
+  "10/10 typing form \u{1F44F}",
+  "*purring intensifies*",
+  "you're doing great, hooman!",
+  "boop! \u{1F43E}",
+  "feed me... with keystrokes",
+  "i sit on keyboard now",
+  "you type, i bonk \u{1F3B9}"
+];
+var tooltipStyle = {
+  position: "absolute",
+  top: -36,
+  right: 0,
+  whiteSpace: "nowrap",
+  borderRadius: 8,
+  backgroundColor: "#18181b",
+  color: "#fafafa",
+  padding: "6px 12px",
+  fontSize: 12,
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+  animation: "bongocat-fade-in 0.15s ease-out",
+  pointerEvents: "none"
+};
 var baseImgStyle = {
   position: "absolute",
   inset: 0,
@@ -114,13 +143,18 @@ function BongoCat({
   zIndex = 9998,
   pulse: pulseEnabled = true,
   spriteMarginTop = "37%",
+  clickTooltip = true,
+  messages = DEFAULT_MESSAGES,
+  messageDuration = 2e3,
   className = "",
   style: userStyle
 } = {}) {
   const [state, setState] = (0, import_react.useState)("idle");
   const [pulse, setPulse] = (0, import_react.useState)(false);
+  const [tooltipMsg, setTooltipMsg] = (0, import_react.useState)(null);
   const pawDownTimeRef = (0, import_react.useRef)(0);
   const idleTimerRef = (0, import_react.useRef)(void 0);
+  const tooltipTimerRef = (0, import_react.useRef)(void 0);
   const basePath = assetsPath.replace(/\/$/, "");
   const imgStyle = {
     ...baseImgStyle,
@@ -184,8 +218,15 @@ function BongoCat({
       window.removeEventListener("mouseup", onMouseUp, true);
       window.removeEventListener("contextmenu", onContextMenu, true);
       clearTimeout(idleTimerRef.current);
+      clearTimeout(tooltipTimerRef.current);
     };
   }, [returnToIdle, triggerPulse]);
+  const handleCatClick = (0, import_react.useCallback)(() => {
+    if (!clickTooltip || messages.length === 0) return;
+    clearTimeout(tooltipTimerRef.current);
+    setTooltipMsg(messages[Math.floor(Math.random() * messages.length)]);
+    tooltipTimerRef.current = setTimeout(() => setTooltipMsg(null), messageDuration);
+  }, [clickTooltip, messages, messageDuration]);
   const leftDown = state === "leftPawDown" || state === "bothPawsDown";
   const rightDown = state === "rightPawDown" || state === "bothPawsDown";
   const containerStyle = {
@@ -195,30 +236,42 @@ function BongoCat({
     width,
     height,
     zIndex,
-    pointerEvents: "none",
+    cursor: clickTooltip ? "pointer" : void 0,
     userSelect: "none",
     transform: pulse ? "scale(1.08)" : "scale(1)",
     transition: "transform 0.1s ease-out",
     ...userStyle
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: `${basePath}/base.png`, alt: "", draggable: false, style: imgStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "img",
-      {
-        src: leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`,
-        alt: "",
-        draggable: false,
-        style: imgStyle
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes bongocat-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
       {
-        src: rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`,
-        alt: "",
-        draggable: false,
-        style: imgStyle
+        className,
+        style: containerStyle,
+        onClick: handleCatClick,
+        children: [
+          tooltipMsg && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: tooltipStyle, children: tooltipMsg }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: `${basePath}/base.png`, alt: "", draggable: false, style: imgStyle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`,
+              alt: "",
+              draggable: false,
+              style: imgStyle
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`,
+              alt: "",
+              draggable: false,
+              style: imgStyle
+            }
+          )
+        ]
       }
     )
   ] });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/bongo-cat.tsx"],"sourcesContent":["export { BongoCat } from \"./bongo-cat\";\nexport type { BongoCatProps } from \"./bongo-cat\";\n","import { useState, useEffect, useRef, useCallback, CSSProperties } from \"react\";\n\ntype CatState = \"idle\" | \"leftPawDown\" | \"rightPawDown\" | \"bothPawsDown\";\n\nexport interface BongoCatProps {\n  /** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to \"/bongo-cat\" */\n  assetsPath?: string;\n  /** CSS bottom offset. Defaults to 16 */\n  bottom?: number | string;\n  /** CSS right offset. Defaults to 16 */\n  right?: number | string;\n  /** Width in px. Defaults to 65 */\n  width?: number;\n  /** Height in px. Defaults to 40 */\n  height?: number;\n  /** z-index. Defaults to 9998 */\n  zIndex?: number;\n  /** Enable scale pulse on input. Defaults to true */\n  pulse?: boolean;\n  /** Margin-top applied to each sprite image to ground the cat visually. Defaults to \"37%\" */\n  spriteMarginTop?: string | number;\n  /** Additional className on the container */\n  className?: string;\n  /** Additional inline styles on the container */\n  style?: CSSProperties;\n}\n\n// Physical key codes for the left side of the keyboard\nconst LEFT_KEYS = new Set([\n  \"Digit1\", \"Digit2\", \"Digit3\", \"Digit4\", \"Digit5\",\n  \"KeyQ\", \"KeyW\", \"KeyE\", \"KeyR\", \"KeyT\",\n  \"KeyA\", \"KeyS\", \"KeyD\", \"KeyF\", \"KeyG\",\n  \"KeyZ\", \"KeyX\", \"KeyC\", \"KeyV\", \"KeyB\",\n  \"Tab\", \"CapsLock\", \"ShiftLeft\", \"ControlLeft\", \"AltLeft\", \"MetaLeft\",\n  \"Backquote\", \"Escape\",\n]);\n\nconst RIGHT_KEYS = new Set([\n  \"Digit6\", \"Digit7\", \"Digit8\", \"Digit9\", \"Digit0\",\n  \"KeyY\", \"KeyU\", \"KeyI\", \"KeyO\", \"KeyP\",\n  \"KeyH\", \"KeyJ\", \"KeyK\", \"KeyL\",\n  \"KeyN\", \"KeyM\",\n  \"Enter\", \"Backspace\", \"Delete\", \"ShiftRight\", \"ControlRight\", \"AltRight\", \"MetaRight\",\n  \"BracketLeft\", \"BracketRight\", \"Backslash\", \"Semicolon\", \"Quote\",\n  \"Comma\", \"Period\", \"Slash\", \"Minus\", \"Equal\",\n  \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\",\n]);\n\nconst MIN_ANIMATION_MS = 100;\n\nconst baseImgStyle: CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n  objectFit: \"contain\",\n  pointerEvents: \"none\",\n};\n\nexport function BongoCat({\n  assetsPath = \"/bongo-cat\",\n  bottom = 16,\n  right = 16,\n  width = 65,\n  height = 40,\n  zIndex = 9998,\n  pulse: pulseEnabled = true,\n  spriteMarginTop = \"37%\",\n  className = \"\",\n  style: userStyle,\n}: BongoCatProps = {}) {\n  const [state, setState] = useState<CatState>(\"idle\");\n  const [pulse, setPulse] = useState(false);\n  const pawDownTimeRef = useRef(0);\n  const idleTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const basePath = assetsPath.replace(/\\/$/, \"\");\n\n  const imgStyle: CSSProperties = {\n    ...baseImgStyle,\n    marginTop: typeof spriteMarginTop === \"number\" ? `${spriteMarginTop}px` : spriteMarginTop,\n  };\n\n  const returnToIdle = useCallback(() => {\n    const elapsed = Date.now() - pawDownTimeRef.current;\n    const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);\n\n    clearTimeout(idleTimerRef.current);\n    idleTimerRef.current = setTimeout(() => setState(\"idle\"), remaining);\n  }, []);\n\n  const triggerPulse = useCallback(() => {\n    if (!pulseEnabled) return;\n    setPulse(true);\n    requestAnimationFrame(() => {\n      setTimeout(() => setPulse(false), 150);\n    });\n  }, [pulseEnabled]);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.repeat) return;\n\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (LEFT_KEYS.has(e.code)) {\n        setState(\"leftPawDown\");\n      } else if (RIGHT_KEYS.has(e.code)) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(e.code.charCodeAt(0) % 2 === 0 ? \"leftPawDown\" : \"rightPawDown\");\n      }\n    };\n\n    const onKeyUp = () => {\n      returnToIdle();\n    };\n\n    const onMouseDown = (e: MouseEvent) => {\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (e.button === 2) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(\"leftPawDown\");\n      }\n    };\n\n    const onMouseUp = () => {\n      returnToIdle();\n    };\n\n    const onContextMenu = () => {\n      returnToIdle();\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"keyup\", onKeyUp);\n    window.addEventListener(\"mousedown\", onMouseDown, true);\n    window.addEventListener(\"mouseup\", onMouseUp, true);\n    window.addEventListener(\"contextmenu\", onContextMenu, true);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"keyup\", onKeyUp);\n      window.removeEventListener(\"mousedown\", onMouseDown, true);\n      window.removeEventListener(\"mouseup\", onMouseUp, true);\n      window.removeEventListener(\"contextmenu\", onContextMenu, true);\n      clearTimeout(idleTimerRef.current);\n    };\n  }, [returnToIdle, triggerPulse]);\n\n  const leftDown = state === \"leftPawDown\" || state === \"bothPawsDown\";\n  const rightDown = state === \"rightPawDown\" || state === \"bothPawsDown\";\n\n  const containerStyle: CSSProperties = {\n    position: \"fixed\",\n    bottom: typeof bottom === \"number\" ? `${bottom}px` : bottom,\n    right: typeof right === \"number\" ? `${right}px` : right,\n    width,\n    height,\n    zIndex,\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    transform: pulse ? \"scale(1.08)\" : \"scale(1)\",\n    transition: \"transform 0.1s ease-out\",\n    ...userStyle,\n  };\n\n  return (\n    <div className={className} style={containerStyle}>\n      <img src={`${basePath}/base.png`} alt=\"\" draggable={false} style={imgStyle} />\n      <img\n        src={leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`}\n        alt=\"\"\n        draggable={false}\n        style={imgStyle}\n      />\n      <img\n        src={rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`}\n        alt=\"\"\n        draggable={false}\n        style={imgStyle}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/bongo-cat.tsx"],"sourcesContent":["export { BongoCat } from \"./bongo-cat\";\nexport type { BongoCatProps } from \"./bongo-cat\";\n","import { useState, useEffect, useRef, useCallback, CSSProperties } from \"react\";\n\ntype CatState = \"idle\" | \"leftPawDown\" | \"rightPawDown\" | \"bothPawsDown\";\n\nexport interface BongoCatProps {\n  /** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to \"/bongo-cat\" */\n  assetsPath?: string;\n  /** CSS bottom offset. Defaults to 16 */\n  bottom?: number | string;\n  /** CSS right offset. Defaults to 16 */\n  right?: number | string;\n  /** Width in px. Defaults to 65 */\n  width?: number;\n  /** Height in px. Defaults to 40 */\n  height?: number;\n  /** z-index. Defaults to 9998 */\n  zIndex?: number;\n  /** Enable scale pulse on input. Defaults to true */\n  pulse?: boolean;\n  /** Margin-top applied to each sprite image to ground the cat visually. Defaults to \"37%\" */\n  spriteMarginTop?: string | number;\n  /** Show a fun tooltip when the cat is clicked. Defaults to true */\n  clickTooltip?: boolean;\n  /** Custom tooltip messages. Uses built-in cat messages if not provided */\n  messages?: string[];\n  /** How long the tooltip stays visible in ms. Defaults to 2000 */\n  messageDuration?: number;\n  /** Additional className on the container */\n  className?: string;\n  /** Additional inline styles on the container */\n  style?: CSSProperties;\n}\n\n// Physical key codes for the left side of the keyboard\nconst LEFT_KEYS = new Set([\n  \"Digit1\", \"Digit2\", \"Digit3\", \"Digit4\", \"Digit5\",\n  \"KeyQ\", \"KeyW\", \"KeyE\", \"KeyR\", \"KeyT\",\n  \"KeyA\", \"KeyS\", \"KeyD\", \"KeyF\", \"KeyG\",\n  \"KeyZ\", \"KeyX\", \"KeyC\", \"KeyV\", \"KeyB\",\n  \"Tab\", \"CapsLock\", \"ShiftLeft\", \"ControlLeft\", \"AltLeft\", \"MetaLeft\",\n  \"Backquote\", \"Escape\",\n]);\n\nconst RIGHT_KEYS = new Set([\n  \"Digit6\", \"Digit7\", \"Digit8\", \"Digit9\", \"Digit0\",\n  \"KeyY\", \"KeyU\", \"KeyI\", \"KeyO\", \"KeyP\",\n  \"KeyH\", \"KeyJ\", \"KeyK\", \"KeyL\",\n  \"KeyN\", \"KeyM\",\n  \"Enter\", \"Backspace\", \"Delete\", \"ShiftRight\", \"ControlRight\", \"AltRight\", \"MetaRight\",\n  \"BracketLeft\", \"BracketRight\", \"Backslash\", \"Semicolon\", \"Quote\",\n  \"Comma\", \"Period\", \"Slash\", \"Minus\", \"Equal\",\n  \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\",\n]);\n\nconst MIN_ANIMATION_MS = 100;\n\nconst DEFAULT_MESSAGES = [\n  \"meow~ keep typing! 🐱\",\n  \"purrr... nice clicks!\",\n  \"i'm helping! 🐾\",\n  \"*bonk bonk bonk*\",\n  \"nyaa~ don't mind me~\",\n  \"cats make everything better ✨\",\n  \"10/10 typing form 👏\",\n  \"*purring intensifies*\",\n  \"you're doing great, hooman!\",\n  \"boop! 🐾\",\n  \"feed me... with keystrokes\",\n  \"i sit on keyboard now\",\n  \"you type, i bonk 🎹\",\n];\n\nconst tooltipStyle: CSSProperties = {\n  position: \"absolute\",\n  top: -36,\n  right: 0,\n  whiteSpace: \"nowrap\",\n  borderRadius: 8,\n  backgroundColor: \"#18181b\",\n  color: \"#fafafa\",\n  padding: \"6px 12px\",\n  fontSize: 12,\n  boxShadow: \"0 4px 12px rgba(0,0,0,0.15)\",\n  animation: \"bongocat-fade-in 0.15s ease-out\",\n  pointerEvents: \"none\",\n};\n\nconst baseImgStyle: CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n  objectFit: \"contain\",\n  pointerEvents: \"none\",\n};\n\nexport function BongoCat({\n  assetsPath = \"/bongo-cat\",\n  bottom = 16,\n  right = 16,\n  width = 65,\n  height = 40,\n  zIndex = 9998,\n  pulse: pulseEnabled = true,\n  spriteMarginTop = \"37%\",\n  clickTooltip = true,\n  messages = DEFAULT_MESSAGES,\n  messageDuration = 2000,\n  className = \"\",\n  style: userStyle,\n}: BongoCatProps = {}) {\n  const [state, setState] = useState<CatState>(\"idle\");\n  const [pulse, setPulse] = useState(false);\n  const [tooltipMsg, setTooltipMsg] = useState<string | null>(null);\n  const pawDownTimeRef = useRef(0);\n  const idleTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const tooltipTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const basePath = assetsPath.replace(/\\/$/, \"\");\n\n  const imgStyle: CSSProperties = {\n    ...baseImgStyle,\n    marginTop: typeof spriteMarginTop === \"number\" ? `${spriteMarginTop}px` : spriteMarginTop,\n  };\n\n  const returnToIdle = useCallback(() => {\n    const elapsed = Date.now() - pawDownTimeRef.current;\n    const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);\n\n    clearTimeout(idleTimerRef.current);\n    idleTimerRef.current = setTimeout(() => setState(\"idle\"), remaining);\n  }, []);\n\n  const triggerPulse = useCallback(() => {\n    if (!pulseEnabled) return;\n    setPulse(true);\n    requestAnimationFrame(() => {\n      setTimeout(() => setPulse(false), 150);\n    });\n  }, [pulseEnabled]);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.repeat) return;\n\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (LEFT_KEYS.has(e.code)) {\n        setState(\"leftPawDown\");\n      } else if (RIGHT_KEYS.has(e.code)) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(e.code.charCodeAt(0) % 2 === 0 ? \"leftPawDown\" : \"rightPawDown\");\n      }\n    };\n\n    const onKeyUp = () => {\n      returnToIdle();\n    };\n\n    const onMouseDown = (e: MouseEvent) => {\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (e.button === 2) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(\"leftPawDown\");\n      }\n    };\n\n    const onMouseUp = () => {\n      returnToIdle();\n    };\n\n    const onContextMenu = () => {\n      returnToIdle();\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"keyup\", onKeyUp);\n    window.addEventListener(\"mousedown\", onMouseDown, true);\n    window.addEventListener(\"mouseup\", onMouseUp, true);\n    window.addEventListener(\"contextmenu\", onContextMenu, true);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"keyup\", onKeyUp);\n      window.removeEventListener(\"mousedown\", onMouseDown, true);\n      window.removeEventListener(\"mouseup\", onMouseUp, true);\n      window.removeEventListener(\"contextmenu\", onContextMenu, true);\n      clearTimeout(idleTimerRef.current);\n      clearTimeout(tooltipTimerRef.current);\n    };\n  }, [returnToIdle, triggerPulse]);\n\n  const handleCatClick = useCallback(() => {\n    if (!clickTooltip || messages.length === 0) return;\n    clearTimeout(tooltipTimerRef.current);\n    setTooltipMsg(messages[Math.floor(Math.random() * messages.length)]);\n    tooltipTimerRef.current = setTimeout(() => setTooltipMsg(null), messageDuration);\n  }, [clickTooltip, messages, messageDuration]);\n\n  const leftDown = state === \"leftPawDown\" || state === \"bothPawsDown\";\n  const rightDown = state === \"rightPawDown\" || state === \"bothPawsDown\";\n\n  const containerStyle: CSSProperties = {\n    position: \"fixed\",\n    bottom: typeof bottom === \"number\" ? `${bottom}px` : bottom,\n    right: typeof right === \"number\" ? `${right}px` : right,\n    width,\n    height,\n    zIndex,\n    cursor: clickTooltip ? \"pointer\" : undefined,\n    userSelect: \"none\",\n    transform: pulse ? \"scale(1.08)\" : \"scale(1)\",\n    transition: \"transform 0.1s ease-out\",\n    ...userStyle,\n  };\n\n  return (\n    <>\n      <style>{`@keyframes bongocat-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`}</style>\n      <div\n        className={className}\n        style={containerStyle}\n        onClick={handleCatClick}\n      >\n        {tooltipMsg && <div style={tooltipStyle}>{tooltipMsg}</div>}\n        <img src={`${basePath}/base.png`} alt=\"\" draggable={false} style={imgStyle} />\n        <img\n          src={leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`}\n          alt=\"\"\n          draggable={false}\n          style={imgStyle}\n        />\n        <img\n          src={rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`}\n          alt=\"\"\n          draggable={false}\n          style={imgStyle}\n        />\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/bongo-cat.tsx
 import { useState, useEffect, useRef, useCallback } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LEFT_KEYS = /* @__PURE__ */ new Set([
   "Digit1",
   "Digit2",
@@ -71,6 +71,35 @@ var RIGHT_KEYS = /* @__PURE__ */ new Set([
   "ArrowRight"
 ]);
 var MIN_ANIMATION_MS = 100;
+var DEFAULT_MESSAGES = [
+  "meow~ keep typing! \u{1F431}",
+  "purrr... nice clicks!",
+  "i'm helping! \u{1F43E}",
+  "*bonk bonk bonk*",
+  "nyaa~ don't mind me~",
+  "cats make everything better \u2728",
+  "10/10 typing form \u{1F44F}",
+  "*purring intensifies*",
+  "you're doing great, hooman!",
+  "boop! \u{1F43E}",
+  "feed me... with keystrokes",
+  "i sit on keyboard now",
+  "you type, i bonk \u{1F3B9}"
+];
+var tooltipStyle = {
+  position: "absolute",
+  top: -36,
+  right: 0,
+  whiteSpace: "nowrap",
+  borderRadius: 8,
+  backgroundColor: "#18181b",
+  color: "#fafafa",
+  padding: "6px 12px",
+  fontSize: 12,
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+  animation: "bongocat-fade-in 0.15s ease-out",
+  pointerEvents: "none"
+};
 var baseImgStyle = {
   position: "absolute",
   inset: 0,
@@ -88,13 +117,18 @@ function BongoCat({
   zIndex = 9998,
   pulse: pulseEnabled = true,
   spriteMarginTop = "37%",
+  clickTooltip = true,
+  messages = DEFAULT_MESSAGES,
+  messageDuration = 2e3,
   className = "",
   style: userStyle
 } = {}) {
   const [state, setState] = useState("idle");
   const [pulse, setPulse] = useState(false);
+  const [tooltipMsg, setTooltipMsg] = useState(null);
   const pawDownTimeRef = useRef(0);
   const idleTimerRef = useRef(void 0);
+  const tooltipTimerRef = useRef(void 0);
   const basePath = assetsPath.replace(/\/$/, "");
   const imgStyle = {
     ...baseImgStyle,
@@ -158,8 +192,15 @@ function BongoCat({
       window.removeEventListener("mouseup", onMouseUp, true);
       window.removeEventListener("contextmenu", onContextMenu, true);
       clearTimeout(idleTimerRef.current);
+      clearTimeout(tooltipTimerRef.current);
     };
   }, [returnToIdle, triggerPulse]);
+  const handleCatClick = useCallback(() => {
+    if (!clickTooltip || messages.length === 0) return;
+    clearTimeout(tooltipTimerRef.current);
+    setTooltipMsg(messages[Math.floor(Math.random() * messages.length)]);
+    tooltipTimerRef.current = setTimeout(() => setTooltipMsg(null), messageDuration);
+  }, [clickTooltip, messages, messageDuration]);
   const leftDown = state === "leftPawDown" || state === "bothPawsDown";
   const rightDown = state === "rightPawDown" || state === "bothPawsDown";
   const containerStyle = {
@@ -169,30 +210,42 @@ function BongoCat({
     width,
     height,
     zIndex,
-    pointerEvents: "none",
+    cursor: clickTooltip ? "pointer" : void 0,
     userSelect: "none",
     transform: pulse ? "scale(1.08)" : "scale(1)",
     transition: "transform 0.1s ease-out",
     ...userStyle
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
-    /* @__PURE__ */ jsx("img", { src: `${basePath}/base.png`, alt: "", draggable: false, style: imgStyle }),
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`,
-        alt: "",
-        draggable: false,
-        style: imgStyle
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "img",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `@keyframes bongocat-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}` }),
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        src: rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`,
-        alt: "",
-        draggable: false,
-        style: imgStyle
+        className,
+        style: containerStyle,
+        onClick: handleCatClick,
+        children: [
+          tooltipMsg && /* @__PURE__ */ jsx("div", { style: tooltipStyle, children: tooltipMsg }),
+          /* @__PURE__ */ jsx("img", { src: `${basePath}/base.png`, alt: "", draggable: false, style: imgStyle }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`,
+              alt: "",
+              draggable: false,
+              style: imgStyle
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`,
+              alt: "",
+              draggable: false,
+              style: imgStyle
+            }
+          )
+        ]
       }
     )
   ] });

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/bongo-cat.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback, CSSProperties } from \"react\";\n\ntype CatState = \"idle\" | \"leftPawDown\" | \"rightPawDown\" | \"bothPawsDown\";\n\nexport interface BongoCatProps {\n  /** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to \"/bongo-cat\" */\n  assetsPath?: string;\n  /** CSS bottom offset. Defaults to 16 */\n  bottom?: number | string;\n  /** CSS right offset. Defaults to 16 */\n  right?: number | string;\n  /** Width in px. Defaults to 65 */\n  width?: number;\n  /** Height in px. Defaults to 40 */\n  height?: number;\n  /** z-index. Defaults to 9998 */\n  zIndex?: number;\n  /** Enable scale pulse on input. Defaults to true */\n  pulse?: boolean;\n  /** Margin-top applied to each sprite image to ground the cat visually. Defaults to \"37%\" */\n  spriteMarginTop?: string | number;\n  /** Additional className on the container */\n  className?: string;\n  /** Additional inline styles on the container */\n  style?: CSSProperties;\n}\n\n// Physical key codes for the left side of the keyboard\nconst LEFT_KEYS = new Set([\n  \"Digit1\", \"Digit2\", \"Digit3\", \"Digit4\", \"Digit5\",\n  \"KeyQ\", \"KeyW\", \"KeyE\", \"KeyR\", \"KeyT\",\n  \"KeyA\", \"KeyS\", \"KeyD\", \"KeyF\", \"KeyG\",\n  \"KeyZ\", \"KeyX\", \"KeyC\", \"KeyV\", \"KeyB\",\n  \"Tab\", \"CapsLock\", \"ShiftLeft\", \"ControlLeft\", \"AltLeft\", \"MetaLeft\",\n  \"Backquote\", \"Escape\",\n]);\n\nconst RIGHT_KEYS = new Set([\n  \"Digit6\", \"Digit7\", \"Digit8\", \"Digit9\", \"Digit0\",\n  \"KeyY\", \"KeyU\", \"KeyI\", \"KeyO\", \"KeyP\",\n  \"KeyH\", \"KeyJ\", \"KeyK\", \"KeyL\",\n  \"KeyN\", \"KeyM\",\n  \"Enter\", \"Backspace\", \"Delete\", \"ShiftRight\", \"ControlRight\", \"AltRight\", \"MetaRight\",\n  \"BracketLeft\", \"BracketRight\", \"Backslash\", \"Semicolon\", \"Quote\",\n  \"Comma\", \"Period\", \"Slash\", \"Minus\", \"Equal\",\n  \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\",\n]);\n\nconst MIN_ANIMATION_MS = 100;\n\nconst baseImgStyle: CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n  objectFit: \"contain\",\n  pointerEvents: \"none\",\n};\n\nexport function BongoCat({\n  assetsPath = \"/bongo-cat\",\n  bottom = 16,\n  right = 16,\n  width = 65,\n  height = 40,\n  zIndex = 9998,\n  pulse: pulseEnabled = true,\n  spriteMarginTop = \"37%\",\n  className = \"\",\n  style: userStyle,\n}: BongoCatProps = {}) {\n  const [state, setState] = useState<CatState>(\"idle\");\n  const [pulse, setPulse] = useState(false);\n  const pawDownTimeRef = useRef(0);\n  const idleTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const basePath = assetsPath.replace(/\\/$/, \"\");\n\n  const imgStyle: CSSProperties = {\n    ...baseImgStyle,\n    marginTop: typeof spriteMarginTop === \"number\" ? `${spriteMarginTop}px` : spriteMarginTop,\n  };\n\n  const returnToIdle = useCallback(() => {\n    const elapsed = Date.now() - pawDownTimeRef.current;\n    const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);\n\n    clearTimeout(idleTimerRef.current);\n    idleTimerRef.current = setTimeout(() => setState(\"idle\"), remaining);\n  }, []);\n\n  const triggerPulse = useCallback(() => {\n    if (!pulseEnabled) return;\n    setPulse(true);\n    requestAnimationFrame(() => {\n      setTimeout(() => setPulse(false), 150);\n    });\n  }, [pulseEnabled]);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.repeat) return;\n\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (LEFT_KEYS.has(e.code)) {\n        setState(\"leftPawDown\");\n      } else if (RIGHT_KEYS.has(e.code)) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(e.code.charCodeAt(0) % 2 === 0 ? \"leftPawDown\" : \"rightPawDown\");\n      }\n    };\n\n    const onKeyUp = () => {\n      returnToIdle();\n    };\n\n    const onMouseDown = (e: MouseEvent) => {\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (e.button === 2) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(\"leftPawDown\");\n      }\n    };\n\n    const onMouseUp = () => {\n      returnToIdle();\n    };\n\n    const onContextMenu = () => {\n      returnToIdle();\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"keyup\", onKeyUp);\n    window.addEventListener(\"mousedown\", onMouseDown, true);\n    window.addEventListener(\"mouseup\", onMouseUp, true);\n    window.addEventListener(\"contextmenu\", onContextMenu, true);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"keyup\", onKeyUp);\n      window.removeEventListener(\"mousedown\", onMouseDown, true);\n      window.removeEventListener(\"mouseup\", onMouseUp, true);\n      window.removeEventListener(\"contextmenu\", onContextMenu, true);\n      clearTimeout(idleTimerRef.current);\n    };\n  }, [returnToIdle, triggerPulse]);\n\n  const leftDown = state === \"leftPawDown\" || state === \"bothPawsDown\";\n  const rightDown = state === \"rightPawDown\" || state === \"bothPawsDown\";\n\n  const containerStyle: CSSProperties = {\n    position: \"fixed\",\n    bottom: typeof bottom === \"number\" ? `${bottom}px` : bottom,\n    right: typeof right === \"number\" ? `${right}px` : right,\n    width,\n    height,\n    zIndex,\n    pointerEvents: \"none\",\n    userSelect: \"none\",\n    transform: pulse ? \"scale(1.08)\" : \"scale(1)\",\n    transition: \"transform 0.1s ease-out\",\n    ...userStyle,\n  };\n\n  return (\n    <div className={className} style={containerStyle}>\n      <img src={`${basePath}/base.png`} alt=\"\" draggable={false} style={imgStyle} />\n      <img\n        src={leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`}\n        alt=\"\"\n        draggable={false}\n        style={imgStyle}\n      />\n      <img\n        src={rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`}\n        alt=\"\"\n        draggable={false}\n        style={imgStyle}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/bongo-cat.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useCallback, CSSProperties } from \"react\";\n\ntype CatState = \"idle\" | \"leftPawDown\" | \"rightPawDown\" | \"bothPawsDown\";\n\nexport interface BongoCatProps {\n  /** Base URL path to the sprite assets directory (must contain base.png, left-up.png, left-down.png, right-up.png, right-down.png). Defaults to \"/bongo-cat\" */\n  assetsPath?: string;\n  /** CSS bottom offset. Defaults to 16 */\n  bottom?: number | string;\n  /** CSS right offset. Defaults to 16 */\n  right?: number | string;\n  /** Width in px. Defaults to 65 */\n  width?: number;\n  /** Height in px. Defaults to 40 */\n  height?: number;\n  /** z-index. Defaults to 9998 */\n  zIndex?: number;\n  /** Enable scale pulse on input. Defaults to true */\n  pulse?: boolean;\n  /** Margin-top applied to each sprite image to ground the cat visually. Defaults to \"37%\" */\n  spriteMarginTop?: string | number;\n  /** Show a fun tooltip when the cat is clicked. Defaults to true */\n  clickTooltip?: boolean;\n  /** Custom tooltip messages. Uses built-in cat messages if not provided */\n  messages?: string[];\n  /** How long the tooltip stays visible in ms. Defaults to 2000 */\n  messageDuration?: number;\n  /** Additional className on the container */\n  className?: string;\n  /** Additional inline styles on the container */\n  style?: CSSProperties;\n}\n\n// Physical key codes for the left side of the keyboard\nconst LEFT_KEYS = new Set([\n  \"Digit1\", \"Digit2\", \"Digit3\", \"Digit4\", \"Digit5\",\n  \"KeyQ\", \"KeyW\", \"KeyE\", \"KeyR\", \"KeyT\",\n  \"KeyA\", \"KeyS\", \"KeyD\", \"KeyF\", \"KeyG\",\n  \"KeyZ\", \"KeyX\", \"KeyC\", \"KeyV\", \"KeyB\",\n  \"Tab\", \"CapsLock\", \"ShiftLeft\", \"ControlLeft\", \"AltLeft\", \"MetaLeft\",\n  \"Backquote\", \"Escape\",\n]);\n\nconst RIGHT_KEYS = new Set([\n  \"Digit6\", \"Digit7\", \"Digit8\", \"Digit9\", \"Digit0\",\n  \"KeyY\", \"KeyU\", \"KeyI\", \"KeyO\", \"KeyP\",\n  \"KeyH\", \"KeyJ\", \"KeyK\", \"KeyL\",\n  \"KeyN\", \"KeyM\",\n  \"Enter\", \"Backspace\", \"Delete\", \"ShiftRight\", \"ControlRight\", \"AltRight\", \"MetaRight\",\n  \"BracketLeft\", \"BracketRight\", \"Backslash\", \"Semicolon\", \"Quote\",\n  \"Comma\", \"Period\", \"Slash\", \"Minus\", \"Equal\",\n  \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\",\n]);\n\nconst MIN_ANIMATION_MS = 100;\n\nconst DEFAULT_MESSAGES = [\n  \"meow~ keep typing! 🐱\",\n  \"purrr... nice clicks!\",\n  \"i'm helping! 🐾\",\n  \"*bonk bonk bonk*\",\n  \"nyaa~ don't mind me~\",\n  \"cats make everything better ✨\",\n  \"10/10 typing form 👏\",\n  \"*purring intensifies*\",\n  \"you're doing great, hooman!\",\n  \"boop! 🐾\",\n  \"feed me... with keystrokes\",\n  \"i sit on keyboard now\",\n  \"you type, i bonk 🎹\",\n];\n\nconst tooltipStyle: CSSProperties = {\n  position: \"absolute\",\n  top: -36,\n  right: 0,\n  whiteSpace: \"nowrap\",\n  borderRadius: 8,\n  backgroundColor: \"#18181b\",\n  color: \"#fafafa\",\n  padding: \"6px 12px\",\n  fontSize: 12,\n  boxShadow: \"0 4px 12px rgba(0,0,0,0.15)\",\n  animation: \"bongocat-fade-in 0.15s ease-out\",\n  pointerEvents: \"none\",\n};\n\nconst baseImgStyle: CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n  objectFit: \"contain\",\n  pointerEvents: \"none\",\n};\n\nexport function BongoCat({\n  assetsPath = \"/bongo-cat\",\n  bottom = 16,\n  right = 16,\n  width = 65,\n  height = 40,\n  zIndex = 9998,\n  pulse: pulseEnabled = true,\n  spriteMarginTop = \"37%\",\n  clickTooltip = true,\n  messages = DEFAULT_MESSAGES,\n  messageDuration = 2000,\n  className = \"\",\n  style: userStyle,\n}: BongoCatProps = {}) {\n  const [state, setState] = useState<CatState>(\"idle\");\n  const [pulse, setPulse] = useState(false);\n  const [tooltipMsg, setTooltipMsg] = useState<string | null>(null);\n  const pawDownTimeRef = useRef(0);\n  const idleTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const tooltipTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const basePath = assetsPath.replace(/\\/$/, \"\");\n\n  const imgStyle: CSSProperties = {\n    ...baseImgStyle,\n    marginTop: typeof spriteMarginTop === \"number\" ? `${spriteMarginTop}px` : spriteMarginTop,\n  };\n\n  const returnToIdle = useCallback(() => {\n    const elapsed = Date.now() - pawDownTimeRef.current;\n    const remaining = Math.max(0, MIN_ANIMATION_MS - elapsed);\n\n    clearTimeout(idleTimerRef.current);\n    idleTimerRef.current = setTimeout(() => setState(\"idle\"), remaining);\n  }, []);\n\n  const triggerPulse = useCallback(() => {\n    if (!pulseEnabled) return;\n    setPulse(true);\n    requestAnimationFrame(() => {\n      setTimeout(() => setPulse(false), 150);\n    });\n  }, [pulseEnabled]);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.repeat) return;\n\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (LEFT_KEYS.has(e.code)) {\n        setState(\"leftPawDown\");\n      } else if (RIGHT_KEYS.has(e.code)) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(e.code.charCodeAt(0) % 2 === 0 ? \"leftPawDown\" : \"rightPawDown\");\n      }\n    };\n\n    const onKeyUp = () => {\n      returnToIdle();\n    };\n\n    const onMouseDown = (e: MouseEvent) => {\n      pawDownTimeRef.current = Date.now();\n      clearTimeout(idleTimerRef.current);\n      triggerPulse();\n\n      if (e.button === 2) {\n        setState(\"rightPawDown\");\n      } else {\n        setState(\"leftPawDown\");\n      }\n    };\n\n    const onMouseUp = () => {\n      returnToIdle();\n    };\n\n    const onContextMenu = () => {\n      returnToIdle();\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"keyup\", onKeyUp);\n    window.addEventListener(\"mousedown\", onMouseDown, true);\n    window.addEventListener(\"mouseup\", onMouseUp, true);\n    window.addEventListener(\"contextmenu\", onContextMenu, true);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"keyup\", onKeyUp);\n      window.removeEventListener(\"mousedown\", onMouseDown, true);\n      window.removeEventListener(\"mouseup\", onMouseUp, true);\n      window.removeEventListener(\"contextmenu\", onContextMenu, true);\n      clearTimeout(idleTimerRef.current);\n      clearTimeout(tooltipTimerRef.current);\n    };\n  }, [returnToIdle, triggerPulse]);\n\n  const handleCatClick = useCallback(() => {\n    if (!clickTooltip || messages.length === 0) return;\n    clearTimeout(tooltipTimerRef.current);\n    setTooltipMsg(messages[Math.floor(Math.random() * messages.length)]);\n    tooltipTimerRef.current = setTimeout(() => setTooltipMsg(null), messageDuration);\n  }, [clickTooltip, messages, messageDuration]);\n\n  const leftDown = state === \"leftPawDown\" || state === \"bothPawsDown\";\n  const rightDown = state === \"rightPawDown\" || state === \"bothPawsDown\";\n\n  const containerStyle: CSSProperties = {\n    position: \"fixed\",\n    bottom: typeof bottom === \"number\" ? `${bottom}px` : bottom,\n    right: typeof right === \"number\" ? `${right}px` : right,\n    width,\n    height,\n    zIndex,\n    cursor: clickTooltip ? \"pointer\" : undefined,\n    userSelect: \"none\",\n    transform: pulse ? \"scale(1.08)\" : \"scale(1)\",\n    transition: \"transform 0.1s ease-out\",\n    ...userStyle,\n  };\n\n  return (\n    <>\n      <style>{`@keyframes bongocat-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`}</style>\n      <div\n        className={className}\n        style={containerStyle}\n        onClick={handleCatClick}\n      >\n        {tooltipMsg && <div style={tooltipStyle}>{tooltipMsg}</div>}\n        <img src={`${basePath}/base.png`} alt=\"\" draggable={false} style={imgStyle} />\n        <img\n          src={leftDown ? `${basePath}/left-down.png` : `${basePath}/left-up.png`}\n          alt=\"\"\n          draggable={false}\n          style={imgStyle}\n        />\n        <img\n          src={rightDown ? `${basePath}/right-down.png` : `${basePath}/right-up.png`}\n          alt=\"\"\n          draggable={false}\n          style={imgStyle}\n        />\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bongocat-react",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A React component that adds an animated BongoCat to your app — reacts to typing and mouse clicks",
   "main": "dist/index.js",
   "module": "dist/index.mjs",