harness-mix 0.1.0

package/src/native-ui/renderer-extension/src/settings/shell.ts

@@ -0,0 +1,329 @@
+import settingsCss from "./shell.css";
+import accountsCss from "./accounts.css";
+import {
+  RendererSettingsNavigationState,
+  RendererSettingsPageScope,
+  createRendererSettingsPageRegistry,
+  type RendererSettingsPageDefinition,
+  type RendererSettingsPageRegistry,
+} from "./core.js";
+import { createRendererSettingsBrandIcon, createRendererSettingsIcon } from "./icons.js";
+import {
+  DEFAULT_RENDERER_SETTINGS_MESSAGES,
+  type RendererSettingsMessages,
+} from "./localization.js";
+import { CODEXHOST_GITHUB_REPOSITORY_URL, createDefaultRendererSettingsRegistry } from "./pages.js";
+
+export const SETTINGS_SHELL_ATTRIBUTE = "data-codexhost-settings-shell";
+export const RENDERER_SETTINGS_COLOR_SCHEME = "inherit";
+
+export interface RendererSettingsShell {
+  readonly root: HTMLElement;
+  readonly dialog: HTMLDialogElement;
+  readonly registry: RendererSettingsPageRegistry;
+  readonly supported: boolean;
+  readonly activePageId: string;
+  readonly open: boolean;
+  openSettings(opener?: HTMLElement, pageId?: string): boolean;
+  close(): void;
+  dispose(): void;
+}
+
+declare global {
+  interface Window {
+    __codexhostSettingsShellV1?: RendererSettingsShell;
+  }
+}
+
+export function isRendererSettingsDialogSupported(
+  dialog: Pick<HTMLDialogElement, "showModal" | "close">,
+): boolean {
+  return typeof dialog.showModal === "function" && typeof dialog.close === "function";
+}
+
+function setActiveNavigation(
+  buttons: ReadonlyMap<string, HTMLButtonElement>,
+  activePageId: string,
+): void {
+  for (const [pageId, button] of buttons) {
+    if (pageId === activePageId) button.setAttribute("aria-current", "page");
+    else button.removeAttribute("aria-current");
+  }
+}
+
+export function mountRendererSettingsShell(
+  registry?: RendererSettingsPageRegistry,
+  ownerDocument: Document = document,
+  messages: RendererSettingsMessages = DEFAULT_RENDERER_SETTINGS_MESSAGES,
+): RendererSettingsShell {
+  const resolvedRegistry = registry ?? createDefaultRendererSettingsRegistry(messages);
+  if (!ownerDocument.body) throw new Error("Renderer document body is unavailable");
+  if (ownerDocument.querySelector(`[${SETTINGS_SHELL_ATTRIBUTE}]`)) {
+    throw new Error("A codexhost settings shell is already mounted");
+  }
+
+  const root = ownerDocument.createElement("div");
+  root.setAttribute(SETTINGS_SHELL_ATTRIBUTE, "v1");
+  root.lang = messages.locale;
+  root.style.colorScheme = RENDERER_SETTINGS_COLOR_SCHEME;
+  const shadow = root.attachShadow({ mode: "open" });
+  const style = ownerDocument.createElement("style");
+  style.textContent = `${settingsCss}\n${accountsCss}`;
+
+  const dialog = ownerDocument.createElement("dialog");
+  dialog.className = "codexhost-settings-dialog";
+  const frame = ownerDocument.createElement("div");
+  frame.className = "settings-frame";
+
+  const header = ownerDocument.createElement("header");
+  header.className = "settings-header";
+  const brand = ownerDocument.createElement("div");
+  brand.className = "settings-brand";
+  const brandMark = ownerDocument.createElement("span");
+  brandMark.className = "settings-brand__mark";
+  brandMark.append(createRendererSettingsBrandIcon(32, ownerDocument));
+  const brandCopy = ownerDocument.createElement("span");
+  brandCopy.className = "settings-brand__copy";
+  const brandName = ownerDocument.createElement("span");
+  brandName.className = "settings-brand__name";
+  brandName.textContent = "Codex Host";
+  const brandTitle = ownerDocument.createElement("span");
+  brandTitle.className = "settings-brand__title";
+  brandTitle.id = "codexhost-settings-dialog-title";
+  brandTitle.textContent = messages.title;
+  brandCopy.append(brandName, brandTitle);
+  brand.append(brandMark, brandCopy);
+
+  const headerActions = ownerDocument.createElement("div");
+  headerActions.className = "settings-header-actions";
+  const closeButton = ownerDocument.createElement("button");
+  closeButton.type = "button";
+  closeButton.className = "settings-icon-button";
+  closeButton.setAttribute("aria-label", messages.close);
+  closeButton.title = messages.close;
+  closeButton.append(createRendererSettingsIcon("close", 18));
+  headerActions.append(closeButton);
+  header.append(brand, headerActions);
+
+  const layout = ownerDocument.createElement("div");
+  layout.className = "settings-layout";
+  const sidebar = ownerDocument.createElement("aside");
+  sidebar.className = "settings-sidebar";
+
+  const navigation = ownerDocument.createElement("nav");
+  navigation.className = "settings-nav";
+  navigation.setAttribute("aria-label", messages.sectionsLabel);
+  const page = ownerDocument.createElement("main");
+  page.className = "settings-page";
+  const pageContent = ownerDocument.createElement("div");
+  pageContent.className = "settings-page__content";
+  page.append(pageContent);
+  sidebar.append(navigation);
+  layout.append(sidebar, page);
+  frame.append(header, layout);
+  dialog.append(frame);
+  dialog.setAttribute("aria-labelledby", brandTitle.id);
+  shadow.append(style, dialog);
+  ownerDocument.body.append(root);
+
+  const navigationState = new RendererSettingsNavigationState(resolvedRegistry);
+  const navigationButtons = new Map<string, HTMLButtonElement>();
+  let activeScope: RendererSettingsPageScope | null = null;
+  let activeCleanup: (() => void) | null = null;
+  let opener: HTMLElement | null = null;
+  let lifecycleGeneration = 0;
+  let disposed = false;
+
+  const disposeActivePage = (): void => {
+    activeScope?.dispose();
+    activeScope = null;
+    const cleanup = activeCleanup;
+    activeCleanup = null;
+    try {
+      cleanup?.();
+    } catch {
+      // A contributed page cannot block shell navigation or disposal.
+    }
+  };
+
+  const renderMountFailure = (): void => {
+    pageContent.replaceChildren();
+    const error = ownerDocument.createElement("div");
+    error.className = "settings-page-error";
+    error.textContent = messages.pageUnavailable;
+    pageContent.append(error);
+  };
+
+  const activatePage = (pageId: string): void => {
+    const definition = resolvedRegistry.getPage(pageId);
+    if (!definition) throw new Error(`Unknown settings page: ${pageId}`);
+    navigationState.select(pageId);
+    disposeActivePage();
+    setActiveNavigation(navigationButtons, pageId);
+    pageContent.replaceChildren();
+    const scope = new RendererSettingsPageScope();
+    activeScope = scope;
+    try {
+      activeCleanup =
+        definition.mount({
+          content: pageContent,
+          signal: scope.signal,
+          runLatest: (operation, handlers) => scope.runLatest(operation, handlers),
+        }) ?? null;
+    } catch {
+      scope.dispose();
+      activeScope = null;
+      renderMountFailure();
+    }
+  };
+
+  const appendNavigationSection = (label: string): void => {
+    const section = ownerDocument.createElement("div");
+    section.className = "settings-nav-section-label";
+    section.textContent = label;
+    navigation.append(section);
+  };
+  let otherSectionAdded = false;
+  appendNavigationSection(messages.generalSection);
+  for (const definition of resolvedRegistry.pages) {
+    if (definition.id === "about" && !otherSectionAdded) {
+      appendNavigationSection(messages.otherSection);
+      otherSectionAdded = true;
+    }
+    const button = ownerDocument.createElement("button");
+    button.type = "button";
+    button.className = "settings-nav-button";
+    button.dataset.pageId = definition.id;
+    button.append(createRendererSettingsIcon(definition.icon, 17));
+    const label = ownerDocument.createElement("span");
+    label.textContent = definition.label;
+    button.append(label);
+    navigationButtons.set(definition.id, button);
+    navigation.append(button);
+  }
+  const starLink = ownerDocument.createElement("a");
+  starLink.className = "settings-nav-button settings-nav-star-link";
+  starLink.href = CODEXHOST_GITHUB_REPOSITORY_URL;
+  starLink.target = "_blank";
+  starLink.rel = "noopener noreferrer";
+  starLink.setAttribute("aria-label", messages.starOnGitHub);
+  starLink.title = messages.starOnGitHub;
+  starLink.append(createRendererSettingsIcon("star", 17));
+  const starLabel = ownerDocument.createElement("span");
+  starLabel.textContent = messages.starOnGitHub;
+  starLink.append(starLabel);
+  navigation.append(starLink);
+  const supported = isRendererSettingsDialogSupported(dialog);
+  const focusActiveNavigation = (): void => {
+    navigationButtons
+      .get(navigationState.activePageId)
+      ?.focus({ preventScroll: true, focusVisible: false });
+  };
+  const finishClose = (): void => {
+    disposeActivePage();
+    navigationState.reset();
+    const focusTarget = opener;
+    opener = null;
+    const closeGeneration = ++lifecycleGeneration;
+    const restoreFocus = (): void => {
+      if (
+        !disposed &&
+        closeGeneration === lifecycleGeneration &&
+        !dialog.open &&
+        focusTarget?.isConnected
+      ) {
+        focusTarget.focus();
+      }
+    };
+    ownerDocument.defaultView?.setTimeout(restoreFocus, 0);
+  };
+  const onNavigationClick = (event: MouseEvent): void => {
+    const target =
+      event.target instanceof Element
+        ? event.target.closest<HTMLButtonElement>("button[data-page-id]")
+        : null;
+    const pageId = target?.dataset.pageId;
+    if (!pageId || pageId === navigationState.activePageId) return;
+    activatePage(pageId);
+    target.focus();
+  };
+  const onCloseClick = (): void => api.close();
+  const onDialogClick = (event: MouseEvent): void => {
+    if (event.target === dialog) api.close();
+  };
+  const onDialogClose = (): void => finishClose();
+  navigation.addEventListener("click", onNavigationClick);
+  closeButton.addEventListener("click", onCloseClick);
+  dialog.addEventListener("click", onDialogClick);
+  dialog.addEventListener("close", onDialogClose);
+
+  const api: RendererSettingsShell = {
+    root,
+    dialog,
+    registry: resolvedRegistry,
+    supported,
+    get activePageId() {
+      return navigationState.activePageId;
+    },
+    get open() {
+      return dialog.open;
+    },
+    openSettings(nextOpener, pageId = resolvedRegistry.defaultPageId) {
+      if (disposed || !supported || !resolvedRegistry.getPage(pageId)) return false;
+      lifecycleGeneration += 1;
+      opener = nextOpener?.isConnected ? nextOpener : null;
+      activatePage(pageId);
+      try {
+        if (!dialog.open) dialog.showModal();
+      } catch {
+        disposeActivePage();
+        opener = null;
+        return false;
+      }
+      queueMicrotask(focusActiveNavigation);
+      return true;
+    },
+    close() {
+      if (!disposed && dialog.open) dialog.close();
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      opener = null;
+      navigation.removeEventListener("click", onNavigationClick);
+      closeButton.removeEventListener("click", onCloseClick);
+      dialog.removeEventListener("click", onDialogClick);
+      dialog.removeEventListener("close", onDialogClose);
+      if (dialog.open) dialog.close();
+      disposeActivePage();
+      root.remove();
+    },
+  };
+  return api;
+}
+
+export function installRendererSettingsShell(
+  definitions?: readonly RendererSettingsPageDefinition[],
+  messages: RendererSettingsMessages = DEFAULT_RENDERER_SETTINGS_MESSAGES,
+  ownerDocument: Document = document,
+): RendererSettingsShell {
+  const registry = definitions
+    ? createRendererSettingsPageRegistry(definitions)
+    : createDefaultRendererSettingsRegistry(messages);
+  const ownerWindow = ownerDocument.defaultView ?? (typeof window !== "undefined" ? window : undefined);
+  if (ownerWindow) {
+    ownerWindow.__codexhostSettingsShellV1?.dispose();
+  }
+  const shell = mountRendererSettingsShell(registry, ownerDocument, messages);
+  if (ownerWindow) {
+    ownerWindow.__codexhostSettingsShellV1 = shell;
+  }
+  const dispose = shell.dispose.bind(shell);
+  shell.dispose = () => {
+    dispose();
+    if (ownerWindow && ownerWindow.__codexhostSettingsShellV1 === shell) {
+      delete ownerWindow.__codexhostSettingsShellV1;
+    }
+  };
+  return shell;
+}

package/src/native-ui/renderer-extension/src/settings/trigger.ts

@@ -0,0 +1,323 @@
+import { createRendererSettingsBrandIcon, createRendererSettingsIcon } from "./icons.js";
+import {
+  DEFAULT_RENDERER_SETTINGS_MESSAGES,
+  type RendererSettingsMessages,
+} from "./localization.js";
+
+export const SETTINGS_TRIGGER_ATTRIBUTE = "data-codexhost-settings-trigger";
+export const SETTINGS_HEADER_SURFACE_SELECTOR =
+  '[data-testid="app-shell-header-context-menu-surface"]';
+const SETTINGS_APPLICATION_HEADER_SELECTOR = 'header[data-pip-obstacle="app-shell-header"]';
+const SETTINGS_HEADER_SLOT_SELECTOR = ':scope > [data-test-id="header-shell-slot"]';
+
+export interface RendererSettingsTriggerControl {
+  root: HTMLElement;
+  button: HTMLButtonElement;
+  updateButton: HTMLButtonElement;
+  setUpdateAvailable(available: boolean): void;
+  dispose(): void;
+}
+
+export interface RendererSettingsBounds {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+export interface RendererSettingsHeaderSlotCandidate<T> {
+  value: T;
+  bounds: RendererSettingsBounds;
+  visibleButtonCount: number;
+  structuralActionGroup?: boolean;
+}
+
+export interface RendererSettingsHeaderTriggerControl {
+  readonly root: HTMLElement | null;
+  refresh(): boolean;
+  setUpdateAvailable(available: boolean): void;
+  dispose(): void;
+}
+
+interface RendererSettingsHeaderInsertionPoint {
+  parent: HTMLElement;
+  before: ChildNode | null;
+}
+
+export interface RendererSettingsContractInspection {
+  headerCount: number;
+  visibleHeaderCount: number;
+  insertionPointCount: number;
+}
+
+function measuredBounds(element: Element): RendererSettingsBounds {
+  const bounds = element.getBoundingClientRect();
+  return {
+    left: bounds.left,
+    right: bounds.right,
+    top: bounds.top,
+    bottom: bounds.bottom,
+    width: bounds.width,
+    height: bounds.height,
+  };
+}
+
+export function selectRendererSettingsHeaderSlot<T>(
+  header: RendererSettingsBounds,
+  candidates: readonly RendererSettingsHeaderSlotCandidate<T>[],
+): T | null {
+  const midpoint = header.left + header.width / 2;
+  const maximumWidth = Math.min(320, header.width / 2);
+  const eligible = candidates.filter(
+    ({ bounds, visibleButtonCount, structuralActionGroup }) =>
+      (visibleButtonCount > 1 || structuralActionGroup === true) &&
+      bounds.width >= 0 &&
+      bounds.height >= 0 &&
+      bounds.width <= maximumWidth &&
+      bounds.left >= midpoint &&
+      bounds.right <= header.right + 1 &&
+      bounds.top >= header.top - 1 &&
+      bounds.bottom <= header.bottom + 1,
+  );
+  eligible.sort(
+    (left, right) =>
+      Math.abs(header.right - left.bounds.right) - Math.abs(header.right - right.bounds.right) ||
+      right.visibleButtonCount - left.visibleButtonCount ||
+      left.bounds.left - right.bounds.left,
+  );
+  return eligible[0]?.value ?? null;
+}
+
+export function inspectRendererSettingsContract(
+  ownerDocument: Document = document,
+): RendererSettingsContractInspection {
+  const headers = [
+    ...ownerDocument.querySelectorAll<HTMLElement>(SETTINGS_APPLICATION_HEADER_SELECTOR),
+  ];
+  const visibleHeaders = headers.filter((header) => {
+    const bounds = measuredBounds(header);
+    return bounds.width > 0 && bounds.height > 0;
+  });
+  const insertionPointCount = visibleHeaders.filter((header) =>
+    [...header.querySelectorAll<HTMLElement>(SETTINGS_HEADER_SLOT_SELECTOR)].some((slot) => {
+      const bounds = measuredBounds(slot);
+      return bounds.width > 0 && bounds.height > 0;
+    }),
+  ).length;
+  return {
+    headerCount: headers.length,
+    visibleHeaderCount: visibleHeaders.length,
+    insertionPointCount,
+  };
+}
+
+function findRendererSettingsHeaderInsertionPoint(
+  ownerDocument: Document,
+): RendererSettingsHeaderInsertionPoint | null {
+  const header = ownerDocument.querySelector<HTMLElement>(SETTINGS_APPLICATION_HEADER_SELECTOR);
+  if (!header) return null;
+
+  const headerBounds = measuredBounds(header);
+  if (headerBounds.width <= 0 || headerBounds.height <= 0) return null;
+
+  const endSlot = [...header.querySelectorAll<HTMLElement>(SETTINGS_HEADER_SLOT_SELECTOR)]
+    .filter((slot) => {
+      const bounds = measuredBounds(slot);
+      return bounds.width > 0 && bounds.height > 0;
+    })
+    .toSorted((left, right) => measuredBounds(right).left - measuredBounds(left).left)[0];
+  return endSlot ? { parent: header, before: endSlot } : null;
+}
+
+export function mountRendererSettingsTrigger(
+  triggerId: string,
+  available: boolean,
+  onOpen: (opener: HTMLButtonElement, pageId?: "updates") => void,
+  ownerDocument: Document = document,
+  messages: RendererSettingsMessages = DEFAULT_RENDERER_SETTINGS_MESSAGES,
+): RendererSettingsTriggerControl {
+  const root = ownerDocument.createElement("div");
+  root.setAttribute(SETTINGS_TRIGGER_ATTRIBUTE, triggerId);
+  root.style.display = "inline-flex";
+  root.style.alignItems = "center";
+  root.style.justifyContent = "center";
+  root.style.alignSelf = "center";
+  root.style.flex = "0 0 auto";
+  root.style.marginRight = "0";
+  root.style.color = "inherit";
+  root.style.pointerEvents = "auto";
+  root.style.setProperty("-webkit-app-region", "no-drag");
+
+  const button = ownerDocument.createElement("button");
+  button.type = "button";
+  button.disabled = !available;
+  button.setAttribute("aria-label", messages.openSettings);
+  button.setAttribute("aria-haspopup", "dialog");
+  button.title = available ? messages.settingsButtonTitle : messages.settingsUnavailableTitle;
+  button.style.display = "inline-flex";
+  button.style.alignItems = "center";
+  button.style.justifyContent = "center";
+  button.style.height = "28px";
+  button.style.padding = "0 12px";
+  button.style.gap = "6px";
+  button.style.border = "0";
+  button.style.borderRadius = "8px";
+  button.style.background = "transparent";
+  button.style.color = "inherit";
+  button.style.cursor = available ? "pointer" : "not-allowed";
+  button.style.opacity = available ? "1" : "0.5";
+  button.style.outlineOffset = "2px";
+  button.style.setProperty("-webkit-app-region", "no-drag");
+  button.append(createRendererSettingsBrandIcon(24, ownerDocument));
+
+  const brandLabel = ownerDocument.createElement("span");
+  brandLabel.textContent = "CodexHost";
+  brandLabel.style.fontSize = "13px";
+  brandLabel.style.fontWeight = "600";
+  brandLabel.style.lineHeight = "1";
+  brandLabel.style.whiteSpace = "nowrap";
+  button.append(brandLabel);
+
+  const updateButton = ownerDocument.createElement("button");
+  updateButton.type = "button";
+  updateButton.disabled = !available;
+  updateButton.setAttribute("aria-label", messages.updateAvailable);
+  updateButton.setAttribute("aria-haspopup", "dialog");
+  updateButton.title = messages.updateAvailable;
+  updateButton.style.display = "none";
+  updateButton.style.alignItems = "center";
+  updateButton.style.justifyContent = "center";
+  updateButton.style.height = "28px";
+  updateButton.style.padding = "0 10px";
+  updateButton.style.gap = "6px";
+  updateButton.style.border = "1px solid #1d4ed8";
+  updateButton.style.borderRadius = "7px";
+  updateButton.style.background = "#2563eb";
+  updateButton.style.color = "#ffffff";
+  updateButton.style.cursor = available ? "pointer" : "not-allowed";
+  updateButton.style.opacity = available ? "1" : "0.5";
+  updateButton.style.boxShadow = "0 1px 2px rgba(15, 23, 42, 0.18)";
+  updateButton.style.outlineOffset = "2px";
+  updateButton.style.setProperty("-webkit-app-region", "no-drag");
+  updateButton.append(createRendererSettingsIcon("updates", 15));
+
+  const updateLabel = ownerDocument.createElement("span");
+  updateLabel.textContent = messages.pageLabels.updates;
+  updateLabel.style.fontSize = "12px";
+  updateLabel.style.fontWeight = "600";
+  updateLabel.style.lineHeight = "1";
+  updateLabel.style.whiteSpace = "nowrap";
+  updateButton.append(updateLabel);
+
+  const onPointerEnter = (): void => {
+    if (!button.disabled) button.style.background = "rgba(127, 127, 127, 0.16)";
+  };
+  const onPointerLeave = (): void => {
+    button.style.background = "transparent";
+  };
+  const onClick = (event: MouseEvent): void => {
+    event.stopPropagation();
+    if (!button.disabled) onOpen(button);
+  };
+  const onUpdatePointerEnter = (): void => {
+    if (!updateButton.disabled) {
+      updateButton.style.background = "#1d4ed8";
+      updateButton.style.boxShadow = "0 2px 4px rgba(15, 23, 42, 0.22)";
+    }
+  };
+  const onUpdatePointerLeave = (): void => {
+    updateButton.style.background = "#2563eb";
+    updateButton.style.boxShadow = "0 1px 2px rgba(15, 23, 42, 0.18)";
+  };
+  const onUpdateClick = (event: MouseEvent): void => {
+    event.stopPropagation();
+    if (!updateButton.disabled) onOpen(updateButton, "updates");
+  };
+  button.addEventListener("pointerenter", onPointerEnter);
+  button.addEventListener("pointerleave", onPointerLeave);
+  button.addEventListener("click", onClick);
+  updateButton.addEventListener("pointerenter", onUpdatePointerEnter);
+  updateButton.addEventListener("pointerleave", onUpdatePointerLeave);
+  updateButton.addEventListener("click", onUpdateClick);
+  root.append(button, updateButton);
+
+  return {
+    root,
+    button,
+    updateButton,
+    setUpdateAvailable(updateAvailable) {
+      root.toggleAttribute("data-update-available", updateAvailable);
+      updateButton.style.display = updateAvailable ? "inline-flex" : "none";
+    },
+    dispose() {
+      button.removeEventListener("pointerenter", onPointerEnter);
+      button.removeEventListener("pointerleave", onPointerLeave);
+      button.removeEventListener("click", onClick);
+      updateButton.removeEventListener("pointerenter", onUpdatePointerEnter);
+      updateButton.removeEventListener("pointerleave", onUpdatePointerLeave);
+      updateButton.removeEventListener("click", onUpdateClick);
+      root.remove();
+    },
+  };
+}
+
+export function installRendererSettingsHeaderTrigger(options: {
+  available: boolean;
+  onOpen(opener: HTMLButtonElement, pageId?: "updates"): void;
+  messages?: RendererSettingsMessages;
+  ownerDocument?: Document;
+}): RendererSettingsHeaderTriggerControl {
+  const ownerDocument = options.ownerDocument ?? document;
+  let trigger: RendererSettingsTriggerControl | null = null;
+  let updateAvailable = false;
+  let disposed = false;
+
+  const refresh = (): boolean => {
+    if (disposed) return false;
+    const insertionPoint = findRendererSettingsHeaderInsertionPoint(ownerDocument);
+    if (!insertionPoint) {
+      trigger?.root.remove();
+      return false;
+    }
+    if (!trigger) {
+      for (const duplicate of ownerDocument.querySelectorAll(`[${SETTINGS_TRIGGER_ATTRIBUTE}]`)) {
+        duplicate.remove();
+      }
+      trigger = mountRendererSettingsTrigger(
+        "application-header",
+        options.available,
+        options.onOpen,
+        ownerDocument,
+        options.messages,
+      );
+      trigger.setUpdateAvailable(updateAvailable);
+    }
+    if (
+      trigger.root.parentElement !== insertionPoint.parent ||
+      trigger.root.nextSibling !== insertionPoint.before
+    ) {
+      insertionPoint.parent.insertBefore(trigger.root, insertionPoint.before);
+    }
+    return true;
+  };
+
+  refresh();
+  return {
+    get root() {
+      return trigger?.root ?? null;
+    },
+    refresh,
+    setUpdateAvailable(available) {
+      updateAvailable = available;
+      trigger?.setUpdateAvailable(available);
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      trigger?.dispose();
+      trigger = null;
+    },
+  };
+}