dsh-fonttune 0.6.2 → 0.7.1

package/lib/client.js

@@ -1194,6 +1194,15 @@ function floatBoundsPick(rects, viewport) {
   if (!isFinite(vh) || vh <= 0) vh = FLOAT_VIEWPORT_H;
   var full = { left: 0, top: 0, right: vw, bottom: vh, width: vw, height: vh };
   var list = Array.isArray(rects) ? rects : [];
+  // A region narrower than one dot used to count as "no region at all", and the
+  // fallback was the WHOLE viewport — so in a narrow window the dot parked on the
+  // window's own corner, over the sidebar, instead of on the conversation's. The
+  // largest readable box is kept as a fallback, and it names itself in `index` so
+  // the watcher holds the box whose size actually defines the region. `full` is
+  // left for a page with no region at all — or only degenerate 0-area rects.
+  var best = null;
+  var bestIndex = -1;
+  var bestArea = -1;
   for (var index = 0; index < list.length; index += 1) {
     var box = floatBoxOf(list[index]);
     if (box === null) continue;
@@ -1203,12 +1212,18 @@ function floatBoundsPick(rects, viewport) {
     var bottom = Math.max(0, Math.min(vh, box.bottom));
     var width = right - left;
     var height = bottom - top;
+    if (width > 0 && height > 0 && width * height > bestArea) {
+      bestArea = width * height;
+      bestIndex = index;
+      best = { left: left, top: top, right: right, bottom: bottom, width: width, height: height };
+    }
     if (width < FLOAT_BOUNDS_MIN || height < FLOAT_BOUNDS_MIN) continue;
     return {
       index: index,
       bounds: { left: left, top: top, right: right, bottom: bottom, width: width, height: height },
     };
   }
+  if (best !== null) return { index: bestIndex, bounds: best };
   return { index: -1, bounds: full };
 }
 
@@ -1327,6 +1342,36 @@ function floatTransformOrigin(quadrant) {
   return "100% 100%";
 }
 
+/**
+ * Which side the open CARD grows towards: the one with more room for it.
+ *
+ * The card hangs off the dot, so it can only extend one way from it, and the
+ * side that holds more of the card is the side the conversation has room for.
+ * Each axis compares the room beyond the dot's own box on either side and sends
+ * the card to the larger one — which is also the side its middle ends up on, so
+ * "the panel goes to the corner it sits in" holds by construction.
+ *
+ * This is the CARD's rule, not the dot's: the dot keeps the corner it remembers
+ * living in (see `floatCornerPoint`), while a rule shared by both is what made
+ * the card jump whenever the dot crossed a line the card had not. The answer
+ * depends on the dot and the region and on nothing else — never on a card it
+ * just placed — so it cannot vote itself back and forth.
+ * @param {unknown} bounds - the region, as `floatBoundsFrom` returns it.
+ * @param {number} x - the dot's left edge, in CSS pixels.
+ * @param {number} y - the dot's top edge, in CSS pixels.
+ * @param {number} [dot] - the dot's diameter (defaults to FLOAT_DOT).
+ * @returns {string} one of "tl", "tr", "bl", "br" — the quadrant the card is
+ *   anchored on, which is the corner it grows away from.
+ */
+function floatCardCorner(bounds, x, y, dot) {
+  var box = floatBoxOf(bounds);
+  if (box === null) box = { left: 0, top: 0, right: FLOAT_VIEWPORT_W, bottom: FLOAT_VIEWPORT_H };
+  var size = dot === undefined ? FLOAT_DOT : dot;
+  var growRight = box.right - x >= x + size - box.left;
+  var growDown = box.bottom - y >= y + size - box.top;
+  return (growDown ? "t" : "b") + (growRight ? "l" : "r");
+}
+
 /**
  * Which corner of the card lands on the dot, and where the expansion starts.
  *
@@ -1853,6 +1898,47 @@ function normalizeDarkValues(value, relative) {
 /** The three axes that share the weight scale (and its marker). */
 var WEIGHT_FIELDS = [WEIGHT_FIELD, WEIGHT_DIALOG_FIELD, CODE_WEIGHT_FIELD];
 
+/**
+ * Return a copy of a sparse dark-theme override map with one field changed.
+ *
+ * The map holds only the fields the reader overrode for the dark theme; an
+ * absent field inherits the light value. `undefined` therefore means "stop
+ * overriding", not "set to empty" — that distinction is what lets the card show
+ * "follows the light set" instead of a value the reader never chose.
+ * @param {unknown} map - the current sparse map (anything object-shaped).
+ * @param {string} field - a settings field name.
+ * @param {string|number|boolean|undefined} value - the override, or undefined to clear it.
+ * @returns {Record<string, string|number|boolean>} a new map; the input is untouched.
+ */
+function withDarkOverride(map, field, value) {
+  var source = map !== null && typeof map === "object" && !Array.isArray(map) ? map : {};
+  var out = {};
+  var key;
+  for (key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) out[key] = source[key];
+  }
+  if (value === undefined) delete out[field];
+  else out[field] = value;
+  return out;
+}
+
+/**
+ * Serialize a dark override map for storage, with its keys in a stable order.
+ *
+ * Stable order matters twice: the settings document is diffed as text (an
+ * equivalent map written in a different key order would look like a change and
+ * cost a whole-document write), and the preset snapshot compares the text too.
+ * @param {unknown} map - the sparse map.
+ * @returns {string} the JSON text the document stores.
+ */
+function darkValuesText(map) {
+  var source = map !== null && typeof map === "object" && !Array.isArray(map) ? map : {};
+  var keys = Object.keys(source).sort();
+  var out = {};
+  for (var index = 0; index < keys.length; index += 1) out[keys[index]] = source[keys[index]];
+  return JSON.stringify(out);
+}
+
 /**
  * Convert the weight fields of saved preset snapshots to offsets.
  *
@@ -4582,6 +4668,7 @@ var shared = {
   floatExpandDirection: floatExpandDirection,
   floatTransformOrigin: floatTransformOrigin,
   floatCardAnchor: floatCardAnchor,
+  floatCardCorner: floatCardCorner,
   floatClipStart: floatClipStart,
   floatClipRest: floatClipRest,
   isRestClip: isRestClip,
@@ -4685,6 +4772,8 @@ var shared = {
   quoteFamily: quoteFamily,
   normalizeConfig: normalizeConfig,
   normalizeDarkValues: normalizeDarkValues,
+  withDarkOverride: withDarkOverride,
+  darkValuesText: darkValuesText,
   normalizePresets: normalizePresets,
   normalizeValueSet: normalizeValueSet,
   clampOffset: clampOffset,
@@ -5188,6 +5277,15 @@ var DICTS = {
     "preset.import": "Import",
     "preset.importPlaceholder": "Paste an exported preset JSON here",
     "preset.label": "Presets",
+    "theme.label": "Light/dark sync",
+    "theme.surface": "Which theme is being edited",
+    "theme.shared": "One set",
+    "theme.split": "Separate",
+    "theme.light": "Light",
+    "theme.dark": "Dark",
+    "theme.sharedHint": "Light and dark share this one set of settings.",
+    "theme.splitHint": "Editing the dark set: only the items you change are overridden, the rest follow the light set.",
+    "theme.darkOnly": "Dark",
     "preset.select": "Choose a preset",
     "preset.rename": "Rename",
     "preset.renamePlaceholder": "New name",
@@ -5378,6 +5476,15 @@ var DICTS = {
     "preset.import": "导入",
     "preset.importPlaceholder": "粘贴导出的方案内容",
     "preset.label": "预设方案",
+    "theme.label": "亮暗同步",
+    "theme.surface": "正在编辑哪一套",
+    "theme.shared": "一起设置",
+    "theme.split": "亮暗分开",
+    "theme.light": "亮色",
+    "theme.dark": "暗色",
+    "theme.sharedHint": "亮色与暗色共用同一套排印设置。",
+    "theme.splitHint": "正在编辑暗色那一套：只覆盖你调过的项，其余跟随亮色。",
+    "theme.darkOnly": "暗色",
     "preset.select": "选择方案",
     "preset.rename": "改名",
     "preset.renamePlaceholder": "新名字",
@@ -5514,6 +5621,14 @@ var CARD_CSS = [
   ".dfp-miniButton{appearance:none;font:inherit;cursor:pointer;white-space:nowrap;flex:none;border-radius:8px;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}",
+  // The theme surface picker: always mounted, so turning the sync switch on and
+  // off slides and fades this row instead of snapping the card's height. The grid
+  // row is the height animation (0fr -> 1fr), the opacity rides along.
+  ".dfp-themeSplit{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .24s ease,opacity .24s ease}",
+  ".dfp-themeSplitOn{grid-template-rows:1fr;opacity:1}",
+  ".dfp-themeSplitClip{min-height:0;overflow:hidden}",
+  ".dfp-themeSplitRow{display:flex;align-items:center;gap:10px;margin-top:8px}",
+  ".dfp-themeNote{flex:1;min-width:0;text-align:right;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}",
   ".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
@@ -5615,7 +5730,7 @@ var CARD_CSS = [
   // the dot coming back: the whole fold, not the 120 ms the way out took. The
   // after-change transition is the one that counts, so this rule alone decides
   // the fade-in, and it is the fold's own length and curve.
-  ".dfp-dotBack{transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .2s ease}",
+  ".dfp-dotBack{transition:opacity .46s cubic-bezier(.45,0,.25,1),transform .2s ease}",
   // The shadow is a FILTER, not a box-shadow: a box-shadow is painted outside
   // the border box, so every frame that carries a clip (both animations) would
   // cut it away.
@@ -5629,12 +5744,57 @@ var CARD_CSS = [
   // filter is applied to the card's already-clipped shape and follows it frame
   // by frame. It is a pure paint layer: nothing about it takes a pointer, and
   // the card it holds keeps every part of the animation.
-  ".dfp-floatShadow{position:absolute;z-index:1;box-sizing:border-box;pointer-events:none;width:min(264px,calc(100vw - 32px));filter:drop-shadow(0 10px 32px rgba(0,0,0,.28))}",
+  // No `filter` here any more: an ancestor that filters is a backdrop root, and
+  // the glass layer's blur would then sample only this wrapper's own subtree —
+  // i.e. the panel itself — instead of the conversation behind it. The drop
+  // shadow moved onto the glass, which is the layer that actually paints now.
+  ".dfp-floatShadow{position:absolute;z-index:1;box-sizing:border-box;pointer-events:none;width:min(264px,calc(100vw - 32px))}",
   // The card fills the wrapper in normal flow, so the wrapper's anchored corner
   // 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;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)}",
+  ".dfp-floatCard{position:relative;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;max-height:calc(100vh - 24px);overflow:hidden;background:transparent;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 .32s cubic-bezier(.45,0,.25,1),opacity .32s cubic-bezier(.45,0,.25,1),transform .32s cubic-bezier(.45,0,.25,1)}",
+  // The drop shadow, on a sibling of the card: it must NOT sit on an ancestor of
+  // the blur layer (`filter` makes an ancestor a backdrop root, and the blur would
+  // then sample the panel itself), and it must not sit on the card (Chromium carves
+  // an element's own shadow away with its `clip-path` for the whole unfold).
+  // It FADES with the unfold rather than mirroring the clip: two independent clip
+  // transitions get retargeted a frame apart by Chrome (measured: 73 ms against the
+  // card's 280 ms), and a shadow that outran the panel it belongs to reads worse
+  // than one that arrives with it. Invisible while the card is still a dot, and
+  // gone before the element is dropped — never a bare frame left hanging in the
+  // conversation, which is exactly what a full-size, never-animated shadow layer
+  // looked like.
+  ".dfp-floatShade{position:absolute;inset:0;z-index:0;border-radius:16px;pointer-events:none;box-shadow:0 10px 32px rgba(0,0,0,.28);opacity:1;transition:opacity .32s cubic-bezier(.45,0,.25,1)}",
+  // The surface: a CHILD of the card, so the card's own clip gives it the panel's
+  // silhouette for free — the unfold, the fold and every future shape change are
+  // the card's business, not another layer's to keep in step. (A sibling was tried
+  // first: two independent clip transitions, retargeted a frame apart by Chrome,
+  // made the surface race ahead of the panel it was painting behind.)
+  // It sits at z-index -1 so it paints under the rows, and it must never be given
+  // opacity below 1 — that would make it a backdrop root and switch off its own
+  // blur.
+  // A SIBLING of the card, not a child. Measured: inside the card the blur is
+  // computed but has no effect — the text behind the panel stayed crisp — because
+  // a backdrop-filter inside the clipped, animated wrapper samples that wrapper's
+  // own subtree instead of the page. quick-toc reached the same conclusion the hard
+  // way and put its twin at the shell level for exactly this reason.
+  // Its clip is copied from the card every frame by `mirrorGlassClip`: two
+  // independent CSS clip transitions get retargeted a frame apart (measured 73 ms
+  // against the card's 280 ms), and a surface that outruns the panel it is painting
+  // behind is precisely the "transparent box grows first" artefact.
+  ".dfp-floatGlass{position:absolute;inset:0;z-index:0;border-radius:16px;pointer-events:none;background:var(--dsw-alias-bg-layer-2);clip-path:inset(0px 0px 0px 0px round 16px)}",
+  // 82 % leaves the blurred conversation readable as colour and light behind the
+  // rows, which is where quick-toc landed for a surface you read IN (its curtain,
+  // meant to be seen through, goes lighter still).
+  // Plain `rgba`, no `color-mix`. The mix version followed the theme's own surface
+  // colour, but a browser without it drops the declaration outright and the opaque
+  // fill underneath wins — "still opaque, and no blur visible" is exactly what that
+  // looks like. A fixed 62 % of white (light) or of the dark surface (below) is the
+  // same material in every browser, which is worth more here than matching a custom
+  // palette exactly.
+  ".dfp-floatGlassOn{background:rgba(255,255,255,0.50);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}",
+  "body[data-ds-dark-theme] .dfp-floatGlassOn{background:rgba(26,28,34,0.50)}",
   // 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}",
@@ -5643,14 +5803,27 @@ var CARD_CSS = [
   // 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
   // drops the clip entirely (see `releaseClip` in the client).
-  ".dfp-floatCardEnter{clip-path:var(--dfp-clipStart,inset(0px 0px 0px 0px round 16px));opacity:.6;transform:scale(.985)}",
+  ".dfp-floatCardEnter{clip-path:var(--dfp-clipStart,inset(0px 0px 0px 0px round 16px));transform:scale(.985)}",
   // The leave frame: the same rectangle the enter came from, so the fold is the
   // expand played backwards — but on its OWN, longer curve. The unfold is a
   // fast, eager ease-out; the fold starts gently and spends most of its extra
   // time in the tail, which is what makes shutting down read as deliberate
   // instead of abrupt. The card is already invisible but must not swallow
   // clicks aimed at the page underneath while it is still in the DOM.
-  ".dfp-floatCardLeave{clip-path:var(--dfp-clipStart,inset(0px 0px 0px 0px round 16px));opacity:0;transform:scale(.985);pointer-events:none;transition:clip-path .42s cubic-bezier(.4,0,.2,1),opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1)}",
+  ".dfp-floatCardLeave{clip-path:var(--dfp-clipStart,inset(0px 0px 0px 0px round 16px));opacity:0;transform:scale(.985);pointer-events:none;transition:clip-path .46s cubic-bezier(.45,0,.25,1),opacity .46s cubic-bezier(.45,0,.25,1),transform .46s cubic-bezier(.45,0,.25,1)}",
+  // The shade's own two frames, AFTER the card's so a bare `.dfp-floatCardEnter`
+  // lookup still finds the card's rule first. Opacity only: the shade has to leave
+  // and arrive with the panel, but it must not mirror the clip (see above).
+  //
+  // It does NOT hang off the enter class: that class is the ARMING frame and is
+  // dropped two frames in (see `settle`), so a shade tied to it blinked out and
+  // straight back on while the card was still a dot. It is pinned to 0 for those
+  // two frames instead — so the 0 has painted before the transition starts — and
+  // then released, which fades it in over the very same 280 ms the card takes to
+  // grow. The shadow therefore arrives exactly with the panel: not before the card
+  // is there, and not as a separate appearance after it has landed.
+  ".dfp-floatShade.dfp-floatShadeHidden{opacity:0;transition:none}",
+  ".dfp-floatShade.dfp-floatCardLeave{opacity:0;transition:opacity .46s cubic-bezier(.45,0,.25,1)}",
   // the arming frame, on for the two frames the enter class is on: measuring the
   // card for `--dfp-clipStart` RESOLVES its style, and without this the resting
   // clip resolved there would be the "before" of a transition the moment the
@@ -5667,30 +5840,42 @@ var CARD_CSS = [
   // so the title never runs underneath it; there is no slot for the dot any
   // more — the dot is faded out while the card is open.
   ".dfp-floatHead{display:flex;align-items:center;gap:8px;cursor:grab;user-select:none;touch-action:none}",
-  ".dfp-floatTitle{flex:1;min-width:0;color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+  ".dfp-floatTitle{flex:1;min-width:0;color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
   // the close: a round icon button in the quick-toc style — same tint at rest,
   // the next tint step on hover; the rounded bar inside is the close icon
-  ".dfp-floatClose{position:absolute;top:8px;right:8px;z-index:2;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:50%;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.16));transition:background .15s ease,color .15s ease,opacity .2s ease}",
+  ".dfp-floatClose{position:absolute;top:11px;right:8px;z-index:2;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:50%;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.16));transition:background .15s ease,color .15s ease,opacity .2s ease}",
   ".dfp-floatClose:hover{background:var(--dsw-alias-interactive-bg-active,rgba(79,140,255,.24))}",
   ".dfp-floatCloseCross{display:block;pointer-events:none;color:currentColor}",
   // the settings entry: the VERY same circle as the close (same diameter, same
   // tint, same hover step), pinned to the card's corner and pushed one diameter
   // plus FLOAT_SETTINGS_GAP to its left. Both radii are 50% and the boxes are
   // square, so neither can read as an ellipse.
-  ".dfp-floatSettings{position:absolute;top:8px;right:38px;z-index:2;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:0;padding:0;border:none;border-radius:50%;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.16));transition:background .15s ease,color .15s ease,opacity .2s ease}",
+  ".dfp-floatSettings{position:absolute;top:11px;right:38px;z-index:2;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:0;padding:0;border:none;border-radius:50%;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover,rgba(128,128,128,.16));transition:background .15s ease,color .15s ease,opacity .2s ease}",
   ".dfp-floatSettings:hover{background:var(--dsw-alias-interactive-bg-active,rgba(79,140,255,.24))}",
   ".dfp-floatSettingsGlyph{display:block;pointer-events:none;color:currentColor}",
   // the host's own button reset cannot inflate either circle: the two share one
   // box model, so "the same size" is a property of the pair, not of a wish.
   ".dfp-floatClose,.dfp-floatSettings{box-sizing:border-box;aspect-ratio:1/1;flex:0 0 auto}",
   ".dfp-floatResize{position:absolute;z-index:3;touch-action:none}",
+  // Width only. The bottom and corner grips let a press land on the panel's own
+  // last row instead of on the control there, which reads as a dead slider; the
+  // height is content-driven anyway (the card caps itself at the viewport), so
+  // the two vertical grips cost more than they gave.
   ".dfp-floatResizeR{top:0;right:0;width:8px;height:100%;cursor:ew-resize}",
-  ".dfp-floatResizeB{left:0;bottom:0;width:100%;height:8px;cursor:ns-resize}",
-  ".dfp-floatResizeBR{right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize}",
   ".dfp-floatRow{margin-top:8px}",
   ".dfp-floatLabel{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;display:flex;justify-content:space-between;gap:8px}",
   ".dfp-floatValue{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}",
-  ".dfp-floatSlider{width:100%;box-sizing:border-box;accent-color:var(--dsw-alias-brand-primary)}",
+  // `margin:0` is load-bearing: Chromium's UA sheet gives `input[type=range]` a
+  // 2px margin on every side, which sits OUTSIDE the `width:100%` box. The row is
+  // then 4px wider than the scrolling body, whose `overflow-x:hidden` shaves the
+  // slider's right end (measured: scrollWidth 288 vs clientWidth 284, slider
+  // ending 2px past the body). `display:block` keeps it from adding a line box.
+  ".dfp-floatSlider{display:block;margin:0;width:100%;box-sizing:border-box;accent-color:var(--dsw-alias-brand-primary)}",
+  // The preset picker shares the head row: the title takes the slack, so this
+  // sits against the right edge of the head's own content box — i.e. just left of
+  // the two round buttons the head reserves space for.
+  ".dfp-floatPreset{flex:none;max-width:118px;font:inherit;font-size:12px;line-height:18px;padding:2px 4px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-3);border:.5px solid var(--dsw-alias-border-l3);border-radius:8px;cursor:pointer}",
+  ".dfp-floatPreset:disabled{opacity:.5;cursor:default}",
   // 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}",
@@ -8150,12 +8335,21 @@ function FontCard(props) {
   /** The pending auto-hide / fade-out timers of the preset message. */
   var statusIdRef = useRef(0);
   var statusTimerRef = useRef(null);
+  /**
+   * Which surface the controls edit when the two themes are set separately.
+   *
+   * Off means the flat fields (the light set), on means the dark overrides. This
+   * is view state only — it never reaches the document — and it is ignored while
+   * `perTheme` is off, because the two sets are then the same object.
+   */
+  var [editingDark, setEditingDark] = useState(false);
   var snapshot = useScopeSnapshot(scope);
   var config = normalizeConfig(snapshot.value);
-  // Light and dark share one value set in this release: the stored flag (if
-  // any) is ignored and the dark fields stay dormant in the document.
-  config[PER_THEME_FIELD] = false;
+  // Per-theme is honoured exactly as stored (0.7.0). It used to be forced off
+  // here because nothing in the UI could edit the dark set; `editingDark` is
+  // the control that made forcing it unnecessary.
   var sets = resolveAxes(config);
+  var themesSplit = config[PER_THEME_FIELD] === true;
   var user = snapshot.user !== null && typeof snapshot.user === "object" ? snapshot.user : {};
   var writable = snapshot.writable === true;
   var presets = config[PRESETS_FIELD];
@@ -8176,9 +8370,9 @@ function FontCard(props) {
   }
   if (!activeKnown) activeName = presetList[0].name;
 
-  // Which value set the controls below edit and display: light and dark share
-  // one set, so it is always the light (flat) fields.
-  var editing = sets.light;
+  // Which value set the controls below edit and display. With the split off the
+  // two sets are the same object, so the condition costs nothing.
+  var editing = themesSplit && editingDark ? sets.dark : sets.light;
 
   var changeView = function (next) {
     setView(next);
@@ -8204,6 +8398,11 @@ function FontCard(props) {
     // Chrome (the floating panel's switch and position) never rides a preset:
     // switching presets must not hide or move the panel.
     if (VALUE_FIELDS.indexOf(field) < 0) return;
+    // A dark edit must not ride the preset either. The snapshot stores the LIGHT
+    // set, so mirroring a dark value into a flat field would apply that value to
+    // the light set the next time this preset is picked — the preset would slowly
+    // turn into a copy of the dark overrides.
+    if (themesSplit && editingDark) return;
     if (!writable || applyingRef.current === true) {
       probeLog("mirror-skipped", { field: field, writable: writable, applying: applyingRef.current });
       return;
@@ -8570,10 +8769,60 @@ function FontCard(props) {
     pendingOps[field] = { op: op, value: value };
     scheduleFlush();
   };
+  /**
+   * Whether a write for this field belongs to the dark override layer.
+   *
+   * Only value axes can be overridden per theme: the theme flag itself, the
+   * preset storage, the weight scale marker and the panel chrome are not part
+   * of either set, so each of them writes its own field whatever surface is
+   * being edited.
+   * @param {string} field - a settings field name.
+   * @returns {boolean} true when the write must go into `darkValues`.
+   */
+  var writesDark = function (field) {
+    if (!themesSplit || !editingDark) return false;
+    return VALUE_FIELDS.indexOf(field) >= 0;
+  };
+  /**
+   * The dark map a write should merge into, queued writes included.
+   *
+   * Reading the document alone would lose a value the user moved one frame ago:
+   * the batch has not been flushed yet, so the document still holds the older
+   * map and the second click would overwrite the first one's override.
+   * @returns {Record<string, string|number|boolean>} the sparse map to merge into.
+   */
+  var pendingDarkMap = function () {
+    var queued = pendingOps[DARK_VALUES_FIELD];
+    return shared.normalizeDarkValues(queued !== undefined ? queued.value : config[DARK_VALUES_FIELD]);
+  };
+  /**
+   * Write one axis into the dark override layer instead of the flat fields.
+   *
+   * The document stores the whole map as one JSON string, so one axis edit is
+   * one whole-map write; `undefined` removes the override and hands the field
+   * back to the light set.
+   * @param {string} field - a value-axis field name.
+   * @param {string|number|boolean|undefined} value - the override, or undefined to clear it.
+   */
+  var submitDark = function (field, value) {
+    var next = shared.withDarkOverride(pendingDarkMap(), field, value);
+    // A dark override in a document that has the split switched off would render
+    // nothing at all, so the flag rides the same batch.
+    if (config[PER_THEME_FIELD] !== true) queuePatch(PER_THEME_FIELD, shared.PENDING_SET, true);
+    queuePatch(DARK_VALUES_FIELD, shared.PENDING_SET, shared.darkValuesText(next));
+  };
   var submit = function (field, value) {
+    if (writesDark(field)) {
+      submitDark(field, value);
+      return;
+    }
     queuePatch(field, shared.PENDING_SET, value);
   };
   var clear = function (field) {
+    if (writesDark(field)) {
+      submitDark(field, undefined);
+      return;
+    }
     queuePatch(field, shared.PENDING_UNSET, undefined);
   };
   /** The frame handle for the next local paint; null when no paint is scheduled. */
@@ -9629,6 +9878,62 @@ function FontCard(props) {
               : null
           ),
 
+          // Per-theme. The sync switch follows every other on/off row in this
+          // card (label left, joined segmented pushed right); the surface picker
+          // is a second row under the description, and it fades in and out with
+          // the switch — both rows are always mounted so nothing else moves.
+          h(
+            FieldShell,
+            {
+              t: t,
+              label: t("theme.label"),
+              hint: t("theme.sharedHint"),
+              disabled: !writable,
+              inline: true,
+            },
+            h(Segmented, {
+              label: t("theme.label"),
+              // "On" is the shared set: that is the default, and it is what the
+              // switch means to a reader — syncing the two themes.
+              value: themesSplit ? 0 : 1,
+              disabled: !writable,
+              options: [
+                { value: 0, label: t("shape.off") },
+                { value: 1, label: t("shape.on") },
+              ],
+              onChange: function (next) {
+                var synced = next === 1;
+                submit(PER_THEME_FIELD, !synced);
+                if (synced) setEditingDark(false);
+              },
+            })
+          ),
+          h(
+            "div",
+            { className: "dfp-themeSplit" + (themesSplit ? " dfp-themeSplitOn" : "") },
+            h(
+              "div",
+              { className: "dfp-themeSplitClip" },
+              h(
+                "div",
+                { className: "dfp-themeSplitRow" },
+                h(Segmented, {
+                  label: t("theme.surface"),
+                  value: editingDark ? 1 : 0,
+                  disabled: !writable,
+                  options: [
+                    { value: 0, label: t("theme.light") },
+                    { value: 1, label: t("theme.dark") },
+                  ],
+                  onChange: function (next) {
+                    setEditingDark(next === 1);
+                  },
+                }),
+                h("span", { className: "dfp-themeNote" }, t("theme.splitHint"))
+              )
+            )
+          ),
+
           // the accordion, conversation first (it owns every axis), then the
           // interface (which follows it), then code
           h(
@@ -9966,7 +10271,7 @@ var FLOAT_OPEN_KEY = "dsh-fonttune.float.v1";
  *
  * Used to know when the card's resting clip may be dropped for good.
  */
-var FLOAT_UNFOLD_MS = 280;
+var FLOAT_UNFOLD_MS = 320;
 
 /**
  * The fold's length, in milliseconds (mirrors `.dfp-floatCardLeave`).
@@ -9986,7 +10291,7 @@ var FLOAT_FOLD_MS = 420;
  * for the two frames the class waits for (see `startLeave`) so the card is
  * never dropped mid-fold.
  */
-var FLOAT_LEAVE_MS = 480;
+var FLOAT_LEAVE_MS = 460;
 
 /**
  * How long the enter frame may wait for its two frames before a timer stands
@@ -10095,7 +10400,32 @@ function floatStoreOpen(open) {
  *   the settings button performs at click time.
  * @returns {{destroy: () => void, toggle: () => void}} the panel's handles.
  */
+/**
+ * Whether this browser can blur what is behind an element.
+ *
+ * Asked once, at load: the answer cannot change while the page lives, and the
+ * fallback (the same surface, opaque) is what the sheet already draws when the
+ * flag class is absent.
+ * @returns {boolean} true when `backdrop-filter` is usable.
+ */
+var GLASS_OK = (function () {
+  try {
+    return (
+      typeof CSS !== "undefined" &&
+      typeof CSS.supports === "function" &&
+      (CSS.supports("backdrop-filter", "blur(12px)") ||
+        CSS.supports("-webkit-backdrop-filter", "blur(12px)"))
+    );
+  } catch (error) {
+    return false;
+  }
+})();
+
 function mountFloatPanel(scope, t, hostCtx) {
+  /** How far the panel's drop shadow reaches past its own box (10px offset + blur). */
+  var SHADOW_REACH = 56;
+  /** The dot's own snap slide, in ms — the stylesheet's `.dfp-floatSnap` transition. */
+  var FLOAT_SNAP_MS = 160;
   var noop = function () {};
   if (typeof document === "undefined" || !document.body) return { destroy: noop, toggle: noop };
   // The offline stand-ins hand out element stubs without listeners or
@@ -10166,8 +10496,11 @@ function mountFloatPanel(scope, t, hostCtx) {
   // 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.
-  var lastSeenDoc = null;
-  // The same for the corner: the document value `corner` was last reconciled
+  /** Watches the theme attribute so the panel re-renders on a theme switch. */
+  var themeWatcher = null;
+
+
+  var lastSeenDoc = null;  // The same for the corner: the document value `corner` was last reconciled
   // with, and the one our own write is still carrying.
   var lastSeenCorner = null;
   var lastSeenSize = null;
@@ -10184,6 +10517,19 @@ function mountFloatPanel(scope, t, hostCtx) {
   // end on the same small rectangle the unfold started from, and the card's own
   // measurement only exists while it is mounted.
   var liveQuadrant = null;
+  // The CARD's own side, re-decided when the panel opens (and when the dot is
+  // dropped or the region changes shape). It is NOT the dot's corner: the card
+  // goes wherever it has the most room, while the dot keeps the corner it
+  // remembers living in. One rule shared by both is what made the card jump
+  // whenever the dot crossed a line the card had not.
+  var cardQuadrant = null;
+  // Whether the NEXT render follows a snap. The card then keeps the place it
+  // already had on screen and TRAVELS to the new corner with the dot, instead of
+  // jumping a panel-width to the other side of it (see the glide in `render`).
+  var anchorGlide = false;
+  // The card's own offset inside the host, as laid out last time: the glide is
+  // the difference between where the new side puts it and that.
+  var lastAnchor = null;
 
   var el = function (tag, className, text) {
     var node = document.createElement(tag);
@@ -10562,6 +10908,11 @@ function mountFloatPanel(scope, t, hostCtx) {
     return null;
   };
 
+  // Whether the last region reading was a real region or the whole-window
+  // stand-in (see `floatBounds`). A stand-in never moves the dot: it means "no
+  // conversation to measure right now", not "the conversation is the window".
+  var boundsAreReal = false;
+
   /** The window size the bounds are cut to, with the shared fallback. */
   var floatViewport = function () {
     return {
@@ -10691,10 +11042,19 @@ function mountFloatPanel(scope, t, hostCtx) {
    * The conversation when it can be found, the whole window when it cannot (a
    * settings page has no prose at all): the window is what this used to be
    * everywhere, and it stays the last resort rather than the rule.
+   *
+   * WHICH one answered is remembered in `boundsAreReal`, because the two are not
+   * interchangeable for a MOVE: the whole window is a stand-in for "there is no
+   * conversation to measure at this instant" — a session still mounting, a
+   * message list laid out at 0×0 — and a dot parked on the window's corner over
+   * a page that does have a conversation is exactly the reported "it sits on the
+   * window's left edge instead of the conversation's corner".
    * @returns {object} the bounds, in viewport coordinates.
    */
   var floatBounds = function () {
-    return shared.floatBoundsFrom(floatBoundsRects(), floatViewport());
+    var picked = shared.floatBoundsPick(floatBoundsRects(), floatViewport());
+    boundsAreReal = picked.index >= 0;
+    return picked.bounds;
   };
 
   /**
@@ -10735,16 +11095,206 @@ function mountFloatPanel(scope, t, hostCtx) {
     } catch (error) {
       // An unmeasurable card keeps the flat (rest) clip; only the shape is lost.
     }
+    var start = shared.floatClipStart(width, height, quadrant, shared.FLOAT_DOT);
     try {
-      card.style.setProperty(
-        "--dfp-clipStart",
-        shared.floatClipStart(width, height, quadrant, shared.FLOAT_DOT)
-      );
+      card.style.setProperty("--dfp-clipStart", start);
     } catch (error) {
       // A card without a style face falls back to the flat clip in the sheet.
     }
   };
 
+  /**
+   * Copy the card's clip onto the glass layer, frame by frame.
+   *
+   * The glass is a sibling (a blur inside the card samples nothing — see the sheet),
+   * so the card's clip does not reach it, and two CSS transitions on the same
+   * property are NOT one animation: Chrome retargets them independently and the
+   * glass came out at a quarter of the card's duration. Reading the card's computed
+   * clip and writing it down is the only way to guarantee one shape at every frame.
+   * @param {object} card - the live card element.
+   * @param {object} glass - the blur layer beside it.
+   * @param {number} ms - how long to keep copying (the animation's own length).
+   */
+  /**
+   * The same `inset()` shape, grown outwards by `grow` pixels on every side.
+   *
+   * Negative insets are legal and paint beyond the border box, which is the only
+   * way an element can follow a silhouette while its own shadow — which lies
+   * outside that box — still survives the clip.
+   * @param {string} clip - a computed inset() clip.
+   * @param {number} grow - how far to push every edge outwards.
+   * @returns {string} the grown clip, or the input when it is not an inset().
+   */
+  var growClip = function (clip, grow) {
+    var found = /^inset\((-?[\d.]+)px (-?[\d.]+)px (-?[\d.]+)px (-?[\d.]+)px( round .*)?\)$/.exec(clip);
+    if (found === null) return clip;
+    return (
+      "inset(" +
+      (Number(found[1]) - grow) +
+      "px " +
+      (Number(found[2]) - grow) +
+      "px " +
+      (Number(found[3]) - grow) +
+      "px " +
+      (Number(found[4]) - grow) +
+      "px" +
+      (found[5] || "") +
+      ")"
+    );
+  };
+
+  /**
+   * The shade's scale for the panel's CURRENT visible box.
+   *
+   * Read from the card's own clip every frame, not driven by a CSS transition: the
+   * small value only exists for the two arming frames, and a transition beginning
+   * there is cleared before it can run (measured: the inline value was gone and
+   * `transform` was `none` 138 ms into the unfold, with the shadow at full size the
+   * whole way). Written per frame, the shadow is exactly as big as what the panel
+   * is showing, on every frame, by construction.
+   * @param {object} card - the live card.
+   * @param {string} clip - its computed clip-path.
+   * @returns {string} the inline transform, or "" for the resting panel.
+   */
+  var shadeFromClip = function (card, clip) {
+    if (clip === "none") return "";
+    var found = /^inset\((-?[\d.]+)px (-?[\d.]+)px (-?[\d.]+)px (-?[\d.]+)px/.exec(clip);
+    if (found === null) return "";
+    var width = 0;
+    var height = 0;
+    try {
+      width = card.offsetWidth;
+      height = card.offsetHeight;
+    } catch (error) {
+      return "";
+    }
+    if (!(width > 0) || !(height > 0)) return "";
+    var visibleW = Math.max(1, width - Number(found[2]) - Number(found[4]));
+    var visibleH = Math.max(1, height - Number(found[1]) - Number(found[3]));
+    return "scale(" + (visibleW / width).toFixed(4) + ", " + (visibleH / height).toFixed(4) + ")";
+  };
+  var mirrorGlassClip = function (card, glass, ms) {    if (glass === null || glass === undefined) return;
+    var shade = host.querySelector(".dfp-floatShade");
+    var until = Date.now() + ms;
+    var step = function () {
+      if (card.parentNode === null || glass.parentNode === null) return;
+      var clip = "none";
+      try {
+        clip = globalThis.getComputedStyle(card).clipPath;
+      } catch (error) {
+        return;
+      }
+      glass.style.clipPath = clip;
+            // The shade is SCALED to the panel's visible box, frame by frame (see
+      // `shadeFromClip`): its shadow is painted from its own box, so a layer left at
+      // the full panel size shows a full-size shadow for the whole unfold — the
+      // "second edge" beside the panel's own. Scaling the layer scales the shadow.
+      if (shade !== null && shade !== undefined) shade.style.transform = shadeFromClip(card, clip);
+      if (Date.now() < until) globalThis.requestAnimationFrame(step);
+    };
+    if (typeof globalThis.requestAnimationFrame === "function") globalThis.requestAnimationFrame(step);
+  };
+
+  /**
+   * Give the shade layer the card's unfold class.
+   *
+   * The shade is the sibling that carries the panel's drop shadow, and it has to
+   * leave and arrive with the card: without this it sat at its full resting size
+   * through the whole unfold and the whole fold and was then dropped with the
+   * element, which is what a bare frame hanging around the conversation looked
+   * like. It takes the class for its OPACITY rules only — it deliberately does not
+   * mirror the clip (see the note on `.dfp-floatShade`).
+   * @param {string} name - "dfp-floatCardEnter" or "dfp-floatCardLeave".
+   * @param {boolean} on - true to add, false to remove.
+   */
+  var setShadeClass = function (name, on) {
+    var shade = host.querySelector(".dfp-floatShade");
+    if (shade === null || shade === undefined || typeof shade.classList === "undefined") return;
+    if (on) shade.classList.add(name);
+    else shade.classList.remove(name);
+  };
+
+  /**
+   * Whether the page is showing the dark theme right now.
+   *
+   * Read from the attribute DSH itself switches (`body[data-ds-dark-theme]`),
+   * never from a media query: the reader can pick a theme that disagrees with the
+   * system preference, and the rules this panel edits are the ones that attribute
+   * prefixes.
+   * @returns {boolean} true while the dark theme is on screen.
+   */
+  var pageIsDark = function () {
+    try {
+      return document.body.hasAttribute("data-ds-dark-theme");
+    } catch (error) {
+      return false;
+    }
+  };
+
+  /**
+   * The configuration the panel edits: the themed view when the split is on.
+   *
+   * With `perTheme` on, the panel edits whichever set the page is showing — the
+   * reader asked for "light only edits light, dark only edits dark". The view is
+   * the flat configuration with every value axis replaced by the resolved set, so
+   * every `config[field]` read in this file follows the theme without knowing
+   * about it; storage fields (presets, the dark map itself) are untouched.
+   * @param {Record<string, unknown>} config - a normalized configuration.
+   * @returns {Record<string, unknown>} the view to edit and display.
+   */
+  var themeView = function (config) {
+    if (config[PER_THEME_FIELD] !== true || !pageIsDark()) return config;
+    var dark = resolveAxes(config).dark;
+    var view = {};
+    var key;
+    for (key in config) {
+      if (Object.prototype.hasOwnProperty.call(config, key)) view[key] = config[key];
+    }
+    for (var index = 0; index < VALUE_FIELDS.length; index += 1) {
+      var field = VALUE_FIELDS[index];
+      if (dark[field] !== undefined) view[field] = dark[field];
+    }
+    return view;
+  };
+
+  /**
+   * Route one batch of panel changes to the set the page is showing.
+   *
+   * Light: the batch passes through untouched. Dark: the value axes are merged
+   * into the sparse `darkValues` map and the batch becomes one whole-map write,
+   * which is exactly what the card does — the two surfaces must not disagree
+   * about where a slider writes.
+   * @param {Record<string, unknown>} changes - field to value.
+   * @param {Record<string, unknown>} config - the stored (not themed) configuration.
+   * @returns {Record<string, unknown>} the batch to send.
+   */
+  var routeForTheme = function (changes, config) {
+    if (config[PER_THEME_FIELD] !== true || !pageIsDark()) return changes;
+    var axes = {};
+    var rest = {};
+    var touched = false;
+    var key;
+    for (key in changes) {
+      if (!Object.prototype.hasOwnProperty.call(changes, key)) continue;
+      if (VALUE_FIELDS.indexOf(key) >= 0) {
+        axes[key] = changes[key];
+        touched = true;
+      } else {
+        rest[key] = changes[key];
+      }
+    }
+    if (!touched) return changes;
+    var map = config[DARK_VALUES_FIELD];
+    for (key in axes) {
+      if (Object.prototype.hasOwnProperty.call(axes, key)) {
+        map = shared.withDarkOverride(map, key, axes[key]);
+      }
+    }
+    rest[DARK_VALUES_FIELD] = shared.darkValuesText(map);
+    if (config[PER_THEME_FIELD] !== true) rest[PER_THEME_FIELD] = true;
+    return rest;
+  };
+
   /**
    * The state the panel shows: the document overlaid with the local moves,
    * so the panel always agrees with the page.
@@ -10757,7 +11307,8 @@ function mountFloatPanel(scope, t, hostCtx) {
       // An unready scope reads as an empty, read-only document.
     }
     var raw = snap.value !== null && typeof snap.value === "object" ? snap.value : {};
-    var config = normalizeConfig(shared.overlayPendingValues(raw, pendingLocalValues));
+    var stored = normalizeConfig(shared.overlayPendingValues(raw, pendingLocalValues));
+    var config = themeView(stored);
     var stored = config[PRESETS_FIELD];
     var list = Array.isArray(stored) && stored.length > 0
       ? stored
@@ -10985,6 +11536,56 @@ function mountFloatPanel(scope, t, hostCtx) {
     return fallback;
   };
 
+  /**
+   * The middle of the CARD as it is on the page, or null while it is not.
+   *
+   * Read from the layer the card sits in (the wrapper carries the anchored edge
+   * and the size), so the unfold's own scale — which rides the card inside it —
+   * cannot make a growing panel look like a moving one.
+   * @returns {{x: number, y: number}|null} its middle in viewport coordinates.
+   */
+  var cardMiddle = function () {
+    var layer = null;
+    try {
+      layer = host.querySelector(".dfp-floatShadow");
+    } catch (error) {
+      layer = null;
+    }
+    if (layer === null || layer === undefined) return null;
+    var rect = rectOf(layer);
+    if (rect === null || !(rect.width > 0) || !(rect.height > 0)) return null;
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  };
+
+  /**
+   * Re-decide which side of the conversation the card opens towards.
+   *
+   * The rule is the card's OWN, and it is about ROOM: the card hangs off the
+   * dot, so it can only grow one way from it, and the side that holds more of it
+   * is the side the conversation has room for. Per axis the two rooms on either
+   * side of the dot are compared and the card is sent to the larger one, which
+   * is also the side its middle ends up on — the panel flies to the corner it
+   * sits in, measured against the conversation rather than against the dot.
+   *
+   * The dot keeps its own rule — the corner it remembers living in — and that
+   * difference is the point: a rule shared by both made the card jump whenever
+   * the dot crossed a line the card had not. This answer depends on the dot and
+   * the region and on nothing else, so it cannot vote itself back and forth.
+   *
+   * Called at the moments a side can legitimately change — an open, when the
+   * card does not exist yet, a release that lands the dot on another corner, and
+   * a region that changed shape — and never from `render`. A caller that changes
+   * the side must also place the card WITHOUT a slide: a side is an anchored
+   * edge, so the card moves by its own width when it changes.
+   * @param {object} [bounds] - the region, when the caller has it already.
+   */
+  var voteCardQuadrant = function (bounds, at) {
+    var region = bounds === undefined ? floatBounds() : bounds;
+    var origin = at === undefined ? pos : at;
+    if (origin === null || origin === undefined) return;
+    cardQuadrant = shared.floatCardCorner(region, origin.x, origin.y);
+  };
+
   /**
    * Snap the dot to the corner it LIVES in, with a short slide.
    *
@@ -11007,8 +11608,15 @@ function mountFloatPanel(scope, t, hostCtx) {
    * to send the dot to the top-left corner the user never asked for.
    * @returns {{x: number, y: number}} the corner the dot now sits on.
    */
-  var snapToCorner = function () {
+  var snapToCorner = function (instant) {
     var bounds = floatBounds();
+    // A stand-in region is not a home: the window's corner is what the dot would
+    // land on over a page whose conversation is merely not measurable yet, which
+    // is the reported "it snaps to the window's left edge instead of the
+    // conversation's corner". A dot the document already placed keeps the corner
+    // the last REAL region gave it; the observer settles it again the moment one
+    // exists (see `reflowIntoBounds`).
+    if (!boundsAreReal && pos !== null) return pos;
     var snapped;
     if (pos !== null) {
       snapped = cornerHome(bounds, pos);
@@ -11030,7 +11638,11 @@ function mountFloatPanel(scope, t, hostCtx) {
     }
     pos = snapped;
     try {
-      host.classList.add("dfp-floatSnap");
+      // An instant settle must also DROP a snap class left over from an earlier
+      // move, or the very same `left`/`top` write is animated and the panel appears
+      // to drift over from where it used to be.
+      if (instant === true) host.classList.remove("dfp-floatSnap");
+      else host.classList.add("dfp-floatSnap");
     } catch (error) {
       // A host without classes still lands on the snapped corner.
     }
@@ -11141,9 +11753,15 @@ function mountFloatPanel(scope, t, hostCtx) {
    *   dot rather than the document handing it a position.
    * @returns {boolean} true when the dot was moved onto its corner.
    */
-  var settleOnCorner = function (regionMoved) {
+  var settleOnCorner = function (regionMoved, instant) {
     if (drag !== null || resize !== null) return false;
     var bounds = floatBounds();
+    // Nothing real to settle onto: a shut panel on a settings page, or a
+    // conversation that is not measurable at this instant, leaves the dot where
+    // it is — moving it onto the window's corner is the bug, not the fallback.
+    // With nothing stored at all there is no home to keep, so the stylesheet's
+    // own corner is pinned as before.
+    if (!boundsAreReal && pos !== null) return false;
     var at = pos;
     if (at === null) {
       var rect = rectOf(host);
@@ -11183,7 +11801,7 @@ function mountFloatPanel(scope, t, hostCtx) {
       at.y + shared.FLOAT_DOT <= bounds.bottom + 0.5
     );
     pos = { x: Math.round(at.x), y: Math.round(at.y) };
-    snapToCorner();
+    snapToCorner(instant);
     // Both fields in ONE write: the dot is on the corner and the document is
     // told which corner that is, in the same `mutate`. A region that changed
     // shape is the caller that has to store the move it just made, wherever the
@@ -11208,8 +11826,22 @@ function mountFloatPanel(scope, t, hostCtx) {
    * `settleOnCorner`).
    */
   var reflowIntoBounds = function () {
-    if (!settleOnCorner(true)) return;
-    if (open) render();
+    var bounds = floatBounds();
+    var wasSide = cardQuadrant;
+    if (pos !== null) {
+      // The card's side belongs to the corner the dot is going to, so it is
+      // decided BEFORE the dot is moved — the two then land in the same frame,
+      // and a changed side never sweeps across the middle behind a slide.
+      var home = cornerHome(bounds, pos);
+      cardQuadrant = shared.floatCardCorner(bounds, home.x, home.y);
+    }
+    var moved = settleOnCorner(true);
+    if (open && (moved || cardQuadrant !== wasSide)) {
+      // The region moved the dot and possibly the card's side with it: follow it
+      // in one motion rather than in a jump and a slide (see `anchorGlide`).
+      anchorGlide = moved;
+      render();
+    }
   };
 
   /**
@@ -11420,6 +12052,11 @@ function mountFloatPanel(scope, t, hostCtx) {
     // again here rather than trusted from the render that built the card.
     armClipStart(card);
     card.classList.add("dfp-floatCardLeave");
+    setShadeClass("dfp-floatCardLeave", true);
+    // The glass folds with it: same clip on both, frame by frame (see
+    // `mirrorGlassClip`). Looked up here rather than captured, because this runs
+    // long after the render that built the card.
+    mirrorGlassClip(card, host.querySelector(".dfp-floatGlass"), FLOAT_LEAVE_MS + 80);
     // The dot comes back on the same two frames and over the same span as the
     // fold, so the two cross-fades end together. It is a live element (the
     // render that opened the panel built it), never a rebuilt one.
@@ -11498,7 +12135,10 @@ function mountFloatPanel(scope, t, hostCtx) {
       // browser cancelled) would otherwise unfold the card in the middle of the
       // conversation. An ordinary open — the dot already on its corner — moves
       // nothing at all.
-      settleOnCorner();
+      settleOnCorner(false, true);
+      // Which side the unfold goes to: the card's own vote, taken once, here —
+      // the one moment before it exists on the page (see `voteCardQuadrant`).
+      voteCardQuadrant();
       playEnter = true;
       if (closeTimer !== null) {
         globalThis.clearTimeout(closeTimer);
@@ -11509,13 +12149,46 @@ function mountFloatPanel(scope, t, hostCtx) {
     render();
   };
 
+  /**
+   * Apply one preset from the panel.
+   *
+   * Every value axis the entry stores, or that axis's neutral default when it
+   * does not — the card's `switchPreset` contract, so the two surfaces agree on
+   * what a preset means. It is ONE batch: a switch that landed field by field
+   * would repaint the page through every intermediate state. `mirror: false`
+   * because picking a preset is a selection, not an edit of that preset.
+   * @param {{name: string, values: object}} entry - the picked preset.
+   * @param {{presetList: object[], writable: boolean}} state - the panel's read.
+   */
+  var applyPreset = function (entry, state) {
+    if (!state.writable) return;
+    var changes = {};
+    for (var index = 0; index < VALUE_FIELDS.length; index += 1) {
+      var field = VALUE_FIELDS[index];
+      changes[field] = Object.prototype.hasOwnProperty.call(entry.values, field)
+        ? entry.values[field]
+        : DEFAULTS[field];
+    }
+    changes[ACTIVE_PRESET_FIELD] = entry.name;
+    writeSingleShot(scope, state.presetList, entry.name, changes, {
+      mirror: false,
+      onError: reportError,
+    });
+    render();
+  };
+
   var commit = function (changes, options) {
     var state = readState();
     if (!state.writable) return;
     var settings = options !== null && typeof options === "object" ? options : {};
     if (settings.mirror === undefined) settings.mirror = true;
+    var routed = routeForTheme(changes, state.config);
+    // A dark batch never rides a preset: the snapshot is the light set (the card's
+    // mirror rule says the same), so mirroring it would store dark values as light
+    // ones and the preset would drift.
+    if (routed !== changes) settings.mirror = false;
     settings.onError = reportError;
-    writeSingleShot(scope, state.presetList, state.activeName, changes, settings);
+    writeSingleShot(scope, state.presetList, state.activeName, routed, settings);
     render();
   };
 
@@ -11759,10 +12432,35 @@ function mountFloatPanel(scope, t, hostCtx) {
       // region is where it lives from now on. Every other path reads the
       // remembered corner instead (see `settleOnCorner`), which is what keeps a
       // region change from re-deciding it from stale coordinates.
-      corner = shared.floatNearestCorner(floatBounds(), pos.x, pos.y);
+      var bounds = floatBounds();
+      // Which corner the dot goes to is read from the PANEL's own middle while
+      // the panel is up — a panel dragged by its head hangs a full card away
+      // from the dot, so asking where the DOT is made the user haul it far past
+      // the conversation's own middle to reach the far side. The conversation's
+      // middle is the origin either way: above it is up, right of it is right.
+      var ref = cardMiddle();
+      if (ref === null) {
+        ref = { x: pos.x + shared.FLOAT_DOT / 2, y: pos.y + shared.FLOAT_DOT / 2 };
+      }
+      corner = shared.floatQuadrantIn(bounds, ref.x, ref.y);
+      // The card's side is decided for the corner the dot LANDS on, not for
+      // where the hand let go: a dot moved to the opposite corner has to take
+      // the card with it, or the panel hangs off the conversation on the side
+      // the old corner had room on.
+      var home = shared.floatCornerPoint(bounds, corner);
+      // Voted for the corner the dot is LANDING on, without moving the dot
+      // first: a stand-in region refuses to move the dot, and a `pos` written
+      // here would then claim a corner the host never went to.
+      voteCardQuadrant(bounds, home);
+      // The snap itself is always animated. The card re-anchors in the same
+      // frame, so a side that changed is already on its new edge while the dot
+      // slides — one reposition at the release point rather than a card dragged
+      // across the screen with its far edge pinned.
       snapToCorner();
       var live = readState();
       writeLivePos(live);
+      // The rebuild that follows rides the snap: a side that changed glides.
+      anchorGlide = open;
       render();
     };
     var up = function () {
@@ -11842,19 +12540,14 @@ function mountFloatPanel(scope, t, hostCtx) {
     var move = function (at) {
       if (resize === null) return;
       resize.moved = true;
-      var w = resize.w;
-      var h = resize.h;
-      if (resize.mode === "w" || resize.mode === "wh") {
-        w = Math.min(shared.PANEL_SIZE_MAX_W, Math.max(shared.PANEL_SIZE_MIN_W, Math.round(resize.w + at.clientX - resize.startX)));
-      }
-      if (resize.mode === "h" || resize.mode === "wh") {
-        h = Math.min(shared.PANEL_SIZE_MAX_H, Math.max(shared.PANEL_SIZE_MIN_H, Math.round(resize.h + at.clientY - resize.startY)));
-      }
-      liveSize = { w: w, h: h };
-      // The viewport cap rides the live size as well: what the pointer shows is
-      // what the release stores, and the card can never leave the screen.
+      var w = Math.min(
+        shared.PANEL_SIZE_MAX_W,
+        Math.max(shared.PANEL_SIZE_MIN_W, Math.round(resize.w + at.clientX - resize.startX))
+      );
+      liveSize = { w: w, h: 0 };
+      // Width only: the height follows the content, so writing one here would pin
+      // the panel to whatever it happened to measure at pointerdown.
       box.style.width = "min(" + w + "px,calc(100vw - 32px))";
-      box.style.height = "min(" + h + "px,calc(100vh - 24px))";
     };
     var end = function (write) {
       globalThis.removeEventListener("pointermove", move);
@@ -11863,7 +12556,8 @@ function mountFloatPanel(scope, t, hostCtx) {
       var wasMoved = resize !== null && resize.moved;
       resize = null;
       if (write && wasMoved && liveSize !== null) {
-        var cur = liveSize.w + "," + liveSize.h;
+        // Height 0 means "no cap": the panel is as tall as its content.
+        var cur = liveSize.w + ",0";
         if (cur !== pendingSizeWrite) {
           var live = readState();
           if (live.writable) {
@@ -11978,12 +12672,23 @@ function mountFloatPanel(scope, t, hostCtx) {
     if (open && !(playEnter && !motionReduced()) && typeof dot.classList !== "undefined") {
       dot.classList.add("dfp-dotAway");
     }
-    if (!open) return;
+    if (!open) {
+      // A shut panel has no card to glide; a glide armed by a snap is spent here
+      // rather than left to surprise the next open.
+      anchorGlide = false;
+      return;
+    }
 
     // The shadow's own layer: the card is clipped while it animates, and a clip
     // on the card would clip the card's own filter away with it (see the sheet).
     var shadow = el("div", "dfp-floatShadow");
     var card = el("div", "dfp-floatCard");
+    // The translucent surface behind the card. A SIBLING, never a child: a blur
+    // inside the card would sample the card's own contents (the card fades to .6
+    // and then 0 while it unfolds, and an element below opacity 1 is a backdrop
+    // root). Mounted directly before the card at the end of this render.
+    var glass = el("div", "dfp-floatGlass" + (GLASS_OK ? " dfp-floatGlassOn" : ""));
+    // Mounted as the card's first child at the end of this render.
     // The bar the dot sits in decides the expand direction, and that bar is the
     // CONVERSATION's: `floatBounds` measures it, so a dot parked in the region's
     // top-right grows left-down even where the window would call it bottom-right.
@@ -11998,15 +12703,24 @@ function mountFloatPanel(scope, t, hostCtx) {
       // first one is a decision, not a coincidence.
       anchor = { x: bounds.right, y: bounds.bottom };
     }
-    var quadrant = shared.floatQuadrantIn(bounds, anchor.x, anchor.y);
-    // The remembered corner is the answer the card is really anchored on: a
-    // region narrow enough puts a corner's coordinates on the other side of its
-    // own middle, and the card still has to grow AWAY from the corner the dot
-    // lives in rather than flip around it. A dot that is not on its remembered
-    // corner (mid-drag, or a position just adopted) is read from where it is.
-    // Asked through a helper: `corner` below is the CARD's anchored corner, and
-    // a local of that name here would shadow the dot's identity.
-    quadrant = dotQuadrant(bounds, anchor, quadrant);
+    var quadrant;
+    if (cardQuadrant !== null) {
+      // The card's side is its own answer (see `voteCardQuadrant`): the side of
+      // the dot that holds more of the card, voted when a side may change.
+      quadrant = cardQuadrant;
+    } else {
+      // A card that has never been placed anywhere unfolds out of the dot, which
+      // is also where a first panel ends up.
+      quadrant = shared.floatQuadrantIn(bounds, anchor.x, anchor.y);
+      // The remembered corner is the answer the card is really anchored on: a
+      // region narrow enough puts a corner's coordinates on the other side of its
+      // own middle, and the card still has to grow AWAY from the corner the dot
+      // lives in rather than flip around it. A dot that is not on its remembered
+      // corner (mid-drag, or a position just adopted) is read from where it is.
+      // Asked through a helper: `corner` below is the CARD's anchored corner, and
+      // a local of that name here would shadow the dot's identity.
+      quadrant = dotQuadrant(bounds, anchor, quadrant);
+    }
     liveQuadrant = quadrant;
     var expand = shared.floatExpandDirection(quadrant);
     try {
@@ -12040,15 +12754,12 @@ 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))";
-      // 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))" : "";
+      // The height is the CONTENT's, always: the panel is exactly as tall as what
+      // it holds, and the card's own `max-height: calc(100vh - 24px)` keeps a long
+      // one inside the window. A stored height is no longer applied — the two
+      // vertical grips that produced one are gone, and honouring an old value
+      // would leave such a panel short with a scrollbar it cannot grow out of.
+      card.style.maxHeight = "";
       if (resize === null) shadow.style.height = "";
     }
     var head = el("div", "dfp-floatHead");
@@ -12067,6 +12778,32 @@ function mountFloatPanel(scope, t, hostCtx) {
           shared.FLOAT_CARD_PAD
       ) + "px";
     head.appendChild(el("span", "dfp-floatTitle", t("panel.title")));
+    // The preset picker lives in the head, right of the title: the panel is where
+    // the page actually gets tuned, so switching a whole setup should not need a
+    // trip to the settings sheet, and the head is the one row always on screen.
+    if (state.presetList.length > 0) {
+      var picker = el("select", "dfp-floatPreset");
+      picker.setAttribute("aria-label", t("preset.label"));
+      picker.title = t("preset.label");
+      if (!state.writable) picker.disabled = true;
+      for (var pickIndex = 0; pickIndex < state.presetList.length; pickIndex += 1) {
+        var pickEntry = state.presetList[pickIndex];
+        var pickOption = el("option", null, pickEntry.name);
+        pickOption.value = pickEntry.name;
+        if (pickEntry.name === state.activeName) pickOption.selected = true;
+        picker.appendChild(pickOption);
+      }
+      picker.addEventListener("change", function () {
+        var picked = readState();
+        for (var scan = 0; scan < picked.presetList.length; scan += 1) {
+          if (picked.presetList[scan].name === picker.value) {
+            applyPreset(picked.presetList[scan], picked);
+            return;
+          }
+        }
+      });
+      head.appendChild(picker);
+    }
     // The settings entry sits IMMEDIATELY LEFT of the close: the same circle, one
     // diameter plus FLOAT_SETTINGS_GAP along the corner (see the stylesheet).
     // Its own rule puts it there, so the pair stays 8px apart at every card size.
@@ -12102,8 +12839,13 @@ function mountFloatPanel(scope, t, hostCtx) {
     // this guard missing, the click the close button waits for never arrived.
     head.addEventListener("pointerdown", function (event) {
       var pressed = event.target;
+      // Anything the reader can operate owns its own press: the two round buttons,
+      // and the preset picker that now shares this row. A press that reached the
+      // drag instead would preventDefault it, and a prevented pointerdown
+      // suppresses the compatibility mouse events — the click the control waits
+      // for would never arrive.
       if (pressed !== null && pressed !== undefined && typeof pressed.closest === "function" &&
-        pressed.closest("button") !== null) {
+        pressed.closest("button,select,input,textarea,a") !== null) {
         return;
       }
       startDrag(event, head, state.writable);
@@ -12298,27 +13040,56 @@ function mountFloatPanel(scope, t, hostCtx) {
       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`).
+    // One resize grip: the right edge, width only. It sits INSIDE the card, so a
+    // press near the panel's right edge is still a resize and never a stray click
+    // on whatever the row put there.
     (function () {
-      var edges = [
-        { mode: "w", className: "dfp-floatResize dfp-floatResizeR" },
-        { mode: "h", className: "dfp-floatResize dfp-floatResizeB" },
-        { mode: "wh", className: "dfp-floatResize dfp-floatResizeBR" },
-      ];
-      for (var edgeIndex = 0; edgeIndex < edges.length; edgeIndex += 1) {
-        (function (edge) {
-          var grip = el("div", edge.className);
-          grip.setAttribute("data-dfp-resize", edge.mode);
-          grip.addEventListener("pointerdown", function (event) {
-            startResize(event, edge.mode, shadow, card);
-          });
-          card.appendChild(grip);
-        })(edges[edgeIndex]);
-      }
+      var grip = el("div", "dfp-floatResize dfp-floatResizeR");
+      grip.setAttribute("data-dfp-resize", "w");
+      grip.addEventListener("pointerdown", function (event) {
+        startResize(event, "w", shadow, card);
+      });
+      card.appendChild(grip);
     })();
+    var shadeEl = el("div", "dfp-floatShade");
+    shadeEl.style.transformOrigin = cardCorner.origin;
+    shadow.appendChild(shadeEl);
+    shadow.appendChild(glass);
     shadow.appendChild(card);
     host.appendChild(shadow);
+    // A side is an anchored EDGE, so switching it moves the card by its own
+    // width in one frame. On a snap that would be a jump to the middle of the
+    // screen FOLLOWED by the slide to the corner — two motions. The card is put
+    // back where it already was on screen with a translate, and that translate
+    // is released over the dot's own 160 ms: the panel then travels from where
+    // the user let go straight to the corner, in one motion, with the dot.
+    var anchorLeft = 0;
+    var anchorTop = 0;
+    try {
+      anchorLeft = shadow.offsetLeft;
+      anchorTop = shadow.offsetTop;
+    } catch (error) {
+      // An unmeasurable layer keeps no glide; the side change is instant.
+    }
+    if (anchorGlide && lastAnchor !== null) {
+      anchorGlide = false;
+      var glideX = lastAnchor.left - anchorLeft;
+      var glideY = lastAnchor.top - anchorTop;
+      if (glideX !== 0 || glideY !== 0) {
+        try {
+          shadow.style.transform = "translate(" + glideX + "px," + glideY + "px)";
+          // One forced layout commits that frame, so the next write has a value
+          // to leave FROM; without it both writes land in one recalc and the
+          // glide is the same jump it was meant to remove.
+          shadow.getBoundingClientRect();
+          shadow.style.transition = "transform " + FLOAT_SNAP_MS + "ms ease";
+          shadow.style.transform = "none";
+        } catch (error) {
+          shadow.style.transform = "";
+        }
+      }
+    }
+    lastAnchor = { left: anchorLeft, top: anchorTop };
     // Enter animation, only on a real shut->open transition: the card starts
     // clipped to the dot's own rectangle, a hair smaller and dimmer, and the
     // next frames let the transition carry all three home (clip/transform/
@@ -12333,6 +13104,8 @@ function mountFloatPanel(scope, t, hostCtx) {
       card.classList.add("dfp-floatCardArm");
       armClipStart(card);
       card.classList.add("dfp-floatCardEnter");
+      setShadeClass("dfp-floatShadeHidden", true);
+      mirrorGlassClip(card, glass, FLOAT_UNFOLD_MS + 80);
       var settled = false;
       var settleTimer = null;
       /**
@@ -12366,6 +13139,7 @@ function mountFloatPanel(scope, t, hostCtx) {
           return;
         }
         card.style.clipPath = "none";
+        if (glass !== null && glass !== undefined) glass.style.clipPath = "none";
       };
       var settle = function () {
         if (settled) return;
@@ -12377,6 +13151,9 @@ function mountFloatPanel(scope, t, hostCtx) {
         if (card.parentNode !== null) {
           card.classList.remove("dfp-floatCardArm");
           card.classList.remove("dfp-floatCardEnter");
+          // Two frames in, with the pinned 0 already painted: releasing it now runs
+          // the shade's fade over exactly the span the card spends growing.
+          setShadeClass("dfp-floatShadeHidden", false);
         }
         // The dot goes out on the same two frames, so its own 1 paints first
         // and the cross-fade runs with the unfold rather than before it.
@@ -12464,6 +13241,21 @@ function mountFloatPanel(scope, t, hostCtx) {
   } catch (error) {
     // A host without an event target still watches through the observer.
   }
+  // The panel edits whichever set the page is showing, so a theme switch has to
+  // rebuild it: without this, flipping to dark left every slider on the light
+  // values, and the next drag wrote those back into the light set — the exact
+  // opposite of what the reader asked for.
+  try {
+    themeWatcher = new MutationObserver(function () {
+      render();
+    });
+    themeWatcher.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["data-ds-dark-theme"],
+    });
+  } catch (error) {
+    // A host without MutationObserver keeps the panel on the set it opened with.
+  }
   watchRegion();
   reflowIntoBounds();
   // Armed AFTER the mount settle: the first reading is only the baseline the next
@@ -12503,6 +13295,14 @@ function mountFloatPanel(scope, t, hostCtx) {
         }
         pollTimer = null;
       }
+      if (themeWatcher !== null) {
+        try {
+          themeWatcher.disconnect();
+        } catch (error) {
+          // Already gone with the page.
+        }
+        themeWatcher = null;
+      }
       pollBounds = null;
       armed = false;
       leaving = false;
@@ -12853,10 +13653,13 @@ function apply(ctx) {
       Date.now(),
       PAINT_PATIENCE_MS
     );
-    // Light and dark share one value set in this release: the stored flag (if
-    // any) is ignored, so no prefixed dark rules are ever emitted.
+    // Per-theme is honoured exactly as stored (0.7.0). This used to be forced to
+    // `false` here because nothing in the UI could edit the dark set, so a stored
+    // flag could only produce rules the reader had no way to understand. The
+    // card's theme control is that way now: `normalizeConfig` has already coerced
+    // the flag and decoded the map, and `buildFontCss` emits the second,
+    // theme-prefixed ruleset whenever the two sets actually differ.
     var unified = normalizeConfig(shared.overlayPendingValues(snapshot.value, pendingLocalValues));
-    unified[PER_THEME_FIELD] = false;
     probeLog("sync", {
       overlay: Object.keys(pendingLocalValues).map(function (key) {
         return key + "=" + String(pendingLocalValues[key].value);