From 37735eab1470badd85508a059d1f3bf576ba4c19 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Fri, 23 Oct 2026 18:37:47 +0800
Subject: [PATCH] fix(app): Load the splash CSS from a file so release editors
 keep their styles

Release builds hash inline <style> blocks from index.html into the CSP.
With a hash present, style-src 'unsafe-inline' is ignored, so CodeMirror's
runtime-injected styles were blocked and the editor rendered blank (bare
line numbers, no text). Dev builds don't rewrite the CSP, so it only
showed in v0.1.3 release bundles.

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu
---
 index.html        | 44 +-------------------------------------------
 public/splash.css | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 43 deletions(-)
 create mode 100644 public/splash.css

diff --git a/index.html b/index.html
index 6cd9d566..93777f8a 100644
--- a/index.html
+++ b/index.html
@@ -5,49 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenIDEA</title>
     <script src="/boot.js"></script>
-    <style>
-      /* Start-up splash over the page until the window's launch project is open (platform/splash.ts).
-         Tokens aren't loaded yet, so the colours mirror --bg-frame / --fg-muted / --accent. */
-      html, body, .splash { background: #e9eaee; }
-      :root[data-theme="dark"] :is(body, .splash) { background: #26282c; }
-      :root:is([data-theme="dark-hc"], [data-theme="dark"][data-contrast="high"]) :is(body, .splash) { background: #1a1b1e; }
-      .splash {
-        position: fixed;
-        inset: 0;
-        z-index: 2147483647;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 14px;
-        padding-bottom: 38px;
-        box-sizing: border-box;
-        font: 500 15px/1.2 "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
-        color: #6c707e;
-        -webkit-user-select: none;
-        user-select: none;
-        cursor: default;
-        animation: splash-in 240ms ease-out 120ms both;
-        transition: opacity 160ms ease-out;
-      }
-      .splash.splash-out { opacity: 0; pointer-events: none; }
-      :root[data-theme^="dark"] .splash { color: #8c8f95; }
-      .splash svg { width: 56px; height: 56px; }
-      .splash-bar { width: 120px; height: 2px; border-radius: 1px; overflow: hidden; background: rgb(127 127 127 / 0.18); }
-      .splash-bar::after {
-        content: "";
-        display: block;
-        width: 40%;
-        height: 100%;
-        background: #3871e1;
-        animation: splash-bar 1.1s ease-in-out infinite;
-      }
-      @keyframes splash-in { from { opacity: 0; } }
-      @keyframes splash-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
-      @media (prefers-reduced-motion: reduce) {
-        .splash, .splash-bar::after { animation: none; }
-      }
-    </style>
+    <link rel="stylesheet" href="/splash.css" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/splash.css b/public/splash.css
new file mode 100644
index 00000000..fb6bec72
--- /dev/null
+++ b/public/splash.css
@@ -0,0 +1,43 @@
+/* Linked, not inlined in index.html: release builds hash inline <style> blocks into the CSP,
+   which voids style-src 'unsafe-inline' and blocks the editor's runtime-injected styles. */
+/* Start-up splash over the page until the window's launch project is open (platform/splash.ts).
+   Tokens aren't loaded yet, so the colours mirror --bg-frame / --fg-muted / --accent. */
+html, body, .splash { background: #e9eaee; }
+:root[data-theme="dark"] :is(body, .splash) { background: #26282c; }
+:root:is([data-theme="dark-hc"], [data-theme="dark"][data-contrast="high"]) :is(body, .splash) { background: #1a1b1e; }
+.splash {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding-bottom: 38px;
+  box-sizing: border-box;
+  font: 500 15px/1.2 "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
+  color: #6c707e;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+  animation: splash-in 240ms ease-out 120ms both;
+  transition: opacity 160ms ease-out;
+}
+.splash.splash-out { opacity: 0; pointer-events: none; }
+:root[data-theme^="dark"] .splash { color: #8c8f95; }
+.splash svg { width: 56px; height: 56px; }
+.splash-bar { width: 120px; height: 2px; border-radius: 1px; overflow: hidden; background: rgb(127 127 127 / 0.18); }
+.splash-bar::after {
+  content: "";
+  display: block;
+  width: 40%;
+  height: 100%;
+  background: #3871e1;
+  animation: splash-bar 1.1s ease-in-out infinite;
+}
+@keyframes splash-in { from { opacity: 0; } }
+@keyframes splash-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
+@media (prefers-reduced-motion: reduce) {
+  .splash, .splash-bar::after { animation: none; }
+}