"use client";

import { useLayoutEffect } from "react";

/**
 * Popovers, dialogs, tooltips, menus and toasts render in a portal under <body>, outside the
 * `.medora` wrapper, so they would lose the theme variables. This puts the scope class on <html>
 * for as long as the showcase is mounted, and removes it on leave so other pages are untouched.
 */
export function MedoraScope() {
  useLayoutEffect(() => {
    const root = document.documentElement;
    root.classList.add("medora");
    return () => root.classList.remove("medora");
  }, []);
  return null;
}