dsh-fonttune 0.4.2 → 0.6.0

package/lib/client.js

@@ -318,6 +318,67 @@ var LINE_HEIGHT_MAX = 160;
 var CODE_LINE_HEIGHT_MIN = -4;
 var CODE_LINE_HEIGHT_MAX = 8;
 
+/* ------------------------------------------------------------------ *
+ * conversation text shaping (measured against DSH's own markdown)
+ * ------------------------------------------------------------------ */
+
+/**
+ * Field carrying the letter-spacing offset in px (0 = DSH's own `normal`).
+ * DSH leaves tracking at `normal` on the markdown scope (measured 2026-10-13), so
+ * the offset can be written as an absolute value: 0 emits no rule at all.
+ */
+var LETTER_SPACING_DIALOG_FIELD = "letterSpacingDialog";
+
+/**
+ * Field carrying the word-spacing offset in px (0 = DSH's own `0px`).
+ * Word spacing is measured 0px on the same scope, so it is an absolute value too.
+ */
+var WORD_SPACING_DIALOG_FIELD = "wordSpacingDialog";
+
+/**
+ * Field carrying the paragraph-gap offset in px, added on top of DSH's own 16px.
+ * The paragraphs' margins are NOT zero on the shipped markdown (first 0/16, the
+ * rest 16/16, headings 32/16 — measured 2026-10-13), so this axis is an offset
+ * built on that baseline rather than an absolute value.
+ */
+var PARAGRAPH_SPACING_DIALOG_FIELD = "paragraphSpacingDialog";
+
+/** Field carrying the first-line indent, in em (0 = DSH's own none). */
+var INDENT_DIALOG_FIELD = "indentDialog";
+
+/**
+ * Field asking for strict CJK line breaking (`line-break:strict`) in the
+ * conversation: no small kana, no dash starting a line. DSH leaves `auto`.
+ */
+var LINE_BREAK_STRICT_FIELD = "lineBreakStrict";
+
+/** Letter-spacing offset range, in px, and its notch (measured: 0.1px is visible). */
+var LETTER_SPACING_MIN = -0.4;
+var LETTER_SPACING_MAX = 2.0;
+var LETTER_SPACING_STEP = 0.1;
+
+/** Word-spacing offset range, in px, and its notch. */
+var WORD_SPACING_MIN = -1.0;
+var WORD_SPACING_MAX = 4.0;
+var WORD_SPACING_STEP = 0.2;
+
+/** Paragraph-gap offset range, in px, over DSH's own 16px. */
+var PARAGRAPH_SPACING_MIN = -8;
+var PARAGRAPH_SPACING_MAX = 24;
+var PARAGRAPH_SPACING_STEP = 1;
+
+/** First-line indent range, in em, and its notch. */
+var INDENT_MIN = 0;
+var INDENT_MAX = 4;
+var INDENT_STEP = 0.25;
+
+/**
+ * The paragraph gap DSH's own markdown ships, in px. Measured on the conversation
+ * scope (2026-10-13): paragraphs carry 16px top/bottom margins, so that is the
+ * baseline every offset is added to.
+ */
+var PARAGRAPH_BASELINE_PX = 16;
+
 /** Ligature modes. */
 var LIGATURES_DEFAULT = 0;
 var LIGATURES_ON = 1;
@@ -343,6 +404,11 @@ var DEFAULTS = {
   lineHeight: LINE_HEIGHT_MIN,
   lineHeightDialog: LINE_HEIGHT_MIN,
   lineHeightCode: 0,
+  letterSpacingDialog: 0,
+  wordSpacingDialog: 0,
+  paragraphSpacingDialog: 0,
+  indentDialog: 0,
+  lineBreakStrict: false,
   codeLigatures: LIGATURES_DEFAULT,
   codeFeatures: "",
   noSyntheticItalic: false,
@@ -374,6 +440,11 @@ var VALUE_FIELDS = [
   CODE_WEIGHT_FIELD,
   LINE_HEIGHT_DIALOG_FIELD,
   CODE_LINE_HEIGHT_FIELD,
+  LETTER_SPACING_DIALOG_FIELD,
+  WORD_SPACING_DIALOG_FIELD,
+  PARAGRAPH_SPACING_DIALOG_FIELD,
+  INDENT_DIALOG_FIELD,
+  LINE_BREAK_STRICT_FIELD,
   LIGATURES_FIELD,
   FEATURES_FIELD,
   NO_SYNTHETIC_ITALIC_FIELD,
@@ -1516,6 +1587,16 @@ function normalizeField(field, value, relative) {
       return clampRatio(value);
     case CODE_LINE_HEIGHT_FIELD:
       return clampLineOffset(value);
+    case LETTER_SPACING_DIALOG_FIELD:
+      return clampSpacing(value, LETTER_SPACING_MIN, LETTER_SPACING_MAX);
+    case WORD_SPACING_DIALOG_FIELD:
+      return clampSpacing(value, WORD_SPACING_MIN, WORD_SPACING_MAX);
+    case PARAGRAPH_SPACING_DIALOG_FIELD:
+      return clampSpacing(value, PARAGRAPH_SPACING_MIN, PARAGRAPH_SPACING_MAX);
+    case INDENT_DIALOG_FIELD:
+      return clampIndent(value);
+    case LINE_BREAK_STRICT_FIELD:
+      return toBool(value);
     case LIGATURES_FIELD:
       return clampLigatures(value);
     case WEIGHT_OFFSETS_FIELD:
@@ -1599,6 +1680,52 @@ function clampWeight(value) {
   return Math.min(WEIGHT_MAX, Math.max(WEIGHT_MIN, weight));
 }
 
+/**
+ * Clamp one spacing offset (letter, word) to its allowed range, in px.
+ *
+ * These axes sit on top of a DSH default that is already zero (`normal` / `0px`,
+ * measured on the conversation scope), so no migration and no baseline is involved:
+ * the offset is written as it stands, and 0 means "emit nothing".
+ * @param {unknown} value - candidate offset.
+ * @param {number} min - the lowest allowed offset.
+ * @param {number} max - the highest allowed offset.
+ * @returns {number} the offset the stylesheet may use.
+ */
+function clampSpacing(value, min, max) {
+  var offset = Number(value);
+  if (!isFinite(offset)) return 0;
+  // Rounded to two decimals: the notches are tenths, and the sum of a few of them
+  // must not turn into 0.30000000000000004 in the emitted CSS.
+  offset = Math.round(offset * 100) / 100;
+  if (offset > max) return max;
+  if (offset < min) return min;
+  return offset;
+}
+
+/**
+ * Clamp the first-line indent to its allowed range, in em.
+ * @param {unknown} value - candidate indent.
+ * @returns {number} the indent the stylesheet may use.
+ */
+function clampIndent(value) {
+  var indent = Number(value);
+  if (!isFinite(indent)) return 0;
+  indent = Math.round(indent * 100) / 100;
+  if (indent > INDENT_MAX) return INDENT_MAX;
+  if (indent < INDENT_MIN) return INDENT_MIN;
+  return indent;
+}
+
+/**
+ * Format a spacing value for CSS, without scientific notation or float noise.
+ * @param {number} value - a clamped px value.
+ * @returns {string} the value as a px length.
+ */
+function pxText(value) {
+  var rounded = Math.round(value * 100) / 100;
+  return String(rounded) + "px";
+}
+
 /**
  * Clamp one RELATIVE weight to its allowed range, migrating an absolute value.
  *
@@ -2338,6 +2465,27 @@ function rebuildShorthand(parts) {
  * token classification
  * ------------------------------------------------------------------ */
 
+/**
+ * Whether a CSS selector declares something for the WHOLE page.
+ *
+ * The typography tokens live on `:root`, `html` or `body`. A selector scoped to a class
+ * or an attribute declares a LOCAL value: another plugin's module stylesheet may reuse a
+ * token name for its own compact panel (measured: `dsh-better-sidebar` sets
+ * `--dsw-font-markdown-h1` to `600 13px/18px` on `.…_taskMarkdown`), and reading that as
+ * the base hands the conversation a size that panel picked for itself.
+ * @param {string} selector - a rule's selector text.
+ * @returns {boolean} true when every selector in the list is a root scope.
+ */
+function isRootScopeSelector(selector) {
+  if (typeof selector !== "string" || selector.trim() === "") return false;
+  var parts = selector.split(",");
+  for (var index = 0; index < parts.length; index += 1) {
+    var part = parts[index].trim().toLowerCase();
+    if (part !== ":root" && part !== "html" && part !== "body" && part !== "*") return false;
+  }
+  return true;
+}
+
 /**
  * Match DSH's typography PART tokens: the design system's sizes plus the
  * content size the theme plugin writes on `body` (whose secondary variant
@@ -3178,6 +3326,180 @@ function weightStepRange(profile, value) {
   return { min: min, max: max, unit: unit, value: count };
 }
 
+/* ------------------------------------------------------------------ *
+ * continuous weight (FT-060)
+ * ------------------------------------------------------------------ */
+
+/** Prefix of the alias family a continuous family is drawn through. */
+var VARIABLE_ALIAS_PREFIX = "dfp-vf-";
+
+/**
+ * The weights the continuity probe lays out. Dense on purpose: a variable font
+ * that moves in small steps shows a width change at every one of them, while a
+ * family that snaps to named instances repeats its width across each stretch.
+ */
+var CONTINUITY_WEIGHTS = [400, 420, 440, 460, 480, 500, 550, 600, 650, 700, 750, 800, 900];
+
+/**
+ * The share of adjacent probe pairs that must differ before a family's laid-out
+ * WIDTH counts as continuous. Measured: a variable family drawn through its alias
+ * changes width at every sampled weight (share 1.0), while a family snapping to
+ * named instances repeats its width across each stretch (share 0.25–0.42).
+ */
+var CONTINUOUS_MIN_SHARE = 0.9;
+
+/**
+ * The notches offered for a continuous family, finest first.
+ *
+ * The shape is still measured (the alias is drawn on the same weight grid as any
+ * other family), but the candidates are fine: a continuous axis can answer at every
+ * one of them, which is the whole point of the mode. `weightProfileFrom` walks this
+ * list from the END, so the finest candidate that still yields enough visible
+ * positions wins.
+ */
+var CONTINUOUS_CANDIDATES = [10, 20, 25];
+
+/**
+ * The nominal continuous slider, used when the measured shape cannot be taken
+ * (no canvas, a refused probe). One notch is 20 weight units; the range is the
+ * widest offset the ceiling allows either way.
+ */
+var CONTINUOUS_STEP = 20;
+var CONTINUOUS_RANGE = 200;
+
+/**
+ * How many different values a list of measurements holds.
+ * @param {number[]} values - the measurements.
+ * @returns {number} the count of distinct values.
+ */
+function distinctCount(values) {
+  if (!Array.isArray(values)) return 0;
+  var seen = [];
+  for (var index = 0; index < values.length; index += 1) {
+    if (seen.indexOf(values[index]) < 0) seen.push(values[index]);
+  }
+  return seen.length;
+}
+
+/**
+ * Does the same family answer more finely through its alias than through itself?
+ *
+ * This is the discriminator the continuity probe trusts, and it needs no threshold:
+ * a family that snaps to named instances renders IDENTICALLY either way, so both
+ * responses hold the same number of distinct values; a variable family drawn through
+ * the alias moves at weights where the system path already stopped. Comparing the
+ * family against ITSELF also keeps the answer honest for a narrow axis, where a
+ * share-of-neighbours rule would read saturation as "static".
+ * @param {number[]} throughAlias - measurements taken through the alias face.
+ * @param {number[]} plain - the same measurements taken through the family itself.
+ * @returns {boolean} true when the alias resolves finer detail.
+ */
+function respondsFinerThan(throughAlias, plain) {
+  if (!Array.isArray(throughAlias) || !Array.isArray(plain)) return false;
+  var fine = distinctCount(throughAlias);
+  return fine >= 3 && fine > distinctCount(plain);
+}
+
+
+/**
+ * The alias family name for one family. A hash, not the family itself, so the
+ * name is a plain identifier whatever the family is called.
+ * @param {string} family - a family name.
+ * @returns {string} the alias, stable across sessions.
+ */
+function variableAliasFor(family) {
+  var text = sanitizeFamily(family);
+  var hash = 0;
+  for (var index = 0; index < text.length; index += 1) {
+    hash = (hash * 31 + text.charCodeAt(index)) >>> 0;
+  }
+  return VARIABLE_ALIAS_PREFIX + hash.toString(36);
+}
+
+/**
+ * The `@font-face` rule that draws one family through its own variable axis.
+ *
+ * `local()` points the face at the installed family, and the weight RANGE is the
+ * part that matters: it tells the engine the family is continuous, so `font-weight`
+ * picks a point on the axis instead of the nearest named instance. (Without the
+ * range the same family snaps; `font-variation-settings` does not help a system
+ * family at all — measured, see FT-060.)
+ * @param {string} family - the installed family name.
+ * @param {string} alias - the alias from `variableAliasFor`.
+ * @returns {string} one CSS rule.
+ */
+function variableFaceRule(family, alias) {
+  var text = sanitizeFamily(family).replace(/"/g, "");
+  return '@font-face{font-family:"' + alias + '";src:local("' + text + '");font-weight:100 900;}';
+}
+
+/**
+ * Every `@font-face` rule for a map of family → alias.
+ * @param {Record<string, string>} variable - the families that measured continuous.
+ * @returns {string} the rules, one per line; "" when there are none.
+ */
+function buildVariableFaces(variable) {
+  var rules = [];
+  if (variable === null || typeof variable !== "object") return "";
+  for (var family in variable) {
+    if (Object.prototype.hasOwnProperty.call(variable, family)) {
+      rules.push(variableFaceRule(family, variable[family]));
+    }
+  }
+  return rules.join("\n");
+}
+
+/**
+ * Put the alias IN FRONT of every continuous family a stack names.
+ *
+ * The family stays in the list after its alias, so a glyph the alias lacks still
+ * falls through to the same face the reader chose, and a stack that names no
+ * continuous family is returned unchanged.
+ * @param {string} stack - a formatted font-family value.
+ * @param {Record<string, string>} variable - family → alias map.
+ * @returns {string} the stack, with aliases prepended where they apply.
+ */
+function withVariableFaces(stack, variable) {
+  if (typeof stack !== "string" || stack === "" || variable === null || typeof variable !== "object") {
+    return stack;
+  }
+  // The stack may already carry its alias — a family read back from the page's own
+  // computed style does, once the mode is on. Prepending it again would stack up a
+  // duplicate on every rebuild.
+  var names = parseStack(stack);
+  var lead = names.length > 0 ? names[0] : "";
+  var prefix = [];
+  for (var family in variable) {
+    if (!Object.prototype.hasOwnProperty.call(variable, family)) continue;
+    if (stack.indexOf(quoteFamily(family)) < 0) continue;
+    if (lead === variable[family]) continue;
+    prefix.push('"' + variable[family] + '"');
+  }
+  return prefix.length === 0 ? stack : prefix.join(", ") + ", " + stack;
+}
+
+/**
+ * Did a family respond continuously to weight in the probe?
+ * @param {number[]} widths - laid-out widths, in `CONTINUITY_WEIGHTS` order.
+ * @returns {boolean} true when enough neighbours differ.
+ */
+function isContinuousResponse(widths) {
+  if (!Array.isArray(widths) || widths.length < 3) return false;
+  var changes = 0;
+  for (var index = 1; index < widths.length; index += 1) {
+    if (widths[index] !== widths[index - 1]) changes += 1;
+  }
+  return changes / (widths.length - 1) >= CONTINUOUS_MIN_SHARE;
+}
+
+/**
+ * The slider shape for a continuous family: the finest notch, centred on 0.
+ * @returns {{min: number, max: number, step: number}} the profile, in weight units.
+ */
+function continuousWeightProfile() {
+  return { min: -CONTINUOUS_RANGE, max: CONTINUOUS_RANGE, step: CONTINUOUS_STEP };
+}
+
 /**
  * What a slider's local (unconfirmed) value should do when a value arrives from
  * the settings document.
@@ -3241,6 +3563,11 @@ function isDormant(config) {
     clampWeightDelta(axis[CODE_WEIGHT_FIELD], true) === WEIGHT_UNSET &&
     clampRatio(axis[LINE_HEIGHT_DIALOG_FIELD]) === LINE_HEIGHT_MIN &&
     clampLineOffset(axis[CODE_LINE_HEIGHT_FIELD]) === 0 &&
+    clampSpacing(axis[LETTER_SPACING_DIALOG_FIELD], LETTER_SPACING_MIN, LETTER_SPACING_MAX) === 0 &&
+    clampSpacing(axis[WORD_SPACING_DIALOG_FIELD], WORD_SPACING_MIN, WORD_SPACING_MAX) === 0 &&
+    clampSpacing(axis[PARAGRAPH_SPACING_DIALOG_FIELD], PARAGRAPH_SPACING_MIN, PARAGRAPH_SPACING_MAX) === 0 &&
+    clampIndent(axis[INDENT_DIALOG_FIELD]) === 0 &&
+    toBool(axis[LINE_BREAK_STRICT_FIELD]) === false &&
     clampLigatures(axis[LIGATURES_FIELD]) === LIGATURES_DEFAULT &&
     sanitizeFeatures(axis[FEATURES_FIELD]) === "" &&
     toBool(axis[NO_SYNTHETIC_ITALIC_FIELD]) === false &&
@@ -3265,10 +3592,12 @@ 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, hints) {
-  var sans = formatStack(parseStack(axis[SANS_FIELD]));
-  var mono = formatStack(parseStack(axis[MONO_FIELD]));
-  var dialog = formatStack(parseStack(axis[STACK_DIALOG_FIELD]));
+function buildAxisCss(axis, baseTokens, isDark, hints, variable) {
+  // A continuous family leads its stack with its alias (see `withVariableFaces`);
+  // with no map, every stack stays exactly as written.
+  var sans = withVariableFaces(formatStack(parseStack(axis[SANS_FIELD])), variable);
+  var mono = withVariableFaces(formatStack(parseStack(axis[MONO_FIELD])), variable);
+  var dialog = withVariableFaces(formatStack(parseStack(axis[STACK_DIALOG_FIELD])), variable);
   // 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". The conversation's value
@@ -3622,6 +3951,60 @@ function buildAxisCss(axis, baseTokens, isDark, hints) {
     }
   }
 
+  // ---- conversation text shaping (tracking, word gap, paragraph gap, indent) ----
+  //
+  // Every value here is written on the CONVERSATION scope, and the measurements that
+  // fixed the shape were taken there (2026-10-13): the markdown's tracking is `normal`
+  // and its word gap `0px`, so those two axes are absolute and 0 emits nothing; the
+  // paragraphs carry 16px margins, so the paragraph axis is an offset over that
+  // baseline. Code surfaces are excluded by the same scope rule the weight ladder uses,
+  // so a code block's own tracking is never rewritten by a conversation axis.
+  var letterSpacing = clampSpacing(axis[LETTER_SPACING_DIALOG_FIELD], LETTER_SPACING_MIN, LETTER_SPACING_MAX);
+  var wordSpacing = clampSpacing(axis[WORD_SPACING_DIALOG_FIELD], WORD_SPACING_MIN, WORD_SPACING_MAX);
+  var paragraphSpacing = clampSpacing(
+    axis[PARAGRAPH_SPACING_DIALOG_FIELD],
+    PARAGRAPH_SPACING_MIN,
+    PARAGRAPH_SPACING_MAX
+  );
+  var indent = clampIndent(axis[INDENT_DIALOG_FIELD]);
+  if (letterSpacing !== 0) {
+    declarations.push(weightScopeRule("letter-spacing:" + pxText(letterSpacing) + " !important"));
+  }
+  if (wordSpacing !== 0) {
+    declarations.push(weightScopeRule("word-spacing:" + pxText(wordSpacing) + " !important"));
+  }
+  if (indent !== 0) {
+    // A first-line indent is a PROSE convention, so it belongs to paragraphs. Emitted for
+    // the whole conversation scope it inherited into every block under it; each of these
+    // was measured on the page with the axis at 2em (32px on a 16px base):
+    //   - a heading sat 32px in, where no Chinese reader expects one;
+    //   - an ordered-list item's TEXT moved 32px while the number stayed at the content
+    //     edge (the marker sits outside the content box), so the number ended up in front
+    //     of the indent the text had taken;
+    //   - inline code is `display: inline-flex` in DSH's markdown — a block container of
+    //     its own — so the indent landed INSIDE the chip as blank space before its own
+    //     text, wherever the chip sat in the line;
+    //   - a code block's first line shifted the same way.
+    // Paragraphs are the only place the convention exists, and their descendants are
+    // zeroed so a chip that happens to be its own block still draws flush.
+    var indentDeclarations = "text-indent:" + String(indent) + "em !important";
+    declarations.push(weightScopeRule("p{" + indentDeclarations + "}"));
+    declarations.push(weightScopeRule("p *{text-indent:0 !important}"));
+  }
+  if (paragraphSpacing !== 0) {
+    // Both margins move together: adjacent siblings collapse to the LARGER of the two,
+    // so shifting only `margin-top` would silently ignore every negative offset.
+    var gap =
+      paragraphSpacing > 0
+        ? "calc(" + PARAGRAPH_BASELINE_PX + "px + " + pxText(paragraphSpacing) + ")"
+        : "calc(" + PARAGRAPH_BASELINE_PX + "px - " + pxText(-paragraphSpacing) + ")";
+    declarations.push(weightScopeRule("p{margin-bottom:" + gap + " !important}"));
+    declarations.push(weightScopeRule("p:not(:first-child){margin-top:" + gap + " !important}"));
+  }
+  if (toBool(axis[LINE_BREAK_STRICT_FIELD])) {
+    declarations.push(weightScopeRule("line-break:strict !important"));
+  }
+
   // ---- code axes ----
   var codeSize = axis[CODE_SIZE_FIELD];
   var codeLine = axis[CODE_LINE_HEIGHT_FIELD];
@@ -3668,7 +4051,28 @@ function buildAxisCss(axis, baseTokens, isDark, hints) {
     if (noBold) declarations.push(bodyRule("font-synthesis-weight:none !important"));
   }
 
-  return declarations.join("\n");
+  return hardenDeltaRefs(declarations.join("\n"));
+}
+
+/**
+ * Give every reference to the content-size delta a fallback value.
+ *
+ * A heading's `font` shorthand is the markdown token, and DSH's own text for it reads
+ * `calc(21px + var(--dsh-content-font-delta))` — a reference with NO fallback. Nothing
+ * outside this plugin defines that property, so any rebuild that emits the reference
+ * without the definition leaves it resolving to nothing, which makes the WHOLE shorthand
+ * invalid at computed-value time: every font longhand falls back to `inherit`, and the
+ * heading is painted at body size. Measured on a live page: h1 23px → 16px the moment the
+ * property resolved to nothing, back to 23px when it returned.
+ *
+ * The fallback cannot change a page that defines the property (the definition wins), and
+ * where the definition is missing it keeps the design's own size instead of collapsing.
+ * @param {string} css - generated declarations.
+ * @returns {string} the same declarations, with the reference made safe.
+ */
+function hardenDeltaRefs(css) {
+  if (typeof css !== "string" || css === "") return css;
+  return css.split("var(--dsh-content-font-delta)").join("var(--dsh-content-font-delta, 0px)");
 }
 
 /**
@@ -3760,7 +4164,7 @@ function scaleCodeTokens(baseTokens, scale, lineOffset) {
  *   correct everywhere and costs an attribute scan per element per rule.
  * @returns {string} declarations for one `<style>` element ("" when dormant).
  */
-function buildFontCss(config, baseTokens, hints) {
+function buildFontCss(config, baseTokens, hints, variable) {
   var tokens = baseTokens === undefined || baseTokens === null ? FALLBACK_TOKENS : baseTokens;
   var sets = resolveAxes(config);
   // The rendering preference is NOT an axis: it must paint even when every
@@ -3768,16 +4172,16 @@ function buildFontCss(config, baseTokens, hints) {
   // use case with everything else untouched.
   var smoothing = smoothingRule(config !== null && typeof config === "object" ? config[SMOOTHING_FIELD] : "");
   if (isDormant(sets.light) && isDormant(sets.dark)) return smoothing;
-  var light = buildAxisCss(sets.light, tokens, false, hints);
+  var light = buildAxisCss(sets.light, tokens, false, hints, variable);
   if (sameValueSet(sets.light, sets.dark)) {
-    return smoothing === "" ? light : light === "" ? smoothing : light + "\n" + smoothing;
+    return hardenDeltaRefs(smoothing === "" ? light : light === "" ? smoothing : light + "\n" + smoothing);
   }
-  var dark = buildAxisCss(sets.dark, tokens, true, hints);
+  var dark = buildAxisCss(sets.dark, tokens, true, hints, variable);
   var parts = [];
   if (light !== "") parts.push(light);
   if (dark !== "") parts.push(dark);
   if (smoothing !== "") parts.push(smoothing);
-  return parts.join("\n");
+  return hardenDeltaRefs(parts.join("\n"));
 }
 
 /**
@@ -4222,6 +4626,24 @@ var shared = {
   LINE_HEIGHT_MAX: LINE_HEIGHT_MAX,
   CODE_LINE_HEIGHT_MIN: CODE_LINE_HEIGHT_MIN,
   CODE_LINE_HEIGHT_MAX: CODE_LINE_HEIGHT_MAX,
+  LETTER_SPACING_DIALOG_FIELD: LETTER_SPACING_DIALOG_FIELD,
+  WORD_SPACING_DIALOG_FIELD: WORD_SPACING_DIALOG_FIELD,
+  PARAGRAPH_SPACING_DIALOG_FIELD: PARAGRAPH_SPACING_DIALOG_FIELD,
+  INDENT_DIALOG_FIELD: INDENT_DIALOG_FIELD,
+  LINE_BREAK_STRICT_FIELD: LINE_BREAK_STRICT_FIELD,
+  LETTER_SPACING_MIN: LETTER_SPACING_MIN,
+  LETTER_SPACING_MAX: LETTER_SPACING_MAX,
+  LETTER_SPACING_STEP: LETTER_SPACING_STEP,
+  WORD_SPACING_MIN: WORD_SPACING_MIN,
+  WORD_SPACING_MAX: WORD_SPACING_MAX,
+  WORD_SPACING_STEP: WORD_SPACING_STEP,
+  PARAGRAPH_SPACING_MIN: PARAGRAPH_SPACING_MIN,
+  PARAGRAPH_SPACING_MAX: PARAGRAPH_SPACING_MAX,
+  PARAGRAPH_SPACING_STEP: PARAGRAPH_SPACING_STEP,
+  INDENT_MIN: INDENT_MIN,
+  INDENT_MAX: INDENT_MAX,
+  INDENT_STEP: INDENT_STEP,
+  PARAGRAPH_BASELINE_PX: PARAGRAPH_BASELINE_PX,
   LIGATURES_DEFAULT: LIGATURES_DEFAULT,
   SMOOTHING_FIELD: SMOOTHING_FIELD,
   SMOOTHING_AUTO: SMOOTHING_AUTO,
@@ -4299,6 +4721,19 @@ var shared = {
   WEIGHT_DELTA_FLOOR: WEIGHT_DELTA_FLOOR,
   WEIGHT_DELTA_CEIL: WEIGHT_DELTA_CEIL,
   WEIGHT_MIN_POSITIONS: WEIGHT_MIN_POSITIONS,
+  VARIABLE_ALIAS_PREFIX: VARIABLE_ALIAS_PREFIX,
+  CONTINUITY_WEIGHTS: CONTINUITY_WEIGHTS,
+  isRootScopeSelector: isRootScopeSelector,
+  hardenDeltaRefs: hardenDeltaRefs,
+  CONTINUOUS_CANDIDATES: CONTINUOUS_CANDIDATES,
+  distinctCount: distinctCount,
+  respondsFinerThan: respondsFinerThan,
+  variableAliasFor: variableAliasFor,
+  variableFaceRule: variableFaceRule,
+  buildVariableFaces: buildVariableFaces,
+  withVariableFaces: withVariableFaces,
+  isContinuousResponse: isContinuousResponse,
+  continuousWeightProfile: continuousWeightProfile,
   WEIGHT_LADDER_TOP: WEIGHT_LADDER_TOP,
   WEIGHT_LADDER_STRONG: WEIGHT_LADDER_STRONG,
   WEIGHT_DELTA_UP_LIMIT: WEIGHT_DELTA_UP_LIMIT,
@@ -4375,6 +4810,23 @@ var WEIGHT_DIALOG_FIELD = shared.WEIGHT_DIALOG_FIELD;
 var CODE_WEIGHT_FIELD = shared.CODE_WEIGHT_FIELD;
 var LINE_HEIGHT_DIALOG_FIELD = shared.LINE_HEIGHT_DIALOG_FIELD;
 var CODE_LINE_HEIGHT_FIELD = shared.CODE_LINE_HEIGHT_FIELD;
+var LETTER_SPACING_DIALOG_FIELD = shared.LETTER_SPACING_DIALOG_FIELD;
+var WORD_SPACING_DIALOG_FIELD = shared.WORD_SPACING_DIALOG_FIELD;
+var PARAGRAPH_SPACING_DIALOG_FIELD = shared.PARAGRAPH_SPACING_DIALOG_FIELD;
+var INDENT_DIALOG_FIELD = shared.INDENT_DIALOG_FIELD;
+var LINE_BREAK_STRICT_FIELD = shared.LINE_BREAK_STRICT_FIELD;
+var LETTER_SPACING_MIN = shared.LETTER_SPACING_MIN;
+var LETTER_SPACING_MAX = shared.LETTER_SPACING_MAX;
+var LETTER_SPACING_STEP = shared.LETTER_SPACING_STEP;
+var WORD_SPACING_MIN = shared.WORD_SPACING_MIN;
+var WORD_SPACING_MAX = shared.WORD_SPACING_MAX;
+var WORD_SPACING_STEP = shared.WORD_SPACING_STEP;
+var PARAGRAPH_SPACING_MIN = shared.PARAGRAPH_SPACING_MIN;
+var PARAGRAPH_SPACING_MAX = shared.PARAGRAPH_SPACING_MAX;
+var PARAGRAPH_SPACING_STEP = shared.PARAGRAPH_SPACING_STEP;
+var INDENT_MIN = shared.INDENT_MIN;
+var INDENT_MAX = shared.INDENT_MAX;
+var INDENT_STEP = shared.INDENT_STEP;
 var LIGATURES_FIELD = shared.LIGATURES_FIELD;
 var FEATURES_FIELD = shared.FEATURES_FIELD;
 var NO_SYNTHETIC_ITALIC_FIELD = shared.NO_SYNTHETIC_ITALIC_FIELD;
@@ -4577,7 +5029,7 @@ var DICTS = {
   en: {
     "card.title": "Font tune",
     "card.description":
-      "Interface and conversation fonts, a size, a weight and a line height for each, code extras and presets",
+      "Interface and conversation fonts, size, weight and line height, CJK type shaping, code extras and presets",
     "card.expand": "Expand",
     "card.collapse": "Collapse",
     "card.resetAll": "Reset all",
@@ -4640,13 +5092,13 @@ var DICTS = {
 
     "weight.uiLabel": "Interface font-weight offset",
     "weight.uiHint":
-      "Adds to the weight of the whole interface (sidebars, settings, buttons, headings): a positive value is bolder, a negative one lighter. The conversation keeps its own. The slider is divided into the weights the current font can actually render, so the readout counts STEPS (0 = leave DSH alone); every notch swaps in a different face for body text and headings alike, and another font offers a different number of steps. The step is measured for the current font, and its smallest step is the one that looks weakest.",
+      "Adds to the weight of the whole interface (sidebars, settings, buttons, headings): a positive value is bolder, a negative one lighter. The conversation keeps its own. The slider is divided into the weights the current font can actually render, so the readout counts STEPS (0 = leave DSH alone); every notch makes body text and headings a little bolder or lighter, and another font offers a different number of steps. The step is measured for the current font, and its smallest step is the one that looks weakest.",
     "weight.dialogLabel": "Conversation font-weight offset",
     "weight.dialogHint":
-      "Adds to the weight of each conversation element, so headings stay bolder than body text and bold text stays bold. Unset keeps DSH's own weights. The slider is divided into the weights the current font can actually render, so the readout counts STEPS (0 = leave DSH alone); every notch swaps in a different face for body text and headings alike, and another font offers a different number of steps. The step is measured for the current font, and its smallest step is the one that looks weakest.",
+      "Adds to the weight of each conversation element, so headings stay bolder than body text and bold text stays bold. Unset keeps DSH's own weights. The slider is divided into the weights the current font can actually render, so the readout counts STEPS (0 = leave DSH alone); every notch makes body text and headings a little bolder or lighter, and another font offers a different number of steps. The step is measured for the current font, and its smallest step is the one that looks weakest.",
     "weight.codeLabel": "Code font-weight offset",
     "weight.codeHint":
-      "Adds to the weight of each code surface (code blocks, inline code, terminal output); 0 or unset keeps DSH's own weight. The slider is divided into the weights the current font can actually render, so the readout counts STEPS (0 = leave DSH alone); every notch swaps in a different face for body text and headings alike, and another font offers a different number of steps. The step is measured for the current font, and its smallest step is the one that looks weakest.",
+      "Adds to the weight of each code surface (code blocks, inline code, terminal output); 0 or unset keeps DSH's own weight. The slider is divided into the weights the current font can actually render, so the readout counts STEPS (0 = leave DSH alone); every notch makes body text and headings a little bolder or lighter, and another font offers a different number of steps. The step is measured for the current font, and its smallest step is the one that looks weakest.",
 
     "line.dialogLabel": "Conversation line height",
     "line.dialogHint":
@@ -4656,6 +5108,37 @@ var DICTS = {
       "Adds {offset} to code line heights only; 0 keeps DSH's own line heights.",
     "line.unit": "%",
 
+    "shape.letterLabel": "Letter spacing",
+    "shape.letterHint":
+      "Adds {offset} to the conversation's own letter spacing; 0 keeps DSH's own tracking. Positive values open the text up, negative values tighten it.",
+    "shape.wordLabel": "Word spacing",
+    "shape.wordHint":
+      "Adds {offset} to the gaps between words in the conversation; 0 keeps DSH's own word gaps. Only Latin text has word gaps to widen.",
+    "shape.paragraphLabel": "Paragraph spacing",
+    "shape.paragraphHint":
+      "Adds {offset} to the space between conversation paragraphs; 0 keeps DSH's own paragraph spacing. Headings keep their own spacing either way.",
+    "shape.indentLabel": "First-line indent",
+    "shape.indentHint":
+      "Indents the first line of each conversation paragraph by {offset}; 0 leaves paragraphs flush left. Paragraphs only — headings, lists and code keep their own alignment.",
+    "shape.breakLabel": "Strict line breaking",
+    "shape.breakHint":
+      "Keeps Chinese punctuation and small kana from starting a line when the text wraps.",
+    "shape.off": "Off",
+    "shape.on": "On",
+
+    "status.title": "In force",
+    "status.dialog": "Conversation",
+    "status.ui": "Interface",
+    "status.code": "Code",
+    "status.weight": "Weight slider",
+    "status.steps": "{count} steps",
+    "status.continuous": "fine",
+    "status.hostDefault": "DSH's own",
+    "status.followDialog": "follows the conversation",
+    "status.usesHost": "not set here: DSH's own font",
+    "status.usesInterface": "not set on its own: uses the interface font",
+    "status.uiFollowsNote": "the interface uses the conversation's font",
+
     "lig.label": "Code ligatures",
     "lig.hint":
       "Programming ligatures render multiple characters as one glyph (=> as an arrow, != as ≠). Browsers enable them by default.",
@@ -4723,6 +5206,7 @@ var DICTS = {
     "preview.monoCaption": "Code",
     "preview.sample":
       "The quick brown fox jumps over the lazy dog — 中文排版预览，标点符号，数字 0123456789。",
+    "preview.sampleSecond": "第二段：段距与首行缩进在这里显现出来，正文其余部分不变。",
     "preview.code": "const greet = (name) => `hello ${name}`; // => != >= -> 代码预览",
 
     "panel.dot": "Tuning panel",
@@ -4741,7 +5225,7 @@ var DICTS = {
   zh: {
     "card.title": "字体增强",
     "card.description":
-      "界面与对话字体、各自的字号/字重/行高，代码增强与预设方案",
+      "界面与对话字体、字号/字重/行高，字距/段距/首行缩进等中文排印，代码增强与预设方案",
     "card.expand": "展开",
     "card.collapse": "收起",
     "card.resetAll": "全部重置",
@@ -4802,13 +5286,13 @@ var DICTS = {
 
     "weight.uiLabel": "界面字重偏移",
     "weight.uiHint":
-      "在整个界面自身的字重上叠加（侧栏、设置、按钮、标题）：正数更粗、负数更细；对话 Markdown 不受影响。滑块按当前字体实际能渲染的粗细分档，读数是档数（0 = 保持 DSH 原样）：每挪一格，正文与标题都会换一张字形；换个字体，档数也会跟着变。档距按当前字体实测，其中幅度最小的一档看起来最弱。",
+      "在整个界面自身的字重上叠加（侧栏、设置、按钮、标题）：正数更粗、负数更细；对话 Markdown 不受影响。滑块按当前字体实际能渲染的粗细分档，读数是档数（0 = 保持 DSH 原样）：每挪一格，正文与标题都会变粗或变细；换个字体，档数也会跟着变。档距按当前字体实测，其中幅度最小的一档看起来最弱。",
     "weight.dialogLabel": "对话字重偏移",
     "weight.dialogHint":
-      "在每个元素自身的字重上叠加，所以标题依旧比正文粗、加粗文字依旧加粗；未设置时保持 DSH 原本的粗细。滑块按当前字体实际能渲染的粗细分档，读数是档数（0 = 保持 DSH 原样）：每挪一格，正文与标题都会换一张字形；换个字体，档数也会跟着变。档距按当前字体实测，其中幅度最小的一档看起来最弱。",
+      "在每个元素自身的字重上叠加，所以标题依旧比正文粗、加粗文字依旧加粗；未设置时保持 DSH 原本的粗细。滑块按当前字体实际能渲染的粗细分档，读数是档数（0 = 保持 DSH 原样）：每挪一格，正文与标题都会变粗或变细；换个字体，档数也会跟着变。档距按当前字体实测，其中幅度最小的一档看起来最弱。",
     "weight.codeLabel": "代码字重偏移",
     "weight.codeHint":
-      "在每个代码面自身的字重上叠加（代码块、行内代码、终端输出）；0 或未设置表示保持 DSH 原样。滑块按当前字体实际能渲染的粗细分档，读数是档数（0 = 保持 DSH 原样）：每挪一格，正文与标题都会换一张字形；换个字体，档数也会跟着变。档距按当前字体实测，其中幅度最小的一档看起来最弱。",
+      "在每个代码面自身的字重上叠加（代码块、行内代码、终端输出）；0 或未设置表示保持 DSH 原样。滑块按当前字体实际能渲染的粗细分档，读数是档数（0 = 保持 DSH 原样）：每挪一格，正文与标题都会变粗或变细；换个字体，档数也会跟着变。档距按当前字体实测，其中幅度最小的一档看起来最弱。",
 
     "line.dialogLabel": "对话行高",
     "line.dialogHint": "把对话行高整体缩放为 {ratio}；100% 表示保持 DSH 原样。",
@@ -4816,6 +5300,36 @@ var DICTS = {
     "line.codeHint": "只给代码行高加 {offset}px；0 表示保持原样。",
     "line.unit": "%",
 
+    "shape.letterLabel": "字距",
+    "shape.letterHint":
+      "给对话自身的字距加 {offset}；0 表示保持 DSH 原样。正值更疏、负值更紧。",
+    "shape.wordLabel": "词距",
+    "shape.wordHint":
+      "给对话里词与词之间的间隔加 {offset}；0 表示保持 DSH 原样。只有西文有词间空隙可调。",
+    "shape.paragraphLabel": "段距",
+    "shape.paragraphHint":
+      "给对话段落之间的间隔加 {offset}；0 表示保持 DSH 原样。标题自身的间距不受影响。",
+    "shape.indentLabel": "首行缩进",
+    "shape.indentHint":
+      "把对话每段的第一行缩进 {offset}；0 表示与 DSH 一样顶格。只缩段落——标题、列表与代码保持原样对齐。",
+    "shape.breakLabel": "严格避头尾",
+    "shape.breakHint": "换行时不让中文标点、小假名等出现在行首。",
+    "shape.off": "关闭",
+    "shape.on": "开启",
+
+    "status.title": "当前生效",
+    "status.dialog": "对话",
+    "status.ui": "界面",
+    "status.code": "代码",
+    "status.weight": "字重滑块",
+    "status.steps": "{count} 档",
+    "status.continuous": "细档",
+    "status.hostDefault": "DSH 自带",
+    "status.followDialog": "跟随对话",
+    "status.usesHost": "本插件未设置，用 DSH 自带的字体",
+    "status.usesInterface": "未单独设置，沿用界面字体",
+    "status.uiFollowsNote": "界面沿用对话的字体",
+
     "lig.label": "代码连字",
     "lig.hint":
       "把多个字符连成一个字形（如 => 变箭头、!= 变 ≠）。浏览器默认就是开启的。",
@@ -4882,6 +5396,8 @@ var DICTS = {
     "preview.monoCaption": "代码",
     "preview.sample":
       "The quick brown fox jumps over the lazy dog —— 中文排版预览，标点符号，数字 0123456789。",
+    "preview.sampleSecond":
+      "Second paragraph: the paragraph gap and the first-line indent show up here, and nothing else in the text changes.",
     "preview.code": "const greet = (name) => `hello ${name}`; // => != >= -> 代码预览",
 
     "panel.dot": "调参面板",
@@ -5118,7 +5634,11 @@ var CARD_CSS = [
   // IS the card's corner: the clip, the scale and the fade still ride the card
   // (and every measurement still reads it), while the anchored edge, the size
   // and the shadow belong to the wrapper around it.
-  ".dfp-floatCard{position:relative;box-sizing:border-box;width:100%;height:100%;max-height:calc(100vh - 24px);overflow:hidden;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l3);border-radius:16px;padding:10px 12px 12px;pointer-events:auto;clip-path:inset(0px 0px 0px 0px round 16px);transition:clip-path .28s cubic-bezier(.22,1,.28,1),opacity .28s cubic-bezier(.22,1,.28,1),transform .28s cubic-bezier(.22,1,.28,1)}",
+  ".dfp-floatCard{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;max-height:calc(100vh - 24px);overflow:hidden;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l3);border-radius:16px;padding:10px 12px 12px;pointer-events:auto;clip-path:inset(0px 0px 0px 0px round 16px);transition:clip-path .28s cubic-bezier(.22,1,.28,1),opacity .28s cubic-bezier(.22,1,.28,1),transform .28s cubic-bezier(.22,1,.28,1)}",
+  // The body owns the scrolling: seven sliders and the status block do not fit a panel
+  // that was resized to its minimum, and a clipped slider is worse than a scrollbar.
+  ".dfp-floatHead{flex:0 0 auto}",
+  ".dfp-floatBody{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}",
   // the enter frame: the card is clipped to the dot's own rectangle, a hair
   // smaller and dimmer, and the transition (started by dropping this class two
   // frames later) carries all three home at once. Once it has arrived the card
@@ -5174,6 +5694,16 @@ var CARD_CSS = [
   // the write-failure line takes no room at all while it carries no message
   ".dfp-floatStatus{margin-top:0;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}",
   ".dfp-floatStatus:empty{display:none}",
+  ".dfp-floatInfo{margin-top:2px;padding-top:6px;border-top:.5px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}",
+  ".dfp-floatInfoHead{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin:0;padding:2px 0;border:0;background:none;color:var(--dsw-alias-label-tertiary);font:inherit;cursor:pointer;text-align:left}",
+  ".dfp-floatInfoHead:hover .dfp-chevron,.dfp-floatInfoHead:hover .dfp-floatInfoTitle{color:var(--dsw-alias-label-secondary)}",
+  ".dfp-floatInfoClip{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .24s cubic-bezier(.22,1,.28,1),opacity .24s cubic-bezier(.22,1,.28,1)}",
+  ".dfp-floatInfoOpen .dfp-floatInfoClip{grid-template-rows:1fr;opacity:1}",
+  ".dfp-floatInfoLines{min-height:0;overflow:hidden}",
+  ".dfp-floatInfoLine{display:flex;align-items:baseline;gap:6px;margin-top:2px}",
+  ".dfp-floatInfoKey{flex:0 0 auto;opacity:.75}",
+  ".dfp-floatInfoValue{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary)}",
+  ".dfp-floatInfoFlag{flex:0 0 auto;padding:0 6px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary)}",
 ].join("");
 
 /**
@@ -5223,6 +5753,24 @@ function isOwnSheet(sheet) {
   }
 }
 
+/**
+ * Whether a style rule declares its custom properties for the WHOLE page.
+ *
+ * The design tokens live on `:root`, `html` or `body`. A rule scoped to a class
+ * declares a LOCAL value — another plugin's module stylesheet may reuse one of the
+ * token names for its own compact panel, and reading that as the base hands the
+ * conversation a size that panel chose for itself.
+ * @param {CSSStyleRule} rule - any rule from a document stylesheet.
+ * @returns {boolean} true when every selector in the rule is a root scope.
+ */
+function isRootScopedRule(rule) {
+  try {
+    return shared.isRootScopeSelector(rule.selectorText);
+  } catch (error) {
+    return false;
+  }
+}
+
 /**
  * Snapshot the typography tokens the size offsets scale.
  *
@@ -5238,6 +5786,13 @@ function isOwnSheet(sheet) {
  * collected too: they are what the shipped stylesheets actually consume, and
  * the line-height axes rebuild their inline heights.
  *
+ * Declarations come in two ranks, because a token name is not owned by the design
+ * system alone: `dsh-better-sidebar` redefines `--dsw-font-markdown-h1` as a compact
+ * `600 13px/18px` on its own panel class, and reading that as the base is how every
+ * conversation heading shrank once the line-height axis rebuilt those shorthands. A
+ * ROOT-scoped declaration is the page's value; a locally scoped one only fills a gap
+ * (a host line that declares its tokens nowhere else still gets them).
+ *
  * @returns {Record<string, string>} token name to its untouched value.
  */
 function readBaseTokens() {
@@ -5252,6 +5807,11 @@ function readBaseTokens() {
 
   try {
     var sheets = document.styleSheets;
+    // A local (class-scoped) declaration is kept APART and only fills gaps: another
+    // plugin may reuse a token name for its own panel, so it must never override the
+    // page's own value — but a host line that declares its tokens nowhere else still
+    // needs them. Root-scoped declarations always win.
+    var local = {};
     for (var sheetIndex = 0; sheetIndex < sheets.length; sheetIndex += 1) {
       if (isOwnSheet(sheets[sheetIndex])) continue;
       var rules = null;
@@ -5262,16 +5822,24 @@ function readBaseTokens() {
       }
       if (!rules) continue;
       for (var ruleIndex = 0; ruleIndex < rules.length; ruleIndex += 1) {
-        var style = rules[ruleIndex].style;
+        var rule = rules[ruleIndex];
+        var style = rule.style;
         if (!style) continue;
+        var rootScoped = isRootScopedRule(rule);
         for (var propertyIndex = 0; propertyIndex < style.length; propertyIndex += 1) {
           var property = style[propertyIndex];
           if (property.slice(0, 2) !== "--" || !isScaledToken(property)) continue;
           var declared = style.getPropertyValue(property).trim();
-          if (declared !== "") out[property] = declared;
+          if (declared === "") continue;
+          if (rootScoped) out[property] = declared;
+          else local[property] = declared;
         }
       }
     }
+    for (name in local) {
+      if (!Object.prototype.hasOwnProperty.call(local, name)) continue;
+      if (!Object.prototype.hasOwnProperty.call(out, name)) out[name] = local[name];
+    }
   } catch (error) {
     // Keep what the earlier sources produced.
   }
@@ -5345,7 +5913,11 @@ function createStylesheet(tokens) {
   var lastCss = null;
   return function apply(config) {
     if (typeof document === "undefined") return;
-    var css = buildFontCss(config, tokens(), harvestScope());
+    // Continuous families (FT-060) bring their own faces: the aliases are declared
+    // here, and `buildFontCss` leads the matching stacks with them.
+    var faces = shared.buildVariableFaces(variableFamilies);
+    var body = buildFontCss(config, tokens(), harvestScope(), variableFamilies);
+    var css = faces === "" ? body : faces + "\n" + body;
     if (css === lastCss && tag !== null && tag.isConnected) return;
     lastCss = css;
     if (tag === null || !tag.isConnected) {
@@ -5748,6 +6320,21 @@ var context = weightProbeCanvas.getContext("2d", { willReadFrequently: true });
   return ink + "/" + advance;
 }
 
+/**
+ * The ink share of a weight signature, as a number.
+ *
+ * `sampleWeightSignature` answers "<ink>/<advance>": the advance is the laid-out
+ * width, which a monospace family holds constant, so ink is the signal that still
+ * moves for those. Unreadable signatures answer 0, which simply never counts as a
+ * change.
+ * @param {string} signature - a signature from `sampleWeightSignature`.
+ * @returns {number} the summed alpha, or 0.
+ */
+function inkOfSignature(signature) {
+  var ink = Number(String(signature).split("/")[0]);
+  return isFinite(ink) ? ink : 0;
+}
+
 /**
  * The slider shape to use for one family: its range and its notch.
  *
@@ -5764,18 +6351,40 @@ var context = weightProbeCanvas.getContext("2d", { willReadFrequently: true });
  */
 function weightProfileFor(stack, top) {
   var base = typeof top === "number" ? top : shared.WEIGHT_LADDER_TOP;
-  var key = String(stack) + "\u0000" + base;
+  var resolved = String(stack) === "" ? liveFamily() : String(stack);
+  // `hasOwnProperty` rather than a truthiness test: the alias map is keyed by family
+  // name, and a family called "constructor" must not read as promoted.
+  var promoted = Object.prototype.hasOwnProperty.call(variableFamilies, primaryFamilyOf(resolved));
+  var alias = promoted ? variableFamilies[primaryFamilyOf(resolved)] : "";
+  // The promotion state is part of the key. The warm-up measures a family BEFORE the
+  // probe has finished (the probe awaits a font load), so without it the stepped shape
+  // measured first would be served from the cache forever after the family was
+  // promoted — the card then keeps offering the coarse notches the mode replaced.
+  var key = String(stack) + "\u0000" + base + "\u0000" + (promoted ? "continuous" : "stepped");
   if (Object.prototype.hasOwnProperty.call(weightProfileCache, key)) {
     return weightProfileCache[key];
   }
-  var profile = { min: WEIGHT_DELTA_MIN, max: WEIGHT_DELTA_MAX, step: 1 };
+  var profile = promoted
+    ? shared.continuousWeightProfile()
+    : { min: WEIGHT_DELTA_MIN, max: WEIGHT_DELTA_MAX, step: 1 };
   try {
-    var resolved = String(stack) === "" ? liveFamily() : String(stack);
-    profile = weightProfileFrom(function (weight) {
-      return sampleWeightSignature(resolved, weight);
-    }, { top: base });
+    // A continuous family is measured THROUGH ITS ALIAS, on the fine candidate grid:
+    // the axis answers at every notch, so the finest one that still moves body text
+    // wins, and the range stops where the family's own axis does instead of running
+    // past it into weights that render the same.
+    var target = promoted ? '"' + alias + '"' : resolved;
+    var seen = {};
+    var sample = function (weight) {
+      if (!Object.prototype.hasOwnProperty.call(seen, weight)) {
+        seen[weight] = sampleWeightSignature(target, weight);
+      }
+      return seen[weight];
+    };
+    profile = weightProfileFrom(sample, promoted ? { top: base, candidates: shared.CONTINUOUS_CANDIDATES } : { top: base });
   } catch (error) {
-    profile = { min: WEIGHT_DELTA_MIN, max: WEIGHT_DELTA_MAX, step: 1 };
+    profile = promoted
+      ? shared.continuousWeightProfile()
+      : { min: WEIGHT_DELTA_MIN, max: WEIGHT_DELTA_MAX, step: 1 };
   }
   weightProfileCache[key] = profile;
   return profile;
@@ -5837,14 +6446,17 @@ var scheduleWeightWarm = function (editing) {
   warmSignature = signature;
   var jobs = [
     function () {
+      probeContinuity(stacks.dialog);
       weightProfileFor(stacks.dialog, shared.WEIGHT_LADDER_STRONG);
       probeLog("weight-warm", { axis: "dialog", stack: stacks.dialog });
     },
     function () {
+      probeContinuity(stacks.ui);
       weightProfileFor(stacks.ui, shared.WEIGHT_LADDER_STRONG);
       probeLog("weight-warm", { axis: "ui", stack: stacks.ui });
     },
     function () {
+      probeContinuity(stacks.code);
       weightProfileFor(stacks.code, shared.WEIGHT_BASE);
       probeLog("weight-warm", { axis: "code", stack: stacks.code });
     },
@@ -5858,6 +6470,201 @@ var scheduleWeightWarm = function (editing) {
   deferWeightWarm(runNext);
 };
 
+/**
+ * Families measured as continuous, family → alias (see FT-060).
+ *
+ * Filled by `probeContinuity` once a family has proven, in THIS page's own
+ * rendering, that it moves in small steps through its variable axis. A family
+ * that is not in here keeps the measured notch shape it always had.
+ */
+var variableFamilies = {};
+var continuityProbed = {};
+
+/**
+ * What to re-render when a family is promoted.
+ *
+ * The promotion lands a second or so after load, while the floating panel may already
+ * be on screen with its weight row built from the stepped shape. Rebuilding the
+ * stylesheet is not enough — the row caches the shape it was rendered with, so the
+ * panel would keep offering the coarse notches until something else happened to
+ * redraw it. Each mounted panel pushes its own render here and takes it back on
+ * destroy.
+ */
+var promotionListeners = [];
+
+/** Redraw whatever is showing a weight shape that the promotion just changed. */
+function notifyPromoted() {
+  var pending = promotionListeners.slice();
+  for (var index = 0; index < pending.length; index += 1) {
+    try {
+      pending[index]();
+    } catch (error) {
+      // A listener must never break the probe.
+    }
+  }
+}
+
+/**
+ * A stamp for the build the page is running.
+ *
+ * The client script is cached, and "I refreshed" has been wrong before: this is what
+ * a live page reports about itself (the panel host carries it as `data-dfp-build`).
+ */
+var CLIENT_BUILD = "2026-10-15-1";
+
+/** The families this page promoted to continuous weight, in map order. */
+function continuousNames() {
+  return Object.keys(variableFamilies);
+}
+
+/**
+ * Publish the promoted families on the panel host, when one is on screen.
+ *
+ * Promotion happens AFTER the first render (the probe awaits a font load), so the
+ * attribute set during render is re-stamped here: the host element is then the one
+ * place a reader — or a support session — can look without opening the console.
+ */
+function announceContinuous() {
+  if (typeof document === "undefined") return;
+  try {
+    var nodes = document.querySelectorAll("[data-dfp-build]");
+    var names = continuousNames().join(", ");
+    for (var index = 0; index < nodes.length; index += 1) {
+      if (names === "") nodes[index].removeAttribute("data-dfp-continuous");
+      else nodes[index].setAttribute("data-dfp-continuous", names);
+    }
+  } catch (error) {
+    // Diagnostics only: a host without attributes costs nothing.
+  }
+}
+
+/**
+ * The first family a stack names that is a REAL family, or "" when there is none.
+ *
+ * Our own alias families are skipped: once a family is promoted, any stack read back
+ * from the page (`liveFamily()`) leads with the alias, and treating that as the
+ * family name would miss the promotion map and hand back the stepped shape — which is
+ * how the floating panel kept offering the coarse notches after the card moved on.
+ * @param {string} stack - a formatted font-family value.
+ * @returns {string} the family the stack really draws with.
+ */
+function primaryFamilyOf(stack) {
+  var names = parseStack(stack);
+  for (var index = 0; index < names.length; index += 1) {
+    if (names[index].indexOf(shared.VARIABLE_ALIAS_PREFIX) !== 0) return names[index];
+  }
+  return "";
+}
+
+/**
+ * Ask the page whether a family is continuous under weight, once per family.
+ *
+ * The probe does what the page does: it installs the alias face for the family
+ * (`local()` plus a weight range) and waits for the browser to load it. It then
+ * asks TWO ways, both through that alias:
+ *
+ *  * the laid-out width, in the real DOM — what a reader's eye follows in prose;
+ *  * the canvas ink, which is the only signal a monospace family ever moves on,
+ *    since its advance is the same at every weight.
+ *
+ * A family that answers continuously on either signal is promoted to
+ * `variableFamilies`; the stylesheet is then rebuilt so the alias leads its
+ * stacks. Anything that cannot be measured (no font loading API, a rejected load)
+ * leaves the family as it was.
+ * @param {string} stack - the axis's formatted font-family value.
+ */
+function probeContinuity(stack) {
+  var family = primaryFamilyOf(stack);
+  if (family === "" || continuityProbed[family] === true) return;
+  continuityProbed[family] = true;
+  if (typeof document === "undefined" || !document.fonts || typeof document.fonts.load !== "function") return;
+  var alias = shared.variableAliasFor(family);
+  var style = document.createElement("style");
+  style.setAttribute("data-dfp-continuity", alias);
+  style.textContent = shared.variableFaceRule(family, alias);
+  document.head.appendChild(style);
+  var host = document.createElement("span");
+  host.style.cssText =
+    "position:fixed;left:-10000px;top:0;white-space:nowrap;font-size:64px;font-family:\"" + alias + "\"";
+  host.textContent = WEIGHT_SAMPLE_TEXT;
+  document.body.appendChild(host);
+  var keepFace = false;
+  var finish = function () {
+    host.remove();
+    // A promoted family keeps its face: the stylesheet will declare the same alias,
+    // and the weight profile is measured THROUGH it after promotion, so removing the
+    // rule here would leave that measurement drawing with the fallback.
+    if (!keepFace) style.remove();
+  };
+  // Two signals, because neither covers every family on its own: the DOM width
+  // moves for a proportional font, while a monospace font never changes width and
+  // can only be seen in the canvas ink. The ink is also read through the FAMILY
+  // itself, and the two responses are compared: a family that snaps to named
+  // instances answers identically either way, while a variable family moves through
+  // its alias at weights where its own path already stopped.
+  //
+  // All values equal means the face has not taken effect yet (the page is still
+  // drawing with its fallback), not that the family is stepped: a stepped family
+  // still changes between its faces. Wait a beat and measure again, a few times at
+  // most, so a slow face is not mistaken for a static one.
+  var attempts = 0;
+  var measure = function () {
+    attempts += 1;
+    // `!important` on purpose: the page's own weight rules are `!important`, and a
+    // plain inline weight loses to them, which measured every width as one value.
+    var widths = shared.CONTINUITY_WEIGHTS.map(function (weight) {
+      host.style.setProperty("font-weight", String(weight), "important");
+      return host.getBoundingClientRect().width;
+    });
+    var inks = shared.CONTINUITY_WEIGHTS.map(function (weight) {
+      return inkOfSignature(sampleWeightSignature('"' + alias + '"', weight));
+    });
+    var plainInks = shared.CONTINUITY_WEIGHTS.map(function (weight) {
+      return inkOfSignature(sampleWeightSignature('"' + family + '"', weight));
+    });
+    var unchanged = function (list) {
+      return list.every(function (value) {
+        return value === list[0];
+      });
+    };
+    if (unchanged(widths) && unchanged(inks) && attempts < 8) {
+      globalThis.setTimeout(measure, 80);
+      return;
+    }
+    // The alias must answer more finely than the family itself. A family that snaps
+    // to named instances cannot: both responses hold the same values.
+    var finer = shared.respondsFinerThan(inks, plainInks);
+    var continuous = finer || shared.isContinuousResponse(widths);
+    keepFace = continuous;
+    finish();
+    probeLog("continuity", {
+      family: family,
+      continuous: continuous,
+      attempts: attempts,
+      byWidth: shared.isContinuousResponse(widths),
+      aliasInk: shared.distinctCount(inks),
+      plainInk: shared.distinctCount(plainInks),
+      widths: widths.map(function (width) {
+        return Math.round(width * 100) / 100;
+      }),
+    });
+    if (!continuous) return;
+    variableFamilies[family] = alias;
+    announceContinuous();
+    notifyPromoted();
+    if (typeof repaint === "function") repaint();
+  };
+  document.fonts.load('400 64px "' + alias + '"').then(
+    function () {
+      measure();
+    },
+    function () {
+      finish();
+      probeLog("continuity", { family: family, continuous: false, error: "load" });
+    }
+  );
+}
+
 /**
  * The family the page actually renders with, as a `font-family` value.
  * @returns {string} the computed family, or "" when unreadable.
@@ -5952,6 +6759,27 @@ function liveCodeFamily() {
   }
 }
 
+/**
+ * The family the conversation renders with when the conversation axis sets none.
+ *
+ * Read from a real conversation surface rather than from `body`: the two can differ (the
+ * interface's family is its own axis), and a panel that named the body's family while the
+ * conversation drew with something else would be reporting the wrong surface.
+ * @returns {string} the computed family, or "" when unreadable.
+ */
+function liveDialogFamily() {
+  if (typeof document === "undefined") return "";
+  try {
+    // `dialogSelector()` is what the stylesheet itself scopes the conversation with, so
+    // the sample is the same kind of element the rules land on.
+    var sample = document.querySelector(shared.dialogSelector(null));
+    if (sample === null) return liveFamily();
+    return document.defaultView.getComputedStyle(sample).fontFamily || liveFamily();
+  } catch (error) {
+    return "";
+  }
+}
+
 /* ------------------------------------------------------------------ *
  * hooks and controls
  * ------------------------------------------------------------------ */
@@ -8041,6 +8869,102 @@ function FontCard(props) {
     );
   };
 
+  // ---- conversation text shaping: tracking, word gap, paragraph gap, indent ----
+  //
+  // Four axes that move the shape of the conversation text rather than its face. Every
+  // value here is an OFFSET over what DSH already ships, measured on the conversation
+  // scope (2026-10-13): tracking `normal`, word gap `0px`, paragraph margins 16px, no
+  // indent. 0 therefore means "leave DSH alone" and emits no rule at all, exactly like
+  // the size and weight offsets.
+  var spacingField = function (props) {
+    var value = editing[props.field];
+    var neutral = props.neutral === undefined ? 0 : props.neutral;
+    var within = value !== neutral;
+    var shown = function (number) {
+      var text = props.decimals === 2 ? number.toFixed(2) : String(number);
+      return (number > 0 ? "+" : "") + text + props.unit;
+    };
+    return h(
+      FieldShell,
+      {
+        t: t,
+        label: t(props.labelKey),
+        // The hint names the value the reader is looking at: without the parameter the
+        // literal `{offset}` ships to the screen (caught by a screenshot, not by a test).
+        hint: t(props.hintKey, { offset: shown(value) }),
+        overridden: overridden(props.field) && within,
+        disabled: !writable,
+        onReset: function () {
+          resetField(props.field);
+        },
+      },
+      h(NumberSlider, {
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        value: value,
+        disabled: !writable,
+        label: t(props.labelKey),
+        revertedText: t("write.reverted"),
+        refusedToken: refused[props.field] || 0,
+        readout: shown(value),
+        minLabel: shown(props.min),
+        maxLabel: shown(props.max),
+        pendingText: shown,
+        onChange: function (next) {
+          setField(props.field, next);
+        },
+      })
+    );
+  };
+
+  /**
+   * A switch for a property DSH itself leaves alone, so "off" writes nothing.
+   * @param {{field: string, labelKey: string, hintKey: string}} props - the axis.
+   * @returns {object} the row.
+   */
+  var switchField = function (props) {
+    var value = editing[props.field] === true;
+    return h(
+      FieldShell,
+      {
+        t: t,
+        label: t(props.labelKey),
+        hint: t(props.hintKey),
+        overridden: overridden(props.field) && value,
+        disabled: !writable,
+        onReset: function () {
+          resetField(props.field);
+        },
+        inline: true,
+      },
+      h(Segmented, {
+        label: t(props.labelKey),
+        value: value ? 1 : 0,
+        options: [
+          { value: 0, label: t("shape.off") },
+          { value: 1, label: t("shape.on") },
+        ],
+        onChange: function (next) {
+          setField(props.field, next === 1);
+        },
+      })
+    );
+  };
+
+  /**
+   * Strict CJK line breaking, as a switch: DSH leaves `line-break` at `auto`, so
+   * "off" writes nothing and the reader keeps DSH's own breaking.
+   * @returns {object} the row.
+   */
+  var lineBreakField = function () {
+    return switchField({
+      field: LINE_BREAK_STRICT_FIELD,
+      labelKey: "shape.breakLabel",
+      hintKey: "shape.breakHint",
+    });
+  };
+
   // ---- ligature segmented control ----
   var ligatureField = function () {
     var value = editing[LIGATURES_FIELD];
@@ -8445,12 +9369,17 @@ function FontCard(props) {
   // nothing else — the weight, size and line height all come from the
   // conversation section.
   var previewUiStyle = {};
-  if (uiStack !== "") previewUiStyle.fontFamily = uiStack;
+  if (uiStack !== "") previewUiStyle.fontFamily = shared.withVariableFaces(uiStack, variableFamilies);
   var previewDialogStyle = {};
   // Independent and unset: the conversation keeps DSH's own family, so the
   // preview shows the theme's default rather than the interface stack the page
   // rule would otherwise paint into this box.
-  if (dialogStack !== "") previewDialogStyle.fontFamily = dialogStack;
+  //
+  // The alias leads these stacks exactly as it leads the real surfaces: without it
+  // the preview would draw through the system family, where the fine notches snap to
+  // the same named instance — so a notch that visibly moves the conversation would
+  // do nothing here.
+  if (dialogStack !== "") previewDialogStyle.fontFamily = shared.withVariableFaces(dialogStack, variableFamilies);
   previewDialogStyle.fontSize = 13 + editing[SIZE_DIALOG_FIELD] + "px";
   // The axis is a percentage OF DSH's own line height, so the preview multiplies the
   // measured base by the same percentage — and does it at every notch including 100,
@@ -8469,9 +9398,32 @@ function FontCard(props) {
     // conversation does instead of one flat weight.
     previewDialogStyle["--dfp-wdelta"] = editing[WEIGHT_DIALOG_FIELD];
   }
+  // The shaping axes ride the preview inline, for the same reason the weight offset
+  // does: the reader has to see the same change here that the conversation gets. The
+  // paragraph gap needs two paragraphs to be visible at all, so the preview renders a
+  // second, shorter one — the pair is what makes the axis honest.
+  if (editing[LETTER_SPACING_DIALOG_FIELD] !== 0) {
+    previewDialogStyle.letterSpacing = String(editing[LETTER_SPACING_DIALOG_FIELD]) + "px";
+  }
+  if (editing[WORD_SPACING_DIALOG_FIELD] !== 0) {
+    previewDialogStyle.wordSpacing = String(editing[WORD_SPACING_DIALOG_FIELD]) + "px";
+  }
+  if (editing[INDENT_DIALOG_FIELD] !== 0) {
+    previewDialogStyle.textIndent = String(editing[INDENT_DIALOG_FIELD]) + "em";
+  }
+  if (editing[LINE_BREAK_STRICT_FIELD] === true) {
+    previewDialogStyle.lineBreak = "strict";
+  }
+  var previewDialogGap = editing[PARAGRAPH_SPACING_DIALOG_FIELD];
+  // The preview paragraph keeps DSH's own 16px gap as its baseline, exactly like the
+  // conversation rule does, so a "+6px" reads as the same change in both places.
+  var previewSecondStyle = { marginTop: String(shared.PARAGRAPH_BASELINE_PX + previewDialogGap) + "px" };
+  if (editing[INDENT_DIALOG_FIELD] !== 0) {
+    previewSecondStyle.textIndent = String(editing[INDENT_DIALOG_FIELD]) + "em";
+  }
   var previewCodeStyle = {};
   if (editing[MONO_FIELD] !== "") {
-    previewCodeStyle.fontFamily = formatStack(parseStack(editing[MONO_FIELD]));
+    previewCodeStyle.fontFamily = shared.withVariableFaces(formatStack(parseStack(editing[MONO_FIELD])), variableFamilies);
   }
   previewCodeStyle.fontSize = 13 + editing[CODE_SIZE_FIELD] + "px";
   if (editing[CODE_LINE_HEIGHT_FIELD] !== 0) {
@@ -8720,6 +9672,49 @@ function FontCard(props) {
               value: editing[WEIGHT_DIALOG_FIELD],
               stack: dialogStack,
             }),
+            // Text shaping: the four spacing axes, then the line-breaking switch. Each
+            // one leaves DSH's own value alone at its neutral position.
+            lineBreakField(),
+            spacingField({
+              field: LETTER_SPACING_DIALOG_FIELD,
+              labelKey: "shape.letterLabel",
+              hintKey: "shape.letterHint",
+              min: LETTER_SPACING_MIN,
+              max: LETTER_SPACING_MAX,
+              step: LETTER_SPACING_STEP,
+              unit: "px",
+              decimals: 2,
+            }),
+            spacingField({
+              field: WORD_SPACING_DIALOG_FIELD,
+              labelKey: "shape.wordLabel",
+              hintKey: "shape.wordHint",
+              min: WORD_SPACING_MIN,
+              max: WORD_SPACING_MAX,
+              step: WORD_SPACING_STEP,
+              unit: "px",
+              decimals: 2,
+            }),
+            spacingField({
+              field: PARAGRAPH_SPACING_DIALOG_FIELD,
+              labelKey: "shape.paragraphLabel",
+              hintKey: "shape.paragraphHint",
+              min: PARAGRAPH_SPACING_MIN,
+              max: PARAGRAPH_SPACING_MAX,
+              step: PARAGRAPH_SPACING_STEP,
+              unit: "px",
+              decimals: 2,
+            }),
+            spacingField({
+              field: INDENT_DIALOG_FIELD,
+              labelKey: "shape.indentLabel",
+              hintKey: "shape.indentHint",
+              min: INDENT_MIN,
+              max: INDENT_MAX,
+              step: INDENT_STEP,
+              unit: "em",
+              decimals: 2,
+            }),
             h(
               "div",
               { className: "dfp-previewBox" },
@@ -8727,7 +9722,8 @@ function FontCard(props) {
               h(
                 "div",
                 { className: "dfp-previewText dfp-previewDialog", style: previewDialogStyle },
-                t("preview.sample")
+                h("p", { style: { margin: "0" } }, t("preview.sample")),
+                h("p", { style: previewSecondStyle }, t("preview.sampleSecond"))
               )
             )
           ),
@@ -9163,6 +10159,10 @@ function mountFloatPanel(scope, t, hostCtx) {
   var corner = null;
   // The live card size while resizing; otherwise the document's size rules.
   var liveSize = null;
+  // Whether the panel's "in force" block is unfolded. It is view state, not a setting:
+  // it lives for the session and is deliberately not written to the document, because a
+  // fold the reader chose is not a configuration anyone should have to sync.
+  var infoOpen = true;
   // The document value `pos` was last reconciled with: a snapshot carrying
   // anything else is an edit from elsewhere and is adopted. Our own writes
   // set `pos` first, so their echo always matches and is a no-op.
@@ -10546,6 +11546,128 @@ function mountFloatPanel(scope, t, hostCtx) {
     return { row: row, input: input, shown: shown };
   };
 
+  /**
+   * The panel's "in force right now" block: what is actually on the page.
+   *
+   * Three rounds of "it did not take effect" reports were settled by reading the panel's
+   * own attributes in DevTools, which is not a thing a reader should have to do. This
+   * prints the same facts where the reader already is, and it prints the FAMILY each
+   * surface renders with rather than a relationship: an unset conversation shows the name
+   * it actually uses plus "DSH default", and the only place the word "follows" appears is
+   * the interface following the conversation, which is the one relationship the plugin
+   * ships by default.
+   *
+   * The block folds away, because a panel that is being used to drag a slider does not
+   * need four lines of prose under it.
+   * @param {HTMLElement} body - the card body.
+   * @param {object} state - the resolved families, the notch count and the fold state.
+   * @returns {HTMLElement} the block.
+   */
+  var infoBlock = function (body, state) {
+    var block = el("div", "dfp-floatInfo" + (state.open ? " dfp-floatInfoOpen" : ""));
+    var head = el("button", "dfp-floatInfoHead");
+    head.type = "button";
+    head.setAttribute("aria-expanded", state.open ? "true" : "false");
+    head.appendChild(el("span", "dfp-floatInfoTitle", t("status.title")));
+    // The card's own chevron, so the two surfaces fold the same way round: it starts
+    // pointing down (there is something below) and turns over when the block is open.
+    // Built with the SVG helper, not with `h`: the panel is plain DOM, and a React
+    // element appended to it is not a node at all.
+    var glyph = svgEl("svg", {
+      class: "dfp-chevron" + (state.open ? " dfp-chevronOpen" : ""),
+      viewBox: "0 0 14 14",
+      width: "14",
+      height: "14",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+    });
+    glyph.appendChild(svgEl("path", { d: CHEVRON_PATH, fill: "currentColor" }));
+    head.appendChild(glyph);
+    head.addEventListener("click", function () {
+      infoOpen = !infoOpen;
+      block.classList.toggle("dfp-floatInfoOpen", infoOpen);
+      head.setAttribute("aria-expanded", infoOpen ? "true" : "false");
+      glyph.setAttribute("class", "dfp-chevron" + (infoOpen ? " dfp-chevronOpen" : ""));
+    });
+    block.appendChild(head);
+    // The grid-row transition needs a single child that clips: 0fr cannot be animated on
+    // the row container itself.
+    var clip = el("div", "dfp-floatInfoClip");
+    var lines = el("div", "dfp-floatInfoLines");
+    /**
+     * One fact: a key, the family it resolves to, and — only when the family is NOT this
+     * surface's own setting — where it came from. The reason lives in the tooltip: the
+     * visible line stays short, and "why" is one hover away.
+     * @param {string} key - the localized label.
+     * @param {string} value - the family name.
+     * @param {string} tag - the provenance tag, or "" for none.
+     * @param {string} note - the tooltip sentence, or "" for none.
+     * @returns {HTMLElement} the line.
+     */
+    var line = function (key, value, tag, note) {
+      var row = el("div", "dfp-floatInfoLine");
+      row.appendChild(el("span", "dfp-floatInfoKey", key));
+      var shown = el("span", "dfp-floatInfoValue", value);
+      if (note !== "") shown.title = note;
+      row.appendChild(shown);
+      if (tag !== "") row.appendChild(el("span", "dfp-floatInfoFlag", tag));
+      return row;
+    };
+    var hostDefault = t("status.hostDefault");
+    var usesHost = t("status.usesHost");
+    // "Set by this plugin" means the surface's own field OR — for the conversation — the
+    // interface font it takes when its own field is empty (`expandFollow`). Naming a family
+    // the reader chose "DSH's own" was simply wrong: measured on the reporting machine the
+    // conversation field is empty, the interface font is "Noto Serif SC", and the
+    // conversation really does draw with it. The flags come in through `state` because
+    // `config` belongs to the caller.
+    lines.appendChild(
+      line(
+        t("status.dialog"),
+        state.dialog.family,
+        state.dialog.own ? "" : hostDefault,
+        // The note follows where the family CAME FROM, not whether it is the reader's:
+        // a conversation field left empty while the interface font is set is still the
+        // reader's own font, and the tooltip is the only place that says so.
+        state.dialog.fromInterface
+          ? t("status.usesInterface")
+          : state.dialog.own
+            ? ""
+            : usesHost
+      )
+    );
+    lines.appendChild(
+      line(
+        t("status.ui"),
+        state.ui.family,
+        state.ui.follows ? t("status.followDialog") : state.ui.own ? "" : hostDefault,
+        state.ui.follows ? t("status.uiFollowsNote") : state.ui.own ? "" : usesHost
+      )
+    );
+    lines.appendChild(
+      line(
+        t("status.code"),
+        state.code.family,
+        state.code.own ? "" : hostDefault,
+        state.code.own ? "" : usesHost
+      )
+    );
+    if (state.notches > 0) {
+      var weight = line(
+        t("status.weight"),
+        t("status.steps", { count: state.notches }),
+        state.continuous === true ? t("status.continuous") : "",
+        ""
+      );
+      lines.appendChild(weight);
+    }
+    clip.appendChild(lines);
+    block.appendChild(clip);
+    body.appendChild(block);
+    return block;
+  };
+
   /**
    * Start a dot drag from a press on the dot or the card head.
    *
@@ -10818,8 +11940,13 @@ function mountFloatPanel(scope, t, hostCtx) {
     host.textContent = "";
     // One line in the console answers "which build is live": with a linked plugin
     // and a cached client script, "I refreshed" is not evidence on its own.
-    host.setAttribute("data-dfp-build", "2026-10-01-2");
-    var dot = el("button", "dfp-dot");
+    host.setAttribute("data-dfp-build", CLIENT_BUILD);
+    // And which families this build promoted to continuous weight, so a report of
+    // "the slider still has four notches" can be answered without a console session:
+    // an empty attribute means the probe has not (yet) promoted the reader's family,
+    // a missing one means the page is running a build from before the mode existed.
+    if (continuousNames().length > 0) host.setAttribute("data-dfp-continuous", continuousNames().join(", "));
+    else host.removeAttribute("data-dfp-continuous");    var dot = el("button", "dfp-dot");
     dot.type = "button";
     dot.setAttribute("aria-label", t("panel.dot"));
     dot.title = t("panel.dot");
@@ -10913,9 +12040,16 @@ function mountFloatPanel(scope, t, hostCtx) {
       // a card sized on a big screen must still fit a small one. The card fills
       // the wrapper, so the wrapper is the box that gets the size.
       shadow.style.width = "min(" + sized.w + "px,calc(100vw - 32px))";
-      if (sized.h > 0) {
-        shadow.style.height = "min(" + sized.h + "px,calc(100vh - 24px))";
-      }
+      // The stored HEIGHT is a cap on the card, not a fixed box for it. As a fixed box it
+      // left a hole wherever the content had been: folding the panel's own block kept the
+      // card at its stored height with 260px of nothing under the sliders (measured). As a
+      // cap the panel is exactly as tall as its content up to that height, so folding gives
+      // the space back — while a panel dragged shorter than its content still scrolls,
+      // because the card is a flex column whose body owns the overflow. The wrapper is left
+      // to size itself, except mid-drag, where the pointer's own height is in charge.
+      card.style.maxHeight =
+        sized.h > 0 ? "min(" + sized.h + "px,calc(100vh - 24px))" : "";
+      if (resize === null) shadow.style.height = "";
     }
     var head = el("div", "dfp-floatHead");
     // Plain padding on one side only: the two round buttons are out of flow in
@@ -10975,9 +12109,15 @@ function mountFloatPanel(scope, t, hostCtx) {
       startDrag(event, head, state.writable);
     });
 
+    // Every axis lives here, in the same order the card uses, inside a body that
+    // scrolls when the panel has been resized smaller than its content: seven sliders
+    // and a status block do not fit a 160px-tall panel, and a clipped slider is worse
+    // than a scrollbar.
+    var body = el("div", "dfp-floatBody");
+
     var size = config[SIZE_DIALOG_FIELD];
     sliderRow(
-      card,
+      body,
       t("size.dialogLabel"),
       function (next) {
         return (next > 0 ? "+" + next : String(next)) + " " + t("size.unit");
@@ -10993,7 +12133,7 @@ function mountFloatPanel(scope, t, hostCtx) {
 
     var line = config[LINE_HEIGHT_DIALOG_FIELD];
     sliderRow(
-      card,
+      body,
       t("line.dialogLabel"),
       function (next) {
         return String(next) + " " + t("line.unit");
@@ -11009,7 +12149,13 @@ function mountFloatPanel(scope, t, hostCtx) {
 
     // The dialog weight in the family's own steps, like the card's control:
     // the document keeps the offset, the readout counts steps.
-    var dialogStack = formatStack(parseStack(config[STACK_DIALOG_FIELD]));
+    //
+    // The stack comes from the SAME helper the card and the warm-up use. Resolving it
+    // here instead (the configured field alone) meant an unset stack fell through to
+    // the page's computed family, which carries our alias once a family is promoted —
+    // so the panel missed the promotion and kept showing the coarse notches while the
+    // card showed the fine ones.
+    var dialogStack = weightAxisStacks(config).dialog;
     var profile = { min: WEIGHT_DELTA_MIN, max: WEIGHT_DELTA_MAX, step: 1 };
     try {
       profile = weightProfileFor(dialogStack, shared.WEIGHT_LADDER_STRONG);
@@ -11021,6 +12167,13 @@ function mountFloatPanel(scope, t, hostCtx) {
       { min: Math.min(profile.min, storedWeight), max: Math.max(profile.max, storedWeight), step: profile.step },
       storedWeight
     );
+    probeLog("panel-weight", {
+      stack: dialogStack,
+      profile: profile,
+      stored: storedWeight,
+      shape: shape,
+      promoted: continuousNames(),
+    });
     (function () {
       var row = el("div", "dfp-floatRow");
       var label = el("div", "dfp-floatLabel");
@@ -11044,10 +12197,107 @@ function mountFloatPanel(scope, t, hostCtx) {
         else commit({ weightDialog: count * shape.unit });
       });
       row.appendChild(input);
-      card.appendChild(row);
+      body.appendChild(row);
     })();
 
-    card.appendChild(el("div", "dfp-floatStatus", ""));
+    // Every one of the four shaping axes lives here too, in the card's own order, so the
+    // panel can tune the whole conversation without the settings page.
+    sliderRow(
+      body,
+      t("shape.letterLabel"),
+      function (next) {
+        return (next > 0 ? "+" : "") + Number(next).toFixed(2) + "px";
+      },
+      LETTER_SPACING_MIN,
+      LETTER_SPACING_MAX,
+      LETTER_SPACING_STEP,
+      config[LETTER_SPACING_DIALOG_FIELD],
+      function (next) {
+        commit({ letterSpacingDialog: next });
+      }
+    );
+    sliderRow(
+      body,
+      t("shape.wordLabel"),
+      function (next) {
+        return (next > 0 ? "+" : "") + Number(next).toFixed(2) + "px";
+      },
+      WORD_SPACING_MIN,
+      WORD_SPACING_MAX,
+      WORD_SPACING_STEP,
+      config[WORD_SPACING_DIALOG_FIELD],
+      function (next) {
+        commit({ wordSpacingDialog: next });
+      }
+    );
+    sliderRow(
+      body,
+      t("shape.paragraphLabel"),
+      function (next) {
+        return (next > 0 ? "+" : "") + Number(next).toFixed(2) + "px";
+      },
+      PARAGRAPH_SPACING_MIN,
+      PARAGRAPH_SPACING_MAX,
+      PARAGRAPH_SPACING_STEP,
+      config[PARAGRAPH_SPACING_DIALOG_FIELD],
+      function (next) {
+        commit({ paragraphSpacingDialog: next });
+      }
+    );
+    sliderRow(
+      body,
+      t("shape.indentLabel"),
+      function (next) {
+        return Number(next).toFixed(2) + "em";
+      },
+      INDENT_MIN,
+      INDENT_MAX,
+      INDENT_STEP,
+      config[INDENT_DIALOG_FIELD],
+      function (next) {
+        commit({ indentDialog: next });
+      }
+    );
+
+    // What is actually in force, in the panel itself: the three families the page is
+    // really rendering with, then the weight control's shape. An axis that sets no family
+    // reports the one the page hands that surface — measured from the surface itself, not
+    // from `body`, because the two really can differ (the interface is its own axis).
+    var resolved = weightAxisStacks(config);
+    var dialogConfigured = config[STACK_DIALOG_FIELD] !== "";
+    var dialogFamily = primaryFamilyOf(
+      dialogConfigured ? resolved.dialog : liveDialogFamily()
+    );
+    var uiConfigured = config[SANS_FIELD] !== "";
+    var uiFollows = config[UI_FOLLOWS_FIELD] !== false;
+    infoBlock(body, {
+      open: infoOpen,
+      dialog: {
+        family: dialogFamily,
+        // Own: the conversation's own field. From the interface: its field is empty and
+        // the interface font is the one filling it in — still the reader's own choice.
+        own: dialogConfigured || uiConfigured,
+        fromInterface: !dialogConfigured && uiConfigured,
+      },
+      ui: {
+        // Following the conversation means showing the conversation's family: the same
+        // fallback the stylesheet resolves, so the two lines can never disagree.
+        family: uiFollows
+          ? dialogFamily
+          : primaryFamilyOf(uiConfigured ? resolved.ui : liveFamily()),
+        follows: uiFollows,
+        own: uiConfigured,
+      },
+      code: {
+        family: primaryFamilyOf(
+          config[MONO_FIELD] !== "" ? resolved.code : liveCodeFamily()
+        ),
+        own: config[MONO_FIELD] !== "",
+      },
+      continuous: continuousNames().indexOf(dialogFamily) >= 0,
+      notches: shape.max - shape.min + 1,
+    });
+    card.appendChild(body);
     // Edge resize handles: right, bottom and the corner. The card follows the
     // pointer live; one size write lands on release (see `startResize`).
     (function () {
@@ -11233,8 +12483,14 @@ function mountFloatPanel(scope, t, hostCtx) {
     // A document without events still gets the interval.
   }
 
+  // A promotion changes the weight row's shape; the panel redraws itself when one
+  // lands, and stops listening when it goes away.
+  promotionListeners.push(render);
+
   return {
     destroy: function () {
+      var at = promotionListeners.indexOf(render);
+      if (at >= 0) promotionListeners.splice(at, 1);
       if (statusTimer !== null) globalThis.clearTimeout(statusTimer);
       if (closeTimer !== null) globalThis.clearTimeout(closeTimer);
       if (reflowTimer !== null) globalThis.clearTimeout(reflowTimer);