hd-garden 0.8.0 → 0.8.2

package/app/styles/a2.css

@@ -2298,3 +2298,341 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
   color: var(--muted);
   font: 400 13px/1.4 var(--sans);
 }
+
+/* ----- Intelligent UI patterns: cycle, list, choice, verdicts, card rows, source chips ----- */
+
+.g-ic { flex: none; color: var(--soft); }
+
+/* Source chip: a small pill with the site's icon (or its first letter) and host. */
+.g-srcs { display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px; white-space: nowrap; }
+.markdown-body a.ext.g-src,
+.markdown-body a.ext.g-src-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px 1px 5px;
+  border-radius: 999px;
+  background: var(--well);
+  color: var(--soft);
+  font: 400 12px / 1.7 var(--sans);
+  text-decoration: none;
+  white-space: nowrap;
+  max-width: 14em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.markdown-body a.ext.g-src,
+.markdown-body a.ext.g-src-chip { background-image: none; padding-right: 8px; vertical-align: 1px; }
+.markdown-body a.ext.g-src-chip img.fav { margin: 0; vertical-align: 0; }
+.markdown-body a.ext.g-src:hover,
+.markdown-body a.ext.g-src-chip:hover { background: var(--rule); color: var(--ink); text-decoration: none; }
+.g-src-ic {
+  display: inline-grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--paper);
+  color: var(--ink);
+  font: 600 9px / 1 var(--sans);
+  text-transform: uppercase;
+}
+.g-src-fav { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
+.g-src-more { font: 400 12px / 1.7 var(--sans); color: var(--muted); }
+
+/* relations: key elements on a circle; narrow screens list each node's links as text */
+.g-rel {
+  margin: 28px 0;
+  padding: 28px 24px 16px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r-lg);
+  container-type: inline-size;
+}
+.markdown-body .g-rel-h { margin: 0 0 16px; font: 600 var(--fs-small) / 1.5 var(--sans); color: var(--ink); }
+.g-rel-ring { position: relative; height: 440px; }
+.g-rel-ring[data-n="3"] { height: 360px; }
+.g-rel-ring[data-n="4"] { height: 420px; }
+.g-rel-ring[data-n="6"] { height: 480px; }
+.g-rel-node {
+  position: absolute;
+  left: var(--x);
+  top: var(--y);
+  width: var(--w);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  box-sizing: border-box;
+  padding: 12px 14px;
+  border: 1.5px solid var(--rule-strong);
+  border-radius: 16px;
+  background: var(--card-hover);
+  text-align: center;
+}
+.markdown-body .g-rel-t { margin: 0; font: 700 var(--fs-lead) / 1.35 var(--sans); color: var(--ink); }
+.markdown-body .g-rel-x { margin: 4px 0 0; font: 400 15px / 1.5 var(--sans); color: var(--soft); }
+/* On the circle the arrows say it; the text lines stay for screen readers. */
+.markdown-body .g-rel-out { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
+.g-rel-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
+.g-rel-svg path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
+.g-rel-svg path.dash { stroke-dasharray: 5 6; stroke-width: 1.75; }
+.g-rel-svg marker path { fill: var(--muted); stroke: none; }
+/* A label sits on its line with a page-coloured pad that hides the line under it. */
+.g-rel-label {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--paper);
+  color: var(--soft);
+  font: 500 12.5px / 1.4 var(--sans);
+  white-space: nowrap;
+  pointer-events: none;
+}
+.g-rel figcaption { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }
+/* Same graph at every width. Below 560px the nodes take a larger share of the width,
+   show their title on at most two lines (>= 13px), and open the full text on tap. */
+.g-rel-node { font: inherit; color: inherit; appearance: none; -webkit-appearance: none; }
+.g-rel-node > span { display: block; }
+/* Every width: titles stop at two lines, descriptions at three, both with an ellipsis; tap opens the full text. */
+.g-rel-node { cursor: pointer; }
+.g-rel-node:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.g-rel-node[aria-expanded="true"] { border-color: var(--ink); }
+.markdown-body .g-rel-t, .markdown-body .g-rel-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; hyphens: manual; text-align: center; }
+.markdown-body .g-rel-x { -webkit-line-clamp: 3; }
+.g-rel[data-compact] .g-rel-node { padding: 8px 8px; border-radius: 12px; }
+.markdown-body .g-rel[data-compact] .g-rel-t {
+  font-size: 13.5px;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: normal;
+}
+/* The middle node of a narrow hub shows its title only; tap for the description. */
+.g-rel[data-compact] .g-rel-node[data-center] .g-rel-x { display: none; }
+.g-rel[data-compact] .g-rel-node[data-center] { padding-left: 3px; padding-right: 3px; }
+.markdown-body .g-rel[data-compact] .g-rel-node[data-center] .g-rel-t { font-size: 13px; }
+/* A wide hub has five or six nodes on one ring: titles at 16px keep two lines without crowding the spokes. */
+.markdown-body .g-rel:not([data-compact]) .g-rel-ring[data-center] .g-rel-t { font-size: 16px; }
+.markdown-body .g-rel[data-compact] .g-rel-x { margin-top: 2px; font-size: 13px; line-height: 1.35; -webkit-line-clamp: 2; }
+.g-rel-badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid var(--rule-strong);
+  color: var(--ink);
+  font: 600 13px / 1 var(--sans);
+}
+.g-rel-legend { list-style: none; margin: 12px 4px 0; padding: 0; font: 400 13px / 1.6 var(--sans); color: var(--soft); }
+.markdown-body .g-rel-legend { list-style: none; padding-left: 0; }
+.markdown-body .g-rel-legend li { margin: 0; padding-left: 0; }
+.g-rel-detail { margin: 12px 4px 0; padding: 10px 12px; border-radius: 12px; background: var(--well); font: 400 14px / 1.55 var(--sans); color: var(--text); }
+.g-rel-detail-t { display: block; font-weight: 700; color: var(--ink); }
+.g-rel-detail-x { display: block; color: var(--soft); }
+@media (max-width: 600px) {
+  .g-rel { padding: 16px 12px 10px; }
+}
+
+/* list: compact icon rows, or titled icon steps */
+.g-list { margin: 24px 0; }
+.g-list ul { list-style: none; margin: 0; padding: 0; }
+.markdown-body .g-list-h { margin: 0 0 10px; font: 600 var(--fs-small) / 1.5 var(--sans); color: var(--ink); }
+.g-list-rows ul { padding: 12px 18px; border: 1px solid var(--rule); border-radius: var(--r); }
+.markdown-body .g-list li { margin: 0; }
+.g-list-rows li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
+.g-list-rows .g-list-ic { display: flex; height: 1.7em; align-items: center; }
+.markdown-body .g-list-rows .g-list-x { margin: 0; line-height: 1.7; }
+.g-list-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--rule); }
+.g-list-steps li:first-child { border-top: 0; padding-top: 6px; }
+.g-list-steps .g-list-ic { padding-top: 3px; }
+.markdown-body .g-list-t { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
+.markdown-body .g-list-steps .g-list-x { margin: 0 0 4px; color: var(--text); }
+.g-list figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
+
+/* choice */
+.g-choice { margin: 28px 0; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); }
+.markdown-body .g-choice-h { margin: 0 0 12px; font-weight: 600; color: var(--ink); }
+.g-choice-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
+.g-choice-opt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 20px 16px 18px;
+  border: 1px solid var(--rule);
+  border-radius: 16px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+  transition: background .15s ease, border-color .15s ease;
+}
+.g-choice-opt:hover { background: var(--card-hover); }
+.g-choice-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.g-choice-opt[aria-checked="true"] { border-color: var(--ink); background: var(--well); }
+.g-choice-ic .g-ic { color: var(--ink); }
+.g-choice-v { font: 700 22px / 1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
+.g-choice-x { font-size: 14px; line-height: 1.6; color: var(--muted); }
+.g-choice-l { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
+.g-choice-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; }
+.g-choice-opt[aria-checked="true"] .g-choice-dot { border: 5px solid var(--ink); }
+.markdown-body .g-choice-reply { margin: 14px 4px 0; font-size: 15px; color: var(--text); }
+.g-choice figcaption { margin: 12px 2px 0; font-size: 13px; color: var(--muted); }
+@media (max-width: 600px) {
+  .g-choice { padding: 12px; }
+  .g-choice-opts { grid-template-columns: 1fr; }
+  .g-choice-opt { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic v" "ic x" "ic l"; justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
+  .g-choice-ic { grid-area: ic; align-self: center; }
+  .g-choice-v { grid-area: v; font-size: 20px; }
+  .g-choice-x { grid-area: x; }
+  .g-choice-l { grid-area: l; }
+}
+
+/* compare with verdicts: stacked bad / good blocks */
+.g-verdicts { margin: 20px 0; }
+.g-verdict { padding: 14px 0; border-top: 1px solid var(--rule); }
+.g-verdict:first-child { border-top: 0; padding-top: 4px; }
+.markdown-body .g-verdict h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 var(--fs-body) / 1.5 var(--sans); color: var(--ink); }
+.markdown-body .g-verdict p { margin: 0 0 0 30px; color: var(--text); }
+.g-verdict-ic.bad { color: #b4473a; }
+.g-verdict-ic.good { color: #2d6a3e; }
+html[data-theme="dark"] .g-verdict-ic.bad { color: #e48a7c; }
+html[data-theme="dark"] .g-verdict-ic.good { color: #7fbf8e; }
+
+/* card rows: thumbnail left, text right, dividers between */
+.g-entities { margin: 24px 0; }
+.g-entity-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--rule); }
+.g-entity-row:first-child { border-top: 0; padding-top: 4px; }
+.g-entity-row:not(:has(.g-entity-img)) { grid-template-columns: minmax(0, 1fr); }
+.g-entity-row .g-entity-img img { display: block; width: 132px; height: 132px; object-fit: cover; border-radius: 14px; border: 1px solid var(--rule); margin: 0; }
+.markdown-body .g-entity-row .g-entity-t { margin: 0 0 6px; font: 600 var(--fs-body) / 1.5 var(--sans); }
+.markdown-body .g-entity-row p { margin: 0 0 6px; }
+.markdown-body .g-entity-k { color: var(--text); }
+@media (max-width: 600px) {
+  .g-entity-row { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
+  .g-entity-row .g-entity-img img { width: 76px; height: 76px; border-radius: 10px; }
+}
+
+/* review fixes: chip gap, truncated hosts, the "none of these" choice */
+.markdown-body a.ext.g-src-chip > span,
+.markdown-body a.ext.g-src > span { overflow: hidden; text-overflow: ellipsis; }
+/* A single source shows its whole domain; a tag with "+N" cuts only hosts past ~14 characters. */
+.markdown-body .g-srcs.is-multi a.ext.g-src > span { max-width: 14ch; }
+.markdown-body .g-srcs:not(.is-multi) a.ext.g-src { max-width: none; }
+.markdown-body a.ext.g-src-chip,
+.markdown-body a.ext.g-src { gap: 6px; }
+.g-choice-group { display: grid; gap: 0; }
+.g-choice-none {
+  justify-self: center;
+  margin: 12px 0 0;
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  color: var(--muted);
+  font: 500 14px / 1.6 var(--sans);
+  text-decoration: underline;
+  text-decoration-color: var(--rule);
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.g-choice-none:hover { color: var(--ink); }
+.g-choice-none:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.g-choice-none[aria-checked="true"] { color: var(--ink); background: var(--well); text-decoration: none; }
+.markdown-body img.g-src-fav { display: block; flex: none; width: 14px; height: 14px; max-width: none; margin: 0; border-radius: 3px; object-fit: contain; box-shadow: none; }
+
+/* Handbook field tables: Required never wraps; narrow screens show each row as a card. */
+/* Short values (必填, Optional) stay on one line; long conditions wrap instead of widening the column. */
+.table-wrap .field-table th.ft-req,
+.table-wrap .field-table td.ft-req { white-space: normal; min-width: 4em; max-width: 9em; width: 9em; }
+@media (max-width: 640px) {
+  .table-wrap.field-wrap { border: 0; border-radius: 0; overflow: visible; }
+  .field-wrap .field-table,
+  .field-wrap .field-table tbody,
+  .field-wrap .field-table tr,
+  .field-wrap .field-table td { display: block; width: auto; }
+  .field-wrap .field-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .field-wrap .field-table tr { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r); background: var(--well); }
+  .field-wrap .field-table td { padding: 4px 0; border: 0; white-space: normal; min-width: 0; }
+  .field-wrap .field-table td:first-child { padding: 0 0 6px; font-weight: 600; color: var(--ink); }
+  .field-wrap .field-table td:not(:first-child)::before {
+    content: attr(data-label);
+    display: block;
+    font: 600 12px / 1.5 var(--sans);
+    color: var(--muted);
+  }
+}
+
+/* ===== Component reference (/garden/reference/*): code beside the real block ===== */
+
+@media (min-width: 1280px) {
+  .garden-doc-page.is-reference { grid-template-columns: 224px minmax(0, 980px) 188px; }
+  .garden-doc-page.is-reference .article-column { max-width: 980px; width: 100%; }
+}
+.garden-doc-page.is-reference .markdown-body > p:first-child { margin: 0 0 8px; }
+.garden-doc-page.is-reference .markdown-body > p:first-child + h2 { margin-top: 0; padding-top: 0; }
+.markdown-body .ref-pane[data-p="c"] pre[data-language]::before { display: none; }
+.ref-demo {
+  --rd-s: #f0eee6; --rd-p: #faf9f5; --rd-i: #30302e; --rd-m: #6b6a65; --rd-r: #e3e0d5;
+  border: 1px solid var(--rd-r);
+  border-radius: 14px;
+  margin: 1.2em 0 1.6em;
+  overflow: hidden;
+  background: var(--rd-p);
+}
+html[data-theme="dark"] .ref-demo { --rd-s: #262624; --rd-p: #1f1e1d; --rd-i: #eceae3; --rd-m: #a9a69c; --rd-r: #3a3936; }
+.ref-tabs { display: flex; gap: 6px; padding: 6px; border-bottom: 1px solid var(--rd-r); background: var(--rd-s); }
+.ref-tabs button {
+  font: inherit; font-size: 14px; min-height: 38px; min-width: 72px; border: 0; border-radius: 9px;
+  padding: 0 16px; background: transparent; color: var(--rd-m); cursor: pointer;
+}
+.ref-tabs button[aria-selected="true"] { background: var(--rd-p); color: var(--rd-i); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
+.ref-pane { padding: 16px; min-width: 0; }
+.ref-pane[data-off] { display: none; }
+.ref-pane-h { display: none; }
+.ref-pane > :last-child { margin-bottom: 0; }
+.ref-pane[data-p="c"] .ux-cb { display: block; margin: 0; padding: 0; min-height: 0; }
+.ref-pane[data-p="c"] pre {
+  margin: 0; max-height: 560px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.ref-pane[data-p="c"] pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
+@media (min-width: 1024px) {
+  .ref-demo {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+    background: linear-gradient(90deg, var(--rd-s) calc(50% - 0.5px), var(--rd-r) calc(50% - 0.5px) calc(50% + 0.5px), var(--rd-p) calc(50% + 0.5px));
+  }
+  .ref-tabs { display: none; }
+  /* Flex columns: no margin collapsing, so both panes start their content on the same line. */
+  .ref-demo .ref-pane, .ref-demo .ref-pane[data-off] { display: flex; flex-direction: column; }
+  .ref-demo .ref-pane > * { margin-top: 0 !important; }
+  /* interactive: its own top spacing (g-play margin and padding, the figure's
+     margin) would push the preview 67px below the code. Reference only. */
+  .ref-demo .ref-pane[data-p="v"] .ux-fs > .g-play { margin-top: 0; padding-top: 0; }
+  .ref-demo .ref-pane[data-p="v"] .g-play > .garden-ui:first-child { margin-top: 0; }
+  .ref-pane[data-p="c"] { grid-column: 1; grid-row: 1; }
+  .ref-pane[data-p="v"] { grid-column: 2; grid-row: 1; }
+  .ref-pane-h { display: block; font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: var(--rd-m); margin: 0 0 10px !important; }
+  /* Code starts on the same line as the preview: no pre padding or frame on top. */
+  .ref-pane[data-p="c"] pre { padding: 0 4px 4px 0; background: transparent; border: 0; }
+  .ref-pane[data-p="c"] .ux-cb > :not(pre) { display: none; }
+}
+@media (max-width: 1023px) {
+  .ref-pane[data-p="c"] pre { padding-right: 56px; }
+  .ref-demo-in .toc-mobile-trigger { opacity: 0; visibility: hidden; pointer-events: none; }
+}
+
+/* figure reference page: the drawing needs room, so the example stacks
+   (preview on top, full width; code below). Scoped to the reference demo;
+   figures in articles are untouched. */
+@media (min-width: 1024px) {
+  .ref-demo[data-name="figure"] { grid-template-columns: minmax(0, 1fr); background: var(--rd-p); }
+  .ref-demo[data-name="figure"] .ref-pane[data-p="v"] { grid-column: 1; grid-row: 1; }
+  .ref-demo[data-name="figure"] .ref-pane[data-p="c"] { grid-column: 1; grid-row: 2; background: var(--rd-s); border-top: 1px solid var(--rd-r); }
+}

package/app/styles/shell.css

@@ -129,6 +129,10 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-year > h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:40px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-strong);display:flex;align-items:baseline;gap:10px}
 .sh-year > h2 .n{font:400 var(--fs-meta)/1 var(--sans);color:var(--muted)}
 .sh-year[hidden],.sh-row[hidden]{display:none}
+/* Home list dates drop the year in the current year, so the track is fixed to the locale's longest label
+   (zh「2025 年 12 月 19 日」≈ 7.1em, en "May 28, 2025" ≈ 4.9em at the row's 17px) and every title starts at the same x. */
+:root{--sh-date-track:7.5em}
+:root:lang(en){--sh-date-track:5.5em}
 .sh-rows{list-style:none;margin:0;padding:0}
 .sh-row{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:4px 20px;padding:18px 0 19px;border-bottom:1px solid var(--rule)}
 .sh-row time{grid-row:1;font-size:var(--fs-small);line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap}
@@ -144,6 +148,7 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-row .series{font-weight:400;color:var(--muted);font-size:var(--fs-meta);margin-left:8px;white-space:nowrap}
 .sh-row:hover h3 a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
 .sh-row h3 a{transition:color .15s ease}
+.sh-home-grid .sh-row{grid-template-columns:var(--sh-date-track) minmax(0,1fr) auto}
 .is-compact .sh-row{padding:11px 0 12px}
 .is-compact .sh-row p{display:none}
 .is-compact .sh-row h3{font-weight:500}
@@ -170,8 +175,6 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-feature p{margin:14px 0 0;font-size:var(--fs-body);color:var(--soft)}
 .sh-feature .tags{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:var(--fs-meta);color:var(--muted)}
 .sh-home-grid{display:grid;grid-template-columns:minmax(0,var(--list)) minmax(0,320px);gap:0 72px;justify-content:space-between;align-items:start}
-.sh-home-grid .sh-row{grid-template-columns:minmax(6em,max-content) minmax(0,1fr) auto}
-.sh-home-grid .sh-row time{min-width:6em;font-variant-numeric:tabular-nums}
 .sh-side-list{list-style:none;margin:0;padding:0}
 .sh-side-list li{position:relative;padding:16px 0;border-bottom:1px solid var(--rule)}
 .sh-side-list a{font:600 15px/1.6 var(--sans);color:var(--ink);text-decoration:none}
@@ -394,6 +397,7 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
 /* ===== 专栏 v4: moderate cover, no numbers, dates, link to category ===== */
 .sh-series{display:grid;grid-template-columns:240px minmax(0,760px);gap:0 40px;padding:36px 0;border-top:1px solid var(--rule)}
 .sh-series:first-of-type{border-top:0;padding-top:8px}
+.sh-series.no-cover{grid-template-columns:minmax(0,760px)}
 .sh-series .cover{aspect-ratio:16/9;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;align-self:start}
 .sh-series h2{font:700 var(--fs-h2)/1.3 var(--sans);color:var(--ink);margin:0}
 .sh-series .count{font-size:var(--fs-small);color:var(--muted);margin:6px 0 0}
@@ -426,6 +430,8 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
   .sh-series li a{padding:0}
   .sh-series li time{margin-top:2px}
   .sh-series .tocat{margin-left:0}
+  .sh-series.no-cover{grid-template-columns:minmax(0,1fr)}
+  .sh-series.no-cover h2,.sh-series.no-cover .count{grid-column:1 / -1;grid-row:auto}
 }
 
 .sh-row .incol{grid-column:2;justify-self:start;position:relative;z-index:1;margin-top:4px;font-size:var(--fs-meta);line-height:1.6;color:var(--muted);text-decoration:none}
@@ -443,3 +449,10 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
 a.sh-lang:hover{color:var(--ink)}
 a.sh-lang:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
 .sh-lang.is-disabled{opacity:.55;cursor:default}
+
+/* English pages: Latin system fonts first, Chinese fonts only as fallback
+   (otherwise English text renders in Noto Sans CJK / YaHei). */
+:root:lang(en){
+  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
+  --serif:"Source Serif 4",Georgia,"Times New Roman","Source Han Serif SC","Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;
+}

package/app/tags/page.tsx

@@ -6,26 +6,28 @@ import { articleTagHref, tagCounts } from "../lib/tag-filter";
 import { TagRedirect } from "../components/TagRedirect";
 import { siteDocumentTitle } from "../site.config";
 import { pageAlternates } from "../lib/page-alternates";
+import { siteLang, ui } from "../lib/i18n";
 
 export const metadata = {
   title: siteDocumentTitle,
-  description: "全部标签。",
+  description: ui().tagsDescription,
   alternates: pageAlternates("/tags"),
 };
 
 export default function TagsPage() {
+  const t = ui();
   const tags = tagCounts(posts);
   return (
     <main className="sh-main" id="content">
       <div className="sh-head">
-        <h1>标签</h1>
-        <p className="sh-deck">{tags.length} 个标签，按文章数排序。点一个标签，查看带这个标签的文章。</p>
+        <h1>{t.tagsTitle}</h1>
+        <p className="sh-deck">{siteLang === "en" ? t.tagsDeck(tags.length) : <>{tags.length} 个标签，按文章数排序。点一个标签，查看带这个标签的文章。</>}</p>
       </div>
       <Suspense>
         <TagRedirect />
       </Suspense>
       {tags.length ? (
-        <ul className="sh-tagchips sh-tagindex" aria-label="全部标签">
+        <ul className="sh-tagchips sh-tagindex" aria-label={t.tagsIndexLabel}>
           {tags.map(([tag, count]) => (
             <li key={tag}>
               <Link className="sh-tagchip" href={siteHref(articleTagHref(tag))}>
@@ -35,7 +37,7 @@ export default function TagsPage() {
           ))}
         </ul>
       ) : (
-        <p className="sh-deck">还没有标签。</p>
+        <p className="sh-deck">{t.tagsEmpty}</p>
       )}
     </main>
   );

package/app/thoughts/[slug]/page.tsx

@@ -15,6 +15,7 @@ import {
 } from "../../lib/site";
 import { siteHref } from "../../lib/site-href";
 import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../ui/garden/static-params.mjs";
+import { ui } from "../../lib/i18n";
 
 export function generateStaticParams() {
   return staticParams(thoughts.map((thought) => ({ slug: thought.slug })), { slug: STATIC_PLACEHOLDER });
@@ -72,7 +73,7 @@ export default async function ThoughtPage({
     <main className="page-shell thought-detail-page">
       <Link href={siteHref("/thoughts")} className="back-link">
         <ArrowLeft size={16} />
-        返回随想
+        {ui().backToThoughts}
       </Link>
       <ThoughtCard thought={thought} showPermalink={false} />
       <Webmentions

package/app/thoughts/page/[n]/page.tsx

@@ -37,7 +37,7 @@ export default async function ThoughtsPage({ params }: { params: Promise<{ n: st
   }
   return (
     <main className="page-shell thoughts-page">
-      <PageIntro eyebrow="THOUGHTS / 随想" title={siteConfig.pages.thoughts.title} subtitle={siteConfig.pages.thoughts.subtitle} />
+      <PageIntro eyebrow={ui().thoughtsEyebrow} title={siteConfig.pages.thoughts.title} subtitle={siteConfig.pages.thoughts.subtitle} />
       <ThoughtFeed page={page} />
     </main>
   );

package/app/thoughts/page.tsx

@@ -4,6 +4,7 @@ import { ContentEmptyState } from "../components/ContentEmptyState";
 import { PageIntro } from "../components/PageIntro";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 import { pageAlternates } from "../lib/page-alternates";
+import { ui } from "../lib/i18n";
 
 export const metadata = {
   title: siteDocumentTitle,
@@ -17,7 +18,7 @@ export default function ThoughtsPage() {
   return (
     <main className="page-shell thoughts-page">
       <PageIntro
-        eyebrow="THOUGHTS / 随想"
+        eyebrow={ui().thoughtsEyebrow}
         title={siteConfig.pages.thoughts.title}
         subtitle={siteConfig.pages.thoughts.subtitle}
       />

package/app/ui-parity/page.tsx

@@ -1,16 +1,25 @@
 import Image from "next/image";
 import { ParityInteractions } from "../../ui/react/parity";
+import { siteLang } from "../lib/i18n";
 
 // Internal comparison page (docs/intelligent-ui-parity.md): Garden's renders next
 // to the ChatGPT originals. Kept out of search, so it has no canonical address.
 export const metadata = { robots: { index: false, follow: false } };
 
-const slices = [
+const zhSlices = [
   { label: "商品销售", value: 78.2, color: "#539af8" },
   { label: "平台与营销服务", value: 9.4, color: "#6bc67f" },
   { label: "物流及其他服务", value: 12.4, color: "#ef8b57" },
 ];
 
+const enSlices = [
+  { label: "Product sales", value: 78.2, color: "#539af8" },
+  { label: "Marketplace & marketing", value: 9.4, color: "#6bc67f" },
+  { label: "Logistics & other services", value: 12.4, color: "#ef8b57" },
+];
+
+const slices = siteLang === "en" ? enSlices : zhSlices;
+
 function ring(start: number, sweep: number) {
   const cx = 371;
   const cy = 181;
@@ -51,32 +60,39 @@ export default function UiParityPage() {
       items: [...state.items, { ...slice, path: ring(state.angle, sweep) }],
     };
   }, { angle: -Math.PI / 2, items: [] }).items;
-  const rows = [
-    ["消费者状态", "不选择拼多多的原因", "对应的经济学概念"],
-    ["不知道拼多多更便宜", "没有进行跨平台比价", "信息不对称、搜索成本"],
-    ["知道更便宜，但不放心", "怀疑商品品质、商家或售后", "感知风险、信任成本"],
-    ["知道更便宜，也相信是正品", "习惯使用天猫，不想迁移", "转换成本、消费惯性"],
-  ];
+  const rows = siteLang === "en"
+    ? [
+        ["Consumer state", "Reason not to choose PDD", "Economic concept"],
+        ["Unaware PDD is cheaper", "No cross-platform comparison", "Information asymmetry, search cost"],
+        ["Knows it is cheaper, but hesitant", "Doubts product quality or after-sales", "Perceived risk, trust cost"],
+        ["Knows it is cheaper and authentic", "Used to Tmall, reluctant to switch", "Switching cost, consumer inertia"],
+      ]
+    : [
+        ["消费者状态", "不选择拼多多的原因", "对应的经济学概念"],
+        ["不知道拼多多更便宜", "没有进行跨平台比价", "信息不对称、搜索成本"],
+        ["知道更便宜，但不放心", "怀疑商品品质、商家或售后", "感知风险、信任成本"],
+        ["知道更便宜，也相信是正品", "习惯使用天猫，不想迁移", "转换成本、消费惯性"],
+      ];
   return (
     <main className="garden-ui" lang="en-US" style={{ margin: 0, border: 0, background: "#fff", padding: 32 }}>
       <section id="parity-stat" className="garden-ui-card" style={{ width: 768, marginBottom: 32 }}>
-        <p className="garden-ui-kicker">2025 抖音电商发展数据报告</p>
+        <p className="garden-ui-kicker">{siteLang === "en" ? "2025 Douyin E-Commerce Report" : "2025 抖音电商发展数据报告"}</p>
         <p className="garden-ui-title-2xl">+49%</p>
-        <p className="garden-ui-subtitle">货架场景成交额同比增长</p>
-        <p className="garden-ui-text-sm">统计期为 2024 年 8 月至 2025 年 8 月。</p>
+        <p className="garden-ui-subtitle">{siteLang === "en" ? "Shelf-commerce GMV YoY growth" : "货架场景成交额同比增长"}</p>
+        <p className="garden-ui-text-sm">{siteLang === "en" ? "Measured from Aug 2024 to Aug 2025." : "统计期为 2024 年 8 月至 2025 年 8 月。"}</p>
         <p className="garden-ui-caption">
-          {"抖音电商官方报告，经新华社报道。该增速不能直接代表抖音电商整体 GMV 增速。"}<a id="parity-cite" className="garden-ui-cite" href="https://www.news.cn">
+          {siteLang === "en" ? "Official Douyin E-Commerce report via Xinhua. Does not represent overall GMV growth." : "抖音电商官方报告，经新华社报道。该增速不能直接代表抖音电商整体 GMV 增速。"}<a id="parity-cite" className="garden-ui-cite" href="https://www.news.cn">
             <Image src="https://www.google.com/s2/favicons?domain=www.news.cn&sz=32" alt="" width={12} height={12} unoptimized />
             Xinhua Net
           </a>
         </p>
       </section>
       <section id="parity-card" className="garden-ui-card" style={{ width: 378, marginBottom: 32 }}>
-        <p className="garden-ui-kicker">2025 年淘宝天猫商品索引规模</p>
-        <p className="garden-ui-title-2xl">20 亿+</p>
-        <p className="garden-ui-text-xs">商品条目</p>
+        <p className="garden-ui-kicker">{siteLang === "en" ? "2025 Taobao & Tmall Product Index Scale" : "2025 年淘宝天猫商品索引规模"}</p>
+        <p className="garden-ui-title-2xl">{siteLang === "en" ? "2B+" : "20 亿+"}</p>
+        <p className="garden-ui-text-xs">{siteLang === "en" ? "Product items" : "商品条目"}</p>
         <p className="garden-ui-caption">
-          {"阿里巴巴披露其 AI 搜索推荐系统索引了超过 20 亿商品条目。"}<a className="garden-ui-cite" href="https://www.alibabagroup.com">
+          {siteLang === "en" ? "Alibaba disclosed that its AI search and recommendation system indexes over 2 billion items." : "阿里巴巴披露其 AI 搜索推荐系统索引了超过 20 亿商品条目。"}<a className="garden-ui-cite" href="https://www.alibabagroup.com">
             <Image src="https://www.google.com/s2/favicons?domain=www.alibabagroup.com&sz=32" alt="" width={12} height={12} unoptimized />
             Alibaba Group
           </a>
@@ -84,7 +100,7 @@ export default function UiParityPage() {
       </section>
       <section id="parity-pie" className="garden-ui-pie" style={{ width: 742, marginBottom: 32 }}>
         <div className="garden-ui-pie-chart">
-          <svg viewBox="0 0 742 400" role="img" aria-label="收入结构">
+          <svg viewBox="0 0 742 400" role="img" aria-label={siteLang === "en" ? "Revenue mix" : "收入结构"}>
             {arcs.map((arc) => <path key={arc.label} d={arc.path} fill={arc.color} />)}
           </svg>
           <ul className="garden-ui-legend">
@@ -93,7 +109,7 @@ export default function UiParityPage() {
             ))}
           </ul>
         </div>
-        <p className="garden-ui-pie-note">京东集团2025财年；商品与服务收入的会计确认方式不同。</p>
+        <p className="garden-ui-pie-note">{siteLang === "en" ? "JD.com FY2025; product and service revenues use different accounting recognition." : "京东集团2025财年；商品与服务收入的会计确认方式不同。"}</p>
       </section>
       <section id="parity-table" style={{ width: 768, marginBottom: 32 }}>
         <table className="garden-ui-table" style={{ tableLayout: "fixed" }}>
@@ -113,16 +129,16 @@ export default function UiParityPage() {
         </table>
       </section>
       <section id="parity-flow" className="garden-ui-card garden-ui-flow" style={{ width: 768 }}>
-        <p>丰富的商家与商品供给</p>
+        <p>{siteLang === "en" ? "Broad merchant and product supply" : "丰富的商家与商品供给"}</p>
         <Arrow />
-        <p>吸引更多具有不同需求的消费者</p>
+        <p>{siteLang === "en" ? "Attracts consumers with diverse needs" : "吸引更多具有不同需求的消费者"}</p>
         <Arrow />
-        <p>更大的潜在成交机会吸引商家</p>
+        <p>{siteLang === "en" ? "Larger GMV opportunity attracts merchants" : "更大的潜在成交机会吸引商家"}</p>
         <Arrow />
-        <p>更丰富的供给与交易数据</p>
+        <p>{siteLang === "en" ? "Richer supply and transaction data" : "更丰富的供给与交易数据"}</p>
         <Loop />
       </section>
-      <ParityInteractions />
+      {siteLang === "en" ? <ParityInteractions lang="en" /> : <ParityInteractions />}
     </main>
   );
 }