hd-garden 0.3.11 → 0.3.12

package/app/ui-parity/page.tsx

@@ -1,3 +1,5 @@
+import { ParityInteractions } from "../../ui/react/parity";
+
 const slices = [
   { label: "商品销售", value: 78.2, color: "#539af8" },
   { label: "平台与营销服务", value: 9.4, color: "#6bc67f" },
@@ -37,13 +39,13 @@ function Loop() {
 
 export default function UiParityPage() {
   const total = slices.reduce((sum, slice) => sum + slice.value, 0);
-  let angle = -Math.PI / 2;
-  const arcs = slices.map((slice) => {
+  const arcs = slices.reduce<{ angle: number; items: Array<(typeof slices)[number] & { path: string }> }>((state, slice) => {
     const sweep = (slice.value / total) * Math.PI * 2;
-    const path = ring(angle, sweep);
-    angle += sweep;
-    return { ...slice, path };
-  });
+    return {
+      angle: state.angle + sweep,
+      items: [...state.items, { ...slice, path: ring(state.angle, sweep) }],
+    };
+  }, { angle: -Math.PI / 2, items: [] }).items;
   const rows = [
     ["消费者状态", "不选择拼多多的原因", "对应的经济学概念"],
     ["不知道拼多多更便宜", "没有进行跨平台比价", "信息不对称、搜索成本"],
@@ -115,6 +117,7 @@ export default function UiParityPage() {
         <p>更丰富的供给与交易数据</p>
         <Loop />
       </section>
+      <ParityInteractions />
     </main>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",
@@ -74,8 +74,8 @@
     "@codemirror/state": "^6.7.6",
     "@codemirror/view": "^6.43.14",
     "@phosphor-icons/react": "^2.1.10",
-    "@tailwindcss/postcss": "4.2.1",
-    "@vitejs/plugin-react": "6.0.4",
+    "@tailwindcss/postcss": "4.3.3",
+    "@vitejs/plugin-react": "6.1.2",
     "@vitejs/plugin-rsc": "0.5.30",
     "acorn": "^8.19.0",
     "fuse.js": "^7.5.0",
@@ -91,10 +91,10 @@
     "micromark-extension-mdx-expression": "^3.0.1",
     "micromark-extension-mdx-jsx": "^3.0.2",
     "next": "16.3.0",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
     "react-markdown": "^10.1.0",
-    "react-server-dom-webpack": "19.2.8",
+    "react-server-dom-webpack": "19.3.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
@@ -116,8 +116,8 @@
   },
   "devDependencies": {
     "@types/node": "22.19.19",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "esbuild": "^0.28.2",
     "eslint": "9.39.4",
     "eslint-config-next": "16.2.12"

package/ui/README.md

@@ -0,0 +1,70 @@
+# Intelligent UI
+
+`ui/` 是一块可以单独拿走的交互组件模块。它解析作者写好的 `ui` 块、检查目录、算出静态快照，并在浏览器里把块画出来。它不知道文章存在哪、谁登录了后台、模型地址是什么。
+
+现在它还放在 Garden 仓库里。拆仓库以后再做。这一层只把接口和依赖方向定死：模块不引用 Garden，Garden 作为宿主调用模块。
+
+## 模块拥有什么
+
+| 路径 | 职责 |
+| --- | --- |
+| `index.mjs` | 给非 React 宿主的稳定入口：编译、检查、沙箱协议 |
+| `core/` | 解析、表达式、目录、校验、静态快照。不依赖 React |
+| `host.mjs` | 宿主契约和 `<Sandbox>` 的 iframe 协议 |
+| `react/` | `UiFigure` 和目录里的组件，样式在 `react/ui.css` |
+| `prompt/` | 写给模型的目录说明、配方和规则。宿主负责发送 |
+| `preview/` | 编辑器里的预览挂载 |
+| `evals/` | 评测样本，由宿主的工作台读取 |
+
+## 宿主可以做的事
+
+Garden 是当前的宿主，以后也可以是别的静态站点。宿主负责：
+
+- 从 Markdown 里找出 `ui` 围栏，调用 `compileUiBlock` / `checkUiBlock`
+- 把通过检查的 payload 交给 `UiFigure`
+- 在写作期调用模型。阅读页不调用模型
+- 决定要不要实现 `issuePrompt`。公开博客留空，聊天宿主可以接上
+
+```js
+import { compileUiBlock, createHost } from "./ui/index.mjs";
+import { UiFigure } from "./ui/react";
+
+const { payload } = compileUiBlock(body);
+const host = createHost({
+  openUrl(url) {},
+  copy(text) {},
+  // issuePrompt 只有聊天宿主才提供
+});
+```
+
+`UiFigure` 的 `host` 不传时，沙箱里的 `GardenUI.issuePrompt` 返回 false。`openUrl` 缺省时模块用 `window.open` 打开 https 链接。`copy` 缺省时模块写剪贴板。
+
+流式补全留在宿主。模块提供 `parseUiBodyPartial`：丢掉最后一行不完整的标签，返回已经闭合的树。阅读页渲染的是提交进 Git 的完整块。
+
+## 不能跨过去的边界
+
+`ui/` 里的源文件不能 import `app/`、`scripts/`、`bin/`、`content/`、`editors/`，也不能 import Next 或 Vinext。这条由 `tests/ui-boundary.test.mjs` 守着。
+
+宿主可以 import `ui/`。模块不能 import 宿主。
+
+同名目录里的图片和 CSV 由宿主在编译时通过 `compileUiBlock` 的 `resolveAsset` 换成公开地址。模块不读文件系统上的文章。
+
+## Sandbox
+
+目录画不了的画布（地图、三维、自由动画）写成 `<Sandbox>`，不要为此再加组件。`html`、`css`、`js` 必须是字面量。
+
+iframe 使用 `sandbox="allow-scripts"`，不带 `allow-same-origin`。文档带上 `default-src 'none'`，只允许内联样式、内联脚本和 `data:` 图片。远程脚本、远程图片、`url(http…)`、动态 `import()` 在校验和绘制时都会被拒绝。
+
+主题变量由模块注入，跟随页面的 `data-theme`：
+
+`--viz-text` `--viz-muted` `--viz-subtle` `--viz-panel` `--viz-border` `--viz-accent` `--viz-series` `--viz-track`
+
+画布里的脚本通过 `GardenUI` 跟宿主说话。`postMessage` 的 `source` 固定是 `garden-ui-sandbox`。父页面只接受来自这块 iframe 的消息。
+
+| 方法 | 宿主行为 |
+| --- | --- |
+| `GardenUI.openUrl(url)` | 只接受 `https` |
+| `GardenUI.issuePrompt(text)` | 宿主没实现时返回 false，不调用模型 |
+| `GardenUI.copy(text)` | 把最多 4000 字交给宿主复制 |
+
+画布自己上报高度，模块把 iframe 撑到内容高度，上限 4000px。

package/ui/core/catalog.mjs

@@ -467,6 +467,20 @@ export const COMPONENTS = {
     children: "none",
     example: "<Code lang=\"go\" highlight=\"2\" code={`a := 1\nb := a + 1`} />",
   },
+  Sandbox: {
+    group: "媒体与代码",
+    phase: 6,
+    summary: "自包含画布。地图、三维和目录里没有的动画写在这里，不能加载远程资源",
+    phrases: ["做一个小工具", "画一张能转的图", "在图上播放"],
+    props: {
+      title: { type: "string", desc: "画布名称，读屏用" },
+      html: { type: "string", literal: true, required: true, desc: "片段 HTML，不能含远程地址" },
+      css: { type: "string", literal: true, desc: "只作用于这块画布的样式" },
+      js: { type: "string", literal: true, desc: "内联脚本。可用 GardenUI.openUrl、GardenUI.copy 和 GardenUI.issuePrompt" },
+    },
+    children: "none",
+    example: "<Sandbox title=\"计数\" html={\"<p id=\\\"n\\\">0</p><button id=\\\"b\\\">加一</button>\"} js=\"document.getElementById('b').onclick=()=>{const n=document.getElementById('n');n.textContent=String(Number(n.textContent)+1)}\" />",
+  },
   Diagram: {
     group: "媒体与代码",
     phase: 6,

package/ui/core/static.mjs

@@ -161,6 +161,8 @@ export function toDoc(payload) {
       case "Data":
       case "Button":
         return [];
+      case "Sandbox":
+        return [{ k: "p", inl: [text(`（网页中可交互：${v("title") || "画布"}）`)] }];
       case "If":
       case "Each":
         return expand([node], ctx).flatMap((item) => block(item.node, item.ctx));

package/ui/core/validate.mjs

@@ -1,4 +1,5 @@
 import { COMPONENTS, COMPONENT_NAMES, TONES } from "./catalog.mjs";
+import { sandboxLimit, sandboxRemote } from "../host.mjs";
 import { analyzeExpr, createBudget, evaluate, ExprError } from "./expr.mjs";
 import { compiledOf, ID_PATTERN, intentHash, resolveSidecarPath, splitUiBody } from "./fence.mjs";
 import { isValidFormat } from "./format.mjs";
@@ -529,6 +530,16 @@ export function checkUiBlock(body, options = {}) {
             add("ui-prop", bodyLine(node.l), "<Diagram> 只支持 graph、flowchart 和 stateDiagram");
           }
           break;
+        case "Sandbox": {
+          for (const kind of ["html", "css", "js"]) {
+            const text = values[kind];
+            if (typeof text !== "string") continue;
+            if (text.length > sandboxLimit(kind)) add("ui-limit", bodyLine(node.l), `<Sandbox> 的 ${kind} 超过 ${sandboxLimit(kind)} 字`);
+            const remote = sandboxRemote(text);
+            if (remote) add("ui-prop", bodyLine(node.l), `<Sandbox> 的 ${kind}：${remote}`);
+          }
+          break;
+        }
         case "Table": {
           const columns = Array.isArray(values.columns) ? values.columns : [];
           childContext.columns = columns.length;

package/ui/host.mjs

@@ -0,0 +1,155 @@
+/**
+ * Host contract for the Intelligent UI module.
+ *
+ * The module (`ui/`) parses, checks, and draws blocks. It does not know about
+ * Garden posts, Git, admin sessions, or which model is configured. A host
+ * supplies those edges. The public blog host leaves `issuePrompt` unset, so a
+ * sandbox cannot start a model turn. A chat host may implement it.
+ */
+
+export const SANDBOX_SOURCE = "garden-ui-sandbox";
+
+/** @typedef {{
+ *   openUrl?: (url: string) => void,
+ *   issuePrompt?: (text: string) => void,
+ *   copy?: (text: string) => void,
+ * }} UiHost
+ */
+
+export function createHost(partial = {}) {
+  return {
+    openUrl: typeof partial.openUrl === "function" ? partial.openUrl : null,
+    issuePrompt: typeof partial.issuePrompt === "function" ? partial.issuePrompt : null,
+    copy: typeof partial.copy === "function" ? partial.copy : null,
+  };
+}
+
+const LIMITS = { html: 12000, css: 8000, js: 8000 };
+
+export function sandboxLimit(kind) {
+  return LIMITS[kind] ?? 0;
+}
+
+/** Rejects anything that would pull a remote resource into the frame. */
+export function sandboxRemote(source) {
+  const text = String(source ?? "");
+  if (/<script\b[^>]*\bsrc\s*=/iu.test(text)) return "不能加载远程脚本";
+  if (/\b(?:import|require)\s*\(/u.test(text)) return "不能动态加载模块";
+  if (/url\(\s*['"]?https?:/iu.test(text)) return "样式不能引用远程地址";
+  if (/<(?:img|iframe|object|embed|link|video|audio)\b[^>]+(?:src|href)\s*=\s*['"]https?:/iu.test(text)) {
+    return "不能嵌入远程地址";
+  }
+  return null;
+}
+
+export function isHttpsUrl(value) {
+  try {
+    const url = new URL(String(value));
+    return url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+const THEMES = {
+  light: {
+    color: "#0d0d0d",
+    text: "#0d0d0d",
+    muted: "#5d5d5d",
+    subtle: "#8f8f8f",
+    panel: "#ffffff",
+    border: "#0000001a",
+    accent: "#0169cc",
+    series: "#0285ff",
+    track: "#0d0d0d1f",
+  },
+  dark: {
+    color: "#ededed",
+    text: "#ededed",
+    muted: "#cdcdcd",
+    subtle: "#afafaf",
+    panel: "#212121",
+    border: "#ffffff1a",
+    accent: "#66b5ff",
+    series: "#0285ff",
+    track: "#ffffff26",
+  },
+};
+
+function tokenCss(theme) {
+  const token = THEMES[theme] ?? THEMES.light;
+  return `
+:root {
+  color: ${token.color};
+  background: transparent;
+  font-family: -apple-system-body, ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
+  --viz-text: ${token.text};
+  --viz-muted: ${token.muted};
+  --viz-subtle: ${token.subtle};
+  --viz-panel: ${token.panel};
+  --viz-border: ${token.border};
+  --viz-accent: ${token.accent};
+  --viz-series: ${token.series};
+  --viz-track: ${token.track};
+}
+body { margin: 0; }
+`;
+}
+
+/** Keeps author CSS and script inside their own tags. */
+function keepInside(source, closing) {
+  return String(source ?? "").replaceAll(closing, `${closing.slice(0, 1)}\\${closing.slice(1)}`);
+}
+
+/**
+ * Document for a sandboxed AppBlock. Scripts are inline only. The frame has
+ * no network. `canPrompt` is true only when the host implements `issuePrompt`.
+ */
+export function buildSrcdoc({ html = "", css = "", js = "", canPrompt = false, theme = "light" } = {}) {
+  const bridge = `
+    const GardenUI = {
+      canPrompt: ${canPrompt ? "true" : "false"},
+      openUrl(url) {
+        parent.postMessage({ source: ${JSON.stringify(SANDBOX_SOURCE)}, type: "openUrl", url: String(url) }, "*");
+      },
+      issuePrompt(text) {
+        if (!GardenUI.canPrompt) return false;
+        parent.postMessage({ source: ${JSON.stringify(SANDBOX_SOURCE)}, type: "issuePrompt", text: String(text).slice(0, 500) }, "*");
+        return true;
+      },
+      copy(text) {
+        parent.postMessage({ source: ${JSON.stringify(SANDBOX_SOURCE)}, type: "copy", text: String(text).slice(0, 4000) }, "*");
+        return true;
+      }
+    };
+    const report = () => {
+      let bottom = 0;
+      for (const el of document.body.children) {
+        if (el.tagName === "SCRIPT") continue;
+        bottom = Math.max(bottom, el.getBoundingClientRect().bottom);
+      }
+      parent.postMessage({ source: ${JSON.stringify(SANDBOX_SOURCE)}, type: "height", height: Math.ceil(bottom + 8) }, "*");
+    };
+    addEventListener("load", report);
+    if (window.ResizeObserver) new ResizeObserver(report).observe(document.body);
+  `;
+  const safeCss = keepInside(css, "</style");
+  const safeHtml = keepInside(html, "</script");
+  const safeJs = keepInside(js, "</script");
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:;"><style>${tokenCss(theme)}${safeCss}</style></head><body>${safeHtml}<script>${bridge}<\/script><script>${safeJs}<\/script></body></html>`;
+}
+
+export function readSandboxMessage(data) {
+  if (!data || typeof data !== "object" || data.source !== SANDBOX_SOURCE) return null;
+  if (data.type === "height" && typeof data.height === "number" && data.height > 0 && data.height < 4000) {
+    return { type: "height", height: Math.round(data.height) };
+  }
+  if (data.type === "openUrl" && isHttpsUrl(data.url)) return { type: "openUrl", url: String(data.url) };
+  if (data.type === "issuePrompt" && typeof data.text === "string" && data.text.trim()) {
+    return { type: "issuePrompt", text: data.text.trim().slice(0, 500) };
+  }
+  if (data.type === "copy" && typeof data.text === "string") {
+    return { type: "copy", text: data.text.slice(0, 4000) };
+  }
+  return null;
+}

package/ui/index.mjs

@@ -0,0 +1,80 @@
+/**
+ * Public entry for hosts that compile and check blocks without rendering.
+ * React hosts mount `ui/react`. The module does not import Garden.
+ */
+export {
+  SANDBOX_SOURCE,
+  buildSrcdoc,
+  createHost,
+  isHttpsUrl,
+  readSandboxMessage,
+  sandboxLimit,
+  sandboxRemote,
+} from "./host.mjs";
+export {
+  applyBlock,
+  ApplyError,
+  bits32,
+  bits64,
+  blockStatus,
+  bytes,
+  CATALOG_VERSION,
+  catalogReference,
+  catalogSchema,
+  classifyReplacement,
+  collectDataSources,
+  collectDecls,
+  compileUiBlock,
+  compiledOf,
+  COMPONENT_NAMES,
+  COMPONENTS,
+  computeScope,
+  contentForDistribution,
+  contentForFeed,
+  contentToSearchText,
+  defaultStateValues,
+  docToHtml,
+  docToMarkdown,
+  docToText,
+  fenceHash,
+  findBlocks,
+  fixed,
+  float32,
+  formatValue,
+  GROUPS,
+  idOf,
+  intentFence,
+  intentHash,
+  intentOf,
+  isPowerOfTwo,
+  isValidFormat,
+  jsonFence,
+  lookupFrom,
+  normalizeNewlines,
+  orderLets,
+  parseDataFile,
+  parseUiBody,
+  parseUiBodyPartial,
+  PAYLOAD_VERSION,
+  percent,
+  readPayload,
+  renderStatic,
+  resolveSidecarPath,
+  runExpect,
+  sampleDomain,
+  scanFences,
+  scanMarkdown,
+  setCompiled,
+  si,
+  splitUiBody,
+  STARTERS,
+  suggestComponent,
+  sweepSeries,
+  thousands,
+  toDoc,
+  TONE_LABELS,
+  TONES,
+  transformUiContent,
+  checkUiBlock,
+  withRow,
+} from "./core/index.mjs";

package/ui/parity-fixtures.mjs

@@ -0,0 +1,76 @@
+const header = (id, caption) => `---
+id: ${id}
+caption: ${caption}
+intent: |
+  像素对照
+---
+`;
+
+/** Real fences for the six interactions that were missing from the first crop. */
+export const PARITY_FIXTURES = [
+  {
+    id: "parity-slider",
+    width: 768,
+    body: `${header("parity-slider", "序列越长，KV 显存越大。")}
+<State seq={4096} />
+<Slider bind="seq" label="序列长度" min={1024} max={32768} scale="log" format="thousands" unit="token" />
+`,
+  },
+  {
+    id: "parity-chart",
+    width: 768,
+    body: `${header("parity-chart", "显存随序列长度线性增长。")}
+<State seq={4096} />
+<Let mem={2 * 32 * 8 * 128 * seq * 2} />
+<Chart sweep="seq" from={1024} to={32768} scale="log" height={220} xLabel="序列长度" yLabel="KV 显存">
+  <Line y={mem} label="KV 显存" format="bytes" />
+</Chart>
+`,
+  },
+  {
+    id: "parity-steps",
+    width: 768,
+    body: `${header("parity-steps", "Prefill 一次写满 K/V；Decode 每步只追加一行。")}
+<Steps>
+  <Step title="Prefill">一次写下全部 K/V。</Step>
+  <Step title="Decode">这一拍只追加一行。</Step>
+  <Step title="完成">21 次投影变成 7 次。</Step>
+</Steps>
+`,
+  },
+  {
+    id: "parity-grid",
+    width: 768,
+    body: `${header("parity-grid", "ECB 下相同的明文块得到相同的密文块。")}
+<Grid cols={["块1", "块2", "块3"]} legend={{ same: "相同的明文得到相同的密文" }}>
+  <Row label="明文" cells={["A", "B", "A"]} tones={["same", "plain", "same"]} />
+  <Row label="ECB 密文" cells={["X", "Y", "X"]} tones={["same", "plain", "same"]} notes={["和块3一样", "", "和块1一样"]} />
+</Grid>
+`,
+  },
+  {
+    id: "parity-code",
+    width: 768,
+    body: `${header("parity-code", "这一步执行的是累加。")}
+<Code lang="go" highlight="2" code={\`a := 1
+b := a + 1
+fmt.Println(b)\`} />
+`,
+  },
+  {
+    id: "parity-diagram",
+    width: 768,
+    body: `${header("parity-diagram", "收到 SYN+ACK 才离开 SYN-SENT。")}
+<Diagram highlight={["synsent"]} mermaid={\`flowchart LR
+  closed[CLOSED] --> synsent[SYN-SENT]
+  synsent --> established[ESTABLISHED]\`} />
+`,
+  },
+  {
+    id: "parity-sandbox",
+    width: 768,
+    body: `${header("parity-sandbox", "目录以外的交互放在无网络的画布里。")}
+<Sandbox title="计数" html={"<p id=\\"n\\">0</p><button id=\\"b\\" type=\\"button\\">加一</button>"} css="button{color:var(--viz-accent)}" js="document.getElementById('b').onclick=()=>{const n=document.getElementById('n');n.textContent=String(Number(n.textContent)+1)}" />
+`,
+  },
+];