@drip-apex/sdk 0.1.0 → 0.3.0

package/src/artifact-concurrency.test.ts

@@ -0,0 +1,1091 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __dripS4Js: number | undefined;
+  // eslint-disable-next-line no-var
+  var __dripF2Reset: number | undefined;
+}
+
+describe("artifact concurrency", () => {
+  const originalFetch = globalThis.fetch;
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+
+  beforeEach(() => {
+    vi.resetModules();
+    delete (globalThis as any).__drip;
+    delete (globalThis as any).drip;
+    delete (globalThis as any).Apex;
+    delete (globalThis as any).__dripPredecided;
+    delete (globalThis as any).__dripPerf;
+    delete (globalThis as any).__dripS4Js;
+    delete (globalThis as any).__dripF2Reset;
+    delete (globalThis as any).__dripF1DeactivatingResets;
+    delete (globalThis as any).__dripF1PersistentResets;
+    delete (globalThis as any).__dripF1PersistentRuns;
+    delete (globalThis as any).__dripF11Resets;
+    delete (globalThis as any).__dripF11Runs;
+    delete (globalThis as any).__dripD4SharedResets;
+    delete (globalThis as any).__dripD4SharedRuns;
+    delete (globalThis as any).__dripD4SoloResets;
+    delete (globalThis as any).__dripD4SoloRuns;
+    delete (globalThis as any).__dripD4VariationResets;
+    delete (globalThis as any).__dripD4VariationRuns;
+    delete (globalThis as any).__dripD4DeactivateSharedResets;
+    delete (globalThis as any).__dripD4DeactivateSharedRuns;
+    delete (globalThis as any).__dripF14ResetSideEffect;
+    delete (globalThis as any).__dripD5PersistentRuns;
+    delete (globalThis as any).__dripD5CachedRuns;
+    delete (globalThis as any).__dripD5CachedResets;
+    delete (globalThis as any).__dripD5NetworkRuns;
+    delete (globalThis as any).__dripVanishedDeactivateResets;
+    delete (globalThis as any).__dripVanishedResetResets;
+    delete (globalThis as any).__dripVanishedResetRuns;
+    localStorage.clear();
+    sessionStorage.clear();
+    document.head.innerHTML = "";
+    document.body.innerHTML = "";
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    history.replaceState({}, "", "/products/widget");
+    globalThis.fetch = vi.fn(async () =>
+      new Response("ok", { status: 202 })) as typeof fetch;
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.fetch = originalFetch;
+    delete (globalThis as any).__drip;
+    delete (globalThis as any).drip;
+    delete (globalThis as any).Apex;
+    delete (globalThis as any).__dripPredecided;
+    delete (globalThis as any).__dripS4Js;
+    delete (globalThis as any).__dripF2Reset;
+    delete (globalThis as any).__dripF1DeactivatingResets;
+    delete (globalThis as any).__dripF1PersistentResets;
+    delete (globalThis as any).__dripF1PersistentRuns;
+    delete (globalThis as any).__dripF11Resets;
+    delete (globalThis as any).__dripF11Runs;
+    delete (globalThis as any).__dripD4SharedResets;
+    delete (globalThis as any).__dripD4SharedRuns;
+    delete (globalThis as any).__dripD4SoloResets;
+    delete (globalThis as any).__dripD4SoloRuns;
+    delete (globalThis as any).__dripD4VariationResets;
+    delete (globalThis as any).__dripD4VariationRuns;
+    delete (globalThis as any).__dripD4DeactivateSharedResets;
+    delete (globalThis as any).__dripD4DeactivateSharedRuns;
+    delete (globalThis as any).__dripF14ResetSideEffect;
+    delete (globalThis as any).__dripD5PersistentRuns;
+    delete (globalThis as any).__dripD5CachedRuns;
+    delete (globalThis as any).__dripD5CachedResets;
+    delete (globalThis as any).__dripD5NetworkRuns;
+    delete (globalThis as any).__dripVanishedDeactivateResets;
+    delete (globalThis as any).__dripVanishedResetResets;
+    delete (globalThis as any).__dripVanishedResetRuns;
+    document.head.innerHTML = "";
+    document.body.innerHTML = "";
+  });
+
+  // S4
+  it("keeps another page's pending external-CSS continuation alive through a page-scoped reapply", async () => {
+    document.body.innerHTML = '<h1 class="headline">Original</h1>';
+    const { init, reInit } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      experiments: [
+        {
+          id: "exp_pending",
+          status: "running",
+          trafficAllocation: 1,
+          targeting: {
+            pageRules: [{
+              id: "page_pending",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+            }],
+          },
+          variations: [{
+            id: "var_pending",
+            weight: 1,
+            mutations: [],
+            externalCssUrl: "https://cdn.test/pending.css",
+            js: "globalThis.__dripS4Js = (globalThis.__dripS4Js ?? 0) + 1;",
+          }],
+        },
+        {
+          id: "exp_forced",
+          status: "running",
+          trafficAllocation: 1,
+          targeting: {
+            pageRules: [{
+              id: "page_forced",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "force-reset" },
+            }],
+          },
+          variations: [{
+            id: "var_forced",
+            weight: 1,
+            mutations: [{ selector: ".headline", action: "text", text: "Forced" }],
+          }],
+        },
+      ],
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_pending",
+    });
+
+    const link = document.getElementById("drip-css-link-exp_pending-var_pending");
+    expect(link).not.toBeNull();
+    expect(globalThis.__dripS4Js).toBeUndefined();
+
+    // A force-reset reapply of the sibling page must not invalidate the
+    // continuation waiting on this page's external CSS.
+    reInit();
+    expect(document.querySelector(".headline")?.textContent).toBe("Forced");
+
+    link!.dispatchEvent(new Event("load"));
+    await vi.waitFor(() => expect(globalThis.__dripS4Js).toBe(1));
+  });
+
+  // F3
+  it("stops the early-reassert watcher from re-applying a deactivated page's mutation", async () => {
+    document.body.innerHTML = '<h1 id="hero">Original</h1>';
+    (globalThis as any).__dripPredecided = {
+      decision: [["exp_early", "var_early"]],
+      configRevision: 42,
+      visitorId: "visitor_early",
+      groups: {},
+    };
+    const earlyReassert = await import("./early-reassert");
+    const installSpy = vi.spyOn(earlyReassert, "installEarlyReassert");
+    const { init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      delivery: { revision: 42 },
+      endpoint: "https://events.test",
+      experiments: [{
+        id: "exp_early",
+        status: "running",
+        trafficAllocation: 1,
+        targeting: {
+          pageRules: [{
+            id: "page_early",
+            includeRules: [{ type: "simple", pattern: "/products/*" }],
+            trigger: { deactivationMode: "reset" },
+          }],
+        },
+        variations: [{
+          id: "var_early",
+          weight: 1,
+          mutations: [{ selector: "#hero", action: "text", text: "Treatment" }],
+        }],
+      }],
+      shopId: "shop_123",
+      spa: { applyTiming: "early_reassert", hydrationTimeoutMs: 3_000 },
+      trackingStart: "immediate",
+      userId: "visitor_early",
+    });
+    expect(document.querySelector("#hero")?.textContent).toBe("Treatment");
+    const watcher = installSpy.mock.calls[0]?.[0];
+    expect(watcher).toBeDefined();
+
+    history.pushState({}, "", "/collections/all");
+    expect(document.querySelector("#hero")?.textContent).toBe("Original");
+
+    // A framework write on the treated selector still reaches the watcher.
+    // Repairing it would resurrect a treatment whose page is gone — it has no
+    // snapshot left and would be unrevertable. Fire the repair exactly as the
+    // watcher's own observer callback does.
+    document.querySelector("#hero")!.textContent = "Framework";
+    watcher!.reapply(watcher!.resolveAssignments());
+    expect(document.querySelector("#hero")?.textContent).toBe("Framework");
+  });
+
+  // F1
+  it("deactivates one experiment without resetting or reapplying an unrelated persistent page", async () => {
+    document.body.innerHTML = [
+      '<div id="deactivating-hero">Control A</div>',
+      '<h1 id="persistent-hero">Control B</h1>',
+    ].join("");
+    const { init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      experiments: [
+        {
+          id: "exp_deactivating",
+          status: "running",
+          trafficAllocation: 1,
+          targeting: {
+            pageRules: [{
+              id: "page_deactivating",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "reset" },
+            }],
+          },
+          variations: [{
+            id: "var_deactivating",
+            weight: 1,
+            mutations: [{ selector: "#deactivating-hero", action: "text", text: "Treatment A" }],
+            resetJs: "globalThis.__dripF1DeactivatingResets = (globalThis.__dripF1DeactivatingResets ?? 0) + 1;",
+          }],
+        },
+        {
+          id: "exp_persistent",
+          status: "running",
+          trafficAllocation: 1,
+          targeting: {
+            pageRules: [{
+              id: "page_persistent",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "persistent" },
+            }],
+          },
+          variations: [{
+            id: "var_persistent",
+            weight: 1,
+            mutations: [{ selector: "#persistent-hero", action: "text", text: "Persistent" }],
+            css: "#persistent-hero{color:purple}",
+            js: "globalThis.__dripF1PersistentRuns = (globalThis.__dripF1PersistentRuns ?? 0) + 1;",
+            resetJs: "globalThis.__dripF1PersistentResets = (globalThis.__dripF1PersistentResets ?? 0) + 1;",
+          }],
+        },
+      ],
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_f1",
+    });
+
+    await vi.waitFor(() => expect((globalThis as any).__dripF1PersistentRuns).toBe(1));
+    const style = document.getElementById("drip-css-exp_persistent-var_persistent");
+    expect(style).not.toBeNull();
+    const removeStyle = vi.spyOn(style!, "remove");
+
+    history.pushState({}, "", "/collections/all");
+    await vi.waitFor(() => expect((globalThis as any).__dripF1DeactivatingResets).toBe(1));
+
+    expect((globalThis as any).__dripF1PersistentResets).toBeUndefined();
+    expect((globalThis as any).__dripF1PersistentRuns).toBe(1);
+    expect(document.getElementById("drip-css-exp_persistent-var_persistent")).toBe(style);
+    expect(removeStyle).not.toHaveBeenCalled();
+    expect(document.getElementById("persistent-hero")?.textContent).toBe("Persistent");
+  });
+
+  // F11
+  it("replays a force-reset artifact on every trigger while a sibling page still owns it", async () => {
+    document.body.innerHTML = '<h1 id="force-hero">Control</h1>';
+    const { init, reInit } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      experiments: [{
+        id: "exp_force_siblings",
+        status: "running",
+        trafficAllocation: 1,
+        targeting: {
+          pageRules: [
+            {
+              id: "page_force",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "force-reset" },
+            },
+            {
+              id: "page_sibling",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "persistent" },
+            },
+          ],
+        },
+        variations: [{
+          id: "var_force_siblings",
+          weight: 1,
+          mutations: [{ selector: "#force-hero", action: "text", text: "Treatment" }],
+          css: "#force-hero{color:green}",
+          js: [
+            "globalThis.__dripF11Runs = (globalThis.__dripF11Runs ?? 0) + 1;",
+            "document.querySelector('#force-hero')?.setAttribute('data-run', String(globalThis.__dripF11Runs));",
+          ].join("\n"),
+          resetJs: [
+            "globalThis.__dripF11Resets = (globalThis.__dripF11Resets ?? 0) + 1;",
+            "document.querySelector('#force-hero')?.setAttribute('data-run', 'reset');",
+          ].join("\n"),
+        }],
+      }],
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_f11",
+    });
+    await vi.waitFor(() => expect((globalThis as any).__dripF11Runs).toBe(1));
+
+    reInit();
+    await vi.waitFor(() => expect((globalThis as any).__dripF11Runs).toBe(2));
+    expect((globalThis as any).__dripF11Resets).toBe(1);
+    expect(document.getElementById("force-hero")?.getAttribute("data-run")).toBe("2");
+    expect(document.getElementById("force-hero")?.textContent).toBe("Treatment");
+
+    reInit();
+    await vi.waitFor(() => expect((globalThis as any).__dripF11Runs).toBe(3));
+    expect((globalThis as any).__dripF11Resets).toBe(2);
+    expect(document.getElementById("force-hero")?.getAttribute("data-run")).toBe("3");
+  });
+
+  // S9: the old fallback stopped after the first shared experiment. The two
+  // independent reset counters prove that the closure includes both.
+  it("expands a reset closure across every resetting experiment and reapplies its sibling page", async () => {
+    document.body.innerHTML = [
+      '<h1 id="d4-shared">Shared control</h1>',
+      '<h2 id="d4-solo">Solo control</h2>',
+    ].join("");
+    const { getDiagnostics, init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      experiments: [
+        {
+          id: "exp_d4_shared",
+          status: "running",
+          trafficAllocation: 1,
+          resetJs: [
+            "globalThis.__dripD4SharedResets = (globalThis.__dripD4SharedResets ?? 0) + 1;",
+            "document.querySelector('#d4-shared')?.setAttribute('data-state', 'reset');",
+          ].join("\n"),
+          targeting: {
+            pageRules: [
+              {
+                id: "page_d4_trigger",
+                includeRules: [{ type: "simple", pattern: "/products/*" }],
+                trigger: { deactivationMode: "reset" },
+              },
+              {
+                id: "page_d4_survivor",
+                includeRules: [{ type: "simple", pattern: "/products/*" }],
+                trigger: { deactivationMode: "persistent" },
+              },
+            ],
+          },
+          variations: [{
+            id: "var_d4_shared",
+            weight: 1,
+            mutations: [{ selector: "#d4-shared", action: "text", text: "Shared treatment" }],
+            js: [
+              "globalThis.__dripD4SharedRuns = (globalThis.__dripD4SharedRuns ?? 0) + 1;",
+              "document.querySelector('#d4-shared')?.setAttribute('data-run', String(globalThis.__dripD4SharedRuns));",
+            ].join("\n"),
+          }],
+        },
+        {
+          id: "exp_d4_solo",
+          status: "running",
+          trafficAllocation: 1,
+          resetJs: "globalThis.__dripD4SoloResets = (globalThis.__dripD4SoloResets ?? 0) + 1;",
+          targeting: {
+            pageRules: [{
+              id: "page_d4_trigger",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "reset" },
+            }],
+          },
+          variations: [{
+            id: "var_d4_solo",
+            weight: 1,
+            mutations: [{ selector: "#d4-solo", action: "text", text: "Solo treatment" }],
+            js: "globalThis.__dripD4SoloRuns = (globalThis.__dripD4SoloRuns ?? 0) + 1;",
+          }],
+        },
+      ],
+      shopId: "shop_123",
+      spa: { activationMode: "manual" },
+      trackingStart: "immediate",
+      userId: "visitor_d4_s9",
+    });
+    await vi.waitFor(() => expect((globalThis as any).__dripD4SharedRuns).toBe(1));
+    expect((globalThis as any).__dripD4SoloRuns).toBe(1);
+
+    history.pushState({}, "", "/collections/all");
+    await vi.waitFor(() => expect((globalThis as any).__dripD4SharedRuns).toBe(2));
+
+    expect((globalThis as any).__dripD4SharedResets).toBe(1);
+    expect((globalThis as any).__dripD4SoloResets).toBe(1);
+    expect((globalThis as any).__dripD4SoloRuns).toBe(1);
+    expect(document.getElementById("d4-shared")?.textContent).toBe("Shared treatment");
+    expect(document.getElementById("d4-shared")?.getAttribute("data-run")).toBe("2");
+    expect(document.getElementById("d4-solo")?.textContent).toBe("Solo control");
+    expect(getDiagnostics().pageActivation).toEqual(expect.arrayContaining([
+      expect.objectContaining({
+        pageId: "page_d4_trigger",
+        isolationFallback: "whole_experiment",
+      }),
+      expect.objectContaining({
+        pageId: "page_d4_survivor",
+        isolationFallback: "whole_experiment",
+      }),
+    ]));
+  });
+
+  // S3/F10: reset JS removes both a JS-owned node and a journal-owned insert.
+  // Their presence after navigation proves that D4 invoked D2 replay.
+  it("rebuilds JS and structural treatment for a surviving page after variation reset JS", async () => {
+    document.body.innerHTML = '<div id="d4-anchor">Anchor</div>';
+    const { init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      experiments: [{
+        id: "exp_d4_variation_reset",
+        status: "running",
+        trafficAllocation: 1,
+        targeting: {
+          pageRules: [
+            {
+              id: "page_d4_variation_reset",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "reset" },
+            },
+            {
+              id: "page_d4_variation_survivor",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "persistent" },
+            },
+          ],
+        },
+        variations: [{
+          id: "var_d4_variation_reset",
+          weight: 1,
+          mutations: [{
+            selector: "#d4-anchor",
+            action: "insertAfter",
+            html: '<p id="d4-structural">Structural treatment</p>',
+          }],
+          js: [
+            "globalThis.__dripD4VariationRuns = (globalThis.__dripD4VariationRuns ?? 0) + 1;",
+            "if (!document.querySelector('#d4-js-built')) {",
+            "  const node = document.createElement('p');",
+            "  node.id = 'd4-js-built';",
+            "  node.textContent = 'JS treatment';",
+            "  document.querySelector('#d4-anchor')?.after(node);",
+            "}",
+          ].join("\n"),
+          resetJs: [
+            "globalThis.__dripD4VariationResets = (globalThis.__dripD4VariationResets ?? 0) + 1;",
+            "document.querySelector('#d4-js-built')?.remove();",
+            "document.querySelector('#d4-structural')?.remove();",
+          ].join("\n"),
+        }],
+      }],
+      shopId: "shop_123",
+      spa: { activationMode: "manual" },
+      trackingStart: "immediate",
+      userId: "visitor_d4_s3",
+    });
+    await vi.waitFor(() => expect((globalThis as any).__dripD4VariationRuns).toBe(1));
+    expect(document.querySelectorAll("#d4-structural")).toHaveLength(1);
+    expect(document.querySelectorAll("#d4-js-built")).toHaveLength(1);
+
+    history.pushState({}, "", "/collections/all");
+    await vi.waitFor(() => expect((globalThis as any).__dripD4VariationRuns).toBe(2));
+
+    expect((globalThis as any).__dripD4VariationResets).toBe(1);
+    expect(document.querySelectorAll("#d4-structural")).toHaveLength(1);
+    expect(document.querySelector("#d4-structural")?.textContent).toBe("Structural treatment");
+    expect(document.querySelectorAll("#d4-js-built")).toHaveLength(1);
+    expect(document.querySelector("#d4-js-built")?.textContent).toBe("JS treatment");
+  });
+
+  it("suppresses reset JS and replays when a deactivate-mode page shares the artifact", async () => {
+    document.body.innerHTML = '<h1 id="d4-deactivate-shared">Control</h1>';
+    const { init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      experiments: [{
+        id: "exp_d4_deactivate_shared",
+        status: "running",
+        trafficAllocation: 1,
+        targeting: {
+          pageRules: [
+            {
+              id: "page_d4_reset_exact",
+              includeRules: [{ type: "simple", pattern: "/products/widget" }],
+              trigger: { deactivationMode: "reset" },
+            },
+            {
+              id: "page_d4_deactivate_wildcard",
+              includeRules: [{ type: "simple", pattern: "/products/*" }],
+              trigger: { deactivationMode: "deactivate" },
+            },
+          ],
+        },
+        variations: [{
+          id: "var_d4_deactivate_shared",
+          weight: 1,
+          mutations: [{
+            selector: "#d4-deactivate-shared",
+            action: "text",
+            text: "Treatment",
+          }],
+          js: "globalThis.__dripD4DeactivateSharedRuns = (globalThis.__dripD4DeactivateSharedRuns ?? 0) + 1;",
+          resetJs: "globalThis.__dripD4DeactivateSharedResets = (globalThis.__dripD4DeactivateSharedResets ?? 0) + 1;",
+        }],
+      }],
+      shopId: "shop_123",
+      spa: { activationMode: "manual" },
+      trackingStart: "immediate",
+      userId: "visitor_d4_deactivate_shared",
+    });
+    await vi.waitFor(() => expect((globalThis as any).__dripD4DeactivateSharedRuns).toBe(1));
+
+    history.pushState({}, "", "/products/another");
+    await vi.waitFor(() => expect((globalThis as any).__dripD4DeactivateSharedRuns).toBe(2));
+
+    expect((globalThis as any).__dripD4DeactivateSharedResets).toBeUndefined();
+    expect(document.getElementById("d4-deactivate-shared")?.textContent).toBe("Treatment");
+  });
+
+  // F14: an audience gate removes the artifact while the deactivate-mode
+  // page itself still matches. The observable counter proves no reset JS ran.
+  it("does not run reset JS when a non-page gate invalidates a deactivate-mode page", async () => {
+    document.body.innerHTML = '<h1 id="d4-f14">Control</h1>';
+    const attributes = { eligible: true };
+    const { init, reInit } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      attributes,
+      endpoint: "https://events.test",
+      experiments: [{
+        id: "exp_d4_f14",
+        status: "running",
+        trafficAllocation: 1,
+        targeting: {
+          attributes: [{ attribute: "eligible", operator: "equals", value: true }],
+          pageRules: [{
+            id: "page_d4_f14_deactivate",
+            includeRules: [{ type: "simple", pattern: "/products/*" }],
+            trigger: { deactivationMode: "deactivate" },
+          }],
+        },
+        variations: [{
+          id: "var_d4_f14",
+          weight: 1,
+          mutations: [{ selector: "#d4-f14", action: "text", text: "Treatment" }],
+          resetJs: "globalThis.__dripF14ResetSideEffect = (globalThis.__dripF14ResetSideEffect ?? 0) + 1;",
+        }],
+      }],
+      shopId: "shop_123",
+      spa: { activationMode: "manual" },
+      trackingStart: "immediate",
+      userId: "visitor_d4_f14",
+    });
+    expect(document.getElementById("d4-f14")?.textContent).toBe("Treatment");
+
+    attributes.eligible = false;
+    reInit();
+
+    expect((globalThis as any).__dripF14ResetSideEffect).toBeUndefined();
+    expect(document.getElementById("d4-f14")?.textContent).toBe("Control");
+  });
+
+  it("changes the artifact id for every rendered content input", async () => {
+    const { __test } = await import("./index");
+    const base = {
+      experimentId: "exp_hash",
+      variationId: "var_hash",
+      pageActive: true,
+      index: 0,
+      mutations: [],
+      isControl: false,
+      hashValue: "visitor",
+    };
+    const baseline = __test.baseArtifactApplicationKey(base);
+    const changed = [
+      { mutations: [{ selector: "h1", action: "text" as const, text: "Changed" }] },
+      { css: "h1{color:red}" },
+      { experimentCss: "body{display:block}" },
+      { js: "globalThis.changed=true" },
+      { experimentJs: "globalThis.experimentChanged=true" },
+      { externalCssUrl: "https://cdn.test/change.css" },
+      { externalJsUrl: "https://cdn.test/change.js" },
+    ].map((content) => __test.baseArtifactApplicationKey({ ...base, ...content }));
+
+    expect(new Set(changed).size).toBe(changed.length);
+    changed.forEach((artifactId) => expect(artifactId).not.toBe(baseline));
+  });
+
+  // F9: the cached config applies on the target URL. The SPA reconciler keeps
+  // the persistent page active after navigation, and the network re-init must
+  // carry that same state instead of rebuilding it from the current URL.
+  it("keeps a persistent off-URL page active through cache-to-network re-init", async () => {
+    document.body.innerHTML = [
+      '<h1 id="d5-persistent">Control</h1>',
+      '<button id="d5-goal">Convert</button>',
+    ].join("");
+    const cachedExperiment = {
+      id: "exp_d5_persistent",
+      name: "Cached persistent",
+      status: "running",
+      trafficAllocation: 1,
+      targeting: {
+        pageRules: [{
+          id: "page_d5_persistent",
+          includeRules: [{ type: "simple", pattern: "/products/*" }],
+          trigger: { deactivationMode: "persistent" },
+        }],
+      },
+      variations: [{
+        id: "var_d5_persistent",
+        weight: 1,
+        mutations: [{ selector: "#d5-persistent", action: "text", text: "Persistent treatment" }],
+        css: "#d5-persistent{color:purple}",
+        js: "globalThis.__dripD5PersistentRuns = (globalThis.__dripD5PersistentRuns ?? 0) + 1;",
+      }],
+      goals: [{
+        id: "goal_d5_persistent",
+        type: "click",
+        selector: "#d5-goal",
+        pageId: "page_d5_persistent",
+      }],
+    };
+    localStorage.setItem("drip_cfg:shop_123:production", JSON.stringify({
+      fetchedAt: Date.now(),
+      hash: "d5-persistent-cache",
+      experiments: [cachedExperiment],
+    }));
+    let resolveConfig!: (response: Response) => void;
+    const fetchMock = vi.fn((input: RequestInfo | URL) => {
+      if (String(input).includes("/config")) {
+        return new Promise<Response>((resolve) => {
+          resolveConfig = resolve;
+        });
+      }
+      return Promise.resolve(new Response("ok", { status: 202 }));
+    });
+    globalThis.fetch = fetchMock as typeof fetch;
+    const { __test, flush, getDiagnostics, init, reInit } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      lateConfigPolicy: "apply",
+      shopId: "shop_123",
+      spa: { routerMode: "none" },
+      trackingStart: "immediate",
+      userId: "visitor_d5_persistent",
+    });
+    await vi.waitFor(() => expect((globalThis as any).__dripD5PersistentRuns).toBe(1));
+    const style = document.getElementById("drip-css-exp_d5_persistent-var_d5_persistent");
+    expect(document.getElementById("d5-persistent")?.textContent).toBe("Persistent treatment");
+
+    history.pushState({}, "", "/collections/all");
+    reInit();
+    expect(getDiagnostics().pageActivation).toContainEqual(expect.objectContaining({
+      pageId: "page_d5_persistent",
+      active: true,
+      appliedArtifactCount: 1,
+    }));
+
+    resolveConfig(Response.json({
+      experiments: [{ ...cachedExperiment, name: "Authoritative persistent" }],
+    }));
+    await vi.waitFor(() => expect(getDiagnostics().configSource).toBe("network"));
+    await vi.waitFor(() => expect(getDiagnostics().pageActivation).toContainEqual(
+      expect.objectContaining({
+        pageId: "page_d5_persistent",
+        active: true,
+        appliedArtifactCount: 1,
+      }),
+    ));
+    expect(document.getElementById("d5-persistent")?.textContent).toBe("Persistent treatment");
+    expect(document.getElementById("drip-css-exp_d5_persistent-var_d5_persistent")).toBe(style);
+    expect((globalThis as any).__dripD5PersistentRuns).toBe(1);
+    expect(__test.artifactInventory()).toEqual([
+      expect.objectContaining({ ownerPageIds: ["page_d5_persistent"] }),
+    ]);
+
+    document.getElementById("d5-goal")!.click();
+    await flush();
+    const events = fetchMock.mock.calls
+      .filter((call) => String(call[0]).endsWith("/events"))
+      .flatMap((call) => JSON.parse(String((call[1] as RequestInit | undefined)?.body)).events);
+    expect(events).toEqual(expect.arrayContaining([
+      expect.objectContaining({ type: "experiment_pageview", experimentId: "exp_d5_persistent" }),
+      expect.objectContaining({
+        type: "goal",
+        experimentId: "exp_d5_persistent",
+        data: expect.objectContaining({ goalId: "goal_d5_persistent" }),
+      }),
+    ]));
+  });
+
+  // S8: the authoritative config no longer defines the old page id. The
+  // removal must start from the artifact inventory because the new page map
+  // cannot name that owner.
+  it("tears down inventory owned by a page id removed during network re-init", async () => {
+    document.body.innerHTML = '<h1 id="d5-inventory">Control</h1>';
+    const cachedExperiment = {
+      id: "exp_d5_inventory",
+      status: "running",
+      trafficAllocation: 1,
+      targeting: {
+        pageRules: [{
+          id: "page_d5_old",
+          includeRules: [{ type: "simple", pattern: "/products/*" }],
+          trigger: { deactivationMode: "reset" },
+        }],
+      },
+      variations: [{
+        id: "var_d5_inventory",
+        weight: 1,
+        mutations: [{ selector: "#d5-inventory", action: "text", text: "Cached treatment" }],
+        css: "#d5-inventory{color:red}",
+        externalJsUrl: "https://cdn.test/d5-inventory.js",
+      }],
+    };
+    localStorage.setItem("drip_cfg:shop_123:production", JSON.stringify({
+      fetchedAt: Date.now(),
+      hash: "d5-inventory-cache",
+      experiments: [cachedExperiment],
+    }));
+    let resolveConfig!: (response: Response) => void;
+    globalThis.fetch = vi.fn((input: RequestInfo | URL) => {
+      if (String(input).includes("/config")) {
+        return new Promise<Response>((resolve) => {
+          resolveConfig = resolve;
+        });
+      }
+      return Promise.resolve(new Response("ok", { status: 202 }));
+    }) as typeof fetch;
+    const { __test, getDiagnostics, init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      lateConfigPolicy: "apply",
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_d5_inventory",
+    });
+    await vi.waitFor(() => expect(
+      document.getElementById("drip-external-js-exp_d5_inventory-var_d5_inventory"),
+    ).not.toBeNull());
+    expect(document.getElementById("d5-inventory")?.textContent).toBe("Cached treatment");
+    expect(__test.artifactInventory()[0]?.ownerPageIds).toEqual(["page_d5_old"]);
+
+    resolveConfig(Response.json({
+      experiments: [{
+        ...cachedExperiment,
+        targeting: {
+          pageRules: [{
+            id: "page_d5_renamed",
+            includeRules: [{ type: "simple", pattern: "/collections/*" }],
+            trigger: { deactivationMode: "reset" },
+          }],
+        },
+      }],
+    }));
+    await vi.waitFor(() => expect(getDiagnostics().configSource).toBe("network"));
+
+    expect(document.getElementById("d5-inventory")?.textContent).toBe("Control");
+    expect(document.getElementById("drip-css-exp_d5_inventory-var_d5_inventory")).toBeNull();
+    expect(document.getElementById("drip-external-js-exp_d5_inventory-var_d5_inventory")).toBeNull();
+    expect(getDiagnostics().pageActivation).not.toEqual(expect.arrayContaining([
+      expect.objectContaining({ pageId: "page_d5_old" }),
+    ]));
+    expect(getDiagnostics().pageActivation).toContainEqual(expect.objectContaining({
+      pageId: "page_d5_renamed",
+      active: false,
+      appliedArtifactCount: 0,
+    }));
+    expect(__test.artifactInventory()).toEqual([]);
+
+    document.getElementById("d5-inventory")!.textContent = "Framework update";
+    await Promise.resolve();
+    expect(document.getElementById("d5-inventory")?.textContent).toBe("Framework update");
+  });
+
+  it("uses deactivate teardown when a cached page disappears from network config", async () => {
+    document.body.innerHTML = '<h1 id="vanished-deactivate">Control</h1>';
+    const cachedExperiment = {
+      id: "exp_vanished_deactivate",
+      status: "running",
+      trafficAllocation: 1,
+      targeting: {
+        pageRules: [{
+          id: "page_vanished_deactivate",
+          includeRules: [{ type: "simple", pattern: "/products/*" }],
+          trigger: { deactivationMode: "deactivate" },
+        }],
+      },
+      variations: [{
+        id: "var_vanished_deactivate",
+        weight: 1,
+        mutations: [{ selector: "#vanished-deactivate", action: "text", text: "Treatment" }],
+        resetJs: "globalThis.__dripVanishedDeactivateResets = (globalThis.__dripVanishedDeactivateResets ?? 0) + 1;",
+      }],
+    };
+    localStorage.setItem("drip_cfg:shop_123:production", JSON.stringify({
+      fetchedAt: Date.now(),
+      hash: "vanished-deactivate-cache",
+      experiments: [cachedExperiment],
+    }));
+    let resolveConfig!: (response: Response) => void;
+    globalThis.fetch = vi.fn((input: RequestInfo | URL) => {
+      if (String(input).includes("/config")) {
+        return new Promise<Response>((resolve) => {
+          resolveConfig = resolve;
+        });
+      }
+      return Promise.resolve(new Response("ok", { status: 202 }));
+    }) as typeof fetch;
+    const { __test, getDiagnostics, init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      lateConfigPolicy: "apply",
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_vanished_deactivate",
+    });
+    await vi.waitFor(() => expect(
+      document.getElementById("vanished-deactivate")?.textContent,
+    ).toBe("Treatment"));
+
+    resolveConfig(Response.json({ experiments: [] }));
+    await vi.waitFor(() => expect(getDiagnostics().configSource).toBe("network"));
+
+    expect(document.getElementById("vanished-deactivate")?.textContent).toBe("Control");
+    expect((globalThis as any).__dripVanishedDeactivateResets).toBeUndefined();
+    expect(__test.artifactInventory()).toEqual([]);
+  });
+
+  it("runs reset teardown and replays a shared persistent artifact when one page disappears", async () => {
+    document.body.innerHTML = '<h1 id="vanished-reset">Control</h1>';
+    const variation = {
+      id: "var_vanished_reset",
+      weight: 1,
+      mutations: [{ selector: "#vanished-reset", action: "text", text: "Treatment" }],
+      js: "globalThis.__dripVanishedResetRuns = (globalThis.__dripVanishedResetRuns ?? 0) + 1;",
+      resetJs: [
+        "globalThis.__dripVanishedResetResets = (globalThis.__dripVanishedResetResets ?? 0) + 1;",
+        "document.querySelector('#vanished-reset').textContent = 'Reset';",
+      ].join("\n"),
+    };
+    const cachedExperiment = {
+      id: "exp_vanished_reset",
+      status: "running",
+      trafficAllocation: 1,
+      targeting: {
+        pageRules: [
+          {
+            id: "page_vanished_reset",
+            includeRules: [{ type: "simple", pattern: "/products/*" }],
+            trigger: { deactivationMode: "reset" },
+          },
+          {
+            id: "page_vanished_persistent",
+            includeRules: [{ type: "simple", pattern: "/products/*" }],
+            trigger: { deactivationMode: "persistent" },
+          },
+        ],
+      },
+      variations: [variation],
+    };
+    localStorage.setItem("drip_cfg:shop_123:production", JSON.stringify({
+      fetchedAt: Date.now(),
+      hash: "vanished-reset-cache",
+      experiments: [cachedExperiment],
+    }));
+    let resolveConfig!: (response: Response) => void;
+    globalThis.fetch = vi.fn((input: RequestInfo | URL) => {
+      if (String(input).includes("/config")) {
+        return new Promise<Response>((resolve) => {
+          resolveConfig = resolve;
+        });
+      }
+      return Promise.resolve(new Response("ok", { status: 202 }));
+    }) as typeof fetch;
+    const { __test, getDiagnostics, init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      lateConfigPolicy: "apply",
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_vanished_reset",
+    });
+    await vi.waitFor(() => expect((globalThis as any).__dripVanishedResetRuns).toBe(1));
+
+    resolveConfig(Response.json({
+      experiments: [{
+        ...cachedExperiment,
+        targeting: {
+          pageRules: [{
+            id: "page_vanished_persistent",
+            includeRules: [{ type: "simple", pattern: "/products/*" }],
+            trigger: { deactivationMode: "persistent" },
+          }],
+        },
+      }],
+    }));
+    await vi.waitFor(() => expect(getDiagnostics().configSource).toBe("network"));
+
+    expect((globalThis as any).__dripVanishedResetResets).toBe(1);
+    expect((globalThis as any).__dripVanishedResetRuns).toBe(2);
+    expect(document.getElementById("vanished-reset")?.textContent).toBe("Treatment");
+    expect(__test.artifactInventory()).toEqual([
+      expect.objectContaining({ ownerPageIds: ["page_vanished_persistent"] }),
+    ]);
+  });
+
+  // F8: experiment and variation ids are stable, but the content hash changes.
+  // The network payload is authoritative for every rendered artifact plane.
+  it("replaces cached mutation, CSS, and JS when authoritative content changes", async () => {
+    document.body.innerHTML = '<h1 id="d5-authoritative">Control</h1>';
+    const cachedExperiment = {
+      id: "exp_d5_authoritative",
+      status: "running",
+      trafficAllocation: 1,
+      variations: [{
+        id: "var_d5_authoritative",
+        weight: 1,
+        mutations: [{ selector: "#d5-authoritative", action: "text", text: "Cached content" }],
+        css: "#d5-authoritative{color:red}",
+        js: [
+          "globalThis.__dripD5CachedRuns = (globalThis.__dripD5CachedRuns ?? 0) + 1;",
+          "document.querySelector('#d5-authoritative')?.setAttribute('data-code', 'cached');",
+        ].join("\n"),
+        resetJs: [
+          "globalThis.__dripD5CachedResets = (globalThis.__dripD5CachedResets ?? 0) + 1;",
+          "document.querySelector('#d5-authoritative')?.removeAttribute('data-code');",
+        ].join("\n"),
+      }],
+    };
+    localStorage.setItem("drip_cfg:shop_123:production", JSON.stringify({
+      fetchedAt: Date.now(),
+      hash: "d5-authoritative-cache",
+      experiments: [cachedExperiment],
+    }));
+    let resolveConfig!: (response: Response) => void;
+    globalThis.fetch = vi.fn((input: RequestInfo | URL) => {
+      if (String(input).includes("/config")) {
+        return new Promise<Response>((resolve) => {
+          resolveConfig = resolve;
+        });
+      }
+      return Promise.resolve(new Response("ok", { status: 202 }));
+    }) as typeof fetch;
+    const { __test, getDiagnostics, init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      lateConfigPolicy: "apply",
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_d5_authoritative",
+    });
+    await vi.waitFor(() => expect((globalThis as any).__dripD5CachedRuns).toBe(1));
+    const cachedArtifactId = __test.artifactInventory()[0]!.id;
+    expect(document.getElementById("d5-authoritative")?.textContent).toBe("Cached content");
+    expect(document.getElementById("drip-css-exp_d5_authoritative-var_d5_authoritative")?.textContent)
+      .toBe("#d5-authoritative{color:red}");
+
+    resolveConfig(Response.json({
+      experiments: [{
+        ...cachedExperiment,
+        variations: [{
+          id: "var_d5_authoritative",
+          weight: 1,
+          mutations: [{ selector: "#d5-authoritative", action: "text", text: "Network content" }],
+          css: "#d5-authoritative{color:blue}",
+          js: [
+            "globalThis.__dripD5NetworkRuns = (globalThis.__dripD5NetworkRuns ?? 0) + 1;",
+            "document.querySelector('#d5-authoritative')?.setAttribute('data-code', 'network');",
+          ].join("\n"),
+        }],
+      }],
+    }));
+    await vi.waitFor(() => expect(getDiagnostics().configSource).toBe("network"));
+    await vi.waitFor(() => expect((globalThis as any).__dripD5NetworkRuns).toBe(1));
+
+    expect((globalThis as any).__dripD5CachedResets).toBe(1);
+    expect(document.getElementById("d5-authoritative")?.textContent).toBe("Network content");
+    expect(document.getElementById("d5-authoritative")?.getAttribute("data-code")).toBe("network");
+    expect(document.getElementById("drip-css-exp_d5_authoritative-var_d5_authoritative")?.textContent)
+      .toBe("#d5-authoritative{color:blue}");
+    expect(__test.artifactInventory()).toHaveLength(1);
+    expect(__test.artifactInventory()[0]!.id).not.toBe(cachedArtifactId);
+  });
+
+  // F2
+  it("ends a reset-JS pushState re-entry with page state, artifacts, and DOM agreeing", async () => {
+    document.body.innerHTML = '<h1 id="hero">Original</h1>';
+    const { getDiagnostics, init } = await import("./index");
+
+    init({
+      antiFlickerMode: "off",
+      endpoint: "https://events.test",
+      experiments: [{
+        id: "exp_reset",
+        status: "running",
+        trafficAllocation: 1,
+        targeting: {
+          pageRules: [{
+            id: "page_reset",
+            includeRules: [{ type: "simple", pattern: "/products/*" }],
+            trigger: { deactivationMode: "reset" },
+          }],
+        },
+        variations: [{
+          id: "var_reset",
+          weight: 1,
+          mutations: [{ selector: "#hero", action: "text", text: "Treatment" }],
+          resetJs: [
+            "globalThis.__dripF2Reset = (globalThis.__dripF2Reset ?? 0) + 1;",
+            "history.pushState({}, '', '/products/widget');",
+          ].join("\n"),
+        }],
+      }],
+      shopId: "shop_123",
+      trackingStart: "immediate",
+      userId: "visitor_reset",
+    });
+    expect(document.querySelector("#hero")?.textContent).toBe("Treatment");
+
+    // Leaving the page runs merchant reset JS, which navigates straight back.
+    // history.pushState notifies the router synchronously, so this re-enters
+    // reconciliation from inside the teardown.
+    history.pushState({}, "", "/collections/all");
+
+    const page = getDiagnostics().pageActivation.find(
+      (row) => row.pageId === "page_reset",
+    );
+    expect(page).toBeDefined();
+    expect({
+      active: page!.active,
+      appliedArtifactCount: page!.appliedArtifactCount,
+      hero: document.querySelector("#hero")?.textContent,
+      resetRuns: globalThis.__dripF2Reset,
+      url: location.pathname,
+    }).toEqual({
+      active: true,
+      appliedArtifactCount: 1,
+      hero: "Treatment",
+      resetRuns: 1,
+      url: "/products/widget",
+    });
+  });
+});