mtskf
diff --git a/‎src/webview/cm/theme.ts‎
Lines changed: 57 additions & 19 deletions b/‎src/webview/cm/theme.ts‎
Lines changed: 57 additions & 19 deletions
diff --git a/‎test/webview-browser/fenced-header-bar.browser.test.ts‎
Lines changed: 106 additions & 0 deletions b/‎test/webview-browser/fenced-header-bar.browser.test.ts‎
Lines changed: 106 additions & 0 deletions
diff --git a/‎test/webview/fenced-code/cm-fenced-code-language-picker.test.ts‎
Lines changed: 32 additions & 7 deletions b/‎test/webview/fenced-code/cm-fenced-code-language-picker.test.ts‎
Lines changed: 32 additions & 7 deletions
@@ -1008,13 +1008,55 @@ export const quollCopyButtonTheme = EditorView.theme(copyButtonThemeSpec);
 // Conceal/reveal geometry: in the revealed state the controls share the open fence
 // line's padding box with the bar → aligned. In the concealed state the controls
 // sit in the zero-height `-fence-hidden` row while the bar rides the migrated
-// first-body-line; that row lacks the line's transparent alignment borders, so two
-// :has(+ …) / descendant rules re-add the gap-y (vertical, outer-open only) and the
-// 6px column inset (horizontal) offsets so the fence-hidden controls land on the
-// strip in both states (PR #246 adjacency precedent). Separate EditorView.theme for
-// the same unlayered-override reason as copyButtonThemeSpec; exported plain so the
-// picker suite pins the contract.
-export const fencedHeaderBarThemeSpec = {
+// first-body-line; that row lacks the line's transparent alignment borders, so
+// three re-add rules restore it: two `:has(+ …)` selector lists — one per control
+// (copy button, label) — for the vertical gap-y offset (see concealedGapAnchor),
+// plus one descendant rule for the label's 6px horizontal column inset. Together
+// they land the fence-hidden controls on the strip in both states (PR #246
+// adjacency precedent). Separate EditorView.theme for the same unlayered-override
+// reason as copyButtonThemeSpec; exported plain so the picker suite pins the
+// contract.
+
+/** Selector for a CONCEALED open fence's header controls that must be pushed back
+ *  down by the panel's EXTERNAL --quoll-block-gap-y top border.
+ *
+ *  Why the offset exists: the panel fill uses `background-clip: padding-box`, so a
+ *  visible open edge carrying blockEdgeGapCorner's transparent top border paints its
+ *  surface --quoll-block-gap-y BELOW its border box. The concealed anchor is the
+ *  zero-height `-fence-hidden` row, which sits at that border box's TOP and has no
+ *  such border of its own — so an absolute `top` on it resolves against a datum
+ *  --quoll-block-gap-y too high, and the control hangs out over the panel's rounded
+ *  top edge. Adding the gap back restores the same inset the revealed state gets for
+ *  free (its anchor IS the bordered line).
+ *
+ *  Why the condition is the GAP BORDER, not the language tag: the border is emitted
+ *  by whichever `-outer-open` class marks the panel's true outer boundary, and both
+ *  spellings resolve the SAME --quoll-block-gap-y token via blockEdgeGapCorner — a
+ *  top-level fenced panel gets `quoll-fenced-code-outer-open`, a blockquote-nested one
+ *  gets `quoll-blockquote-outer-open` instead (block-style.ts suppresses fenced
+ *  outer-open inside a quote). The language tag has nothing to do with it, so gating
+ *  on `-has-language` left every BARE block — and every blockquote-nested block, tagged
+ *  or not — uncorrected. Real-pixel evidence for all of these states:
+ *  test/webview-browser/fenced-header-bar.browser.test.ts.
+ *
+ *  A selector LIST (not a compound) is what keeps this safe from double-counting: the
+ *  two classes are mutually exclusive on a fenced open edge, and even if they were not,
+ *  matching two branches applies the one declaration once. Requiring
+ *  `.quoll-fenced-code-open` on the adjacent line keeps the match to a fenced panel's
+ *  own migrated header line rather than any neighbouring outer-open block. */
+const concealedGapAnchor = (control: string): string =>
+  [".quoll-fenced-code-outer-open", ".quoll-blockquote-outer-open"]
+    .map(
+      (outerOpen) =>
+        `.cm-line.quoll-fenced-code-fence-hidden:has(+ .cm-line.quoll-fenced-code-open${outerOpen}) ${control}`
+    )
+    .join(", ");
+
+// Explicitly typed (the sibling specs infer): the two computed template-literal
+// keys below make TS infer a UNION of per-key value shapes, each padding the other
+// keys' properties with `?: undefined`, which no longer satisfies StyleSpec's index
+// signature. The annotation states the shape the spec has always had.
+export const fencedHeaderBarThemeSpec: Record<string, Record<string, string>> = {
   ".cm-line.quoll-fenced-code-open.quoll-fenced-code-has-language": {
     // Self-sufficient positioning context (do NOT rely on copyButtonThemeSpec's).
     position: "relative",
@@ -1127,24 +1169,20 @@ export const fencedHeaderBarThemeSpec = {
   },
   // Concealed-state alignment. The `-fence-hidden` row lacks the line's transparent
   // alignment borders, so absolute offsets resolve to the row's raw left / top edge.
-  //   - VERTICAL: only when the migrated header line is a TRUE outer boundary (its
-  //     transparent --quoll-block-gap-y top border pushes the bar's padding box
-  //     down) — offset both controls down by the gap. Scoped by the NEXT line being
-  //     a has-language outer-open header, so bare blocks are untouched.
+  //   - VERTICAL: {@link concealedGapAnchor} — the offset follows the GAP BORDER, not
+  //     the language tag (a bare block's panel carries the same border).
   //   - HORIZONTAL: the revealed line's 6px transparent left border insets the label;
   //     a plain (non-blockquote) fence-hidden row has none, so re-add the column
   //     inset. A BLOCKQUOTE-nested fence-hidden row ALREADY carries the blockquote's
   //     6px transparent border (same --quoll-column-inset-left token), so it must NOT
   //     re-add it (double-count → the nested label drifts ~6px right) — hence
   //     :not(.quoll-blockquote).
-  ".cm-line.quoll-fenced-code-fence-hidden:has(+ .cm-line.quoll-fenced-code-has-language.quoll-fenced-code-outer-open) .quoll-copy-button":
-    {
-      top: "calc(0.3em + var(--quoll-block-gap-y, 8px))",
-    },
-  ".cm-line.quoll-fenced-code-fence-hidden:has(+ .cm-line.quoll-fenced-code-has-language.quoll-fenced-code-outer-open) .quoll-language-picker-label.is-labeled":
-    {
-      top: "var(--quoll-block-gap-y, 8px)",
-    },
+  [concealedGapAnchor(".quoll-copy-button")]: {
+    top: "calc(0.3em + var(--quoll-block-gap-y, 8px))",
+  },
+  [concealedGapAnchor(".quoll-language-picker-label.is-labeled")]: {
+    top: "var(--quoll-block-gap-y, 8px)",
+  },
   ".cm-line.quoll-fenced-code-fence-hidden:not(.quoll-blockquote) .quoll-language-picker-label.is-labeled":
     {
       left: "calc(0.55em + var(--quoll-column-inset-left, 6px))",
 
@@ -8,6 +8,14 @@
 // styles.css is not loaded, so every --quoll-* token resolves to its in-spec
 // fallback (header height 2.1em, gap-y 8px, column inset 6px), which is exactly the
 // production geometry we want to pin.
+//
+// The second suite below pins the VERTICAL half of that correction across every
+// nesting/conceal combination. It is the only place the bug it guards can be seen:
+// the panel's painted top edge is its padding-box top (background-clip: padding-box
+// over a transparent --quoll-block-gap-y border), and only a layout engine reports
+// where that lands. Before concealedGapAnchor generalised the offset off the language
+// tag, a bare concealed block put the copy button 4px ABOVE the paint (over the
+// rounded corner) while its tagged twin sat 4px inside.
 import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
 import { EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
@@ -121,3 +129,101 @@ describe("fenced-code header bar — real-pixel layout", () => {
     expect(shown(label(view)), "label hidden while editing").toBe(false);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Copy-button vertical inset vs the panel's PAINTED top edge.
+// ---------------------------------------------------------------------------
+
+/** The painted top edge of the panel the control belongs to: the padding-box top of
+ *  the panel's visible open-edge line. The fill is `background-clip: padding-box`, so
+ *  a transparent --quoll-block-gap-y top border is NOT painted — the surface starts
+ *  that much below the border box. Walking forward from the control's own anchor line
+ *  to the first `-open` line pairs each control with ITS panel (adjacent blocks). */
+function paintedPanelTop(view: EditorView, control: HTMLElement): number {
+  const lines = [...view.contentDOM.querySelectorAll<HTMLElement>(".cm-line")];
+  const anchor = control.closest(".cm-line") as HTMLElement | null;
+  for (let i = anchor === null ? 0 : lines.indexOf(anchor); i < lines.length; i++) {
+    const line = lines[i];
+    if (line.classList.contains("quoll-fenced-code-open")) {
+      return (
+        line.getBoundingClientRect().top + Number.parseFloat(getComputedStyle(line).borderTopWidth)
+      );
+    }
+  }
+  throw new Error("no visible fenced open edge for this control");
+}
+
+/** How far the copy button's top sits INSIDE the painted panel top. Positive = inside
+ *  (correct); negative = hanging over the panel's rounded top edge (the bug). */
+function copyInsets(view: EditorView): number[] {
+  return [...view.contentDOM.querySelectorAll<HTMLElement>(".quoll-copy-button")].map(
+    (cp) => cp.getBoundingClientRect().top - paintedPanelTop(view, cp)
+  );
+}
+
+// `top: 0.3em` at the fence-hidden row's 0.9em-of-16px font ≈ 4px. Pinning the band
+// (not the float) keeps the test about the CONTRACT — the button is inset by the
+// declared 0.3em, not the gap-sized 8px-off datum a missing correction produces
+// (-4px) nor a doubled one (+12px) — while tolerating sub-pixel font rounding.
+const EXPECTED_INSET = 4;
+const TOLERANCE = 1.5;
+
+describe("copy button sits INSIDE the painted panel top in every concealed nesting", () => {
+  // Each case is a doc whose caret parks OUTSIDE every fenced block (reading mode →
+  // concealed fences), except where the name says otherwise. The bug this pins was
+  // concealed-only: revealed anchors are the bordered open line itself.
+  const cases: Array<{ name: string; doc: string; caret?: number }> = [
+    { name: "bare block, concealed (the reported bug)", doc: "```\nconst a = 1;\n```\n\npara" },
+    { name: "language-tagged block, concealed", doc: "```js\nconst a = 1;\n```\n\npara" },
+    { name: "bare block, revealed", doc: "```\nconst a = 1;\n```\n\npara", caret: 2 },
+    { name: "language-tagged block, revealed", doc: "```js\nconst a = 1;\n```\n\npara", caret: 2 },
+    // Blockquote-nested: block-style suppresses the FENCED outer-open inside a quote
+    // and the QUOTE's outer-open supplies the identical gap border instead — the
+    // second source concealedGapAnchor has to cover.
+    {
+      name: "blockquote-nested bare block, concealed",
+      doc: "> ```\n> const a = 1;\n> ```\n\npara",
+    },
+    {
+      name: "blockquote-nested tagged block, concealed",
+      doc: "> ```js\n> const a = 1;\n> ```\n\npara",
+    },
+    {
+      name: "list-nested bare block, concealed",
+      doc: "- item\n\n  ```\n  const a = 1;\n  ```\n\npara",
+    },
+    // Bodyless: no body line for the edges to migrate onto, so the open fence line
+    // keeps the panel itself — already-correct states that must not gain a second
+    // offset from the widened selector.
+    { name: "bodyless bare block", doc: "```\n```\n\npara" },
+    { name: "bodyless tagged block (header-only bar)", doc: "```js\n```\n\npara" },
+  ];
+
+  for (const c of cases) {
+    it(c.name, async () => {
+      view = mount(c.doc, c.caret ?? c.doc.indexOf("para") + 1);
+      await settled();
+      const insets = copyInsets(view);
+      expect(insets, "one copy button per fenced block").toHaveLength(1);
+      const inset = insets[0];
+      expect(inset, "button top is below the painted panel top").toBeGreaterThan(0);
+      expect(Math.abs(inset - EXPECTED_INSET), `inset ${inset}px`).toBeLessThanOrEqual(TOLERANCE);
+    });
+  }
+
+  // Two directly-adjacent blocks collapse to ONE gap: the SECOND block yields its
+  // -outer-open, so its open edge has NO gap border and needs NO correction. Pins the
+  // adjacency gate itself — a correction applied unconditionally would push this one
+  // 8px too low.
+  it("directly-adjacent pair: both buttons land at the same inset", async () => {
+    const doc = "```\na\n```\n```\nb\n```\n\npara";
+    view = mount(doc, doc.indexOf("para") + 1);
+    await settled();
+    const insets = copyInsets(view);
+    expect(insets, "one copy button per block").toHaveLength(2);
+    for (const inset of insets) {
+      expect(inset).toBeGreaterThan(0);
+      expect(Math.abs(inset - EXPECTED_INSET), `inset ${inset}px`).toBeLessThanOrEqual(TOLERANCE);
+    }
+  });
+});
@@ -540,13 +540,38 @@ describe("quollFencedHeaderBarTheme (spec contract)", () => {
     // Explicit after `font: inherit` so the concealed row's line-height:0 can't clip.
     expect(sel?.lineHeight).toBe("normal");
   });
-  it("offsets fence-hidden controls by the gap when the next line is an outer-open header", () => {
-    const key = Object.keys(fencedHeaderBarThemeSpec).find(
-      (k) => k.includes(":has(") && k.includes("quoll-copy-button")
-    );
-    expect(key).toBeDefined();
-    expect(rule(key as string)?.top).toContain("--quoll-block-gap-y");
-  });
+  // The gap offset keys the correction on the GAP BORDER, not on the language tag:
+  // both `-outer-open` spellings emit the same --quoll-block-gap-y border (a
+  // top-level panel gets the fenced one, a blockquote-nested panel the quote's), and
+  // a bare block's panel carries it just as a tagged one does. Gating on
+  // `-has-language` left every bare and every blockquote-nested block uncorrected —
+  // the button then hung 4px over the panel's rounded top edge. The real-pixel
+  // evidence lives in test/webview-browser/fenced-header-bar.browser.test.ts; this
+  // pins the selector shape so the fix cannot be silently re-narrowed here.
+  for (const [control, prop] of [
+    [".quoll-copy-button", "top"],
+    [".quoll-language-picker-label.is-labeled", "top"],
+  ] as const) {
+    it(`offsets the fence-hidden ${control} by the gap on BOTH outer-open sources`, () => {
+      const key = Object.keys(fencedHeaderBarThemeSpec).find(
+        (k) => k.includes(":has(") && k.endsWith(` ${control}`)
+      );
+      expect(key).toBeDefined();
+      const selector = key as string;
+      expect(rule(selector)?.[prop]).toContain("--quoll-block-gap-y");
+      // One branch per gap-border source, and neither gated on the language tag.
+      const branches = selector.split(", ");
+      expect(branches).toHaveLength(2);
+      expect(branches.some((b) => b.includes(".quoll-fenced-code-outer-open"))).toBe(true);
+      expect(branches.some((b) => b.includes(".quoll-blockquote-outer-open"))).toBe(true);
+      for (const branch of branches) {
+        expect(branch).not.toContain("quoll-fenced-code-has-language");
+        // Anchored on the fence-hidden row, matched against its ADJACENT open edge.
+        expect(branch.startsWith(".cm-line.quoll-fenced-code-fence-hidden:has(+ ")).toBe(true);
+        expect(branch).toContain(".cm-line.quoll-fenced-code-open");
+      }
+    });
+  }
   it("re-adds the column inset to a NON-blockquote fence-hidden labelled wrapper only", () => {
     // The :not(.quoll-blockquote) scope prevents double-counting the inset on a
     // blockquote-nested fence-hidden row (which already carries the quote's border).