import { createRoot } from "react-dom/client";
import { App } from "./App.js";
import { ThemeProvider } from "./contexts/ThemeContext.js";
import "./main.css";

const container = document.getElementById("root");
if (!container) {
  throw new Error("missing #root element");
}

const root = createRoot(container);

// Dev-only: `?kit` renders the standalone design kit instead of the app
// shell (#254). Dynamic import keeps it out of the production bundle.
if (import.meta.env.DEV && new URLSearchParams(location.search).has("kit")) {
  void import("./components/kit/DesignKit.js").then(({ DesignKit }) => {
    root.render(
      <ThemeProvider>
        <DesignKit />
      </ThemeProvider>,
    );
  });
} else {
  root.render(<App />);
}