hd-garden 0.3.11 → 0.3.13

package/ui/prompt/rules.md

@@ -46,6 +46,7 @@ batch 为 {batch}、序列 {thousands(seq)} 时，KV cache 要 **{bytes(mem)}**
 - 组件标签用大写开头，属性用名字传：字符串用双引号，数字、布尔、表达式用 `{}`。
 - 正文里可以写普通 Markdown 段落、加粗、列表；用 `{表达式}` 把会变的数字插进句子。字面的 `{` 写成 `\{`。
 - 不能写：标题、HTML 标签、图片语法、代码围栏、脚注、`import` / `export`。
+- 目录表达不了的画布（可转的示意、逐步出现的图钉、一段自包含动画）用 `<Sandbox>`。`html` / `css` / `js` 必须是字面量，不能加载远程脚本、图片或样式。脚本里可以用 `GardenUI.openUrl`（只打开 `https`）、`GardenUI.copy`，以及 `GardenUI.issuePrompt`。`issuePrompt` 只有宿主实现了继续对话时才可用；博客阅读页没有这个能力。
 
 ## 二、状态和表达式
 

package/ui/react/CatalogPage.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { marked } from "marked";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState, useSyncExternalStore } from "react";
 import { COMPONENTS, GROUPS } from "../core/catalog.mjs";
 import { compileUiBlock } from "../core/compile.mjs";
 import { DEMOS, demoFence } from "../core/demos.mjs";
@@ -68,11 +68,45 @@ function PropTable({ spec }: { spec: Spec }) {
 
 const CATEGORIES = ["配方", ...GROUPS];
 
+const hashListeners = new Set<() => void>();
+
+function subscribeCatalogHash(onStoreChange: () => void) {
+  hashListeners.add(onStoreChange);
+  window.addEventListener("hashchange", onStoreChange);
+  return () => {
+    hashListeners.delete(onStoreChange);
+    window.removeEventListener("hashchange", onStoreChange);
+  };
+}
+
+function categoryFromHash(hash: string): string {
+  const id = hash.replace(/^#/, "");
+  if (id.startsWith("component-")) {
+    const spec = COMPONENTS[id.slice("component-".length) as keyof typeof COMPONENTS] as Spec | undefined;
+    if (spec?.group) return spec.group;
+  } else if (id === "配方" || id.startsWith("recipe-")) return "配方";
+  else {
+    try {
+      const decoded = decodeURIComponent(id);
+      if ((CATEGORIES as string[]).includes(decoded)) return decoded;
+    } catch {
+      // A malformed hash stays on the default category.
+    }
+  }
+  return "展示";
+}
+
+function replaceCatalogHash(name: string) {
+  window.history.replaceState(null, "", `#${encodeURIComponent(name)}`);
+  for (const listener of hashListeners) listener();
+}
+
 /** Category rail on the left, a grid of name + preview cards on the right. */
 export function CatalogPage({ recipes = [], onStart }: { recipes?: RecipeSource[]; onStart?: (fence: string) => void }) {
   const parsedRecipes = useMemo(() => recipes.map(parseRecipe).filter((recipe) => recipe.fence), [recipes]);
   const [query, setQuery] = useState("");
-  const [category, setCategory] = useState("展示");
+  const hash = useSyncExternalStore(subscribeCatalogHash, () => window.location.hash, () => "");
+  const category = categoryFromHash(hash);
   const [openId, setOpenId] = useState<string | null>(null);
   const normalized = query.trim().toLowerCase();
 
@@ -108,19 +142,9 @@ export function CatalogPage({ recipes = [], onStart }: { recipes?: RecipeSource[
   const activeCategory = categories.includes(category) ? category : categories[0];
   const cards = activeCategory ? cardsFor(activeCategory) : [];
 
-  useEffect(() => {
-    const id = window.location.hash.replace(/^#/, "");
-    if (id.startsWith("component-")) {
-      const spec = COMPONENTS[id.slice("component-".length) as keyof typeof COMPONENTS] as Spec | undefined;
-      if (spec?.group) setCategory(spec.group);
-    } else if (id === "配方" || id.startsWith("recipe-")) setCategory("配方");
-    else if ((CATEGORIES as string[]).includes(decodeURIComponent(id))) setCategory(decodeURIComponent(id));
-  }, []);
-
   const chooseCategory = (name: string) => {
-    setCategory(name);
     setOpenId(null);
-    window.history.replaceState(null, "", `#${encodeURIComponent(name)}`);
+    replaceCatalogHash(name);
   };
 
   return (

package/ui/react/components/chart.tsx

@@ -8,7 +8,7 @@ import { asNumber, asString, evalExpr, expandChildren, propValue, registerCompon
 import type { Env, Lookup, UiNode } from "../types";
 
 const SERIES = new Set(["Line", "Area", "Bar", "Point"]);
-const DEFAULT_TONES = ["plain", "accent", "new", "same"];
+const DEFAULT_TONES = ["accent", "muted", "new", "same"];
 const MARGIN = { top: 14, right: 16, bottom: 30, left: 60 };
 
 type Scale = { map: (value: number) => number; ticks: number[] };

package/ui/react/components/sandbox.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { buildSrcdoc, isHttpsUrl, readSandboxMessage, sandboxRemote } from "../../host.mjs";
+import { asString, propValue, registerComponents, useHost, useRuntime } from "../runtime";
+import type { Env, UiNode } from "../types";
+
+function Sandbox({ node, env }: { node: UiNode; env: Env }) {
+  const runtime = useRuntime();
+  const host = useHost();
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [height, setHeight] = useState(180);
+  const [srcDoc, setSrcDoc] = useState("");
+  const html = asString(propValue(runtime, node, "html", env));
+  const css = asString(propValue(runtime, node, "css", env));
+  const js = asString(propValue(runtime, node, "js", env));
+  const title = asString(propValue(runtime, node, "title", env), "交互");
+  const blocked = sandboxRemote(html) || sandboxRemote(css) || sandboxRemote(js);
+
+  useEffect(() => {
+    if (blocked) return;
+    const paint = () => {
+      const theme = document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+      setSrcDoc(buildSrcdoc({ html, css, js, canPrompt: typeof host.issuePrompt === "function", theme }));
+    };
+    paint();
+    const observer = new MutationObserver(paint);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, [blocked, html, css, js, host]);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      const frame = frameRef.current;
+      if (!frame || event.source !== frame.contentWindow) return;
+      const message = readSandboxMessage(event.data);
+      if (!message) return;
+      if (message.type === "height") setHeight(message.height);
+      if (message.type === "openUrl" && isHttpsUrl(message.url)) {
+        if (host.openUrl) host.openUrl(message.url);
+        else window.open(message.url, "_blank", "noopener,noreferrer");
+      }
+      if (message.type === "issuePrompt") host.issuePrompt?.(message.text);
+      if (message.type === "copy") {
+        if (host.copy) host.copy(message.text);
+        else void navigator.clipboard?.writeText(message.text);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [host]);
+
+  if (blocked) return <p className="garden-ui-error-inline">{blocked}</p>;
+
+  return (
+    <iframe
+      ref={frameRef}
+      className="garden-ui-sandbox"
+      title={title}
+      sandbox="allow-scripts"
+      referrerPolicy="no-referrer"
+      srcDoc={srcDoc}
+      style={{ height }}
+    />
+  );
+}
+
+registerComponents({ Sandbox });

package/ui/react/index.tsx

@@ -5,16 +5,18 @@ import "./components/inputs";
 import "./components/display";
 import "./components/chart";
 import "./components/media";
-import { UiRuntime } from "./runtime";
+import "./components/sandbox";
+import { UiRuntime, type UiHost } from "./runtime";
 import type { Diagnostic, UiPayload } from "./types";
 
 export { UiRuntime } from "./runtime";
+export type { UiHost } from "./runtime";
 export type { Diagnostic, UiNode, UiPayload } from "./types";
 
-export function UiFigure({ payload }: { payload: UiPayload }) {
+export function UiFigure({ payload, host }: { payload: UiPayload; host?: UiHost }) {
   return (
     <figure className="garden-ui" lang="en-US" id={`ui-${payload.id}`}>
-      <UiRuntime payload={payload} />
+      <UiRuntime payload={payload} host={host} />
       <figcaption>{payload.caption}</figcaption>
     </figure>
   );

package/ui/react/parity.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { compileUiBlock } from "../core/compile.mjs";
+import { PARITY_FIXTURES } from "../parity-fixtures.mjs";
+import { UiFigure } from "./index";
+import type { UiPayload } from "./types";
+
+function payloadFor(body: string): UiPayload | null {
+  return compileUiBlock(body).payload as UiPayload | null;
+}
+
+export function ParityInteractions() {
+  return (
+    <>
+      {PARITY_FIXTURES.map((fixture) => {
+        const payload = payloadFor(fixture.body);
+        return (
+          <section id={fixture.id} key={fixture.id} style={{ width: fixture.width, marginBottom: 32 }}>
+            {payload ? <UiFigure payload={payload} /> : <p>对照块没有通过检查。</p>}
+          </section>
+        );
+      })}
+    </>
+  );
+}

package/ui/react/runtime.tsx

@@ -24,6 +24,18 @@ export type Runtime = {
 
 const RuntimeContext = createContext<Runtime | null>(null);
 
+export type UiHost = {
+  openUrl?: (url: string) => void;
+  issuePrompt?: (text: string) => void;
+  copy?: (text: string) => void;
+};
+
+const HostContext = createContext<UiHost>({});
+
+export function useHost() {
+  return useContext(HostContext);
+}
+
 export function useRuntime() {
   const runtime = useContext(RuntimeContext);
   if (!runtime) throw new Error("Garden UI component outside UiRuntime");
@@ -204,7 +216,9 @@ function carryOver(defaults: Record<string, unknown>, previous: Record<string, u
   return next;
 }
 
-export function UiRuntime({ payload }: { payload: UiPayload }) {
+const EMPTY_HOST: UiHost = {};
+
+export function UiRuntime({ payload, host }: { payload: UiPayload; host?: UiHost }) {
   const decls = useMemo(() => collectDecls(payload.root), [payload.root]);
   const defaults = useMemo(() => defaultStateValues(decls) as Record<string, unknown>, [decls]);
   const [state, setStateValue] = useState<Record<string, unknown>>(defaults);
@@ -230,10 +244,12 @@ export function UiRuntime({ payload }: { payload: UiPayload }) {
     [payload.id, payload.root, decls, data, defaults, state, scope, sliders, setState, reset, scopeFor],
   );
   return (
-    <RuntimeContext.Provider value={runtime}>
-      <div className="garden-ui-body">
-        <RenderNodes nodes={payload.root.c} env={{ locals: [] }} />
-      </div>
-    </RuntimeContext.Provider>
+    <HostContext.Provider value={host ?? EMPTY_HOST}>
+      <RuntimeContext.Provider value={runtime}>
+        <div className="garden-ui-body">
+          <RenderNodes nodes={payload.root.c} env={{ locals: [] }} />
+        </div>
+      </RuntimeContext.Provider>
+    </HostContext.Provider>
   );
 }

package/ui/react/ui.css

@@ -7,9 +7,11 @@
 .garden-catalog,
 .garden-ui-preview {
   --gui-bg: #fff;
-  --gui-chart: transparent;
+  --gui-chart: #f4f4f4;
   --gui-track: #e4e4e4;
   --gui-thumb: #fff;
+  --gui-slider-track: #0d0d0d1f;
+  --gui-slider-thumb: #333;
   --gui-text: #0d0d0d;
   --gui-muted: #5d5d5d;
   --gui-subtle: #8f8f8f;
@@ -36,6 +38,12 @@
   --gui-popover-border: #0000000d;
   --gui-shadow: 0 2px 6px #00000014;
   --gui-code-bg: #f9f9f9;
+  --gui-accent: #0285ff;
+  --gui-series-plain: #171717;
+  --gui-series-accent: #0285ff;
+  --gui-series-new: #00a240;
+  --gui-series-waste: #e02e2a;
+  --gui-series-same: #924ff7;
   --gui-info: #539af8;
   --gui-info-text: #0169cc;
   --gui-info-soft: #0285ff1a;
@@ -82,6 +90,8 @@
   --gui-segment-shadow: none;
   --gui-track: #3a3a3a;
   --gui-thumb: #fff;
+  --gui-slider-track: #ffffff26;
+  --gui-slider-thumb: #ededed;
   --gui-progress: #0285ff;
   --gui-progress-track: #303030;
   --gui-focus: #3a83f7;
@@ -89,6 +99,10 @@
   --gui-popover-border: #ffffff26;
   --gui-shadow: 0 2px 8px #00000066;
   --gui-code-bg: #171717;
+  --gui-accent: #0285ff;
+  --gui-series-plain: #ededed;
+  --gui-series-new: #04b84c;
+  --gui-series-waste: #fa423e;
   --gui-info: #0285ff;
   --gui-info-text: #66b5ff;
   --gui-info-soft: #0285ff26;
@@ -276,7 +290,7 @@
 .garden-ui-steps-head strong { color: var(--gui-text); font-size: 16px; font-weight: 600; line-height: 1.4; }
 .garden-ui-steps-head span { flex-shrink: 0; color: var(--gui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
 
-.garden-ui-steps .garden-ui-progress { height: 2px; margin: 2px 0 0; }
+.garden-ui-steps .garden-ui-progress { height: 3px; margin: 2px 0 0; }
 
 .garden-ui-steps-stage { display: grid; }
 
@@ -386,7 +400,7 @@
 
 .garden-ui-button.garden-ui-tone-accent:hover { border-color: var(--gui-solid-hover); background: var(--gui-solid-hover); }
 
-/* slider: thin track, a round thumb sitting on it, as in ChatGPT's scenario slider */
+/* slider: 24px track, 18px thumb inset 3px, no filled portion */
 .garden-ui-slider { display: flex; flex-direction: column; gap: 8px; }
 
 .garden-ui-slider label {
@@ -403,12 +417,12 @@
 
 .garden-ui-slider-track { padding: 8px 0; }
 
-.garden-ui-slider-track:has(input:focus-visible) { outline: 2px solid var(--gui-focus); outline-offset: 4px; border-radius: 999px; }
+.garden-ui-slider-track:has(input:focus-visible) { outline: 2px solid var(--gui-focus); outline-offset: 3px; border-radius: 999px; }
 
 .garden-ui-slider input[type="range"] {
   display: block;
   width: 100%;
-  height: 22px;
+  height: 38px;
   margin: 0;
   background: transparent;
   cursor: ew-resize;
@@ -419,39 +433,39 @@
 .garden-ui-slider input[type="range"]:focus-visible { outline: none; }
 
 .garden-ui-slider input[type="range"]::-webkit-slider-runnable-track {
-  height: 8px;
+  height: 24px;
   border: 0;
   border-radius: 999px;
-  background: var(--gui-track);
+  background: var(--gui-slider-track);
 }
 
 .garden-ui-slider input[type="range"]::-moz-range-track {
-  height: 8px;
+  height: 24px;
   border: 0;
   border-radius: 999px;
-  background: var(--gui-track);
+  background: var(--gui-slider-track);
 }
 
 .garden-ui-slider input[type="range"]::-webkit-slider-thumb {
-  width: 22px;
-  height: 22px;
-  margin-top: -7px;
-  border: 1px solid #0000001a;
+  width: 18px;
+  height: 18px;
+  margin-top: 3px;
+  border: 0;
   border-radius: 50%;
-  background: var(--gui-thumb);
-  box-shadow: 0 1px 4px #00000040;
+  background: var(--gui-slider-thumb);
+  box-shadow: none;
   -webkit-appearance: none;
   appearance: none;
   transition: transform 120ms ease;
 }
 
 .garden-ui-slider input[type="range"]::-moz-range-thumb {
-  width: 22px;
-  height: 22px;
-  border: 1px solid #0000001a;
+  width: 18px;
+  height: 18px;
+  border: 0;
   border-radius: 50%;
-  background: var(--gui-thumb);
-  box-shadow: 0 1px 4px #00000040;
+  background: var(--gui-slider-thumb);
+  box-shadow: none;
 }
 
 .garden-ui-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
@@ -802,16 +816,16 @@
 }
 .garden-ui-chart-canvas:focus-visible { outline: 2px solid var(--gui-focus); outline-offset: 2px; }
 
-.garden-ui-series-plain { --gui-series: #539af8; }
-.garden-ui-series-accent { --gui-series: #539af8; }
-.garden-ui-series-new { --gui-series: #6bc67f; }
-.garden-ui-series-waste { --gui-series: #ef8b57; }
-.garden-ui-series-same { --gui-series: #ef8b57; }
+.garden-ui-series-plain { --gui-series: var(--gui-series-plain); }
+.garden-ui-series-accent { --gui-series: var(--gui-series-accent); }
+.garden-ui-series-new { --gui-series: var(--gui-series-new); }
+.garden-ui-series-waste { --gui-series: var(--gui-series-waste); }
+.garden-ui-series-same { --gui-series: var(--gui-series-same); }
 .garden-ui-series-muted,
 .garden-ui-series-cached { --gui-series: var(--gui-subtle); }
 
 .garden-ui-chart-grid { stroke: var(--gui-border); stroke-width: 1; stroke-dasharray: 2 4; }
-.garden-ui-chart-axis { stroke: transparent; stroke-width: 1; }
+.garden-ui-chart-axis { stroke: var(--gui-border); stroke-width: 1; }
 .garden-ui-chart .garden-ui-legend { justify-content: center; }
 .garden-ui-chart-tick,
 .garden-ui-chart-label { fill: var(--gui-subtle); font-family: var(--gui-font); font-size: 12px; }
@@ -889,8 +903,8 @@
 }
 
 .garden-ui-code code { padding: 0; border-radius: 0; background: none; color: var(--gui-text); font-size: 13px; }
-.garden-ui-code-line { display: block; padding: 0 14px 0 0; border-left: 2px solid transparent; }
-.garden-ui-code-line[data-highlight="true"] { border-left-color: var(--gui-info); background: var(--gui-info-soft); }
+.garden-ui-code-line { display: block; padding: 0 14px 0 12px; box-shadow: inset 2px 0 0 transparent; }
+.garden-ui-code-line[data-highlight="true"] { background: var(--gui-info-soft); box-shadow: inset 2px 0 0 var(--gui-accent); }
 .garden-ui-code-number { display: inline-block; width: 3em; padding-right: 1em; color: var(--gui-subtle); text-align: right; user-select: none; }
 
 .garden-ui-diagram-canvas { overflow-x: auto; padding: 12px; border-radius: 12px; background: var(--gui-code-bg); }
@@ -908,10 +922,19 @@
 .garden-ui-diagram-canvas .garden-ui-diagram-on rect,
 .garden-ui-diagram-canvas .garden-ui-diagram-on polygon,
 .garden-ui-diagram-canvas .garden-ui-diagram-on circle,
-.garden-ui-diagram-canvas rect.garden-ui-diagram-on { fill: var(--gui-info-soft) !important; stroke: var(--gui-info) !important; }
+.garden-ui-diagram-canvas rect.garden-ui-diagram-on { fill: var(--gui-info-soft) !important; stroke: var(--gui-accent) !important; }
 .garden-ui-diagram-canvas .garden-ui-diagram-on .nodeLabel,
-.garden-ui-diagram-canvas .garden-ui-diagram-on text { color: var(--gui-info-text) !important; fill: var(--gui-info-text) !important; }
-.garden-ui-diagram-canvas path.garden-ui-diagram-on { stroke: var(--gui-info) !important; stroke-width: 2px !important; }
+.garden-ui-diagram-canvas .garden-ui-diagram-on text { color: var(--gui-accent) !important; fill: var(--gui-accent) !important; }
+.garden-ui-diagram-canvas path.garden-ui-diagram-on { stroke: var(--gui-accent) !important; stroke-width: 2px !important; }
+
+.garden-ui-sandbox {
+  display: block;
+  width: 100%;
+  min-height: 48px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+}
 
 /* intent: the author's words, shown like a message bubble */
 .garden-ui-intent { border: 0; background: transparent; }