import { lazy, Suspense, useRef } from "react";

const SemanticNavigator = lazy(() =>
  import("@real-a11y-dev/react").then((m) => ({
    default: m.SemanticNavigator,
  })),
);

export function DevAuditOverlay({ children }: { children: React.ReactNode }) {
  // Vite: `import.meta.env.DEV`. Webpack/Next: `process.env.NODE_ENV !== "production"`.
  if (!import.meta.env.DEV) return <>{children}</>;

  const rootRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={rootRef}>
      {children}
      <Suspense fallback={null}>
        <SemanticNavigator root={rootRef} mode="a11y" floating />
      </Suspense>
    </div>
  );
}

import { createInspector } from "@real-a11y-dev/inspector";

const inspector = createInspector({
  root: document.getElementById("app"),
  container: document.getElementById("tree-panel"),
  viewMode: "a11y", // "dom" | "a11y" | "tab"
  theme: "auto",
});
inspector.mount();
// inspector.setRoot / setViewMode / refresh / getTree