<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8"/>
<title>DPF Build Studio</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="tokens.css"/>
</head>
<body>
<div id="root"></div>

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<script type="text/babel" src="data.jsx"></script>
<script type="text/babel" src="step-tracker.jsx"></script>
<script type="text/babel" src="conversation.jsx"></script>
<script type="text/babel" src="artifact.jsx"></script>
<script type="text/babel" src="header.jsx"></script>

<script type="text/babel">
const { useState, useEffect } = React;

function App() {
  const [theme, setTheme] = useState("dark");
  const [view, setView]   = useState("preview");

  useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]);

  return (
    <div style={{ display: "grid", gridTemplateRows: "auto auto 1fr", height: "100vh", overflow: "hidden" }}
         data-screen-label="Build Studio · Conversation + Preview">
      <HeaderBar theme={theme} setTheme={setTheme}/>
      <StepTracker/>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(420px, 44%) 1fr", minHeight: 0 }}>
        <ConversationPane onOpenArtifact={setView}/>
        <ArtifactPane view={view} setView={setView}/>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
</script>
</body>
</html>
