@mokly/mokly 0.8.0

package/dist/browser/component_occlusion.js

@@ -0,0 +1,56 @@
+// src/client/component_occlusion.ts
+function intersectBoxes(a, b) {
+  const box = {
+    left: Math.max(a.left, b.left),
+    top: Math.max(a.top, b.top),
+    right: Math.min(a.right, b.right),
+    bottom: Math.min(a.bottom, b.bottom)
+  };
+  return box.right > box.left && box.bottom > box.top ? box : void 0;
+}
+function subtractBox(box, cut) {
+  const overlap = intersectBoxes(box, cut);
+  if (!overlap) return [box];
+  return [
+    { ...box, bottom: overlap.top },
+    { ...box, top: overlap.bottom },
+    {
+      left: box.left,
+      top: overlap.top,
+      right: overlap.left,
+      bottom: overlap.bottom
+    },
+    {
+      left: overlap.right,
+      top: overlap.top,
+      right: box.right,
+      bottom: overlap.bottom
+    }
+  ].filter((value) => value.right > value.left && value.bottom > value.top);
+}
+function uncoveredBoxes(box, range, candidates, rects) {
+  const doc = range.startContainer.ownerDocument;
+  let pieces = [box];
+  for (const candidate of candidates) {
+    if (!pieces.length) break;
+    if (range.intersectsNode(candidate)) continue;
+    if (!rects.has(candidate))
+      rects.set(candidate, [...candidate.getClientRects()]);
+    for (const rect of rects.get(candidate)) {
+      const overlap = intersectBoxes(box, rect);
+      if (!overlap) continue;
+      const hit = doc.elementFromPoint(
+        (overlap.left + overlap.right) / 2,
+        (overlap.top + overlap.bottom) / 2
+      );
+      if (hit && candidate.contains(hit))
+        pieces = pieces.flatMap((piece) => subtractBox(piece, rect));
+    }
+  }
+  return pieces;
+}
+export {
+  intersectBoxes,
+  subtractBox,
+  uncoveredBoxes
+};

package/dist/browser/component_overlay.js

@@ -0,0 +1,46 @@
+// src/client/component_overlay.ts
+function createOverlay(doc, width, height) {
+  const namespace = "http://www.w3.org/2000/svg";
+  const svg = doc.createElementNS(namespace, "svg");
+  svg.setAttribute("aria-hidden", "true");
+  const mask = doc.createElementNS(namespace, "mask");
+  mask.id = `mbk-mask-${crypto.randomUUID()}`;
+  mask.setAttribute("maskUnits", "userSpaceOnUse");
+  const rectangle = (values) => {
+    const rect = doc.createElementNS(namespace, "rect");
+    for (const [key, value] of Object.entries(values))
+      rect.setAttribute(key, String(value));
+    return rect;
+  };
+  mask.append(rectangle({ width, height, fill: "white" }));
+  svg.append(
+    mask,
+    rectangle({
+      width,
+      height,
+      fill: "rgba(244,246,244,.72)",
+      mask: `url(#${mask.id})`
+    })
+  );
+  return {
+    svg,
+    cutout: (x, y, width2, height2) => {
+      mask.append(rectangle({ x, y, width: width2, height: height2, fill: "black" }));
+      svg.append(
+        rectangle({
+          x,
+          y,
+          width: width2,
+          height: height2,
+          fill: "none",
+          stroke: "#336249",
+          "stroke-width": 1.5,
+          rx: 3
+        })
+      );
+    }
+  };
+}
+export {
+  createOverlay
+};

package/dist/browser/component_range_nodes.js

@@ -0,0 +1,33 @@
+// src/client/component_range_nodes.ts
+function* componentNodeRects(range) {
+  const doc = range.startContainer.ownerDocument;
+  const win = doc.defaultView;
+  const walker = doc.createTreeWalker(range.commonAncestorContainer, 5);
+  let node;
+  while (node = walker.nextNode()) {
+    if (!range.intersectsNode(node) || range.comparePoint(node, 0) !== 0)
+      continue;
+    const element = node.nodeType === 1 ? node : node.parentElement;
+    let visible = true;
+    for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) {
+      const style = win.getComputedStyle(ancestor);
+      if (style.visibility === "hidden" || style.visibility === "collapse" || style.opacity === "0") {
+        visible = false;
+        break;
+      }
+    }
+    if (!visible) continue;
+    if (node.nodeType === 1) {
+      for (const rect of node.getClientRects())
+        yield { rect, parent: node.parentElement };
+    } else {
+      const text = doc.createRange();
+      text.selectNodeContents(node);
+      for (const rect of text.getClientRects())
+        yield { rect, parent: node.parentElement };
+    }
+  }
+}
+export {
+  componentNodeRects
+};

package/dist/browser/control_fields.js

@@ -0,0 +1,326 @@
+// 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");
+  }
+}
+
+// src/components/codec.ts
+function encodeValue(value) {
+  if (value === null) return ["null"];
+  if (typeof value === "number")
+    return ["number", Object.is(value, -0) ? "-0" : String(value)];
+  if (typeof value === "string") return ["string", value];
+  if (typeof value === "boolean") return ["boolean", value];
+  if (Array.isArray(value)) return ["array", value.map(encodeValue)];
+  const object = value;
+  return [
+    "object",
+    Object.keys(object).sort().map((key) => [key, encodeValue(object[key])])
+  ];
+}
+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/components/props.ts
+function validateValue(schema, value, at) {
+  switch (schema.kind) {
+    case "string":
+      if (typeof value !== "string" || value.length < (schema.minLength ?? 0) || value.length > (schema.maxLength ?? Infinity))
+        invalidData(at, "string does not satisfy its length constraints");
+      return value;
+    case "boolean":
+      if (typeof value !== "boolean") invalidData(at, "expected a boolean");
+      return value;
+    case "number":
+      if (typeof value !== "number" || !Number.isFinite(value) || schema.integer && !Number.isSafeInteger(value) || value < (schema.minimum ?? -Infinity) || value > (schema.maximum ?? Infinity))
+        invalidData(at, "number does not satisfy its constraints");
+      return value;
+    case "null":
+      if (value !== null) invalidData(at, "expected null");
+      return null;
+    case "enum":
+      if (!schema.values.some((item) => Object.is(item, value)))
+        invalidData(at, "value is not an allowed option");
+      return value;
+    case "array":
+      if (!Array.isArray(value) || value.length < (schema.minItems ?? 0) || value.length > (schema.maxItems ?? Infinity))
+        invalidData(at, "array does not satisfy its size constraints");
+      return value.map(
+        (item, i) => validateValue(schema.items, item, `${at}[${i}]`)
+      );
+    case "object": {
+      if (!record(value)) invalidData(at, "expected an object");
+      for (const key of Object.keys(value))
+        if (!Object.hasOwn(schema.properties, key))
+          invalidData(`${at}.${key}`, "unknown prop");
+      const result = {};
+      for (const key of Object.keys(schema.properties).sort()) {
+        const field = schema.properties[key];
+        if (value[key] === void 0 && field.optional) continue;
+        if (value[key] === void 0)
+          invalidData(`${at}.${key}`, "required prop is missing");
+        result[key] = validateValue(field.schema, value[key], `${at}.${key}`);
+      }
+      return result;
+    }
+    case "union":
+      for (const member of schema.anyOf) {
+        try {
+          return validateValue(member, value, at);
+        } catch {
+          continue;
+        }
+      }
+      return invalidData(at, "value does not match any allowed schema");
+  }
+}
+
+// src/components/controls.ts
+function validateControlledValues(controls, props, at) {
+  for (const [key, control] of Object.entries(controls)) {
+    const value = props[key];
+    if (value === void 0) continue;
+    if (control.kind === "text" && (typeof value !== "string" || value.length > (control.maxLength ?? Infinity)))
+      invalidData(`${at}.${key}`, "text exceeds control limits");
+    if (control.kind === "boolean" && typeof value !== "boolean")
+      invalidData(`${at}.${key}`, "expected a boolean");
+    if (control.kind === "number" && (typeof value !== "number" || value < (control.minimum ?? -Infinity) || value > (control.maximum ?? Infinity)))
+      invalidData(`${at}.${key}`, "number exceeds control limits");
+    if (control.kind === "select" && !control.options.some((option) => Object.is(option.value, value)))
+      invalidData(`${at}.${key}`, "value is not a control option");
+  }
+}
+
+// src/client/control_fields.ts
+import { element } from "./inspector_panels.js";
+function controlFields(doc, component, variant, changed) {
+  const root = element(doc, "div");
+  root.className = "mbk-control-grid";
+  const values = decodeProps(variant.props);
+  const fields = Object.entries(component.controls).map(([key, control]) => {
+    const value = values[key];
+    const group = element(doc, "div");
+    group.className = "mbk-control-field";
+    const id = `prop-${crypto.randomUUID()}`;
+    const label = element(doc, "label", control.label ?? key);
+    label.htmlFor = id;
+    const input = control.kind === "select" ? element(doc, "select") : element(doc, "input");
+    input.id = id;
+    input.dataset["propControl"] = key;
+    if (input instanceof HTMLInputElement) {
+      input.type = control.kind === "boolean" ? "checkbox" : control.kind === "number" ? "number" : "text";
+      if (control.kind === "number") {
+        input.step = String(control.step ?? "any");
+        if (control.minimum !== void 0) input.min = String(control.minimum);
+        if (control.maximum !== void 0) input.max = String(control.maximum);
+      }
+      if (control.kind === "number") input.inputMode = "decimal";
+      if (control.kind === "boolean") input.checked = value === true;
+      else
+        input.value = value === void 0 ? "" : Object.is(value, -0) ? "-0" : String(value);
+    } else if (control.kind === "select") {
+      const empty = element(doc, "option", "Choose a value");
+      empty.value = "";
+      input.append(empty);
+      control.options.forEach((option, index) => {
+        const node = element(doc, "option", option.label);
+        node.value = String(index);
+        input.append(node);
+      });
+      const selected = control.options.findIndex(
+        (option) => Object.is(value, option.value)
+      );
+      input.value = selected < 0 ? "" : String(selected);
+    }
+    const supplied = component.propSchema.properties[key]?.optional ? element(doc, "input") : void 0;
+    if (supplied) {
+      supplied.type = "checkbox";
+      supplied.checked = value !== void 0;
+      supplied.setAttribute("aria-label", `Supply ${control.label ?? key}`);
+      const toggle = element(doc, "label");
+      toggle.className = "mbk-control-supplied";
+      toggle.append(supplied, element(doc, "span", "Supplied"));
+      group.append(toggle);
+    }
+    const help = element(
+      doc,
+      "small",
+      control.description ?? (control.kind === "number" && (control.minimum !== void 0 || control.maximum !== void 0) ? `Allowed range: ${control.minimum ?? "no minimum"} to ${control.maximum ?? "no maximum"}.` : "")
+    );
+    help.id = `${id}-help`;
+    const error = element(doc, "small");
+    error.className = "mbk-control-error";
+    error.id = `${id}-error`;
+    error.hidden = true;
+    input.setAttribute("aria-describedby", `${help.id} ${error.id}`);
+    input.addEventListener(
+      control.kind === "text" || control.kind === "number" ? "input" : "change",
+      () => changed(control.kind !== "text" && control.kind !== "number")
+    );
+    supplied?.addEventListener("change", () => {
+      input.disabled = !supplied.checked;
+      changed(true);
+    });
+    group.append(label, input, help, error);
+    root.append(group);
+    return { key, control, input, supplied, error };
+  });
+  return {
+    root,
+    disable(disabled) {
+      for (const { input, supplied } of fields) {
+        input.disabled = disabled || supplied?.checked === false;
+        if (supplied) supplied.disabled = disabled;
+      }
+    },
+    read() {
+      let valid = true;
+      const overrides = {};
+      for (const { key, control, input, supplied, error } of fields) {
+        error.hidden = true;
+        input.removeAttribute("aria-invalid");
+        if (supplied && !supplied.checked) {
+          if (values[key] !== void 0) overrides[key] = { kind: "unset" };
+          continue;
+        }
+        try {
+          let value;
+          if (control.kind === "boolean")
+            value = input.checked;
+          else if (control.kind === "select") {
+            const option = input.value === "" ? void 0 : control.options[Number(input.value)];
+            if (!option) throw new Error("Choose an available value.");
+            value = option.value;
+          } else if (control.kind === "number") {
+            value = Number(input.value);
+            if (!input.value.trim() || !Number.isFinite(value))
+              throw new Error("Enter a finite number.");
+          } else value = input.value;
+          validateValue(
+            component.propSchema.properties[key].schema,
+            value,
+            key
+          );
+          validateControlledValues({ [key]: control }, { [key]: value }, key);
+          if (!Object.is(value, values[key]))
+            overrides[key] = {
+              kind: "set",
+              value: encodeValue(value)
+            };
+        } catch {
+          error.textContent = control.kind === "number" ? "Enter a number within the allowed range." : control.kind === "select" ? "Choose an available value." : "Check this value and its allowed limits.";
+          error.hidden = false;
+          input.setAttribute("aria-invalid", "true");
+          valid = false;
+        }
+      }
+      return valid ? overrides : void 0;
+    }
+  };
+}
+export {
+  controlFields
+};

package/dist/browser/control_surface.js

@@ -0,0 +1,43 @@
+// src/client/control_surface.ts
+import { element } from "./inspector_panels.js";
+function controlSurface(doc, reset, retryEdit) {
+  const panel = element(doc, "div");
+  panel.className = "mbk-component-controls";
+  const form = element(doc, "div");
+  const status = element(doc, "p");
+  status.setAttribute("role", "status");
+  status.dataset["controlsStatus"] = "";
+  const error = element(doc, "p");
+  error.className = "mbk-control-error";
+  error.setAttribute("role", "alert");
+  error.hidden = true;
+  const resetButton = element(doc, "button", "Reset");
+  resetButton.type = "button";
+  resetButton.className = "mbk-chip";
+  const retry = element(doc, "button", "Try again");
+  retry.type = "button";
+  retry.className = "mbk-chip";
+  retry.hidden = true;
+  const propsPanel = element(doc, "div");
+  const actions = element(doc, "div");
+  actions.className = "mbk-control-actions";
+  actions.append(status, retry, resetButton);
+  panel.append(form, error, actions, propsPanel);
+  resetButton.addEventListener("click", reset);
+  retry.addEventListener("click", retryEdit);
+  return { panel, form, status, error, resetButton, retry, propsPanel };
+}
+function controlsUnavailable(data, variant, comparing) {
+  if (!variant || variant.removed)
+    return "Choose an available saved variant to edit props.";
+  if (comparing)
+    return "Comparisons show the saved variant. Return to Current to edit props.";
+  if (!data.renderCapability)
+    return "Open this catalogue locally to edit props.";
+  if (data.entry.kind === "component" && !Object.keys(data.entry.controls).length)
+    return "No editable props are declared for this component.";
+}
+export {
+  controlSurface,
+  controlsUnavailable
+};

package/dist/browser/control_transport.js

@@ -0,0 +1,47 @@
+// src/client/control_transport.ts
+async function requestComponentPreview(request, capability, view, signal) {
+  const response = await fetch("/__mokly/components/render", {
+    method: "POST",
+    credentials: "same-origin",
+    signal,
+    headers: {
+      "content-type": "application/json",
+      "x-mokly-render-token": capability.token
+    },
+    body: JSON.stringify(request)
+  });
+  if (!response.ok) {
+    const messages = {
+      400: "Check the prop values and their allowed limits.",
+      403: "Reload the catalogue to continue editing.",
+      404: "This component or variant is unavailable.",
+      409: "The catalogue changed. Reload to continue editing.",
+      413: "The prop values are too large.",
+      422: "The preview could not be rendered. Try again or reset the props.",
+      429: "The renderer is busy. Try again shortly."
+    };
+    throw new Error(
+      messages[response.status] ?? "The preview could not be updated. Try again."
+    );
+  }
+  const result = await response.json();
+  if (!result || !/^[a-f0-9]{48}\.[a-f0-9]{64}$/.test(result.renderId) || result.generation !== capability.generation || result.previewUrl !== `/__mokly/components/renders/${result.renderId}/${view.path.split("/").map(encodeURIComponent).join("/")}` || result.view?.viewport !== view.viewport || result.view.colorScheme !== view.colorScheme || !Array.isArray(result.view.instances) || !Array.isArray(result.view.ranges) || !result.props)
+    throw new Error("The preview response could not be read. Try again.");
+  return result;
+}
+async function componentPreviewExpired(frame, previews, signal) {
+  const preview = [...previews].find(
+    (result) => frame.contentWindow?.location.pathname === result.previewUrl
+  );
+  if (!preview) return false;
+  const response = await fetch(preview.previewUrl, {
+    method: "HEAD",
+    signal,
+    cache: "no-store"
+  });
+  return response.status === 410;
+}
+export {
+  componentPreviewExpired,
+  requestComponentPreview
+};

package/dist/browser/diff_views.js

@@ -0,0 +1,137 @@
+// src/client/diff_views.ts
+import { currentColorScheme, currentViewport } from "./browse_state.js";
+var STATE_LABELS = {
+  added: "New screen",
+  changed: "Screen changed",
+  "ignored-only": "Only excluded content changed",
+  removed: "Screen removed",
+  unchanged: "No changes to this screen"
+};
+function renderDiff(doc, stage, loaded, route, mode, variantId) {
+  const component = loaded.result.schemaVersion === 3 ? loaded.result.components.find((candidate) => candidate.route === route) : void 0;
+  const variant = component?.variants.find(
+    (candidate) => candidate.id === variantId
+  );
+  const screen = component && variant ? { ...component, views: variant.views } : loaded.result.screens.find((candidate) => candidate.route === route);
+  if (!screen) {
+    stage.replaceChildren();
+    stage.append(message(doc, "This screen has no comparison available."));
+    return;
+  }
+  const viewport = currentViewport(doc);
+  const scheme = currentColorScheme(doc);
+  const key = `${loaded.url}|${route}|${variantId ?? ""}|${viewport}|${scheme}`;
+  if (stage.dataset["diffKey"] === key && stage.querySelector(".mb-panes")) {
+    for (const panes of stage.querySelectorAll(".mb-panes")) {
+      panes.dataset["compareMode"] = panes.querySelector(".mb-pane-missing") ? "side" : mode;
+    }
+    return;
+  }
+  stage.replaceChildren();
+  stage.dataset["diffKey"] = key;
+  for (const size of ["mobile", "desktop"]) {
+    if (viewport !== "both" && viewport !== size) continue;
+    const view = screen.views.find(
+      (item) => item.viewport === size && item.colorScheme === scheme
+    ) ?? screen.views.find(
+      (item) => item.viewport === size && item.colorScheme === "light"
+    );
+    if (!view) continue;
+    const section = doc.createElement("section");
+    section.className = `mbk-diff-view mbk-diff-${size}`;
+    section.dataset["diffViewport"] = size;
+    const heading = doc.createElement("h3");
+    heading.textContent = `${size === "mobile" ? "Mobile" : "Desktop"} \xB7 ${component ? STATE_LABELS[view.state].replace(/screen/g, "variant").replace(/Screen/g, "Variant") : STATE_LABELS[view.state]}${scheme !== view.colorScheme ? " \xB7 Light only" : ""}`;
+    section.append(heading);
+    const panes = doc.createElement("div");
+    panes.className = "mb-panes";
+    panes.dataset["compareMode"] = view.beforePath && view.afterPath ? mode : "side";
+    panes.append(
+      pane(doc, loaded.url, view, "before"),
+      pane(doc, loaded.url, view, "after")
+    );
+    section.append(panes);
+    stage.append(section);
+  }
+  const details = doc.querySelector("[data-workspace-evidence]");
+  if (details && loaded.result.schemaVersion === 2) {
+    details.hidden = false;
+    details.replaceChildren();
+    evidence(doc, details, screen, loaded.result.baseRef);
+  }
+}
+function pane(doc, base, view, side) {
+  const container = doc.createElement("div");
+  container.className = `mb-pane mb-pane--${side}`;
+  const label = doc.createElement("p");
+  label.className = "mb-pane-label";
+  label.textContent = side === "before" ? "Before" : "Current";
+  container.append(label);
+  const source = side === "before" ? view.beforePath : view.afterPath;
+  if (!source) {
+    const missing = message(
+      doc,
+      side === "before" ? "This screen was added on this branch." : "This screen was removed on this branch."
+    );
+    missing.className = "mb-pane-missing";
+    container.append(missing);
+    return container;
+  }
+  const body = doc.createElement("div");
+  body.className = "mb-pane-doc mbk-frame-wrap";
+  if (view.colorScheme === "light")
+    body.setAttribute("data-color-scheme-fallback", "");
+  const frame = doc.createElement("iframe");
+  frame.className = "mbk-frag";
+  frame.title = `${label.textContent} \u2014 ${view.viewport} \u2014 ${view.colorScheme}`;
+  frame.setAttribute("sandbox", "");
+  frame.src = new URL(
+    source.split("/").map(encodeURIComponent).join("/"),
+    base
+  ).href;
+  const template = doc.querySelector(
+    `[data-diff-template="${view.viewport}"]`
+  );
+  const chrome = template?.content.firstElementChild?.cloneNode(true);
+  const viewport = chrome?.querySelector(".phone-screen, .browser-viewport");
+  if (chrome && viewport) {
+    viewport.append(frame);
+    body.append(chrome);
+  } else body.append(frame);
+  container.append(body);
+  return container;
+}
+function evidence(doc, stage, screen, base) {
+  const details = doc.createElement("details");
+  details.className = "mb-impact-card";
+  const summary = doc.createElement("summary");
+  summary.textContent = "Comparison details";
+  details.append(
+    summary,
+    message(doc, `Compared with the branch point on ${base}.`)
+  );
+  if (screen.sharedImpact.length > 0) {
+    details.append(
+      message(doc, "Changes to these files may affect this screen:")
+    );
+    const list = doc.createElement("ul");
+    for (const input of screen.sharedImpact) {
+      const item = doc.createElement("li");
+      item.textContent = input;
+      list.append(item);
+    }
+    details.append(list);
+  }
+  const ignored = [...new Set(screen.views.flatMap((view) => view.ignoredIds))];
+  if (ignored.length > 0)
+    details.append(message(doc, `Excluded content: ${ignored.join(", ")}.`));
+  stage.append(details);
+}
+function message(doc, text) {
+  const paragraph = doc.createElement("p");
+  paragraph.textContent = text;
+  return paragraph;
+}
+export {
+  renderDiff
+};