dsh-fonttune 0.2.2 → 0.2.4

package/lib/client.js

@@ -161,9 +161,6 @@ var LIGATURES_DEFAULT = 0;
 var LIGATURES_ON = 1;
 var LIGATURES_OFF = 2;
 
-/** Marker on both injected style tags, used for scoping every rule we write. */
-var MARKER = "dfp";
-
 /** `data-plugin-css` value of the tag applying the configuration. */
 var STYLE_TAG = "dsh-fonttune";
 
@@ -196,20 +193,18 @@ var DEFAULTS = {
 };
 
 /**
- * The axis fields a preset snapshots: everything the card edits, excluding
- * the storage fields themselves.
+ * The axis fields a preset snapshots and the light/dark sets are compared
+ * over: everything the card edits, excluding the storage fields themselves.
  */
 var VALUE_FIELDS = [
   SANS_FIELD,
   STACK_DIALOG_FIELD,
   MONO_FIELD,
-  SIZE_FIELD,
   SIZE_DIALOG_FIELD,
   CODE_SIZE_FIELD,
   WEIGHT_FIELD,
   WEIGHT_DIALOG_FIELD,
   CODE_WEIGHT_FIELD,
-  LINE_HEIGHT_FIELD,
   LINE_HEIGHT_DIALOG_FIELD,
   CODE_LINE_HEIGHT_FIELD,
   LIGATURES_FIELD,
@@ -219,6 +214,25 @@ var VALUE_FIELDS = [
   UI_FOLLOWS_FIELD,
 ];
 
+/**
+ * Axes that are still stored but no longer render: the interface's own size
+ * and line-height.
+ *
+ * DSH 0.1.5-rc.2 publishes no interface size or line-height hook at all (the
+ * measurement lives in `buildAxisCss`), so these two fields inject nothing.
+ * A document written by 0.1.x still carries them, so they keep their schema
+ * entries and stay part of normalization — but they are not value axes: a
+ * preset no longer snapshots a dead field, and a light/dark pair that differs
+ * only here no longer counts as two sets. The card's "reset every axis" clears
+ * them too, so a value nothing shows cannot hide in a document forever.
+ */
+var RETIRED_FIELDS = [SIZE_FIELD, LINE_HEIGHT_FIELD];
+
+/**
+ * Every durable axis field, live and retired: what normalization covers.
+ */
+var DURABLE_FIELDS = VALUE_FIELDS.concat(RETIRED_FIELDS);
+
 /**
  * Longest accepted font stack, in characters (mirrored by the host schema).
  */
@@ -381,8 +395,8 @@ function normalizeField(field, value) {
 function normalizeConfig(value) {
   var source = value !== null && typeof value === "object" ? value : {};
   var config = {};
-  for (var index = 0; index < VALUE_FIELDS.length; index += 1) {
-    var field = VALUE_FIELDS[index];
+  for (var index = 0; index < DURABLE_FIELDS.length; index += 1) {
+    var field = DURABLE_FIELDS[index];
     config[field] = normalizeField(field, source[field]);
   }
   config[PER_THEME_FIELD] = toBool(source[PER_THEME_FIELD]);
@@ -1032,17 +1046,6 @@ function isShorthandName(name) {
   return true;
 }
 
-/**
- * Whether one token (name + value) is a `font` shorthand this plugin may
- * rewrite: a bare `--dsw-font-…` name whose value parses as a shorthand.
- * @param {string} name - custom property name.
- * @param {string} value - the token's untouched value.
- * @returns {boolean}
- */
-function isShorthandToken(name, value) {
-  return isShorthandName(name) && parseShorthand(value) !== null;
-}
-
 /**
  * Whether a token is one this plugin reads and re-declares at all.
  * @param {string} name - custom property name including the leading dashes.
@@ -1071,35 +1074,6 @@ function tokenNames(baseTokens) {
   return names;
 }
 
-/**
- * The interface PART size tokens: everything scalable except the code and
- * markdown families and the delta tokens (which the dialog offset shifts
- * additively, never multiplicatively).
- * @param {Record<string, string>} [baseTokens] - token name to value.
- * @returns {string[]} the names the interface offset re-declares.
- */
-function bodyTokenNames(baseTokens) {
-  return tokenNames(baseTokens).filter(function (name) {
-    return (
-      !isCodeToken(name) &&
-      !isMarkdownToken(name) &&
-      !isDeltaToken(name) &&
-      !isContentToken(name)
-    );
-  });
-}
-
-/**
- * The interface line-height PART tokens (non-code, non-markdown).
- * @param {Record<string, string>} [baseTokens] - token name to value.
- * @returns {string[]}
- */
-function uiLineTokenNames(baseTokens) {
-  return bodyTokenNames(baseTokens).filter(function (name) {
-    return name.indexOf("-line-height") >= 0;
-  });
-}
-
 /**
  * The markdown (dialog) PART tokens: sizes and line heights of the markdown
  * family, excluding code.
@@ -1110,30 +1084,6 @@ function markdownTokenNames(baseTokens) {
   return tokenNames(baseTokens).filter(isMarkdownToken);
 }
 
-/**
- * The markdown content-size DELTA tokens present in a base map.
- * @param {Record<string, string>} [baseTokens] - token name to value.
- * @returns {string[]}
- */
-function deltaTokenNames(baseTokens) {
-  if (baseTokens === null || typeof baseTokens !== "object") return [];
-  return Object.keys(baseTokens).filter(isDeltaToken);
-}
-
-/**
- * The code PART tokens: the `font` shorthands' size/height parts, when the
- * live stylesheets declare them. The shorthands themselves are handled by
- * `codeShorthandTokens`, so they are excluded here to avoid double
- * declarations.
- * @param {Record<string, string>} [baseTokens] - token name to value.
- * @returns {string[]}
- */
-function codeTokenNames(baseTokens) {
-  return tokenNames(baseTokens).filter(function (name) {
-    return isCodeToken(name) && !isShorthandName(name);
-  });
-}
-
 /**
  * Every `font` shorthand token in a base map that parses, sorted by name
  * length (families before variants, mirroring the part-token order).
@@ -1166,17 +1116,6 @@ function markdownShorthandTokens(baseTokens) {
   });
 }
 
-/**
- * The interface (non-markdown, non-code) `font` shorthand tokens.
- * @param {Record<string, string>} [baseTokens] - token name to value.
- * @returns {{name: string, parts: object}[]}
- */
-function uiShorthandTokens(baseTokens) {
-  return shorthandTokens(baseTokens).filter(function (entry) {
-    return !isMarkdownToken(entry.name) && !isCodeToken(entry.name);
-  });
-}
-
 /**
  * The code `font` shorthand tokens.
  * @param {Record<string, string>} [baseTokens] - token name to value.
@@ -1192,6 +1131,66 @@ function codeShorthandTokens(baseTokens) {
  * selectors
  * ------------------------------------------------------------------ */
 
+/**
+ * Build one exclusion that keeps a surface out of a rule.
+ *
+ * The whole list goes into a single `:not(…)`. The long form —
+ * `:not(pre):not(pre *)…` — repeats `:not(` and `)` per argument, and that
+ * chain is copied into both dialog alternatives and the interface rule, so the
+ * compact form saves roughly 120 bytes per copy.
+ *
+ * The trade is specificity: `:not(a):not(b)` SUMS its arguments while
+ * `:not(a, b)` takes the most specific one. Nothing here depends on that sum.
+ * Every rule below carries `!important`, which already beats the theme's
+ * non-important class rules whatever the specificity; the shipped DSH 0.1.5
+ * assets hold exactly one `!important` typography declaration
+ * (`font-size` on inline markdown code, and no size declaration is ever
+ * emitted from here); and the rules that could collide with each other are
+ * held apart by these very exclusions rather than by their weight. Verified
+ * against the shipped bundle and every installed plugin: no other
+ * `!important` `font-weight`/`font-family` rule exists to lose to.
+ *
+ * @param {string[]} selectors - the selectors to exclude.
+ * @returns {string} one `:not(…)` carrying the whole list.
+ */
+function excludeAll(selectors) {
+  return ":not(" + selectors.join(",") + ")";
+}
+
+/**
+ * A code surface, and its descendants: a highlight `<span>` inside a `<pre>`
+ * is not a `pre`, so an exclusion has to reach through ancestry.
+ */
+var CODE_SURFACE_SELECTORS = [
+  "pre",
+  "pre *",
+  "code",
+  "code *",
+  "kbd",
+  "kbd *",
+  "samp",
+  "samp *",
+  "var",
+  "var *",
+  "tt",
+  "tt *",
+  "textarea",
+  "textarea *",
+  '[class*="code" i]',
+  '[class*="code" i] *',
+  '[class*="terminal" i]',
+  '[class*="terminal" i] *',
+];
+
+/**
+ * Everything a code surface must be excluded from a DIALOG-scoped rule: the
+ * code elements themselves AND their descendants (a highlight `<span>` inside
+ * a `<pre>` is not a `pre`, so the exclusion has to reach through ancestry
+ * with a complex `:not()` argument — supported by the Chromium line DSH
+ * targets).
+ */
+var CODE_EXCLUDES = excludeAll(CODE_SURFACE_SELECTORS);
+
 /**
  * What counts as code text for the code axes.
  *
@@ -1230,38 +1229,6 @@ var CODE_SELECTOR = [
   })
   .join(",");
 
-/**
- * Everything a code surface must be excluded from a DIALOG-scoped rule:
- * the code elements themselves AND their descendants (a highlight `<span>`
- * inside a `<pre>` is not a `pre`, so the exclusion has to reach through
- * ancestry with complex `:not()` arguments — supported by the Chromium line
- * DSH targets).
- */
-var CODE_EXCLUDES = [
-  "pre",
-  "pre *",
-  "code",
-  "code *",
-  "kbd",
-  "kbd *",
-  "samp",
-  "samp *",
-  "var",
-  "var *",
-  "tt",
-  "tt *",
-  "textarea",
-  "textarea *",
-  '[class*="code" i]',
-  '[class*="code" i] *',
-  '[class*="terminal" i]',
-  '[class*="terminal" i] *',
-]
-  .map(function (selector) {
-    return ":not(" + selector + ")";
-  })
-  .join("");
-
 /**
  * The dialog surface: DSH renders the conversation markdown in a CSS-module
  * container whose class hashes per release (`_markdown_<hash>_…`). A
@@ -1293,11 +1260,57 @@ var DARK_ATTR = "body[data-ds-dark-theme]";
  * interface's own preview stays inside the rule, and `dfp-previewCode` is a
  * code surface like any other.
  */
-var INTERFACE_EXCLUDES =
-  CODE_EXCLUDES +
-  ":not(.cm-editor):not(.cm-editor *):not(.dfp-previewCode):not(.dfp-previewCode *)" +
-  ':not([class*="_markdown_" i]):not([class*="_markdown_" i] *)' +
-  ":not(.dfp-previewDialog):not(.dfp-previewDialog *)";
+var INTERFACE_EXCLUDES = excludeAll(
+  CODE_SURFACE_SELECTORS.concat([
+    ".cm-editor",
+    ".cm-editor *",
+    ".dfp-previewCode",
+    ".dfp-previewCode *",
+    '[class*="_markdown_" i]',
+    '[class*="_markdown_" i] *',
+    ".dfp-previewDialog",
+    ".dfp-previewDialog *",
+  ])
+);
+
+/**
+ * Split a selector list on its top-level commas only.
+ *
+ * The exclusions hold a selector LIST inside `:not(…)`, so a plain
+ * `split(",")` would cut a selector in half — and the per-theme rules prefix
+ * every selector in the list.
+ * @param {string} selectorList - a comma-separated selector list.
+ * @returns {string[]} the top-level parts, verbatim.
+ */
+function splitSelectorList(selectorList) {
+  var parts = [];
+  var current = "";
+  var depth = 0;
+  var quote = "";
+  for (var index = 0; index < selectorList.length; index += 1) {
+    var character = selectorList[index];
+    if (quote !== "") {
+      current += character;
+      if (character === quote) quote = "";
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      quote = character;
+      current += character;
+      continue;
+    }
+    if (character === "(" || character === "[") depth += 1;
+    if (character === ")" || character === "]") depth -= 1;
+    if (character === "," && depth === 0) {
+      parts.push(current);
+      current = "";
+      continue;
+    }
+    current += character;
+  }
+  parts.push(current);
+  return parts;
+}
 
 /**
  * Prefix every selector in a comma list, for the per-theme rules.
@@ -1306,7 +1319,7 @@ var INTERFACE_EXCLUDES =
  * @returns {string} the prefixed list.
  */
 function prefixSelector(selectorList, prefix) {
-  var parts = selectorList.split(",");
+  var parts = splitSelectorList(selectorList);
   var out = [];
   for (var index = 0; index < parts.length; index += 1) {
     out.push(prefix + " " + parts[index]);
@@ -1468,9 +1481,13 @@ function buildAxisCss(axis, baseTokens, isDark) {
    */
   function pushScopedCodeFamily() {
     var scopedCode = [];
-    var surfaces = CODE_SELECTOR.split(",");
+    var surfaces = splitSelectorList(CODE_SELECTOR);
     for (var cIndex = 0; cIndex < surfaces.length; cIndex += 1) {
-      scopedCode.push('[class*="_markdown_" i] ' + surfaces[cIndex]);
+      var scoped = '[class*="_markdown_" i] ' + surfaces[cIndex];
+      // The dark variant has to carry the theme attribute like every other
+      // rule here, or a per-theme set would re-assert the LIGHT code family
+      // inside the dark dialog.
+      scopedCode.push(isDark ? DARK_ATTR + " " + scoped : scoped);
     }
     declarations.push(scopedCode.join(",") + "{font-family:" + mono + " !important}");
   }
@@ -1567,8 +1584,8 @@ function buildAxisCss(axis, baseTokens, isDark) {
   // (secondary size, both deltas, delta-based heading sizes, heights) at their
   // body-computed values. The offset is therefore added once, at the source —
   // `--dsh-content-font-size` becomes "official base + offset" — and the whole
-  // ladder follows by derivation, with nothing counted twice. The interface
-  // axis never touches this chain (see `bodyTokenNames`), so the conversation
+  // ladder follows by derivation, with nothing counted twice. The retired
+  // interface size axis never touches this chain at all, so the conversation
   // moves only when this axis says so, and a dialog that FOLLOWS the interface
   // follows it through this value.
   var dialogOffsetValue = axis[SIZE_DIALOG_FIELD];
@@ -1980,18 +1997,137 @@ var PRESETS = {
 };
 
 /**
- * Legacy single-purpose helper kept for compatibility: scale the size and the
- * height inside one simple `size/height <family>` shorthand.
- * @param {string} value - a value shaped like `11px/19px var(--ds-font-family-code)`.
- * @param {number} scale - the ratio to apply.
- * @returns {string|null} the scaled shorthand, or null when the shape differs.
+ * The curated groups, in the order the picker lists them.
  */
-function scaleFontShorthand(value, scale) {
-  var parts = parseShorthand(value);
-  if (parts === null || parts.lead !== "") return null;
-  return (
-    "calc((" + parts.size + ") * " + scale + ")/calc((" + parts.height + ") * " + scale + ") " + parts.family
-  );
+var PRESET_GROUPS = [
+  { label: "stack.groupMono", families: PRESETS.mono },
+  { label: "stack.groupCjk", families: PRESETS.cjk },
+  { label: "stack.groupLatin", families: PRESETS.latin },
+  { label: "stack.groupGeneric", families: PRESETS.generic },
+];
+
+/**
+ * How many enumerated families the "installed on this machine" group shows.
+ * The curated groups are the short list; this one is the complete one, so the
+ * cap is only a guard against a machine with an absurd number of families.
+ */
+var MAX_LOCAL_FONTS = 240;
+
+/**
+ * Build the family picker's groups.
+ *
+ * The curated groups are ALWAYS listed: whether or not the browser enumerated
+ * local fonts, and whether or not a search is running. The old shape skipped
+ * them whenever a working catalog met a non-empty query, so a curated family
+ * this machine has not installed could not be found by name at all. Every
+ * family is listed in exactly one group — the local enumeration gives way to
+ * the curated headings rather than repeating what they already offer.
+ *
+ * @param {object} input - the picker's state.
+ * @param {string[]} [input.stack] - the families the stored value names.
+ * @param {boolean} [input.single] - single-pick mode (a West/CJK slot).
+ * @param {string} [input.query] - the search text.
+ * @param {{status: string, families: string[]}} [input.catalog] - enumeration.
+ * @param {number} [input.maxLocal] - cap on the local group's rows.
+ * @returns {Array<{label: string, families: string[]}>} the groups, in the
+ *   order the picker displays them.
+ */
+function pickerGroups(input) {
+  var stack = Array.isArray(input.stack) ? input.stack : [];
+  var single = input.single === true;
+  var query = typeof input.query === "string" ? input.query : "";
+  var catalog =
+    input.catalog && typeof input.catalog === "object"
+      ? input.catalog
+      : { status: "loading", families: [] };
+  var maxLocal = typeof input.maxLocal === "number" ? input.maxLocal : MAX_LOCAL_FONTS;
+  var needle = query.trim().toLowerCase();
+  var index;
+  var matches = function (name) {
+    return needle === "" || String(name).toLowerCase().indexOf(needle) >= 0;
+  };
+
+  // Which families the stack already names. In single mode the stack IS the
+  // one pick, and it stays visible in the curated groups (with its check mark)
+  // so the reader can see where it sits among its own kind.
+  var inStack = {};
+  if (!single) {
+    for (index = 0; index < stack.length; index += 1) {
+      inStack[String(stack[index]).toLowerCase()] = true;
+    }
+  }
+
+  // The curated groups are built FIRST, and the local list gives way to them:
+  // they are the short list the reader scans, and on a real Windows machine
+  // most of the Latin group is installed, so letting the local list win would
+  // empty the curated headings. Everything lands in exactly one group.
+  var curatedLower = {};
+  var curatedGroups = [];
+  for (index = 0; index < PRESET_GROUPS.length; index += 1) {
+    var curated = PRESET_GROUPS[index];
+    var rows = [];
+    for (var nameIndex = 0; nameIndex < curated.families.length; nameIndex += 1) {
+      var name = sanitizeFamily(curated.families[nameIndex]);
+      if (name === "" || !matches(name)) continue;
+      var key = name.toLowerCase();
+      if (inStack[key] === true || curatedLower[key] === true) continue;
+      curatedLower[key] = true;
+      rows.push(name);
+    }
+    if (rows.length > 0) curatedGroups.push({ label: curated.label, families: rows });
+  }
+
+  // Then the enumeration: the complete list, minus everything already offered
+  // by a heading above it.
+  var localRows = [];
+  if (catalog.status === "ready") {
+    var locals = Array.isArray(catalog.families) ? catalog.families : [];
+    for (index = 0; index < locals.length; index += 1) {
+      var localName = sanitizeFamily(locals[index]);
+      if (localName === "" || !matches(localName)) continue;
+      var localKey = localName.toLowerCase();
+      if (inStack[localKey] === true || curatedLower[localKey] === true) continue;
+      curatedLower[localKey] = true;
+      localRows.push(localName);
+      if (localRows.length >= maxLocal) break;
+    }
+  }
+
+  var groups = [];
+  var selectedRows = [];
+  for (index = 0; index < stack.length; index += 1) {
+    if (matches(stack[index])) selectedRows.push(stack[index]);
+  }
+  if (selectedRows.length > 0) {
+    groups.push({ label: "stack.groupSelected", families: selectedRows });
+  }
+  for (index = 0; index < curatedGroups.length; index += 1) {
+    groups.push(curatedGroups[index]);
+  }
+  if (localRows.length > 0) {
+    groups.push({ label: "stack.groupLocal", families: localRows });
+  }
+  return groups;
+}
+
+/**
+ * Whether a cached font-enumeration verdict may be asked for again.
+ *
+ * A working enumeration is final for the session, and a browser that has no
+ * such API at all will never grow one — but a refusal is not: the user can
+ * grant the font permission from the browser's prompt or its site settings.
+ * Retrying is cheap, because a still-blocked permission is rejected instantly
+ * instead of prompting again.
+ *
+ * @param {{status?: string, at?: number, permanent?: boolean}|null} cache - the cached verdict.
+ * @param {number} now - the current time, in milliseconds.
+ * @param {number} retryMs - how long a refusal is trusted.
+ * @returns {boolean} true when the enumeration should run again.
+ */
+function catalogRefreshDue(cache, now, retryMs) {
+  if (cache === null || cache === undefined) return true;
+  if (cache.permanent === true || cache.status === "ready") return false;
+  return now - (cache.at || 0) >= retryMs;
 }
 
 var shared = {
@@ -2018,6 +2154,8 @@ var shared = {
   ACTIVE_PRESET_FIELD: ACTIVE_PRESET_FIELD,
   UI_FOLLOWS_FIELD: UI_FOLLOWS_FIELD,
   VALUE_FIELDS: VALUE_FIELDS,
+  RETIRED_FIELDS: RETIRED_FIELDS,
+  DURABLE_FIELDS: DURABLE_FIELDS,
   SIZE_MIN: SIZE_MIN,
   SIZE_MAX: SIZE_MAX,
   WEIGHT_MIN: WEIGHT_MIN,
@@ -2030,7 +2168,6 @@ var shared = {
   LIGATURES_DEFAULT: LIGATURES_DEFAULT,
   LIGATURES_ON: LIGATURES_ON,
   LIGATURES_OFF: LIGATURES_OFF,
-  MARKER: MARKER,
   STYLE_TAG: STYLE_TAG,
   CARD_STYLE_TAG: CARD_STYLE_TAG,
   DEFAULTS: DEFAULTS,
@@ -2041,7 +2178,17 @@ var shared = {
   MAX_PRESET_NAME: MAX_PRESET_NAME,
   FALLBACK_TOKENS: FALLBACK_TOKENS,
   PRESETS: PRESETS,
+  PRESET_GROUPS: PRESET_GROUPS,
+  MAX_LOCAL_FONTS: MAX_LOCAL_FONTS,
+  pickerGroups: pickerGroups,
+  catalogRefreshDue: catalogRefreshDue,
   MARKDOWN_SELECTOR: MARKDOWN_SELECTOR,
+  CODE_SURFACE_SELECTORS: CODE_SURFACE_SELECTORS,
+  CODE_EXCLUDES: CODE_EXCLUDES,
+  INTERFACE_EXCLUDES: INTERFACE_EXCLUDES,
+  excludeAll: excludeAll,
+  splitSelectorList: splitSelectorList,
+  prefixSelector: prefixSelector,
   DARK_ATTR: DARK_ATTR,
   sanitize: sanitize,
   sanitizeFamily: sanitizeFamily,
@@ -2072,19 +2219,12 @@ var shared = {
   isMarkdownToken: isMarkdownToken,
   isDeltaToken: isDeltaToken,
   isShorthandName: isShorthandName,
-  isShorthandToken: isShorthandToken,
   isScaledToken: isScaledToken,
   tokenNames: tokenNames,
-  codeTokenNames: codeTokenNames,
   markdownTokenNames: markdownTokenNames,
-  bodyTokenNames: bodyTokenNames,
-  uiLineTokenNames: uiLineTokenNames,
-  deltaTokenNames: deltaTokenNames,
   shorthandTokens: shorthandTokens,
   markdownShorthandTokens: markdownShorthandTokens,
-  uiShorthandTokens: uiShorthandTokens,
   codeShorthandTokens: codeShorthandTokens,
-  scaleFontShorthand: scaleFontShorthand,
   isGenericFamilyName: isGenericFamilyName,
   isCJKFamilyName: isCJKFamilyName,
   setWestEntry: setWestEntry,
@@ -2126,7 +2266,6 @@ if (typeof module !== "undefined" && module.exports) module.exports = shared;
 
 var React = require("react");
 var createPortal = require("react-dom").createPortal;
-var primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 
 var h = React.createElement;
 var useCallback = React.useCallback;
@@ -2158,6 +2297,7 @@ var PRESETS_FIELD = shared.PRESETS_FIELD;
 var ACTIVE_PRESET_FIELD = shared.ACTIVE_PRESET_FIELD;
 var UI_FOLLOWS_FIELD = shared.UI_FOLLOWS_FIELD;
 var VALUE_FIELDS = shared.VALUE_FIELDS;
+var RETIRED_FIELDS = shared.RETIRED_FIELDS;
 var SIZE_MIN = shared.SIZE_MIN;
 var SIZE_MAX = shared.SIZE_MAX;
 var WEIGHT_MIN = shared.WEIGHT_MIN;
@@ -2193,8 +2333,24 @@ var setWestEntry = shared.setWestEntry;
 var setEastEntry = shared.setEastEntry;
 var removeStackEntry = shared.removeStackEntry;
 
-/** Services this bundle waits for before it applies. */
-var inject = ["slots", "locale", "settingsScope"];
+/**
+ * Services this bundle waits for before it applies.
+ *
+ * `settingsScope` is deliberately absent: a host that does not provide a
+ * declared service parks the whole package until it appears, and DSH
+ * 0.1.7-alpha.x replaced that service with `configForms` — a plugin asking for
+ * it never activates there. Both settings dialects are looked up at apply time
+ * with `ctx.get` instead (see `pickSettingsScope`).
+ */
+var inject = ["slots", "locale"];
+
+/**
+ * The settings scope and translator `apply` bound, for the seat that renders
+ * the card without handing it either: the alpha line's bundle page renders the
+ * registered component with its own props, so the card falls back to these.
+ */
+var cardScope = null;
+var cardT = null;
 
 /** The weight DSH uses for body text; choosing it means "leave it alone". */
 var NEUTRAL_WEIGHT = 400;
@@ -2224,10 +2380,78 @@ var CHEVRON_PATH =
 var PANEL_HEIGHT = 380;
 
 /**
- * Cap on how many enumerated families the picker lists at once: a machine can
- * report well over a thousand, which would make the panel useless.
+ * The translator the card falls back to when the host hands it no `t`: the
+ * built-in English table says something useful where the key alone would not.
+ * @param {string} key - dictionary key.
+ * @param {Record<string, string>} [params] - `{name}` substitutions.
+ * @returns {string} the text.
+ */
+function fallbackTranslate(key, params) {
+  return translate("en", key, params);
+}
+
+/**
+ * The settings seat a host without any settings service leaves the card: every
+ * control renders disabled over an empty document, exactly like a read-only
+ * deployment. It keeps the card — and therefore the whole configuration page —
+ * from failing to render on a composition this plugin does not know.
+ */
+var MEMORY_SCOPE = {
+  getSnapshot: function () {
+    return {
+      status: "ready",
+      value: {},
+      base: {},
+      user: {},
+      revision: 0,
+      writable: false,
+      mode: "memory",
+    };
+  },
+  subscribe: function () {
+    return function () {};
+  },
+  set: function () {
+    return Promise.reject(new Error("settings are not available in this deployment"));
+  },
+  unset: function () {
+    return Promise.reject(new Error("settings are not available in this deployment"));
+  },
+};
+
+/* ------------------------------------------------------------------ *
+ * inline icons
+ * ------------------------------------------------------------------ */
+
+/**
+ * The 16px "plus" glyph of the "add a font" button.
+ *
+ * Drawn here rather than taken from `@deepseek-ai/dsh-client-ui-primitives`
+ * because that module's icon names are not stable across the host lines this
+ * plugin supports: up to 0.1.5-rc.x the shell exports `IconPlusOutline16`,
+ * while 0.1.7-alpha.x ships the same artwork as `IconPlusOutlineRegular` /
+ * `IconPlusOutlineMedium` — and requiring a name the shell does not have turns
+ * the whole card into a render error. The path is the shipped one, byte for
+ * byte, so the button looks identical on both.
+ * @returns {object} the svg element.
  */
-var MAX_VISIBLE_FONTS = 240;
+function plusIcon() {
+  return h(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+    },
+    h("path", {
+      d: "M8.64453 1.5V7.34961H14.5V8.65039H8.64453V14.5H7.34473V8.65039H1.5V7.34961H7.34473V1.5H8.64453Z",
+      fill: "currentColor",
+    })
+  );
+}
 
 /* ------------------------------------------------------------------ *
  * copy
@@ -2287,13 +2511,9 @@ var DICTS = {
     "monoWest.label": "Code · Western",
     "monoEast.label": "Code · CJK",
     "split.pick": "Choose…",
-    "split.unset": "Not set",
     "split.remove": "Remove {name}",
     "split.rest": "Other fallbacks (reorder them in Advanced): {names}",
 
-    "size.bodyLabel": "Interface font size offset",
-    "size.bodyHint":
-      "Adds {offset} to interface text sizes, on top of DSH's own font-size setting. 0 keeps DSH's sizes.",
     "size.dialogLabel": "Conversation font size offset",
     "size.dialogHint":
       "Adds {offset} to the conversation text sizes, on top of DSH's own font-size setting. 0 keeps DSH's sizes.",
@@ -2312,9 +2532,6 @@ var DICTS = {
     "weight.codeHint":
       "Overrides code blocks, inline code and terminal output only. 400 or unset keeps DSH's own weight.",
 
-    "line.bodyLabel": "Interface line height",
-    "line.bodyHint":
-      "Scales every interface line height by {ratio}. 100% keeps DSH's own line heights.",
     "line.dialogLabel": "Conversation line height",
     "line.dialogHint":
       "Scales every conversation line height by {ratio}. 100% keeps DSH's own line heights.",
@@ -2334,7 +2551,6 @@ var DICTS = {
       "Advanced font-feature-settings value, e.g. \"ss01\" on, \"cv01\" 1. Invalid values are ignored.",
     "feat.placeholder": "\"ss01\" on",
 
-    "synth.label": "Refuse synthetic styles",
     "synth.italic": "No faux italic",
     "synth.italicHint":
       "CJK faces have no italic, so the browser tilts them. On keeps marked text upright.",
@@ -2348,15 +2564,6 @@ var DICTS = {
     "section.ui": "Interface",
     "section.dialog": "Conversation",
     "section.code": "Code",
-    "section.fine": "Global fine-tuning",
-    "section.presets": "Presets",
-    "section.uiHint":
-      "Sidebars, headings, buttons and every other chrome text.",
-    "section.dialogHint":
-      "The conversation markdown: paragraphs, tables and headings.",
-    "section.codeHint": "Code blocks, inline code and terminal output.",
-    "section.fineHint":
-      "Settings that apply to the whole page.",
     "section.open": "Expand {name}",
     "section.close": "Collapse {name}",
 
@@ -2365,13 +2572,6 @@ var DICTS = {
     "ui.own": "Own values",
     "dialog.default": "DSH defaults",
 
-    "theme.label": "Per-theme values",
-    "theme.on": "Light and dark keep separate values",
-    "theme.edit": "Editing theme",
-    "theme.light": "Light",
-    "theme.dark": "Dark",
-    "theme.mismatch":
-      "The page is in {active} mode; the preview below shows the values being edited.",
 
     "dialog.label": "Conversation font",
     "dialog.hint":
@@ -2379,11 +2579,6 @@ var DICTS = {
     "dialogWest.label": "Conversation · Western",
     "dialogEast.label": "Conversation · CJK",
 
-    "preset.save": "Save current",
-    "preset.namePlaceholder": "Preset name",
-    "preset.apply": "Apply",
-    "preset.overwrite": "Overwrite",
-    "preset.delete": "Delete",
     "preset.export": "Export",
     "preset.import": "Import",
     "preset.importPlaceholder": "Paste an exported preset JSON here",
@@ -2394,18 +2589,13 @@ var DICTS = {
     "preset.renamed": "Renamed to “{name}”.",
     "preset.autoSave": "With a preset selected, every change saves into it automatically.",
     "preset.nameUsed": "That name is already taken.",
-    "preset.saved": "Saved “{name}”.",
     "preset.applied": "Applied “{name}”.",
-    "preset.deleted": "Deleted “{name}”.",
-    "preset.updated": "Overwrote “{name}”.",
     "preset.exported": "Presets copied to the clipboard.",
     "preset.imported": "Imported {count} preset(s).",
     "preset.importBad": "That text is not a valid preset export.",
-    "preset.full": "The preset list is full ({max}).",
-    "preset.empty": "No presets saved yet.",
-    "preset.nameTaken": "“{name}” already exists — saving overwrites it.",
+    "preset.exportManual": "Clipboard unavailable — press Ctrl+C to copy the selected text.",
+    "preset.writeFailed": "The setting was not saved: {message}",
 
-    "preview.label": "Preview",
     "preview.sansCaption": "Interface",
     "preview.dialogCaption": "Conversation",
     "preview.monoCaption": "Code",
@@ -2413,8 +2603,6 @@ var DICTS = {
       "The quick brown fox jumps over the lazy dog — 中文排版预览，标点符号，数字 0123456789。",
     "preview.code": "const greet = (name) => `hello ${name}`; // => != >= -> 代码预览",
 
-    "footnote.local":
-      "Stored in the Host settings document. Every change applies immediately.",
   },
   zh: {
     "card.title": "字体增强",
@@ -2467,13 +2655,9 @@ var DICTS = {
     "monoWest.label": "代码 · 西文字体",
     "monoEast.label": "代码 · 中文字体",
     "split.pick": "选择…",
-    "split.unset": "未选择",
     "split.remove": "移除 {name}",
     "split.rest": "其余回退项（在高级模式中排序）：{names}",
 
-    "size.bodyLabel": "界面字号偏移",
-    "size.bodyHint":
-      "给界面文字统一加 {offset}，与设置里的「字号大小」叠加；0 表示保持原样。",
     "size.dialogLabel": "对话字号偏移",
     "size.dialogHint":
       "给对话文字统一加 {offset}，与设置里的「字号大小」叠加；0 表示保持 DSH 原样。",
@@ -2491,8 +2675,6 @@ var DICTS = {
     "weight.codeHint":
       "只覆盖代码块、行内代码与终端输出；400 或未设置表示保持 DSH 原样。",
 
-    "line.bodyLabel": "界面行高",
-    "line.bodyHint": "把界面行高整体缩放为 {ratio}；100% 表示保持原样。",
     "line.dialogLabel": "对话行高",
     "line.dialogHint": "把对话行高整体缩放为 {ratio}；100% 表示保持 DSH 原样。",
     "line.codeLabel": "代码行高",
@@ -2510,7 +2692,6 @@ var DICTS = {
       "高级的 font-feature-settings 值，例如 ss01 on、cv01 1；非法值会被忽略。",
     "feat.placeholder": "\"ss01\" on",
 
-    "synth.label": "拒绝合成样式",
     "synth.italic": "禁用伪斜体",
     "synth.italicHint":
       "中文字体没有斜体，浏览器会把标记文本硬掰歪；开启后保持直立。",
@@ -2523,21 +2704,9 @@ var DICTS = {
     "section.ui": "界面",
     "section.dialog": "对话",
     "section.code": "代码",
-    "section.fine": "全局微调",
-    "section.presets": "预设方案",
-    "section.uiHint": "侧栏、标题、按钮等界面文字。",
-    "section.dialogHint": "会话里的 Markdown：段落、表格与标题。",
-    "section.codeHint": "代码块、行内代码与终端输出。",
-    "section.fineHint": "作用于整页的选项。",
     "section.open": "展开{name}",
     "section.close": "收起{name}",
 
-    "theme.label": "分主题数值",
-    "theme.on": "深浅色各存一套数值",
-    "theme.edit": "正在编辑",
-    "theme.light": "浅色",
-    "theme.dark": "深色",
-    "theme.mismatch": "当前页面是{active}主题，下方预览显示的是正在编辑的那套数值。",
 
     "ui.follow": "跟随对话设置",
     "ui.followHint": "字体与字重",
@@ -2550,11 +2719,6 @@ var DICTS = {
     "dialogWest.label": "对话 · 西文字体",
     "dialogEast.label": "对话 · 中文字体",
 
-    "preset.save": "保存当前",
-    "preset.namePlaceholder": "方案名称",
-    "preset.apply": "应用",
-    "preset.overwrite": "覆盖",
-    "preset.delete": "删除",
     "preset.export": "导出",
     "preset.import": "导入",
     "preset.importPlaceholder": "粘贴导出的方案内容",
@@ -2565,18 +2729,13 @@ var DICTS = {
     "preset.renamed": "已改名为“{name}”。",
     "preset.autoSave": "选中方案后，所有改动自动存入该方案。",
     "preset.nameUsed": "这个名字已被占用。",
-    "preset.saved": "已保存“{name}”。",
     "preset.applied": "已应用“{name}”。",
-    "preset.deleted": "已删除“{name}”。",
-    "preset.updated": "已覆盖“{name}”。",
     "preset.exported": "方案已复制到剪贴板。",
     "preset.imported": "已导入 {count} 个方案。",
     "preset.importBad": "这段内容不是有效的方案导出。",
-    "preset.full": "方案列表已满（{max}）。",
-    "preset.empty": "还没有保存方案。",
-    "preset.nameTaken": "“{name}”已存在，保存将覆盖它。",
+    "preset.exportManual": "剪贴板不可用，按 Ctrl+C 复制下方已选中的内容。",
+    "preset.writeFailed": "设置没有保存成功：{message}",
 
-    "preview.label": "预览",
     "preview.sansCaption": "界面",
     "preview.dialogCaption": "对话",
     "preview.monoCaption": "代码",
@@ -2584,7 +2743,6 @@ var DICTS = {
       "The quick brown fox jumps over the lazy dog —— 中文排版预览，标点符号，数字 0123456789。",
     "preview.code": "const greet = (name) => `hello ${name}`; // => != >= -> 代码预览",
 
-    "footnote.local": "保存在宿主设置文档里；每次改动立即生效。",
   },
 };
 
@@ -2687,7 +2845,6 @@ var CARD_CSS = [
   ".dfp-miniButton{appearance:none;font:inherit;cursor:pointer;white-space:nowrap;flex:none;border-radius:6px;padding:3px 8px;font-size:12px;line-height:16px;color:var(--dsw-alias-label-secondary);background:0 0;border:.5px solid var(--dsw-alias-border-l3)}",
   ".dfp-miniButton:hover:not(:disabled){color:var(--dsw-alias-label-primary);background:var(--dsw-specific-sidebar-nav-item-hover)}",
   ".dfp-miniButton:disabled{opacity:.4;cursor:default}",
-  ".dfp-presetForm{align-items:center;gap:8px;margin-top:10px;display:flex}",
   ".dfp-textInput{flex:1;min-width:0;box-sizing:border-box;padding:5px 8px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-3);border:.5px solid var(--dsw-alias-border-l3);border-radius:8px;font:inherit;font-size:13px;line-height:18px}",
   // The auto-save hint and the transient message share one row: the hint holds
   // the left, the message fades in on the right. The row is always mounted and
@@ -2736,6 +2893,7 @@ var CARD_CSS = [
 
   ".dfp-panel{box-sizing:border-box;position:fixed;z-index:1200;flex-direction:column;width:320px;max-height:380px;padding:8px;background:var(--dsw-alias-bg-layer-2);border:.5px solid var(--dsw-alias-border-l3);border-radius:12px;box-shadow:var(--dsw-shadow-lv3,0 12px 32px #00000024);display:flex;gap:6px}",
   ".dfp-search{width:100%;box-sizing:border-box;padding:5px 8px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-3);border:.5px solid var(--dsw-alias-border-l3);border-radius:8px;font:inherit;font-size:13px;line-height:18px}",
+  ".dfp-exportText{resize:vertical;min-height:54px;font-family:var(--ds-font-family-code,ui-monospace,monospace);font-size:12px;line-height:17px}",
   ".dfp-note{padding:4px 2px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:16px}",
   ".dfp-list{flex-direction:column;gap:1px;flex:1;min-height:0;overflow-y:auto;display:flex}",
   ".dfp-group{padding:6px 6px 2px;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px;position:sticky;top:0;background:var(--dsw-alias-bg-layer-2)}",
@@ -3321,24 +3479,45 @@ function PresetSelect(props) {
  * ------------------------------------------------------------------ */
 
 /**
- * @typedef {{status: "unsupported"|"loading"|"denied"|"ready", families: string[]}} Catalog
+ * @typedef {{status: "unsupported"|"loading"|"denied"|"ready", families: string[],
+ *   at?: number, permanent?: boolean}} Catalog
  */
 
 /** Enumeration is session-stable, so it is resolved once and kept. */
 var catalogCache = null;
 
+/**
+ * How long a refused (or empty) enumeration is trusted before the picker asks
+ * again. Answering "denied" and never retrying is wrong in the case that
+ * actually happens: the user grants the permission from the browser's prompt
+ * or site settings and expects the list to fill in — and when the permission
+ * is still blocked the browser rejects the call instantly without prompting,
+ * so the retry costs nothing.
+ */
+var CATALOG_RETRY_MS = 20000;
+
+/** The clock, injectable so the retry window is testable without waiting. */
+var catalogNow = function () {
+  return Date.now();
+};
+
 /**
  * Enumerate installed families; the built-in presets stand in when the browser
  * cannot or will not enumerate them.
+ * @param {boolean} [force] - ignore a cached refusal and ask again.
  * @returns {Promise<Catalog>} the catalog.
  */
-async function loadCatalog() {
-  if (catalogCache !== null) return catalogCache;
+async function loadCatalog(force) {
+  var now = catalogNow();
+  if (force !== true && !shared.catalogRefreshDue(catalogCache, now, CATALOG_RETRY_MS)) {
+    return catalogCache;
+  }
   var host = /** @type {{queryLocalFonts?: () => Promise<Array<{family: string}>>}} */ (
     globalThis
   );
   if (typeof host.queryLocalFonts !== "function") {
-    catalogCache = { status: "unsupported", families: [] };
+    // No API at all: retrying cannot help, and the picker says so.
+    catalogCache = { status: "unsupported", families: [], at: now, permanent: true };
     return catalogCache;
   }
   try {
@@ -3358,11 +3537,11 @@ async function loadCatalog() {
     });
     catalogCache =
       families.length === 0
-        ? { status: "unsupported", families: [] }
-        : { status: "ready", families: families };
+        ? { status: "unsupported", families: [], at: now }
+        : { status: "ready", families: families, at: now };
   } catch (error) {
     // A refused permission is the common case here: `queryLocalFonts` prompts.
-    catalogCache = { status: "denied", families: [] };
+    catalogCache = { status: "denied", families: [], at: now };
   }
   return catalogCache;
 }
@@ -3425,13 +3604,65 @@ function classifyFamily(name) {
   return verdict;
 }
 
-/** Preset groups, in the order the picker lists them. */
-var PRESET_GROUPS = [
-  { label: "stack.groupMono", families: PRESETS.mono },
-  { label: "stack.groupCjk", families: PRESETS.cjk },
-  { label: "stack.groupLatin", families: PRESETS.latin },
-  { label: "stack.groupGeneric", families: PRESETS.generic },
-];
+/* ------------------------------------------------------------------ *
+ * clipboard
+ * ------------------------------------------------------------------ */
+
+/**
+ * Copy through the legacy selection path.
+ *
+ * This is not a museum piece: the async Clipboard API only exists in a secure
+ * context, and the deployment note in this repository's README documents a
+ * remote HTTP origin where `navigator.clipboard` is simply absent. A
+ * selection-based copy still works there, and it also works when the async
+ * call is refused without the clipboard-write permission.
+ * @param {string} text - what to put on the clipboard.
+ * @returns {boolean} whether the copy command reported success.
+ */
+function copyBySelection(text) {
+  if (typeof document === "undefined" || !document.body) return false;
+  if (typeof document.execCommand !== "function") return false;
+  var area = null;
+  try {
+    area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    // Off-screen rather than hidden: `display:none` cannot hold a selection.
+    area.style.position = "fixed";
+    area.style.top = "-1000px";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    return document.execCommand("copy") === true;
+  } catch (error) {
+    return false;
+  } finally {
+    if (area !== null && area.parentNode) area.parentNode.removeChild(area);
+  }
+}
+
+/**
+ * Copy text, trying the async API first and the selection fallback after it.
+ * @param {string} text - what to put on the clipboard.
+ * @returns {Promise<boolean>} whether the text reached the clipboard.
+ */
+async function copyText(text) {
+  var nav = globalThis.navigator;
+  if (
+    nav !== undefined &&
+    nav !== null &&
+    nav.clipboard !== undefined &&
+    typeof nav.clipboard.writeText === "function"
+  ) {
+    try {
+      await nav.clipboard.writeText(text);
+      return true;
+    } catch (error) {
+      // No permission, or no clipboard in this context: fall through.
+    }
+  }
+  return copyBySelection(text);
+}
 
 /* ------------------------------------------------------------------ *
  * the family picker
@@ -3576,7 +3807,6 @@ function StackPicker(props) {
     commit(families.concat([name]));
   };
 
-  var needle = query.trim().toLowerCase();
   var selectedLower = {};
   if (single) {
     if (typeof props.value === "string" && props.value !== "") {
@@ -3587,47 +3817,15 @@ function StackPicker(props) {
       selectedLower[families[selectedIndex].toLowerCase()] = true;
     }
   }
-  var matches = function (name) {
-    return needle === "" || name.toLowerCase().indexOf(needle) >= 0;
-  };
-  var options = [];
-  var pushGroup = function (labelKey, names, limit, skipSelected) {
-    var rows = [];
-    for (var index = 0; index < names.length; index += 1) {
-      var name = sanitizeFamily(names[index]);
-      if (name === "" || !matches(name)) continue;
-      if (skipSelected === true && selectedLower[name.toLowerCase()] === true) continue;
-      rows.push(name);
-      if (limit !== undefined && rows.length >= limit) break;
-    }
-    if (rows.length > 0) options.push({ label: labelKey, families: rows });
-  };
-
-  var selectedRows = [];
-  for (var familyIndex = 0; familyIndex < families.length; familyIndex += 1) {
-    if (matches(families[familyIndex])) selectedRows.push(families[familyIndex]);
-  }
-  if (selectedRows.length > 0) {
-    options.push({ label: "stack.groupSelected", families: selectedRows });
-  }
-
-  if (catalog.status === "ready") {
-    if (needle === "") {
-      for (var groupIndex = 0; groupIndex < PRESET_GROUPS.length; groupIndex += 1) {
-        pushGroup(PRESET_GROUPS[groupIndex].label, PRESET_GROUPS[groupIndex].families, undefined, !single);
-      }
-    }
-    pushGroup("stack.groupLocal", catalog.families, MAX_VISIBLE_FONTS, !single);
-  } else {
-    for (var fallbackIndex = 0; fallbackIndex < PRESET_GROUPS.length; fallbackIndex += 1) {
-      pushGroup(
-        PRESET_GROUPS[fallbackIndex].label,
-        PRESET_GROUPS[fallbackIndex].families,
-        undefined,
-        !single
-      );
-    }
-  }
+  // The grouping itself is pure and lives in the shared core, where it is
+  // covered without a browser: which rows appear, in which order, and never
+  // twice.
+  var options = shared.pickerGroups({
+    stack: families,
+    single: single,
+    query: query,
+    catalog: catalog,
+  });
 
   var typed = query.trim();
   var typedKnown = false;
@@ -3904,7 +4102,7 @@ function StackPicker(props) {
               setOpen(!open);
             },
           },
-          h(primitives.IconPlusOutline16, null),
+          plusIcon(),
           h("span", null, t("stack.add"))
         )
       )
@@ -4077,6 +4275,24 @@ function firstFamily(stack) {
  * the card
  * ------------------------------------------------------------------ */
 
+/**
+ * The card as DSH 0.1.7-alpha.x's Plugins page renders it.
+ *
+ * That page contributes one entry per plugin (`plugins.item`) and asks that one
+ * component for two different views: a one-line `summary` for the card in the
+ * list, and the `page` body once the entry is opened. The summary is answered
+ * with the card's own description, and every other view is the card itself, so
+ * the same UI serves the rc line's configuration cell and the alpha's plugin
+ * page without a second implementation.
+ * @param {object} props - the view asked for plus the injected face.
+ * @returns {object|string} the card, or the one-line summary.
+ */
+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 });
+}
+
 /**
  * Render the plugin's card: the settings section dispatches this component
  * under the namespace key, and the host has to serve that namespace for it to
@@ -4094,8 +4310,11 @@ function firstFamily(stack) {
  * @returns {object} the card element.
  */
 function FontCard(props) {
-  var t = props.t;
-  var scope = props.scope;
+  // The registration hands the card its face on the line that supports
+  // `inject`; the alpha's bundle page renders it with its own props, so the
+  // 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);
   var [view, setView] = useState(readViewMode);
   var [expanded, setExpanded] = useState(null);
@@ -4105,6 +4324,8 @@ function FontCard(props) {
   // effect runs again instead of ignoring the second one.
   var [presetStatus, setPresetStatus] = useState({ text: "", id: 0 });
   var [statusShown, setStatusShown] = useState(false);
+  /** The exported JSON when the clipboard refused it: shown selected instead. */
+  var [exportText, setExportText] = useState("");
   var [renaming, setRenaming] = useState(false);
   var [importOpen, setImportOpen] = useState(false);
   /** True while the card itself writes a whole preset's values: the edits
@@ -4191,19 +4412,71 @@ function FontCard(props) {
     clear(field);
     mirrorPreset(field, DEFAULTS[field]);
   };
-  var submit = function (field, value) {
-    var result = scope.set(field, value);
+  /**
+   * Report a write the settings document refused. A silent failure is the
+   * worst outcome here: the control goes back to showing the stored value and
+   * the user is left believing the change was saved.
+   * @param {unknown} error - the rejection reason, or a boolean refusal.
+   */
+  var writeFailed = function (error) {
+    var message =
+      error === false || error === undefined
+        ? "the host refused the write"
+        : error && error.message
+          ? String(error.message)
+          : String(error);
+    if (message.length > 160) message = message.slice(0, 160) + "…";
+    showStatus(t("preset.writeFailed", { message: message }));
+  };
+  /**
+   * Follow one queued settings write.
+   *
+   * The two host lines answer differently: up to 0.1.5-rc.x the scope resolves
+   * a promise that rejects on a transport failure, while 0.1.7-alpha.x resolves
+   * `false` for a write the host refused (a stale revision, say). Both are
+   * reported, and a refused write is never left looking saved.
+   * @param {unknown} result - what the scope returned.
+   */
+  var followWrite = function (result) {
+    if (result === false) {
+      writeFailed(result);
+      return;
+    }
+    if (result && typeof result.then === "function") {
+      result.then(function (accepted) {
+        if (accepted === false) writeFailed(accepted);
+      }, function (error) {
+        // The scope reloads the Host state itself; the status row is what
+        // keeps the user from thinking the change stuck.
+        writeFailed(error);
+      });
+      return;
+    }
     if (result && typeof result.catch === "function") {
-      result.catch(function () {
-        // A failed write reloads the Host state through the scope itself.
+      result.catch(function (error) {
+        writeFailed(error);
       });
     }
   };
+  var submit = function (field, value) {
+    var result;
+    try {
+      result = scope.set(field, value);
+    } catch (error) {
+      writeFailed(error);
+      return;
+    }
+    followWrite(result);
+  };
   var clear = function (field) {
-    var result = scope.unset(field);
-    if (result && typeof result.catch === "function") {
-      result.catch(function () {});
+    var result;
+    try {
+      result = scope.unset(field);
+    } catch (error) {
+      writeFailed(error);
+      return;
     }
+    followWrite(result);
   };
   var overridden = function (field) {
     return Object.prototype.hasOwnProperty.call(user, field);
@@ -4542,21 +4815,23 @@ function FontCard(props) {
     showStatus(t("preset.renamed", { name: name }));
   };
 
+  /**
+   * Hand the preset list over as JSON: the clipboard when it is available,
+   * and otherwise a selected read-only box with the same text in it. The old
+   * fallback printed the export into the one-line status row, which truncated
+   * the JSON at 120 characters — a message that could not be copied from.
+   */
   var exportPresets = function () {
     var text = JSON.stringify(presetList);
-    var navigator = globalThis.navigator;
-    if (navigator !== undefined && navigator.clipboard !== undefined) {
-      navigator.clipboard
-        .writeText(text)
-        .then(function () {
-          showStatus(t("preset.exported"));
-        })
-        .catch(function () {
-          showStatus(text.slice(0, 200) + "…");
-        });
-    } else {
-      showStatus(text.slice(0, 120) + "…");
-    }
+    void copyText(text).then(function (copied) {
+      if (copied) {
+        setExportText("");
+        showStatus(t("preset.exported"));
+        return;
+      }
+      setExportText(text);
+      showStatus(t("preset.exportManual"));
+    });
   };
   var importPresets = function (text) {
     var parsed = normalizePresets(text);
@@ -4852,6 +5127,25 @@ function FontCard(props) {
                     if (text !== "") importPresets(text);
                   },
                 })
+              : null,
+            // The clipboard-less export: the same JSON, already selected, so
+            // the one thing left to do is press the copy shortcut.
+            exportText !== ""
+              ? h("textarea", {
+                  className: "dfp-search dfp-exportText",
+                  rows: 3,
+                  readOnly: true,
+                  autoFocus: true,
+                  spellCheck: false,
+                  "aria-label": t("preset.exportManual"),
+                  value: exportText,
+                  onFocus: function (event) {
+                    event.target.select();
+                  },
+                  onCopy: function () {
+                    setExportText("");
+                  },
+                })
               : null
           ),
 
@@ -5075,6 +5369,11 @@ function FontCard(props) {
                   for (var index = 0; index < VALUE_FIELDS.length; index += 1) {
                     clear(VALUE_FIELDS[index]);
                   }
+                  // The retired axes are cleared too: they render nothing, so a
+                  // value left behind would be invisible forever.
+                  for (var retired = 0; retired < RETIRED_FIELDS.length; retired += 1) {
+                    clear(RETIRED_FIELDS[retired]);
+                  }
                   clear(DARK_VALUES_FIELD);
                   // Auto-save: the reset IS a change to the active preset, so
                   // its snapshot follows back to the neutral defaults.
@@ -5118,7 +5417,231 @@ function apply(ctx) {
   var applyCss = createStylesheet(function () {
     return tokens;
   });
-  var scope = ctx.settingsScope.bind({ namespace: NAMESPACE });
+
+  /**
+   * Look a service up without declaring it.
+   *
+   * Declaring a name the running host does not provide parks the whole package
+   * until it appears — on DSH 0.1.7-alpha.x a declared `settingsScope` left the
+   * Web UI waiting on a service that no longer exists. Both routes are tried:
+   * `ctx.get(name)` first, then the service property older lines also expose.
+   * @param {string} name - the service name.
+   * @returns {object|null} the service, or null when this host has none.
+   */
+  var getService = function (name) {
+    try {
+      if (typeof ctx.get === "function") {
+        var found = ctx.get(name);
+        if (found) return found;
+      }
+    } catch (error) {
+      // fall through to the property read
+    }
+    try {
+      return ctx[name] || null;
+    } catch (error) {
+      return null;
+    }
+  };
+
+  /**
+   * Whether one served namespace is THIS plugin's form.
+   *
+   * The alpha keys a form by profile entry id, which the installing profile's
+   * patch decides, so the entry's own fields are what identify us: either the
+   * served schema or the values it carries name them.
+   * @param {object} entry - one namespace from the describe view.
+   * @returns {boolean} true when the entry is this plugin's.
+   */
+  var isOurNamespace = function (entry) {
+    var schema = "";
+    try {
+      schema = JSON.stringify((entry && entry.schema) || {});
+    } catch (error) {
+      schema = "";
+    }
+    if (schema.indexOf(UI_FOLLOWS_FIELD) >= 0 && schema.indexOf(STACK_DIALOG_FIELD) >= 0) {
+      return true;
+    }
+    var values = (entry && (entry.value || entry.user || entry.base)) || {};
+    return (
+      Object.prototype.hasOwnProperty.call(values, UI_FOLLOWS_FIELD) &&
+      Object.prototype.hasOwnProperty.call(values, STACK_DIALOG_FIELD)
+    );
+  };
+
+  /**
+   * The profile entry id the `configForms` dialect addresses settings by.
+   *
+   * Up to 0.1.5-rc.x a namespace is a name the plugin registers; from
+   * 0.1.7-alpha.x the settings service derives a form per composed entry and
+   * keys it by that entry's id — which the installing profile's patch decides,
+   * so nothing here may hard-code it. The served view is the only honest
+   * answer: while it has not arrived this returns null, and the caller waits
+   * for it instead of guessing a name whose form could never be written.
+   * @param {object} forms - the `configForms` service.
+   * @returns {string|null} the entry id, or null while the host has not served it.
+   */
+  var formsNamespace = function (forms) {
+    var view = null;
+    try {
+      view = forms.describe ? forms.describe().getSnapshot().view : null;
+    } catch (error) {
+      view = null;
+    }
+    var served = (view && view.namespaces) || [];
+    if (globalThis.__DFP_PROBE__ === true) {
+      console.log(
+        "[dfp-probe] served namespaces " +
+          JSON.stringify(
+            served.map(function (item) {
+              return item && item.ns;
+            })
+          )
+      );
+    }
+    for (var index = 0; index < served.length; index += 1) {
+      if (isOurNamespace(served[index])) {
+        if (globalThis.__DFP_PROBE__ === true) {
+          console.log("[dfp-probe] matched by served schema: " + String(served[index].ns));
+        }
+        return served[index].ns;
+      }
+    }
+    return null;
+  };
+
+  /**
+   * A scope that adopts the host's scope the moment the host serves it.
+   *
+   * The alpha's `configForms` can be asked for a form before its describe view
+   * has arrived — `get(id)` then answers with a not-ready controller for that
+   * id, and every write through it is refused. This stands in for the scope
+   * until the real one is identifiable, forwards the card's subscription to it
+   * on adoption, and lets the card re-read immediately afterwards.
+   * @returns {object} the pending scope, with an `adopt` seat for the caller.
+   */
+  var createPendingScope = function () {
+    var target = null;
+    var listeners = [];
+    return {
+      getSnapshot: function () {
+        return target === null
+          ? {
+              status: "loading",
+              value: undefined,
+              base: undefined,
+              user: undefined,
+              revision: undefined,
+              writable: false,
+              mode: "pending",
+            }
+          : target.getSnapshot();
+      },
+      subscribe: function (listener) {
+        if (target !== null) return target.subscribe(listener);
+        listeners.push(listener);
+        return function () {
+          var at = listeners.indexOf(listener);
+          if (at >= 0) listeners.splice(at, 1);
+        };
+      },
+      set: function (field, value) {
+        if (target === null) {
+          return Promise.reject(new Error("the settings service is still starting"));
+        }
+        return target.set(field, value);
+      },
+      unset: function (field) {
+        if (target === null) {
+          return Promise.reject(new Error("the settings service is still starting"));
+        }
+        return target.unset(field);
+      },
+      /** Hand over the real scope once it is identifiable; true when taken. */
+      adopt: function (next) {
+        if (target !== null || next === null || next === undefined) return false;
+        target = next;
+        var pending = listeners.slice();
+        listeners.length = 0;
+        for (var index = 0; index < pending.length; index += 1) {
+          target.subscribe(pending[index]);
+          pending[index]();
+        }
+        return true;
+      },
+    };
+  };
+
+  /**
+   * Bind the settings scope in whichever dialect the running host speaks: the
+   * `settingsScope` service up to 0.1.5-rc.x (`bind({namespace})`), the
+   * `configForms` service from 0.1.7-alpha.x (`get(entryId)`). Both expose the
+   * same snapshot/`set`/`unset` face, so one card covers them.
+   * @returns {object|null} the bound scope, or null when neither dialect answered.
+   */
+  var pickSettingsScope = function () {
+    var settingsScope = getService("settingsScope");
+    if (settingsScope && typeof settingsScope.bind === "function") {
+      try {
+        var bound = settingsScope.bind({ namespace: NAMESPACE });
+        if (bound) return bound;
+      } catch (error) {
+        // fall through to the newer dialect
+      }
+    }
+    var forms = getService("configForms");
+    if (forms && typeof forms.get === "function") {
+      var bindAlphaForm = function () {
+        var ns = formsNamespace(forms);
+        if (ns === null) return null;
+        try {
+          var form = forms.get(ns);
+          return form && typeof form.getSnapshot === "function" ? form : null;
+        } catch (error) {
+          return null;
+        }
+      };
+      var immediate = bindAlphaForm();
+      if (immediate !== null) return immediate;
+      var pending = createPendingScope();
+      var mirror = null;
+      try {
+        mirror = typeof forms.describe === "function" ? forms.describe() : null;
+      } catch (error) {
+        mirror = null;
+      }
+      var offMirror = null;
+      var adopt = function () {
+        var form = bindAlphaForm();
+        if (form === null) return;
+        if (!pending.adopt(form)) return;
+        if (typeof offMirror === "function") offMirror();
+      };
+      if (mirror && typeof mirror.subscribe === "function") {
+        offMirror = mirror.subscribe(adopt);
+        if (typeof mirror.ensure === "function") mirror.ensure();
+      }
+      adopt();
+      return pending;
+    }
+    return null;
+  };
+
+  var scope = pickSettingsScope() || MEMORY_SCOPE;
+  if (globalThis.__DFP_PROBE__ === true) {
+    var probeSnapshot = scope.getSnapshot ? scope.getSnapshot() : {};
+    console.log(
+      "[dfp-probe] scope " +
+        JSON.stringify({
+          mode: probeSnapshot.mode,
+          status: probeSnapshot.status,
+          revision: probeSnapshot.revision,
+          writable: probeSnapshot.writable,
+          value: probeSnapshot.value,
+        })
+    );
+  }
   var appliedOverrides = "";
 
   /**
@@ -5191,7 +5714,38 @@ function apply(ctx) {
     function () {
       if (typeof document === "undefined") return undefined;
       var lastSignature = "";
-      var recheck = function () {
+      var lastGate = null;
+      var ticks = 0;
+      // Reading the base tokens walks every property of every rule of every
+      // stylesheet — far too much to repeat every four seconds forever. This
+      // gate covers everything that moves those tokens in DSH: the theme
+      // writes its content font size inline on `body`, a light/dark switch
+      // swaps the class on `html`, and a lazily loaded view adds a stylesheet.
+      // A full sweep still runs every Nth tick, which is what catches an
+      // in-place rewrite inside the CSS-in-JS sheet.
+      var GATE_TICKS_PER_SWEEP = 8;
+      var gate = function () {
+        var inline = "";
+        var root = null;
+        try {
+          inline = document.body ? document.body.getAttribute("style") || "" : "";
+          root = document.documentElement;
+        } catch (error) {
+          inline = "";
+        }
+        return (
+          inline +
+          "|" +
+          (root ? root.className || "" : "") +
+          "|" +
+          document.styleSheets.length
+        );
+      };
+      var recheck = function (force) {
+        ticks += 1;
+        var current = gate();
+        if (force !== true && ticks % GATE_TICKS_PER_SWEEP !== 0 && current === lastGate) return;
+        lastGate = current;
         var next = readBaseTokens();
         var signature = "";
         var name;
@@ -5208,7 +5762,9 @@ function apply(ctx) {
         sync();
       };
       scheduleRecheck = recheck;
-      var timer = globalThis.setTimeout(recheck, 500);
+      var timer = globalThis.setTimeout(function () {
+        recheck(true);
+      }, 500);
       var interval = globalThis.setInterval(recheck, 4000);
       return function () {
         globalThis.clearTimeout(timer);
@@ -5223,7 +5779,8 @@ function apply(ctx) {
       // this hook; the polling recheck still covers theme changes there.
       if (typeof ctx.on !== "function") return undefined;
       return ctx.on("theme/change", function () {
-        if (scheduleRecheck !== null) scheduleRecheck();
+        // Forced: the theme may have moved without touching the cheap gate.
+        if (scheduleRecheck !== null) scheduleRecheck(true);
       });
     },
     "dsh-fonttune: theme change adoption"
@@ -5238,6 +5795,9 @@ function apply(ctx) {
     }
     return translate(locale, key, params);
   };
+  // The card reads these when a seat renders it without the injected face.
+  cardScope = scope;
+  cardT = t;
   ctx.effect(
     function () {
       return ctx.locale.register(NAMESPACE, DICTS);
@@ -5245,18 +5805,59 @@ function apply(ctx) {
     "dsh-fonttune: dictionaries"
   );
 
-  ctx.slots.inject("settings.plugin.item", function () {
-    return ctx.slots.register(
-      {
-        name: "settings.plugin.item",
-        key: NAMESPACE,
+  /**
+   * Offer the card in one slot seat.
+   *
+   * Which seat a host declares is a line difference, not a preference, and the
+   * three are not alternatives to pick from — each is simply inert where a host
+   * never declares it:
+   *
+   *  * `settings.plugin.item` — up to 0.1.5-rc.x, a keyed cell under
+   *    Settings → Plugins → Plugin configuration (keyed by the namespace);
+   *  * `plugins.item` — 0.1.7-alpha.x's own entry in the Plugins page's
+   *    official list, which is how EVERY plugin page is contributed there (the
+   *    built-in settings pages do the same), and the seat that needs no
+   *    installed package behind it;
+   *  * `plugins.bundle.config` — the alpha's per-package page, keyed by the npm
+   *    package name, for a profile that installed this plugin as a bundle.
+   *
+   * @param {string} seat - the slot name.
+   * @param {object} options - the registration options that seat looks up.
+   * @param {Function} [component] - the component to register; the card itself
+   *   unless a seat hands it props the card does not read.
+   */
+  var offerCard = function (seat, options, component) {
+    ctx.slots.inject(seat, function () {
+      var registration = {
+        name: seat,
+        locale: NAMESPACE,
         inject: function () {
           return { scope: scope, t: t };
         },
+      };
+      for (var field in options) {
+        if (Object.prototype.hasOwnProperty.call(options, field)) {
+          registration[field] = options[field];
+        }
+      }
+      return ctx.slots.register(registration, component === undefined ? FontCard : component);
+    });
+  };
+  if (scope !== MEMORY_SCOPE) {
+    offerCard("settings.plugin.item", { key: NAMESPACE });
+    offerCard("plugins.bundle.config", { key: "dsh-fonttune" });
+    offerCard(
+      "plugins.item",
+      {
+        id: "fonttune",
+        order: 40,
+        label: function () {
+          return t("card.title");
+        },
       },
-      FontCard
+      FontCardPage
     );
-  });
+  }
 }
 
 exports.apply = apply;