@drawnagency/primitives 0.1.49 → 0.1.50

package/src/components/shared/Navigation.tsx

@@ -1,38 +1,36 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
-import type { NavItem } from "../../lib/nav";
-import { editModeEvent, navChangeEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
+import type { SiteNav, NavItem } from "../../lib/nav";
+import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
 import { formatDate } from "../../lib/timestamp";
 import { Popover } from "./Popover";
 import { HistoryPopover } from "./HistoryPopover";
 
 interface Props {
-  navLinks: NavItem[];
+  siteNav: SiteNav;
   siteName: string;
   darkMode: "light" | "dark" | "optional";
   lastUpdated: string | null;
+  // Optional same-island handler (tests). In production the editor nav is a
+  // separate island from EditorShell, so a click dispatches pageSelectEvent.
+  onPageSelect?: (pageId: string) => void;
 }
 
-export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode, lastUpdated }: Props) {
+export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, onPageSelect }: Props) {
   const [isOpen, setIsOpen] = useState(false);
-  // Must start false to match SSR (where `window` is undefined). Reading window
-  // in the initializer makes the first client render disagree with the server
-  // (edit branch vs view branch) → React hydration mismatch (#418). Set it from
-  // the pathname in the mount effect below instead.
   const [isEditMode, setIsEditMode] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
   const [isDark, setIsDark] = useState(false);
-  const [navLinks, setNavLinks] = useState<NavItem[]>(initialNavLinks);
+  const [siteNav, setSiteNav] = useState<SiteNav>(initialNav);
   const [showHistory, setShowHistory] = useState(false);
   const historyButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
-    // Resolve edit mode after mount (post-hydration) to avoid an SSR/client mismatch.
     setIsEditMode(window.location.pathname.startsWith("/edit"));
     const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
-    const unlistenNav = navChangeEvent.listen((links) => setNavLinks(links));
+    const unlistenNav = siteNavChangeEvent.listen((n) => setSiteNav(n));
     const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode as typeof darkMode));
     return () => { unlistenEdit(); unlistenNav(); unlistenDark(); };
   }, []);
@@ -40,9 +38,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
   useEffect(() => {
     const root = document.documentElement;
     setIsDark(root.classList.contains("dark"));
-    const observer = new MutationObserver(() => {
-      setIsDark(root.classList.contains("dark"));
-    });
+    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
     observer.observe(root, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
   }, []);
@@ -55,142 +51,157 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
     setTimeout(() => root.classList.remove("theme-changing"), 200);
   }, []);
 
-  // Build ID maps for scroll tracking
-  const parentIds = navLinks.map((item) => item.href.replace("#", ""));
+  // The active page can live in any tier (editors navigate to hidden and
+  // archived pages via the Pages modal).
+  const activePage =
+    [...siteNav.pages, ...siteNav.hidden, ...siteNav.archive].find((p) => p.isActive) ?? null;
+  const headings: NavItem[] = activePage?.headings ?? [];
+
+  const parentIds = headings.map((h) => h.href.replace("#", ""));
   const childIdsByParent: Record<string, string[]> = {};
   const grandchildIdsByChild: Record<string, string[]> = {};
-
-  for (const parent of navLinks) {
+  for (const parent of headings) {
     const pid = parent.href.replace("#", "");
     childIdsByParent[pid] = parent.children.map((c) => c.href.replace("#", ""));
     for (const child of parent.children) {
-      const cid = child.href.replace("#", "");
-      grandchildIdsByChild[cid] = child.children.map((gc) => gc.href.replace("#", ""));
+      grandchildIdsByChild[child.href.replace("#", "")] = child.children.map((gc) => gc.href.replace("#", ""));
     }
   }
-
   const { activeParentId, activeChildId, activeGrandchildId, setActiveSection } =
     useActiveHeadings(parentIds, childIdsByParent, grandchildIdsByChild);
 
-  const handleNav = useCallback((href: string) => {
+  const handleHeadingNav = useCallback((href: string) => {
     const id = href.replace("#", "");
     const el = document.getElementById(id);
-    if (el) {
-      el.scrollIntoView({ behavior: "smooth" });
-      setActiveSection(id);
-    }
+    if (el) { el.scrollIntoView({ behavior: "smooth" }); setActiveSection(id); }
     setIsOpen(false);
   }, [setActiveSection]);
 
+  const renderHeadings = () => (
+    <ul className="ml-3 mt-1 space-y-1 border-l border-base-200 pl-3">
+      {headings.map((parent) => {
+        const pid = parent.href.replace("#", "");
+        return (
+          <li key={pid}>
+            <button
+              onClick={() => handleHeadingNav(parent.href)}
+              className={cn("cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
+                activeParentId === pid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                !isEditMode && parent.status && parent.status !== "live" && "opacity-50")}
+            >
+              {parent.label}
+            </button>
+            {activeParentId === pid && parent.children.length > 0 && (
+              <ul className="ml-3 mt-1 space-y-1">
+                {parent.children.map((child) => {
+                  const cid = child.href.replace("#", "");
+                  return (
+                    <li key={cid}>
+                      <button onClick={() => handleHeadingNav(child.href)}
+                        className={cn("cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
+                          activeChildId === cid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                          !isEditMode && child.status && child.status !== "live" && "opacity-50")}>
+                        {child.label}
+                      </button>
+                      {activeChildId === cid && child.children.length > 0 && (
+                        <ul className="ml-3 mt-1 space-y-1">
+                          {child.children.map((gc) => {
+                            const gid = gc.href.replace("#", "");
+                            return (
+                              <li key={gid}>
+                                <button onClick={() => handleHeadingNav(gc.href)}
+                                  className={cn("cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors",
+                                    activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                                    !isEditMode && gc.status && gc.status !== "live" && "opacity-50")}>
+                                  {gc.label}
+                                </button>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const handlePageClick = useCallback((id: string) => {
+    if (onPageSelect) onPageSelect(id);
+    else pageSelectEvent.dispatch(id);
+    setIsOpen(false);
+  }, [onPageSelect]);
+
+  // Render an interactive button (no full navigation) when in the editor or when
+  // a same-island handler is supplied; otherwise a real <a> for the viewer.
+  const asButton = isEditMode || !!onPageSelect;
+
+  const renderPage = (page: SiteNav["pages"][number]) => (
+    <li key={page.id}>
+      {asButton ? (
+        <button
+          onClick={() => handlePageClick(page.id)}
+          className={cn("cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
+            page.isActive ? "text-primary" : "text-base-contrast hover:text-primary")}
+        >
+          {page.title}
+        </button>
+      ) : (
+        <a
+          href={page.href}
+          className={cn("block w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
+            page.isActive ? "text-primary" : "text-base-contrast hover:text-primary")}
+        >
+          {page.title}
+        </a>
+      )}
+      {page.isActive && headings.length > 0 && renderHeadings()}
+    </li>
+  );
+
+  const renderPageGroup = (label: string, pages: SiteNav["pages"]) =>
+    pages.length > 0 && (
+      <div className="mx-4 mt-2 border-t border-base-200 pt-2">
+        <p className="px-3 py-1 text-xs font-semibold uppercase tracking-wide text-base-contrast/70">{label}</p>
+        <ul className="space-y-1">{pages.map(renderPage)}</ul>
+      </div>
+    );
+
   return (
     <>
-      {/* Mobile header bar */}
       <header className="fixed top-0 left-0 right-0 z-50 bg-base lg:hidden">
         <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
           <span className="text-lg font-bold text-primary">{siteName}</span>
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="cursor-pointer p-2 text-base-contrast"
-            aria-label="Toggle navigation"
-          >
+          <button onClick={() => setIsOpen(!isOpen)} className="cursor-pointer p-2 text-base-contrast" aria-label="Toggle navigation">
             <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               {isOpen
                 ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              }
+                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />}
             </svg>
           </button>
         </div>
       </header>
 
-      {/* Backdrop */}
-      {isOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
-          onClick={() => setIsOpen(false)}
-        />
-      )}
+      {isOpen && <div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setIsOpen(false)} />}
 
-      {/* Sidebar nav */}
-      <nav
-        className={cn(
-          "fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
-          isOpen ? "translate-x-0" : "-translate-x-full",
-        )}
-      >
-        {/* Desktop header */}
+      <nav className={cn("fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
+        isOpen ? "translate-x-0" : "-translate-x-full")}>
         <div className="hidden px-4 py-4 lg:block">
           <span className="text-lg font-bold text-primary">{siteName}</span>
         </div>
 
         <ul className="space-y-1 px-4 py-2">
-          {navLinks.map((parent) => {
-            const pid = parent.href.replace("#", "");
-            const isActiveParent = activeParentId === pid;
-
-            return (
-              <li key={pid}>
-                <button
-                  onClick={() => handleNav(parent.href)}
-                  className={cn(
-                    "cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
-                    isActiveParent ? "text-primary" : "text-base-contrast hover:text-primary",
-                    !isEditMode && parent.status && parent.status !== "live" && "opacity-50",
-                  )}
-                >
-                  {parent.label}
-                </button>
-
-                {isActiveParent && parent.children.length > 0 && (
-                  <ul className="ml-3 mt-1 space-y-1 border-l border-base-200 pl-3">
-                    {parent.children.map((child) => {
-                      const cid = child.href.replace("#", "");
-                      const isActiveChild = activeChildId === cid;
-
-                      return (
-                        <li key={cid}>
-                          <button
-                            onClick={() => handleNav(child.href)}
-                            className={cn(
-                              "cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
-                              isActiveChild ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                              !isEditMode && child.status && child.status !== "live" && "opacity-50",
-                            )}
-                          >
-                            {child.label}
-                          </button>
-
-                          {isActiveChild && child.children.length > 0 && (
-                            <ul className="ml-3 mt-1 space-y-1">
-                              {child.children.map((gc) => {
-                                const gid = gc.href.replace("#", "");
-                                return (
-                                  <li key={gid}>
-                                    <button
-                                      onClick={() => handleNav(gc.href)}
-                                      className={cn(
-                                        "cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors",
-                                        activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                                        !isEditMode && gc.status && gc.status !== "live" && "opacity-50",
-                                      )}
-                                    >
-                                      {gc.label}
-                                    </button>
-                                  </li>
-                                );
-                              })}
-                            </ul>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
+          {siteNav.pages.map(renderPage)}
         </ul>
 
+        {renderPageGroup("Hidden from Menu", siteNav.hidden)}
+        {renderPageGroup("Archive", siteNav.archive)}
+
         <div className="mt-auto">
           {currentDarkMode === "optional" && (
             <div className="mx-4 border-t border-base-200 py-4">
@@ -201,37 +212,21 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
               </div>
             </div>
           )}
-
           {lastUpdated && (
             <div className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
               {isEditMode ? (
                 <div className="relative">
-                  <button
-                    ref={historyButtonRef}
-                    onClick={() => setShowHistory((prev) => !prev)}
-                    className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors"
-                    aria-label="View history"
-                  >
+                  <button ref={historyButtonRef} onClick={() => setShowHistory((p) => !p)}
+                    className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors" aria-label="View history">
                     Last updated {formatDate(lastUpdated)}
                   </button>
-                  <Popover
-                    isOpen={showHistory}
-                    onClose={() => setShowHistory(false)}
-                    anchorRef={historyButtonRef}
-                    className="w-56 !bottom-full !top-auto !mb-1 !mt-0"
-                  >
-                    <HistoryPopover
-                      onSelectCommit={(sha, date) => {
-                        setShowHistory(false);
-                        historySelectEvent.dispatch({ sha, date });
-                      }}
-                    />
+                  <Popover isOpen={showHistory} onClose={() => setShowHistory(false)} anchorRef={historyButtonRef}
+                    className="w-56 !bottom-full !top-auto !mb-1 !mt-0">
+                    <HistoryPopover onSelectCommit={(sha, date) => { setShowHistory(false); historySelectEvent.dispatch({ sha, date }); }} />
                   </Popover>
                 </div>
               ) : (
-                <p className="text-xs text-base-contrast-light">
-                  Last updated {formatDate(lastUpdated)}
-                </p>
+                <p className="text-xs text-base-contrast-light">Last updated {formatDate(lastUpdated)}</p>
               )}
             </div>
           )}

package/src/components/shared/PagesContext.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+export interface PagesContextValue {
+  pages: { id: string; title: string }[];
+  getPageHeadings: (pageId: string) => { id: string; label: string }[];
+}
+
+export const PagesContext = createContext<PagesContextValue>({ pages: [], getPageHeadings: () => [] });
+
+export function usePages(): PagesContextValue {
+  return useContext(PagesContext);
+}