refactor(theme-studio): extract CSS and JS to files, inline at generate time

generate.py was 1378 lines, ~1300 of them a single triple-quoted string holding the whole app. Moved the <style> block to styles.css and the <script> body to app.js, and generate.py now inlines both through placeholders the same way it already inlines colormath.js, then fills the data placeholders. It drops to ~500 lines (the remaining bulk is the package face-data dicts, a later stage).

The generated page is byte-identical to before — every hash gate, the node suite, the spliced-script parse, and the new #locktest stay green. Two integrity tests guard the splice: styles.css inlines verbatim, and app.js reaches the page exactly as fill_data renders it. Both go red if the splice wiring is dropped.

Living in real files instead of a Python string kills the backslash-doubling bug class (str.replace is literal, so escapes survive), gives the CSS and JS real editor tooling, and opens the app logic to unit testing — the point of the whole refactor.

1 files changed, 12 insertions, 0 deletions

diff --git a/scripts/theme-studio/test_generate.py b/scripts/theme-studio/test_generate.py
index e76acdad..7a9079ac 100644
--- a/scripts/theme-studio/test_generate.py
+++ b/scripts/theme-studio/test_generate.py
@@ -62,6 +62,7 @@ class ColormathInlining(unittest.TestCase):
 
 class AssembledPage(unittest.TestCase):
     PLACEHOLDERS = [
+        "STYLES_CSS", "APP_JS",
         "COLORMATH_J", "SAMPLES_J", "PALETTE_J", "CATS_J",
         "UIFACES_J", "UIMAP_J", "APPS_J", "BOLD_J", "MAP_J",
     ]
@@ -75,6 +76,17 @@ class AssembledPage(unittest.TestCase):
         # checked at the point the page is built rather than after a round-trip.
         self.assertIn(generate.COLORMATH_BODY, generate.HTML)
 
+    def test_page_carries_the_stylesheet_verbatim(self):
+        # styles.css has no placeholders, so it inlines verbatim: the inlined copy
+        # and the source file cannot drift.
+        self.assertIn(generate.STYLES, generate.HTML)
+
+    def test_page_carries_the_app_script_faithfully(self):
+        # app.js does carry placeholders, so the page holds it as fill_data renders
+        # it (APP_FILLED), not the raw file. This guards the splice: the script
+        # reaches the page intact, with its data placeholders correctly filled.
+        self.assertIn(generate.APP_FILLED, generate.HTML)
+
     def test_page_is_a_single_script_document(self):
         self.assertEqual(generate.HTML.count("<script>"), 1)
         self.assertEqual(generate.HTML.count("</script>"), 1)