hd-garden 0.14.5 → 0.14.6

package/app/components/SiteHeader.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { TOC_PANEL_ID, TOC_CONTROL_ID, TOC_CLOSED_ID } from "../lib/reading-navigation";
+
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
@@ -316,6 +318,7 @@ export function SiteHeader() {
     <>
       {/* Targets for the no-JavaScript menu links below. Fixed and outside the sticky header, so
           following #sh-menu-on or #sh-menu-off never scrolls the page (the TOC drawer works the same way). */}
+      <span className="sh-menu-target" id={TOC_CLOSED_ID} aria-hidden="true" />
       <span className="sh-menu-target" id="sh-menu-on" aria-hidden="true" />
       <span className="sh-menu-target" id="sh-menu-off" aria-hidden="true" />
       <header className="sh-header" id="site-header">
@@ -333,6 +336,11 @@ export function SiteHeader() {
             ))}
           </nav>
           <div className="sh-tools">
+            <span id={TOC_CONTROL_ID} className="sh-reading-control">
+              <a className="toc-header-nojs" href={`#${TOC_PANEL_ID}`} aria-label={t.toc}>
+                {t.tocShort}
+              </a>
+            </span>
             <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} onPointerEnter={prefetchSearch} onFocus={prefetchSearch} aria-label={t.searchArticles} aria-expanded={searchOpen} aria-controls="site-search-dialog">
               <svg viewBox="0 0 20 20" aria-hidden="true">
                 <circle cx="9" cy="9" r="5.8" />

package/app/components/TableOfContents.tsx

@@ -6,10 +6,13 @@ import {
   useId,
   useRef,
   useState,
+  useSyncExternalStore,
   type MouseEvent,
   type ReactNode,
 } from "react";
-import { List, X } from "@phosphor-icons/react";
+import { createPortal } from "react-dom";
+import { TOC_PANEL_ID, TOC_CONTROL_ID, TOC_CLOSED_ID } from "../lib/reading-navigation";
+import { X } from "@phosphor-icons/react";
 import { ui, type UiLang } from "../lib/i18n";
 
 type Heading = { depth: number; text: string; id: string; no?: string };
@@ -114,6 +117,20 @@ const scrollToHeading = (id: string) => {
   html.style.scrollBehavior = previousBehavior;
 };
 
+// The server-rendered header owns the slot; this component owns one drawer/control.
+// Observe slot replacement during client navigation, never poll or duplicate the TOC.
+const readControlHost = () => document.getElementById(TOC_CONTROL_ID);
+const serverControlHost = () => null;
+function subscribeControlHost(changed: () => void) {
+  let host = readControlHost();
+  const observer = new MutationObserver(() => {
+    const next = readControlHost();
+    if (next !== host) { host = next; changed(); }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
 export function TableOfContents({
   headings,
   label,
@@ -131,9 +148,11 @@ export function TableOfContents({
     () => new Set(),
   );
   const [mobileOpen, setMobileOpen] = useState(false);
-  const panelId = useId();
+  const panelId = TOC_PANEL_ID;
+  const controlHost = useSyncExternalStore(subscribeControlHost, readControlHost, serverControlHost);
   const listId = useId();
   const listRef = useRef<HTMLOListElement>(null);
+  const panelRef = useRef<HTMLElement>(null);
   const mobileTriggerRef = useRef<HTMLButtonElement>(null);
   const mobileCloseRef = useRef<HTMLButtonElement>(null);
   const restoreMobileTriggerFocusRef = useRef(false);
@@ -283,7 +302,22 @@ export function TableOfContents({
       mobileCloseRef.current?.focus({ preventScroll: true });
     });
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") closeMobileToc(true);
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMobileToc(true);
+      }
+      if (event.key !== "Tab") return;
+      const controls = Array.from(panelRef.current?.querySelectorAll<HTMLElement>("a[href], button:not([disabled])") ?? [])
+        .filter((control) => control.getClientRects().length > 0 && getComputedStyle(control).visibility !== "hidden");
+      const first = controls[0];
+      const last = controls.at(-1);
+      if (event.shiftKey && document.activeElement === first && last) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last && first) {
+        event.preventDefault();
+        first.focus();
+      }
     };
     const handleViewportChange = () => {
       if (!mobileQuery.matches) setMobileOpen(false);
@@ -346,6 +380,13 @@ export function TableOfContents({
     setActiveId(id);
     closeMobileToc();
     trackAnchorLayout(id);
+    const heading = document.getElementById(id);
+    if (heading) {
+      const temporaryTabIndex = !heading.hasAttribute("tabindex");
+      if (temporaryTabIndex) heading.tabIndex = -1;
+      heading.focus({ preventScroll: true });
+      if (temporaryTabIndex) heading.addEventListener("blur", () => heading.removeAttribute("tabindex"), { once: true });
+    }
   };
 
   const renderNode = (node: TocNode, path: number[]): ReactNode => {
@@ -395,7 +436,7 @@ export function TableOfContents({
 
   return (
     <>
-      <button
+      {controlHost ? createPortal(<button
         ref={mobileTriggerRef}
         className="toc-mobile-trigger"
         type="button"
@@ -406,16 +447,8 @@ export function TableOfContents({
         data-mobile-open={mobileOpen}
         onClick={() => setMobileOpen(true)}
       >
-        <List size={17} weight="bold" aria-hidden="true" />
-        <span>{t.tocShort}</span>
-      </button>
-      {/* Without JavaScript the button above does nothing. This link opens the
-          drawer through :target instead; CSS shows it only when scripting is
-          off, so with JavaScript nothing here is visible. */}
-      <a className="toc-nojs-trigger" id={`${panelId}-open`} href={`#${panelId}`} aria-label={`${t.open}${label}`}>
-        <List size={17} weight="bold" aria-hidden="true" />
         <span>{t.tocShort}</span>
-      </a>
+      </button>, controlHost) : null}
       <button
         className="toc-mobile-backdrop"
         type="button"
@@ -425,6 +458,9 @@ export function TableOfContents({
         onClick={() => closeMobileToc(true)}
       />
       <aside
+        ref={panelRef}
+        role={mobileOpen ? "dialog" : undefined}
+        aria-modal={mobileOpen ? true : undefined}
         className="toc toc-rail"
         id={panelId}
         aria-label={label}
@@ -441,7 +477,7 @@ export function TableOfContents({
           >
             <X size={18} aria-hidden="true" />
           </button>
-          <a className="toc-nojs-close" href={`#${panelId}-open`} aria-label={`${t.close}${label}`}>
+          <a className="toc-nojs-close" href={`#${TOC_CLOSED_ID}`} aria-label={`${t.close}${label}`}>
             <X size={18} aria-hidden="true" />
           </a>
         </div>

package/app/globals.css

@@ -3917,62 +3917,10 @@ html[data-theme="dark"] .search-footer {
     overflow: visible;
   }
 
-  .toc-mobile-trigger,
-  .toc-nojs-trigger {
-    position: fixed;
-    right: calc(16px + env(safe-area-inset-right));
-    bottom: calc(16px + env(safe-area-inset-bottom));
-    z-index: 70;
-    min-height: 44px;
-    padding: 0 18px 0 15px;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    border: 1px solid #d9d5cc;
-    border-radius: 999px;
-    background: rgb(255 255 255 / 94%);
-    box-shadow: 0 2px 10px rgb(27 26 24 / 10%);
-    color: var(--ink);
-    font: 600 14px/1 var(--sans);
-    letter-spacing: 0;
-    touch-action: manipulation;
-    cursor: pointer;
-    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
-  }
-
-  /* The floating contents button sits over the bottom 76px of the screen:
-     keep that much room after the last line, and keep anchors clear of it. */
-  html:has(.toc-mobile-trigger) {
-    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
-  }
-
-  body:has(.toc-mobile-trigger) main {
-    padding-bottom: calc(76px + env(safe-area-inset-bottom));
-  }
-
-  :root[data-theme="dark"] .toc-mobile-trigger,
-  html[data-theme="dark"] .toc-mobile-trigger,
-  :root[data-theme="dark"] .toc-nojs-trigger,
-  html[data-theme="dark"] .toc-nojs-trigger {
-    background: rgb(30 29 26 / 94%);
-    border-color: var(--rule-strong);
-    color: var(--ink);
-  }
-
-  .toc-mobile-trigger:hover,
-  .toc-mobile-trigger:focus-visible,
-  .toc-nojs-trigger:hover,
-  .toc-nojs-trigger:focus-visible {
-    transform: translateY(-2px);
-  }
-
   .toc-mobile-trigger:focus-visible,
+  .toc-header-nojs:focus-visible,
   .toc-mobile-close:focus-visible,
-  .toc-nojs-trigger:focus-visible,
-  .toc-nojs-close:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 3px;
-  }
+  .toc-nojs-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
 
   .toc-mobile-trigger[data-mobile-open="true"] {
     opacity: 0;
@@ -4054,8 +4002,8 @@ html[data-theme="dark"] .search-footer {
 
   .toc-mobile-close,
   .toc-nojs-close {
-    width: 34px;
-    height: 34px;
+    width: 44px;
+    height: 44px;
     padding: 0;
     display: grid;
     place-items: center;
@@ -4088,9 +4036,13 @@ html[data-theme="dark"] .search-footer {
      padding on post pages but not on column pages. */
   .toc .toc-header,
   .toc .toc-list {
-    padding-inline: 20px;
+    padding-left: max(20px, env(safe-area-inset-left));
+    padding-right: max(20px, env(safe-area-inset-right));
   }
 
+  .toc .toc-item-row > a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
+  .toc .toc-section-toggle { min-width: 44px; min-height: 44px; }
+
   .toc li {
     margin: 10px 0;
     font-size: 13px;
@@ -5707,12 +5659,6 @@ html[data-theme="dark"] .search-footer {
     display: none;
   }
 
-  .toc-nojs-trigger {
-    display: inline-flex;
-    color: var(--ink);
-    text-decoration: none;
-  }
-
   .toc-nojs-close {
     display: grid;
     text-decoration: none;
@@ -5725,7 +5671,7 @@ html[data-theme="dark"] .search-footer {
     transition: opacity 180ms ease, visibility 0s;
   }
 
-  body:has(.toc:target) .toc-nojs-trigger {
+  body:has(.toc:target) .toc-header-nojs {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;

package/app/lib/i18n.ts

@@ -319,7 +319,7 @@ const en: typeof zh = {
   columnFallbackDesc: "A series of posts in reading order.",
   columnNewestFirst: (title: string | undefined) => `${title}, newest first`,
   toc: "Contents",
-  tocShort: "Contents",
+  tocShort: "TOC",
   tocPage: "On this page",
   open: "Open ",
   close: "Close ",

package/app/lib/reading-navigation.ts

@@ -0,0 +1,4 @@
+// One primary reading navigation per page; shared by the server header and client drawer.
+export const TOC_PANEL_ID = "reading-contents";
+export const TOC_CONTROL_ID = "reading-contents-control";
+export const TOC_CLOSED_ID = "reading-contents-closed";

package/app/styles/a2.css

@@ -1587,13 +1587,6 @@ html[data-theme="dark"] .g-quiz-out.no { color: #f29aab; }
 /* Fullscreen controls own a top band, not a second frame or a narrow text rail. */
 .ux-fs > .ux-fsbar + .g-play { padding: 44px 0 0; border: 0; }
 .g-play > .garden-ui { margin: 0; }
-@media (max-width: 900px) {
-  .post-reading-page .toc-mobile-trigger,
-  .post-reading-page .toc-nojs-trigger {
-    position: static;
-    margin: 0 0 16px;
-  }
-}
 .g-play-f { margin: 0 0 10px; font-size: 14px; color: var(--soft); }
 .g-range { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); margin: 6px 0; }
 .g-range input { width: 100%; accent-color: var(--blue); min-height: 32px; }
@@ -2794,3 +2787,11 @@ html[data-theme="dark"] .ref-demo { --rd-s: #262624; --rd-p: #1f1e1d; --rd-i: #e
     display: none;
   }
 }
+
+/* Desktop rail spacing must not replace the mobile drawer's home-indicator inset. */
+@media (max-width: 900px) {
+  .post-reading-page .article-reading-layout > .toc,
+  .garden-doc-page > .toc {
+    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
+  }
+}

package/app/styles/shell.css

@@ -456,3 +456,26 @@ a.sh-lang:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
   --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
   --serif:"Source Serif 4",Georgia,"Times New Roman","Source Han Serif SC","Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;
 }
+
+/* Reading navigation lives in the existing sticky header, never over prose.
+   The server fallback works without JS; hydration portals the stateful control
+   into the same reserved slot. No duplicate article-start button or extra band. */
+.sh-reading-control { display: none; }
+.toc-header-nojs { display: none; }
+@media (max-width: 900px) {
+  body:has(.toc-rail) .sh-reading-control { display: inline-flex; flex: 0 0 44px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
+  .sh-reading-control .toc-mobile-trigger,
+  .sh-reading-control .toc-header-nojs {
+    position: static; display: inline-flex; width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0;
+    align-items: center; justify-content: center; border: 0; border-radius: var(--r);
+    background: transparent; box-shadow: none; color: var(--ink); font: 600 13px/1 var(--sans); text-decoration: none;
+  }
+  .sh-reading-control .toc-header-nojs { display: none; }
+  .sh-reading-control .toc-mobile-trigger:hover,
+  .sh-reading-control .toc-mobile-trigger:focus-visible { transform: none; background: var(--tint); }
+  .sh-reading-control .toc-mobile-trigger[data-mobile-open="true"] { visibility: visible; opacity: 1; pointer-events: none; transform: none; }
+  .sh-bar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
+}
+@media (max-width: 900px) and (scripting: none) {
+  .sh-reading-control .toc-header-nojs { display: inline-flex; }
+}

package/editors/dist/typora/manifest.json

@@ -5,7 +5,7 @@
   "author": "hedon",
   "authorUrl": "https://github.com/hedon954",
   "repo": "hedon954/garden",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "minAppVersion": "1.5.0",
   "minCoreVersion": "2.10.52",
   "platforms": [

package/editors/dist/typora/style.css

@@ -4351,13 +4351,6 @@ html[data-theme="dark"] {
 /* Fullscreen controls own a top band, not a second frame or a narrow text rail. */
 .garden-ui-preview .ux-fs > .ux-fsbar + .g-play { padding: 44px 0 0; border: 0; }
 .garden-ui-preview .g-play > .garden-ui { margin: 0; }
-@media (max-width: 900px) {
-  .garden-ui-preview .post-reading-page .toc-mobile-trigger,
-  .garden-ui-preview .post-reading-page .toc-nojs-trigger {
-    position: static;
-    margin: 0 0 16px;
-  }
-}
 .garden-ui-preview .g-play-f { margin: 0 0 10px; font-size: 14px; color: var(--soft); }
 .garden-ui-preview .g-range { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); margin: 6px 0; }
 .garden-ui-preview .g-range input { width: 100%; accent-color: var(--blue); min-height: 32px; }
@@ -5559,6 +5552,14 @@ html[data-theme="dark"] {
   }
 }
 
+/* Desktop rail spacing must not replace the mobile drawer's home-indicator inset. */
+@media (max-width: 900px) {
+  .garden-ui-preview .post-reading-page .article-reading-layout > .toc,
+  .garden-ui-preview .garden-doc-page > .toc {
+    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
+  }
+}
+
 .garden-ui-preview {font:inherit}.garden-ui-preview .markdown-body {font:inherit}
 .garden-ui-typora { margin: 0.25em 0; text-align: left; white-space: normal; }
 .garden-suggest { display: flex; align-items: center; gap: 8px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/ui/preview/dist/garden-ui.css

@@ -4351,13 +4351,6 @@ html[data-theme="dark"] {
 /* Fullscreen controls own a top band, not a second frame or a narrow text rail. */
 .garden-ui-preview .ux-fs > .ux-fsbar + .g-play { padding: 44px 0 0; border: 0; }
 .garden-ui-preview .g-play > .garden-ui { margin: 0; }
-@media (max-width: 900px) {
-  .garden-ui-preview .post-reading-page .toc-mobile-trigger,
-  .garden-ui-preview .post-reading-page .toc-nojs-trigger {
-    position: static;
-    margin: 0 0 16px;
-  }
-}
 .garden-ui-preview .g-play-f { margin: 0 0 10px; font-size: 14px; color: var(--soft); }
 .garden-ui-preview .g-range { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); margin: 6px 0; }
 .garden-ui-preview .g-range input { width: 100%; accent-color: var(--blue); min-height: 32px; }
@@ -5559,4 +5552,12 @@ html[data-theme="dark"] {
   }
 }
 
+/* Desktop rail spacing must not replace the mobile drawer's home-indicator inset. */
+@media (max-width: 900px) {
+  .garden-ui-preview .post-reading-page .article-reading-layout > .toc,
+  .garden-ui-preview .garden-doc-page > .toc {
+    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
+  }
+}
+
 .garden-ui-preview {font:inherit}.garden-ui-preview .markdown-body {font:inherit}