handzon-core 0.13.2 → 0.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handzon-core",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "description": "Core framework for Handzon — layouts, components, content + AI libs, and server runtime (handlers, DB, auth, migration runner) consumed by Handzon scaffolds.",
   "publishConfig": {
     "access": "public"

package/src/components/TrackSelector.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
   type SimpleIcon,
   siC,
@@ -107,12 +107,7 @@ export default function TrackSelector({ tracks, defaultTrack }: Props) {
               onClick={() => setPref("track", track.id)}
             >
               {icon ? (
-                <svg
-                  className="track-selector-icon"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  style={{ "--track-icon-color": `#${icon.hex}` } as CSSProperties}
-                >
+                <svg className="track-selector-icon" viewBox="0 0 24 24" aria-hidden="true">
                   <path d={icon.path} />
                 </svg>
               ) : (

package/src/components/auth/UserMenu.astro

@@ -7,10 +7,37 @@
  * prerendered route happens to include BaseLayout.
  */
 import UserMenuIsland from "./UserMenu.tsx";
+
+const GITHUB_ICON_PATH =
+  "M12 .5C5.65.5.5 5.65 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.02c-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.7 1.25 3.36.96.1-.74.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.45.11-3.03 0 0 .96-.31 3.15 1.17a10.94 10.94 0 0 1 5.76 0c2.19-1.48 3.15-1.17 3.15-1.17.62 1.58.23 2.74.11 3.03.74.8 1.18 1.82 1.18 3.07 0 4.4-2.69 5.37-5.25 5.65.41.35.78 1.04.78 2.11v3.13c0 .3.21.66.79.55C20.71 21.39 24 17.08 24 12 24 5.65 18.85.5 12 .5z";
 ---
-<UserMenuIsland client:only="react" />
+<div class="user-menu-shell">
+  <div class="user-menu um-fallback" data-user-menu-fallback aria-hidden="true">
+    <button type="button" class="um-btn" disabled tabindex="-1">
+      <svg
+        class="um-gh"
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d={GITHUB_ICON_PATH} />
+      </svg>
+      <span>Sign in with GitHub</span>
+    </button>
+  </div>
+  <UserMenuIsland client:only="react" />
+</div>
 
 <style is:global>
+  .user-menu-shell {
+    display: grid;
+  }
+  .user-menu-shell > .user-menu,
+  .user-menu-shell > astro-island {
+    grid-area: 1 / 1;
+  }
   .user-menu {
     display: inline-flex;
     align-items: center;
@@ -43,6 +70,12 @@ import UserMenuIsland from "./UserMenu.tsx";
     white-space: nowrap;
   }
   .user-menu form { display: inline-flex; }
+  .um-fallback {
+    pointer-events: none;
+  }
+  .um-fallback[hidden] {
+    display: none;
+  }
   .um-btn {
     display: inline-flex;
     align-items: center;
@@ -59,6 +92,10 @@ import UserMenuIsland from "./UserMenu.tsx";
     border-color: var(--color-accent);
     color: var(--color-accent);
   }
+  .um-btn:disabled {
+    opacity: 1;
+    cursor: default;
+  }
   .um-btn-icon {
     padding: 0.3rem 0.45rem;
   }

package/src/components/auth/UserMenu.tsx

@@ -68,6 +68,13 @@ export default function UserMenu() {
     };
   }, []);
 
+  useEffect(() => {
+    if (session === undefined) return;
+    document.querySelectorAll<HTMLElement>("[data-user-menu-fallback]").forEach((el) => {
+      el.hidden = true;
+    });
+  }, [session]);
+
   // Loading or auth not wired → render nothing.
   if (session === undefined || !csrfToken) return null;
 

package/styles/components/track-selector.css

@@ -50,7 +50,7 @@
   width: 0.95rem;
   height: 0.95rem;
   flex-shrink: 0;
-  fill: var(--track-icon-color, currentColor);
+  fill: currentColor;
 }
 
 .track-selector-icon-slot {