modelroom 0.0.5 → 0.1.0

package/ui/dashboard.html

@@ -8,17 +8,21 @@
 <title>modelroom</title>
 <link rel="stylesheet" href="/ui/modelroom.css">
 <script>
-// Theme before paint: the bundle is React, but the first frame should not flash.
+// Theme before paint: Mantine reads `data-mantine-color-scheme`, so the first
+// frame is already the right colour and nothing flashes on load.
 try {
   var stored = localStorage.getItem('modelroom.theme');
-  document.documentElement.dataset.theme = stored
-    ? JSON.parse(stored)
-    : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-} catch (error) { /* the default is light */ }
+  document.documentElement.setAttribute(
+    'data-mantine-color-scheme',
+    stored
+      ? JSON.parse(stored)
+      : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+  );
+} catch (error) { /* Mantine falls back to the OS preference */ }
 </script>
 </head>
-<body class="bg-background text-foreground font-sans">
-<div id="root" data-app="dashboard"></div>
+<body>
+<div id="root" data-app="dashboard" class="mr-app"></div>
 <script type="module" src="/ui/assets/app.js"></script>
 </body>
 </html>

package/ui/kit.html

@@ -1,6 +1,6 @@
 <!doctype html>
-<!-- modelroom — the component workshop. Every UI primitive and every panel state
-     rendered in isolation, so a change can be seen before it is wired up. It is
+<!-- modelroom — the component workshop. Every Mantine component the tool wires
+     up, rendered in isolation, so a change can be seen before it is used. It is
      the tool's own UI only; it never touches the convention or the artifacts. -->
 <html lang="en">
 <head>
@@ -9,17 +9,21 @@
 <title>Workshop — modelroom</title>
 <link rel="stylesheet" href="/ui/modelroom.css">
 <script>
-// Theme before paint: the bundle is React, but the first frame should not flash.
+// Theme before paint: Mantine reads `data-mantine-color-scheme`, so the first
+// frame is already the right colour and nothing flashes on load.
 try {
   var stored = localStorage.getItem('modelroom.theme');
-  document.documentElement.dataset.theme = stored
-    ? JSON.parse(stored)
-    : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-} catch (error) { /* the default is light */ }
+  document.documentElement.setAttribute(
+    'data-mantine-color-scheme',
+    stored
+      ? JSON.parse(stored)
+      : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+  );
+} catch (error) { /* Mantine falls back to the OS preference */ }
 </script>
 </head>
-<body class="bg-muted/30 text-foreground font-sans">
-<div id="root" data-app="kit"></div>
+<body>
+<div id="root" data-app="kit" class="mr-app"></div>
 <script type="module" src="/ui/assets/app.js"></script>
 </body>
 </html>