@antelopejs/dms 0.7.9 → 0.7.10

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodDisplay.ts

@@ -152,3 +152,58 @@ export function periodDuration(range: PeriodRange): PeriodDuration {
   }
   return { unit: "days", count: Math.max(Math.round(span / MS_PER_DAY), 1) };
 }
+
+const DAYS_PER_WEEK = 7;
+const YESTERDAY_OFFSET = -1;
+const WEEKDAY_FORMAT: FormatOptions = { weekday: "short" };
+
+function localDayStart(date: Date): number {
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+  ).getTime();
+}
+
+function daysBefore(date: Date, now: Date): number {
+  return Math.round((localDayStart(now) - localDayStart(date)) / MS_PER_DAY);
+}
+
+function formatWith(date: Date, locale: string, options: FormatOptions) {
+  const formatter = regionalDateTimeFormat(locale, options, {
+    keepLocalZone: true,
+  });
+  return normalizeSpaces(formatter.format(date));
+}
+
+function relativeDayPrefix(date: Date, now: Date, locale: string): string {
+  const days = daysBefore(date, now);
+  if (days <= 0) return "";
+  if (days === 1) {
+    const format = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+    return `${format.format(YESTERDAY_OFFSET, "day")} `;
+  }
+  if (days < DAYS_PER_WEEK) {
+    return `${formatWith(date, locale, WEEKDAY_FORMAT)} `;
+  }
+  const sameYear = date.getFullYear() === now.getFullYear();
+  const day: FormatOptions = sameYear
+    ? DAY_FORMAT
+    : { ...DAY_FORMAT, year: "numeric" };
+  return `${formatWith(date, locale, day)}, `;
+}
+
+/**
+ * An instant as seen from `now`, in the reader's locale: the time alone
+ * today ("11:52"), then "yesterday 11:52", the weekday within a week
+ * ("Mon 11:52"), and the date beyond ("Oct 4, 11:52", with its year when
+ * not this one's). The start of a window labelled relative to now.
+ */
+export function formatRelativeInstant(
+  date: Date,
+  now: Date,
+  locale: string,
+): string {
+  const time = formatWith(date, locale, TIME_FORMAT);
+  return `${relativeDayPrefix(date, now, locale)}${time}`;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodQuery.ts

@@ -48,6 +48,11 @@ export interface PeriodQueryKeys {
 export interface PeriodSource {
   query: PeriodQuery;
   keys: PeriodQueryKeys;
+  /**
+   * Whether a range it names is taken even when `custom` is not offered: a
+   * link framing a window (an incident's) opens on it, no preset selected.
+   */
+  isRangeAlwaysAccepted?: boolean;
 }
 
 const CUSTOM_PRESET: PeriodPreset = "custom";
@@ -160,7 +165,9 @@ function readRange(
 
 /**
  * The range a source names, when the selector offers it: a custom range
- * (`from` and `to`) first, then a preset (`period`).
+ * (`from` and `to`) first, then a preset (`period`). A source whose ranges
+ * are always accepted gives its custom range even when `custom` is not
+ * offered.
  */
 export function readRangeChoice(
   source: PeriodSource,
@@ -168,7 +175,9 @@ export function readRangeChoice(
 ): PeriodRangeChoice | null {
   const { query, keys } = source;
   const customRange = readRange(query, keys.from, keys.to);
-  if (customRange && choices.presets.includes(CUSTOM_PRESET)) {
+  const isCustomAccepted =
+    source.isRangeAlwaysAccepted || choices.presets.includes(CUSTOM_PRESET);
+  if (customRange && isCustomAccepted) {
     return { preset: CUSTOM_PRESET, customRange };
   }
   const preset = choices.presets.find(
@@ -307,9 +316,36 @@ export type RememberedPeriods = Record<string, Record<string, string>>;
 /** How many selectors' last choices the browser keeps. */
 export const REMEMBERED_PERIODS_LIMIT = 20;
 
-/** The entry of selector `id` of page `pageId` among the last choices. */
-export function rememberedPeriodKey(pageId: string, id: string): string {
-  return `${pageId}#${id}`;
+/** What a remembered choice is kept under: a page's selector, or a shared key. */
+export interface RememberedPeriodTarget {
+  pageId: string;
+  id: string;
+  /** Shared by every selector carrying it, on any page. */
+  rememberKey?: string;
+}
+
+// A page key always holds `#`, so a shared key cannot collide with one.
+const SHARED_KEY_PREFIX = "@";
+
+/**
+ * The entry of a selector among the last choices: its `rememberKey`, shared
+ * by every selector carrying it, else selector `id` of page `pageId`.
+ */
+export function rememberedPeriodKey(target: RememberedPeriodTarget): string {
+  if (target.rememberKey) return `${SHARED_KEY_PREFIX}${target.rememberKey}`;
+  return `${target.pageId}#${target.id}`;
+}
+
+/**
+ * Whether the selector offers `selection`'s range: a range only a link could
+ * bring (a custom one without `custom` offered) is not remembered, so the
+ * last choice made in the menu stays.
+ */
+export function isRangeOffered(
+  selection: PeriodRangeChoice,
+  choices: PeriodChoices,
+): boolean {
+  return choices.presets.includes(selection.preset);
 }
 
 /**

package/frontend-vue/layers/dms-ui/app/build/composables/period/usePeriodDraft.ts

@@ -11,12 +11,23 @@ import { calendarToRange, rangeToCalendar } from "./periodDisplay";
 
 const CUSTOM_PRESET: PeriodPreset = "custom";
 
+/**
+ * Where a custom range starts when nothing on screen has bounds (every
+ * period): today.
+ */
+export function startingRange(now: Date): PeriodRange {
+  return calendarToRange(rangeToCalendar({ from: now, to: now }));
+}
+
 export interface UsePeriodDraftReturn {
   preset: Ref<PeriodPreset>;
   comparison: Ref<PeriodComparison>;
   customRange: Ref<PeriodRange | null>;
-  /** The range the staged preset (or custom range) resolves to. */
-  range: ComputedRef<PeriodRange>;
+  /**
+   * The range the staged preset (or custom range) resolves to; `null` for
+   * every period (`all`).
+   */
+  range: ComputedRef<PeriodRange | null>;
   compareRange: ComputedRef<PeriodRange | null>;
   isDirty: ComputedRef<boolean>;
   /** Start over from the committed period (on open, on cancel). */
@@ -59,13 +70,14 @@ export function usePeriodDraft(period: UsePeriodReturn): UsePeriodDraftReturn {
     customRange.value = committedCustomRange();
   }
 
-  const range = computed<PeriodRange>(() =>
-    resolvePresetRange(
+  const range = computed<PeriodRange | null>(() => {
+    const now = new Date();
+    return resolvePresetRange(
       preset.value,
-      new Date(),
-      customRange.value ?? period.state.value.range,
-    ),
-  );
+      now,
+      customRange.value ?? period.state.value.range ?? startingRange(now),
+    );
+  });
 
   const compareRange = computed<PeriodRange | null>(() =>
     resolveComparisonRange(
@@ -86,7 +98,8 @@ export function usePeriodDraft(period: UsePeriodReturn): UsePeriodDraftReturn {
   function selectPreset(next: PeriodPreset): void {
     if (next === CUSTOM_PRESET && !customRange.value) {
       // Custom starts from the days on screen, ready to be adjusted.
-      customRange.value = calendarToRange(rangeToCalendar(range.value));
+      const shown = range.value ?? startingRange(new Date());
+      customRange.value = calendarToRange(rangeToCalendar(shown));
     }
     preset.value = next;
   }

package/frontend-vue/layers/dms-ui/app/build/composables/period/usePeriodLocation.ts

@@ -5,9 +5,11 @@ import {
   isPeriodQueryCurrent,
   mergePeriodSearch,
   periodQueryKeys,
+  isRangeOffered,
   rememberedPeriodKey,
   rememberPeriod,
   type RememberedPeriods,
+  type RememberedPeriodTarget,
   type PeriodQuery,
   type PeriodQueryKeys,
   type PeriodSelection,
@@ -21,6 +23,8 @@ export interface PeriodLocationOptions {
   id: string;
   /** The page it is on: its last choice is kept per page and per id. */
   pageId: string;
+  /** Shares the last choice with every selector carrying it, on any page. */
+  rememberKey?: string;
   /** What the period falls back to when no source names a valid one. */
   fallback: PeriodSelection;
 }
@@ -87,9 +91,9 @@ function replacePeriodInUrl(
 }
 
 /** The user's last choice of one selector, kept in the preferences. */
-function useRememberedPeriod(pageId: string, id: string) {
+function useRememberedPeriod(target: RememberedPeriodTarget) {
   const { getPreference, setPreference } = usePreferences();
-  const key = rememberedPeriodKey(pageId, id);
+  const key = rememberedPeriodKey(target);
   const all = () => getPreference<RememberedPeriods>(PERIOD_PREFERENCE_KEY, {});
   return {
     source: (): PeriodSource => ({
@@ -127,8 +131,10 @@ function usePeriodUrlWriter(keys: PeriodQueryKeys) {
 
 /**
  * Keeps a selector's period in the page URL (`?<id>.period=`, see
- * `periodQuery`) and its last choice in the user's preferences. The period
- * starts from the URL, then from that last choice, then from `fallback`. Both
+ * `periodQuery`) and its last choice in the user's preferences, per page or
+ * under its `rememberKey`. The period starts from the URL, then from that
+ * last choice, then from `fallback`. A URL range is taken even when `custom`
+ * is not offered, and is then not remembered. Both
  * are read in setup, on the server too: the preferences are a cookie, so the
  * server renders the period the browser will show.
  *
@@ -145,7 +151,7 @@ export function usePeriodLocation(
 ): void {
   const route = useDmsRoute();
   const urlKeys = periodQueryKeys(options.id);
-  const remembered = useRememberedPeriod(options.pageId, options.id);
+  const remembered = useRememberedPeriod(options);
   const writer = usePeriodUrlWriter(urlKeys);
   const choices = {
     presets: period.presets.value,
@@ -154,6 +160,7 @@ export function usePeriodLocation(
   const urlSource = (): PeriodSource => ({
     query: route.query as PeriodQuery,
     keys: urlKeys,
+    isRangeAlwaysAccepted: true,
   });
 
   applySelection(
@@ -170,7 +177,7 @@ export function usePeriodLocation(
     () => selectionText(readSelection(period)),
     () => {
       const selection = readSelection(period);
-      remembered.remember(selection);
+      if (isRangeOffered(selection, choices)) remembered.remember(selection);
       writer.write(selection);
     },
   );

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

@@ -109,6 +109,7 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     showArchived: props.showArchived,
     columnMenus: props.columnMenus,
     defaultSort: props.tableProps.defaultSort,
+    labelKey: props.tableProps.labelKey,
   });
 
   // A saved order (the user's, a view's) is kept, completed with the

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

@@ -41,6 +41,10 @@ import {
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 import { useColumnValueRenderer } from "../data-types/useColumnValueRenderer";
 import { useActionConfirm } from "../confirm/useActionConfirm";
+import {
+  resolveConfirmText,
+  type ConfirmTranslate,
+} from "../confirm/confirmDialogTexts";
 import {
   type DefaultSortConfig,
   type HeaderSortCue,
@@ -160,6 +164,8 @@ interface ColumnConfig<T> {
   columnMenus?: boolean;
   /** The table's default sort: its column shows a neutral arrow. */
   defaultSort?: DefaultSortConfig;
+  /** Field naming a row: the default name of its ⋯ menu button. */
+  labelKey?: string;
 }
 
 interface ExtendedColumnMeta<T> extends ColumnMeta<T, unknown> {
@@ -406,6 +412,7 @@ export const useTableColumns = <T extends Data>(config: ColumnConfig<T>) => {
   const renderActionsDropdown = (
     items: DropdownMenuItem[] | DropdownMenuItem[][],
     rowId: string,
+    label: string,
   ) =>
     h(
       DropdownMenu as Component,
@@ -418,6 +425,7 @@ export const useTableColumns = <T extends Data>(config: ColumnConfig<T>) => {
         default: () =>
           h(Button, {
             id: `row-actions-${rowId}`,
+            "aria-label": label,
             icon: appConfig.ui.icons.ellipsis,
             color: Color.neutral,
             variant: ButtonVariant.ghost,
@@ -521,7 +529,9 @@ export const useTableColumns = <T extends Data>(config: ColumnConfig<T>) => {
       children.unshift(renderRestoreButton(restoreDescriptor, row.id));
     }
     if (dropdownItems.length > 0) {
-      children.push(renderActionsDropdown(dropdownItems, row.id));
+      children.push(
+        renderActionsDropdown(dropdownItems, row.id, menuLabel(row.original)),
+      );
     }
 
     return h(
@@ -580,6 +590,21 @@ export const useTableColumns = <T extends Data>(config: ColumnConfig<T>) => {
 
   const { processI18n } = useTranslation();
 
+  // A row's own text, resolved as a confirmation's texts are: a `$` key
+  // translated with the row's fields as parameters, or a literal whose
+  // `{field}` braces they fill.
+  const rowText = (text: string, rowData: T): string =>
+    resolveConfirmText(text, rowData, t as ConfirmTranslate);
+
+  const menuLabel = (rowData: T): string => {
+    const declared = config.rowActions?.menuLabel;
+    if (declared) return rowText(declared, rowData);
+    const label = config.labelKey ? get(rowData, config.labelKey) : undefined;
+    return typeof label === "string" || typeof label === "number"
+      ? t("dms.table.row_actions_for", { label })
+      : t("dms.table.row_actions");
+  };
+
   const isCustomActionDisabled = (
     action: CustomRowAction,
     rowData: T,
@@ -638,7 +663,7 @@ export const useTableColumns = <T extends Data>(config: ColumnConfig<T>) => {
 
   const buildCustomActionDescriptors = (rowData: T): RowActionDescriptor[] =>
     (config.rowActions?.custom || []).map((action) => ({
-      label: processI18n(action.label),
+      label: rowText(action.label, rowData),
       // A labelled button may go without an icon.
       icon: action.icon || (action.showLabel ? "" : "i-ph-lightning"),
       onSelect: () => config.onCustomRowAction?.(action, rowData),

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

@@ -79,10 +79,25 @@ export const clearTableFiltersLabelKey = (
       ? "dms.table.clear_search"
       : "dms.table.clear_filters";
 
-export const clearTableFilters = (state: TableNarrowingState): void => {
-  state.columnFilters.value = resetColumnFilters(state.columnFilters.value);
-  state.globalFilter.value = "";
+const backToFirstPage = (state: TableNarrowingState): void => {
   if (state.pagination && state.pagination.value.pageIndex !== 0) {
     state.pagination.value = { ...state.pagination.value, pageIndex: 0 };
   }
 };
+
+/** Empties the toolbar search alone, back to the first page. */
+export const clearTableSearch = (state: TableNarrowingState): void => {
+  state.globalFilter.value = "";
+  backToFirstPage(state);
+};
+
+/** Clears the filter chips alone (pinned ones reset), back to the first page. */
+export const clearTableColumnFilters = (state: TableNarrowingState): void => {
+  state.columnFilters.value = resetColumnFilters(state.columnFilters.value);
+  backToFirstPage(state);
+};
+
+export const clearTableFilters = (state: TableNarrowingState): void => {
+  state.columnFilters.value = resetColumnFilters(state.columnFilters.value);
+  clearTableSearch(state);
+};

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

@@ -1,21 +1,13 @@
 import type { PaginationState } from "@tanstack/vue-table";
 import { computed, ref, watch, type Ref } from "vue";
+import { hashText } from "#dms-core/app/build/composables/user/tablePreferences";
+import type { TablePreferences } from "./useTablePreferences";
 
 const FIRST_PAGE_INDEX = 0;
-const PAGINATION_PREFERENCE = "pagination";
-// The hidden filters the stored page was reached under, next to it.
-const PAGINATION_SCOPE_PREFERENCE = "paginationScope";
-
-/** The preference store the page is kept in (`usePreferences`). */
-export interface PaginationPreferences {
-  getPreference: <V>(keyPath: string, defaultValue?: V) => V;
-  setPreference: (keyPath: string, value: unknown) => void;
-}
 
 export interface PersistedPaginationOptions {
-  preferences: PaginationPreferences;
-  /** The table's preference key of a setting. */
-  preferenceKey: (suffix: string) => string;
+  /** The table's preferences (`useTablePreferences`). */
+  preferences: TablePreferences;
   defaults: PaginationState;
   /**
    * What lists other rows without the user picking it: the hidden filters
@@ -30,8 +22,8 @@ const firstPage = (pagination: PaginationState): PaginationState => ({
 });
 
 /**
- * The table's page, kept in the user's preferences with the hidden filters
- * it was reached under. A page restored under other hidden filters (a link
+ * The table's page, kept in the user's preferences with a hash of the hidden
+ * filters it was reached under (only past the first page, where it matters). A page restored under other hidden filters (a link
  * that remounted the page with another `?status=`) starts at the first
  * page, as does a change of their value while the table is shown; compared
  * by value, so another query parameter changing keeps the page.
@@ -39,15 +31,14 @@ const firstPage = (pagination: PaginationState): PaginationState => ({
 export function usePersistedPagination(
   options: PersistedPaginationOptions,
 ): Ref<PaginationState> {
-  const { preferences, preferenceKey } = options;
-  const scopeKey = computed(() => JSON.stringify(options.scope() ?? null));
-  const stored = preferences.getPreference<PaginationState>(
-    preferenceKey(PAGINATION_PREFERENCE),
-    options.defaults,
+  const { preferences, defaults } = options;
+  const scopeKey = computed(() =>
+    hashText(JSON.stringify(options.scope() ?? null)),
   );
-  // A page stored before its scope was: kept, as it always was.
-  const storedScope = preferences.getPreference<string>(
-    preferenceKey(PAGINATION_SCOPE_PREFERENCE),
+  const stored = preferences.get<PaginationState>("pagination", defaults);
+  // A page kept without its scope (the first one): kept as it is.
+  const storedScope = preferences.get<string>(
+    "paginationScope",
     scopeKey.value,
   );
   const pagination = ref<PaginationState>(
@@ -66,10 +57,12 @@ export function usePersistedPagination(
   watch(
     [pagination, scopeKey],
     ([value, scope]) => {
-      preferences.setPreference(preferenceKey(PAGINATION_PREFERENCE), value);
-      preferences.setPreference(
-        preferenceKey(PAGINATION_SCOPE_PREFERENCE),
-        scope,
+      preferences.set("pagination", value, defaults);
+      const isFirstPage = value.pageIndex === FIRST_PAGE_INDEX;
+      preferences.set<string | undefined>(
+        "paginationScope",
+        isFirstPage ? undefined : scope,
+        undefined,
       );
     },
     { deep: true },

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

@@ -0,0 +1,66 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from "vue";
+
+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
+ * area it scrolls in (its scrolling parent, else the window).
+ *
+ * @internal
+ */
+export function isFirstRowScrolledPast(element: HTMLElement): boolean {
+  const row = element.querySelector(FIRST_ROW_SELECTOR) ?? element;
+  const scroller = scrollParent(element);
+  const viewTop = scroller ? scroller.getBoundingClientRect().top : 0;
+  return row.getBoundingClientRect().bottom <= viewTop;
+}
+
+/**
+ * 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
+ * false, and on the server.
+ *
+ * @internal
+ */
+export function useScrolledPastTop(
+  element: () => HTMLElement | null,
+  isEnabled: boolean,
+): Ref<boolean> {
+  const isScrolled = ref(false);
+  if (!isEnabled || typeof window === "undefined") return isScrolled;
+  let frame: number | null = null;
+  const measure = () => {
+    frame = null;
+    const target = element();
+    isScrolled.value = !!target && isFirstRowScrolledPast(target);
+  };
+  const onScroll = () => {
+    frame ??= requestAnimationFrame(measure);
+  };
+  onMounted(() => {
+    window.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true,
+    });
+    measure();
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("scroll", onScroll, { capture: true });
+    if (frame !== null) cancelAnimationFrame(frame);
+  });
+  return isScrolled;
+}

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

@@ -83,6 +83,11 @@ export function useTableListData<T extends Record<string, unknown>>(
 /**
  * The counters of a table view's tabs and views, keyed by id; `null` until
  * they arrive. Keyed by source URL like the list (see useTableListData).
+ *
+ * A source waiting on its period scope answers `null` too, like its list:
+ * the scope never registers during the server render, so the server and the
+ * browser (whose key carries the period, and has no payload yet) both draw
+ * the counters' skeleton, and hydration matches.
  */
 export function useTableCountsData<T extends Record<string, unknown>>(
   options: TableCountsDataOptions<T>,
@@ -90,9 +95,10 @@ export function useTableCountsData<T extends Record<string, unknown>>(
   const { rows, queries, archiveQuery } = options;
   const heldQuery = options.heldQuery ?? NO_HELD_QUERY;
   const sourceSuffix = rows.sourceUrl.value ? `-${rows.sourceUrl.value}` : "";
-  return useServerRenderedAsyncData<Record<string, number>>(
+  return useServerRenderedAsyncData<Record<string, number> | null>(
     `table-view-${options.componentId}-${options.pageId}-tab-counts${sourceSuffix}`,
     async () => {
+      if (rows.isPeriodPending.value) return null;
       if (queries.value.length === 0) return {};
       return await rows.countBatch(
         queries.value.map(({ id, query }) => ({

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

@@ -1,13 +1,23 @@
 import { computed, ref, watch, type ComputedRef } from "vue";
 import { usePageLive } from "../../../composables/live/usePageLive";
+import type { TableViewLiveHoldOptions } from "../../../types/live";
 import type { LiveGate } from "../live/currentPageLive";
+import { useScrolledPastTop } from "./useScrolledPastTop";
 import { LIVE_HELD_AT_QUERY_KEY } from "./useTableRows";
 
 type Query = Record<string, unknown>;
 
+/** What the table tells its hold about the user's reading. */
+export interface TableLiveHoldSignals {
+  /** One of its rows is open in the side panel. */
+  isRowOpen?: () => boolean;
+  /** The table's element, whose first row `whileScrolled` follows. */
+  tableElement?: () => unknown;
+}
+
 export interface TableLiveHoldOptions {
-  /** The table declares `liveHold`. */
-  isEnabled: boolean;
+  /** The table's `liveHold`: `true` or an object enables it. */
+  liveHold: boolean | TableViewLiveHoldOptions | undefined;
   /** A `TableView.fromSource` table: its route receives the hold's bound. */
   isSource: boolean;
   /**
@@ -15,35 +25,71 @@ export interface TableLiveHoldOptions {
    * sets it up after the list this hold bounds.
    */
   gate: () => LiveGate;
+  signals?: TableLiveHoldSignals;
 }
 
 export interface TableLiveHold {
-  /** The rows are held: the table declares `liveHold` and the page is paused. */
+  /** The rows are held: the page is paused, or the table holds by itself. */
   isHolding: ComputedRef<boolean>;
   /** Events the table received since its rows were held or last shown. */
   newCount: ComputedRef<number>;
-  /** Reads the rows once, staying paused, and holds them from now. */
+  /** Reads the rows once, staying held, and holds them from now. */
   showNew: () => void;
   /** The bound a source route receives with each request while held. */
   heldQuery: () => Query;
 }
 
 const NO_QUERY: Query = {};
+const NEVER = () => false;
+const NO_ELEMENT = () => null;
+
+function holdOptionsOf(
+  liveHold: TableLiveHoldOptions["liveHold"],
+): TableViewLiveHoldOptions | null {
+  if (!liveHold) return null;
+  return liveHold === true ? {} : liveHold;
+}
+
+// The table alone holds while the page is live: the user reads a row in the
+// side panel, or reads further down than the rows that would move.
+function useLocalHold(
+  holdOptions: TableViewLiveHoldOptions | null,
+  signals: TableLiveHoldSignals,
+): ComputedRef<boolean> {
+  const isRowOpen = signals.isRowOpen ?? NEVER;
+  const tableElement = signals.tableElement ?? NO_ELEMENT;
+  const isScrolled = useScrolledPastTop(() => {
+    const element = tableElement();
+    return element instanceof HTMLElement ? element : null;
+  }, !!holdOptions?.whileScrolled);
+  return computed(
+    () =>
+      (!!holdOptions?.whileRowOpen && isRowOpen()) ||
+      (!!holdOptions?.whileScrolled && isScrolled.value),
+  );
+}
 
 /**
- * The `liveHold` of a table view: while its live page is paused, the table
- * keeps its rows — the gate already requests nothing on its events — and a
- * source route is told the moment they were frozen, so the user's own search,
- * sort and pagination list the rows as they stood. Show reads them once more
- * without leaving the pause.
+ * The `liveHold` of a table view: while its live page is paused — or, with
+ * `whileRowOpen` / `whileScrolled`, while the user reads a row or scrolled
+ * down — the table keeps its rows: the gate requests nothing on its events
+ * and counts them, and a source route is told the moment they were frozen, so
+ * the user's own search, sort and pagination list the rows as they stood.
+ * Show reads them once more without leaving the hold; the end of a hold of
+ * the table's own reads them if it missed any.
  *
  * @internal
  */
 export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
   const { isEnabled, isPaused } = usePageLive();
+  const holdOptions = holdOptionsOf(options.liveHold);
+  const isLocallyHeld = useLocalHold(holdOptions, options.signals ?? {});
   const pausedAt = ref<number | null>(null);
   const isHolding = computed(
-    () => options.isEnabled && isEnabled.value && isPaused.value,
+    () =>
+      !!holdOptions &&
+      isEnabled.value &&
+      (isPaused.value || isLocallyHeld.value),
   );
 
   watch(
@@ -53,8 +99,16 @@ export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
     },
     { immediate: true },
   );
+  // Again on a new controller: the gate binds to the page on screen.
+  watch(
+    [isLocallyHeld, isEnabled],
+    ([held, enabled]) => {
+      if (enabled) options.gate().setHeld(held);
+    },
+    { flush: "sync" },
+  );
 
-  // The rows are as fresh as the pause, or as the last read the user asked
+  // The rows are as fresh as the hold, or as the last read the user asked
   // for since (Show, an action of theirs).
   const heldAt = () =>
     pausedAt.value === null