hd-garden 0.3.13 → 0.4.0

package/ui/garden/word-count.mjs

@@ -0,0 +1,266 @@
+/**
+ * Article word count, the same rule as the A2 demo generator (`lib/page.mjs`):
+ *
+ *   renderedHtml.replace(/<[^>]+>/g, "").replace(/\s/g, "").length
+ *
+ * There is no second filter that drops code, tables, or math. Whatever text the
+ * renderer leaves between tags is counted, including characters that HTML
+ * escaping expanded (`&` → `&amp;`). Whitespace of every kind is removed first.
+ *
+ * What that means for each construct:
+ *
+ * - Fenced code is included. The source is emitted inside `<pre><code>`.
+ *   Highlight markup is only tags, so it does not change the count.
+ * - Inline code is included.
+ * - Tables are included (the cell text).
+ * - Math is included as the text KaTeX emits (visible glyphs and the MathML
+ *   annotation). The TeX source is not counted a second time on top of that.
+ * - Garden block props are not counted as YAML keys. Only text the widget
+ *   actually emits is counted:
+ *   - `garden html` that is a full document (the demo's `sandbox` fence) goes
+ *     into an iframe `srcdoc` attribute. The tag strip deletes the attribute,
+ *     so the document and its props are excluded. A `fallback:` line is
+ *     emitted in `<noscript>` and is counted.
+ *   - `garden html` that is already a widget fragment is inlined, so its text
+ *     (including `<script>` text) is counted.
+ *   - `garden figure` emits tab labels, part explanations, the caption, and
+ *     SVG `<text>`. Prop keys and part ids stay in attributes and are excluded.
+ * - A heading written `## 1.2 Title` keeps the digits (they move into
+ *   `.sec-no`). The dot is dropped. The space was never going to be counted.
+ *
+ * The Go parity article comes out at 35,105. The demo page prints 35,234 for
+ * the same prose and the same fenced code. The missing 129 characters are the
+ * demo sandbox's `fallback:` paragraph, which that source renders in
+ * `<noscript>` and this parity article does not contain.
+ */
+import katex from "katex";
+import { Marked } from "marked";
+import { parse as parseYaml } from "yaml";
+
+const marked = new Marked({
+  gfm: true,
+  breaks: false,
+  renderer: {
+    code(token) {
+      const text = typeof token === "string" ? token : token.text ?? "";
+      const lang = typeof token === "string" ? "" : token.lang ?? "";
+      const name = String(lang).split(/\s/u)[0] ?? "";
+      const body = escapeHtml(text);
+      if (name === "mermaid") {
+        return `<figure class="g-mermaid"><pre class="code mermaid-src"><code>${body}</code></pre></figure>\n`;
+      }
+      return `<pre class="code"><code class="hljs${name ? ` language-${escapeHtml(name)}` : ""}">${body}</code></pre>\n`;
+    },
+  },
+  extensions: [
+    {
+      name: "mathBlock",
+      level: "block",
+      start(src) {
+        return src.indexOf("$$");
+      },
+      tokenizer(src) {
+        const match = /^\$\$\s*\n?([\s\S]+?)\n?\$\$\s*(?:\n|$)/u.exec(src);
+        if (!match) return undefined;
+        return { type: "mathBlock", raw: match[0], tex: match[1] };
+      },
+      renderer(token) {
+        return `<div class="math-display">${katex.renderToString(String(token.tex ?? "").trim(), { displayMode: true, throwOnError: false })}</div>\n`;
+      },
+    },
+    {
+      name: "mathInline",
+      level: "inline",
+      start(src) {
+        const index = src.indexOf("$");
+        return index < 0 ? undefined : index;
+      },
+      tokenizer(src) {
+        const match = /^\$(?!\s)((?:\\\$|[^$\n])+?)(?<!\s)\$(?!\d)/u.exec(src);
+        if (!match) return undefined;
+        return { type: "mathInline", raw: match[0], tex: match[1] };
+      },
+      renderer(token) {
+        return katex.renderToString(String(token.tex ?? ""), { throwOnError: false });
+      },
+    },
+  ],
+});
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function splitProps(body) {
+  const text = String(body ?? "").replace(/\s+$/u, "");
+  const lines = text.split("\n");
+  const sep = lines.findIndex((line, index) => index > 0 && /^---\s*$/u.test(line));
+  if (sep === -1) return { yamlText: text, children: "" };
+  return { yamlText: lines.slice(0, sep).join("\n"), children: lines.slice(sep + 1).join("\n").replace(/^\n/u, "") };
+}
+
+function readYaml(yamlText) {
+  try {
+    const parsed = yamlText.trim() ? parseYaml(yamlText) : {};
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return null;
+  }
+}
+
+function isHtmlDocument(body) {
+  return /^\s*(?:<!doctype|<html|<style|<script)/iu.test(body);
+}
+
+function sandboxHtml(title, body) {
+  const fallback = /^fallback:\s*(.*)$/mu.exec(body);
+  const src = fallback ? body.replace(/^fallback:\s*.*(?:\n|$)/mu, "") : body;
+  const noscript = fallback ? `<noscript><p>${escapeHtml(fallback[1])}</p></noscript>` : "";
+  return `<div class="g-sandbox"><iframe title="${escapeHtml(title)}" srcdoc="${escapeHtml(src)}"></iframe>${noscript}</div>`;
+}
+
+function inline(value) {
+  return marked.parseInline(String(value ?? ""), { async: false });
+}
+
+function figureHtml(data, svg) {
+  const parts = Array.isArray(data.parts) ? data.parts : [];
+  const tabs = parts.map((part) => `<button type="button" data-sel="${escapeHtml(part.id)}">${escapeHtml(part.label ?? "")}</button>`).join("");
+  const notes = parts.map((part) => `<p data-exp="${escapeHtml(part.id)}">${inline(part.text ?? "")}</p>`).join("");
+  const caption = data.caption ? `<figcaption>${inline(data.caption)}</figcaption>` : "";
+  return `<figure class="g-explore"><div role="tablist">${tabs}</div><div class="dx-wrap">${svg}</div><div class="dx-exp">${notes}</div>${caption}</figure>`;
+}
+
+function visibleStrings(value, html) {
+  if (typeof value === "string") html.push(inline(value));
+  else if (Array.isArray(value)) value.forEach((item) => visibleStrings(item, html));
+  else if (value && typeof value === "object") {
+    for (const [key, item] of Object.entries(value)) {
+      if (key === "id" || key === "url" || key === "src" || key === "svg" || key === "svgFile") continue;
+      visibleStrings(item, html);
+    }
+  }
+}
+
+function gardenHtml(info, body) {
+  const name = info.trim().split(/\s+/u)[0]?.toLowerCase() ?? "";
+  const { yamlText, children } = splitProps(body);
+  if (name === "html" || name === "interactive") {
+    const data = readYaml(yamlText) ?? {};
+    const title = typeof data.title === "string" ? data.title : "";
+    const document = children.trim() ? children : body;
+    if (!children.trim() || isHtmlDocument(document)) return sandboxHtml(title, document);
+    return document;
+  }
+  if (name === "figure") {
+    const data = readYaml(yamlText);
+    if (!data) return `<pre class="code"><code>${escapeHtml(body)}</code></pre>`;
+    return figureHtml(data, children);
+  }
+  const data = readYaml(yamlText);
+  if (!data) return `<pre class="code"><code>${escapeHtml(body)}</code></pre>`;
+  const bits = [];
+  visibleStrings(data, bits);
+  if (children.trim()) bits.push(children);
+  return bits.join("");
+}
+
+function renderBlocks(markdown) {
+  const lines = String(markdown ?? "").split("\n");
+  const parts = [];
+  let buffer = [];
+  const flush = () => {
+    if (!buffer.length) return;
+    parts.push(marked.parse(buffer.join("\n"), { async: false }));
+    buffer = [];
+  };
+  for (let index = 0; index < lines.length; index += 1) {
+    const opened = /^(`{3,}|~{3,})(.*)$/u.exec(lines[index]);
+    if (!opened) {
+      buffer.push(lines[index]);
+      continue;
+    }
+    const marker = opened[1];
+    const info = opened[2].trim();
+    const lang = info.split(/\s+/u)[0]?.toLowerCase() ?? "";
+    const body = [];
+    index += 1;
+    while (index < lines.length && !new RegExp(`^${marker[0]}{${marker.length},}\\s*$`, "u").test(lines[index])) {
+      body.push(lines[index]);
+      index += 1;
+    }
+    if (lang === "garden") {
+      flush();
+      parts.push(gardenHtml(info.slice("garden".length).trim(), body.join("\n")));
+    } else {
+      buffer.push(lines[index - body.length - 1], ...body, lines[index] ?? marker);
+    }
+  }
+  flush();
+  return parts.join("\n");
+}
+
+function numberHeadings(html, markdown) {
+  let h2 = 0;
+  let h3 = 0;
+  const numbered = /^#{2,3}\s+\d/mu.test(markdown);
+  const minLevel = /^##\s/mu.test(markdown) ? 2 : 3;
+  return html.replace(/<h([234])>(.*?)<\/h\1>/gu, (all, level, inner) => {
+    const sourceLevel = Number(level);
+    const mapped = sourceLevel - minLevel + 2;
+    if (mapped > 3) return `<h4>${inner}</h4>`;
+    const text = inner
+      .replace(/<[^>]+>/g, "")
+      .replace(/&quot;/g, "\"")
+      .replace(/&#39;/g, "'")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&amp;/g, "&");
+    const numberedHeading = /^(\d+(?:\.\d+)*)\.?\s+(.*)$/u.exec(text);
+    let number = "";
+    let body = inner;
+    if (numberedHeading) {
+      number = numberedHeading[1];
+      body = inner.replace(/^(\d+(?:\.\d+)*)\.?\s+/u, "");
+    } else if (!numbered) {
+      if (mapped === 2) {
+        h2 += 1;
+        h3 = 0;
+        number = String(h2);
+      } else {
+        h3 += 1;
+        number = h2 ? `${h2}.${h3}` : String(h3);
+      }
+    }
+    return `<h${mapped}>${number ? `<span class="sec-no">${number}</span>` : ""}${body}</h${mapped}>`;
+  });
+}
+
+const ALERT_TITLE = { note: "提醒", tip: "建议", important: "重要", warning: "警告", caution: "注意" };
+
+function githubAlerts(html) {
+  return html.replace(/<blockquote>\s*<p>\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*([^\n<]*)\n?/gu, (_, kind, title) => {
+    const name = String(kind).toLowerCase();
+    const label = title.trim() ? escapeHtml(title.trim()) : ALERT_TITLE[name];
+    return `<blockquote class="markdown-alert markdown-alert-${name}"><p class="markdown-alert-title">${label}</p><p>`;
+  });
+}
+
+function captionImages(html) {
+  return html.replace(/<p>(<img [^>]+>)<\/p>/gu, (_, img) => {
+    const alt = (/alt="([^"]*)"/u.exec(img) ?? [])[1] ?? "";
+    const title = (/title="([^"]*)"/u.exec(img) ?? [])[1] ?? "";
+    const caption = title || (alt && !/^image|^截图|^img/iu.test(alt) ? alt : "");
+    return `<figure class="fig"><div class="fig-card">${img}</div>${caption ? `<figcaption>${caption}</figcaption>` : ""}</figure>`;
+  });
+}
+
+/** Rendered-article word count. Pure: no DOM, safe to run while generating content. */
+export function countDemoWords(markdown) {
+  const html = githubAlerts(captionImages(numberHeadings(renderBlocks(markdown), markdown)));
+  return html.replace(/<[^>]+>/g, "").replace(/\s/g, "").length;
+}

package/ui/host.mjs

@@ -53,26 +53,34 @@ export function isHttpsUrl(value) {
 
 const THEMES = {
   light: {
-    color: "#0d0d0d",
-    text: "#0d0d0d",
-    muted: "#5d5d5d",
-    subtle: "#8f8f8f",
-    panel: "#ffffff",
-    border: "#0000001a",
-    accent: "#0169cc",
-    series: "#0285ff",
-    track: "#0d0d0d1f",
+    ink: "#1B1A18",
+    text: "#2D2C29",
+    soft: "#4A4844",
+    muted: "#6E6B64",
+    grey: "#737069",
+    rule: "#E6E3DC",
+    ruleStrong: "#D6D2C9",
+    card: "#FFFFFF",
+    paper: "#F8F7F3",
+    well: "#F0EEE8",
+    blue: "#2C55B4",
+    blueTint: "#EAF0FC",
+    blueLine: "rgba(44,85,180,.28)",
   },
   dark: {
-    color: "#ededed",
-    text: "#ededed",
-    muted: "#cdcdcd",
-    subtle: "#afafaf",
-    panel: "#212121",
-    border: "#ffffff1a",
-    accent: "#66b5ff",
-    series: "#0285ff",
-    track: "#ffffff26",
+    ink: "#EEECE7",
+    text: "#DCD9D2",
+    soft: "#BDB9B0",
+    muted: "#A09B91",
+    grey: "#A09B91",
+    rule: "#2F2D29",
+    ruleStrong: "#45423C",
+    card: "#1E1D1A",
+    paper: "#161513",
+    well: "#22211D",
+    blue: "#93B2F4",
+    blueTint: "rgba(147,178,244,.13)",
+    blueLine: "rgba(147,178,244,.35)",
   },
 };
 
@@ -80,19 +88,28 @@ function tokenCss(theme) {
   const token = THEMES[theme] ?? THEMES.light;
   return `
 :root {
-  color: ${token.color};
+  color: ${token.text};
+  color-scheme: ${theme === "dark" ? "dark" : "light"};
   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};
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
+  --ink: ${token.ink};
+  --text: ${token.text};
+  --soft: ${token.soft};
+  --muted: ${token.muted};
+  --grey: ${token.grey};
+  --rule: ${token.rule};
+  --rule-strong: ${token.ruleStrong};
+  --card: ${token.card};
+  --paper: ${token.paper};
+  --well: ${token.well};
+  --blue: ${token.blue};
+  --blue-tint: ${token.blueTint};
+  --blue-line: ${token.blueLine};
 }
+html, body { background: transparent !important; overflow: hidden !important; height: auto !important; }
 body { margin: 0; }
+body > :first-child { padding-right: 44px; box-sizing: border-box; }
+svg { max-width: 100%; height: auto; }
 `;
 }
 

package/ui/parity-fixtures.mjs

@@ -70,7 +70,7 @@ fmt.Println(b)\`} />
     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)}" />
+<Sandbox title="计数" html={"<p id=\\"n\\">0</p><button id=\\"b\\" type=\\"button\\">加一</button>"} css="button{color:var(--blue)}" js="document.getElementById('b').onclick=()=>{const n=document.getElementById('n');n.textContent=String(Number(n.textContent)+1)}" />
 `,
   },
 ];

package/ui/preview/dist/garden-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; }