@opendocsdev/cli 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendocsdev/cli",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "publishConfig": {
     "access": "public"
   },

package/src/engine/src/components/react/SearchModal.tsx

@@ -111,17 +111,11 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
 
     hasTrackedRef.current = true;
 
-    fetch(`${backend}/api/analytics/sq`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        siteId,
-        query: searchQuery,
-        resultCount,
-      }),
-    }).catch(() => {
-      // Silently fail - analytics should not break search
-    });
+    const blob = new Blob(
+      [JSON.stringify({ siteId, query: searchQuery, resultCount })],
+      { type: "application/json" }
+    );
+    navigator.sendBeacon(`${backend}/api/analytics/sq`, blob);
   }, [backend, siteId]);
 
   // Handle close with analytics tracking
@@ -187,6 +181,19 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
     }
   }, [isOpen]);
 
+  // Global Escape key handler - works regardless of focus
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, handleClose]);
+
   // Scroll selected item into view
   useEffect(() => {
     if (resultsRef.current && results.length > 0) {
@@ -220,10 +227,6 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
           handleResultSelect(results[selectedIndex].url);
         }
         break;
-      case "Escape":
-        e.preventDefault();
-        handleClose();
-        break;
     }
   };
 
@@ -236,13 +239,6 @@ export function SearchModal({ isOpen, onClose, backend, siteId }: SearchModalPro
       className="fixed inset-0 z-50"
       role="dialog"
       aria-modal="true"
-      onKeyDown={(e) => {
-        // Global escape handler for clicking outside input
-        if (e.key === "Escape") {
-          e.preventDefault();
-          handleClose();
-        }
-      }}
     >
       {/* Backdrop */}
       <div

package/src/engine/src/components/react/Sidebar.tsx

@@ -283,10 +283,17 @@ export function Sidebar({
   siteName,
   navigation,
   logo,
-  currentPath,
+  currentPath: initialPath,
   githubUrl,
 }: SidebarProps) {
-  // No more isDark state or MutationObserver - CSS handles theme switching
+  // Track current path locally so it updates after View Transition navigations
+  const [currentPath, setCurrentPath] = useState(initialPath);
+
+  useEffect(() => {
+    const updatePath = () => setCurrentPath(window.location.pathname);
+    document.addEventListener("astro:after-swap", updatePath);
+    return () => document.removeEventListener("astro:after-swap", updatePath);
+  }, []);
 
   return (
     <div className="flex flex-col h-full">

package/src/engine/src/layouts/DocsLayout.astro

@@ -10,6 +10,7 @@ import { Sidebar } from "../components/react/Sidebar";
 import { PageFooter } from "../components/react/PageFooter";
 import { PageActions } from "../components/react/PageActions";
 import { SearchProvider } from "../components/react/SearchProvider";
+import { ViewTransitions } from "astro:transitions";
 import { loadConfig } from "../lib/config.js";
 import { generateColorVariants, getPageNavigation } from "../lib/utils";
 import "../styles/global.css";
@@ -117,23 +118,20 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
       })} />
     )}
 
+    <ViewTransitions />
     <Analytics path={currentPath} />
 
     <!-- Theme init script - prevents flash of wrong theme -->
     <script is:inline>
-      (function () {
-        const storedTheme = localStorage.getItem("theme");
-        if (storedTheme === "dark") {
-          document.documentElement.classList.add("dark");
-        } else if (storedTheme === "light") {
-          document.documentElement.classList.remove("dark");
-        } else {
-          const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-          if (prefersDark) {
-            document.documentElement.classList.add("dark");
-          }
-        }
-      })();
+      function getThemePreference() {
+        const stored = localStorage.getItem("theme");
+        if (stored === "dark" || stored === "light") return stored;
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      document.documentElement.classList.toggle("dark", getThemePreference() === "dark");
+      document.addEventListener("astro:before-swap", function (e) {
+        e.newDocument.documentElement.classList.toggle("dark", getThemePreference() === "dark");
+      });
     </script>
 
     <!-- Theme injection from docs.json config -->
@@ -159,6 +157,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
       <aside class="hidden lg:block fixed inset-y-0 left-0 z-40 w-64 border-r border-[var(--color-border)] bg-[var(--color-surface-raised)]">
         <Sidebar
           client:load
+          transition:persist="desktop-sidebar"
           siteName={siteName}
           navigation={navigation}
           logo={logo}
@@ -182,6 +181,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
         <div class="h-full overflow-y-auto">
           <Sidebar
             client:load
+            transition:persist="mobile-sidebar"
             siteName={siteName}
             navigation={navigation}
             logo={logo}
@@ -276,7 +276,7 @@ const { previous: previousPage, next: nextPage } = getPageNavigation(navigation,
     </div>
 
     <!-- Search modal -->
-    <SearchProvider client:load backend={backend} siteId={siteId} />
+    <SearchProvider client:load transition:persist="search" backend={backend} siteId={siteId} />
 
     <!-- Mobile sidebar toggle script -->
     <script src="../scripts/mobile-sidebar.ts"></script>