hd-garden 0.3.8 → 0.3.10

package/.agents/skills/garden-post-review/SKILL.md

@@ -11,6 +11,8 @@ description: >-
 
 只审用户点名的稿。三步按顺序做，后一步看到的是前一步改完的稿。
 
+开始前先运行 `npx garden ui scan content/posts/路径.md`。有 `status` 为 `uncompiled`、`stale` 或 `error` 的块时，先按 [garden-ui](../garden-ui/SKILL.md) 处理完，再进入第 1 步。
+
 硬性检查命令（在站点根目录）：
 
 ```bash

package/.agents/skills/garden-ui/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: garden-ui
+description: >-
+  Compiles the intent blocks in one Garden post into ui blocks (or prose, or a
+  widget), recompiles stale or broken ui blocks, and suggests where a post
+  could use interaction. Use when the user says 编译这篇 / 编译意图块 / 重编译
+  <id> / 这篇哪里适合交互, or pastes a garden ui check fix prompt.
+---
+
+# 编译 Garden 交互块
+
+作者在稿里用 `intent` 围栏写一句想法，这个 skill 把它变成 `ui` 块。`ui` 块的格式、组件和设计规则都在 `npx garden ui prompt` 的输出里，以那份为准，不凭记忆写组件。
+
+所有命令在站点根目录运行。没给稿件路径时只问路径，不扫全库。
+
+## 触发语与范围
+
+| 用户说 | 处理哪些块 |
+| --- | --- |
+| 编译这篇：`<路径>`、编译意图块 | 状态是 `uncompiled`、`stale`、`error` 的块 |
+| 重编译 `<id>` | 只处理这一块，不管状态 |
+| 粘贴了 `garden ui check` 的修复提示词 | 提示词里列出的块 |
+| 这篇哪里适合交互 | 只读建议模式，见文末，不改稿 |
+
+## 流程
+
+1. 扫描：
+
+   ```bash
+   npx garden ui scan content/posts/路径.md
+   ```
+
+   stdout 是 JSON。每块有 `lang`、`id`、`status`、`startLine`、`hash`（整段围栏的哈希，写回时当 `--base`）、`intentHash`（原话的哈希）、`intent`（原话）、`caption`、`section`（所在小节标题）和 `diagnostics`。不要自己用正则找围栏。
+
+2. 读规则：
+
+   ```bash
+   npx garden ui prompt
+   ```
+
+   里面是组件目录、配方和设计规则。按配方的骨架写，不发明目录里没有的组件或属性。
+
+3. 每块读原话和所在小节，三选一：
+   - **写回正文**：一句话、一张表或一张 Mermaid 就能说清时。
+   - **写 `ui`**：读者需要拖、点、翻才能看懂时。
+   - **写 `widget`**：目录表达不了的画布动画、音频、物理模拟等。按 [garden-interactive-chart](../garden-interactive-chart/SKILL.md) 在同名目录写 HTML，并在 `widget` 的 YAML 里加 `intent:` 保留原话。
+
+4. 写 `ui` 时：
+   - 原话原样放进块头的 `intent`，一个字都不改。`compiled` 不用写，`apply` 会写。
+   - `caption` 摘原话里的判断。原话没有判断句，就根据小节内容补一句，并在回复里说明。
+   - 原话里有已知点（"batch 1 时是 512 MiB"），写进 `expect`。
+   - 数据写在块里。原话提到同名目录里已有的数据文件时，才用 `Data` 引用。
+   - 块太大就拆成两块，各自就近放在要讲的段落旁边，不挪到别的文件。
+
+5. 每块用 `apply` 写回，新内容从标准输入给：
+
+   ````bash
+   npx garden ui apply content/posts/路径.md --id <id> --base <hash> <<'GARDEN_UI'
+   ```ui
+   ---
+   id: ...
+   caption: ...
+   intent: |
+     ...
+   ---
+   ...
+   ```
+   GARDEN_UI
+   ````
+
+   - 没写 id 的 `intent` 块用 `--intent-hash <intentHash>` 定位；原话重复时改用 `--at <startLine>`。
+   - 新内容可以是一个 `ui` 围栏、一个 `widget` 围栏，或一段普通 Markdown（写回正文时）。
+   - 成功时 stdout 是 `{"ok":true,...}`。失败时 stderr 是 JSON，按 `code` 处理：
+     - `apply-invalid`：新内容没通过校验，按 `diagnostics` 改了再写。
+     - `apply-base`：块在扫描之后被改过。重新 `scan`，用新的 `hash`。
+     - `apply-not-found` / `apply-ambiguous`：定位不到或不唯一，重新 `scan` 换定位方式。
+   - 行号会随前面的写回变化，每写回一块就重新 `scan` 再处理下一块。
+
+6. 全部写完后：
+
+   ```bash
+   npx garden check content/posts/路径.md
+   ```
+
+   直到 `ok` 为 true。同一块连续三次修不好，停下来，把诊断原样报告给用户。
+
+7. 回复一张表：
+
+   | id | 选择 | 配方 | 假设 | expect |
+   | --- | --- | --- | --- | --- |
+   | kv-memory | ui | 参数台 | 默认序列取 4K | batch 1 时 512 MiB |
+
+   "假设"写原话没说、你替作者定下的东西（默认值、范围、补的 caption）。没有就写"无"。
+
+## 禁止
+
+- 直接编辑稿件文件。稿件只经 `apply` 改动；`widget` 的 HTML 文件可以直接创建。
+- 编造原话里没有的数字。需要数字但原话没给时，用原话里的公式算，或者问作者。
+- 使用远程地址（图片、脚本、数据）。
+- 改动目标块之外的正文。
+
+## 建议模式：这篇哪里适合交互
+
+只读，不改稿。先运行 `npx garden ui prompt` 读设计规则，再通读全文，挑出纯文字或贴图说不清的段落：
+
+- 公式或数字随参数变化（参数台、换算器）
+- 多步过程（步进器、流程）
+- 两种做法的差别（对比）
+- 一组格子、字节或内存布局（格子图）
+
+每处给出：所在小节、为什么文字不够、一段可以直接粘贴到该段落后面的 `intent` 草稿。草稿只写读者要做什么、看到什么，以及原文里已有的数字，不写组件名。最多 5 处；没有合适的就说没有。

package/.env.example

@@ -52,6 +52,14 @@ WEBMENTION_IO_DOMAIN=example.com
 # OSS_PUBLIC_BASE_URL=https://media.example.com
 # OSS_MAX_UPLOAD_MB=200
 
+# 后台的组件工作台：OpenAI 兼容接口。密钥只留在后台服务，不进浏览器和公开构建。
+# UI_MODEL_BASE_URL=https://api.openai.com/v1
+# UI_MODEL_API_KEY=sk-xxxxxxxx
+# UI_MODEL_NAME=gpt-5.6
+# UI_DRAFT_RATE_LIMIT=60
+# 可选：GitHub Enterprise 或本地测试替身的 API 根地址。
+# GITHUB_API_URL=https://api.github.com
+
 # 内容分发：X 使用拥有发帖权限的用户访问令牌；其余平台接入你自己的发布桥接服务。
 # X_USER_ACCESS_TOKEN=xxxxxxxx
 # CSDN_SYNC_WEBHOOK=https://publisher.example.com/csdn

package/app/admin/page.tsx

@@ -1,11 +1,14 @@
 import Link from "next/link";
 import { ArrowSquareOut, GithubLogo, LockKey } from "@phosphor-icons/react/ssr";
 import { AdminDashboard } from "../components/AdminDashboard";
-import { getAdminUser, isGitHubOAuthConfigured } from "../lib/admin-auth";
+import { getAdminUser, isGitHubLoginAvailable } from "../lib/admin-auth";
 import { columns, posts, thoughts } from "../lib/content";
 import { isContentRepositoryConfigured, listRepositoryThoughts } from "../lib/github-content";
 import { getSiteUrl } from "../lib/site";
 import { siteConfig } from "../site.config";
+import { modelConfig, remainingDrafts } from "../lib/ui-model";
+import { CATALOG_VERSION } from "../../ui/core/catalog.mjs";
+import packageJson from "../../package.json";
 
 export const dynamic = process.env.STATIC_EXPORT === "1" ? "force-static" : "force-dynamic";
 
@@ -45,7 +48,7 @@ export default async function AdminPage({
 
   const [user, query, publicSiteUrl] = await Promise.all([getAdminUser(), searchParams, getSiteUrl()]);
   if (!user) {
-    const oauthReady = isGitHubOAuthConfigured();
+    const oauthReady = isGitHubLoginAvailable();
     return (
       <main className="admin-access-page">
         <div className="admin-access-card">
@@ -57,7 +60,9 @@ export default async function AdminPage({
               ? `登录账号 @${query.account ?? "未知"} 没有后台权限。`
               : oauthReady
                 ? "登录后会检查你的 GitHub 用户名是否在允许名单中。"
-                : "GitHub OAuth 尚未配置；请先设置后台所需的环境变量。"}
+                : process.env.GARDEN_DEV === "1"
+                  ? "本机还没有 GitHub 登录。在终端运行 gh auth login 后，重新启动本地服务。"
+                  : "GitHub OAuth 尚未配置；请先设置后台所需的环境变量。"}
           </p>
           <div className="admin-access-actions">
             {oauthReady && (
@@ -112,6 +117,12 @@ export default async function AdminPage({
       catalog={catalog}
       publicSiteUrl={publicSiteUrl}
       contentWarning={contentWarning}
+      ui={{
+        modelName: modelConfig()?.model ?? null,
+        remaining: remainingDrafts(user.login),
+        engineVersion: packageJson.version,
+        catalogVersion: CATALOG_VERSION,
+      }}
     />
   );
 }

package/app/admin/preview/[...path]/page.tsx

@@ -0,0 +1,88 @@
+import matter from "gray-matter";
+import Link from "next/link";
+import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
+import { scanFences } from "../../../../ui/core/fence.mjs";
+import { collectDataSources, transformUiContent } from "../../../../ui/core/transform.mjs";
+import { AdminUiShell, isStaticExport, requireAdminPage, StaticAdminNotice } from "../../../components/AdminUiShell";
+import { MarkdownArticle } from "../../../components/MarkdownArticle";
+import { repositoryContentPath } from "../../../lib/repository-path.mjs";
+import { readMarkdown, readText } from "../../../lib/ui-content";
+
+export const dynamic = process.env.STATIC_EXPORT === "1" ? "force-static" : "force-dynamic";
+export const metadata = { title: "草稿预览", robots: { index: false, follow: false } };
+
+const isRelative = (value: string) => !/^(?:[a-z][a-z0-9+.-]*:|\/|#)/iu.test(value);
+
+/** Same-name-directory files go through the authenticated, sandboxed proxy. */
+function proxyAssets(content: string, post: string) {
+  const proxy = (relative: string) => `/api/admin/preview/asset?post=${encodeURIComponent(post)}&path=${encodeURIComponent(relative)}`;
+  let output = content.replace(/(!\[[^\]]*\]\()<?([^)\s>]+)>?/gu, (match, prefix: string, src: string) =>
+    isRelative(src) ? `${prefix}${proxy(src)}` : match,
+  );
+  for (const fence of [...scanFences(output)].reverse()) {
+    if (fence.lang !== "widget") continue;
+    try {
+      const data = parseYaml(fence.body) as Record<string, unknown> | null;
+      if (!data || typeof data.src !== "string" || !isRelative(data.src)) continue;
+      const next = `${fence.marker}widget\n${stringifyYaml({ ...data, src: proxy(data.src) }).trimEnd()}\n${fence.marker}`;
+      output = `${output.slice(0, fence.start)}${next}${output.slice(fence.end)}`;
+    } catch {
+      continue;
+    }
+  }
+  return output;
+}
+
+export default async function DraftPreviewPage({ params }: { params: Promise<{ path: string[] }> }) {
+  if (isStaticExport()) return <StaticAdminNotice />;
+  const user = await requireAdminPage();
+  const { path: segments } = await params;
+  let post: string;
+  try {
+    post = repositoryContentPath(`${segments.map((segment) => decodeURIComponent(segment)).join("/")}.md`);
+  } catch {
+    return (
+      <AdminUiShell active="" userName={`@${user.login}`}>
+        <section className="admin-panel"><p>稿件路径不合法。</p></section>
+      </AdminUiShell>
+    );
+  }
+  const file = await readMarkdown(post).catch(() => null);
+  if (!file) {
+    return (
+      <AdminUiShell active="" userName={`@${user.login}`}>
+        <section className="admin-panel"><p>找不到 {post}。</p></section>
+      </AdminUiShell>
+    );
+  }
+  const parsed = matter(file.source, { engines: { yaml: { parse: (input: string) => parseYaml(input) ?? {} } } });
+  const data = parsed.data as Record<string, unknown>;
+  const directory = post.slice(0, post.lastIndexOf("/"));
+  const dataFiles: Record<string, string | undefined> = {};
+  for (const src of collectDataSources(parsed.content)) {
+    const target = `${directory}/${src.replace(/^\.\//u, "")}`;
+    dataFiles[src] = await readText(target).catch(() => undefined);
+  }
+  const { content } = transformUiContent(parsed.content.trim(), {
+    mode: "preview",
+    markdownPath: post,
+    readData: (src: string) => dataFiles[src],
+    resolveAsset: (_sidecarPath: string, written: string) =>
+      `/api/admin/preview/asset?post=${encodeURIComponent(post)}&path=${encodeURIComponent(written)}`,
+  });
+  const draft = data.draft === true;
+  return (
+    <AdminUiShell active="" userName={`@${user.login}`}>
+      <section className="admin-panel ui-admin-preview">
+        <p className="ui-studio-meta">
+          草稿预览 · {post}{draft ? " · 草稿" : ""} · <Link href="/admin/ui/blocks">回到交互块</Link>
+        </p>
+        <h1 className="ui-admin-preview-title">{typeof data.title === "string" ? data.title : post}</h1>
+        {typeof data.description === "string" ? <p className="ui-studio-meta">{data.description}</p> : null}
+        <article className="article-body">
+          <MarkdownArticle content={proxyAssets(content, post)} />
+        </article>
+      </section>
+    </AdminUiShell>
+  );
+}

package/app/admin/ui/blocks/page.tsx

@@ -0,0 +1,16 @@
+import { AdminBlocks } from "../../../components/AdminUiPanels";
+import { AdminUiShell, isStaticExport, requireAdminPage, StaticAdminNotice } from "../../../components/AdminUiShell";
+import { getSiteUrl } from "../../../lib/site";
+
+export const dynamic = process.env.STATIC_EXPORT === "1" ? "force-static" : "force-dynamic";
+export const metadata = { title: "交互块", robots: { index: false, follow: false } };
+
+export default async function UiBlocksPage() {
+  if (isStaticExport()) return <StaticAdminNotice />;
+  const user = await requireAdminPage();
+  return (
+    <AdminUiShell active="/admin/ui/blocks" userName={`@${user.login}`}>
+      <AdminBlocks siteUrl={(await getSiteUrl()).replace(/\/+$/u, "")} />
+    </AdminUiShell>
+  );
+}

package/app/admin/ui/catalog/page.tsx

@@ -0,0 +1,16 @@
+import { AdminCatalog } from "../../../components/AdminUiPanels";
+import { AdminUiShell, isStaticExport, requireAdminPage, StaticAdminNotice } from "../../../components/AdminUiShell";
+import { recipeSources } from "../../../lib/ui-model";
+
+export const dynamic = process.env.STATIC_EXPORT === "1" ? "force-static" : "force-dynamic";
+export const metadata = { title: "组件清单", robots: { index: false, follow: false } };
+
+export default async function UiCatalogPage() {
+  if (isStaticExport()) return <StaticAdminNotice />;
+  const user = await requireAdminPage();
+  return (
+    <AdminUiShell active="/admin/ui/catalog" userName={`@${user.login}`}>
+      <AdminCatalog recipes={recipeSources} />
+    </AdminUiShell>
+  );
+}

package/app/admin/ui/evals/page.tsx

@@ -0,0 +1,19 @@
+import { parse as parseYaml } from "yaml";
+import casesSource from "../../../../ui/evals/cases.yaml?raw";
+import { AdminEvals } from "../../../components/AdminUiPanels";
+import { AdminUiShell, isStaticExport, requireAdminPage, StaticAdminNotice } from "../../../components/AdminUiShell";
+import { modelConfig } from "../../../lib/ui-model";
+
+export const dynamic = process.env.STATIC_EXPORT === "1" ? "force-static" : "force-dynamic";
+export const metadata = { title: "模型自检", robots: { index: false, follow: false } };
+
+export default async function UiEvalsPage() {
+  if (isStaticExport()) return <StaticAdminNotice />;
+  const user = await requireAdminPage();
+  const cases = (parseYaml(casesSource) ?? []) as Array<{ id: string; intent: string; expect: { components?: string[]; assert?: boolean; note?: boolean } }>;
+  return (
+    <AdminUiShell active="/admin/ui/evals" userName={`@${user.login}`}>
+      <AdminEvals cases={cases} configured={Boolean(modelConfig())} />
+    </AdminUiShell>
+  );
+}

package/app/admin/ui/page.tsx

@@ -0,0 +1,22 @@
+import { AdminUiShell, isStaticExport, requireAdminPage, StaticAdminNotice } from "../../components/AdminUiShell";
+import { UiStudio } from "../../components/UiStudio";
+import { modelConfig, recipeSources, remainingDrafts } from "../../lib/ui-model";
+
+export const dynamic = process.env.STATIC_EXPORT === "1" ? "force-static" : "force-dynamic";
+export const metadata = { title: "组件工作台", robots: { index: false, follow: false } };
+
+export default async function UiStudioPage() {
+  if (isStaticExport()) return <StaticAdminNotice />;
+  const user = await requireAdminPage();
+  const config = modelConfig();
+  return (
+    <AdminUiShell active="/admin/ui" userName={`@${user.login}`}>
+      <UiStudio
+        configured={Boolean(config)}
+        modelName={config?.model ?? null}
+        remaining={remainingDrafts(user.login)}
+        recipes={recipeSources}
+      />
+    </AdminUiShell>
+  );
+}

package/app/admin-ui.css

@@ -0,0 +1,227 @@
+/* Admin pages for Intelligent UI: navigation, workbench, lists. */
+.admin-ui-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 18px;
+  margin: 0 0 18px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+  font-size: 13px;
+}
+
+.admin-ui-nav a {
+  color: var(--muted);
+  text-decoration: none;
+}
+
+.admin-ui-nav a[aria-current="page"] {
+  color: var(--ink);
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+  text-underline-offset: 6px;
+}
+
+.ui-studio {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .ui-studio { grid-template-columns: 1fr; }
+}
+
+.ui-studio-rail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+
+.ui-studio-actions { display: flex; gap: 8px; }
+.ui-studio-actions .admin-primary-button,
+.ui-studio-actions .admin-secondary-button { padding: 8px 14px; border-radius: 8px; }
+
+.ui-studio-instruction {
+  width: 100%;
+  min-height: 120px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.6;
+  resize: vertical;
+}
+
+.ui-studio-instruction:focus-visible { border-color: var(--ink); outline: none; }
+
+.ui-studio-meta { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
+
+.ui-studio-note {
+  margin: 10px 0 0;
+  padding: 8px 10px;
+  border-left: 2px solid var(--accent);
+  background: var(--accent-soft);
+  color: var(--ink);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.ui-studio-message { margin: 10px 0 0; font-size: 12px; }
+.ui-studio-message-error { color: var(--accent); }
+.ui-studio-message-info { color: var(--ink-soft); }
+
+.ui-studio-starts,
+.ui-studio-history {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+  font-size: 13px;
+}
+
+.ui-studio-starts h3,
+.ui-studio-history h3 { margin: 0; color: var(--ink); font-size: 13px; }
+.ui-studio-starts .admin-quiet-button { align-self: flex-start; padding: 0; color: var(--ink); font-size: 13px; }
+
+.ui-studio-starts label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
+
+.ui-studio-starts select {
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 13px;
+}
+
+.ui-studio-history ol { margin: 0; padding-left: 18px; }
+.ui-studio-history button { padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
+
+.ui-studio-stage {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 640px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--paper);
+}
+
+.ui-studio-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.ui-studio-switch {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin: 0;
+  padding: 2px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
+}
+
+.ui-studio-switch button {
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+
+.ui-studio-switch button[aria-selected="true"],
+.ui-studio-switch button[aria-pressed="true"] {
+  background: var(--paper);
+  color: var(--ink);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
+}
+
+.ui-studio-preview {
+  flex: 1;
+  padding: 28px 24px 40px;
+  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
+}
+
+.ui-studio-preview[hidden],
+.ui-studio-source[hidden] { display: none; }
+.ui-studio-preview[data-theme="dark"] { background: #171819; }
+.ui-studio-preview[data-width="mobile"] { }
+.ui-studio-preview[data-width="mobile"] .garden-ui { max-width: 375px; margin: 0 auto; }
+.ui-studio-preview .garden-ui { margin: 0; }
+.ui-studio-empty { margin: 48px 0; color: var(--muted); font-size: 14px; text-align: center; }
+
+.ui-studio-source { padding: 12px; }
+.ui-studio-editor {
+  min-height: 480px;
+  max-height: 70vh;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--paper);
+  font-size: 13px;
+}
+
+.ui-studio-editor .cm-editor { min-height: 480px; }
+.ui-studio-editor .cm-editor.cm-focused { outline: 2px solid var(--ink); outline-offset: -1px; }
+.ui-studio-editor .cm-gutters { border-right: 1px solid var(--line); background: var(--paper); color: var(--faint); }
+.ui-studio-editor .cm-garden-error-line { background: var(--accent-soft); }
+
+.ui-studio-diagnostics { margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; }
+.ui-studio-diagnostics li { border-top: 1px solid var(--line); }
+.ui-studio-diagnostics li[data-severity="warning"] button { color: var(--muted); }
+.ui-studio-diagnostics button { width: 100%; padding: 6px 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left; cursor: pointer; }
+
+.ui-studio-loading { color: var(--muted); }
+
+.ui-admin-blocks .ui-studio-switch { margin: 12px 0; }
+.ui-admin-file { padding: 16px 0; border-top: 1px solid var(--line); }
+.ui-admin-file h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
+
+.ui-admin-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }
+.ui-admin-table th,
+.ui-admin-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
+.ui-admin-table th { color: var(--muted); font-weight: 400; }
+
+.ui-admin-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }
+.ui-admin-actions a,
+.ui-admin-actions button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); cursor: pointer; }
+
+.ui-admin-status { font-weight: 600; }
+.ui-admin-status-uncompiled,
+.ui-admin-status-error { color: var(--accent); }
+.ui-admin-status-stale { color: #ad6900; }
+.ui-admin-status-ok { color: var(--muted); }
+
+.ui-admin-preview-title { margin: 12px 0 4px; font-size: 26px; }
+body:has(.ui-admin-catalog) { background: var(--paper); }
+:root[data-theme="dark"] body:has(.ui-admin-catalog) { background: var(--paper); }
+
+.ui-admin-catalog.admin-panel {
+  max-width: none;
+  margin: 0;
+  padding: 8px 0 48px;
+  border: 0;
+  background: transparent;
+}
+
+.ui-admin-catalog .garden-catalog { max-width: none; }
+
+.admin-ui-card { display: flex; flex-direction: column; gap: 10px; }
+.admin-ui-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 13px; }
+.admin-ui-card dt { color: var(--muted); }
+.admin-ui-card dd { margin: 0; color: var(--ink); }
+.admin-ui-card nav { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }

package/app/api/admin/distribution/route.ts

@@ -1,6 +1,7 @@
 import { requireAdminApi, requireAdminMutation } from "../../../lib/admin-auth";
 import { findColumnEntry, findPost } from "../../../lib/content";
 import { absoluteUrl, getSiteUrl } from "../../../lib/site";
+import { contentForDistribution } from "../../../../ui/core/transform.mjs";
 
 type Platform = "x" | "csdn" | "zhihu" | "juejin";
 
@@ -45,7 +46,8 @@ export async function POST(request: Request) {
   if (!source) return Response.json({ error: "未找到对应内容。" }, { status: 404 });
 
   const publicPath = kind === "post" ? `/blog/${source.path}` : `/columns/${source.column}/${source.path}`;
-  const canonicalUrl = absoluteUrl(publicPath, await getSiteUrl());
+  const siteUrl = await getSiteUrl();
+  const canonicalUrl = absoluteUrl(publicPath, siteUrl);
   let status: "queued" | "published" | "needs_credentials" | "failed" = "queued";
   let externalUrl: string | null = null;
   let error: string | null = null;
@@ -87,7 +89,7 @@ export async function POST(request: Request) {
           body: JSON.stringify({
             platform,
             title: source.title,
-            markdown: source.content,
+            markdown: contentForDistribution(source.content, { pageUrl: canonicalUrl, siteUrl }),
             summary: source.description ?? "",
             canonicalUrl,
             tags: source.tags ?? [],

package/app/api/admin/posts/source/route.ts

@@ -0,0 +1,21 @@
+import { requireAdminApi } from "../../../../lib/admin-auth";
+import { repositoryContentPath } from "../../../../lib/repository-path.mjs";
+import { readMarkdown } from "../../../../lib/ui-content";
+
+export async function GET(request: Request) {
+  const user = await requireAdminApi();
+  if (user instanceof Response) return user;
+  let path: string;
+  try {
+    path = repositoryContentPath(new URL(request.url).searchParams.get("path") ?? "");
+  } catch (error) {
+    return Response.json({ error: error instanceof Error ? error.message : "稿件路径不合法。" }, { status: 400 });
+  }
+  try {
+    const file = await readMarkdown(path);
+    if (!file) return Response.json({ error: "找不到这篇稿件。" }, { status: 404 });
+    return Response.json({ path, sha: file.sha, content: file.source });
+  } catch (error) {
+    return Response.json({ error: error instanceof Error ? error.message : "读取稿件失败。" }, { status: 503 });
+  }
+}

package/app/api/admin/preview/asset/route.ts

@@ -0,0 +1,32 @@
+import { requireAdminApi } from "../../../../lib/admin-auth";
+import { previewAssetType, repositoryContentPath } from "../../../../lib/repository-path.mjs";
+import { readRaw } from "../../../../lib/ui-content";
+import { resolveSidecarPath } from "../../../../../ui/core/fence.mjs";
+
+/** Same-name-directory files for the draft preview, behind login and sandboxed. */
+export async function GET(request: Request) {
+  const user = await requireAdminApi();
+  if (user instanceof Response) return new Response("请先登录后台。", { status: 401 });
+  const params = new URL(request.url).searchParams;
+  let post: string;
+  try {
+    post = repositoryContentPath(params.get("post") ?? "");
+  } catch {
+    return new Response("稿件路径不合法。", { status: 400 });
+  }
+  const resolved = resolveSidecarPath(post, params.get("path") ?? "");
+  if (!resolved.path) return new Response(resolved.error ?? "路径不合法。", { status: 400 });
+  const type = previewAssetType(resolved.path);
+  if (!type) return new Response("不支持这种文件。", { status: 415 });
+  const body = await readRaw(resolved.path).catch(() => null);
+  if (!body) return new Response("找不到文件。", { status: 404 });
+  const headers = new Headers({
+    "Content-Type": type,
+    "X-Content-Type-Options": "nosniff",
+    "Cache-Control": "private, max-age=60",
+  });
+  // HTML and SVG can carry scripts: an opaque-origin sandbox keeps them away from the admin.
+  if (type.startsWith("text/html")) headers.set("Content-Security-Policy", "sandbox allow-scripts");
+  if (type === "image/svg+xml") headers.set("Content-Security-Policy", "sandbox");
+  return new Response(body, { headers });
+}

package/app/api/admin/thoughts/route.ts

@@ -74,7 +74,7 @@ function parsePayload(payload: ThoughtPayload) {
         .slice(0, 12)
     : [];
   const media = parseMedia(payload.media ?? []);
-  const status = payload.status === "draft" ? "draft" : "published";
+  const status: "draft" | "published" = payload.status === "draft" ? "draft" : "published";
 
   if (!title || title.length > 120) return { error: "标题不能为空，且不得超过 120 个字符。" };
   if (!content || content.length > 20_000) return { error: "正文不能为空，且不得超过 20,000 个字符。" };