hd-garden 0.14.7 → 0.14.8

package/app/components/FeaturedTitle.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Link from "next/link";
+import { useLayoutEffect, useRef } from "react";
+import { mountFeatureTitle } from "../../ui/garden/feature-title-fit.mjs";
+import runtimeSource from "../../ui/garden/feature-title-fit.mjs?raw";
+
+// Preserve one authored runtime across SSR/browser builds; function.toString()
+// would be changed independently by server and client optimizers.
+const FEATURE_TITLE_BOOT = `(()=>{${runtimeSource.replace(/^export /gm, "")}\nmountFeatureTitle(document.currentScript.parentElement);})();`;
+
+type FeaturedTitleProps = { title: string; href: string; description?: string };
+
+export function FeaturedTitle({ title, href, description }: FeaturedTitleProps) {
+  const heading = useRef<HTMLHeadingElement>(null);
+  useLayoutEffect(() => mountFeatureTitle(heading.current?.parentElement), [title, href, description]);
+  return <>
+    <h2 id="ft" ref={heading} data-feature-title=""><Link href={href}>{title}</Link></h2>
+    {description ? <p data-feature-summary="">{description}</p> : null}
+    <style data-feature-title-rules="">{""}</style>
+    <script data-feature-title-boot="" dangerouslySetInnerHTML={{ __html: FEATURE_TITLE_BOOT }} />
+  </>;
+}

package/app/components/MarkdownArticle.tsx

@@ -15,6 +15,7 @@ import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeKatex from "rehype-katex";
+import {rehypeKeepPunctuation} from "../../ui/garden/rehype-keep-punctuation.mjs";
 import rehypeSlug from "rehype-slug";
 import rehypeHighlight from "rehype-highlight";
 import { rehypeHeadingAnchors } from "../../ui/garden/heading-anchors.mjs";
@@ -254,6 +255,7 @@ export function MarkdownArticle({ content, lang, fieldTables, refDemos, handbook
           rehypeRaw,
           rehypeGardenBlocks,
           rehypeKatex,
+          rehypeKeepPunctuation,
           rehypeSlug,
           // Not rehype-autolink-headings "wrap": a heading with a link in it would nest <a> in <a> (React #418).
           [rehypeHeadingAnchors, { className: ["h-anchor"] }],

package/app/components/TableOfContents.tsx

@@ -4,39 +4,28 @@ import {
   useCallback,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
   useSyncExternalStore,
   type MouseEvent,
   type ReactNode,
 } from "react";
+import { usePathname } from "next/navigation";
+import { nestHeadings, expandedTocSections, toggleTocSection, type TocHeading, type TocNode, type TocExpansion } from "../lib/toc-expansion";
 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 };
+type TocProps = { headings: TocHeading[]; label?: string; lang?: UiLang };
 
-type TocNode = Heading & { children: TocNode[] };
-
-const nestHeadings = (headings: Heading[]) => {
-  const roots: TocNode[] = [];
-  const stack: TocNode[] = [];
-
-  for (const heading of headings) {
-    const node: TocNode = { ...heading, children: [] };
-    while (stack.at(-1) && stack.at(-1)!.depth >= heading.depth) {
-      stack.pop();
-    }
-
-    const parent = stack.at(-1);
-    if (parent) parent.children.push(node);
-    else roots.push(node);
-    stack.push(node);
-  }
-
-  return roots;
-};
+// A route/content change starts a fresh reading session, including when React
+// reuses the component during normal client navigation.
+export function TableOfContents(props: TocProps) {
+  const pathname = usePathname();
+  return <ContentsSession key={`${pathname}:${JSON.stringify(props.headings)}`} {...props} />;
+}
 
 const getCssScrollPaddingTop = () => {
   const value = window.getComputedStyle(document.documentElement).scrollPaddingTop;
@@ -131,22 +120,15 @@ function subscribeControlHost(changed: () => void) {
   return () => observer.disconnect();
 }
 
-export function TableOfContents({
+function ContentsSession({
   headings,
   label,
   lang,
-}: {
-  headings: Heading[];
-  label?: string;
-  /** Defaults to the site language; the bilingual handbook passes its own. */
-  lang?: UiLang;
-}) {
+}: TocProps) {
   const t = ui(lang);
   label ??= t.toc;
-  const [activeId, setActiveId] = useState(headings[0]?.id);
-  const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
-    () => new Set(),
-  );
+  const [activeId, setActiveId] = useState<string>();
+  const [expansion, setExpansion] = useState<TocExpansion>({ mode: "follow" });
   const [mobileOpen, setMobileOpen] = useState(false);
   const panelId = TOC_PANEL_ID;
   const controlHost = useSyncExternalStore(subscribeControlHost, readControlHost, serverControlHost);
@@ -157,7 +139,8 @@ export function TableOfContents({
   const mobileCloseRef = useRef<HTMLButtonElement>(null);
   const restoreMobileTriggerFocusRef = useRef(false);
   const anchorCleanupRef = useRef<(() => void) | undefined>(undefined);
-  const tree = nestHeadings(headings);
+  const tree = useMemo(() => nestHeadings(headings), [headings]);
+  const expanded = useMemo(() => expandedTocSections(tree, expansion, activeId), [tree, expansion, activeId]);
 
   const closeMobileToc = useCallback((restoreFocus = false) => {
     restoreMobileTriggerFocusRef.current = restoreFocus;
@@ -250,9 +233,9 @@ export function TableOfContents({
       const current = reachedPageEnd
         ? visibleHeadings.at(-1)?.id
         : visibleHeadings.filter((heading) => heading.top <= readingProbe).at(-1)
-            ?.id ?? visibleHeadings[0]?.id;
+            ?.id;
 
-      if (current) setActiveId((previous) => (previous === current ? previous : current));
+      setActiveId((previous) => (previous === current ? previous : current));
     };
     const scheduleUpdate = () => {
       if (!frame) frame = window.requestAnimationFrame(updateActiveHeading);
@@ -341,7 +324,7 @@ export function TableOfContents({
     const activeItem = list?.querySelector<HTMLElement>(
       '[aria-current="location"]',
     );
-    if (!list || !activeItem) return;
+    if (!list || !activeItem || !activeItem.getClientRects().length) return;
 
     const edge = 10;
     const listBounds = list.getBoundingClientRect();
@@ -358,16 +341,20 @@ export function TableOfContents({
       const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
       list.scrollTo({ top: nextTop, behavior: reduceMotion ? "auto" : "smooth" });
     }
-  }, [activeId, collapsedSections, mobileOpen]);
-
-  const toggleSection = (id: string) => {
-    setCollapsedSections((current) => {
-      const next = new Set(current);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
+  }, [activeId, expanded, mobileOpen]);
+
+  useEffect(() => {
+    const focused = document.activeElement;
+    if (!(focused instanceof HTMLElement) || !listRef.current?.contains(focused) || focused.getClientRects().length) return;
+    let section = focused.closest(".toc-section");
+    while (section) {
+      const link = section.querySelector<HTMLAnchorElement>(":scope > .toc-item-row > a");
+      if (link?.getClientRects().length) { link.focus({ preventScroll: true }); break; }
+      section = section.parentElement?.closest(".toc-section") ?? null;
+    }
+  }, [expanded]);
+
+  const toggleSection = (id: string) => setExpansion((current) => toggleTocSection(expandedTocSections(tree, current, activeId), id));
 
   const navigateToHeading = (event: MouseEvent<HTMLAnchorElement>, id: string) => {
     event.preventDefault();
@@ -390,7 +377,7 @@ export function TableOfContents({
   };
 
   const renderNode = (node: TocNode, path: number[]): ReactNode => {
-    const collapsed = collapsedSections.has(node.id);
+    const collapsed = !expanded.has(node.id);
     const childListId = `${listId}-${path.join("-")}`;
 
     return (
@@ -422,7 +409,7 @@ export function TableOfContents({
           ) : null}
         </div>
         {node.children.length > 0 ? (
-          <ol id={childListId} className="toc-sublist" hidden={collapsed}>
+          <ol id={childListId} className="toc-sublist" role="list" data-collapsed={collapsed}>
             {node.children.map((child, index) => renderNode(child, [...path, index]))}
           </ol>
         ) : null}
@@ -465,6 +452,8 @@ export function TableOfContents({
         id={panelId}
         aria-label={label}
         data-mobile-open={mobileOpen}
+        data-toc-mode={expansion.mode}
+        data-toc-active={activeId || ""}
       >
         <div className="toc-header">
           <p>{label}</p>
@@ -481,7 +470,12 @@ export function TableOfContents({
             <X size={18} aria-hidden="true" />
           </a>
         </div>
-        <ol id={listId} ref={listRef} className="toc-list">
+        {tree.some((node) => node.children.length > 0) ? <div className="toc-mode-controls" role="group" aria-label={t.tocDisplay}>
+          <button type="button" data-toc-follow="" aria-controls={listId} aria-pressed={expansion.mode === "follow"} onClick={() => setExpansion({ mode: "follow" })}>{t.tocFollow}</button>
+          <button type="button" data-toc-expand-all="" aria-controls={listId} aria-pressed={expansion.mode === "all"} onClick={() => setExpansion({ mode: "all" })}>{t.tocExpandAll}</button>
+          <span className="toc-mode-status" role="status">{expansion.mode === "manual" ? t.tocManual : ""}</span>
+        </div> : null}
+        <ol id={listId} ref={listRef} className="toc-list" role="list">
           {tree.map((node, index) => renderNode(node, [index]))}
         </ol>
       </aside>

package/app/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "../ui/react/ui.css";
 @import "../ui/compose/compose.css";
+@import "../ui/garden/inline-math.css";
 @import "./admin-ui.css";
 
 :root {
@@ -1754,10 +1755,13 @@ button {
 
 .toc .toc-sublist {
   margin: 0;
-  padding: 0 0 0 12px;
+  padding: 0;
+  padding-inline-start: 1.25em;
   list-style: none;
 }
 
+.toc .toc-sublist[data-collapsed="true"] { display: none; }
+
 .toc-item-row {
   display: flex;
   align-items: flex-start;
@@ -1804,10 +1808,14 @@ button {
   line-height: 1.6;
 }
 
-.toc li.toc-depth-4,
-.toc li.toc-depth-5 {
-  font-size: 11px;
-}
+.toc-list > .toc-section > .toc-item-row > a { font-weight: 600; }
+.toc-sublist > .toc-section > .toc-item-row > a { font-weight: 400; }
+.toc-mode-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 0 0 auto; margin-bottom: 10px; }
+.toc-mode-controls button { min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
+.toc-mode-controls button[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
+.toc-mode-controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
+.toc-mode-status { color: var(--muted); }
+.toc-mode-status:empty { display: none; }
 
 .toc a:hover {
   color: var(--ink);
@@ -2557,6 +2565,7 @@ button {
   overflow-wrap: normal;
 }
 
+
 .markdown-body .footnotes {
   margin-top: 64px;
   padding-top: 22px;
@@ -3863,18 +3872,22 @@ html[data-theme="dark"] .search-footer {
      panel, because the post layout's desktop rule overrides the panel's
      padding on post pages but not on column pages. */
   .toc .toc-header,
+  .toc .toc-mode-controls,
   .toc .toc-list {
     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 .toc-item-row > a { display: flex; align-items: center; min-height: 40px; padding-block: 4px; }
+  .toc .toc-section-toggle { min-width: 40px; min-height: 40px; }
+  .toc .toc-mode-controls button { min-height: 44px; }
 
-  .toc li {
-    margin: 10px 0;
+  .toc .toc-list .toc-section {
+    margin: 2px 0;
     font-size: 13px;
+    line-height: 1.5;
   }
+  .toc-list > .toc-section + .toc-section { margin-top: 6px; }
 
   .post-reading-page {
     width: min(var(--content), calc(100% - 48px));
@@ -5393,9 +5406,10 @@ html[data-theme="dark"] .search-footer {
 /* Without JavaScript every sub-list stays open and the collapse toggles do
    nothing, so hide them at every width. */
 @media (scripting: none) {
-  .toc-section-toggle {
+  .toc-section-toggle, .toc-mode-controls {
     display: none;
   }
+  .toc .toc-sublist[data-collapsed="true"] { display: block; }
 }
 
 /* No JavaScript: the drawer button cannot open anything, so swap in plain

package/app/lib/i18n.ts

@@ -38,6 +38,10 @@ const zh = {
   columnNewestFirst: (title: string | undefined) => `${title}，从新到旧`,
   toc: "本篇目录",
   tocShort: "目录",
+  tocDisplay: "目录展开方式",
+  tocFollow: "跟随阅读",
+  tocExpandAll: "全部展开",
+  tocManual: "手动调整",
   tocPage: "本页目录",
   open: "打开",
   close: "关闭",
@@ -296,6 +300,10 @@ const en: typeof zh = {
   columnNewestFirst: (title: string | undefined) => `${title}, newest first`,
   toc: "Contents",
   tocShort: "TOC",
+  tocDisplay: "Contents display",
+  tocFollow: "Follow reading",
+  tocExpandAll: "Expand all",
+  tocManual: "Manual selection",
   tocPage: "On this page",
   open: "Open ",
   close: "Close ",

package/app/lib/toc-expansion.ts

@@ -0,0 +1,49 @@
+export type TocHeading = { depth: number; text: string; id: string; no?: string };
+export type TocNode = TocHeading & { children: TocNode[] };
+export type TocExpansion =
+  | { mode: "follow" }
+  | { mode: "all" }
+  | { mode: "manual"; expanded: ReadonlySet<string> };
+
+export function nestHeadings(headings: readonly TocHeading[]): TocNode[] {
+  const roots: TocNode[] = [], stack: TocNode[] = [];
+  for (const heading of headings) {
+    const node: TocNode = { ...heading, children: [] };
+    let parent = stack.at(-1);
+    while (parent && parent.depth >= node.depth) {
+      stack.pop();
+      parent = stack.at(-1);
+    }
+    if (parent) parent.children.push(node);
+    else roots.push(node);
+    stack.push(node);
+  }
+  return roots;
+}
+
+// The nearest shallower heading is the parent even when heading ranks skip.
+// Opening only this path exposes the current heading and its immediate children.
+export function expandedTocSections(tree: readonly TocNode[], state: TocExpansion, activeId?: string): ReadonlySet<string> {
+  if (state.mode === "manual") return state.expanded;
+  const expanded = new Set<string>();
+  function visit(nodes: readonly TocNode[]): boolean {
+    let containsActive = false;
+    for (const node of nodes) {
+      const onPath = visit(node.children) || node.id === activeId;
+      if (node.children.length && (state.mode === "all" || onPath)) expanded.add(node.id);
+      containsActive ||= onPath;
+    }
+    return containsActive;
+  }
+  visit(tree);
+  return expanded;
+}
+
+// An individual disclosure is an explicit manual browsing choice. Freeze the
+// current visible branches instead of fighting the next scroll-spy update.
+export function toggleTocSection(expanded: ReadonlySet<string>, id: string): TocExpansion {
+  const next = new Set(expanded);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return { mode: "manual", expanded: next };
+}

package/app/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { FeaturedTitle } from "./components/FeaturedTitle";
 import { CoverImage } from "./components/CoverImage";
 import { fullListDate, homeListDate } from "./lib/a2-meta";
 import { columnStatusLabel, siteLang, ui } from "./lib/i18n";
@@ -65,8 +66,7 @@ export default function Home() {
               <span>{t.homeLatestBadge}</span>
               <time className="num" dateTime={day(feature.date)}>{fullListDate(feature.date, siteLang)}</time>
             </p>
-            <h2 id="ft"><Link href={postHref(feature)}>{feature.title}</Link></h2>
-            {feature.description ? <p>{feature.description}</p> : null}
+            <FeaturedTitle title={feature.title} href={postHref(feature)} description={feature.description} />
             {feature.tags?.length ? (
               <p className="tags">{feature.tags.map((tag) => <span key={tag}>#{tag}</span>)}</p>
             ) : null}

package/app/raw.d.ts

@@ -2,3 +2,8 @@ declare module "*.md?raw" {
   const source: string;
   export default source;
 }
+
+declare module "*.mjs?raw" {
+  const source: string;
+  export default source;
+}

package/app/styles/shell.css

@@ -166,7 +166,8 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-feature .cover{border-radius:var(--r-lg);aspect-ratio:auto;display:block;overflow:hidden;background:none}
 .sh-feature .cover img{display:block;width:100%;height:auto}
 .sh-feature .kicker{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-small);color:var(--muted);margin:0 0 12px}
-.sh-feature h2{font:700 30px/1.35 var(--sans);color:var(--ink);margin:0;text-wrap:balance}
+.sh-feature>div{min-width:0}
+.sh-feature h2{font:700 max(1.875rem,1.125em)/1.35 var(--sans);color:var(--ink);margin:0;text-wrap:balance;overflow-wrap:anywhere}
 .sh-feature h2 a{text-decoration:none}
 .sh-feature h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
 .sh-feature:hover h2 a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@@ -289,7 +290,7 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-intro{padding:44px 0 0}
   .sh-intro p{font-size:var(--fs-body)}
   .sh-feature{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
-  .sh-feature h2{font-size:24px}
+  .sh-feature h2{font-size:max(1.5rem,1.125em)}
   .sh-section{margin-top:56px}
   .sh-cols{grid-template-columns:minmax(0,1fr);gap:16px}
   .sh-row,.sh-home-grid .sh-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:16px 0 17px}

package/editors/dist/typora/manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.14.7",
+  "version": "0.14.8",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",
@@ -66,7 +66,7 @@
     "start": "node bin/garden.mjs start",
     "admin:local": "node --env-file=.env.admin.local bin/garden.mjs start --host 0.0.0.0 --port 3000",
     "admin:cloudflare": "npm run build && wrangler deploy --config dist/server/wrangler.json",
-    "test": "npm run build && node --experimental-strip-types --test tests/*.test.mjs",
+    "test": "npm run build && node --experimental-strip-types --test --test-concurrency=2 tests/*.test.mjs",
     "ui:build": "node scripts/build-ui-preview.mjs",
     "editors:build": "node editors/vscode/build.mjs && node editors/obsidian/build.mjs && node editors/typora/build.mjs",
     "editors:pack": "node scripts/pack-editors.mjs",

package/scripts/file-preview.mjs

@@ -15,6 +15,7 @@
 import fs from "node:fs";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
+import { rehypeKeepPunctuation } from "../ui/garden/rehype-keep-punctuation.mjs";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import rehypeStringify from "rehype-stringify";
@@ -104,6 +105,7 @@ export function renderFilePreview(markdown, { idPrefix = "gf-", lang = "zh" } =
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeRaw)
       .use(rehypeKatex)
+      .use(rehypeKeepPunctuation)
       .use(rehypeSlug, { prefix: idPrefix })
       .use(rehypeHighlight)
       .use(rehypePreviewSafety)
@@ -190,6 +192,7 @@ export function previewStyleSheet() {
     `:not(pre)>code{font:400 14px/1 ${mono};padding:3px 6px;border-radius:5px}`,
     ".table-wrap{overflow-x:auto}table{border-collapse:collapse}th,td{border:1px solid;padding:6px 10px}",
     "a{color:inherit}.katex-html{display:none}",
+    fs.readFileSync(new URL("../ui/garden/inline-math.css", import.meta.url), "utf8"),
     theme(light),
     ...rules.flatMap((sheet) => sheet.light),
     `@media (prefers-color-scheme:dark){${theme(dark)}${rules.flatMap((sheet) => sheet.dark).join("")}}`,

package/ui/garden/feature-title-fit.mjs

@@ -0,0 +1,95 @@
+/** Largest real-font size that fits, or a readable minimum followed by wrapping. */
+export function fitTitleSize({ width, minimum, maximum, measure }) {
+  if (!(width > 0 && minimum > 0 && maximum >= minimum)) return maximum;
+  if (measure(maximum) <= width) return maximum;
+  if (measure(minimum) > width) return minimum;
+  let low = minimum, high = maximum;
+  for (let i = 0; i < 12; i++) {
+    const middle = (low + high) / 2;
+    if (measure(middle) <= width) low = middle;
+    else high = middle;
+  }
+  return Math.max(minimum, Math.floor(low * 64) / 64);
+}
+
+/** Browser-only: inline boot and layout effect. CSSOM leaves SSR markup intact. */
+export function mountFeatureTitle(root, chooseSize = fitTitleSize) {
+  if (!root) return;
+  const key = Symbol.for('garden.feature-title-fit');
+  if (root[key]) { root[key].refresh(); return root[key].dispose; }
+  const heading = root.querySelector('[data-feature-title]');
+  const sheet = root.querySelector('style[data-feature-title-rules]')?.sheet;
+  if (!heading?.id || !sheet || !window.ResizeObserver || !window.CSS?.escape) return;
+  const index = sheet.insertRule(`#${CSS.escape(heading.id)}[data-feature-title]{}`, sheet.cssRules.length);
+  const rule = sheet.cssRules[index].style;
+  let frame = 0, disposed = false, signature = '', previous, readingFloor = 0;
+  const fit = () => {
+    if (disposed || !heading.isConnected) return;
+    const prior = rule.fontSize;
+    rule.removeProperty('font-size');
+    const style = getComputedStyle(heading), parent = getComputedStyle(root);
+    const summary = root.querySelector('[data-feature-summary]');
+    const body = parseFloat(getComputedStyle(summary || root).fontSize);
+    const parentSize = parseFloat(parent.fontSize), rootSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const dpr = window.devicePixelRatio, scale = window.visualViewport?.scale || 1;
+    const width = heading.getBoundingClientRect().width;
+    const text = heading.textContent;
+    const state = { text, parentSize, rootSize, body, dpr, scale };
+    if (previous?.text !== text) readingFloor = 0;
+    if (previous?.text === text) {
+      // VisualViewport floats can jitter during initial mobile layout. Only an
+      // actual scale/font increase should preserve the reader's chosen size.
+      if (dpr < previous.dpr-.001 || scale < previous.scale-.001 || body < previous.body-.01 || rootSize < previous.rootSize-.01) readingFloor = 0;
+      if (dpr > previous.dpr+.001 || scale > previous.scale+.001 || body > previous.body+.01 || rootSize > previous.rootSize+.01) {
+        const rootGrowth = Math.max(1, rootSize / previous.rootSize);
+        readingFloor = Math.max(readingFloor, previous.size * rootGrowth / parentSize, previous.size / previous.parentSize);
+      }
+    }
+    const minimum = Math.max(body * 1.125, readingFloor * parentSize);
+    const maximum = Math.max(parseFloat(style.fontSize), minimum);
+    const nextSignature = JSON.stringify([heading.textContent,width,body,parentSize,rootSize,minimum,maximum,
+      style.fontFamily,style.fontWeight,style.fontStyle,style.fontStretch,style.letterSpacing,style.fontFeatureSettings,
+      style.fontVariationSettings,style.fontSizeAdjust,style.fontKerning,style.wordSpacing,style.fontOpticalSizing,style.textTransform,dpr,scale]);
+    if (!(width > 0 && parentSize > 0 && body > 0) || nextSignature === signature) {
+      if (prior) rule.fontSize = prior;
+      return;
+    }
+    const probe = document.createElement('span');
+    probe.style.cssText = 'position:fixed;visibility:hidden;pointer-events:none;white-space:nowrap;width:max-content;max-width:none;inset:0 auto auto 0;';
+    for (const property of ['font','fontKerning','fontFeatureSettings','fontVariationSettings','fontStretch','fontSizeAdjust','fontOpticalSizing','letterSpacing','wordSpacing','textTransform','direction']) probe.style[property] = style[property];
+    probe.textContent = heading.textContent;
+    root.append(probe);
+    let size;
+    try {
+      size = chooseSize({ width: Math.max(0,width-.5), minimum, maximum,
+        measure(value) { probe.style.fontSize = `${value}px`; return probe.getBoundingClientRect().width; } });
+    } finally { probe.remove(); }
+    rule.fontSize = `${size / parentSize}em`;
+    signature = nextSignature;
+    previous = { ...state, size };
+  };
+  const refresh = () => { if (!disposed && !frame) frame = requestAnimationFrame(() => { frame = 0; fit(); }); };
+  fit();
+  const resize = new ResizeObserver(refresh);
+  resize.observe(root);
+  const mutations = new MutationObserver(refresh);
+  mutations.observe(heading, { childList: true, subtree: true, characterData: true });
+  for (const element of [document.documentElement, document.body]) mutations.observe(element, { attributes:true, attributeFilter:['class','style','lang','data-theme'] });
+  window.addEventListener('resize',refresh);
+  window.visualViewport?.addEventListener('resize',refresh);
+  const fontsChanged = () => { signature = ''; refresh(); };
+  document.fonts?.addEventListener('loadingdone',fontsChanged);
+  document.fonts?.ready.then(fontsChanged);
+  const dispose = () => {
+    disposed = true;
+    cancelAnimationFrame(frame);
+    resize.disconnect(); mutations.disconnect();
+    window.removeEventListener('resize',refresh);
+    window.visualViewport?.removeEventListener('resize',refresh);
+    document.fonts?.removeEventListener('loadingdone',fontsChanged);
+    if (sheet.cssRules[index]?.style === rule) sheet.deleteRule(index);
+    delete root[key];
+  };
+  root[key] = { refresh, dispose };
+  return dispose;
+}

package/ui/garden/inline-math.css

@@ -0,0 +1,19 @@
+/* Closing punctuation after an inline formula cannot use CSS line-break
+   classes: the formula is an atomic inline-block. Keep the two together
+   without making the whole paragraph nowrap. */
+:is(.g-inline-math, .g-keep-punct) {
+  display: inline-flex;
+  align-items: baseline;
+  max-width: 100%;
+  vertical-align: baseline;
+  /* Contain an unbreakable formula locally, not by clipping the page. Padding
+     keeps accents and descenders clear of the horizontal scroll viewport. */
+  padding-block: .15em;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overflow-wrap: normal;
+}
+.g-inline-math > .katex { min-width: 0; }
+.g-keep-punct { white-space: nowrap; }
+.g-keep-punct > .katex { flex: none; }
+

package/ui/garden/rehype-keep-punctuation.mjs

@@ -0,0 +1,47 @@
+/** Keep closing punctuation with the preceding inline formula.
+ * KaTeX renders as an atomic inline-block, so CSS line-break / overflow-wrap
+ * rules cannot see the formula and the following punctuation as one cluster.
+ * Keep KaTeX markup/MathML intact; the outer viewport contains an oversized
+ * atomic formula whether or not it has following punctuation.
+ */
+export const CLOSING_PUNCTUATION = /^[,.;:!?，。、；：！？）)\]}］｝〉》」』】〕〗〙〛’”'"…]+/u;
+
+function classNames(node) {
+  const value = node.properties?.className;
+  return new Set(Array.isArray(value) ? value.map(String) : String(value ?? "").split(/\s+/).filter(Boolean));
+}
+
+function isInlineKatex(node) {
+  return node.type === "element" && classNames(node).has("katex") && !classNames(node).has("katex-display");
+}
+
+export function keepClosingPunctuation(tree) {
+  const walk = (parent) => {
+    if (!Array.isArray(parent?.children) || isInlineKatex(parent) ||
+      ["katex-display", "g-keep-punct", "g-inline-math"].some(name => classNames(parent).has(name))) return;
+    const next = [];
+    for (let index = 0; index < parent.children.length; index += 1) {
+      const child = parent.children[index];
+      walk(child);
+      const following = parent.children[index + 1];
+      const match = isInlineKatex(child) && following?.type === "text" ? following.value.match(CLOSING_PUNCTUATION) : null;
+      if (!isInlineKatex(child)) { next.push(child); continue; }
+      next.push({
+        type: "element",
+        tagName: "span",
+        properties: { className: [match ? "g-keep-punct" : "g-inline-math"] },
+        children: match ? [child, { type: "text", value: match[0] }] : [child],
+      });
+      if (!match) continue;
+      const rest = following.value.slice(match[0].length);
+      if (rest) next.push({ type: "text", value: rest });
+      index += 1;
+    }
+    parent.children = next;
+  };
+  walk(tree);
+}
+
+export function rehypeKeepPunctuation() {
+  return keepClosingPunctuation;
+}