feat(ux): M1/M2 移动端可用 — 导航汉堡抽屉 + 写作工具条不溢出

M1 左导航响应式抽屉：抽出 lib/nav/items.ts（条目数据+激活判定，纯逻辑+vitest）
共用于桌面静态侧栏（hidden lg:block）与移动汉堡抽屉。新增通用 Drawer（遮罩/
Esc 关闭/打开聚焦，复用 CommandPalette a11y 模式）+ NavDrawer + NavItems；
LeftNav 改 <lg 隐藏，AppShell 顶栏加汉堡（aria-label 打开导航）。

M2 写作工具条不溢出 + 移动端可达章节/助手：Toolbar 改 flex-wrap，390px 不再
横切「尚未保存」；ChapterList/ChapterAssistant 抽出 *Content，Workbench 经
左/右 Drawer 在 <lg 触达目录/助手。

实景 390px 复验（browse）：汉堡显示/静态导航隐藏/抽屉开合聚焦+Esc、工具条
两行不溢出、助手抽屉真注入面板。门禁：lint/typecheck 干净 · vitest 177 · build OK。

apps/web/components/LeftNav.tsx

@@ -1,17 +1,5 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export type ActiveNav =
-  | "write"
-  | "outline"
-  | "foreshadow"
-  | "review"
-  | "style"
-  | "codex"
-  | "rules"
-  | "skills";
+import type { ActiveNav } from "@/lib/nav/items";
+import { NavItems } from "./NavItems";
 
 interface LeftNavProps {
   // 项目内页传 projectId → 展开项目级入口（大纲/伏笔/审稿，UX §3.1）。
@@ -19,140 +7,14 @@ interface LeftNavProps {
   activeNav?: ActiveNav;
 }
 
-interface NavItem {
-  href: string;
-  label: string;
-  enabled: boolean;
-  // 项目级入口的激活键（与 activeNav 比对高亮）。
-  key?: ActiveNav;
-}
-
-const GLOBAL_ITEMS: NavItem[] = [
-  { href: "/", label: "作品库", enabled: true },
-  { href: "/settings/providers", label: "设置", enabled: true },
-];
-
-function projectItems(projectId: string): NavItem[] {
-  return [
-    {
-      href: `/projects/${projectId}/write`,
-      label: "写作",
-      enabled: true,
-      key: "write",
-    },
-    {
-      href: `/projects/${projectId}/outline`,
-      label: "大纲",
-      enabled: true,
-      key: "outline",
-    },
-    {
-      href: `/projects/${projectId}/foreshadow`,
-      label: "伏笔",
-      enabled: true,
-      key: "foreshadow",
-    },
-    {
-      href: `/projects/${projectId}/review`,
-      label: "审稿",
-      enabled: true,
-      key: "review",
-    },
-    {
-      href: `/projects/${projectId}/style`,
-      label: "文风",
-      enabled: true,
-      key: "style",
-    },
-    {
-      href: `/projects/${projectId}/codex`,
-      label: "设定库",
-      enabled: true,
-      key: "codex",
-    },
-    {
-      href: `/projects/${projectId}/rules`,
-      label: "规则",
-      enabled: true,
-      key: "rules",
-    },
-    {
-      href: `/projects/${projectId}/skills`,
-      label: "技能库",
-      enabled: true,
-      key: "skills",
-    },
-  ];
-}
-
-// 左导航：当前项朱砂竖条 + 浅晕底（UX §5.1 / §3.1）。
+// 桌面静态左导航（UX §5.1 / §3.1）。<lg 隐藏，由 NavDrawer 汉堡抽屉替代。
 export function LeftNav({ projectId, activeNav }: LeftNavProps) {
-  const pathname = usePathname();
-  const scoped = projectId ? projectItems(projectId) : [];
-
   return (
     <nav
-      className="w-44 shrink-0 border-r border-line bg-panel py-4"
+      className="hidden w-44 shrink-0 border-r border-line bg-panel py-4 lg:block"
       aria-label="主导航"
     >
-      <ul className="flex flex-col gap-1 px-2">
-        {GLOBAL_ITEMS.map((item) => (
-          <NavLink
-            key={item.label}
-            item={item}
-            active={item.enabled && pathname === item.href}
-          />
-        ))}
-        {scoped.length > 0 ? (
-          <li
-            className="mt-3 px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-ink-soft/60"
-            aria-hidden="true"
-          >
-            本作
-          </li>
-        ) : null}
-        {scoped.map((item) => (
-          <NavLink
-            key={item.label}
-            item={item}
-            active={
-              item.key !== undefined &&
-              (item.key === activeNav || pathname === item.href)
-            }
-          />
-        ))}
-      </ul>
+      <NavItems projectId={projectId} activeNav={activeNav} />
     </nav>
   );
 }
-
-function NavLink({ item, active }: { item: NavItem; active: boolean }) {
-  if (!item.enabled) {
-    return (
-      <li>
-        <span
-          className="block cursor-not-allowed rounded px-3 py-2 text-sm text-ink-soft/50"
-          aria-disabled="true"
-          title="后续里程碑开放"
-        >
-          {item.label}
-        </span>
-      </li>
-    );
-  }
-  return (
-    <li>
-      <Link
-        href={item.href}
-        aria-current={active ? "page" : undefined}
-        className={`flex items-center gap-2 rounded px-3 py-2 text-sm ${
-          active
-            ? "border-l-2 border-cinnabar bg-[var(--color-cinnabar-wash)] text-cinnabar"
-            : "text-ink hover:bg-[var(--color-cinnabar-wash)]"
-        }`}
-      >
-        {item.label}
-      </Link>
-    </li>
-  );
-}