index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WaveFlow</title>
  </head>

  <body>
    <!--
      Theme bootstrap — paints the right mode (dark class + data-theme +
      ambient background) before React mounts so a fresh boot doesn't
      flash white when the default theme is dark. Keeps it minimal: only
      the dark class + ambient color need to be right on the first paint;
      the full accent palette is hydrated by `ThemeProvider`'s effect a
      few ms later, which is invisible against an already-correct bg.
      Mirrors `themes.ts` — `LIGHT_IDS` lists every light preset (6),
      everything else is dark (8). Keep the two tables in sync if a
      preset is added / removed.
    -->
    <script>
      (function () {
        var root = document.documentElement;
        // WebKitGTK can retain very large compositing surfaces for the
        // glass-heavy Lounge and Liquid skins. Set the safeguard before
        // reading storage so a remembered skin is safe on its first paint.
        // Exclude other Linux browsers used for frontend development.
        var ua = navigator.userAgent;
        if (
          /linux/i.test(ua) &&
          /AppleWebKit/i.test(ua) &&
          !/(Chrome|Chromium|Edg|Android)/i.test(ua)
        ) {
          root.setAttribute("data-webkitgtk-safe", "");
        }
        try {
          var id =
            localStorage.getItem("waveflow.theme.id") ||
            (localStorage.getItem("waveflow.theme.is_dark") === "false"
              ? "default"
              : "default-dark");
          var LIGHT_IDS = {
            default: 1,
            "midnight-light": 1,
            "sunset-light": 1,
            "lavender-light": 1,
            "crimson-light": 1,
            "ocean-light": 1,
          };
          var ambient =
            {
              default: "#ffffff",
              "midnight-light": "#e0e7ff",
              "sunset-light": "#fef3c7",
              "lavender-light": "#ede9fe",
              "crimson-light": "#ffe4e6",
              "ocean-light": "#e0f2fe",
              "default-dark": "#121212",
              oled: "#000000",
              midnight: "#0b1020",
              sunset: "#1a0e08",
              lavender: "#15101e",
              crimson: "#19090c",
              ocean: "#081420",
              neon: "#1a0a18",
            }[id] || "#121212";
          root.setAttribute("data-theme", id);
          root.style.setProperty("--ambient-bg", ambient);
          if (!LIGHT_IDS[id]) root.classList.add("dark");
          // Skin bootstrap — paint the right `data-skin` before
          // React mounts so font / radius / density tokens used
          // by the very first paint surfaces (sidebar, topbar)
          // don't flicker from the default Studio metrics to
          // Editorial on hydration. The full skin tokens are
          // hydrated by `SkinProvider`'s effect a few ms later;
          // only the attribute needs to be right on first paint
          // because `@theme inline` in app.css resolves the
          // attribute-selector overrides synchronously with the
          // first CSS pass.
          //
          // Whitelist the stored id so an obsolete or garbage
          // value can't land on `data-skin` and silently break
          // every `[data-skin="<known>"]` rule. Must stay in
          // sync with `SKIN_PRESETS` in `src/lib/skins.ts`.
          var VALID_SKINS = {
            studio: 1,
            editorial: 1,
            lounge: 1,
            pulse: 1,
            liquid: 1,
            fluid: 1,
          };
          // The native startup path adds this flag before creating the
          // webview. It must beat the cached skin on the very first paint.
          var skin =
            new URLSearchParams(location.search).get("safe-mode") === "1"
              ? "studio"
              : localStorage.getItem("waveflow.skin.id");
          // Nothing cached (a first launch, a cleared store): the
          // default skin, which the context will confirm from the profile.
          if (!skin || !VALID_SKINS[skin]) skin = "fluid";
          root.setAttribute("data-skin", skin);

          // Contrast bootstrap (#596) — stamp `data-contrast` before
          // React mounts. This matters more than the theme's own
          // bootstrap does: a flash of low-contrast chrome is exactly
          // what the person who turned this on cannot read.
          //
          // `auto` (the default) defers to the OS, so the attribute
          // carries the RESOLVED state, never the stored choice — the
          // stylesheet keys on "high" / "normal" and must not have to
          // know what `auto` resolved to. `ContrastProvider` re-stamps
          // it a few ms later from the database row, which is what
          // corrects a stale cache after a profile switch.
          var contrast = localStorage.getItem("waveflow.contrast");
          if (contrast !== "high" && contrast !== "normal") contrast = "auto";
          var high =
            contrast === "high" ||
            (contrast === "auto" &&
              window.matchMedia &&
              window.matchMedia("(prefers-contrast: more)").matches);
          root.setAttribute("data-contrast", high ? "high" : "normal");

          // Accent bootstrap -- the scale last applied, whether it came
          // from the theme, a picked colour or a cover. Without it the
          // first frame shows the stylesheet's green until React applies
          // the real one. Only plain `oklch(...)` values are let through:
          // this writes straight into the root's style.
          var cachedAccent = JSON.parse(
            localStorage.getItem("waveflow.accent.scale") || "null",
          );
          var stops = cachedAccent && cachedAccent.stops;
          var SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
          if (Array.isArray(stops) && stops.length === SHADES.length) {
            for (var i = 0; i < SHADES.length; i++) {
              if (/^oklch\([0-9. ]+\)$/.test(stops[i])) {
                root.style.setProperty("--accent-" + SHADES[i], stops[i]);
              }
            }
          }
        } catch (_) {
          // localStorage unavailable — fall through to :root defaults.
        }
      })();
    </script>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>