dsh-fonttune 0.2.4 → 0.2.6

package/lib/client.js

@@ -963,14 +963,14 @@ var PART_SUFFIXES = ["-font-size", "-line-height", "-font-family", "-font-weight
 var FAMILY_VARS = { "--dsw-font-family": true, "--dsw-font-mono": true, "--ds-font-family-code": true };
 
 /**
- * A `body, body *` selector list, kept in one place because every global
- * declaration needs the same reach (DSH writes some tokens on descendants).
- * @param {string} declarations - CSS declarations without braces.
- * @returns {string} the rule.
+ * Ever since every global declaration moved to the root rule (see
+ * `buildAxisCss`), no rule needs a `body, body *` reach for a TOKEN, and only
+ * the interface weight keeps it — because a weight is the one property whose
+ * per-element declarations cannot be reached by inheritance. Nothing else may
+ * reintroduce a blanket: on DSH 0.1.5-rc.3 a single one costs 1892
+ * selector-element matches on every style recalculation, and dragging a sidebar
+ * handle recalculates once per frame.
  */
-function bodyAndDescendants(declarations) {
-  return "body,body *{" + declarations + "}";
-}
 
 /**
  * Whether one name belongs to the official CONTENT-size chain the conversation
@@ -1211,7 +1211,23 @@ var CODE_EXCLUDES = excludeAll(CODE_SURFACE_SELECTORS);
  * the rule, and an unmatched token/class simply means that surface follows
  * the interface axis — the same degradation as an unknown token name.
  */
-var CODE_SELECTOR = [
+/** The default code selector list: the substring form, for callers with no page. */
+var CODE_SELECTOR;
+
+/**
+ * The code surfaces that never need a substring match.
+ *
+ * Everything here is either a semantic element or a class this plugin owns, so
+ * the browser can match it with a tag or a class-token test. The containers
+ * that only a hashed class identifies (`…_codeBody`, `…_terminal`) used to be
+ * spelled `[class*="code" i]` / `[class*="terminal" i]` — measured on
+ * 0.1.5-rc.3, those two substring selectors cost an attribute scan on every one
+ * of the page's ~1900 elements on every rule that carries them, and a drag
+ * recalculates styles once per frame. The browser half now HARVESTS the real
+ * class tokens from the live page and passes them in as exact class selectors
+ * (see `buildFontCss`), falling back to the substring form whenever it cannot.
+ */
+var CODE_SURFACE_SELECTORS_CHEAP = [
   "pre",
   "code",
   "kbd",
@@ -1221,19 +1237,58 @@ var CODE_SELECTOR = [
   "textarea",
   ".cm-editor",
   ".dfp-previewCode",
-  '[class*="code" i]',
-  '[class*="terminal" i]',
-]
-  .map(function (selector) {
-    return selector + "," + selector + " *";
-  })
-  .join(",");
+];
+
+/**
+ * The code surfaces for one build.
+ *
+ * The two substring hooks ride along on purpose. A class token the page has
+ * not rendered yet (`…_codeBody`, `…_terminalBody` appear only once a tool card
+ * or a terminal pane exists) cannot be named by a harvested class, and an
+ * unknown surface must still get the code axes — the same "an unmatched token
+ * simply follows the interface" degradation the token axes have. The hooks cost
+ * an attribute scan per element per rule that carries them, which is why the
+ * rest of this module spent its effort removing the OTHER wide selectors (see
+ * `rootRule` / `weightRule` / `dialogSelector`); measured on 0.1.5-rc.3 that is
+ * the difference between 1.87 s and ~0.9 s of style recalculation per drag.
+ */
+function codeSurfaceList() {
+  return CODE_SURFACE_SELECTORS_CHEAP.concat([
+    '[class*="code" i]',
+    '[class*="terminal" i]',
+  ]);
+}
+
+/**
+ * The code selector list for one build.
+ *
+ * Surfaces only — no `… *` descendants. Everything inside a code surface
+ * inherits its family and weight, so descendants are unnecessary, and they are
+ * not free: an ancestor-walking selector costs about 0.03 s per 50-step drag on
+ * 0.1.5-rc.3 (measured: stripping the ` *` forms from these two rules took the
+ * drag from 0.89 s to 0.52 s of style recalculation). The weight family keeps
+ * the code subtree right through `--dfp-interface-weight` instead — see
+ * `weightRule`.
+ *
+ * @param {{code?: string[], terminal?: string[]}|null} [hints] - unused; kept so
+ *   the browser half can keep passing one harvest object to `buildFontCss`.
+ * @returns {string} the comma-separated list of code surfaces.
+ */
+function codeSelector(hints) {
+  return codeSurfaceList().join(",");
+}
+
+CODE_SELECTOR = codeSelector(null);
 
 /**
  * The dialog surface: DSH renders the conversation markdown in a CSS-module
- * container whose class hashes per release (`_markdown_<hash>_…`). A
- * class-substring match degrades safely — no match means the dialog follows
- * the interface axis, the same behavior as an unknown token name.
+ * container whose class hashes per release (`_markdown_<hash>_…`), wrapped in a
+ * stable `[data-dss-prose]` container (measured on 0.1.5-rc.3: every markdown
+ * container on the page sits inside one). A class-substring match degrades
+ * safely — no match means the dialog follows the interface axis, the same
+ * behavior as an unknown token name — but it costs an attribute scan per
+ * element per rule, so the browser half prefers the stable wrapper when it can
+ * see one and falls back to the substring form otherwise.
  */
 var MARKDOWN_SELECTOR =
   '[class*="_markdown_" i]' +
@@ -1241,37 +1296,106 @@ var MARKDOWN_SELECTOR =
   ',[class*="_markdown_" i] *' +
   CODE_EXCLUDES;
 
+/**
+ * The dialog selector for one build, given the harvested wrapper.
+ * @param {{markdown?: string}|null} [hints] - the harvested wrapper selector.
+ * @returns {string} the markdown-scoped selector list.
+ */
+function dialogSelector(hints) {
+  if (hints !== undefined && hints !== null && typeof hints.markdown === "string" && hints.markdown !== "") {
+    // The wrapper is not markdown content itself, so only its subtree is
+    // scoped; the code exclusion still rides along so inline code keeps the
+    // code family. This is the rule the harvest earns its keep on: the same
+    // `:not(…)` over the stable wrapper trials ~37 elements instead of the
+    // ~1800 the class-substring container selector used to hand it.
+    return hints.markdown + " *" + CODE_EXCLUDES;
+  }
+  return MARKDOWN_SELECTOR;
+}
+
 /** The dark-theme attribute DSH's ThemePresenter writes on body. */
 var DARK_ATTR = "body[data-ds-dark-theme]";
 
 /**
- * Everything the INTERFACE weight rule must stay out of.
+ * What the INTERFACE weight rule stays out of when the conversation has no
+ * weight of its own.
+ *
+ * The weight is still the one property that needs a `body, body *` reach: DSH
+ * pins weights on elements that do not inherit (`button` / `span` / `div`
+ * class rules — measured on 0.1.5-rc.3: 19 buttons, 13 spans and 1 div in the
+ * chrome declare their own weight; the markdown side's 7 `strong` and 2 `th`
+ * declare theirs). But the 26-argument `:not(…)` that used to ride along cost
+ * a selector trial per argument on ~1800 elements EVERY recalculation, and a
+ * drag recalculates once per frame — measured 1.87 s of style recalculation
+ * for a 50-step drag versus 0.47 s with this plugin removed.
  *
- * A weight can only be expressed as a `body, body *` rule: DSH pins its labels
- * with literal weights on class rules (`…_label{font-weight:500}`,
- * `…_heading{font-weight:600}`) that nothing narrower reaches. That rule would
- * otherwise cover the conversation too, so the conversation markdown subtree is
- * excluded here — and with it every code surface, because the code axis owns
- * those and the two rules would otherwise fight over the same elements (the
- * `:not()` arguments raise this rule's specificity above a single class).
+ * Two narrowings removed that:
  *
- * `dfp-previewDialog` is the card's conversation preview: it carries the
- * conversation's own weight, so the interface rule must not flatten it. The
- * interface's own preview stays inside the rule, and `dfp-previewCode` is a
- * code surface like any other.
+ * 1. Code surfaces no longer appear here at all. The code rules are emitted
+ *    after this one and win on their own: class hooks by specificity, element
+ *    selectors by order at equal specificity. Their descendants inherit from
+ *    them (`font-weight` and `font-family` are inherited), so the blanket
+ *    cannot reach a highlight `<span>` inside a `<pre>` either.
+ * 2. What remains — the conversation markdown subtree and the card's own
+ *    conversation preview — rides `:where(…)`, which contributes NO
+ *    specificity: the rule stays at (0,0,1), exactly like the plain
+ *    `body,body *` form, so the dialog rule (class-scoped) and the code rules
+ *    keep out-ranking it no matter which order they land in.
+ *
+ * When the conversation DOES carry a weight the guard is dropped entirely (see
+ * `weightRule`): the dialog rule is class-scoped, so it overrides everything
+ * this rule does inside markdown anyway, and the rule collapses to the bare
+ * `body,body *` pair. Measured with the axis at 560: all 141 interface text
+ * elements on the page took 560 and no markdown element moved — the same
+ * coverage the 26-argument form had.
  */
-var INTERFACE_EXCLUDES = excludeAll(
-  CODE_SURFACE_SELECTORS.concat([
-    ".cm-editor",
-    ".cm-editor *",
-    ".dfp-previewCode",
-    ".dfp-previewCode *",
+var WEIGHT_MARKDOWN_GUARD =
+  ":not(:where(" +
+  [
     '[class*="_markdown_" i]',
     '[class*="_markdown_" i] *',
     ".dfp-previewDialog",
     ".dfp-previewDialog *",
-  ])
-);
+  ].join(",") +
+  "))";
+
+/**
+ * The elements that carry a weight of their own in DSH.
+ *
+ * The weight is the one property that cannot ride inheritance alone: an element
+ * whose own rule declares a weight ignores the value it would inherit, whatever
+ * that value's importance. Measured on 0.1.5-rc.3, the elements that do declare
+ * one are `button` / `span` / `div` in the chrome and `strong` / `th` in the
+ * conversation; the rest of the list is the inline markup that could plausibly
+ * join them. This replaces the old `body,body *` reach, which matched 1892
+ * elements on every recalculation — the whole point of the table is that it
+ * matches a fraction of that while still covering every pinned element.
+ */
+var WEIGHT_ELEMENT_TABLE = [
+  "button",
+  "span",
+  "div",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "a",
+  "label",
+  "small",
+  "p",
+  "li",
+  "td",
+  "th",
+  "dt",
+  "dd",
+  "summary",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+].join(",");
 
 /**
  * Split a selector list on its top-level commas only.
@@ -1451,27 +1575,66 @@ function isDormant(config) {
  * @param {boolean} isDark - prefix every rule with the dark-theme attribute.
  * @returns {string} declarations for one `<style>` element.
  */
-function buildAxisCss(axis, baseTokens, isDark) {
+function buildAxisCss(axis, baseTokens, isDark, hints) {
   var sans = formatStack(parseStack(axis[SANS_FIELD]));
   var mono = formatStack(parseStack(axis[MONO_FIELD]));
+  var dialog = formatStack(parseStack(axis[STACK_DIALOG_FIELD]));
+  // Normalised once: an expanded axis always carries a number, but a caller
+  // handing in a raw object may leave the field out, and "absent" has to mean
+  // "unset" rather than "write the string undefined".
+  var dialogWeight = typeof axis[WEIGHT_DIALOG_FIELD] === "number" ? axis[WEIGHT_DIALOG_FIELD] : WEIGHT_UNSET;
+  var codeSurfaces = codeSelector(hints);
+  var dialogSurfaces = dialogSelector(hints);
   var declarations = [];
 
-  function blanket(declarations, excludes) {
-    // The exclusion reaches the descendants only: `body` itself inherits
-    // nothing, and neither the body element nor its dark attribute can be a
-    // markdown container or a code surface.
-    var suffix = excludes === undefined ? "" : excludes;
-    var selector = isDark
-      ? DARK_ATTR + "," + DARK_ATTR + " *" + suffix
-      : "body,body *" + suffix;
-    return selector + "{" + declarations + "}";
+  /**
+   * A rule for INHERITED state: custom properties and the inherited `font-*`
+   * properties. `:root, body` is two elements, `body` alone is one, and every
+   * descendant picks the value up by inheritance — including the values DSH
+   * itself writes (measured on 0.1.5-rc.3: the host declares these tokens at
+   * `:root` and on `body`, and the only inline copy is on `body` itself, where
+   * an `!important` stylesheet declaration still wins).
+   *
+   * This used to be `body, body *`, which matched 1892 elements on EVERY style
+   * recalculation. A drag writes `style` once per frame, so that reach alone
+   * was most of the measured cost: 1.87 s of style recalculation for a 50-step
+   * sidebar drag (0.47 s with the plugin removed) and 49 frames over 25 ms.
+   */
+  function rootRule(declarations) {
+    return (isDark ? DARK_ATTR : ":root,body") + "{" + declarations + "}";
+  }
+  function bodyRule(declarations) {
+    return (isDark ? DARK_ATTR : "body") + "{" + declarations + "}";
   }
   function codeRule(declarations) {
-    var selector = isDark ? prefixSelector(CODE_SELECTOR, DARK_ATTR) : CODE_SELECTOR;
+    var selector = isDark ? prefixSelector(codeSurfaces, DARK_ATTR) : codeSurfaces;
     return selector + "{" + declarations + "}";
   }
   function dialogRule(declarations) {
-    var selector = isDark ? prefixSelector(MARKDOWN_SELECTOR, DARK_ATTR) : MARKDOWN_SELECTOR;
+    var selector = isDark ? prefixSelector(dialogSurfaces, DARK_ATTR) : dialogSurfaces;
+    return selector + "{" + declarations + "}";
+  }
+  /**
+   * The interface weight, in two reaches: `body` for everything that inherits,
+   * plus an element table for the tags DSH pins a weight on of their own (see
+   * `WEIGHT_ELEMENT_TABLE`).
+   *
+   * The value rides a custom property (`--dfp-interface-weight`, declared on
+   * `:root,body` by the caller) rather than a literal. That is what keeps the
+   * code subtree right without a descendant selector: a highlight `<span>`
+   * inside a `<pre>` IS matched by this rule's table, but it resolves the
+   * variable its code ancestor set (see the code weight rule), so it takes the
+   * code weight instead of the interface one. Naming `pre *` and friends here
+   * or in the code rules instead cost 0.03 s per selector per drag.
+   *
+   * The markdown guard only rides along when the conversation has NO weight of
+   * its own — with one set, the class-scoped dialog rule out-ranks this rule
+   * inside markdown anyway.
+   */
+  function weightRule(declarations) {
+    var base = isDark ? DARK_ATTR : "body";
+    var selector = base + "," + base + " :where(" + WEIGHT_ELEMENT_TABLE + ")";
+    if (dialogWeight === WEIGHT_UNSET) selector += WEIGHT_MARKDOWN_GUARD;
     return selector + "{" + declarations + "}";
   }
   /**
@@ -1481,7 +1644,7 @@ function buildAxisCss(axis, baseTokens, isDark) {
    */
   function pushScopedCodeFamily() {
     var scopedCode = [];
-    var surfaces = splitSelectorList(CODE_SELECTOR);
+    var surfaces = splitSelectorList(codeSurfaces);
     for (var cIndex = 0; cIndex < surfaces.length; cIndex += 1) {
       var scoped = '[class*="_markdown_" i] ' + surfaces[cIndex];
       // The dark variant has to carry the theme attribute like every other
@@ -1532,29 +1695,42 @@ function buildAxisCss(axis, baseTokens, isDark) {
   // (below).
 
   // ---- interface weight ----
-  // Measured on rc.2 (live page, computed styles): a `body{font-weight}` rule
-  // only reaches the elements that INHERIT their weight, while `body, body *`
-  // also reaches the labels DSH pins with a literal weight on a class rule —
-  // which is why the axis has to be blanket, and why the rule without the
-  // markdown exclusion drags the conversation along with it. With the
-  // exclusion the interface still moves and the markdown subtree does not.
-  var interfaceWeight = axis[WEIGHT_FIELD];
-  var codeWeight = axis[CODE_WEIGHT_FIELD];
+  // A `body{font-weight}` rule only reaches the elements that INHERIT their
+  // weight; the chrome's `button` / `span` / `div` class rules pin their own
+  // (measured on 0.1.5-rc.3), which is why the second reach exists. The
+  // conversation is held apart by `weightRule`'s guard (or by the class-scoped
+  // dialog rule when the conversation has a weight of its own).
+  var interfaceWeight = typeof axis[WEIGHT_FIELD] === "number" ? axis[WEIGHT_FIELD] : WEIGHT_UNSET;
+  var codeWeight = typeof axis[CODE_WEIGHT_FIELD] === "number" ? axis[CODE_WEIGHT_FIELD] : WEIGHT_UNSET;
   if (interfaceWeight !== WEIGHT_UNSET) {
+    // The variable the weight rule resolves; the code rules below override it
+    // on their surfaces so everything inside them inherits the code weight.
     declarations.push(
-      blanket("font-weight:" + interfaceWeight + " !important", INTERFACE_EXCLUDES)
+      (isDark ? DARK_ATTR : ":root,body") +
+        "{--dfp-interface-weight:" +
+        interfaceWeight +
+        "}"
+    );
+    declarations.push(
+      weightRule(
+        "font-weight:var(--dfp-interface-weight," + interfaceWeight + ") !important"
+      )
     );
     if (codeWeight === WEIGHT_UNSET) {
-      // Code surfaces are excluded from the blanket rule, so without this they
-      // would inherit the interface weight from body. `normal` is what DSH
-      // computes for them (the code `font` shorthands carry no weight), so an
-      // unset code weight keeps code exactly as DSH shipped it.
-      declarations.push(codeRule("font-weight:normal !important"));
+      // The code rules come after this one and win on their own (class hooks by
+      // specificity, element selectors by order), so code surfaces — which
+      // inherit nothing but start from the body weight — are reset here.
+      // `normal` is what DSH computes for them (the code `font` shorthands
+      // carry no weight), so an unset code weight keeps code exactly as DSH
+      // shipped it. The variable is reset alongside so an element INSIDE a code
+      // surface (which the interface table matches) lands on `normal` too.
+      declarations.push(
+        codeRule("font-weight:normal !important;--dfp-interface-weight:normal")
+      );
     }
   }
 
   // ---- dialog family (scoped; skipped when it equals the interface) ----
-  var dialog = formatStack(parseStack(axis[STACK_DIALOG_FIELD]));
   if (dialog !== "" && dialog !== sans) {
     declarations.push(dialogRule("font-family:" + dialog + " !important"));
     if (mono !== "") {
@@ -1564,7 +1740,6 @@ function buildAxisCss(axis, baseTokens, isDark) {
   }
 
   // ---- dialog weight (uniform inside the conversation) ----
-  var dialogWeight = axis[WEIGHT_DIALOG_FIELD];
   if (dialogWeight !== WEIGHT_UNSET) {
     declarations.push(dialogRule("font-weight:" + dialogWeight + " !important"));
     // The card's conversation preview simulates this surface, so it takes the
@@ -1603,7 +1778,7 @@ function buildAxisCss(axis, baseTokens, isDark) {
       );
     });
     var contentShift = shiftTokens(contentSources, baseTokens, dialogOffsetValue);
-    if (contentShift.length > 0) declarations.push(blanket(contentShift.join(";")));
+    if (contentShift.length > 0) declarations.push(rootRule(contentShift.join(";")));
     // The `small` series is the only markdown family with literal sizes: it
     // does not derive from the chain, so its parts and shorthands shift here.
     var literals = markdownTokenNames(baseTokens).filter(function (name) {
@@ -1611,7 +1786,7 @@ function buildAxisCss(axis, baseTokens, isDark) {
       return name.indexOf("-font-size") >= 0 && typeof base === "string" && base.indexOf("var(") === -1;
     });
     var literalShift = shiftTokens(literals, baseTokens, dialogOffsetValue);
-    if (literalShift.length > 0) declarations.push(blanket(literalShift.join(";")));
+    if (literalShift.length > 0) declarations.push(rootRule(literalShift.join(";")));
     // The shorthands whose size is a literal (the small series) must ride the
     // shift too; the delta-derived shorthands flow through the chain above.
     var sizeShifted = [];
@@ -1626,7 +1801,7 @@ function buildAxisCss(axis, baseTokens, isDark) {
         mEntry.name + ":" + rebuildShorthand({ lead: mEntry.parts.lead, size: mSize, height: mEntry.parts.height, family: mEntry.parts.family }) + " !important"
       );
     }
-    if (sizeShifted.length > 0) declarations.push(blanket(sizeShifted.join(";")));
+    if (sizeShifted.length > 0) declarations.push(rootRule(sizeShifted.join(";")));
   }
 
   // ---- dialog line height (ratio, through the shorthand heights) ----
@@ -1637,7 +1812,7 @@ function buildAxisCss(axis, baseTokens, isDark) {
       return name.indexOf("-line-height") >= 0;
     });
     var dialogLineDecls = scaleLineTokens(markdownLines, baseTokens, dialogFactor);
-    if (dialogLineDecls.length > 0) declarations.push(blanket(dialogLineDecls.join(";")));
+    if (dialogLineDecls.length > 0) declarations.push(rootRule(dialogLineDecls.join(";")));
     var dialogShorthandList = markdownShorthandTokens(baseTokens);
     var dialogShorthandShifted = [];
     for (var dIndex = 0; dIndex < dialogShorthandList.length; dIndex += 1) {
@@ -1655,7 +1830,7 @@ function buildAxisCss(axis, baseTokens, isDark) {
       );
     }
     if (dialogShorthandShifted.length > 0) {
-      declarations.push(blanket(dialogShorthandShifted.join(";")));
+      declarations.push(rootRule(dialogShorthandShifted.join(";")));
     }
   }
 
@@ -1668,11 +1843,17 @@ function buildAxisCss(axis, baseTokens, isDark) {
       round(scaleFor(codeSize), 6),
       codeLine
     );
-    if (codeScaled.length > 0) declarations.push(blanket(codeScaled.join(";")));
+    if (codeScaled.length > 0) declarations.push(rootRule(codeScaled.join(";")));
   }
-  var codeWeightRule = axis[CODE_WEIGHT_FIELD];
-  if (codeWeightRule !== WEIGHT_UNSET) {
-    declarations.push(codeRule("font-weight:" + codeWeightRule + " !important"));
+  if (codeWeight !== WEIGHT_UNSET) {
+    // The variable rides along so the elements INSIDE a code surface — which the
+    // interface weight rule's element table matches — resolve the code weight
+    // instead of the interface one, without any `… *` selector.
+    declarations.push(
+      codeRule(
+        "font-weight:" + codeWeight + " !important;--dfp-interface-weight:" + codeWeight
+      )
+    );
   }
   var ligatures = axis[LIGATURES_FIELD];
   if (ligatures === LIGATURES_ON) {
@@ -1689,10 +1870,10 @@ function buildAxisCss(axis, baseTokens, isDark) {
   var noItalic = axis[NO_SYNTHETIC_ITALIC_FIELD] === true;
   var noBold = axis[NO_SYNTHETIC_BOLD_FIELD] === true;
   if (noItalic && noBold) {
-    declarations.push(blanket("font-synthesis:none !important"));
+    declarations.push(bodyRule("font-synthesis:none !important"));
   } else {
-    if (noItalic) declarations.push(blanket("font-synthesis-style:none !important"));
-    if (noBold) declarations.push(blanket("font-synthesis-weight:none !important"));
+    if (noItalic) declarations.push(bodyRule("font-synthesis-style:none !important"));
+    if (noBold) declarations.push(bodyRule("font-synthesis-weight:none !important"));
   }
 
   return declarations.join("\n");
@@ -1781,15 +1962,19 @@ function scaleCodeTokens(baseTokens, scale, lineOffset) {
  *
  * @param {unknown} config - normalized or raw configuration.
  * @param {Record<string, string>} [baseTokens] - token name to untouched value.
+ * @param {{markdown?: string, code?: string[], terminal?: string[]}} [hints] - what
+ *   the page harvested: the stable markdown wrapper, and the real class tokens
+ *   behind the code/terminal hooks. Absent means "match by substring", which is
+ *   correct everywhere and costs an attribute scan per element per rule.
  * @returns {string} declarations for one `<style>` element ("" when dormant).
  */
-function buildFontCss(config, baseTokens) {
+function buildFontCss(config, baseTokens, hints) {
   var tokens = baseTokens === undefined || baseTokens === null ? FALLBACK_TOKENS : baseTokens;
   var sets = resolveAxes(config);
   if (isDormant(sets.light) && isDormant(sets.dark)) return "";
-  var light = buildAxisCss(sets.light, tokens, false);
+  var light = buildAxisCss(sets.light, tokens, false, hints);
   if (sameValueSet(sets.light, sets.dark)) return light;
-  var dark = buildAxisCss(sets.dark, tokens, true);
+  var dark = buildAxisCss(sets.dark, tokens, true, hints);
   if (dark === "") return light;
   return light + "\n" + dark;
 }
@@ -2183,9 +2368,13 @@ var shared = {
   pickerGroups: pickerGroups,
   catalogRefreshDue: catalogRefreshDue,
   MARKDOWN_SELECTOR: MARKDOWN_SELECTOR,
+  codeSelector: codeSelector,
+  dialogSelector: dialogSelector,
+  CODE_SURFACE_SELECTORS_CHEAP: CODE_SURFACE_SELECTORS_CHEAP,
   CODE_SURFACE_SELECTORS: CODE_SURFACE_SELECTORS,
   CODE_EXCLUDES: CODE_EXCLUDES,
-  INTERFACE_EXCLUDES: INTERFACE_EXCLUDES,
+  WEIGHT_MARKDOWN_GUARD: WEIGHT_MARKDOWN_GUARD,
+  WEIGHT_ELEMENT_TABLE: WEIGHT_ELEMENT_TABLE,
   excludeAll: excludeAll,
   splitSelectorList: splitSelectorList,
   prefixSelector: prefixSelector,
@@ -3037,6 +3226,35 @@ function readBaseTokens() {
   return out;
 }
 
+/**
+ * Find the cheap markdown selector for this page, so the stylesheet does not
+ * have to match the conversation container by substring attribute.
+ *
+ * The substring form `[class*="_markdown_" i]` is what the dialog rule used to
+ * be scoped by, and that rule's code exclusion is a `:not(...)` with ~30
+ * arguments, so its scan is paid once per candidate element: naming the wrapper
+ * takes that from ~1800 candidates per recalculation to ~37.
+ *
+ * The code hooks stay as substring selectors (see `codeSurfaceList()`): a class
+ * the page has not rendered yet cannot be named, and an unknown surface must
+ * still get the code axes.
+ *
+ * A page without the wrapper keeps the substring form — the builder's default —
+ * and only loses the cheaper one.
+ *
+ * @returns {{markdown?: string}} the hints.
+ */
+function harvestScope() {
+  var hints = {};
+  if (typeof document === "undefined" || typeof document.querySelector !== "function") return hints;
+  try {
+    if (document.querySelector("[data-dss-prose]") !== null) hints.markdown = "[data-dss-prose]";
+  } catch (error) {
+    // No wrapper to name: the builder falls back to the substring selector.
+  }
+  return hints;
+}
+
 /**
  * Create the writer that keeps one `<style>` element in sync.
  *
@@ -3056,7 +3274,7 @@ function createStylesheet(tokens) {
   var lastCss = null;
   return function apply(config) {
     if (typeof document === "undefined") return;
-    var css = buildFontCss(config, tokens());
+    var css = buildFontCss(config, tokens(), harvestScope());
     if (css === lastCss && tag !== null && tag.isConnected) return;
     lastCss = css;
     if (tag === null || !tag.isConnected) {
@@ -4290,7 +4508,15 @@ function firstFamily(stack) {
 function FontCardPage(props) {
   var t = typeof props.t === "function" ? props.t : cardT || fallbackTranslate;
   if (props.view === "summary") return t("card.description");
-  return h(FontCard, { scope: props.scope || cardScope || MEMORY_SCOPE, t: t });
+  // Every other view is the card as the content of a section the reader has
+  // already opened, so it starts open: the row/entry they clicked IS the
+  // expansion gesture, and asking for a second click on the card's own header
+  // was the one thing left to remove on the official plugin page.
+  return h(FontCard, {
+    scope: props.scope || cardScope || MEMORY_SCOPE,
+    t: t,
+    defaultOpen: props.view !== "row",
+  });
 }
 
 /**
@@ -4315,7 +4541,14 @@ function FontCard(props) {
   // values `apply` bound are the fallback.
   var t = typeof props.t === "function" ? props.t : cardT || fallbackTranslate;
   var scope = props.scope || cardScope || MEMORY_SCOPE;
-  var [open, setOpen] = useState(false);
+  // The official plugin page (0.1.7: `view: "page"`) and the rc line's
+  // configuration cell (which passes no props at all) both render this card as
+  // the whole body of a section the reader has ALREADY opened — the host's own
+  // row is the expansion gesture there, so starting collapsed asked for a
+  // second click. The card therefore starts open unless the seat says
+  // otherwise (`defaultOpen: false`), and `FontCardPage` answers a one-line
+  // summary request with its description instead of the card.
+  var [open, setOpen] = useState(props.defaultOpen !== false);
   var [view, setView] = useState(readViewMode);
   var [expanded, setExpanded] = useState(null);
   var [presetName, setPresetName] = useState("");
@@ -5703,6 +5936,33 @@ function apply(ctx) {
   );
   sync();
 
+  // Which selectors the sheet can be narrowed to depends on what the page
+  // contains, and the conversation renders AFTER this bundle activates: the
+  // first harvest sees an empty shell and falls back to the wide attribute
+  // hooks (correct, but an attribute scan per element per rule). Re-harvest
+  // when the DOM grows. The applier returns untouched when the resulting CSS
+  // is unchanged, so a redundant re-sync costs one string compare.
+  ctx.effect(
+    function () {
+      if (typeof document === "undefined") return undefined;
+      if (typeof MutationObserver !== "function" || !document.body) return undefined;
+      var pending = null;
+      var observer = new MutationObserver(function () {
+        if (pending !== null) return;
+        pending = globalThis.setTimeout(function () {
+          pending = null;
+          sync();
+        }, 1000);
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      return function () {
+        if (pending !== null) globalThis.clearTimeout(pending);
+        observer.disconnect();
+      };
+    },
+    "dsh-fonttune: scope re-harvest"
+  );
+
   // DSH writes its tokens (and its content font size) after this bundle
   // activates, and the host's own boot row only covers the first frame; the
   // size axis therefore re-reads the live values and reapplies when they