@mascotbot:registry=https://npm.mascot.bot/
//npm.mascot.bot/:_authToken=mascot_xxx

// BUG — re-runs the cleanup on EVERY render, not just unmount.
const teardown = useCallback(() => {
  void convoRef.current?.endSession().catch(() => {});
  // …other resource releases
}, [setSomeMascotInput]);                  // ← unstable dep

useEffect(() => () => teardown(), [teardown]);

const teardownRef = useRef(teardown);
teardownRef.current = teardown;          // refresh every render, no deps
useEffect(() => () => teardownRef.current?.(), []);   // [] — true unmount

await Conversation.startSession({
  signedUrl,
  onMessage:      (m) => console.log("[debug] msg:", m),
  onStatusChange: (s) => console.log("[debug] status:", s.status),
  onDisconnect:   (d) => console.log("[debug] disconnect reason:", d),
  // …
});

// 1. Reject any candidate whose audio tracks are no longer 'live'.
const isLive = (el: HTMLMediaElement | null | undefined) =>
  !!el && el.srcObject instanceof MediaStream &&
  el.srcObject.getAudioTracks().some((t) => t.readyState === "live");

const iv = window.setInterval(() => {
  const el = w.__el;
  if (isLive(el)) {
    tap.attach(el as HTMLMediaElement);
    window.clearInterval(iv);
  } else if (++tries > 100) {
    window.clearInterval(iv);
  }
}, 100);

// 2. In teardown, null the stash AND close the tap. Otherwise the
//    next call's poll latches onto the stale ref before the next
//    `new Audio()` lands, and every restart leaks a worklet graph.
teardownRef.current = () => {
  window.clearInterval(iv);
  w.Audio = OrigAudio;
  w.__el = null;          // ← without this, next call's first poll
                          //   sees the still-set MediaStream and
                          //   attaches to the dead element
  tap.close();            // ← releases the tap's AudioContext + stream
  void convo.endSession();
};

player.stop();
player.close();          // releases the AudioContext, not just the queue
playerRef.current = null;
setVoiceStream(null);     // ← the key line: changes the stream identity
                          //   so useLipsyncStream runs its teardown

const { custom, has } = useMascotInputs();
useEffect(() => {
  if (!has("gender")) return;            // real input bound yet?
  custom.gender.value = female ? 2 : 1;
  custom.colourful.value = true;
}); // no dep array → re-asserts until (and after) Rive binds

<div className="relative h-full w-full z-[6]">
  <MascotRive />
</div>

/** @type {import("next").NextConfig} */
module.exports = { transpilePackages: ["@mascotbot/react"] };