@mokly/mokly 0.8.0

package/dist/browser/diffs.js

@@ -0,0 +1,745 @@
+// src/components/data.ts
+var DataBudget = class {
+  constructor(depthLimit = 64) {
+    this.depthLimit = depthLimit;
+  }
+  depthLimit;
+  nodes = 0;
+  visit(depth, at) {
+    if (depth > this.depthLimit || ++this.nodes > 1e4)
+      invalidData(at, "validation limit exceeded");
+  }
+};
+var ComponentValidationError = class extends Error {
+  constructor(path, detail) {
+    super(`[mokly/components] ${path}: ${detail}`);
+    this.path = path;
+    this.detail = detail;
+    this.name = "ComponentValidationError";
+  }
+  path;
+  detail;
+};
+function invalidData(at, message) {
+  throw new ComponentValidationError(at, message);
+}
+function record(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function plainKeys(value, at) {
+  if (!record(value) || Object.getPrototypeOf(value) !== Object.prototype && Object.getPrototypeOf(value) !== null)
+    invalidData(at, "expected a plain object");
+  const keys = [];
+  for (const key of Reflect.ownKeys(value)) {
+    if (typeof key !== "string") invalidData(at, "symbol keys are unsupported");
+    if (["__proto__", "constructor", "prototype"].includes(key))
+      invalidData(`${at}.${key}`, "reserved property name");
+    const descriptor = Object.getOwnPropertyDescriptor(value, key);
+    if (!descriptor.enumerable || !("value" in descriptor))
+      invalidData(
+        `${at}.${key}`,
+        "only enumerable data properties are supported"
+      );
+    keys.push(key);
+  }
+  return keys.sort();
+}
+function denseArray(value, at) {
+  if (!Array.isArray(value)) invalidData(at, "expected an array");
+  if (Reflect.ownKeys(value).length !== value.length + 1)
+    invalidData(at, "expected a dense array without extra properties");
+  for (let i = 0; i < value.length; i++) {
+    const descriptor = Object.getOwnPropertyDescriptor(value, String(i));
+    if (!descriptor || !descriptor.enumerable || !("value" in descriptor))
+      invalidData(`${at}[${i}]`, "expected an array data element");
+  }
+}
+function canonicalJson(value, indent = 0) {
+  function encode(item, depth) {
+    if (typeof item !== "object" || item === null) {
+      const encoded = JSON.stringify(item);
+      if (encoded === void 0) invalidData("$", "cannot serialize undefined");
+      return encoded;
+    }
+    const array = Array.isArray(item);
+    const entries = array ? item.map((child) => encode(child, depth + 1)) : Object.keys(item).filter((key) => item[key] !== void 0).sort().map(
+      (key) => `${JSON.stringify(key)}:${indent ? " " : ""}${encode(item[key], depth + 1)}`
+    );
+    const [open, close] = array ? ["[", "]"] : ["{", "}"];
+    if (!entries.length) return `${open}${close}`;
+    if (!indent) return `${open}${entries.join(",")}${close}`;
+    const padding = " ".repeat(indent * (depth + 1));
+    return `${open}
+${padding}${entries.join(`,
+${padding}`)}
+${" ".repeat(indent * depth)}${close}`;
+  }
+  return encode(value, 0);
+}
+
+// src/review/result_helpers.ts
+function reviewInvalid(message) {
+  throw new Error(`[mokly/review] ${message}`);
+}
+function reviewObject(value, required, optional = []) {
+  if (!value || typeof value !== "object" || Array.isArray(value) || ![null, Object.prototype].includes(Object.getPrototypeOf(value)))
+    reviewInvalid("expected an object");
+  const record2 = value;
+  const descriptors = Object.getOwnPropertyDescriptors(record2);
+  if (Reflect.ownKeys(descriptors).some(
+    (key) => typeof key !== "string" || ![...required, ...optional].includes(key) || !("value" in descriptors[key])
+  ))
+    reviewInvalid("unknown or unsafe field");
+  if (required.some(
+    (key) => !Object.hasOwn(record2, key) || record2[key] === void 0
+  ))
+    reviewInvalid("required field is missing");
+  return record2;
+}
+function reviewArray(value) {
+  if (!Array.isArray(value)) reviewInvalid("expected an array");
+  return value;
+}
+function reviewString(value) {
+  if (typeof value !== "string" || !value.trim())
+    reviewInvalid("expected a nonempty string");
+  return value;
+}
+function reviewId(value) {
+  const id = reviewString(value);
+  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(id)) reviewInvalid("invalid entry id");
+  return id;
+}
+function reviewPath(value) {
+  const path = reviewString(value);
+  if (path.startsWith("/") || path.includes("\\") || path.includes("\0") || path.split("/").some((part) => !part || part === "." || part === ".."))
+    reviewInvalid("unsafe path");
+  return path;
+}
+function reviewRoute(value) {
+  const route = reviewPath(value);
+  if (!/^(?:[A-Za-z0-9][A-Za-z0-9._~-]*\/)*[A-Za-z0-9][A-Za-z0-9._~-]*\.html$/.test(
+    route
+  ))
+    reviewInvalid("unsafe route");
+  return route;
+}
+function reviewStrings(value, validate = reviewString) {
+  const strings = reviewArray(value).map(validate);
+  requireOrdered(strings, (value2) => value2);
+  return strings;
+}
+function requireOrdered(items, key) {
+  for (let index = 1; index < items.length; index++)
+    if (key(items[index - 1]) >= key(items[index]))
+      reviewInvalid("records must be sorted and unique");
+}
+function requireEqual(a, b) {
+  if (canonicalJson(a) !== canonicalJson(b))
+    reviewInvalid("inconsistent sides or references");
+}
+function reviewAddress(value) {
+  const entry = reviewObject(value, ["id", "route", "title"]);
+  reviewId(entry.id);
+  reviewRoute(entry.route);
+  reviewString(entry.title);
+  return entry;
+}
+function reviewSides(record2) {
+  if (!record2.before && !record2.after)
+    reviewInvalid("at least one side is required");
+  for (const side of ["before", "after"])
+    if (record2[side] !== void 0) reviewAddress(record2[side]);
+}
+function reviewState(value) {
+  if (!["added", "changed", "removed", "ignored-only", "unchanged"].includes(
+    String(value)
+  ))
+    reviewInvalid("unknown review state");
+}
+
+// src/components/codec.ts
+function decodeProps(value) {
+  const budget = new DataBudget();
+  budget.visit(0, "$props");
+  return Object.fromEntries(
+    plainKeys(value, "$props").map((key) => [
+      key,
+      decode(
+        value[key],
+        `$props.${key}`,
+        budget,
+        1
+      )
+    ])
+  );
+}
+function decode(value, at, budget, depth) {
+  budget.visit(depth, at);
+  denseArray(value, at);
+  const [kind, payload] = value;
+  if (kind === "null" && value.length === 1) return null;
+  if (value.length !== 2) invalidData(at, "invalid wire tuple length");
+  if (kind === "string" && typeof payload === "string") return payload;
+  if (kind === "boolean" && typeof payload === "boolean") return payload;
+  if (kind === "number" && typeof payload === "string") {
+    const number = Number(payload);
+    if (Number.isFinite(number) && (Object.is(number, -0) ? "-0" : String(number)) === payload)
+      return number;
+    invalidData(at, "noncanonical number");
+  }
+  if (kind === "array") {
+    denseArray(payload, at);
+    return payload.map(
+      (item, i) => decode(item, `${at}[${i}]`, budget, depth + 1)
+    );
+  }
+  if (kind === "object") {
+    denseArray(payload, at);
+    const object = {};
+    let previous;
+    for (const pair of payload) {
+      denseArray(pair, at);
+      if (pair.length !== 2 || typeof pair[0] !== "string")
+        invalidData(at, "invalid object entry");
+      const key = pair[0];
+      if (previous !== void 0 && previous >= key)
+        invalidData(at, "object keys must be unique and sorted");
+      plainKeys({ [key]: null }, at);
+      object[key] = decode(pair[1], `${at}.${key}`, budget, depth + 1);
+      previous = key;
+    }
+    return object;
+  }
+  return invalidData(at, "unknown or malformed wire value");
+}
+
+// src/review/result_records.ts
+var screenKeys = [
+  "dependencies",
+  "id",
+  "route",
+  "sharedImpact",
+  "state",
+  "title"
+];
+function validateReviewScreen(value, version, component = false) {
+  const record2 = reviewObject(
+    value,
+    [...screenKeys, component ? "variants" : "views"],
+    version === 3 ? ["before", "after"] : []
+  );
+  reviewId(record2.id);
+  reviewRoute(record2.route);
+  reviewString(record2.title);
+  reviewStrings(record2.dependencies, reviewPath);
+  reviewStrings(record2.sharedImpact, reviewPath);
+  reviewState(record2.state);
+  if (version === 3) {
+    reviewSides(record2);
+    requireEqual(record2.after ?? record2.before, {
+      id: record2.id,
+      route: record2.route,
+      title: record2.title
+    });
+  }
+  if (!component)
+    validateReviewViews(record2.views, version === 3 ? record2 : void 0);
+  else {
+    const variants = reviewArray(record2.variants);
+    if (!variants.length) reviewInvalid("component variants are missing");
+    const ids = /* @__PURE__ */ new Set();
+    for (const item of variants) {
+      const variant = reviewObject(
+        item,
+        ["id", "title", "state", "views"],
+        ["before", "after"]
+      );
+      reviewId(variant.id);
+      reviewString(variant.title);
+      reviewState(variant.state);
+      if (ids.has(variant.id) || !variant.before && !variant.after)
+        reviewInvalid("invalid variant sides or identity");
+      ids.add(variant.id);
+      for (const side of ["before", "after"]) {
+        if (!variant[side]) continue;
+        if (!record2[side]) reviewInvalid("variant has no entry side");
+        const address = reviewObject(
+          variant[side],
+          ["id", "title", "props", "suppliedSlots"],
+          ["description"]
+        );
+        requireEqual(address.id, variant.id);
+        reviewString(address.title);
+        if (address.description !== void 0)
+          reviewString(address.description);
+        reviewStrings(address.suppliedSlots);
+        decodeProps(address.props);
+      }
+      const preferred = reviewObject(
+        variant.after ?? variant.before,
+        ["id", "title", "props", "suppliedSlots"],
+        ["description"]
+      );
+      requireEqual(preferred.title, variant.title);
+      validateReviewViews(variant.views, variant);
+    }
+  }
+  return record2;
+}
+function validateReviewViews(value, sides) {
+  const views = reviewArray(value);
+  if (!views.length) reviewInvalid("view evidence is missing");
+  const keys = [];
+  for (const item of views) {
+    const view = reviewObject(
+      item,
+      ["viewport", "colorScheme", "ignoredIds", "state"],
+      ["beforePath", "afterPath"]
+    );
+    if (!["mobile", "desktop"].includes(String(view.viewport)) || !["light", "dark"].includes(String(view.colorScheme)))
+      reviewInvalid("invalid view context");
+    keys.push(
+      `${view.viewport === "mobile" ? 0 : 1}:${view.colorScheme === "light" ? 0 : 1}`
+    );
+    reviewStrings(view.ignoredIds, reviewId);
+    reviewState(view.state);
+    if (!view.beforePath && !view.afterPath)
+      reviewInvalid("view sides are missing");
+    if (!view.beforePath && view.state !== "added" || !view.afterPath && view.state !== "removed")
+      reviewInvalid("missing view side has the wrong state");
+    if (view.beforePath && view.afterPath && (view.state === "added" || view.state === "removed"))
+      reviewInvalid("paired view has a missing-side state");
+    for (const side of ["before", "after"]) {
+      const path = view[`${side}Path`];
+      if (path === void 0) continue;
+      if (sides && !sides[side]) reviewInvalid("view has no entry side");
+      if (!reviewRoute(path).startsWith(`snapshots/${side}/`))
+        reviewInvalid("snapshot belongs to the wrong side");
+    }
+  }
+  requireOrdered(keys, (key) => key);
+}
+function validateChangedEntry(value, changedPaths) {
+  const record2 = reviewObject(value, ["kind", "reasons"], ["before", "after"]);
+  if (!["screen", "component", "use-case"].includes(String(record2.kind)))
+    reviewInvalid("unknown changed entry kind");
+  reviewSides(record2);
+  const reasons = reviewArray(record2.reasons);
+  if (!reasons.length) reviewInvalid("change reasons are empty");
+  const keys = [];
+  for (const raw of reasons) {
+    if (!raw || typeof raw !== "object" || !("kind" in raw))
+      reviewInvalid("invalid reason");
+    const reason = reviewObject(
+      raw,
+      raw.kind === "dependency" ? ["kind", "path"] : raw.kind === "screen" ? ["kind", "route"] : ["kind"]
+    );
+    if (![
+      "added",
+      "removed",
+      "metadata",
+      "material",
+      "inputs",
+      "structure",
+      "dependency",
+      "screen"
+    ].includes(String(reason.kind)))
+      reviewInvalid("unknown reason");
+    if (reason.kind === "added" && record2.before || reason.kind === "removed" && record2.after)
+      reviewInvalid("reason conflicts with available sides");
+    if (reason.kind === "dependency" && !changedPaths.includes(reviewPath(reason.path)))
+      reviewInvalid("dependency did not change");
+    if (reason.kind === "screen" && (record2.kind !== "use-case" || !reviewRoute(reason.route)))
+      reviewInvalid("screen propagation requires a use case");
+    keys.push(`${reason.kind}:${reason.path ?? reason.route ?? ""}`);
+  }
+  requireOrdered(keys, (key) => key);
+  return record2;
+}
+function validateAffected(value) {
+  const record2 = reviewObject(value, [
+    "changedComponentId",
+    "consumer",
+    "evidence"
+  ]);
+  reviewId(record2.changedComponentId);
+  const consumer = reviewObject(
+    record2.consumer,
+    record2.consumer && typeof record2.consumer === "object" && "kind" in record2.consumer && record2.consumer.kind === "screen" ? ["kind", "route"] : ["kind", "id"]
+  );
+  if (consumer.kind === "screen") reviewRoute(consumer.route);
+  else if (consumer.kind === "component") reviewId(consumer.id);
+  else reviewInvalid("invalid affected consumer");
+  const evidence = reviewArray(record2.evidence);
+  if (!evidence.length) reviewInvalid("affected evidence is empty");
+  const keys = [];
+  for (const raw of evidence) {
+    const item = reviewObject(raw, ["side", "context", "via"]);
+    if (item.side !== "before" && item.side !== "after")
+      reviewInvalid("invalid evidence side");
+    const context = reviewObject(
+      item.context,
+      ["kind", "entry", "viewport", "colorScheme"],
+      ["variantId"]
+    );
+    const entry = reviewAddress(context.entry);
+    if (context.kind === "component") reviewId(context.variantId);
+    else if (context.kind !== "screen" || context.variantId !== void 0)
+      reviewInvalid("invalid usage context");
+    if (!["mobile", "desktop"].includes(String(context.viewport)) || !["light", "dark"].includes(String(context.colorScheme)))
+      reviewInvalid("invalid usage view");
+    const chain = reviewArray(item.via).map((raw2) => {
+      const edge = reviewObject(raw2, ["componentId", "instanceKey"]);
+      reviewId(edge.componentId);
+      if (!/^[a-f0-9]{64}$/.test(reviewString(edge.instanceKey)))
+        reviewInvalid("invalid instance key");
+      return edge;
+    });
+    if (!chain.length || chain.at(-1).componentId !== record2.changedComponentId || new Set(chain.map((edge) => edge.instanceKey)).size !== chain.length)
+      reviewInvalid("invalid ownership chain");
+    keys.push(
+      `${item.side === "before" ? 0 : 1}:${entry.route}:${context.variantId ?? ""}:${context.viewport === "mobile" ? 0 : 1}:${context.colorScheme === "light" ? 0 : 1}:${canonicalJson(chain)}`
+    );
+  }
+  requireOrdered(keys, (key) => key);
+  return record2;
+}
+
+// src/review/result_validation.ts
+function parseReviewResult(value) {
+  try {
+    return validateResult(value);
+  } catch (error) {
+    reviewInvalid(
+      error instanceof Error ? error.message : "invalid comparison"
+    );
+  }
+}
+function validateResult(value) {
+  if (!value || typeof value !== "object" || !("schemaVersion" in value) || value.schemaVersion !== 2 && value.schemaVersion !== 3)
+    reviewInvalid("unsupported result version");
+  const version = value.schemaVersion;
+  const result = reviewObject(value, [
+    "schemaVersion",
+    "baseCommit",
+    "baseRef",
+    "changedPaths",
+    "ignoredImpact",
+    "screens",
+    "sharedImpact",
+    ...version === 3 ? ["components", "changes", "affectedConsumers"] : []
+  ]);
+  if (!/^[a-f0-9]{40,64}$/.test(reviewString(result.baseCommit)))
+    reviewInvalid("invalid base commit");
+  reviewString(result.baseRef);
+  const changed = reviewStrings(result.changedPaths, reviewPath);
+  reviewStrings(result.sharedImpact, reviewPath);
+  const screens = reviewArray(result.screens).map(
+    (screen) => validateReviewScreen(screen, version)
+  );
+  requireOrdered(screens, (screen) => String(screen.route));
+  const ignoredKeys = [];
+  for (const raw of reviewArray(result.ignoredImpact)) {
+    const impact = reviewObject(raw, [
+      "viewport",
+      "colorScheme",
+      "id",
+      "count"
+    ]);
+    reviewId(impact.id);
+    if (!["mobile", "desktop"].includes(String(impact.viewport)) || !["light", "dark"].includes(String(impact.colorScheme)) || !Number.isSafeInteger(impact.count) || Number(impact.count) < 1)
+      reviewInvalid("invalid ignored impact");
+    ignoredKeys.push(
+      `${impact.viewport === "mobile" ? 0 : 1}:${impact.colorScheme === "light" ? 0 : 1}:${impact.id}`
+    );
+  }
+  requireOrdered(ignoredKeys, (key) => key);
+  if (version === 3) {
+    const components = reviewArray(result.components).map(
+      (component) => validateReviewScreen(component, 3, true)
+    );
+    requireOrdered(components, (component) => String(component.id));
+    const changes = reviewArray(result.changes).map(
+      (entry) => validateChangedEntry(entry, changed)
+    );
+    requireOrdered(changes, (entry) => {
+      const preferred = entry.after ?? entry.before;
+      return `${preferred.route}:${entry.kind}:${preferred.id}`;
+    });
+    const routes = /* @__PURE__ */ new Set();
+    for (const change of changes) {
+      const preferred = change.after ?? change.before;
+      if (routes.has(String(preferred.route)))
+        reviewInvalid("duplicate routed Changes entry");
+      routes.add(String(preferred.route));
+      if (change.kind === "use-case") continue;
+      const record2 = change.kind === "screen" ? screens.find((screen) => screen.route === preferred.route) : components.find((component) => component.id === preferred.id);
+      if (!record2) reviewInvalid("changed entry has no result record");
+      requireEqual(
+        { before: record2.before, after: record2.after },
+        { before: change.before, after: change.after }
+      );
+    }
+    const affected = reviewArray(result.affectedConsumers).map(
+      validateAffected
+    );
+    requireOrdered(affected, (item) => {
+      const consumer = item.consumer;
+      return `${item.changedComponentId}:${consumer.kind}:${consumer.route ?? consumer.id}`;
+    });
+    validateResultReferences(value);
+  }
+  return value;
+}
+function validateResultReferences(result) {
+  const changed = new Set(
+    result.changes.filter((entry) => entry.kind === "component").map((entry) => (entry.after ?? entry.before).id)
+  );
+  for (const affected of result.affectedConsumers) {
+    if (!changed.has(affected.changedComponentId))
+      reviewInvalid("affected evidence has no directly changed component");
+    for (const evidence of affected.evidence) {
+      const context = evidence.context;
+      const owner = context.kind === "screen" ? result.screens.find(
+        (screen) => screen.route === context.entry.route
+      ) : result.components.find(
+        (component) => component.id === context.entry.id
+      );
+      if (!owner?.[evidence.side])
+        reviewInvalid("affected context side is missing");
+      requireEqual(owner[evidence.side], context.entry);
+      const views = context.kind === "screen" && "views" in owner ? owner.views : "variants" in owner && context.kind === "component" ? owner.variants.find((variant) => variant.id === context.variantId)?.views : void 0;
+      if (!views?.some(
+        (view) => view.viewport === context.viewport && view.colorScheme === context.colorScheme && view[`${evidence.side}Path`]
+      ))
+        reviewInvalid("affected context view is missing");
+      if (evidence.via.some(
+        (edge) => !result.components.some(
+          (component) => component.id === edge.componentId
+        )
+      ))
+        reviewInvalid("unknown component in ownership chain");
+      if (affected.consumer.kind === "screen" ? context.kind !== "screen" || affected.consumer.route !== context.entry.route : affected.consumer.id === affected.changedComponentId || affected.consumer.id !== context.entry.id && !evidence.via.slice(0, -1).some(
+        (edge) => edge.componentId === affected.consumer.id
+      ))
+        reviewInvalid("affected consumer does not own this chain");
+    }
+  }
+  for (const entry of result.changes)
+    for (const reason of entry.reasons)
+      if (reason.kind === "screen" && !result.changes.some(
+        (screen) => screen.kind === "screen" && [screen.before?.route, screen.after?.route].includes(reason.route)
+      ))
+        reviewInvalid("use-case reason names a screen without a direct change");
+  const ignored = /* @__PURE__ */ new Map();
+  for (const screen of result.screens)
+    for (const view of screen.views)
+      for (const id of view.ignoredIds) {
+        const key = canonicalJson([view.viewport, view.colorScheme, id]);
+        ignored.set(key, (ignored.get(key) ?? 0) + 1);
+      }
+  if (result.ignoredImpact.length !== ignored.size || result.ignoredImpact.some(
+    (item) => ignored.get(
+      canonicalJson([item.viewport, item.colorScheme, item.id])
+    ) !== item.count
+  ))
+    reviewInvalid("ignored impact does not match view evidence");
+}
+
+// src/client/diffs.ts
+import { renderDiff } from "./diff_views.js";
+import { readStaticDelivery } from "./static_delivery.js";
+function installDiffs(doc, win) {
+  let request;
+  let loaded;
+  let loadedSelection;
+  let requestedSelection;
+  let screen;
+  let mode = "current";
+  const reset = () => {
+    request?.abort();
+    request = void 0;
+    loaded = void 0;
+    loadedSelection = void 0;
+    requestedSelection = void 0;
+    screen = void 0;
+    mode = "current";
+  };
+  const display = () => {
+    if (!screen?.isConnected) return;
+    const stage = screen.querySelector("[data-diff-stage]");
+    const current = screen.querySelector("[data-current-screen]");
+    const refresh = screen.querySelector("[data-diff-refresh]");
+    if (!stage || !current) return;
+    current.hidden = mode !== "current";
+    stage.hidden = mode === "current";
+    if (refresh) refresh.hidden = mode === "current" || loaded === void 0;
+    for (const button of screen.querySelectorAll("[data-diff-mode]")) {
+      button.setAttribute(
+        "aria-pressed",
+        String(button.getAttribute("data-diff-mode") === mode)
+      );
+    }
+    if (mode === "current") {
+      stage.replaceChildren();
+    } else if (loaded) {
+      renderDiff(
+        doc,
+        stage,
+        loaded,
+        screen.dataset["diffScreen"] ?? "",
+        mode,
+        screen.dataset["diffVariant"]
+      );
+    }
+    doc.dispatchEvent(new win.Event("mokly:comparison"));
+  };
+  doc.addEventListener("mokly:evidence-updated", () => {
+    request?.abort();
+    request = void 0;
+    loaded = void 0;
+    loadedSelection = void 0;
+    requestedSelection = void 0;
+    if (mode !== "current") {
+      mode = "current";
+      display();
+    }
+  });
+  const load = async (refresh, cached) => {
+    const target = screen;
+    const stage = target?.querySelector("[data-diff-stage]");
+    if (!target || !stage) return;
+    request?.abort();
+    const pending = new win.AbortController();
+    request = pending;
+    const selection = selectionKey(target);
+    requestedSelection = selection;
+    loaded = void 0;
+    display();
+    stage.setAttribute("aria-busy", "true");
+    if (!cached) stage.textContent = "Loading comparison\u2026";
+    try {
+      const delivery = readStaticDelivery(doc);
+      if (delivery?.comparisonUrl === null)
+        throw new Error("Comparisons are unavailable in this catalogue.");
+      let comparison = cached;
+      if (comparison && !delivery) {
+        const renewal = await win.fetch(comparison.url, {
+          method: "HEAD",
+          cache: "no-store",
+          signal: pending.signal
+        });
+        if (!renewal.ok || renewal.url !== comparison.url)
+          comparison = void 0;
+      }
+      if (!comparison) {
+        stage.textContent = "Loading comparison\u2026";
+        const endpoint = new URL(
+          delivery?.comparisonUrl ?? "/__mokly/diffs/review.json",
+          win.location.href
+        );
+        if (!delivery) {
+          endpoint.searchParams.set(
+            "route",
+            target.dataset["diffScreen"] ?? ""
+          );
+          const variant = target.dataset["diffVariant"];
+          if (variant) endpoint.searchParams.set("variant", variant);
+        }
+        if (refresh) endpoint.searchParams.set("refresh", "1");
+        const response = await win.fetch(endpoint.href, {
+          signal: pending.signal,
+          headers: { accept: "application/json" }
+        });
+        if (!response.ok) {
+          const failure = await response.json();
+          throw new Error(
+            typeof failure.details === "string" ? failure.details : "Comparison unavailable"
+          );
+        }
+        comparison = {
+          result: parseReviewResult(await response.json()),
+          url: response.url
+        };
+      }
+      if (pending.signal.aborted || !target.isConnected || screen !== target || selection !== selectionKey(target) || mode === "current")
+        return;
+      loaded = comparison;
+      loadedSelection = selection;
+      display();
+    } catch (error) {
+      if (pending.signal.aborted || !target.isConnected || screen !== target || selection !== selectionKey(target) || mode === "current")
+        return;
+      stage.textContent = "The comparison could not be loaded. ";
+      const retry = doc.createElement("button");
+      retry.type = "button";
+      retry.setAttribute("data-diff-refresh", "");
+      retry.textContent = "Try again";
+      stage.append(retry);
+      if (error instanceof Error) {
+        const details = doc.createElement("details");
+        const summary = doc.createElement("summary");
+        summary.textContent = "Comparison details";
+        const description = doc.createElement("p");
+        description.textContent = error.message;
+        details.append(summary, description);
+        details.setAttribute("data-comparison-failure", "");
+        doc.querySelector("[data-comparison-failure]")?.remove();
+        doc.querySelector('[data-inspector-panel="details"]')?.append(details);
+      }
+    } finally {
+      if (request === pending) {
+        request = void 0;
+        stage.removeAttribute("aria-busy");
+      }
+    }
+  };
+  const update = (refresh = false) => {
+    if (mode === "current") {
+      display();
+      return;
+    }
+    const selection = screen ? selectionKey(screen) : void 0;
+    if (request && selection === requestedSelection && !refresh) {
+      display();
+      return;
+    }
+    const cached = !refresh && selection === loadedSelection ? loaded : void 0;
+    void load(refresh, cached);
+  };
+  doc.addEventListener("click", (event) => {
+    const target = event.target instanceof win.Element ? event.target : void 0;
+    if (!target) return;
+    const option = target.closest("[data-diff-mode]");
+    const refresh = target.closest("[data-diff-refresh]");
+    if (option || refresh) {
+      const owning = target.closest("[data-diff-screen]");
+      if (!owning) return;
+      if (screen !== owning) {
+        reset();
+        screen = owning;
+      }
+      const selected = option?.dataset["diffMode"];
+      if (mode === "current" && selected !== "current") loaded = void 0;
+      if (selected === "current" || selected === "side" || selected === "overlay" || selected === "difference")
+        mode = selected;
+      if (mode === "current") {
+        request?.abort();
+        request = void 0;
+      }
+      update(Boolean(refresh));
+      return;
+    }
+  });
+  return { reset, update };
+}
+function selectionKey(screen) {
+  return JSON.stringify([
+    screen.dataset["diffScreen"],
+    screen.dataset["diffVariant"]
+  ]);
+}
+export {
+  installDiffs
+};