@mokly/mokly 0.8.0

package/dist/browser/navigation-resize.js

@@ -0,0 +1,116 @@
+"use strict";
+(() => {
+  // src/client/nav_resize.ts
+  function initializeNavigationResize(doc, win) {
+    const nav = doc.querySelector(".mbk-nav");
+    const handle = nav?.querySelector("[data-mokly-nav-resize]");
+    if (!nav || !handle || handle.dataset["resizeInitialized"] === "true") {
+      return;
+    }
+    const numericAttribute = (name) => {
+      const value = handle.getAttribute(name);
+      if (value === null || value.trim() === "") return void 0;
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : void 0;
+    };
+    const minimum = numericAttribute("aria-valuemin");
+    const initial = numericAttribute("aria-valuenow");
+    const maximum = numericAttribute("aria-valuemax");
+    if (minimum === void 0 || initial === void 0 || maximum === void 0 || minimum > initial || initial > maximum) {
+      return;
+    }
+    const storageKey = "mokly:navigation-width:v1";
+    let storage;
+    try {
+      storage = win.localStorage;
+    } catch {
+      storage = void 0;
+    }
+    let storedWidth;
+    try {
+      const stored = storage?.getItem(storageKey);
+      if (stored !== null && stored !== void 0) {
+        const parsed = Number(stored);
+        if (Number.isFinite(parsed)) storedWidth = parsed;
+      }
+    } catch {
+      storage = void 0;
+    }
+    const viewportMaximum = () => Math.max(minimum, Math.min(maximum, Math.floor(win.innerWidth / 2)));
+    const applyWidth = (candidate) => {
+      const upper = viewportMaximum();
+      const width2 = Math.round(Math.max(minimum, Math.min(upper, candidate)));
+      nav.style.setProperty("--mbk-nav-width", `${width2}px`);
+      handle.setAttribute("aria-valuemax", String(upper));
+      handle.setAttribute("aria-valuenow", String(width2));
+      handle.setAttribute("aria-valuetext", `${width2} pixels`);
+      return width2;
+    };
+    const persist = (width2) => {
+      try {
+        storage?.setItem(storageKey, String(width2));
+      } catch {
+        storage = void 0;
+      }
+    };
+    let width = applyWidth(storedWidth ?? initial);
+    let activePointer;
+    let pointerStart = 0;
+    let widthStart = width;
+    const finishPointerResize = () => {
+      const pointer = activePointer;
+      if (pointer === void 0) return;
+      activePointer = void 0;
+      doc.body.classList.remove("mbk-nav-resizing");
+      if (handle.hasPointerCapture(pointer))
+        handle.releasePointerCapture(pointer);
+      persist(width);
+    };
+    handle.addEventListener("pointerdown", (event) => {
+      if (!event.isPrimary || event.button !== 0) return;
+      event.preventDefault();
+      activePointer = event.pointerId;
+      pointerStart = event.clientX;
+      widthStart = nav.getBoundingClientRect().width;
+      handle.setPointerCapture(event.pointerId);
+      doc.body.classList.add("mbk-nav-resizing");
+    });
+    handle.addEventListener("pointermove", (event) => {
+      if (event.pointerId !== activePointer) return;
+      width = applyWidth(widthStart + event.clientX - pointerStart);
+    });
+    handle.addEventListener("pointerup", (event) => {
+      if (event.pointerId === activePointer) finishPointerResize();
+    });
+    handle.addEventListener("pointercancel", (event) => {
+      if (event.pointerId === activePointer) finishPointerResize();
+    });
+    handle.addEventListener("lostpointercapture", (event) => {
+      if (event.pointerId === activePointer) finishPointerResize();
+    });
+    handle.addEventListener("keydown", (event) => {
+      let candidate;
+      if (event.key === "ArrowLeft") candidate = width - 16;
+      else if (event.key === "ArrowRight") candidate = width + 16;
+      else if (event.key === "Home") candidate = minimum;
+      else if (event.key === "End") candidate = viewportMaximum();
+      else return;
+      event.preventDefault();
+      width = applyWidth(candidate);
+      persist(width);
+    });
+    handle.addEventListener("dblclick", () => {
+      width = applyWidth(initial);
+      persist(width);
+    });
+    win.addEventListener("blur", finishPointerResize);
+    win.addEventListener("resize", () => {
+      width = applyWidth(width);
+    });
+    handle.dataset["resizeInitialized"] = "true";
+    nav.dataset["resizeReady"] = "";
+  }
+  if (typeof document !== "undefined" && typeof window !== "undefined") {
+    initializeNavigationResize(document, window);
+  }
+})();

package/dist/browser/navigation.js

@@ -0,0 +1,35 @@
+// src/client/navigation.ts
+function isEligibleBrowseLink(candidate) {
+  if (!candidate.sameOrigin) return false;
+  if (candidate.download || candidate.modified || candidate.samePageHash) {
+    return false;
+  }
+  if (candidate.target !== "" && candidate.target !== "_self") return false;
+  return candidate.pathname === "/" || candidate.pathname.startsWith("/view/") || candidate.pathname.startsWith("/id/");
+}
+function isSameBrowseDocument(current, next) {
+  return current.origin === next.origin && current.pathname === next.pathname && current.search === next.search;
+}
+var NavigationSequencer = class {
+  #current;
+  /** Abort the previous request and open a new latest-wins slot. */
+  begin() {
+    this.cancel();
+    const controller = new AbortController();
+    this.#current = controller;
+    return {
+      isCurrent: () => this.#current === controller,
+      signal: controller.signal
+    };
+  }
+  /** Invalidate outstanding work when history retains the current document. */
+  cancel() {
+    this.#current?.abort();
+    this.#current = void 0;
+  }
+};
+export {
+  NavigationSequencer,
+  isEligibleBrowseLink,
+  isSameBrowseDocument
+};

package/dist/browser/preview_fragment.js

@@ -0,0 +1,24 @@
+// src/client/preview_fragment.ts
+import { isLogicalFragment } from "../navigation/logical.js";
+function applyPreviewFragmentQuery(doc, search) {
+  const values = new URLSearchParams(search).getAll("fragment");
+  const fragment = values.length === 1 ? values[0] : void 0;
+  if (!fragment || !isLogicalFragment(fragment)) return false;
+  for (const frame of doc.querySelectorAll(
+    "iframe[data-mokly-fragment-frame]"
+  )) {
+    for (const name of ["src", "data-fragment-light", "data-fragment-dark"]) {
+      const source = frame.getAttribute(name);
+      if (source !== null) frame.setAttribute(name, withHash(source, fragment));
+    }
+  }
+  return true;
+}
+function withHash(source, fragment) {
+  const hash = source.indexOf("#");
+  const base = hash < 0 ? source : source.slice(0, hash);
+  return `${base}#${encodeURIComponent(fragment)}`;
+}
+export {
+  applyPreviewFragmentQuery
+};

package/dist/browser/prop_display.js

@@ -0,0 +1,12 @@
+// src/client/prop_display.ts
+function propText(value) {
+  if (value === null) return "null";
+  if (typeof value === "number")
+    return Object.is(value, -0) ? "-0" : String(value);
+  if (typeof value !== "object") return JSON.stringify(value);
+  if (Array.isArray(value)) return `[${value.map(propText).join(", ")}]`;
+  return `{${Object.entries(value).map(([key, item]) => `${JSON.stringify(key)}: ${propText(item)}`).join(", ")}}`;
+}
+export {
+  propText
+};

package/dist/browser/search_query.js

@@ -0,0 +1,45 @@
+// src/client/search_query.ts
+var TAG_PREFIX = "tag:";
+function parseSearchQuery(raw) {
+  const freeTerms = [];
+  const tags = [];
+  for (const term of searchTerms(raw)) {
+    const tag = tagTermValue(term);
+    if (tag === void 0) freeTerms.push(term);
+    else tags.push(tag);
+  }
+  return { freeText: freeTerms.join(" "), tags };
+}
+function rowMatchesQuery(query, row) {
+  const matchesTags = query.tags.every(
+    (tag) => row.tags.some((rowTag) => rowTag.toLowerCase() === tag)
+  );
+  if (!matchesTags) return false;
+  const freeText = query.freeText.toLowerCase();
+  return freeText === "" || (row.id ?? "").toLowerCase().includes(freeText) || row.text.toLowerCase().includes(freeText) || row.route.toLowerCase().includes(freeText);
+}
+function queryConstrains(query) {
+  return query.freeText !== "" || query.tags.length > 0;
+}
+function setTagTerm(raw, tag) {
+  const term = `${TAG_PREFIX}${tag.toLowerCase()}`;
+  return `${parseSearchQuery(raw).freeText} ${term}`.trim();
+}
+function clearTagTerm(raw, tag) {
+  const cleared = tag.toLowerCase();
+  return searchTerms(raw).filter((term) => tagTermValue(term) !== cleared).join(" ");
+}
+function searchTerms(raw) {
+  return raw.split(/\s+/).filter((term) => term !== "");
+}
+function tagTermValue(term) {
+  const isTagTerm = term.length > TAG_PREFIX.length && term.slice(0, TAG_PREFIX.length).toLowerCase() === TAG_PREFIX;
+  return isTagTerm ? term.slice(TAG_PREFIX.length).toLowerCase() : void 0;
+}
+export {
+  clearTagTerm,
+  parseSearchQuery,
+  queryConstrains,
+  rowMatchesQuery,
+  setTagTerm
+};

package/dist/browser/static_delivery.js

@@ -0,0 +1,64 @@
+// src/client/static_delivery.ts
+import {
+  parseStaticDelivery,
+  resolveDeliveryHref,
+  validFragmentQuery
+} from "../navigation/delivery.js";
+var STATIC_ATTRIBUTE = "data-mokly-static";
+var DELIVERY_ATTRIBUTE = "data-mokly-delivery";
+function readStaticDelivery(doc) {
+  const mode = doc.documentElement.getAttribute(STATIC_ATTRIBUTE);
+  const raw = doc.documentElement.getAttribute(DELIVERY_ATTRIBUTE);
+  if (mode === null && raw === null) return void 0;
+  if (mode === "" && raw !== null) {
+    try {
+      const value = parseStaticDelivery(JSON.parse(raw));
+      if (value) return value;
+    } catch {
+    }
+  }
+  throw new Error(
+    "The exported catalogue information is unavailable. Reload the page."
+  );
+}
+function normalizeStaticAlias(doc, win) {
+  try {
+    const delivery = readStaticDelivery(doc);
+    if (delivery && win.location.pathname.startsWith("/id/"))
+      win.history.replaceState(
+        win.history.state,
+        "",
+        `${delivery.canonicalPath}${validFragmentQuery(win.location.search)}`
+      );
+  } catch {
+  }
+}
+function documentFrameHref(doc, href) {
+  try {
+    return resolveDeliveryHref(href, readStaticDelivery(doc));
+  } catch {
+    return void 0;
+  }
+}
+function adoptStaticDelivery(doc, next) {
+  try {
+    const previous = readStaticDelivery(doc);
+    const delivery = readStaticDelivery(next);
+    if (!previous && !delivery) return true;
+    if (!previous || !delivery || previous.deploymentId !== delivery.deploymentId || previous.comparisonUrl !== delivery.comparisonUrl)
+      return false;
+    doc.documentElement.setAttribute(
+      DELIVERY_ATTRIBUTE,
+      JSON.stringify(delivery)
+    );
+    return true;
+  } catch {
+    return false;
+  }
+}
+export {
+  adoptStaticDelivery,
+  documentFrameHref,
+  normalizeStaticAlias,
+  readStaticDelivery
+};

package/dist/browser/tag_filter.js

@@ -0,0 +1,105 @@
+// src/client/tag_filter.ts
+import { clearTagTerm, parseSearchQuery, setTagTerm } from "./search_query.js";
+var CHIP = "[data-mokly-tag]";
+var SEARCH = "[data-mokly-search]";
+var TOGGLE = "[data-mokly-tag-toggle]";
+function syncTagChips(doc) {
+  const query = parseSearchQuery(searchField(doc)?.value ?? "");
+  for (const chip of doc.querySelectorAll(CHIP)) {
+    const selected = query.tags.includes(chipTag(chip));
+    chip.classList.toggle("active", selected);
+    chip.setAttribute("aria-pressed", selected ? "true" : "false");
+  }
+}
+function handleTagControlClick(doc, target) {
+  const picker = tagPicker(doc);
+  if (target.closest(TOGGLE)) {
+    if (!picker) return true;
+    if (picker.panel.hidden) openPicker(doc, picker);
+    else closePicker(doc, picker, true);
+    return true;
+  }
+  const inPicker = picker !== void 0 && picker.panel.contains(target);
+  if (picker && !inPicker) closePicker(doc, picker, false);
+  const chip = target.closest(CHIP);
+  if (!chip) return false;
+  selectChipTag(doc, chip);
+  if (picker && inPicker) closePicker(doc, picker, true);
+  return true;
+}
+function handleTagPickerKeydown(doc, key, target) {
+  const picker = tagPicker(doc);
+  if (!picker || picker.panel.hidden) return false;
+  if (key === "Escape") {
+    closePicker(doc, picker, true);
+    return true;
+  }
+  const next = movedChip(picker.chips, key, target?.closest(CHIP));
+  if (!next) return false;
+  focusChip(picker, next);
+  return true;
+}
+function openPicker(doc, picker) {
+  setPanelOpen(picker, true);
+  const query = parseSearchQuery(searchField(doc)?.value ?? "");
+  const selected = picker.chips.find(
+    (chip) => query.tags.includes(chipTag(chip))
+  );
+  focusChip(picker, selected ?? picker.chips[0]);
+}
+function closePicker(doc, picker, restoreFocus) {
+  if (picker.panel.hidden) return;
+  const held = picker.panel.contains(doc.activeElement);
+  setPanelOpen(picker, false);
+  if (restoreFocus || held) picker.toggle.focus();
+}
+function setPanelOpen(picker, open) {
+  picker.panel.hidden = !open;
+  picker.toggle.setAttribute("aria-expanded", open ? "true" : "false");
+}
+function focusChip(picker, chip) {
+  if (!chip) return;
+  for (const other of picker.chips)
+    other.setAttribute("tabindex", other === chip ? "0" : "-1");
+  chip.focus();
+}
+function movedChip(chips, key, from) {
+  const index = from ? chips.indexOf(from) : -1;
+  const last = chips.length - 1;
+  if (index < 0) return void 0;
+  if (key === "ArrowLeft") return chips[index === 0 ? last : index - 1];
+  if (key === "ArrowRight") return chips[index === last ? 0 : index + 1];
+  if (key === "Home") return chips[0];
+  if (key === "End") return chips[last];
+  return void 0;
+}
+function tagPicker(doc) {
+  const toggle = doc.querySelector(TOGGLE);
+  if (!toggle) return void 0;
+  const panel = doc.getElementById(toggle.getAttribute("aria-controls") ?? "");
+  if (!panel) return void 0;
+  return {
+    chips: [...panel.querySelectorAll(CHIP)],
+    panel,
+    toggle
+  };
+}
+function selectChipTag(doc, chip) {
+  const tag = chipTag(chip);
+  const search = searchField(doc);
+  if (tag === "" || !search) return;
+  const selected = parseSearchQuery(search.value).tags.includes(tag);
+  search.value = selected ? clearTagTerm(search.value, tag) : setTagTerm(search.value, tag);
+  search.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function chipTag(chip) {
+  return (chip.getAttribute("data-mokly-tag") ?? "").toLowerCase();
+}
+function searchField(doc) {
+  return doc.querySelector(SEARCH);
+}
+export {
+  handleTagControlClick,
+  handleTagPickerKeydown,
+  syncTagChips
+};

package/dist/browser/workspace.js

@@ -0,0 +1,275 @@
+// src/client/workspace.ts
+import { installWorkspaceEvents } from "./workspace_events.js";
+import { workspaceLoader } from "./workspace_loading.js";
+import { collapseFrame, expandedFrame } from "./browse_frames.js";
+import { ComponentControls } from "./component_controls.js";
+import {
+  currentColorScheme,
+  currentViewport,
+  setColorScheme,
+  setViewport
+} from "./browse_state.js";
+import { authenticateRanges, rangeBounds } from "./component_geometry.js";
+import { installComponentHighlight } from "./component_highlight.js";
+import {
+  element,
+  renderInstances,
+  renderProps,
+  renderUsage
+} from "./inspector_panels.js";
+import { installInspectorTabs } from "./inspector_tabs.js";
+import { renderWorkspaceEvidence } from "./workspace_evidence.js";
+import { applyVariant, selectedVariant } from "./workspace_variants.js";
+import {
+  mergeWorkspaceEvidence,
+  updateWorkspaceEvidence
+} from "./workspace_updates.js";
+import {
+  workspaceViews,
+  workspaceFrames,
+  highlightUnavailable,
+  renderViewContexts,
+  revealWorkspaceInstance
+} from "./workspace_preview.js";
+function installWorkspace(doc, win, updateDiffs, onHistoryChange) {
+  const root = doc.querySelector("[data-workspace]");
+  const json = root?.querySelector("[data-workspace-data]")?.textContent;
+  if (!root || !json) return () => {
+  };
+  const data = JSON.parse(json);
+  const controller = new AbortController();
+  const { signal } = controller;
+  const query = new URLSearchParams(win.location.search);
+  let variant = selectedVariant(data, win.location.search);
+  root.addEventListener(
+    "mokly:workspace-evidence",
+    (event) => {
+      mergeWorkspaceEvidence(
+        data,
+        event.detail
+      );
+      variant = updateWorkspaceEvidence(root, data, win.location.search);
+    },
+    { signal }
+  );
+  let activeViewport = query.get("viewport") === "mobile" ? "mobile" : "desktop";
+  let selected = query.get("instance") ?? void 0;
+  const expanded = /* @__PURE__ */ new Set();
+  let highlight = false;
+  let stopHighlight;
+  const toggle = root.querySelector(
+    "[data-workspace-highlight]"
+  );
+  const viewportControl = root.querySelector(
+    "[data-workspace-viewport]"
+  );
+  const schemeControl = root.querySelector(
+    "[data-workspace-scheme]"
+  );
+  const tabs = installInspectorTabs(root, signal);
+  const open = tabs.open;
+  const panel = (name) => root.querySelector(`[data-inspector-panel="${name}"]`);
+  const comparison = () => (root.querySelector('[data-diff-mode][aria-pressed="true"]')?.getAttribute("data-diff-mode") ?? "current") !== "current";
+  const controls = data.entry.kind === "component" ? new ComponentControls(root, data, signal, () => refresh()) : void 0;
+  const savedViews = () => workspaceViews(doc, data, variant.variant?.value.id);
+  const currentViews = () => controls?.views(savedViews()) ?? savedViews();
+  const current = () => currentViews().find((view) => view.viewport === activeViewport) ?? currentViews()[0];
+  const currentInstance = () => current()?.usage?.instances.find((item) => item.key === selected);
+  const loadViews = workspaceLoader(data, signal, () => {
+    refresh();
+    if (selected && currentInstance()) open("props", false);
+  });
+  const select = (key, viewport = activeViewport) => {
+    activeViewport = viewport;
+    if (!current()?.usage?.instances.some((item) => item.key === key)) return;
+    selected = key;
+    collapseFrame(doc, expandedFrame(doc));
+    if (!toggle.disabled) highlight = true;
+    open("props");
+    root.querySelector('[data-inspector-tab="props"]')?.focus({ preventScroll: true });
+    refresh();
+    if (highlight)
+      revealWorkspaceInstance(root, activeViewport, current(), key);
+  };
+  const refresh = () => {
+    stopHighlight?.();
+    stopHighlight = void 0;
+    controls?.sync(variant.variant, savedViews(), comparison());
+    const views = currentViews();
+    if (!comparison()) loadViews(savedViews());
+    const view = current();
+    activeViewport = view?.viewport ?? activeViewport;
+    if (current()?.usage && !currentInstance()) selected = void 0;
+    const selection = {
+      ...view?.usage ? { usage: view.usage } : {},
+      ...currentInstance() ? { instance: currentInstance() } : {},
+      ...variant.variant ? {
+        props: controls?.props() ?? variant.variant.value.props,
+        slots: variant.variant.value.suppliedSlots
+      } : {}
+    };
+    const components = panel("components");
+    if (components) {
+      renderInstances(
+        components,
+        data,
+        selection,
+        (key) => select(key),
+        expanded,
+        (key) => {
+          selected = key;
+          if (!toggle.disabled) highlight = true;
+          refresh();
+        }
+      );
+      renderViewContexts(components, views, activeViewport, (viewport) => {
+        activeViewport = viewport;
+        refresh();
+      });
+    }
+    if (controls && !selection.instance) controls.mount(panel("props"));
+    else {
+      renderProps(panel("props"), data, selection);
+      if (controls) {
+        const edit = element(doc, "button", "Edit component props");
+        edit.type = "button";
+        edit.className = "mbk-chip";
+        edit.addEventListener("click", () => {
+          selected = void 0;
+          refresh();
+        });
+        panel("props").append(edit);
+      }
+    }
+    renderWorkspaceEvidence(
+      root.querySelector("[data-workspace-evidence]"),
+      data,
+      variant.variant?.value.id
+    );
+    const frames = workspaceFrames(root, views);
+    const activeFrame = frames.find(
+      (frame) => frame.usage.viewport === activeViewport
+    );
+    if (selected && activeFrame) {
+      const ranges = authenticateRanges(
+        activeFrame.frame,
+        activeFrame.path,
+        activeFrame.usage
+      );
+      if (!rangeBounds(activeFrame.frame, ranges, /* @__PURE__ */ new Set([selected])).length)
+        panel("props").append(
+          element(
+            doc,
+            "p",
+            "This instance has no visible region in this view."
+          )
+        );
+    }
+    const reason = highlightUnavailable(
+      root,
+      views,
+      frames,
+      Boolean(variant.error || data.removed || variant.variant?.removed)
+    );
+    toggle.disabled = reason !== void 0;
+    toggle.title = reason ?? "Highlight components";
+    toggle.setAttribute(
+      "aria-description",
+      reason ?? "Inspect component regions and their supplied props."
+    );
+    if (reason && reason !== "Waiting for the component preview.")
+      highlight = false;
+    toggle.setAttribute("aria-pressed", String(highlight));
+    if (highlight && !reason)
+      stopHighlight = installComponentHighlight(
+        root,
+        frames,
+        selected,
+        (key) => {
+          const instance = views.flatMap((value) => value.usage?.instances ?? []).find((item) => item.key === key);
+          return `${data.components.find((item) => item.id === instance?.componentId)?.title ?? "Component"} \xB7 ${instance?.id ?? ""}`;
+        },
+        select,
+        () => {
+          highlight = false;
+          refresh();
+          toggle.focus();
+        }
+      );
+    viewportControl.value = currentViewport(doc);
+    schemeControl?.setAttribute(
+      "aria-pressed",
+      String(currentColorScheme(doc) === "dark")
+    );
+  };
+  const activateVariant = () => {
+    applyVariant(root, data, variant.variant, variant.error);
+    refresh();
+    updateDiffs();
+  };
+  if (["mobile", "desktop", "both"].includes(query.get("viewport") ?? ""))
+    setViewport(doc, query.get("viewport"));
+  if (query.get("scheme") === "light" || query.get("scheme") === "dark")
+    setColorScheme(doc, query.get("scheme"));
+  applyVariant(root, data, variant.variant, variant.error);
+  renderUsage(panel("usage"), data);
+  installWorkspaceEvents(root, win, signal, {
+    refresh,
+    highlight() {
+      highlight = !highlight;
+      if (!highlight) selected = void 0;
+      refresh();
+    },
+    scheme() {
+      setColorScheme(
+        doc,
+        currentColorScheme(doc) === "dark" ? "light" : "dark"
+      );
+      refresh();
+      updateDiffs();
+    },
+    viewport() {
+      setViewport(doc, viewportControl.value);
+      refresh();
+      updateDiffs();
+    },
+    variant(value) {
+      const url = new URL(win.location.href);
+      url.searchParams.set("variant", value);
+      url.searchParams.delete("instance");
+      win.history.pushState({}, "", url);
+      variant = selectedVariant(data, url.search);
+      selected = void 0;
+      expanded.clear();
+      activateVariant();
+      onHistoryChange();
+    },
+    escape(event) {
+      if (highlight) {
+        highlight = false;
+        refresh();
+        toggle.focus();
+        event.preventDefault();
+      } else if (tabs.active()) tabs.close();
+    }
+  });
+  doc.addEventListener(
+    "mokly:comparison",
+    () => {
+      if (comparison()) highlight = false;
+      refresh();
+    },
+    { signal }
+  );
+  signal.addEventListener("abort", () => stopHighlight?.(), { once: true });
+  refresh();
+  if (currentInstance()) open("props");
+  else if (tabs.preferredOpen ?? data.entry.kind === "component")
+    open("details", false);
+  if (query.get("comparison") === "side" && variant.comparisonEligible)
+    root.querySelector('[data-diff-mode="side"]')?.click();
+  return () => controller.abort();
+}
+export {
+  installWorkspace
+};