From 15d84b8a2ae8e541b52a42948ed88a033dbaff2c Mon Sep 17 00:00:00 2001
From: Todd Schiller <todd.schiller@gmail.com>
Date: Fri, 5 Jun 2026 15:37:08 -0400
Subject: [PATCH 1/2] Perf: CSS-first hide for chat-widget-hide (#150 Tier 2
 #13)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

chat-widget-hide is a clean CSS-first candidate — every selector is
vendor-specific id/class/iframe-attribute and the rule has no
candidateFilter. Replace the JS scan path with an injected
display:none!important stylesheet (also adopted into open shadow roots
via the existing helper).

Lazily-injected widgets (HubSpot's conversations-embed, Intercom's
loader, etc.) are now hidden at parse time with no observer, throttle,
or per-batch QSA on our side.

To preserve the toolbar badge count — which previously relied on the JS
path stamping HIDDEN_ATTR — placeholder-count now accepts a CSS-first
selector union via registerCssFirstSelectors and adds its match count to
the tally per recount. EasyList in ads-hide stays uncounted as before
(its 13k selectors would dwarf the badge).

cookie-banner-hide and newsletter-modal-hide both depend on
candidateFilter (overlay position checks, viewport area, email-input
gate) so they stay on the JS path for now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 extension/src/lib/css-hide-stylesheet.ts      |  76 +++++++++++
 extension/src/lib/placeholder-count.ts        |  45 ++++++-
 .../rules/__tests__/chat-widget-hide.test.ts  |  70 +++++-----
 extension/src/rules/chat-widget-hide.ts       | 121 +++++++++++-------
 4 files changed, 229 insertions(+), 83 deletions(-)
 create mode 100644 extension/src/lib/css-hide-stylesheet.ts

diff --git a/extension/src/lib/css-hide-stylesheet.ts b/extension/src/lib/css-hide-stylesheet.ts
new file mode 100644
index 0000000..415a059
--- /dev/null
+++ b/extension/src/lib/css-hide-stylesheet.ts
@@ -0,0 +1,76 @@
+// Copyright (c) 2026 PixieBrix, Inc.
+// Licensed under PolyForm Shield 1.0.0 — see LICENSE.
+
+// Inject a `display:none !important` stylesheet for a known list of static
+// selectors, and adopt the same sheet into every open shadow root. Used by
+// hide rules whose matches need no JS-side processing (no placeholder UI,
+// no per-element side effects, no candidate filtering) — the CSS engine
+// matches and hides for us, even for lazily-injected nodes, with no
+// MutationObserver on our side.
+
+import type { AdoptedShadowSheet } from "./shadow-stylesheets";
+import { adoptStylesheetIntoShadowRoots } from "./shadow-stylesheets";
+
+export interface HideStylesheet {
+  // Tear down the document-scope <style> element and stop adopting the
+  // sheet into shadow roots. Idempotent.
+  remove: () => void;
+}
+
+export interface InjectHideStylesheetOptions {
+  // DOM id stamped on the injected <style>. Used for re-entry idempotence
+  // and for orphan cleanup if a previous instance survived without
+  // teardown (e.g., navigation interrupted before teardown ran).
+  elementId: string;
+  selectors: readonly string[];
+}
+
+export function injectHideStylesheet(
+  options: InjectHideStylesheetOptions,
+): HideStylesheet {
+  const { elementId, selectors } = options;
+  const cssText = selectors
+    .map((selector) => `${selector}{display:none!important}`)
+    .join("\n");
+
+  let styleElement: HTMLStyleElement | null = null;
+  let adoptedSheet: AdoptedShadowSheet | null = null;
+
+  function inject(): void {
+    if (styleElement?.isConnected) {
+      return;
+    }
+    const element = document.createElement("style");
+    element.id = elementId;
+    element.textContent = cssText;
+    document.head.append(element);
+    styleElement = element;
+    // Document stylesheets do not cross shadow boundaries — anything
+    // rendered inside a web-component shadow tree would otherwise stay
+    // visible. The adopted-shadow-sheet path shares one CSSStyleSheet
+    // across every open shadow root (existing + future).
+    //
+    // The `isConnected` guard above allows re-entry when page JS removed
+    // our <style>; the prior adoptedSheet may still be live, so tear it
+    // down before re-adopting to avoid leaking the
+    // subscribeShadowRootAttached listener.
+    adoptedSheet?.remove();
+    adoptedSheet = adoptStylesheetIntoShadowRoots(cssText);
+  }
+
+  inject();
+
+  return {
+    remove() {
+      styleElement?.remove();
+      styleElement = null;
+      adoptedSheet?.remove();
+      adoptedSheet = null;
+      // Defensive: drop any orphaned <style> from a prior apply whose
+      // teardown didn't fire (e.g., page navigated mid-teardown).
+      for (const element of document.querySelectorAll(`#${elementId}`)) {
+        element.remove();
+      }
+    },
+  };
+}
diff --git a/extension/src/lib/placeholder-count.ts b/extension/src/lib/placeholder-count.ts
index b834935..10e483f 100644
--- a/extension/src/lib/placeholder-count.ts
+++ b/extension/src/lib/placeholder-count.ts
@@ -5,6 +5,17 @@
 // can render the total as a toolbar badge. Counts both placeholders that ship
 // with a reveal control and elements hidden in-place via display:none.
 //
+// Two count sources:
+//
+// 1. JS-path hides — elements stamped with HIDDEN_ATTR or wrapped in a
+//    PLACEHOLDER_CLASS element by selector-hide-rule. Found via one
+//    querySelectorAll on the union selector below.
+// 2. CSS-first hides — rules that hide via an injected stylesheet
+//    (chat-widget-hide, etc.) call registerCssFirstSelectors with their
+//    selector union. We QSA each registered union and add the count. No
+//    HIDDEN_ATTR is stamped on those elements (the stylesheet does the
+//    hiding), so they wouldn't be picked up by source #1.
+//
 // We watch document.body with a single MutationObserver and recount on each
 // throttled batch. Recounting via querySelectorAll is cheap relative to the
 // work the rules themselves do, and avoids us having to instrument every
@@ -22,8 +33,35 @@ export interface PlaceholderCountMessage {
   count: number;
 }
 
+const cssFirstUnions = new Set<string>();
+let recountTrigger: (() => void) | null = null;
+
+function noop(): void {
+  // Returned from registerCssFirstSelectors when the caller passed an
+  // empty union — nothing to unregister.
+}
+
+// Register a CSS-first selector union with the counter. Returns an
+// unregister fn. Safe to call before startPlaceholderCountReporter runs
+// (the union is recorded and picked up by the first count).
+export function registerCssFirstSelectors(union: string): () => void {
+  if (union.length === 0) {
+    return noop;
+  }
+  cssFirstUnions.add(union);
+  recountTrigger?.();
+  return () => {
+    cssFirstUnions.delete(union);
+    recountTrigger?.();
+  };
+}
+
 function currentCount(): number {
-  return document.body.querySelectorAll(COUNT_SELECTOR).length;
+  let count = document.body.querySelectorAll(COUNT_SELECTOR).length;
+  for (const union of cssFirstUnions) {
+    count += document.body.querySelectorAll(union).length;
+  }
+  return count;
 }
 
 function send(count: number): void {
@@ -55,6 +93,11 @@ export function startPlaceholderCountReporter(): void {
     trailing: true,
   });
 
+  // Allow registerCssFirstSelectors callers to trigger a recount when a
+  // rule applies/tears down after startup — otherwise we'd wait for the
+  // next DOM mutation, which never comes on a static page.
+  recountTrigger = throttled;
+
   // Initial report — fires whether or not any rule has run yet, so the badge
   // clears on pages with no matches.
   reportIfChanged();
diff --git a/extension/src/rules/__tests__/chat-widget-hide.test.ts b/extension/src/rules/__tests__/chat-widget-hide.test.ts
index 423b7f6..25a64bb 100644
--- a/extension/src/rules/__tests__/chat-widget-hide.test.ts
+++ b/extension/src/rules/__tests__/chat-widget-hide.test.ts
@@ -1,28 +1,21 @@
-import { HIDDEN_ATTR } from "../../lib/dom-markers";
 import { PLACEHOLDER_CLASS } from "../../lib/placeholder";
 import { chatWidgetHideRule } from "../chat-widget-hide";
 
-const RULE_ID = "chat-widget-hide";
+const STYLE_ID = "abs-chat-widget-hide";
 
 function expectHidden(element: Element | null): void {
-  expect(element?.getAttribute(HIDDEN_ATTR)).toBe(RULE_ID);
-  expect((element as HTMLElement | null)?.style.display).toBe("none");
-}
-
-const MUTATION_THROTTLE_MS = 250;
-
-async function flushMutations(): Promise<void> {
-  await Promise.resolve();
+  // CSS-first hides apply via the injected stylesheet, not inline style or
+  // an attribute marker — assert via the computed style.
+  expect(element).not.toBeNull();
+  expect(globalThis.getComputedStyle(element as Element).display).toBe("none");
 }
 
 beforeEach(() => {
   document.body.innerHTML = "";
-  jest.useFakeTimers();
 });
 
 afterEach(() => {
   chatWidgetHideRule.teardown?.();
-  jest.useRealTimers();
 });
 
 describe("chatWidgetHideRule", () => {
@@ -33,8 +26,8 @@ describe("chatWidgetHideRule", () => {
     `;
     chatWidgetHideRule.apply(document.body);
 
-    // Node stays in the DOM (so we don't break React's fiber) but is marked
-    // hidden in-place via display:none.
+    // Node stays in the DOM (so we don't break React's fiber) but is hidden
+    // via display:none in the injected stylesheet.
     expectHidden(document.querySelector("#intercom-container"));
     // Overlays don't get an in-flow placeholder.
     expect(document.querySelector(`.${PLACEHOLDER_CLASS}`)).toBeNull();
@@ -58,7 +51,11 @@ describe("chatWidgetHideRule", () => {
     chatWidgetHideRule.apply(document.body);
 
     expectHidden(document.querySelector("iframe#launcher"));
-    expect(document.querySelector("button#launcher")).not.toBeNull();
+    const button = document.querySelector("button#launcher");
+    expect(button).not.toBeNull();
+    expect(globalThis.getComputedStyle(button as Element).display).not.toBe(
+      "none",
+    );
   });
 
   it("removes Tawk.to via iframe src match", () => {
@@ -94,18 +91,29 @@ describe("chatWidgetHideRule", () => {
     `;
     chatWidgetHideRule.apply(document.body);
 
-    expect(document.querySelector("iframe")).not.toBeNull();
+    const iframe = document.querySelector("iframe");
+    expect(iframe).not.toBeNull();
+    expect(globalThis.getComputedStyle(iframe as Element).display).not.toBe(
+      "none",
+    );
+  });
+
+  it("injects the hide stylesheet on apply", () => {
+    expect(document.querySelector(`#${STYLE_ID}`)).toBeNull();
+    chatWidgetHideRule.apply(document.body);
+    const style = document.querySelector(`#${STYLE_ID}`);
+    expect(style).not.toBeNull();
+    expect(style?.textContent).toContain("display:none!important");
   });
 
   // Vendor scripts (HubSpot's conversations-embed.js, Intercom's loader, etc.)
-  // insert their widget container after document_idle. The rule relies on a
-  // MutationObserver to catch them — these tests lock that down.
+  // insert their widget container after document_idle. Because the rule is
+  // CSS-first, lazily injected matches are hidden as soon as the browser
+  // parses them — no observer or throttle delay involved.
   describe("lazily-injected widgets", () => {
-    it("removes a HubSpot container appended after apply()", async () => {
+    it("hides a HubSpot container appended after apply()", () => {
       chatWidgetHideRule.apply(document.body);
 
-      // Mirrors what HubSpot's loader does on pixiebrix.com: append the
-      // container directly to <body> after the embed script loads.
       const container = document.createElement("div");
       container.id = "hubspot-messages-iframe-container";
       container.className = "widget-align-right";
@@ -114,29 +122,23 @@ describe("chatWidgetHideRule", () => {
       `;
       document.body.append(container);
 
-      await flushMutations();
-      jest.advanceTimersByTime(MUTATION_THROTTLE_MS);
-
       expectHidden(
         document.querySelector("#hubspot-messages-iframe-container"),
       );
       expect(document.querySelector(`.${PLACEHOLDER_CLASS}`)).toBeNull();
     });
 
-    it("removes an Intercom iframe injected after apply()", async () => {
+    it("hides an Intercom iframe injected after apply()", () => {
       chatWidgetHideRule.apply(document.body);
 
       const iframe = document.createElement("iframe");
       iframe.name = "intercom-frame-1234";
       document.body.append(iframe);
 
-      await flushMutations();
-      jest.advanceTimersByTime(MUTATION_THROTTLE_MS);
-
       expectHidden(document.querySelector("iframe"));
     });
 
-    it("teardown stops the observer so later additions are ignored", async () => {
+    it("teardown removes the stylesheet so later additions stay visible", () => {
       chatWidgetHideRule.apply(document.body);
       chatWidgetHideRule.teardown?.();
 
@@ -144,16 +146,14 @@ describe("chatWidgetHideRule", () => {
       container.id = "intercom-container";
       document.body.append(container);
 
-      await flushMutations();
-      jest.advanceTimersByTime(MUTATION_THROTTLE_MS);
-
       const stillThere = document.querySelector<HTMLElement>(
         "#intercom-container",
       );
       expect(stillThere).not.toBeNull();
-      // And it should not have been touched by the rule.
-      expect(stillThere?.getAttribute(HIDDEN_ATTR)).toBeNull();
-      expect(stillThere?.style.display).toBe("");
+      expect(
+        globalThis.getComputedStyle(stillThere as Element).display,
+      ).not.toBe("none");
+      expect(document.querySelector(`#${STYLE_ID}`)).toBeNull();
     });
   });
 });
diff --git a/extension/src/rules/chat-widget-hide.ts b/extension/src/rules/chat-widget-hide.ts
index 506af8e..674caca 100644
--- a/extension/src/rules/chat-widget-hide.ts
+++ b/extension/src/rules/chat-widget-hide.ts
@@ -10,60 +10,87 @@
 // `iframe#launcher` selector is the only one worth note: Zendesk uses
 // `<iframe id="launcher">` for the chat bubble, and we narrow to the iframe
 // tag so a generic `#launcher` button elsewhere isn't caught.
+//
+// Implementation: pure CSS injection. Selectors are static and vendor
+// id/class only, so an injected stylesheet hides matches as soon as the
+// browser parses them — no MutationObserver, no per-batch QSA, and lazily
+// injected widgets (HubSpot's conversations-embed.js, Intercom's loader,
+// etc.) are hidden at parse time without us doing anything.
+
+import type { HideStylesheet } from "../lib/css-hide-stylesheet";
+import { injectHideStylesheet } from "../lib/css-hide-stylesheet";
+import { registerCssFirstSelectors } from "../lib/placeholder-count";
+import type { Rule } from "./types";
+
+const RULE_ID = "chat-widget-hide";
+const STYLE_ID = "abs-chat-widget-hide";
 
-import { createSelectorHideRule } from "../lib/selector-hide-rule";
+const SELECTORS: readonly string[] = [
+  // Intercom
+  "#intercom-frame",
+  "#intercom-container",
+  ".intercom-launcher",
+  'iframe[name^="intercom-"]',
+  // Drift
+  "#drift-frame-controller",
+  "#drift-widget",
+  'iframe[id^="drift-frame-"]',
+  // Zendesk Web Widget
+  "iframe#launcher",
+  'iframe[title="Messaging window"]',
+  'iframe[name="ze-widget"]',
+  // Crisp
+  "#crisp-chatbox",
+  '[id^="crisp-client"]',
+  // Tawk.to
+  'iframe[title="chat widget"]',
+  'iframe[src*="tawk.to"]',
+  // HubSpot
+  "#hubspot-messages-iframe-container",
+  'iframe[id^="hubspot-conversations"]',
+  // Olark
+  "#olark-box-wrapper",
+  ".olark-launch-button",
+  // LiveChat
+  'iframe[src*="livechatinc.com"]',
+  "#chat-widget-container",
+  // Freshchat
+  'iframe[id^="fc_frame"]',
+  "#freshworks-container",
+  // Zopim (legacy Zendesk)
+  'iframe[id*="zopim"]',
+  ".zopim",
+];
 
-const { rule } = createSelectorHideRule({
-  id: "chat-widget-hide",
+const UNION_SELECTOR = SELECTORS.join(",");
+
+let stylesheet: HideStylesheet | null = null;
+let unregisterCount: (() => void) | null = null;
+
+export const chatWidgetHideRule: Rule = {
+  id: RULE_ID,
   label: "Remove Chat Widgets",
   description: "Remove live-chat widgets (Intercom, Drift, Zendesk, etc.).",
-  removeEntirely: true,
-  alwaysOnSelectors: [
-    // Intercom
-    "#intercom-frame",
-    "#intercom-container",
-    ".intercom-launcher",
-    'iframe[name^="intercom-"]',
-    // Drift
-    "#drift-frame-controller",
-    "#drift-widget",
-    'iframe[id^="drift-frame-"]',
-    // Zendesk Web Widget
-    "iframe#launcher",
-    'iframe[title="Messaging window"]',
-    'iframe[name="ze-widget"]',
-    // Crisp
-    "#crisp-chatbox",
-    '[id^="crisp-client"]',
-    // Tawk.to
-    'iframe[title="chat widget"]',
-    'iframe[src*="tawk.to"]',
-    // HubSpot
-    "#hubspot-messages-iframe-container",
-    'iframe[id^="hubspot-conversations"]',
-    // Olark
-    "#olark-box-wrapper",
-    ".olark-launch-button",
-    // LiveChat
-    'iframe[src*="livechatinc.com"]',
-    "#chat-widget-container",
-    // Freshchat
-    'iframe[id^="fc_frame"]',
-    "#freshworks-container",
-    // Zopim (legacy Zendesk)
-    'iframe[id*="zopim"]',
-    ".zopim",
-  ],
-  // Chat widgets load via async vendor scripts and inject after document_idle
-  // (HubSpot's conversations-embed.js, Intercom's loader, etc.) — re-scan on
-  // DOM mutations.
-  watchSubtrees: true,
   // The wrapper element (`#intercom-frame`, `#hubspot-messages-iframe-container`,
   // Zendesk's `iframe#launcher`, etc.) always lives on the top frame — the
   // widget's own iframe content is reached by hiding the wrapper, not by
   // descending into it. Running this rule inside vendor iframes would also
   // try to delete the vendor's own UI.
   topFrameOnly: true,
-});
-
-export const chatWidgetHideRule = rule;
+  apply() {
+    // Idempotent — `injectHideStylesheet` re-uses the existing <style> if
+    // it's still connected, and `registerCssFirstSelectors` no-ops on
+    // duplicate registration (Set semantics).
+    stylesheet ??= injectHideStylesheet({
+      elementId: STYLE_ID,
+      selectors: SELECTORS,
+    });
+    unregisterCount ??= registerCssFirstSelectors(UNION_SELECTOR);
+  },
+  teardown() {
+    stylesheet?.remove();
+    stylesheet = null;
+    unregisterCount?.();
+    unregisterCount = null;
+  },
+};

From a397a260c99ec22f410d3683d0862a2d5bab0cf1 Mon Sep 17 00:00:00 2001
From: Todd Schiller <todd.schiller@gmail.com>
Date: Fri, 5 Jun 2026 15:55:04 -0400
Subject: [PATCH 2/2] Test: property tests for injectHideStylesheet lifecycle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

State-machine fuzzing over inject / removeHandle / pageRemovesStyle /
attachShadow ops asserts two invariants that scenario tests are bad at
exhausting:

  - After every handle is drained, no <style#id> remains in the
    document — regardless of interleaved page-side <style> removals.
  - After every handle is drained, no open shadow root carries an
    adopted sheet from any of the previously-active handles (catches a
    leak of the AdoptedShadowSheet reference past remove()).

Plus a dedicated scenario test for the orphan-cleanup path: an
orphan <style#id> planted before inject (e.g., from an interrupted
prior teardown, HMR hot-swap) is removed by the next inject + remove
cycle.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../css-hide-stylesheet.property.test.ts      | 186 ++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 extension/src/lib/__tests__/css-hide-stylesheet.property.test.ts

diff --git a/extension/src/lib/__tests__/css-hide-stylesheet.property.test.ts b/extension/src/lib/__tests__/css-hide-stylesheet.property.test.ts
new file mode 100644
index 0000000..75e03c1
--- /dev/null
+++ b/extension/src/lib/__tests__/css-hide-stylesheet.property.test.ts
@@ -0,0 +1,186 @@
+// Copyright (c) 2026 PixieBrix, Inc.
+// Licensed under PolyForm Shield 1.0.0 — see LICENSE.
+
+// Property tests for injectHideStylesheet. Two lifecycle invariants
+// that scenario tests are bad at exhausting (plus one targeted
+// orphan-cleanup scenario that the properties can't express cleanly):
+//
+//   - After remove() on every active handle, no <style> with the
+//     configured id remains anywhere — across arbitrary interleavings
+//     of inject / removeHandle / pageRemovesStyle / attachShadow.
+//   - After remove() on every active handle, no open shadow root
+//     carries an adopted sheet from any of those handles. Inner-helper
+//     idempotence is covered by shadow-stylesheets.property.test.ts;
+//     here we assert the outer helper doesn't leak the AdoptedShadowSheet
+//     reference past its remove() call.
+
+import fc from "fast-check";
+
+import { injectHideStylesheet } from "../css-hide-stylesheet";
+import {
+  __resetShadowRootsForTesting,
+  getOpenShadowRoots,
+  installShadowRootHook,
+} from "../shadow-roots";
+
+const STYLE_ID = "abs-css-hide-property-test";
+const SELECTORS = [".prop-test-target"] as const;
+
+beforeEach(() => {
+  document.head.innerHTML = "";
+  document.body.innerHTML = "";
+  __resetShadowRootsForTesting();
+  installShadowRootHook();
+});
+
+afterEach(() => {
+  __resetShadowRootsForTesting();
+  // Clear any stray <style> that escaped a test.
+  for (const element of document.querySelectorAll(`#${STYLE_ID}`)) {
+    element.remove();
+  }
+});
+
+// Op alphabet (lifecycle ops only — orphan cleanup is exercised by a
+// dedicated scenario test below, because it only fires synchronously
+// with .remove() and is awkward to assert as a state-machine invariant):
+//   { kind: "inject" }                  — call injectHideStylesheet, retain handle
+//   { kind: "removeHandle" }            — call .remove() on the oldest active handle
+//   { kind: "pageRemovesStyle" }        — simulate page JS removing the <style>
+//   { kind: "attachShadow" }            — open a new shadow root
+const opArb = fc.oneof(
+  fc.record({ kind: fc.constant<"inject">("inject") }),
+  fc.record({ kind: fc.constant<"removeHandle">("removeHandle") }),
+  fc.record({ kind: fc.constant<"pageRemovesStyle">("pageRemovesStyle") }),
+  fc.record({ kind: fc.constant<"attachShadow">("attachShadow") }),
+);
+
+const opSequenceArb = fc.array(opArb, { minLength: 1, maxLength: 20 });
+
+function stylesById(): HTMLStyleElement[] {
+  return [...document.querySelectorAll<HTMLStyleElement>(`#${STYLE_ID}`)];
+}
+
+function run(ops: ReadonlyArray<{ kind: string }>): {
+  activeHandles: Array<{ remove: () => void }>;
+} {
+  document.head.innerHTML = "";
+  document.body.innerHTML = "";
+  __resetShadowRootsForTesting();
+  installShadowRootHook();
+
+  const activeHandles: Array<{ remove: () => void }> = [];
+
+  for (const op of ops) {
+    switch (op.kind) {
+      case "inject": {
+        const handle = injectHideStylesheet({
+          elementId: STYLE_ID,
+          selectors: SELECTORS,
+        });
+        activeHandles.push(handle);
+        break;
+      }
+      case "removeHandle": {
+        const handle = activeHandles.shift();
+        handle?.remove();
+        break;
+      }
+      case "pageRemovesStyle": {
+        // Aggressive page-side <head> cleanup that some sites do.
+        for (const element of stylesById()) {
+          element.remove();
+        }
+        break;
+      }
+      case "attachShadow": {
+        const host = document.createElement("div");
+        host.attachShadow({ mode: "open" });
+        document.body.append(host);
+        break;
+      }
+    }
+  }
+
+  return { activeHandles };
+}
+
+// Op sequences that include at least one inject — required for the
+// "after drain, no <style> remains" property. Without an inject, no
+// remove() ever runs, so any planted orphan would (correctly) persist.
+const opSequenceWithInjectArb = opSequenceArb.filter((ops) =>
+  ops.some((op) => op.kind === "inject"),
+);
+
+describe("injectHideStylesheet — properties", () => {
+  it("after every handle is removed, no <style> with the configured id remains", () => {
+    fc.assert(
+      fc.property(opSequenceWithInjectArb, (ops) => {
+        const { activeHandles } = run(ops);
+
+        // Drain all live handles. The contract: once every handle has
+        // been removed, the helper's defensive cleanup must take out any
+        // orphan <style#STYLE_ID> in the document — whether planted by
+        // a prior session, by page JS, or by a parallel handle that was
+        // already remove()d.
+        while (activeHandles.length > 0) {
+          activeHandles.shift()?.remove();
+        }
+
+        expect(stylesById()).toHaveLength(0);
+      }),
+    );
+  });
+
+  it("remove() cleans up orphan <style> elements planted before inject", () => {
+    // Scenario: a prior session left an orphan <style#id> in <head>
+    // (e.g., navigation interrupted teardown, HMR hot-swap). The next
+    // inject/remove cycle should leave the document clean.
+    const orphan = document.createElement("style");
+    orphan.id = STYLE_ID;
+    orphan.textContent = "/* leftover */";
+    document.head.append(orphan);
+
+    const handle = injectHideStylesheet({
+      elementId: STYLE_ID,
+      selectors: SELECTORS,
+    });
+    // Both the orphan and the newly-injected style coexist.
+    expect(stylesById().length).toBeGreaterThanOrEqual(2);
+
+    handle.remove();
+    expect(stylesById()).toHaveLength(0);
+  });
+
+  it("after every handle is removed, no open shadow root carries a sheet from us", () => {
+    fc.assert(
+      fc.property(opSequenceArb, (ops) => {
+        const { activeHandles } = run(ops);
+
+        // Snapshot the set of sheets currently adopted across every
+        // open shadow root *before* draining handles — these are the
+        // sheets we expect to disappear.
+        const sheetsBefore = new Set<CSSStyleSheet>();
+        for (const root of getOpenShadowRoots()) {
+          for (const sheet of root.adoptedStyleSheets) {
+            sheetsBefore.add(sheet);
+          }
+        }
+
+        while (activeHandles.length > 0) {
+          activeHandles.shift()?.remove();
+        }
+
+        // After teardown, no shadow root should still carry any of the
+        // pre-teardown sheets. (If a future helper change leaked the
+        // adoptedSheet reference past remove(), the sheet would
+        // persist.)
+        for (const root of getOpenShadowRoots()) {
+          for (const sheet of root.adoptedStyleSheets) {
+            expect(sheetsBefore.has(sheet)).toBe(false);
+          }
+        }
+      }),
+    );
+  });
+});