From 0f3b1042a738e841fc04eab2f26d7eff83c21b22 Mon Sep 17 00:00:00 2001
From: RACollins <richardcollins128@gmail.com>
Date: Wed, 19 Feb 2025 23:16:35 +0900
Subject: [PATCH 1/2] Enhance theme and mode handling with expanded CSS
 variables and dynamic script initialization

---
 monsterui/core.py |  43 ++++++++++++-----
 nbs/01_core.ipynb | 118 +++++++++++++++++++++++++++-------------------
 2 files changed, 99 insertions(+), 62 deletions(-)

diff --git a/monsterui/core.py b/monsterui/core.py
index 77d8046..ef941e7 100644
--- a/monsterui/core.py
+++ b/monsterui/core.py
@@ -51,23 +51,25 @@ class ThemeFont:
 
 # %% ../nbs/01_core.ipynb
 def _headers_theme(color, mode='auto', radii=ThemeRadii.sm, shadows=ThemeShadows.sm, font=ThemeFont.sm):
-    mode_script = {
-        'auto': '''
+    franken_init = '''
           const __FRANKEN__ = JSON.parse(localStorage.getItem("__FRANKEN__") || "{}");
-
+    '''
+    
+    mode_script = {
+        'auto': f'''
+          {franken_init}
           if (
             __FRANKEN__.mode === "dark" ||
             (!__FRANKEN__.mode &&
               window.matchMedia("(prefers-color-scheme: dark)").matches)
-          ) {
+          ) {{
             htmlElement.classList.add("dark");
-          } else {
+          }} else {{
             htmlElement.classList.remove("dark");
-          }
-
+          }}
         ''',
-        'light': 'htmlElement.classList.remove("dark");',
-        'dark': 'htmlElement.classList.add("dark");'
+        'light': f'{franken_init}\nhtmlElement.classList.remove("dark");',
+        'dark': f'{franken_init}\nhtmlElement.classList.add("dark");'
     }
     
     return fh.Script(f'''
@@ -106,16 +108,31 @@ def _download_resource(url, static_dir):
 # %% ../nbs/01_core.ipynb
 daisy_styles = Style("""
 :root {
+  --b1: from hsl(var(--background)) l c h;
+  --bc: from hsl(var(--foreground)) l c h;
+  --m: from hsl(var(--muted)) l c h;
+  --mc: from hsl(var(--muted-foreground)) l c h;
+  --po: from hsl(var(--popover)) l c h;
+  --poc: from hsl(var(--popover-foreground)) l c h;
+  --b2: from hsl(var(--card)) l c h;
+  --b2c: from hsl(var(--card-foreground)) l c h;
+  --br: from hsl(var(--border)) l c h;
+  --in: from hsl(var(--input)) l c h;
   --p: from hsl(var(--primary)) l c h;
   --pc: from hsl(var(--primary-foreground)) l c h;
   --s: from hsl(var(--secondary)) l c h;
   --sc: from hsl(var(--secondary-foreground)) l c h;
-  --b2: from hsl(var(--card-background)) l c h;
-  --b1: from hsl(var(--background)) l c h;
-  --bc: from hsl(var(--foreground)) l c h;
-  --b3: from hsl(var(--ring)) l c h;
+  --a: from hsl(var(--accent)) l c h;
+  --ac: from hsl(var(--accent-foreground)) l c h;
   --er: from hsl(var(--destructive)) l c h;
   --erc: from hsl(var(--destructive-foreground)) l c h;
+  --b3: from hsl(var(--ring)) l c h;
+  --ch1: from hsl(var(--chart-1)) l c h;
+  --ch2: from hsl(var(--chart-2)) l c h;
+  --ch3: from hsl(var(--chart-3)) l c h;
+  --ch4: from hsl(var(--chart-4)) l c h;
+  --ch5: from hsl(var(--chart-5)) l c h;
+  --rd: var(--radius);
 }
 """)
 
diff --git a/nbs/01_core.ipynb b/nbs/01_core.ipynb
index 580969d..48066fc 100644
--- a/nbs/01_core.ipynb
+++ b/nbs/01_core.ipynb
@@ -11,7 +11,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -27,7 +27,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -43,7 +43,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -53,7 +53,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 4,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -69,7 +69,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 5,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -85,7 +85,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 6,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -94,7 +94,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 7,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -111,7 +111,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 8,
    "metadata": {},
    "outputs": [
     {
@@ -120,7 +120,7 @@
        "{'pico': False, 'something': 'test', 'class': ' bg-background text-foreground'}"
       ]
      },
-     "execution_count": null,
+     "execution_count": 8,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -145,7 +145,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 9,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -169,29 +169,31 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 10,
    "metadata": {},
    "outputs": [],
    "source": [
     "#| export\n",
     "def _headers_theme(color, mode='auto', radii=ThemeRadii.sm, shadows=ThemeShadows.sm, font=ThemeFont.sm):\n",
-    "    mode_script = {\n",
-    "        'auto': '''\n",
+    "    franken_init = '''\n",
     "          const __FRANKEN__ = JSON.parse(localStorage.getItem(\"__FRANKEN__\") || \"{}\");\n",
-    "\n",
+    "    '''\n",
+    "    \n",
+    "    mode_script = {\n",
+    "        'auto': f'''\n",
+    "          {franken_init}\n",
     "          if (\n",
     "            __FRANKEN__.mode === \"dark\" ||\n",
     "            (!__FRANKEN__.mode &&\n",
     "              window.matchMedia(\"(prefers-color-scheme: dark)\").matches)\n",
-    "          ) {\n",
+    "          ) {{\n",
     "            htmlElement.classList.add(\"dark\");\n",
-    "          } else {\n",
+    "          }} else {{\n",
     "            htmlElement.classList.remove(\"dark\");\n",
-    "          }\n",
-    "\n",
+    "          }}\n",
     "        ''',\n",
-    "        'light': 'htmlElement.classList.remove(\"dark\");',\n",
-    "        'dark': 'htmlElement.classList.add(\"dark\");'\n",
+    "        'light': f'{franken_init}\\nhtmlElement.classList.remove(\"dark\");',\n",
+    "        'dark': f'{franken_init}\\nhtmlElement.classList.add(\"dark\");'\n",
     "    }\n",
     "    \n",
     "    return fh.Script(f'''\n",
@@ -207,7 +209,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 11,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -237,30 +239,45 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 12,
    "metadata": {},
    "outputs": [],
    "source": [
     "#| export\n",
     "daisy_styles = Style(\"\"\"\n",
     ":root {\n",
+    "  --b1: from hsl(var(--background)) l c h;\n",
+    "  --bc: from hsl(var(--foreground)) l c h;\n",
+    "  --m: from hsl(var(--muted)) l c h;\n",
+    "  --mc: from hsl(var(--muted-foreground)) l c h;\n",
+    "  --po: from hsl(var(--popover)) l c h;\n",
+    "  --poc: from hsl(var(--popover-foreground)) l c h;\n",
+    "  --b2: from hsl(var(--card)) l c h;\n",
+    "  --b2c: from hsl(var(--card-foreground)) l c h;\n",
+    "  --br: from hsl(var(--border)) l c h;\n",
+    "  --in: from hsl(var(--input)) l c h;\n",
     "  --p: from hsl(var(--primary)) l c h;\n",
     "  --pc: from hsl(var(--primary-foreground)) l c h;\n",
     "  --s: from hsl(var(--secondary)) l c h;\n",
     "  --sc: from hsl(var(--secondary-foreground)) l c h;\n",
-    "  --b2: from hsl(var(--card-background)) l c h;\n",
-    "  --b1: from hsl(var(--background)) l c h;\n",
-    "  --bc: from hsl(var(--foreground)) l c h;\n",
-    "  --b3: from hsl(var(--ring)) l c h;\n",
+    "  --a: from hsl(var(--accent)) l c h;\n",
+    "  --ac: from hsl(var(--accent-foreground)) l c h;\n",
     "  --er: from hsl(var(--destructive)) l c h;\n",
     "  --erc: from hsl(var(--destructive-foreground)) l c h;\n",
+    "  --b3: from hsl(var(--ring)) l c h;\n",
+    "  --ch1: from hsl(var(--chart-1)) l c h;\n",
+    "  --ch2: from hsl(var(--chart-2)) l c h;\n",
+    "  --ch3: from hsl(var(--chart-3)) l c h;\n",
+    "  --ch4: from hsl(var(--chart-4)) l c h;\n",
+    "  --ch5: from hsl(var(--chart-5)) l c h;\n",
+    "  --rd: var(--radius);\n",
     "}\n",
     "\"\"\")\n"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 13,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -296,7 +313,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 14,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -400,17 +417,9 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 15,
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "serving katex JS\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "hdrs = Theme.blue.headers()\n",
     "app = FastHTML(hdrs=hdrs)"
@@ -418,17 +427,9 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 16,
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "serving katex JS\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "app, rt = fast_app(hdrs=Theme.blue.headers())\n",
     "Show = partial(HTMX, app=app)"
@@ -443,13 +444,20 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 17,
    "metadata": {},
    "outputs": [],
    "source": [
     "#| hide\n",
     "import nbdev; nbdev.nbdev_export()"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -457,6 +465,18 @@
    "display_name": "python3",
    "language": "python",
    "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.13.1"
   }
  },
  "nbformat": 4,

From 73ecc92d02dc70694541b79d47f069b6d4a35c8c Mon Sep 17 00:00:00 2001
From: RACollins <richardcollins128@gmail.com>
Date: Thu, 20 Feb 2025 11:06:01 +0900
Subject: [PATCH 2/2] Clean up notebook execution state and metadata

---
 nbs/01_core.ipynb | 48 ++++++++++++++++++-----------------------------
 1 file changed, 18 insertions(+), 30 deletions(-)

diff --git a/nbs/01_core.ipynb b/nbs/01_core.ipynb
index 48066fc..3236d5c 100644
--- a/nbs/01_core.ipynb
+++ b/nbs/01_core.ipynb
@@ -11,7 +11,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -27,7 +27,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -43,7 +43,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -53,7 +53,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -69,7 +69,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -85,7 +85,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -94,7 +94,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -111,7 +111,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": null,
    "metadata": {},
    "outputs": [
     {
@@ -120,7 +120,7 @@
        "{'pico': False, 'something': 'test', 'class': ' bg-background text-foreground'}"
       ]
      },
-     "execution_count": 8,
+     "execution_count": null,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -145,7 +145,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -169,7 +169,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 10,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -209,7 +209,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -239,7 +239,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 12,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -277,7 +277,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 13,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -313,7 +313,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 14,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -417,7 +417,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 15,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -427,7 +427,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 16,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -444,7 +444,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 17,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -465,18 +465,6 @@
    "display_name": "python3",
    "language": "python",
    "name": "python3"
-  },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.13.1"
   }
  },
  "nbformat": 4,