Expand document collections with Pretext tutorial and simplify library navigation

apps/docs/eslint.config.mjs

@@ -5,5 +5,5 @@ import nextTs from "eslint-config-next/typescript";
 export default defineConfig([
   ...nextVitals,
   ...nextTs,
-  globalIgnores([".next/**", "out/**", "next-env.d.ts"]),
+  globalIgnores([".next/**", "out/**", "next-env.d.ts", "public/materials/**"]),
 ]);

apps/docs/public/materials/pretext/results.chrome156.json

@@ -0,0 +1,149 @@
+{
+  "note": "Original exploratory run. Fixed order, repeated fixtures, headless DPR 1; not an official benchmark or accuracy baseline. Date: 2026-10-28 Asia/Shanghai.",
+  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.0.0 Safari/537.36",
+  "iterations": 3000,
+  "rounds": 5,
+  "out": [
+    {
+      "name": "latin",
+      "chars": 1428,
+      "first": {
+        "calls": 62,
+        "units": 529
+      },
+      "second": {
+        "calls": 0,
+        "units": 0
+      },
+      "layoutCalls": 0,
+      "fastPath": true,
+      "widths": [
+        80,
+        121,
+        200,
+        319,
+        320,
+        321,
+        480,
+        800
+      ],
+      "heights": [
+        3744,
+        2592,
+        1440,
+        864,
+        864,
+        864,
+        576,
+        336
+      ],
+      "domHeights": [
+        3744,
+        2592,
+        1440,
+        864,
+        864,
+        864,
+        576,
+        336
+      ],
+      "pretextMedianMs": 1.7000000476837158,
+      "domInterleavedMedianMs": 86,
+      "sink": 46530000
+    },
+    {
+      "name": "cjk",
+      "chars": 408,
+      "first": {
+        "calls": 53,
+        "units": 67
+      },
+      "second": {
+        "calls": 0,
+        "units": 0
+      },
+      "layoutCalls": 0,
+      "fastPath": true,
+      "widths": [
+        80,
+        121,
+        200,
+        319,
+        320,
+        321,
+        480,
+        800
+      ],
+      "heights": [
+        2016,
+        1440,
+        864,
+        528,
+        504,
+        504,
+        336,
+        216
+      ],
+      "domHeights": [
+        2016,
+        1440,
+        864,
+        528,
+        504,
+        504,
+        336,
+        216
+      ],
+      "pretextMedianMs": 1.5,
+      "domInterleavedMedianMs": 57.80000019073486,
+      "sink": 26433000
+    },
+    {
+      "name": "pre-wrap",
+      "chars": 888,
+      "first": {
+        "calls": 50,
+        "units": 497
+      },
+      "second": {
+        "calls": 0,
+        "units": 0
+      },
+      "layoutCalls": 0,
+      "fastPath": false,
+      "widths": [
+        80,
+        121,
+        200,
+        319,
+        320,
+        321,
+        480,
+        800
+      ],
+      "heights": [
+        2592,
+        1728,
+        864,
+        864,
+        864,
+        864,
+        576,
+        576
+      ],
+      "domHeights": [
+        2592,
+        1728,
+        864,
+        864,
+        864,
+        864,
+        576,
+        576
+      ],
+      "pretextMedianMs": 6.299999952316284,
+      "domInterleavedMedianMs": 93.90000009536743,
+      "sink": 36828000
+    }
+  ]
+}

apps/docs/public/materials/pretext/verify.cjs

@@ -0,0 +1,89 @@
+// Tutorial mechanism probe, not the official performance or accuracy gate.
+// Run from any directory; see README.md for runtime and Playwright setup.
+const fs = require('node:fs');
+const path = require('node:path');
+const http = require('node:http');
+const {stripTypeScriptTypes} = require('node:module');
+const assert = require('node:assert/strict');
+const {chromium} = require(process.env.PLAYWRIGHT_MODULE || 'playwright');
+const src = path.resolve(__dirname, '../../src');
+const outputFlag = process.argv.indexOf('--output');
+if (outputFlag !== -1 && !process.argv[outputFlag + 1]) throw new Error('--output requires a file path');
+const modules = new Map();
+function compile(dir) {
+  for (const entry of fs.readdirSync(dir,{withFileTypes:true})) {
+    const file = path.join(dir,entry.name);
+    if(entry.isDirectory()) compile(file);
+    else if(file.endsWith('.ts') && !file.endsWith('.test.ts')) {
+      modules.set('/'+path.relative(src,file).replace(/\.ts$/,'.js'),stripTypeScriptTypes(fs.readFileSync(file,'utf8'),{mode:'transform'}));
+    }
+  }
+}
+compile(src);
+const server = http.createServer((req,res)=>{
+  res.setHeader('Content-Type',req.url==='/'?'text/html':'text/javascript');
+  if(req.url !== '/' && !modules.has(req.url)) { res.statusCode=404; res.end('Missing module'); return; }
+  res.end(req.url==='/'?'<html lang="en"><body></body></html>':modules.get(req.url));
+});
+(async()=>{
+ await new Promise((resolve,reject)=>{server.once('error',reject);server.listen(0,'127.0.0.1',resolve)});
+ let browser;
+ try {
+ browser = await chromium.launch({headless:true,...(process.env.CHROME_EXECUTABLE ? {executablePath:process.env.CHROME_EXECUTABLE} : {})});
+ const page = await browser.newPage();
+ await page.goto(`http://127.0.0.1:${server.address().port}/`);
+ const result = await page.evaluate(async()=>{
+  const api = await import('/layout.js');
+  let calls=0,units=0;
+  const original=OffscreenCanvasRenderingContext2D.prototype.measureText;
+  OffscreenCanvasRenderingContext2D.prototype.measureText=function(text){calls++;units+=text.length;return original.call(this,text)};
+  const font='16px "Helvetica Neue", "PingFang SC", "Geeza Pro"';
+  const cases=[
+   {name:'latin',text:'The quick brown fox jumps over the lazy dog. Accurate text layout needs cached measurements and careful line breaking. '.repeat(12)},
+   {name:'cjk',text:'高性能文本布局的关键，是复用字体测量结果，并正确处理中文标点和换行。'.repeat(12)},
+   {name:'pre-wrap',text:'A long line with\ttabs\n  preserved spaces and a discretionary soft\u00adhyphen.\n'.repeat(12),options:{whiteSpace:'pre-wrap'}},
+  ];
+  const out=[];
+  for(const c of cases){
+   api.clearCache();calls=0;units=0;
+   const p=api.prepare(c.text,font,c.options);
+   const first={calls,units};calls=0;units=0;
+   api.prepare(c.text,font,c.options);
+   const second={calls,units};calls=0;
+   const widths=[80,121,200,319,320,321,480,800];
+   const heights=widths.map(w=>api.layout(p,w,24).height);
+   const layoutCalls=calls;
+   const el=document.createElement('div');
+   Object.assign(el.style,{font,lineHeight:'24px',overflowWrap:'break-word',whiteSpace:c.options?.whiteSpace||'normal',position:'absolute'});
+   el.textContent=c.text;document.body.appendChild(el);
+   const domHeights=widths.map(w=>{el.style.width=w+'px';return el.getBoundingClientRect().height});
+   let sink=0;
+   for(let i=0;i<3000;i++)sink+=api.layout(p,widths[i%8],24).height;
+   const pretextMs=[],domMs=[];
+   for(let r=0;r<5;r++){
+    let t=performance.now();
+    for(let i=0;i<3000;i++)sink+=api.layout(p,widths[i%8],24).height;
+    pretextMs.push(performance.now()-t);
+    t=performance.now();
+    for(let i=0;i<3000;i++){el.style.width=widths[i%8]+'px';sink+=el.getBoundingClientRect().height;}
+    domMs.push(performance.now()-t);
+   }
+   el.remove();
+   const withSegments=api.prepareWithSegments(c.text,font,c.options);
+   const lineApiCounts=widths.map(w=>api.layoutWithLines(withSegments,w,24).lines.length);
+   const median=a=>a.sort((a,b)=>a-b)[2];
+   out.push({name:c.name,chars:c.text.length,first,second,layoutCalls,fastPath:p.simpleLineWalkFastPath,widths,heights,domHeights,lineApiCounts,pretextMedianMs:median(pretextMs),domInterleavedMedianMs:median(domMs),sink});
+  }
+  return {userAgent:navigator.userAgent,devicePixelRatio,language:document.documentElement.lang,font,iterations:3000,rounds:5,out};
+ });
+ for(const row of result.out){
+   assert.ok(row.first.calls > 0, row.name+': first preparation must measure');
+   assert.equal(row.second.calls,0,row.name+': repeated preparation must reuse Canvas metrics');
+   assert.equal(row.layoutCalls,0,row.name+': layout must not measure');
+   assert.deepEqual(row.heights,row.domHeights,row.name+': heights must match DOM for these fixtures');
+   assert.deepEqual(row.lineApiCounts,row.heights.map(h=>h/24),row.name+': line APIs must agree');
+ }
+ if(outputFlag !== -1) fs.writeFileSync(path.resolve(process.argv[outputFlag + 1]),JSON.stringify(result,null,2)+'\n');
+ console.log(JSON.stringify(result,null,2));
+ } finally {if(browser)await browser.close();server.close();}
+})().catch(e=>{console.error(e);process.exitCode=1});

apps/docs/scripts/auth-cli.ts

@@ -141,6 +141,9 @@ async function main() {
     "/",
     "/docs/00-endor-concepts-draft",
     "/figures/endor-architecture.svg",
+    "/docs/pretext/01-chapter",
+    "/materials/pretext/verify.cjs",
+    "/materials/pretext/results.chrome156.json",
     `/_next/data/${buildId}/index.json`,
     `/_next/data/${buildId}/docs/00-endor-concepts-draft.json`,
   ]) {
@@ -155,7 +158,7 @@ async function main() {
       path,
     );
   }
-  for (const path of ["/api/private", "/api/unknown"])
+  for (const path of ["/api/private", "/api/unknown", "/api/search"])
     assert.equal((await request(path)).status, 401, path);
   assert.equal(
     (
@@ -176,13 +179,18 @@ async function main() {
   const headers = {
     Authorization: "Bearer " + signSession(config, undefined, 600),
   };
+  const searchResponse = await request("/api/search", { headers });
+  assert.equal(searchResponse.status, 200);
+  const searchIndex = await searchResponse.json();
+  assert.ok(searchIndex.some((doc: { slug: string; searchText: string }) => doc.slug === "pretext/04-chapter" && doc.searchText.includes("getSegmentMetrics")));
   let home = "";
   for (const route of routes) {
     const response = await request(route, { headers });
     assert.equal(response.status, 200, route);
     if (route === "/") home = await response.text();
   }
-  assert.ok(home.includes("TABULARIUM"));
+  assert.ok(home.includes("资料库"));
+  assert.ok(home.includes("/docs/pretext/00-overview"));
   const assets = new Set(
     [...home.matchAll(/(?:src|href)="(\/_next\/static\/[^" ]+)"/g)].map((m) =>
       m[1].replaceAll("&", "&"),
@@ -191,6 +199,11 @@ async function main() {
   assert.ok(assets.size);
   for (const path of assets)
     assert.equal((await request(path, { headers })).status, 200, path);
+  for (const name of ["verify.cjs", "results.chrome156.json"]) {
+    const response = await request("/materials/pretext/" + name, { headers });
+    assert.equal(response.status, 200, name);
+    assert.ok((await response.text()).length > 100);
+  }
   for (const name of readdirSync(join(__dirname, "public/figures"))) {
     if (!name.endsWith(".svg")) continue;
     const response = await request("/figures/" + name, { headers });

apps/docs/src/components/Icon.tsx

@@ -0,0 +1,17 @@
+import type { CSSProperties } from "react";
+
+// One stroke style for controls and navigation; labels carry the meaning.
+export function Icon({ name, size = 18, style }: {
+  name: "search" | "arrow" | "book" | "code" | "menu" | "close";
+  size?: number; style?: CSSProperties;
+}) {
+  const paths = {
+    search: <><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4 4" /></>,
+    arrow: <path d="M5 12h14m-6-6 6 6-6 6" />,
+    book: <><path d="M12 5c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V4c-3-1-6-1-9 1Z" /><path d="M12 5v15" /></>,
+    code: <path d="m8 7-5 5 5 5m8-10 5 5-5 5M14 4l-4 16" />,
+    menu: <path d="M4 6h16M4 12h16M4 18h16" />,
+    close: <path d="m6 6 12 12M6 18 18 6" />,
+  };
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={style}>{paths[name]}</svg>;
+}

apps/docs/src/components/Shell.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link";
+import { Icon } from "@/components/Icon";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { DocLink } from "@/lib/docs";
-import { sectionFor } from "@/lib/navigation";
+
 
 export function Brand() {
   return (
@@ -28,7 +29,7 @@ export function Navigation({
   current?: string;
   onNavigate?: () => void;
 }) {
-  const groups = [...new Set(docs.map((d) => sectionFor(d.slug).group))];
+  const groups = [...new Set(docs.map((d) => d.group))];
   return (
     <nav aria-label="文档导航">
       <Link
@@ -36,13 +37,13 @@ export function Navigation({
         className={`nav-home ${!current ? "selected" : ""}`}
         href="/"
       >
-        ▦ <span>文档概览</span>
+        <Icon name="book" size={17} /> <span>资料库</span>
       </Link>
       {groups.map((group) => (
         <div className="nav-group" key={group}>
           <p>{group}</p>
           {docs
-            .filter((d) => sectionFor(d.slug).group === group)
+            .filter((d) => d.group === group)
             .map((d) => (
               <Link
                 onClick={onNavigate}
@@ -52,17 +53,13 @@ export function Navigation({
                 key={d.slug}
               >
                 {d.title}
-                {sectionFor(d.slug).label.includes("草案") && (
+                {d.draft && (
                   <span className="tiny-dot" aria-label="草案" />
                 )}
               </Link>
             ))}
         </div>
       ))}
-      <div className="nav-note">
-        <span className="status-dot" /> 与代码一起演进
-        <p>文字、设计与图形的共同档案。</p>
-      </div>
     </nav>
   );
 }
@@ -79,18 +76,32 @@ export function Shell({
   const input = useRef<HTMLInputElement>(null);
   const trigger = useRef<HTMLButtonElement>(null);
   const [query, setQuery] = useState("");
+  const [searchDocs, setSearchDocs] = useState(docs);
+  const [searchLoaded, setSearchLoaded] = useState(false);
+  const [searchStatus, setSearchStatus] = useState("");
   const [selected, setSelected] = useState(0);
   const [menu, setMenu] = useState(false);
-  const results = docs.filter((d) =>
-    `${d.title} ${d.searchText}`
+  const results = searchDocs.filter((d) =>
+    `${d.title} ${d.description} ${d.searchText ?? ""}`
       .toLocaleLowerCase()
       .includes(query.trim().toLocaleLowerCase()),
   );
-  function openSearch() {
+  async function openSearch() {
     setQuery("");
     setSelected(0);
     dialog.current?.showModal();
     input.current?.focus();
+    if (searchLoaded) return;
+    setSearchStatus("正在加载全文索引…");
+    try {
+      const response = await fetch("/api/search");
+      if (!response.ok) throw new Error("Search unavailable");
+      setSearchDocs(await response.json());
+      setSearchLoaded(true);
+      setSearchStatus("");
+    } catch {
+      setSearchStatus("全文搜索暂时不可用，当前仅搜索标题和摘要。关闭后重新打开可重试。");
+    }
   }
   function closeSearch() {
     dialog.current?.close();
@@ -100,8 +111,7 @@ export function Shell({
     function keyboard(e: KeyboardEvent) {
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
         e.preventDefault();
-        dialog.current?.showModal();
-        input.current?.focus();
+        trigger.current?.click();
       }
     }
     document.addEventListener("keydown", keyboard);
@@ -115,7 +125,7 @@ export function Shell({
       <header className="site-header">
         <Brand />
         <nav className="top-nav" aria-label="主导航">
-          <Link href="/">文档概览</Link>
+          <Link href="/">资料库</Link>
           <Link href="/docs/00-endor-concepts-draft">架构设计</Link>
           <a href="https://gitea.entroia.com/Zayden-Jung/endorphin-tabularium-docs">
             仓库 ↗
@@ -127,7 +137,7 @@ export function Shell({
           aria-label="搜索文档"
           onClick={openSearch}
         >
-          <span aria-hidden="true">⌕</span>
+          <Icon name="search" />
           <span>搜索文档…</span>
           <kbd>⌘ K</kbd>
         </button>
@@ -154,7 +164,7 @@ export function Shell({
           aria-expanded={menu}
           aria-controls="mobile-navigation"
         >
-          ☰ <span>文档目录</span>
+          <Icon name="menu" size={16} /> <span>文档目录</span>
           <span>{menu ? "−" : "+"}</span>
         </button>
       </div>
@@ -178,7 +188,7 @@ export function Shell({
         onClose={() => trigger.current?.focus()}
       >
         <div className="search-input-row">
-          <span aria-hidden="true">⌕</span>
+          <Icon name="search" />
           <input
             ref={input}
             value={query}
@@ -214,6 +224,7 @@ export function Shell({
             Esc
           </button>
         </div>
+        {searchStatus && <p className="search-status" role="status">{searchStatus}</p>}
         <div id="search-results" className="search-results">
           <p className="eyebrow" role="status">
             {query ? `${results.length} 篇匹配文档` : "浏览文档"}
@@ -228,11 +239,11 @@ export function Shell({
               key={d.slug}
               href={`/docs/${d.slug}`}
             >
-              <span>{sectionFor(d.slug).group}</span>
+              <span>{d.group}</span>
               <strong>
                 {d.title} <span aria-hidden="true">↗</span>
               </strong>
-              <small>{sectionFor(d.slug).description}</small>
+              <small>{d.description}</small>
             </Link>
           ))}
           {!results.length && (

apps/docs/src/lib/docs.ts

@@ -1,27 +1,44 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import catalog from "../../../../content/catalog.json";
 
 const directory = path.resolve(process.cwd(), "../../content/docs");
-const validSlug = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
-
-export type DocLink = { slug: string; title: string; searchText: string };
+const validSlug = /^[a-z0-9]+(?:-[a-z0-9]+)*(?:\/[a-z0-9]+(?:-[a-z0-9]+)*)*$/;
+type Metadata = { group?: string; description?: string; draft?: boolean; featured?: boolean };
+export type DocLink = {
+  slug: string; title: string; searchText?: string;
+  group: string; collection: string; description: string; draft: boolean; featured: boolean;
+};
 export type Doc = DocLink & { content: string };
 
 export async function readDoc(slug: string): Promise<Doc> {
   if (!validSlug.test(slug)) throw new Error("Invalid document slug");
   const content = await fs.readFile(path.join(directory, `${slug}.md`), "utf8");
   const title = content.match(/^# (.+)$/m)?.[1]?.trim() ?? slug;
-  return { slug, title, content, searchText: content };
+  const collection = catalog.collections.find((c) => !c.path || slug.startsWith(`${c.path}/`))!;
+  const metadata: Metadata = (catalog.documents as Record<string, Metadata>)[slug] ?? {};
+  return { slug, title, content, searchText: content,
+    group: metadata.group ?? collection.title, collection: collection.title,
+    description: metadata.description ?? collection.description,
+    draft: metadata.draft ?? false, featured: metadata.featured ?? false,
+  };
 }
 
 export async function listDocs(): Promise<DocLink[]> {
-  const files = (await fs.readdir(directory))
-    .filter((file) => file.endsWith(".md") && validSlug.test(file.slice(0, -3)))
-    .sort();
-  return Promise.all(
-    files.map(async (file) => {
-      const { slug, title, searchText } = await readDoc(file.slice(0, -3));
-      return { slug, title, searchText };
-    }),
-  );
+  async function walk(folder: string): Promise<string[]> {
+    const entries = await fs.readdir(path.join(directory, folder), { withFileTypes: true });
+    const files = await Promise.all(entries.map(async (entry) => {
+      const relative = folder ? `${folder}/${entry.name}` : entry.name;
+      if (entry.isDirectory()) return walk(relative);
+      if (entry.isFile() && relative.endsWith(".md") && validSlug.test(relative.slice(0, -3)))
+        return [relative.slice(0, -3)];
+      return [];
+    }));
+    return files.flat();
+  }
+  return Promise.all((await walk("")).sort().map(async (slug) => {
+    const { content: _, searchText: __, ...doc } = await readDoc(slug);
+    void _; void __;
+    return doc;
+  }));
 }

apps/docs/src/lib/navigation.ts

@@ -1,45 +1,3 @@
-export type Section = {
-  group: string;
-  description: string;
-  label: string;
-  symbol: string;
-};
-export function sectionFor(slug: string): Section {
-  if (slug.includes("endor-purpose"))
-    return {
-      group: "项目讨论",
-      label: "讨论草案",
-      symbol: "○",
-      description: "逐步讨论 Endor 的意义：从程序入口走向用户与 AI 的对象操作。",
-    };
-  if (slug.includes("endor-concepts"))
-    return {
-      group: "架构设计",
-      label: "系统架构",
-      symbol: "◇",
-      description: "从全球入口、区域运行时到对象数据，了解 Endor 的系统架构。",
-    };
-  if (slug.includes("mounting"))
-    return {
-      group: "架构设计",
-      label: "讨论草案",
-      symbol: "◇",
-      description: "探索节点、对象与统一接入协议，记录仍在演进的设计。",
-    };
-  if (slug.includes("figures"))
-    return {
-      group: "图形档案",
-      label: "工具与工作流",
-      symbol: "⌘",
-      description: "从 Python 源码到可编辑 SVG，让图形与文档一起演进。",
-    };
-  return {
-    group: "开始使用",
-    label: "指南",
-    symbol: "↗",
-    description: "搭建本地工作台，添加第一篇文档，了解检查与发布流程。",
-  };
-}
 export type Heading = { id: string; text: string; level: number; line: number };
 export function headingsFor(content: string): Heading[] {
   let fenced = false;

apps/docs/src/pages/api/search.ts

@@ -0,0 +1,16 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { listDocs, readDoc } from "@/lib/docs";
+
+// The proxy authenticates this endpoint, including index content.
+export default async function handler(request: NextApiRequest, response: NextApiResponse) {
+  response.setHeader("Cache-Control", "private, no-store");
+  if (request.method !== "GET") {
+    response.setHeader("Allow", "GET");
+    return response.status(405).end();
+  }
+  const docs = await listDocs();
+  const index = await Promise.all(docs.map(async (doc) => ({
+    ...doc, searchText: (await readDoc(doc.slug)).content,
+  })));
+  response.status(200).json(index);
+}

apps/docs/src/pages/docs/[...slug].tsx

@@ -18,15 +18,15 @@ import { listDocs, readDoc, type Doc, type DocLink } from "@/lib/docs";
 import { Shell, Navigation } from "@/components/Shell";
 import { ArchitectureFigure } from "@/components/ArchitectureFigure";
 import { CodeBlock } from "@/components/CodeBlock";
-import { headingsFor, sectionFor } from "@/lib/navigation";
+import { headingsFor } from "@/lib/navigation";
 
 type Props = { doc: Doc; docs: DocLink[] };
 export const getStaticPaths: GetStaticPaths = async () => ({
-  paths: (await listDocs()).map(({ slug }) => ({ params: { slug } })),
+  paths: (await listDocs()).map(({ slug }) => ({ params: { slug: slug.split("/") } })),
   fallback: false,
 });
 export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
-  const slug = params?.slug;
+  const slug = Array.isArray(params?.slug) ? params.slug.join("/") : params?.slug;
   if (typeof slug !== "string") return { notFound: true };
   const docs = await listDocs();
   if (!docs.some((d) => d.slug === slug)) return { notFound: true };
@@ -47,8 +47,9 @@ export default function DocPage({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const headings = headingsFor(doc.content);
   const [active, setActive] = useState("");
-  const section = sectionFor(doc.slug);
-  const index = docs.findIndex((d) => d.slug === doc.slug);
+  
+  const siblings = docs.filter((d) => d.collection === doc.collection);
+  const index = siblings.findIndex((d) => d.slug === doc.slug);
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
@@ -80,7 +81,7 @@ export default function DocPage({
     <>
       <Head>
         <title>{doc.title} · Tabularium</title>
-        <meta name="description" content={section.description} />
+        <meta name="description" content={doc.description} />
       </Head>
       <Shell key={doc.slug} docs={docs} current={doc.slug}>
         <div className="reading-layout">
@@ -91,13 +92,8 @@ export default function DocPage({
             <div className="breadcrumb">
               <Link href="/">文档</Link>
               <span>/</span>
-              <span>{section.group}</span>
-            </div>
-            <div className="article-meta">
-              <span className="eyebrow">{section.group}</span>
-              {section.label.includes("草案") && (
-                <span className="draft-badge">讨论草案</span>
-              )}
+              <span>{doc.group}</span>
+              {doc.draft && <span className="draft-badge">草案</span>}
             </div>
             <article className="prose prose-neutral max-w-none">
               <ReactMarkdown
@@ -183,7 +179,7 @@ export default function DocPage({
                   blockquote: ({ children }) => (
                     <blockquote
                       className={
-                        section.label.includes("草案")
+                        doc.draft
                           ? "callout callout-draft"
                           : "callout"
                       }
@@ -200,7 +196,7 @@ export default function DocPage({
               </ReactMarkdown>
             </article>
             <div className="article-end">
-              <span>文档与源码共同维护</span>
+              
               <a
                 href={`https://gitea.entroia.com/Zayden-Jung/endorphin-tabularium-docs/src/branch/main/content/docs/${doc.slug}.md`}
               >
@@ -209,9 +205,9 @@ export default function DocPage({
             </div>
             <nav className="pagination" aria-label="相邻文档">
               {index > 0 ? (
-                <Link href={`/docs/${docs[index - 1].slug}`}>
+                <Link href={`/docs/${siblings[index - 1].slug}`}>
                   <small>← 上一篇</small>
-                  <strong>{docs[index - 1].title}</strong>
+                  <strong>{siblings[index - 1].title}</strong>
                 </Link>
               ) : (
                 <Link href="/">
@@ -219,31 +215,20 @@ export default function DocPage({
                   <strong>文档概览</strong>
                 </Link>
               )}
-              {index < docs.length - 1 && (
+              {index < siblings.length - 1 && (
                 <Link
                   className="next-page"
-                  href={`/docs/${docs[index + 1].slug}`}
+                  href={`/docs/${siblings[index + 1].slug}`}
                 >
                   <small>下一篇 →</small>
-                  <strong>{docs[index + 1].title}</strong>
+                  <strong>{siblings[index + 1].title}</strong>
                 </Link>
               )}
             </nav>
-            <footer className="article-footer">
-              ENDOR / TABULARIUM <span>记录思考，连接系统。</span>
-            </footer>
           </main>
           <aside className="toc">
             <p className="eyebrow">本页内容</p>
             {toc}
-            <div className="toc-note">
-              <span className="status-dot" /> {section.label}
-              <p>
-                {section.label.includes("草案")
-                  ? "这里记录正在讨论的设计，尚不代表现有实现。"
-                  : "每一次理解，都成为下一步的起点。"}
-              </p>
-            </div>
           </aside>
         </div>
       </Shell>

apps/docs/src/pages/index.tsx

@@ -1,168 +1,59 @@
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import Head from "next/head";
 import Link from "next/link";
+import { useState } from "react";
 import { listDocs, type DocLink } from "@/lib/docs";
 import { Shell, Navigation } from "@/components/Shell";
-import { CodeBlock } from "@/components/CodeBlock";
-import { sectionFor } from "@/lib/navigation";
+import { Icon } from "@/components/Icon";
 
-export const getStaticProps: GetStaticProps<{
-  docs: DocLink[];
-}> = async () => ({ props: { docs: await listDocs() } });
-export default function Home({
-  docs,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  return (
-    <>
-      <Head>
-        <title>Tabularium · Endor 文档</title>
-        <meta
-          name="description"
-          content="Endor 的知识档案。探索开发指南、架构设计与可复现的图形工作流。"
-        />
-      </Head>
-      <Shell docs={docs}>
-        <div className="home-layout">
-          <aside className="sidebar">
-            <Navigation docs={docs} />
-          </aside>
-          <main id="content" className="home-main">
-            <section className="home-hero">
-              <div className="hero-copy">
-                <p className="eyebrow">
-                  <span className="status-dot" /> ENDOR KNOWLEDGE ARCHIVE
-                </p>
-                <h1>
-                  理解系统。
-                  <br />
-                  构建下一步。
-                </h1>
-                <p className="hero-description">
-                  欢迎来到 <strong>Tabularium</strong>，Endor 的知识档案。
-                  <br className="desktop-break" />
-                  从第一篇文档到系统设计，让想法有迹可循。
-                </p>
-                <div className="hero-actions">
-                  <Link
-                    className="primary-button"
-                    href="/docs/01-getting-started"
-                  >
-                    开始阅读 <span>→</span>
-                  </Link>
-                  <a className="text-link" href="#explore">
-                    探索档案 <span>↓</span>
-                  </a>
-                </div>
-                <p className="hero-footnote">
-                  文档 · 架构 · 图形 <span>持续生长的工作台</span>
-                </p>
+export const getStaticProps: GetStaticProps<{ docs: DocLink[] }> = async () => ({
+  props: { docs: await listDocs() },
+});
+const PAGE_SIZE = 8;
+export default function Home({ docs }: InferGetStaticPropsType<typeof getStaticProps>) {
+  const [collection, setCollection] = useState("");
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(0);
+  const collections = [...new Set(docs.map((doc) => doc.collection))];
+  const filtered = docs.filter((doc) => (!collection || doc.collection === collection) &&
+    `${doc.title} ${doc.description}`.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
+  const featured = docs.filter((doc) => doc.featured).slice(0, 3);
+  return <>
+    <Head><title>Tabularium · 资料库</title><meta name="description" content="Endor 文档、源码研究与学习资料。" /></Head>
+    <Shell docs={docs}>
+      <div className="home-layout">
+        <aside className="sidebar"><Navigation docs={docs} /></aside>
+        <main id="content" className="home-main">
+          <section className="library-intro">
+            <h1>资料库</h1>
+            <p>系统设计、源码研究与学习笔记。</p>
+          </section>
+          <section className="featured-section" aria-labelledby="featured-title">
+            <h2 id="featured-title">推荐阅读</h2>
+            <div className="featured-grid">{featured.map((doc) => <Link className="featured-link" href={`/docs/${doc.slug}`} key={doc.slug}>
+              <Icon name={doc.collection === "Endor 文档" ? "book" : "code"} size={23} />
+              <h3>{doc.title.replace("（草案）", "")}</h3>
+              <p>{doc.description}</p>
+              <Icon name="arrow" />
+            </Link>)}</div>
+          </section>
+          <section className="library-section" id="library" aria-labelledby="library-title">
+            <h2 id="library-title">全部资料</h2>
+            <div className="library-tools">
+              <div className="collection-filters" role="group" aria-label="资料分类">
+                {["", ...collections].map((name) => <button key={name} aria-pressed={collection === name} onClick={() => { setCollection(name); setPage(0); }}>{name || "全部"}</button>)}
               </div>
-              <div className="archive-visual" aria-hidden="true">
-                <div className="archive-grid" />
-                <div className="archive-caption">TABULARIUM / 001</div>
-                <div className="archive-sheet sheet-back">
-                  <span>03 — FIGURES</span>
-                  <i />
-                  <i />
-                  <i />
-                </div>
-                <div className="archive-sheet sheet-middle">
-                  <span>02 — ARCHITECTURE</span>
-                  <i />
-                  <i />
-                  <i />
-                </div>
-                <div className="archive-sheet sheet-front">
-                  <span className="sheet-label">01 / ENDOR</span>
-                  <div className="sheet-emblem">
-                    E<span>↗</span>
-                  </div>
-                  <div className="sheet-rule" />
-                  <b>Ideas, documented.</b>
-                  <small>知识在这里连接。</small>
-                </div>
-                <div className="archive-coordinate">
-                  文字与图形，一起演进 <span>↗</span>
-                </div>
-              </div>
-            </section>
-            <section className="explore-section" id="explore">
-              <div className="section-heading">
-                <div>
-                  <p className="eyebrow">EXPLORE THE ARCHIVE</p>
-                  <h2>从这里开始探索</h2>
-                </div>
-                <span className="section-count">
-                  {String(docs.length).padStart(2, "0")} 篇文档
-                </span>
-              </div>
-              <div className="doc-cards">
-                {docs.map((doc, index) => {
-                  const section = sectionFor(doc.slug);
-                  return (
-                    <Link
-                      className="doc-card"
-                      key={doc.slug}
-                      href={`/docs/${doc.slug}`}
-                    >
-                      <div className="card-top">
-                        <span className={`card-icon icon-${index}`}>
-                          {section.symbol}
-                        </span>
-                        <span className="card-number">0{index + 1}</span>
-                      </div>
-                      <p className="card-group">{section.group}</p>
-                      <h3>
-                        {doc.title.replace("（草案）", "")}
-                        <span aria-hidden="true">↗</span>
-                      </h3>
-                      <p className="card-description">{section.description}</p>
-                      <div className="card-bottom">
-                        <span>{section.label}</span>
-                        {section.label.includes("草案") && (
-                          <span className="draft-badge">草案</span>
-                        )}
-                      </div>
-                    </Link>
-                  );
-                })}
-              </div>
-            </section>
-            <section className="quickstart">
-              <div>
-                <p className="eyebrow">LOCAL WORKSPACE</p>
-                <h2>一个命令，继续探索。</h2>
-                <p>
-                  在本地启动文档工作台，
-                  <br />
-                  让文字和可复现的图形留在同一个仓库。
-                </p>
-                <Link
-                  className="text-link"
-                  href="/docs/01-getting-started#启动"
-                >
-                  查看完整启动指南 <span>→</span>
-                </Link>
-              </div>
-              <CodeBlock
-                language="sh"
-                code={
-                  "pnpm install --frozen-lockfile\nuv sync --project tools/figures --locked\npnpm dev\n"
-                }
-              />
-            </section>
-            <footer className="site-footer">
-              <span>
-                Endor / <strong>Tabularium</strong>
-              </span>
-              <span>记录思考，连接系统。</span>
-              <a href="https://gitea.entroia.com/Zayden-Jung/endorphin-tabularium-docs">
-                在仓库中探索 ↗
-              </a>
-            </footer>
-          </main>
-        </div>
-      </Shell>
-    </>
-  );
+              <label className="library-search"><Icon name="search" /><input aria-label="筛选资料" placeholder="筛选资料…" value={query} onChange={(event) => {setQuery(event.target.value); setPage(0);}} /></label>
+            </div>
+            <ul className="library-list">{filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE).map((doc) => <li key={doc.slug}>
+              <Link href={`/docs/${doc.slug}`}><span className="library-row-title">{doc.title.replace("（草案）", "")}{doc.draft && <span className="draft-badge">草案</span>}</span><span className="library-row-group">{doc.group}</span><Icon name="arrow" size={16} /></Link>
+            </li>)}</ul>
+            {filtered.length === 0 && <p className="library-empty">没有找到相关资料。</p>}
+            {filtered.length > PAGE_SIZE && <nav className="library-pagination" aria-label="资料分页"><button disabled={page === 0} onClick={() => setPage(page - 1)}>上一页</button><span>{page + 1} / {Math.ceil(filtered.length / PAGE_SIZE)}</span><button disabled={(page + 1) * PAGE_SIZE >= filtered.length} onClick={() => setPage(page + 1)}>下一页</button></nav>}
+          </section>
+          <footer className="site-footer"><span>Tabularium</span><a href="https://gitea.entroia.com/Zayden-Jung/endorphin-tabularium-docs">文档仓库 ↗</a></footer>
+        </main>
+      </div>
+    </Shell>
+  </>;
 }

apps/docs/src/styles/globals.css

@@ -189,7 +189,7 @@ button {
 }
 .nav-group > p {
   font-weight: 600;
-  font-size: 11px;
+  font-size: 13px;
   color: #363f39;
   margin: 0 10px 10px;
 }
@@ -220,348 +220,12 @@ button {
   background: #c2a56e;
   flex-shrink: 0;
 }
-.nav-note {
-  border-top: 1px solid var(--line);
-  margin: 45px 10px 0;
-  padding-top: 20px;
-  font-size: 10px;
-  color: #78847b;
-  line-height: 1.8;
-}
-.nav-note p {
-  color: #a0a8a1;
-  margin-top: 4px;
-  font-size: 10px;
-}
-.status-dot {
-  display: inline-block;
-  width: 5px;
-  height: 5px;
-  background: #378467;
-  border-radius: 50%;
-  margin-right: 7px;
-  vertical-align: middle;
-}
 .home-main {
   min-width: 0;
   padding: 0 48px;
 }
-.home-hero {
-  display: grid;
-  grid-template-columns: 1.3fr 1fr;
-  align-items: center;
-  gap: 28px;
-  padding: 66px 0 58px;
-  border-bottom: 1px solid var(--line);
-}
-.eyebrow {
-  font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 1.8px;
-  color: #849087;
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-  margin: 0;
-}
-.hero-copy h1 {
-  font-size: clamp(36px, 3.5vw, 52px);
-  line-height: 1.28;
-  letter-spacing: -2px;
-  font-weight: 550;
-  margin: 25px 0 19px;
-}
-.hero-description {
-  font-size: 15px;
-  line-height: 2;
-  color: #637066;
-}
-.hero-description strong {
-  font-weight: 500;
-  color: #4e5f54;
-}
-.hero-actions {
-  display: flex;
-  align-items: center;
-  gap: 26px;
-  margin-top: 26px;
-}
-.primary-button {
-  display: flex;
-  gap: 26px;
-  align-items: center;
-  color: white;
-  background: #2c7057;
-  border: 1px solid #24644d;
-  box-shadow: 0 2px 3px #204d5010;
-  border-radius: 6px;
-  padding: 10px 15px;
-  font-size: 12px;
-}
-.primary-button:hover {
-  background: #235c47;
-}
-.text-link {
-  color: #5b6d60;
-  font-size: 12px;
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-}
-.text-link:hover {
-  color: var(--green);
-}
-.hero-footnote {
-  color: #a3aba4;
-  font-size: 9px;
-  margin-top: 34px;
-  letter-spacing: 0.6px;
-}
-.hero-footnote span {
-  border-left: 1px solid #dce3dc;
-  margin-left: 12px;
-  padding-left: 12px;
-}
-.archive-visual {
-  height: 300px;
-  position: relative;
-  background: radial-gradient(ellipse, #edf3eb 0, transparent 70%);
-  overflow: hidden;
-}
-.archive-grid {
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(#d8e1d530 1px, transparent 1px),
-    linear-gradient(90deg, #d8e1d530 1px, transparent 1px);
-  background-size: 24px 24px;
-  mask-image: radial-gradient(ellipse, black, transparent 75%);
-}
-.archive-caption {
-  position: absolute;
-  top: 1px;
-  left: 12px;
-  font:
-    8px ui-monospace,
-    monospace;
-  letter-spacing: 2px;
-  color: #9aab99;
-}
-.archive-sheet {
-  position: absolute;
-  width: 170px;
-  height: 205px;
-  left: calc(50% - 85px);
-  top: 52px;
-  border: 1px solid #d1dbcd;
-  border-radius: 5px;
-  background: #fff;
-  box-shadow: 0 12px 25px #6073550c;
-  padding: 20px;
-}
-.sheet-back {
-  transform: translate(35px, -16px) rotate(12deg);
-  background: #edf1e8;
-  color: #a7b19e;
-}
-.sheet-middle {
-  transform: translate(16px, -5px) rotate(5deg);
-  background: #f6f8f0;
-  color: #9ba890;
-}
-.archive-sheet > span:first-child {
-  font:
-    8px ui-monospace,
-    monospace;
-  letter-spacing: 1px;
-}
-.archive-sheet i {
-  display: block;
-  width: 80%;
-  height: 1px;
-  background: #d5decf;
-  margin: 15px 0;
-}
-.sheet-front {
-  transform: rotate(-7deg);
-  background: linear-gradient(140deg, #fffef8, #f4f6eb);
-}
-.sheet-label {
-  color: #839679;
-}
-.sheet-emblem {
-  font-size: 65px;
-  font-family: Georgia, serif;
-  color: #56764b;
-  line-height: 1.2;
-  margin: 12px 0;
-}
-.sheet-emblem span {
-  font:
-    28px ui-sans-serif,
-    system-ui;
-  vertical-align: top;
-  margin-left: 14px;
-  color: #9aaa8c;
-}
-.sheet-rule {
-  height: 1px;
-  background: #d9e0d0;
-  margin-bottom: 13px;
-}
-.archive-sheet b {
-  font:
-    12px Georgia,
-    serif;
-  color: #637759;
-}
-.archive-sheet small {
-  display: block;
-  color: #a1ad96;
-  font-size: 8px;
-  margin-top: 5px;
-}
-.archive-coordinate {
-  position: absolute;
-  bottom: 2px;
-  left: 15px;
-  right: 10px;
-  font-size: 8px;
-  color: #9aaa98;
-  letter-spacing: 1px;
-  display: flex;
-  justify-content: space-between;
-}
-.explore-section {
-  padding: 35px 0;
-  scroll-margin-top: 90px;
-}
-.section-heading {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-bottom: 22px;
-}
-.section-heading h2,
-.quickstart h2 {
-  margin: 10px 0 0;
-  font-size: 20px;
-  font-weight: 550;
-  letter-spacing: -0.6px;
-}
-.section-count {
-  font:
-    10px ui-monospace,
-    monospace;
-  color: #9ca59d;
-}
-.doc-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 14px;
-}
-.doc-card {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 21px;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(#fff, #fcfdfb);
-  transition:
-    border-color 0.2s,
-    transform 0.2s;
-}
-.doc-card:hover {
-  border-color: #a5bdac;
-  transform: translateY(-3px);
-}
-.card-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.card-icon {
-  width: 31px;
-  height: 31px;
-  display: grid;
-  place-items: center;
-  font-size: 18px;
-  background: #eef4ef;
-  border: 1px solid #e2eae1;
-  border-radius: 7px;
-  color: #587d5d;
-}
-.icon-1 {
-  color: #8b7e60;
-  background: #f6f3ec;
-  border-color: #eee8dd;
-}
-.icon-2 {
-  color: #6f8291;
-  background: #eff3f6;
-  border-color: #e5eaf0;
-}
-.card-number {
-  font:
-    9px ui-monospace,
-    monospace;
-  color: #b1b8b1;
-}
-.card-group {
-  font-size: 11px;
-  color: #73816f;
-  margin: 22px 0 6px;
-}
-.doc-card h3 {
-  font-size: 16px;
-  font-weight: 550;
-  letter-spacing: -0.3px;
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-}
-.doc-card h3 > span {
-  color: #a0aaa1;
-  font-size: 13px;
-}
-.card-description {
-  color: #69766b;
-  font-size: 13px;
-  line-height: 1.9;
-  margin: 10px 0 22px;
-  flex: 1;
-}
-.card-bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 11px;
-  color: #a1aaa1;
-  border-top: 1px solid #eef1ed;
-  padding-top: 14px;
-}
-.draft-badge {
-  color: #9a7c40;
-  background: #faf6e9;
-  border: 1px solid #eee4c9;
-  border-radius: 4px;
-  padding: 2px 6px;
-  font-size: 9px;
-  white-space: nowrap;
-}
-.quickstart {
-  border-top: 1px solid var(--line);
-  padding: 35px 0 42px;
-  display: grid;
-  grid-template-columns: 1fr 1.2fr;
-  gap: 35px;
-  align-items: center;
-}
-.quickstart p:not(.eyebrow) {
-  font-size: 12px;
-  color: #6d796d;
-  line-height: 1.9;
-  margin: 13px 0 20px;
-}
+.eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0; }
+.draft-badge { color: #8c733e; background: #faf6e9; border: 1px solid #eee4c9; border-radius: 4px; padding: 2px 6px; font-size: 12px; white-space: nowrap; }
 .site-footer {
   border-top: 1px solid var(--line);
   display: flex;
@@ -569,7 +233,7 @@ button {
   gap: 15px;
   padding: 24px 0;
   color: #a1aaa1;
-  font-size: 9px;
+  font-size: 13px;
 }
 .site-footer strong {
   font-weight: 500;
@@ -598,17 +262,6 @@ button {
 .breadcrumb > span:nth-child(2) {
   color: #c6cec7;
 }
-.article-meta {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-bottom: 12px;
-}
-.article-meta .eyebrow {
-  font-size: 10px;
-  color: var(--green);
-  letter-spacing: 1px;
-}
 .prose {
   font-size: 16px;
   line-height: 1.95;
@@ -779,7 +432,7 @@ button {
   background: transparent;
   color: #5b6f55;
   font:
-    11px/2.2 ui-monospace,
+    13px/1.9 ui-monospace,
     SFMono-Regular,
     Consolas,
     monospace;
@@ -805,9 +458,6 @@ button {
   color: #337c57;
   font-weight: 600;
 }
-.quickstart .code-block {
-  margin: 0;
-}
 .toc {
   padding: 47px 25px 30px 5px;
   position: sticky;
@@ -817,8 +467,8 @@ button {
   font-size: 13px;
 }
 .toc > .eyebrow {
-  letter-spacing: 1px;
-  font-size: 9px;
+  letter-spacing: 0;
+  font-size: 13px;
   margin-bottom: 18px;
 }
 .toc nav {
@@ -840,19 +490,6 @@ button {
 .toc nav a.toc-nested {
   padding-left: 25px;
 }
-.toc-note {
-  font-size: 10px;
-  margin-top: 35px;
-  color: #83947f;
-  border-top: 1px solid var(--line);
-  padding-top: 20px;
-  line-height: 1.9;
-}
-.toc-note p {
-  font-size: 10px;
-  color: #a5aea3;
-  margin-top: 7px;
-}
 .article-end {
   display: flex;
   gap: 15px;
@@ -887,28 +524,13 @@ button {
   margin-bottom: 7px;
 }
 .pagination strong {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: #526c55;
 }
 .next-page {
   text-align: right;
 }
-.article-footer {
-  display: flex;
-  justify-content: space-between;
-  gap: 15px;
-  border-top: 1px solid var(--line);
-  padding: 24px 0;
-  color: #a7b0a5;
-  font:
-    8px ui-monospace,
-    monospace;
-  letter-spacing: 1px;
-}
-.article-footer span {
-  letter-spacing: 0;
-}
 .search-dialog {
   padding: 0;
   border: 1px solid var(--line);
@@ -1005,9 +627,6 @@ button {
   .home-main {
     padding: 0 70px;
   }
-  .home-hero {
-    padding: 85px 0 70px;
-  }
   .reading-layout {
     grid-template-columns: 250px minmax(0, 1fr) 235px;
   }
@@ -1031,23 +650,6 @@ button {
   .reading-main {
     padding: 30px 40px 0;
   }
-  .home-hero {
-    gap: 10px;
-  }
-  .archive-sheet {
-    width: 145px;
-    height: 190px;
-    left: calc(50% - 72px);
-  }
-  .hero-copy h1 {
-    font-size: 38px;
-  }
-  .doc-card {
-    padding: 16px;
-  }
-  .card-description {
-    font-size: 13px;
-  }
   .top-nav a:nth-child(2) {
     display: none;
   }
@@ -1121,19 +723,9 @@ button {
   .mobile-navigation .nav-group {
     margin-top: 15px;
   }
-  .mobile-navigation .nav-note {
-    display: none;
-  }
   .home-main {
     padding: 0 30px;
   }
-  .home-hero {
-    padding: 45px 0;
-    grid-template-columns: 1.2fr 1fr;
-  }
-  .hero-copy h1 {
-    font-size: 42px;
-  }
   .reading-main {
     max-width: 800px;
     padding: 28px 35px 0;
@@ -1173,72 +765,6 @@ button {
   .home-main {
     padding: 0 22px;
   }
-  .home-hero {
-    grid-template-columns: 1fr;
-    gap: 26px;
-    padding: 35px 0 30px;
-  }
-  .hero-copy h1 {
-    font-size: 42px;
-    letter-spacing: -1.5px;
-    margin: 23px 0 18px;
-  }
-  .hero-description {
-    font-size: 14px;
-  }
-  .hero-actions {
-    margin-top: 23px;
-  }
-  .hero-footnote {
-    margin-top: 24px;
-  }
-  .archive-visual {
-    height: 240px;
-    margin: 0 10px;
-  }
-  .archive-sheet {
-    top: 30px;
-    height: 180px;
-  }
-  .sheet-emblem {
-    font-size: 52px;
-    margin: 8px 0;
-  }
-  .archive-coordinate {
-    bottom: 0;
-  }
-  .section-heading h2,
-  .quickstart h2 {
-    font-size: 19px;
-  }
-  .doc-cards {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-  .doc-card {
-    padding: 20px;
-  }
-  .card-group {
-    margin-top: 14px;
-  }
-  .card-description {
-    font-size: 12px;
-    margin-bottom: 17px;
-  }
-  .doc-card h3 {
-    font-size: 17px;
-  }
-  .quickstart {
-    grid-template-columns: 1fr;
-    gap: 23px;
-    padding: 30px 0;
-  }
-  .quickstart p:not(.eyebrow) br {
-    display: none;
-  }
-  .quickstart p:not(.eyebrow) {
-    font-size: 12px;
-  }
   .site-footer {
     flex-wrap: wrap;
     font-size: 9px;
@@ -1264,9 +790,6 @@ button {
   .prose h2 {
     font-size: 20px;
   }
-  .article-meta {
-    margin-bottom: 14px;
-  }
   .pagination {
     gap: 10px;
   }
@@ -1292,9 +815,6 @@ button {
     padding: 13px;
     font-size: 13px;
   }
-  .article-footer {
-    font-size: 7px;
-  }
   .eyebrow {
     font-size: 9px;
   }
@@ -1532,3 +1052,56 @@ button {
 .logout-button:hover {
   color: var(--green);
 }
+
+/* A bounded reading shelf and paged catalog keep the home stable as it grows. */
+.home-main { max-width: 1120px; width: 100%; margin: 0 auto; }
+.library-intro { padding: 64px 0 42px; }
+.library-intro h1 { margin: 0 0 14px; font-size: 38px; font-weight: 600; letter-spacing: -1px; }
+.library-intro p { margin: 0; font-size: 16px; color: var(--muted); }
+.featured-section h2, .library-section h2 { font-size: 19px; font-weight: 550; margin: 0 0 22px; }
+.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+.featured-link { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 26px; }
+.featured-link:hover { border-color: #a4b7aa; background: #fafcfb; }
+.featured-link > svg:first-child { color: var(--green); margin-bottom: 18px; }
+.featured-link h3 { font-size: 18px; font-weight: 550; line-height: 1.6; margin: 0 0 10px; padding-right: 18px; }
+.featured-link p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
+.featured-link > svg:last-child { position: absolute; top: 28px; right: 24px; color: var(--muted); }
+.library-section { padding: 46px 0 32px; }
+.library-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
+.collection-filters { display: flex; gap: 6px; flex-wrap: wrap; }
+.collection-filters button { font-size: 14px; padding: 8px 12px; border-radius: 5px; color: var(--muted); }
+.collection-filters button[aria-pressed="true"] { background: #eef4f0; color: var(--green); }
+.library-search { display: flex; align-items: center; gap: 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; }
+.library-search input { min-width: 0; width: 145px; outline: 0; font-size: 14px; }
+.library-search:focus-within { border-color: var(--green); }
+.library-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
+.library-list li { border-bottom: 1px solid var(--line); }
+.library-list a { display: flex; align-items: center; gap: 18px; padding: 20px 4px; }
+.library-list a:hover { color: var(--green); background: #fafcfb; }
+.library-row-title { flex: 1; font-size: 15px; line-height: 1.7; }
+.library-row-title .draft-badge { margin-left: 10px; }
+.library-row-group { font-size: 13px; color: var(--muted); }
+.library-list svg { flex-shrink: 0; color: #87948c; }
+.library-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
+.library-pagination button { padding: 8px; }
+.library-pagination button:disabled { opacity: .35; cursor: default; }
+.library-empty { padding: 30px 0; color: var(--muted); }
+.site-footer { font-size: 13px; color: var(--muted); }
+.article-end { font-size: 13px; }
+.search-trigger svg { flex-shrink: 0; }
+@media (max-width: 560px) {
+ .library-intro { padding: 36px 0; }
+ .library-intro h1 { font-size: 32px; }
+ .featured-grid { grid-template-columns: 1fr; gap: 12px; }
+ .featured-link { padding: 22px; }
+ .featured-link h3 { font-size: 17px; }
+ .library-section { padding-top: 36px; }
+ .library-tools { align-items: stretch; }
+ .library-search { width: 100%; }
+ .library-search input { width: 100%; }
+ .library-list a { gap: 10px; padding: 16px 0; }
+ .library-row-group { display: none; }
+ .pagination strong { font-size: 13px; }
+ .site-footer { font-size: 13px; }
+}
+.search-status { padding: 12px 20px 0; font-size: 13px; color: var(--muted); }