@antelopejs/dms 0.9.7 → 0.10.0

package/frontend-vue/layers/dms-ui/app/build/composables/table/useRelationFilterLabels.ts

@@ -0,0 +1,73 @@
+import { onMounted, shallowRef, watch } from "vue";
+import type { DataTypeSelectSource } from "#dms-core/app/composables/data-types/useDataType";
+import { unlabeledRelationIds } from "../data-types/relationValue";
+import {
+  relationRowLabel,
+  relationRowValue,
+  useRelationRows,
+} from "../data-types/relationRows";
+
+/** A relation filter of a table: where its rows are read, and its value. */
+export interface RelationFilterSource extends DataTypeSelectSource {
+  value: unknown;
+}
+
+const labelKey = (searchUrl: string, id: string) => `${searchUrl}\n${id}`;
+
+// The plain ids a filter value holds, each once.
+const NO_LABELS: ReadonlySet<string> = new Set();
+const idsOf = (value: unknown) => unlabeledRelationIds(value, NO_LABELS);
+
+/**
+ * The labels of the ids a table's relation filters hold: a chip names the
+ * related row ("Acme"), not the raw id it filters on ("cust-060"). Each id is
+ * read once from the relation's `select` route, as its picker does; an id the
+ * route does not answer (deleted, out of reach) keeps showing as is.
+ */
+export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
+  const { readRelationRows } = useRelationRows();
+  const labels = shallowRef<Record<string, string>>({});
+  const requested = new Set<string>();
+
+  async function loadLabels(source: RelationFilterSource, ids: string[]) {
+    for (const id of ids) requested.add(labelKey(source.searchUrl, id));
+    const rows = await readRelationRows(source, ids);
+    const found: Record<string, string> = {};
+    for (const row of rows) {
+      const id = relationRowValue(source, row);
+      const label = relationRowLabel(source, row);
+      if (id === undefined || label === undefined) continue;
+      found[labelKey(source.searchUrl, String(id))] = String(label);
+    }
+    if (Object.keys(found).length) {
+      labels.value = { ...labels.value, ...found };
+    }
+  }
+
+  const pending = () =>
+    sources().flatMap((source) => {
+      const ids = idsOf(source.value).filter(
+        (id) => !requested.has(labelKey(source.searchUrl, id)),
+      );
+      return ids.length ? [{ source, ids }] : [];
+    });
+
+  // In the browser only: a server render draws the chips with their ids.
+  onMounted(() => {
+    watch(
+      pending,
+      (batches) => {
+        for (const { source, ids } of batches) void loadLabels(source, ids);
+      },
+      { immediate: true },
+    );
+  });
+
+  /** The labels of a relation filter's ids, in order; an unknown id as is. */
+  const labelsOf = (source: RelationFilterSource): string[] =>
+    idsOf(source.value).map(
+      (id) => labels.value[labelKey(source.searchUrl, id)] ?? id,
+    );
+
+  return { labelsOf };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table/useRowScrollAnchor.ts

@@ -0,0 +1,106 @@
+import { watch, type Ref } from "vue";
+
+/** The attribute naming a body row's id, which the anchor finds it by. */
+export const ROW_ID_ATTRIBUTE = "data-row-id";
+
+const SCROLLABLE_OVERFLOW = /(auto|scroll)/;
+
+/** The row the reader has at the top of the view, before an update. */
+interface RowAnchor {
+  id: string;
+  row: Element;
+  scroller: HTMLElement;
+  /** Where the row stood, in viewport pixels. */
+  top: number;
+  /** Its position among the rows. */
+  index: number;
+  previousIds: ReadonlySet<string>;
+}
+
+/** The element the table scrolls in: itself, or its nearest scrolled ancestor. */
+function findScroller(start: HTMLElement): HTMLElement | null {
+  for (
+    let element: HTMLElement | null = start;
+    element;
+    element = element.parentElement
+  ) {
+    if (
+      SCROLLABLE_OVERFLOW.test(getComputedStyle(element).overflowY) &&
+      element.scrollHeight > element.clientHeight
+    )
+      return element;
+  }
+  return null;
+}
+
+function captureAnchor(
+  root: HTMLElement | null,
+  ids: readonly string[],
+): RowAnchor | null {
+  if (!root) return null;
+  const scroller = findScroller(root);
+  // At the top of the list, new rows land in view: what a live list is for.
+  if (!scroller || scroller.scrollTop <= 0) return null;
+  const viewTop = scroller.getBoundingClientRect().top;
+  for (const row of root.querySelectorAll(`tr[${ROW_ID_ATTRIBUTE}]`)) {
+    const top = row.getBoundingClientRect().top;
+    if (top < viewTop) continue;
+    const id = row.getAttribute(ROW_ID_ATTRIBUTE)!;
+    return {
+      id,
+      row,
+      scroller,
+      top,
+      index: ids.indexOf(id),
+      previousIds: new Set(ids),
+    };
+  }
+  return null;
+}
+
+// Rows were only added above the anchor (a live list's new rows): a sort, a
+// filter or another page moves the reader on, and is left alone.
+function isPrepend(anchor: RowAnchor, ids: readonly string[]): boolean {
+  const index = ids.indexOf(anchor.id);
+  if (anchor.index < 0 || index <= anchor.index) return false;
+  const added = ids
+    .slice(0, index)
+    .filter((id) => !anchor.previousIds.has(id)).length;
+  return added === index - anchor.index;
+}
+
+/**
+ * Keeps the rows the reader is looking at where they are when rows are added
+ * above them (a live list's new rows), by scrolling as far as the rows push
+ * them, in the frame they land. The browser's own scroll anchoring does not
+ * hold a table's rows. At the top of the list nothing is held: the new rows
+ * show, as a live list means them to.
+ *
+ * @param root The table, whose body rows carry `ROW_ID_ATTRIBUTE`
+ * @param rowIds The ids of the body rows, in order
+ */
+export function useRowScrollAnchor(
+  root: Readonly<Ref<HTMLElement | null>>,
+  rowIds: () => readonly string[],
+): void {
+  if (typeof window === "undefined") return;
+  let anchor: RowAnchor | null = null;
+  watch(
+    rowIds,
+    (_next, previous) => {
+      anchor = captureAnchor(root.value, previous ?? []);
+    },
+    { flush: "pre" },
+  );
+  watch(
+    rowIds,
+    (next) => {
+      const held = anchor;
+      anchor = null;
+      if (!held || !held.row.isConnected || !isPrepend(held, next)) return;
+      const moved = held.row.getBoundingClientRect().top - held.top;
+      if (moved !== 0) held.scroller.scrollTop += moved;
+    },
+    { flush: "post" },
+  );
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table/useTable.ts

@@ -185,6 +185,15 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     },
   );
 
+  // A display that cannot sort (a hand-ordered table) leaves every header
+  // without its sort button, arrow and menu items.
+  watch(
+    () => props.tableProps.sortingOptions?.enableSorting,
+    (enableSorting) => {
+      table.setOptions((prev) => ({ ...prev, enableSorting }));
+    },
+  );
+
   const labeledColumns: ComputedRef<LabeledColumn<T>[]> = computed(() => {
     return table
       .getAllColumns()

package/frontend-vue/layers/dms-ui/app/build/composables/table/useTableColumns.ts

@@ -471,9 +471,8 @@ export const useTableColumns = <T extends Data>(config: ColumnConfig<T>) => {
 
   const isShowingArchived = () => config.showArchived?.value === true;
 
-  // The backend serializes `isVisible`; `visible` is the former spelling.
   const isCustomActionInline = (action: CustomRowAction): boolean =>
-    action.isVisible === true || action.visible === true;
+    action.isVisible === true;
 
   const { confirmAction } = useActionConfirm();
 

package/frontend-vue/layers/dms-ui/app/build/composables/table/utils/archivedCount.ts

@@ -0,0 +1,31 @@
+type Translate = (
+  key: string,
+  named: Record<string, unknown>,
+  plural: number,
+) => string;
+
+/**
+ * The caption count while a table lists its archived rows. The default
+ * ("Archived: 13", "Archives : 13") agrees with no noun, so it reads right
+ * over invoices as over members; a table view's `archivedCountLabel` names
+ * its rows instead: a `$` key receiving `{ count }` and pluralized on it, or
+ * a text whose `{count}` is replaced.
+ */
+export function formatArchivedCount(
+  translate: Translate,
+  count: number,
+  formattedCount: string,
+  label?: string,
+): string {
+  if (!label) {
+    return translate(
+      "dms.table.archived_count",
+      { count: formattedCount },
+      count,
+    );
+  }
+  if (label.startsWith("$")) {
+    return translate(label.slice(1), { count: formattedCount }, count);
+  }
+  return label.replaceAll("{count}", formattedCount);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table/utils/filterEditorValue.ts

@@ -0,0 +1,38 @@
+import type {
+  DataType,
+  DataTypeFilterEditorValue,
+} from "#dms-core/app/composables/data-types/useDataType";
+
+// A view or tab declares its filter value as text (`TableViewTabFilter.value`),
+// the shape the query sends. The chip's value editor wants the value its
+// column's data type holds there ({@link DataType.filterEditorValue}). The
+// editor reads the converted value; the filter keeps its text until the user
+// edits it, so the query is unchanged.
+
+const LIST_SEPARATOR = ",";
+const BETWEEN_MODE = "is_between";
+
+/** A number type's filter: the number a numeric text names, else the text. */
+export const numberFilterEditorValue: DataTypeFilterEditorValue = (text) => {
+  const parsed = Number(text);
+  return text.trim() !== "" && Number.isFinite(parsed) ? parsed : text;
+};
+
+/** A date's filter: the two days of a range, a single day as written. */
+export const dateFilterEditorValue: DataTypeFilterEditorValue = (text, mode) =>
+  mode === BETWEEN_MODE
+    ? text.split(LIST_SEPARATOR).map((item) => item.trim())
+    : text;
+
+/**
+ * The value a filter's editor reads: a declared text value converted by its
+ * column's data type, any other value as it is.
+ */
+export function filterEditorValue(
+  dataType: Pick<DataType, "filterEditorValue"> | undefined,
+  mode: string,
+  value: unknown,
+): unknown {
+  if (typeof value !== "string" || !dataType?.filterEditorValue) return value;
+  return dataType.filterEditorValue(value, mode);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table/utils/formatFilterValue.ts

@@ -6,6 +6,32 @@ interface FilterColumn {
   type?: DataTypeConfig;
 }
 
+const DAY_MS = 24 * 60 * 60 * 1000;
+// `{{now}}`, `{{now-7d}}`, `{{now+14d}}`: the tokens the server resolves in a
+// filter value (`filter-tokens.ts`), read here with the same rule.
+const NOW_TOKEN = /\{\{\s*now(?:\s*([+-])\s*(\d+)d)?\s*\}\}/g;
+const BETWEEN_MODE = "is_between";
+const BETWEEN_SEPARATOR = ",";
+
+/** A filter value with its `{{now±Nd}}` tokens replaced by that instant. */
+export function resolveNowTokens(value: string, now = Date.now()): string {
+  return value.replace(NOW_TOKEN, (_match, sign?: string, days?: string) => {
+    const offset = sign ? Number(`${sign}${days}`) * DAY_MS : 0;
+    return new Date(now + offset).toISOString();
+  });
+}
+
+/**
+ * The value as the formatters read it: tokens resolved, and an `is_between`
+ * bound pair written as text (`a,b`, the way the query sends it) split.
+ */
+const readableValue = (filter: TableFilter): unknown => {
+  if (typeof filter.value !== "string") return filter.value;
+  const value = resolveNowTokens(filter.value);
+  if (filter.mode !== BETWEEN_MODE) return value;
+  return value.split(BETWEEN_SEPARATOR).map((bound) => bound.trim());
+};
+
 export function formatFilterValue(
   filter: TableFilter,
   columns: FilterColumn[],
@@ -23,9 +49,14 @@ export function formatFilterValue(
   const formatter =
     dataType.formatter[filter.mode] || dataType.formatter.default;
 
+  // A filter's value need not have the column's shape (a tag typed against
+  // a tags column, whose formatter draws a list): a formatter that writes
+  // nothing for it leaves the value as typed.
   try {
-    const result = formatter(filter.value, locale);
-    return typeof result === "string" ? result : String(filter.value);
+    const result = formatter(readableValue(filter), locale);
+    return typeof result === "string" && result !== ""
+      ? result
+      : String(filter.value);
   } catch {
     return String(filter.value);
   }

package/frontend-vue/layers/dms-ui/app/build/composables/table/utils/scrollEdges.ts

@@ -0,0 +1,31 @@
+/** Which sides of a scroll area hide content the reader can scroll to. */
+export interface ScrollEdges {
+  start: boolean;
+  end: boolean;
+}
+
+/** What {@link horizontalScrollEdges} reads off a scroll area. */
+export interface HorizontalScroll {
+  scrollLeft: number;
+  scrollWidth: number;
+  clientWidth: number;
+}
+
+// Sub-pixel widths leave a fraction of a pixel to scroll at either end.
+const EDGE_TOLERANCE_PX = 1;
+
+/**
+ * The sides of a table wider than its card that still hide columns: a phone
+ * shows the first columns, and nothing else would tell that the rest are a
+ * swipe away. The scroll position is read as the reader sees it, so a
+ * right-to-left page (negative `scrollLeft`) reads the same.
+ */
+export function horizontalScrollEdges(area: HorizontalScroll): ScrollEdges {
+  const hidden = area.scrollWidth - area.clientWidth;
+  if (hidden <= EDGE_TOLERANCE_PX) return { start: false, end: false };
+  const scrolled = Math.abs(area.scrollLeft);
+  return {
+    start: scrolled > EDGE_TOLERANCE_PX,
+    end: scrolled < hidden - EDGE_TOLERANCE_PX,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useCardFields.ts

@@ -0,0 +1,33 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import { h, type VNodeChild } from "vue";
+import type { TableViewColumn } from "../../../composables/table-view/types/column";
+import { useColumnValueRenderer } from "../data-types/useColumnValueRenderer";
+
+type Row = Record<string, unknown>;
+
+/**
+ * Draws a row's fields on a card (the cards display, the kanban board) the
+ * way the grid draws its cells: through the column's `display`, else its data
+ * type, handed the row for what a display reads beside the value (a progress
+ * bar's total, a tone, an avatar).
+ */
+export function useCardFields() {
+  const { renderColumnValue } = useColumnValueRenderer();
+
+  const renderField = (column: TableViewColumn, item: Row): VNodeChild => {
+    const rendered = renderColumnValue(column, item, "cell");
+    if (typeof rendered !== "string" && typeof rendered !== "number") {
+      return rendered;
+    }
+    const value = get(item, column.accessorKey);
+    // The fallback of a missing value reads dimmed, as an empty cell does.
+    const isMissing = value === null || value === undefined;
+    return h(
+      "span",
+      { class: isMissing ? "text-dimmed truncate" : "truncate" },
+      String(rendered),
+    );
+  };
+
+  return { renderField };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useMobileDisplay.ts

@@ -0,0 +1,48 @@
+import { onMounted, type Ref } from "vue";
+import type { TableViewViewStateConfig } from "../../../composables/table-view/types";
+
+/** The viewports a table view opens on its `mobileDisplay`: a phone's. */
+export const PHONE_VIEWPORT_QUERY = "(max-width: 767px)";
+
+export interface MobileDisplayOptions {
+  /** The table view's `mobileDisplay`, if any. */
+  mobileDisplay: string | undefined;
+  /**
+   * The display the table counts as its default, starting at its resolved
+   * `defaultDisplay`: the phone's once applied, so it is not saved as the
+   * user's choice, and a view that sets no display opens on it.
+   */
+  defaultDisplay: Ref<string>;
+  /** The ids of the displays the table view offers. */
+  offered: ReadonlySet<string>;
+  /** The display shown. */
+  display: Ref<string>;
+  /**
+   * The view open, if any. One that fixes a display keeps it; one that
+   * leaves the display out (a `defaultView` showing every row) does not.
+   */
+  activeView: Ref<TableViewViewStateConfig | undefined>;
+  /**
+   * The display shown is someone's choice — the user saved one, the default
+   * display is the only way in: a phone keeps it.
+   */
+  isDisplayChosen: () => boolean;
+}
+
+/**
+ * Opens a phone on the table view's `mobileDisplay` once mounted, the
+ * server render having drawn the default display, when nobody chose one.
+ * Called after the table's views, so a view resolved once mounted is open.
+ */
+export function useMobileDisplay(options: MobileDisplayOptions): void {
+  onMounted(() => {
+    const { mobileDisplay, offered } = options;
+    if (!mobileDisplay || !offered.has(mobileDisplay)) return;
+    if (options.isDisplayChosen()) return;
+    const viewDisplay = options.activeView.value?.display;
+    if (viewDisplay && offered.has(viewDisplay)) return;
+    if (!window.matchMedia?.(PHONE_VIEWPORT_QUERY).matches) return;
+    options.defaultDisplay.value = mobileDisplay;
+    options.display.value = mobileDisplay;
+  });
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useScrolledPastTop.ts

@@ -1,20 +1,7 @@
 import { onBeforeUnmount, onMounted, ref, type Ref } from "vue";
+import { scrollParent } from "../../utils/scrollWithin";
 
 const FIRST_ROW_SELECTOR = "tbody tr";
-const SCROLLABLE_OVERFLOW = /(auto|scroll)/;
-
-function scrollParent(element: HTMLElement): HTMLElement | null {
-  for (let node = element.parentElement; node; node = node.parentElement) {
-    const { overflowY } = getComputedStyle(node);
-    if (
-      SCROLLABLE_OVERFLOW.test(overflowY) &&
-      node.scrollHeight > node.clientHeight
-    ) {
-      return node;
-    }
-  }
-  return null;
-}
 
 /**
  * Whether the first row of the table in `element` is out of view above the
@@ -29,6 +16,21 @@ export function isFirstRowScrolledPast(element: HTMLElement): boolean {
   return row.getBoundingClientRect().bottom <= viewTop;
 }
 
+/**
+ * Whether the table in `element` is on screen or above it: its top stands
+ * above the bottom of the area it scrolls in (its scrolling parent, else the
+ * window). Rows added to such a table move rows the user can see, or did.
+ *
+ * @internal
+ */
+export function isTableReached(element: HTMLElement): boolean {
+  const scroller = scrollParent(element);
+  const viewBottom = scroller
+    ? scroller.getBoundingClientRect().bottom
+    : window.innerHeight;
+  return element.getBoundingClientRect().top < viewBottom;
+}
+
 /**
  * Follows whether the user scrolled the table's first row out of view, on
  * any scroll of the page (read once per frame). Inert when `isEnabled` is
@@ -40,13 +42,34 @@ export function useScrolledPastTop(
   element: () => HTMLElement | null,
   isEnabled: boolean,
 ): Ref<boolean> {
-  const isScrolled = ref(false);
-  if (!isEnabled || typeof window === "undefined") return isScrolled;
+  return useScrollMeasure(element, isEnabled, isFirstRowScrolledPast);
+}
+
+/**
+ * Follows whether the table is on screen or scrolled past (`isTableReached`),
+ * like `useScrolledPastTop`.
+ *
+ * @internal
+ */
+export function useTableReached(
+  element: () => HTMLElement | null,
+  isEnabled: boolean,
+): Ref<boolean> {
+  return useScrollMeasure(element, isEnabled, isTableReached);
+}
+
+function useScrollMeasure(
+  element: () => HTMLElement | null,
+  isEnabled: boolean,
+  test: (element: HTMLElement) => boolean,
+): Ref<boolean> {
+  const isMatching = ref(false);
+  if (!isEnabled || typeof window === "undefined") return isMatching;
   let frame: number | null = null;
   const measure = () => {
     frame = null;
     const target = element();
-    isScrolled.value = !!target && isFirstRowScrolledPast(target);
+    isMatching.value = !!target && test(target);
   };
   const onScroll = () => {
     frame ??= requestAnimationFrame(measure);
@@ -62,5 +85,5 @@ export function useScrolledPastTop(
     window.removeEventListener("scroll", onScroll, { capture: true });
     if (frame !== null) cancelAnimationFrame(frame);
   });
-  return isScrolled;
+  return isMatching;
 }

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableFooter.ts

@@ -1,3 +1,4 @@
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import type { ComputedRef } from "vue";
 import type {
   TableViewColumn,
@@ -69,7 +70,7 @@ export function useTableFooter(options: TableFooterOptions) {
   ) => {
     if (value === undefined) return undefined;
     if (summary.format) {
-      return new Intl.NumberFormat(locale.value, summary.format).format(value);
+      return readableNumberFormat(locale.value, summary.format).format(value);
     }
     const column =
       summary.op === "sum"
@@ -77,7 +78,7 @@ export function useTableFooter(options: TableFooterOptions) {
         : undefined;
     return column
       ? renderValue(column, value, undefined)
-      : new Intl.NumberFormat(locale.value).format(value);
+      : readableNumberFormat(locale.value).format(value);
   };
 
   const legendColumn = columns.find(

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableLinkedVisit.ts

@@ -0,0 +1,78 @@
+import { router as inertiaRouter } from "@inertiajs/vue3";
+import { onBeforeUnmount, onMounted } from "vue";
+import type { QueryParamFilters } from "../../../composables/table-view/types/config";
+import { isLinkedVisit } from "./utils/linkedArrival";
+import { queryOfUrl } from "./utils/urlFilters";
+import type { TableUrlScope } from "./utils/views";
+
+const URL_BASE = "http://dms.invalid";
+
+/** What `useTableLinkedVisit` reads a visit against, and what it calls. */
+export interface TableLinkedVisitOptions {
+  route: { path: string; query: Record<string, unknown> };
+  urlScope: TableUrlScope;
+  queryParamFilters: QueryParamFilters | undefined;
+  activeView: () => string | undefined;
+  activeTab: () => string;
+  canOpenView: (id: string) => boolean;
+  canOpenTab: (id: string) => boolean;
+  /** Opens the table on what the visit's link names, as an arrival would. */
+  follow: (query: Record<string, unknown>) => void;
+}
+
+/**
+ * Follows a link to the page the table is already shown on (a notification,
+ * a menu entry, back and forward): Inertia keeps the page mounted, so the
+ * table reads the visit's query as an arrival would (`isLinkedVisit`). A
+ * link clicked is announced as a client visit pushed, even to the URL shown,
+ * which Inertia turns into a replace without a `navigate` event; a page
+ * control rebuilding the query replaces it, and is no link. A visit to
+ * another page is left alone: the table is about to unmount.
+ */
+export function useTableLinkedVisit(options: TableLinkedVisitOptions): void {
+  // The page the table is shown on, as the visit that mounted it reached it.
+  const pathname = options.route.path;
+  let previousQuery: Record<string, unknown> = { ...options.route.query };
+  // A pushed visit announces itself twice when it changes the URL.
+  let followedVisitId: string | undefined;
+  const stops: Array<() => void> = [];
+
+  const read = (
+    url: string,
+    visitId: string | undefined,
+    isLinkClick: boolean,
+  ) => {
+    const query = queryOfUrl(url);
+    const lastQuery = previousQuery;
+    previousQuery = query;
+    if (new URL(url, URL_BASE).pathname !== pathname) return;
+    if (visitId !== undefined && visitId === followedVisitId) return;
+    const isLink = isLinkedVisit({
+      query,
+      isLinkClick,
+      previousQuery: lastQuery,
+      urlScope: options.urlScope,
+      queryParamFilters: options.queryParamFilters,
+      activeView: options.activeView(),
+      activeTab: options.activeTab(),
+      canOpenView: options.canOpenView,
+      canOpenTab: options.canOpenTab,
+    });
+    if (!isLink) return;
+    followedVisitId = visitId;
+    options.follow(query);
+  };
+
+  onMounted(() => {
+    stops.push(
+      inertiaRouter.on("navigate", (event) =>
+        read(event.detail.page.url, event.detail.visitId, false),
+      ),
+      inertiaRouter.on("clientVisit", (event) => {
+        if (event.detail.replace) return;
+        read(event.detail.page.url, event.detail.visitId, true);
+      }),
+    );
+  });
+  onBeforeUnmount(() => stops.forEach((stop) => stop()));
+}