hd-garden 0.3.13 → 0.4.0

package/ui/prompt/rules.md

@@ -1,4 +1,20 @@
-# 把作者的意图写成 Garden 的 ui 块
+# 把作者的想法编译成 Garden 块
+
+文章里只有一种写法：`garden` 围栏。名字只有 card、stat、compare、timeline、chart、figure、html、interactive。裸 `garden` 围栏是作者的想法，发布前编译掉。不要再写 `ui`、`widget`、`embed`、`intent` 或 `garden:名字`。
+
+## 只用作者的原文
+
+- 只用作者已经写过的句子。不改措辞，不补例子，不编数字。
+- 不写测验，不写「作用」「适用」「特点」「说明」「要点」「互动版」「示例图」「点击」「点按」这类填充标签或过程旁白。
+- 并排格子只放大约 60 字以内的短句。格子里放不下的，留在正文。
+- 不要把连续段落拆成步骤。读者没有状态可以改时，不要做 interactive。
+- 计算器只给复杂公式。一次乘法留在正文里。
+- 保留作者自己的 mermaid。全局概览图保持一整张，不要拆开。
+- 正文已经读得清楚时，不要再套一个组件。
+
+interactive 的正文仍用下面的组件和属性。那是 interactive 的内部零件，不是文章里的名字。
+
+# 把作者的意图写成 Garden 的 interactive 块
 
 你在帮一位技术博客作者，把他用自然语言写下的"这里想让读者动手看看"，写成 Garden 站点能直接绘制的 `ui` 块。读者在网页上拖滑杆、翻步骤、点格子，全部在本地计算，不会再调用模型。
 

package/ui/react/CatalogPage.tsx

@@ -3,6 +3,7 @@
 import { marked } from "marked";
 import { useMemo, useState, useSyncExternalStore } from "react";
 import { COMPONENTS, GROUPS } from "../core/catalog.mjs";
+import { CATALOG, GARDEN_NAMES, IDEA } from "../garden/catalog.mjs";
 import { compileUiBlock } from "../core/compile.mjs";
 import { DEMOS, demoFence } from "../core/demos.mjs";
 import { scanFences } from "../core/fence.mjs";
@@ -149,6 +150,17 @@ export function CatalogPage({ recipes = [], onStart }: { recipes?: RecipeSource[
 
   return (
     <div className="garden-catalog">
+      <section className="garden-author-catalog">
+        <h2>写作块</h2>
+        <p>文章里只写 <code>garden</code> 围栏。下面是名字。再往下的清单是 interactive 的内部零件，不是文章里的名字。</p>
+        <ul>
+          <li><code>garden</code> · {IDEA.label}。{IDEA.when}</li>
+          {GARDEN_NAMES.map((name) => {
+            const spec = CATALOG[name as keyof typeof CATALOG];
+            return <li key={name}><code>garden {name}</code> · {spec.label}。{spec.when}</li>;
+          })}
+        </ul>
+      </section>
       <nav className="garden-catalog-nav" aria-label="大类">
         <input type="search" placeholder="搜索" value={query} onChange={(event) => setQuery(event.target.value)} aria-label="搜索组件" />
         {categories.map((name) => (

package/ui/react/components/display.tsx

@@ -282,7 +282,7 @@ function Cite({ node, env }: { node: UiNode; env: Env }) {
   const icon = href ? faviconSrc(href) : null;
   const body = (
     <>
-      {icon ? <img src={icon} alt="" width={12} height={12} /> : null}
+      {icon ? <span className="garden-ui-cite-icon" aria-hidden="true" style={{ backgroundImage: `url("${icon}")` }} /> : null}
       {label}
     </>
   );

package/ui/react/components/media.tsx

@@ -97,8 +97,8 @@ let mermaidQueue: Promise<unknown> = Promise.resolve();
 
 const MERMAID_FONT = 'ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, "PingFang SC", sans-serif';
 const MERMAID_THEMES = {
-  light: { background: "#f9f9f9", primaryColor: "#ffffff", primaryBorderColor: "#dddddd", primaryTextColor: "#171717", lineColor: "#888888", secondaryColor: "#f5f5f5", tertiaryColor: "#f5f5f5" },
-  dark: { background: "#171717", primaryColor: "#2a2a2a", primaryBorderColor: "#ffffff33", primaryTextColor: "#ededed", lineColor: "#afafaf", secondaryColor: "#303030", tertiaryColor: "#303030" },
+  light: { background: "#F8F7F3", primaryColor: "#FFFFFF", primaryBorderColor: "#D6D2C9", primaryTextColor: "#1B1A18", lineColor: "#6E6B64", secondaryColor: "#F0EEE8", tertiaryColor: "#F0EEE8", fontSize: "14px" },
+  dark: { background: "#161513", primaryColor: "#1E1D1A", primaryBorderColor: "#45423C", primaryTextColor: "#EEECE7", lineColor: "#A09B91", secondaryColor: "#22211D", tertiaryColor: "#22211D", fontSize: "14px" },
 };
 
 function renderMermaid(source: string, id: string, dark: boolean) {

package/ui/react/ui.css

@@ -6,41 +6,41 @@
 .garden-ui,
 .garden-catalog,
 .garden-ui-preview {
-  --gui-bg: #fff;
-  --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;
-  --gui-completed: #777;
-  --gui-border: #0000001a;
-  --gui-border-soft: #00000014;
-  --gui-border-strong: #0000001f;
-  --gui-control-border: #ccc;
-  --gui-check-border: #d2d2d2;
-  --gui-control-bg: #fff;
-  --gui-surface: #f5f5f5;
-  --gui-chip: #f3f3f3;
-  --gui-hover: #f5f5f5;
-  --gui-solid: #171717;
-  --gui-solid-hover: #303030;
-  --gui-on-solid: #fff;
-  --gui-segment: #ededed;
-  --gui-segment-selected: #fff;
-  --gui-segment-shadow: 0 1px 4px -1px #0003;
-  --gui-progress: #0d0d0d;
-  --gui-progress-track: #f3f3f3;
-  --gui-focus: #0285ff;
-  --gui-bubble: #eaf2ff;
-  --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-bg: var(--card, #fff);
+  --gui-chart: var(--well);
+  --gui-track: var(--rule, #e6e3dc);
+  --gui-thumb: var(--card, #fff);
+  --gui-slider-track: var(--rule, #e6e3dc);
+  --gui-slider-thumb: var(--ink, #1b1a18);
+  --gui-text: var(--ink, #1b1a18);
+  --gui-muted: var(--muted, #6e6b64);
+  --gui-subtle: var(--grey, #737069);
+  --gui-completed: var(--muted, #6e6b64);
+  --gui-border: var(--rule, #e6e3dc);
+  --gui-border-soft: var(--rule, #e6e3dc);
+  --gui-border-strong: var(--rule-strong, #d6d2c9);
+  --gui-control-border: var(--rule-strong, #d6d2c9);
+  --gui-check-border: var(--rule-strong, #d6d2c9);
+  --gui-control-bg: var(--card, #fff);
+  --gui-surface: var(--well, #f0eee8);
+  --gui-chip: var(--well, #f0eee8);
+  --gui-hover: var(--well, #f0eee8);
+  --gui-solid: var(--ink, #1b1a18);
+  --gui-solid-hover: var(--soft, #4a4844);
+  --gui-on-solid: var(--paper, #f8f7f3);
+  --gui-segment: var(--well, #f0eee8);
+  --gui-segment-selected: var(--card, #fff);
+  --gui-segment-shadow: none;
+  --gui-progress: var(--blue, #2c55b4);
+  --gui-progress-track: var(--well, #f0eee8);
+  --gui-focus: var(--blue, #2c55b4);
+  --gui-bubble: var(--blue-tint, #eaf0fc);
+  --gui-popover-border: var(--rule, #e6e3dc);
+  --gui-shadow: none;
+  --gui-code-bg: var(--well, #f0eee8);
+  --gui-accent: var(--blue, #2c55b4);
+  --gui-series-plain: var(--ink, #1b1a18);
+  --gui-series-accent: var(--blue);
   --gui-series-new: #00a240;
   --gui-series-waste: #e02e2a;
   --gui-series-same: #924ff7;
@@ -56,7 +56,7 @@
   --gui-discovery: #924ff7;
   --gui-discovery-text: #8046d9;
   --gui-discovery-soft: #924ff71a;
-  --gui-font: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+  --gui-font: var(--sans, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif);
   --gui-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }
 
@@ -67,40 +67,41 @@
 .garden-ui[data-theme="dark"],
 .garden-catalog[data-theme="dark"],
 .garden-ui-preview[data-theme="dark"] {
-  --gui-bg: #0e0e0e;
-  --gui-chart: #212121;
-  --gui-text: #ededed;
-  --gui-muted: #cdcdcd;
-  --gui-subtle: #afafaf;
-  --gui-completed: #afafaf;
-  --gui-border: #ffffff1a;
-  --gui-border-soft: #ffffff0d;
-  --gui-border-strong: #fff3;
-  --gui-control-border: #fff3;
-  --gui-check-border: #fff3;
-  --gui-control-bg: #303030;
-  --gui-surface: #2a2a2a;
-  --gui-chip: #303030;
-  --gui-hover: #ffffff1a;
-  --gui-solid: #ededed;
-  --gui-solid-hover: #dcdcdc;
-  --gui-on-solid: #0d0d0d;
-  --gui-segment: #303030;
-  --gui-segment-selected: #303030;
+  --gui-bg: var(--card);
+  --gui-chart: var(--well);
+  --gui-text: var(--ink);
+  --gui-muted: var(--muted);
+  --gui-subtle: var(--grey);
+  --gui-completed: var(--muted);
+  --gui-border: var(--rule);
+  --gui-border-soft: var(--rule);
+  --gui-border-strong: var(--rule-strong);
+  --gui-control-border: var(--rule-strong);
+  --gui-check-border: var(--rule-strong);
+  --gui-control-bg: var(--card);
+  --gui-surface: var(--well);
+  --gui-chip: var(--well);
+  --gui-hover: var(--tint);
+  --gui-solid: var(--ink);
+  --gui-solid-hover: var(--soft);
+  --gui-on-solid: var(--paper);
+  --gui-segment: var(--well);
+  --gui-segment-selected: var(--card);
   --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;
-  --gui-bubble: #133463;
-  --gui-popover-border: #ffffff26;
-  --gui-shadow: 0 2px 8px #00000066;
-  --gui-code-bg: #171717;
-  --gui-accent: #0285ff;
-  --gui-series-plain: #ededed;
+  --gui-track: var(--rule);
+  --gui-thumb: var(--card);
+  --gui-slider-track: var(--rule-strong);
+  --gui-slider-thumb: var(--ink);
+  --gui-progress: var(--blue);
+  --gui-progress-track: var(--well);
+  --gui-focus: var(--blue);
+  --gui-bubble: var(--blue-tint);
+  --gui-popover-border: var(--rule);
+  --gui-shadow: none;
+  --gui-code-bg: var(--well);
+  --gui-accent: var(--blue);
+  --gui-series-plain: var(--ink);
+  --gui-series-accent: var(--blue);
   --gui-series-new: #04b84c;
   --gui-series-waste: #fa423e;
   --gui-info: #0285ff;
@@ -919,13 +920,14 @@
   line-height: 1.3 !important;
   letter-spacing: normal !important;
 }
-.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-accent) !important; }
-.garden-ui-diagram-canvas .garden-ui-diagram-on .nodeLabel,
-.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; }
+/* Selected nodes keep the 「全部」 look, text included. Only the rest fades. */
+.garden-ui-diagram-canvas:has(.garden-ui-diagram-on) .node:not(.garden-ui-diagram-on),
+.garden-ui-diagram-canvas:has(.garden-ui-diagram-on) .statediagram-state:not(.garden-ui-diagram-on),
+.garden-ui-diagram-canvas:has(.garden-ui-diagram-on) .cluster:not(.garden-ui-diagram-on) { opacity: 0.22; }
+.garden-ui-diagram-canvas .garden-ui-diagram-on,
+.garden-ui-diagram-canvas .garden-ui-diagram-on text,
+.garden-ui-diagram-canvas .garden-ui-diagram-on .nodeLabel { opacity: 1; }
+.garden-ui-diagram-canvas path.garden-ui-diagram-on { stroke: var(--gui-accent); stroke-width: 2px; }
 
 .garden-ui-sandbox {
   display: block;
@@ -1131,7 +1133,9 @@
   position: relative;
   top: -2px;
 }
-.garden-ui-cite img { width: 12px; height: 12px; border-radius: 2px; }
+.garden-ui-cite img,
+.garden-ui-cite-icon { width: 12px; height: 12px; border-radius: 2px; }
+.garden-ui-cite-icon { display: inline-block; background-position: center; background-size: contain; background-repeat: no-repeat; vertical-align: -2px; }
 
 .garden-ui-pie { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
 .garden-ui-pie-title { align-self: stretch; margin: 0 0 8px; color: var(--gui-text); font-size: 16px; font-weight: 600; line-height: 26px; text-align: start; }