hd-garden 0.14.12 → 0.14.13

package/ui/garden/picker-placement.mjs

@@ -56,6 +56,85 @@ export function viewportRect(win = globalThis) {
   return rect(0, 0, width, height);
 }
 
+/**
+ * Typora chrome that can cover a position:fixed #ty-auto-suggest (z-index 10).
+ * `header` is z-index 900; mac-seamless `titlebar` sits at the top of the same
+ * document; the editor `content` box is already below that chrome.
+ */
+export const TYPORA_CHROME_SELECTORS = [
+  "header",
+  "titlebar",
+  "#top-titlebar",
+  "footer.ty-footer",
+  "#md-searchpanel",
+];
+
+export function intersectRects(a, b) {
+  const left = Math.max(a.left, b.left);
+  const top = Math.max(a.top, b.top);
+  const right = Math.min(a.right, b.right);
+  const bottom = Math.min(a.bottom, b.bottom);
+  return rect(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+}
+
+function bandOverlapsAxis(box, chrome, axis) {
+  if (axis === "horizontal") {
+    return Math.min(box.right, chrome.right) - Math.max(box.left, chrome.left) > box.width * 0.5;
+  }
+  return Math.min(box.bottom, chrome.bottom) - Math.max(box.top, chrome.top) > box.height * 0.5;
+}
+
+/** Shrink a visible box by a chrome rect that covers a top, bottom, or side band. */
+export function subtractOverlappingBand(box, chrome) {
+  if (!box || !chrome || chrome.width <= 0 || chrome.height <= 0) return box;
+  let next = box;
+  if (bandOverlapsAxis(next, chrome, "horizontal") && chrome.top <= next.top + 1 && chrome.bottom > next.top && chrome.bottom < next.bottom) {
+    next = rect(next.left, chrome.bottom, next.width, next.bottom - chrome.bottom);
+  }
+  if (bandOverlapsAxis(next, chrome, "horizontal") && chrome.bottom >= next.bottom - 1 && chrome.top < next.bottom && chrome.top > next.top) {
+    next = rect(next.left, next.top, next.width, chrome.top - next.top);
+  }
+  if (bandOverlapsAxis(next, chrome, "vertical") && chrome.left <= next.left + 1 && chrome.right > next.left && chrome.right < next.right) {
+    next = rect(chrome.right, next.top, next.right - chrome.right, next.height);
+  }
+  if (bandOverlapsAxis(next, chrome, "vertical") && chrome.right >= next.right - 1 && chrome.left < next.right && chrome.left > next.left) {
+    next = rect(next.left, next.top, chrome.left - next.left, next.height);
+  }
+  return next;
+}
+
+function isDisplayed(el, win) {
+  if (!el) return false;
+  const style = win?.getComputedStyle?.(el);
+  if (style && (style.display === "none" || style.visibility === "hidden")) return false;
+  const r = el.getBoundingClientRect?.();
+  return Boolean(r && (r.width > 0 || r.height > 0));
+}
+
+/**
+ * Visible editor box in the same client coordinates as position:fixed.
+ * Typora is one document: #ty-auto-suggest is inside <content> but is
+ * position:fixed to the window, so window (0,0) includes the titlebar/tabs
+ * that paint over the menu (z-index 900 vs 10).
+ */
+export function editorVisibleRect(win = globalThis, doc = win.document) {
+  const viewport = viewportRect(win);
+  if (!doc?.querySelector) return viewport;
+  let box = viewport;
+  const content = doc.querySelector("content");
+  if (content && isDisplayed(content, win)) {
+    const cr = copyRect(content.getBoundingClientRect());
+    if (cr.width > 0 && cr.height > 0) box = intersectRects(box, cr);
+  }
+  for (const selector of TYPORA_CHROME_SELECTORS) {
+    const el = doc.querySelector(selector);
+    if (!isDisplayed(el, win)) continue;
+    box = subtractOverlappingBand(box, copyRect(el.getBoundingClientRect()));
+  }
+  if (box.width < 32 || box.height < 32) return viewport;
+  return box;
+}
+
 export function caretClientRect(win = globalThis) {
   try {
     const selection = win.getSelection?.();
@@ -113,6 +192,7 @@ export function bindGardenPickerPlacement({
   let destroyed = false;
   const teardowns = [];
   let last = null;
+  let restoreStyle = null;
   const watchedImages = new WeakSet();
 
   const handle = { apply, destroy };
@@ -122,13 +202,27 @@ export function bindGardenPickerPlacement({
     return measureMenuIntrinsicSize(container);
   }
 
+  function ensureMenuScroll(style) {
+    if (!style) return;
+    if (!restoreStyle) {
+      restoreStyle = {
+        overflowX: style.overflowX,
+        overflowY: style.overflowY,
+        overscrollBehavior: style.overscrollBehavior,
+      };
+    }
+    style.overflowX = "hidden";
+    style.overflowY = "auto";
+    style.overscrollBehavior = "contain";
+  }
+
   function apply() {
     if (destroyed || applying) return last;
     if (!container.classList?.contains?.("ty-show") || !isGardenMenu(container)) {
       destroy();
       return null;
     }
-    const viewport = (getViewport || viewportRect)(win);
+    const viewport = (getViewport || editorVisibleRect)(win);
     const anchor = getAnchorRect?.() || caretClientRect(win);
     if (!anchor || !viewport?.width || !viewport?.height) return last;
 
@@ -138,11 +232,12 @@ export function bindGardenPickerPlacement({
       const menu = measure();
       const preferredLeft = readPreferredLeft(container, anchor);
       const placed = placePickerMenu({ anchor: copyRect(anchor), viewport, menu, preferredLeft });
+      const style = container.style;
       if (samePlacement(last, placed)) {
+        ensureMenuScroll(style);
         scrollActive(container);
         return last;
       }
-      const style = container.style;
       style.top = `${placed.top}px`;
       style.left = `${placed.left}px`;
       style.right = "auto";
@@ -151,6 +246,7 @@ export function bindGardenPickerPlacement({
       style.minWidth = `${placed.width}px`;
       style.width = `${placed.width}px`;
       style.maxWidth = `${placed.width}px`;
+      ensureMenuScroll(style);
       container.classList.add(GARDEN_PICKER_CLASS);
       container.dataset.gardenPlacement = placed.placement;
       last = placed;
@@ -226,7 +322,15 @@ export function bindGardenPickerPlacement({
     }
     container.classList?.remove?.(GARDEN_PICKER_CLASS);
     if (container.dataset) delete container.dataset.gardenPlacement;
+    const style = container.style;
+    const restore = restoreStyle;
+    if (style && restore) {
+      style.overflowX = restore.overflowX ?? "";
+      style.overflowY = restore.overflowY ?? "";
+      style.overscrollBehavior = restore.overscrollBehavior ?? "";
+    }
     if (bound.get(container) === handle) bound.delete(container);
+    restoreStyle = null;
     last = null;
   }
 

package/ui/garden/player.mjs

@@ -0,0 +1,286 @@
+/**
+ * In-article YouTube / Bilibili players.
+ *
+ * Authors paste a platform video URL on its own line. Only exact hostnames and
+ * recognized video addresses become a player; lookalike domains, in-sentence
+ * links, code, and an explicit `{card}` stay ordinary links or cards.
+ * Short links that need a network hop are not resolved at render time.
+ */
+
+const YOUTUBE_ID = /^[0-9A-Za-z_-]{11}$/u;
+const BVID = /^BV[0-9A-Za-z]{10}$/u;
+const AID = /^\d{1,16}$/u;
+const MAX_START = 24 * 60 * 60;
+
+/** @typedef {{ ok: true, provider: "youtube" | "bilibili", pageUrl: string, playerUrl: string, label: string }} PlayerSuccess */
+/** @typedef {{ ok: false, reason: string }} PlayerFailure */
+/** @typedef {PlayerSuccess | PlayerFailure} PlayerResult */
+
+export const PLAYER_IFRAME_ORIGINS = Object.freeze([
+  "https://www.youtube-nocookie.com",
+  "https://player.bilibili.com",
+]);
+
+/**
+ * @param {string} hostname
+ * @returns {string}
+ */
+export function normalizedHostname(hostname) {
+  return String(hostname ?? "").trim().replace(/\.$/u, "").toLowerCase();
+}
+
+/**
+ * Exact host match, plus an optional `www.` prefix. Never a substring test.
+ * @param {string} hostname
+ * @param  {...string} allowed
+ */
+export function isExactHost(hostname, ...allowed) {
+  const host = normalizedHostname(hostname);
+  return allowed.some((name) => host === name || host === `www.${name}`);
+}
+
+function isYoutubeHost(host) {
+  return isExactHost(host, "youtube.com", "m.youtube.com", "music.youtube.com", "youtu.be", "youtube-nocookie.com");
+}
+
+function isBilibiliHost(host) {
+  const name = normalizedHostname(host);
+  return name === "bilibili.com" || name.endsWith(".bilibili.com");
+}
+
+/**
+ * Bilibili short hosts such as b23.tv need a network redirect to know the
+ * video id. Render time does not follow them; the CLI may expand them.
+ * @param {string} hostname
+ */
+export function isUnsupportedVideoShortHost(hostname) {
+  return isExactHost(hostname, "b23.tv", "bili22.cn", "bili2233.cn", "bili23.cn", "bili33.cn");
+}
+
+function fail(reason) {
+  return { ok: false, reason };
+}
+
+/**
+ * @param {unknown} raw
+ * @returns {URL | null}
+ */
+export function readHttpUrl(raw) {
+  const text = String(raw ?? "").trim();
+  if (!text) return null;
+  let url;
+  try {
+    url = new URL(text);
+  } catch {
+    return null;
+  }
+  if (!["http:", "https:"].includes(url.protocol)) return null;
+  if (url.username || url.password) return null;
+  if (!url.hostname) return null;
+  return url;
+}
+
+function youtubeIdFrom(url) {
+  const host = normalizedHostname(url.hostname);
+  const parts = url.pathname.split("/").filter(Boolean);
+  if (isExactHost(host, "youtu.be")) {
+    return parts.length === 1 ? parts[0] : undefined;
+  }
+  if (url.searchParams.get("v")) return url.searchParams.get("v") ?? undefined;
+  if (parts[0] === "watch" && parts.length === 1) return undefined;
+  if (parts.length === 2 && ["embed", "shorts", "live", "v"].includes(parts[0])) return parts[1];
+  return undefined;
+}
+
+function parseClock(value) {
+  const text = String(value ?? "").trim();
+  if (!text) return undefined;
+  if (/^\d+$/u.test(text)) {
+    const seconds = Number(text);
+    return Number.isInteger(seconds) && seconds > 0 && seconds <= MAX_START ? seconds : undefined;
+  }
+  const match = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/iu.exec(text);
+  if (!match || match[0] === "") return undefined;
+  const hours = Number(match[1] ?? 0);
+  const minutes = Number(match[2] ?? 0);
+  const seconds = Number(match[3] ?? 0);
+  const total = hours * 3600 + minutes * 60 + seconds;
+  return Number.isInteger(total) && total > 0 && total <= MAX_START ? total : undefined;
+}
+
+function youtubeStart(url) {
+  return parseClock(url.searchParams.get("start")) ?? parseClock(url.searchParams.get("t")) ?? parseClock(url.hash.replace(/^#t=/u, ""));
+}
+
+function youtubePageUrl(id, start) {
+  const url = new URL(`https://www.youtube.com/watch?v=${id}`);
+  if (start) url.searchParams.set("t", String(start));
+  return url.toString();
+}
+
+function youtubePlayerUrl(id, start) {
+  const url = new URL(`https://www.youtube-nocookie.com/embed/${id}`);
+  if (start) url.searchParams.set("start", String(start));
+  return url.toString();
+}
+
+function bilibiliIdFrom(url) {
+  const host = normalizedHostname(url.hostname);
+  if (isExactHost(host, "player.bilibili.com")) {
+    const bvid = url.searchParams.get("bvid");
+    const aid = url.searchParams.get("aid");
+    if (bvid && BVID.test(normalizeBvid(bvid))) return { key: "bvid", value: normalizeBvid(bvid) };
+    if (aid && AID.test(aid)) return { key: "aid", value: aid };
+    return undefined;
+  }
+  const match = url.pathname.match(/\/video\/(BV[0-9A-Za-z]{10}|av\d{1,16}|AV\d{1,16})\b/u);
+  if (!match) return undefined;
+  const token = match[1];
+  if (BVID.test(normalizeBvid(token))) return { key: "bvid", value: normalizeBvid(token) };
+  const aid = token.replace(/^av/iu, "");
+  if (AID.test(aid)) return { key: "aid", value: aid };
+  return undefined;
+}
+
+function normalizeBvid(value) {
+  const text = String(value ?? "");
+  return text.length >= 2 ? `BV${text.slice(2)}` : text;
+}
+
+function bilibiliPageUrl(id) {
+  return id.key === "bvid"
+    ? `https://www.bilibili.com/video/${id.value}`
+    : `https://www.bilibili.com/video/av${id.value}`;
+}
+
+function bilibiliPlayerUrl(id) {
+  const url = new URL("https://player.bilibili.com/player.html");
+  url.searchParams.set(id.key, id.value);
+  url.searchParams.set("high_quality", "1");
+  url.searchParams.set("danmaku", "0");
+  url.searchParams.set("autoplay", "0");
+  return url.toString();
+}
+
+/**
+ * @param {unknown} raw
+ * @returns {PlayerResult}
+ */
+export function resolvePlayer(raw) {
+  const url = readHttpUrl(raw);
+  if (!url) return fail("not-http-url");
+  const host = url.hostname;
+  if (isUnsupportedVideoShortHost(host)) return fail("short-link");
+  if (isYoutubeHost(host)) {
+    const id = youtubeIdFrom(url);
+    if (!id || !YOUTUBE_ID.test(id)) return fail("unsupported-youtube-url");
+    const start = youtubeStart(url);
+    return {
+      ok: true,
+      provider: "youtube",
+      pageUrl: youtubePageUrl(id, start),
+      playerUrl: youtubePlayerUrl(id, start),
+      label: "YouTube",
+    };
+  }
+  if (isBilibiliHost(host)) {
+    const id = bilibiliIdFrom(url);
+    if (!id) return fail("unsupported-bilibili-url");
+    return {
+      ok: true,
+      provider: "bilibili",
+      pageUrl: bilibiliPageUrl(id),
+      playerUrl: bilibiliPlayerUrl(id),
+      label: "Bilibili",
+    };
+  }
+  return fail("unsupported-host");
+}
+
+export function isPlayablePlayerUrl(raw) {
+  return resolvePlayer(raw).ok;
+}
+
+function escapeAttribute(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function escapeText(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+/**
+ * Safe player markup. The iframe src is always a whitelisted player URL
+ * produced by resolvePlayer, never the author's raw address.
+ * @param {PlayerSuccess} player
+ * @param {{ title?: string }} [options]
+ */
+export function renderPlayerHtml(player, options = {}) {
+  if (!player?.ok) return "";
+  if (!PLAYER_IFRAME_ORIGINS.some((origin) => player.playerUrl.startsWith(`${origin}/`))) return "";
+  const title = String(options.title ?? "").trim() || `${player.label} video`;
+  const open = player.provider === "youtube" ? "在 YouTube 打开" : "在 Bilibili 打开";
+  return [
+    `<figure class="g-player g-player-${player.provider}">`,
+    `<div class="g-player-frame">`,
+    `<iframe src="${escapeAttribute(player.playerUrl)}" title="${escapeAttribute(title)}" loading="lazy" allow="fullscreen; picture-in-picture; encrypted-media" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`,
+    `</div>`,
+    `<figcaption><a class="ext" href="${escapeAttribute(player.pageUrl)}" target="_blank" rel="noopener noreferrer">${escapeText(open)}</a></figcaption>`,
+    `</figure>`,
+  ].join("");
+}
+
+export function renderPlayerError(message) {
+  const text = String(message ?? "无法嵌入这个视频。请检查链接是否为可播放的 YouTube 或 Bilibili 地址。").trim();
+  return `<p class="g-player-error">${escapeText(text)}</p>`;
+}
+
+function yamlScalar(value) {
+  const text = String(value ?? "").trim();
+  if (!text) return "";
+  const unquoted = text.replace(/^['"]|['"]$/gu, "");
+  return unquoted;
+}
+
+/**
+ * Parse a historical ```embed fence. Playable URLs become players; anything
+ * else is a visible fallback, never an arbitrary iframe.
+ * @param {string} source
+ */
+export function renderLegacyEmbed(source) {
+  const text = String(source ?? "").trim();
+  const urlMatch = /(?:^|\n)\s*url\s*:\s*(\S[^\n]*)/iu.exec(text);
+  const titleMatch = /(?:^|\n)\s*title\s*:\s*([^\n]+)/iu.exec(text);
+  const rawUrl = yamlScalar(urlMatch?.[1] ?? "");
+  const title = yamlScalar(titleMatch?.[1] ?? "");
+  if (!rawUrl) {
+    return renderPlayerError("无法解析这段历史 embed 围栏，请改成单独一行的 YouTube 或 Bilibili 链接。");
+  }
+  const player = resolvePlayer(rawUrl);
+  if (player.ok) return renderPlayerHtml(player, { title });
+  const url = readHttpUrl(rawUrl);
+  if (url) {
+    const label = title || url.toString();
+    return `<p class="g-player-fallback"><a href="${escapeAttribute(url.toString())}" target="_blank" rel="noopener noreferrer">${escapeText(label)}</a></p>`;
+  }
+  return renderPlayerError("无法解析这段历史 embed 围栏里的地址。");
+}
+
+/**
+ * Paste-ready author line for the CLI. Playable URLs are normalized; other
+ * addresses are returned unchanged. Metadata belongs on stderr, not in a fence.
+ * @param {unknown} raw
+ */
+export function authorPasteUrl(raw) {
+  const player = resolvePlayer(raw);
+  if (player.ok) return player.pageUrl;
+  const url = readHttpUrl(raw);
+  return url ? url.toString() : "";
+}

package/ui/garden/rehype-keep-punctuation.mjs

@@ -1,10 +1,26 @@
-/** Keep closing punctuation with the preceding inline formula.
- * KaTeX renders as an atomic inline-block, so CSS line-break / overflow-wrap
- * rules cannot see the formula and the following punctuation as one cluster.
+/** Keep closing punctuation with the preceding inline formula, and with the
+ * last typographic cluster of ordinary prose (text, emoji, emphasis, links).
+ *
+ * KaTeX is an atomic inline-block, so CSS line-break / overflow-wrap cannot
+ * see the formula and the following punctuation as one cluster. ASCII `~`
+ * (U+007E) and the fullwidth / wave tildes are not CSS/Unicode line-end
+ * punctuation either, so they can sit alone after a CJK character or emoji
+ * when `.markdown-body` uses overflow-wrap: anywhere. Cluster only the last
+ * grapheme (ZWJ / variation-selector sequences stay intact) plus a trailing
+ * closing-punctuation run — never a whole paragraph, and never opening
+ * brackets.
+ *
  * Keep KaTeX markup/MathML intact; the outer viewport contains an oversized
  * atomic formula whether or not it has following punctuation.
  */
-export const CLOSING_PUNCTUATION = /^[,.;:!?，。、；：！？）)\]}］｝〉》」』】〕〗〙〛’”'"…]+/u;
+export const CLOSING_PUNCTUATION = /^[,.;:!?，。、；：！？）)\]}］｝〉》」』】〕〗〙〛’”'"…~～〜]+/u;
+export const CLOSING_PUNCTUATION_END = /[,.;:!?，。、；：！？）)\]}］｝〉》」』】〕〗〙〛’”'"…~～〜]+$/u;
+
+const SKIP_PARENTS = new Set(["pre", "code", "kbd", "samp", "script", "style", "textarea", "svg", "math"]);
+const PHRASING = new Set([
+  "a", "abbr", "b", "cite", "code", "em", "i", "kbd", "mark", "q", "s", "samp",
+  "small", "span", "strong", "sub", "sup", "time", "u", "var", "ruby", "rt",
+]);
 
 function classNames(node) {
   const value = node.properties?.className;
@@ -15,27 +31,80 @@ function isInlineKatex(node) {
   return node.type === "element" && classNames(node).has("katex") && !classNames(node).has("katex-display");
 }
 
+function keepSpan(children) {
+  return { type: "element", tagName: "span", properties: { className: ["g-keep-punct"] }, children };
+}
+
+function lastGrapheme(value) {
+  const segments = [...new Intl.Segmenter("und", { granularity: "grapheme" }).segment(value)];
+  return segments.at(-1)?.segment ?? "";
+}
+
+/** Split a trailing [grapheme][spaces][closing punct run] off a text value. */
+export function splitTrailingKeep(value) {
+  const match = String(value ?? "").match(CLOSING_PUNCTUATION_END);
+  if (!match) return null;
+  const before = value.slice(0, -match[0].length);
+  if (!before) return null;
+  const trimmed = before.replace(/[ \t\u00a0]+$/u, "");
+  if (!trimmed) return null;
+  const last = lastGrapheme(trimmed);
+  if (!last) return null;
+  return {
+    head: trimmed.slice(0, -last.length),
+    cluster: last + before.slice(trimmed.length) + match[0],
+  };
+}
+
+function isProtected(node) {
+  return isInlineKatex(node) || ["katex-display", "g-keep-punct", "g-inline-math"].some((name) => classNames(node).has(name));
+}
+
+function canTakeFollowingPunct(node) {
+  if (!node || node.type !== "element") return false;
+  if (isInlineKatex(node)) return true;
+  if (isProtected(node)) return false;
+  return PHRASING.has(node.tagName);
+}
+
 export function keepClosingPunctuation(tree) {
   const walk = (parent) => {
-    if (!Array.isArray(parent?.children) || isInlineKatex(parent) ||
-      ["katex-display", "g-keep-punct", "g-inline-math"].some(name => classNames(parent).has(name))) return;
+    if (!Array.isArray(parent?.children) || isProtected(parent) || SKIP_PARENTS.has(parent.tagName)) return;
     const next = [];
     for (let index = 0; index < parent.children.length; index += 1) {
       const child = parent.children[index];
       walk(child);
       const following = parent.children[index + 1];
-      const match = isInlineKatex(child) && following?.type === "text" ? following.value.match(CLOSING_PUNCTUATION) : null;
-      if (!isInlineKatex(child)) { next.push(child); continue; }
-      next.push({
-        type: "element",
-        tagName: "span",
-        properties: { className: [match ? "g-keep-punct" : "g-inline-math"] },
-        children: match ? [child, { type: "text", value: match[0] }] : [child],
-      });
-      if (!match) continue;
-      const rest = following.value.slice(match[0].length);
-      if (rest) next.push({ type: "text", value: rest });
-      index += 1;
+      const leading = following?.type === "text" ? following.value.match(CLOSING_PUNCTUATION) : null;
+
+      if (child.type === "text") {
+        const split = splitTrailingKeep(child.value);
+        if (!split) { next.push(child); continue; }
+        if (split.head) next.push({ type: "text", value: split.head });
+        next.push(keepSpan([{ type: "text", value: split.cluster }]));
+        continue;
+      }
+
+      if (canTakeFollowingPunct(child) && leading) {
+        next.push(keepSpan([child, { type: "text", value: leading[0] }]));
+        const rest = following.value.slice(leading[0].length);
+        if (rest) next.push({ type: "text", value: rest });
+        index += 1;
+        continue;
+      }
+
+      // Bare inline formulas still get a local overflow viewport.
+      if (isInlineKatex(child)) {
+        next.push({
+          type: "element",
+          tagName: "span",
+          properties: { className: ["g-inline-math"] },
+          children: [child],
+        });
+        continue;
+      }
+
+      next.push(child);
     }
     parent.children = next;
   };

package/ui/preview/dist/garden-ui.css

@@ -2135,16 +2135,51 @@
 .g-compose-grid-item[data-span="4"] { grid-column: span 4; }
 
 .g-compose-icon {
+  --gc-icon-size: 15px;
   display: inline-block;
   flex: 0 0 auto;
-  width: 15px;
-  height: 15px;
+  width: var(--gc-icon-size);
+  height: var(--gc-icon-size);
   color: var(--ink);
   vertical-align: -2px;
 }
-.g-compose-icon[data-size="sm"] { width: 13px; height: 13px; }
-.g-compose-icon[data-size="lg"] { width: 18px; height: 18px; }
-.g-compose-icon[data-size="xl"] { width: 22px; height: 22px; }
+.g-compose-icon[data-size="sm"] { --gc-icon-size: 13px; }
+.g-compose-icon[data-size="lg"] { --gc-icon-size: 18px; }
+.g-compose-icon[data-size="xl"] { --gc-icon-size: 22px; }
+/* Align row-leading icons with the first line of adjacent text/headings rather than the top of half-leading. */
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-text:not([data-size="sm"]):not([data-size="lg"]):not([data-size="xl"])),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-text:first-child:not([data-size="sm"]):not([data-size="lg"]):not([data-size="xl"])),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-content:first-child) {
+  margin-top: max(0px, calc((1lh - var(--gc-icon-size)) / 2));
+}
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-text[data-size="sm"]),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-text[data-size="sm"]:first-child) {
+  margin-top: max(0px, calc((1.3125em - var(--gc-icon-size)) / 2));
+}
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-text[data-size="lg"]),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-text[data-size="lg"]:first-child) {
+  margin-top: max(0px, calc((1.125 * 1lh - var(--gc-icon-size)) / 2));
+}
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-text[data-size="xl"]),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-text[data-size="xl"]:first-child) {
+  margin-top: max(0px, calc((1.25 * 1lh - var(--gc-icon-size)) / 2));
+}
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:not([data-size="xl"]):has(+ .g-compose-h:not([data-size="sm"]):not([data-size="lg"]):not([data-size="xl"])),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:not([data-size="xl"]):has(+ .g-compose-group > .g-compose-h:first-child:not([data-size="sm"]):not([data-size="lg"]):not([data-size="xl"])) {
+  margin-top: max(0px, calc((1.4em - var(--gc-icon-size)) / 2));
+}
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-h[data-size="sm"]),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-h[data-size="sm"]:first-child) {
+  margin-top: max(0px, calc((1.1375em - var(--gc-icon-size)) / 2));
+}
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-h[data-size="lg"]),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-h[data-size="lg"]:first-child) {
+  margin-top: max(0px, calc((1.575em - var(--gc-icon-size)) / 2));
+}
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-h[data-size="xl"]),
+.g-compose-row:not([data-align="center"]):not([data-align="end"]) > .g-compose-icon:has(+ .g-compose-group > .g-compose-h[data-size="xl"]:first-child) {
+  margin-top: max(0px, calc((1.75em - var(--gc-icon-size)) / 2));
+}
 .g-compose-card[data-size="sm"] > .g-compose-icon {
   width: 14px;
   height: 14px;
@@ -2531,6 +2566,9 @@
     width: 100%;
     min-width: 0;
   }
+  .g-compose-row:not([data-wrap="nowrap"]) > .g-compose-icon {
+    margin-top: 0;
+  }
 
   /* Columnized centered rows stretch labels to 100% width, so align-items
      can center arrows but not text. Center direct labels only; explicit