---
import { Editor } from '../components/Editor';
import '../styles.css';
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>docx-editor — Astro Example</title>
    <link rel="icon" href="/favicon.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
    />
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: #f5f5f5;
        min-height: 100vh;
      }
      .material-symbols-outlined {
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        display: inline-block;
        visibility: hidden;
      }
      .fonts-loaded .material-symbols-outlined {
        visibility: visible;
      }
    </style>
    <script is:inline>
      if (document.fonts) {
        document.fonts.ready.then(function() {
          document.documentElement.classList.add('fonts-loaded');
        });
      } else {
        setTimeout(function() {
          document.documentElement.classList.add('fonts-loaded');
        }, 500);
      }
    </script>
  </head>
  <body>
    <Editor client:only="react" />
  </body>
</html>
