@antelopejs/dms 0.7.8 → 0.7.10

package/frontend-vue/layers/dms-layout/app/utils/pageQuery.ts

@@ -0,0 +1,59 @@
+// The page URL's query as the server reads it for header-button availability.
+
+/** The page query as the server reads it: one value per name, the last one. */
+export function pageQueryValues(
+  query: Record<string, unknown> | undefined,
+): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(query ?? {}).flatMap(([name, value]) => {
+      const last = Array.isArray(value) ? value.at(-1) : value;
+      return typeof last === "string" ? [[name, last]] : [];
+    }),
+  );
+}
+
+// Query keys the DMS writes for the view itself, never for the record a page
+// acts on: the row open in a side panel, the paused live mode, and a period
+// selector's range (`<id>.period`, `<id>.compare`, `<id>.from`…).
+const VIEW_STATE_KEYS = new Set(["record", "live"]);
+const PERIOD_KEY = /\.(?:period|compare|from|to|compareFrom|compareTo)$/;
+
+/** Whether a query key only records the view's own state. */
+export function isViewStateKey(name: string): boolean {
+  return VIEW_STATE_KEYS.has(name) || PERIOD_KEY.test(name);
+}
+
+function withoutViewState(
+  query: Record<string, string>,
+): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(query).filter(([name]) => !isViewStateKey(name)),
+  );
+}
+
+/**
+ * Whether two page queries hold the same values, in any order, leaving out
+ * the keys that only record the view's state: moving through rows, pausing
+ * the live mode or changing a period never asks the layout again.
+ */
+export function isSamePageQuery(
+  left: Record<string, string>,
+  right: Record<string, string>,
+): boolean {
+  const kept = withoutViewState(left);
+  const other = withoutViewState(right);
+  const names = Object.keys(kept);
+  return (
+    names.length === Object.keys(other).length &&
+    names.every((name) => kept[name] === other[name])
+  );
+}
+
+/** The layout URL of a page, asked for the given query. */
+export function layoutUrlWithQuery(
+  layoutUrl: string,
+  query: Record<string, string>,
+): string {
+  const search = new URLSearchParams(query).toString();
+  return search ? `${layoutUrl}?${search}` : layoutUrl;
+}

package/frontend-vue/layers/dms-layout/i18n/locales/layout-en-GB.json

@@ -899,6 +899,10 @@
     "position": "{index} of {total}",
     "previous": "Previous",
     "next": "Next",
-    "close": "Close"
+    "close": "Close",
+    "not_found": {
+      "title": "This entry is no longer available",
+      "description": "It was deleted, or the link is wrong."
+    }
   }
 }

package/frontend-vue/layers/dms-layout/i18n/locales/layout-fr-FR.json

@@ -903,6 +903,10 @@
     "position": "{index} sur {total}",
     "previous": "Précédent",
     "next": "Suivant",
-    "close": "Fermer"
+    "close": "Fermer",
+    "not_found": {
+      "title": "Cette entrée n'est plus disponible",
+      "description": "Elle a été supprimée, ou le lien est erroné."
+    }
   }
 }

package/frontend-vue/layers/dms-ui/app/build/components/activity-feed/activityFeedDays.ts

@@ -18,6 +18,8 @@ export interface ActivityFeedItem {
   title: BlockText;
   /** Dimmed details, joined by "·". */
   meta?: BlockText[];
+  /** Third line, dimmed and mono (the entry's evidence). */
+  detail?: BlockText;
   /**
    * Values the `$` title and details interpolate: typed values are formatted
    * as in a composed text; a `$`-prefixed string is translated first.

package/frontend-vue/layers/dms-ui/app/build/components/blocks/BlockInlineStatus.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  type FetchNotFound,
+  NOT_FOUND_TITLE_KEY,
+} from "../../utils/fetchNotFound";
+
+// The one-line status a compact block (a KPI card, a meter) shows in place of
+// its value: a first load that failed, with a retry, or a source that
+// answered 404 — nothing to retry there, the value does not exist.
+interface BlockInlineStatusProps {
+  state: "error" | "not-found";
+  /** What the 404 said; its `emptyState.title` replaces the default text. */
+  notFound?: FetchNotFound | null;
+}
+
+interface BlockInlineStatusEmits {
+  (e: "retry"): void;
+}
+
+const props = withDefaults(defineProps<BlockInlineStatusProps>(), {
+  notFound: undefined,
+});
+const emit = defineEmits<BlockInlineStatusEmits>();
+
+const NOT_FOUND_ICON = "i-ph-magnifying-glass";
+const ERROR_ICON = "i-ph-warning-circle";
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const isError = computed(() => props.state === "error");
+const label = computed(() => {
+  if (isError.value) return t("dms.table.load_error_title");
+  const title = props.notFound?.emptyState?.title;
+  return title ? processI18n(title) : t(NOT_FOUND_TITLE_KEY);
+});
+const icon = computed(() =>
+  isError.value
+    ? ERROR_ICON
+    : (props.notFound?.emptyState?.icon ?? NOT_FOUND_ICON),
+);
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-2"
+    :role="isError ? 'alert' : 'status'"
+  >
+    <p
+      class="flex min-w-0 items-center gap-1.5 text-[12.5px]"
+      :class="isError ? 'text-error' : 'text-muted'"
+    >
+      <UIcon :name="icon" class="size-4 shrink-0" />
+      <span class="truncate">{{ label }}</span>
+    </p>
+    <UButton
+      v-if="isError"
+      :label="t('dms.table.load_error_retry')"
+      icon="i-ph-arrows-clockwise"
+      color="neutral"
+      variant="outline"
+      size="xs"
+      @click="emit('retry')"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/blocks/BlockStatus.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import DmsEmptyState from "../../../components/empty-state/EmptyState.vue";
+import DmsBlockActions from "./BlockActions.vue";
+import { type FetchNotFound, notFoundTexts } from "../../utils/fetchNotFound";
 
 /** What a block shows when it has nothing to list (interface-dms `BlockEmptyText`). */
 export interface BlockEmptyText {
@@ -8,14 +11,22 @@ export interface BlockEmptyText {
   description?: string;
 }
 
-// What a data-driven block shows instead of its content: an empty list, or a
-// first load that failed (with a retry). Compact v2 .c-empty in a card, so it
-// keeps the footprint of the block it stands in for.
+/**
+ * `empty`: nothing to show. `error`: the first load failed. `not-found`: the
+ * source answered 404, what the block shows does not exist.
+ */
+export type BlockStatusState = "empty" | "error" | "not-found";
+
+// What a data-driven block shows instead of its content: an empty list, a
+// first load that failed (with a retry), or a source that answered 404.
+// Compact v2 .c-empty in a card, so it keeps the footprint of the block it
+// stands in for.
 interface BlockStatusProps {
-  /** `empty`: nothing to show. `error`: the first load failed. */
-  state: "empty" | "error";
+  state: BlockStatusState;
   /** Replaces the default texts of the empty state. */
   empty?: BlockEmptyText;
+  /** What the 404 said, laid over the default not-found texts. */
+  notFound?: FetchNotFound | null;
   /** Draw the card surface around it (off inside a card). */
   card?: boolean;
 }
@@ -26,33 +37,59 @@ interface BlockStatusEmits {
 
 const props = withDefaults(defineProps<BlockStatusProps>(), {
   empty: undefined,
+  notFound: undefined,
   card: true,
 });
 const emit = defineEmits<BlockStatusEmits>();
 
+const VARIANTS = {
+  empty: "no-data",
+  error: "error",
+  "not-found": "no-result",
+} as const;
+
 const { t } = useI18n();
 const { processI18n } = useTranslation();
+
+const translate = (text: string | undefined) =>
+  text ? processI18n(text) : undefined;
+
+const notFoundState = computed(() => {
+  const answered = props.notFound?.emptyState ?? {};
+  const defaults = notFoundTexts(props.notFound, t);
+  return {
+    title: translate(answered.title) ?? defaults.title,
+    description: translate(answered.description) ?? defaults.description,
+    icon: answered.icon,
+    tone: answered.tone,
+    actions: answered.actions ?? [],
+  };
+});
+
+const isNotFound = computed(() => props.state === "not-found");
+
+const title = computed(() => {
+  if (props.state === "error") return t("dms.blocks.load_error");
+  if (isNotFound.value) return notFoundState.value.title;
+  return props.empty ? processI18n(props.empty.title) : t("dms.blocks.empty");
+});
+
+const description = computed(() => {
+  if (props.state === "error") return t("dms.blocks.load_error_hint");
+  if (isNotFound.value) return notFoundState.value.description;
+  return translate(props.empty?.description);
+});
 </script>
 
 <template>
   <div :class="props.card && 'dms-card'">
     <DmsEmptyState
       size="sm"
-      :variant="props.state === 'error' ? 'error' : 'no-data'"
-      :title="
-        props.state === 'error'
-          ? t('dms.blocks.load_error')
-          : props.empty
-            ? processI18n(props.empty.title)
-            : t('dms.blocks.empty')
-      "
-      :description="
-        props.state === 'error'
-          ? t('dms.blocks.load_error_hint')
-          : props.empty?.description
-            ? processI18n(props.empty.description)
-            : undefined
-      "
+      :variant="VARIANTS[props.state]"
+      :icon="isNotFound ? notFoundState.icon : undefined"
+      :tone="isNotFound ? notFoundState.tone : undefined"
+      :title="title"
+      :description="description"
     >
       <template v-if="props.state === 'error'" #actions>
         <UButton
@@ -64,6 +101,9 @@ const { processI18n } = useTranslation();
           @click="emit('retry')"
         />
       </template>
+      <template v-else-if="isNotFound && notFoundState.actions.length" #actions>
+        <DmsBlockActions :actions="notFoundState.actions" size="sm" />
+      </template>
     </DmsEmptyState>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/build/components/table/Actions.vue

@@ -9,7 +9,10 @@ import type { Data, TableSharedData } from "./Table.vue";
 import { KANBAN_DISPLAY_ID } from "../../../composables/table-view/types";
 import type { CustomButton } from "../../../composables/table-view/types/custom-button";
 import { useTableContext } from "../../composables/table/useTableContext";
-import { createTableViewShiftFShortcut } from "../../../composables/table-view/shortcuts/tableViewShiftF";
+import {
+  createTableViewShiftFShortcut,
+  tableSearchShortcuts,
+} from "../../../composables/table-view/shortcuts/tableViewShiftF";
 import {
   FULL_TABLE_CHROME,
   type ResolvedTableChrome,
@@ -111,6 +114,8 @@ interface TableActionsProps {
   chrome?: ResolvedTableChrome;
   /** Placeholder of the search field. */
   searchPlaceholder?: string;
+  /** Key opening the search (`defineShortcuts` notation); `shift_f` else. */
+  searchShortcut?: string;
   /** Dropdown filters writing their column's filter. */
   quickFilters?: ResolvedQuickFilter[];
 }
@@ -193,7 +198,6 @@ watch(searchAreaFocused, async (isFocused) => {
   searchActive.value = false;
 });
 
-
 const searchFieldRef = ref<{ $el: HTMLElement }>();
 
 const focusSearchBar = () => {
@@ -273,13 +277,16 @@ const closeSearch = () => {
   searchActive.value = false;
 };
 
-defineShortcuts({
-  shift_f: createTableViewShiftFShortcut(
-    searchActive,
-    tableSharedData!.globalFilterState,
-    focusSearchBar,
+const openSearchFromShortcut = createTableViewShiftFShortcut(
+  searchActive,
+  tableSharedData!.globalFilterState,
+  focusSearchBar,
+);
+defineShortcuts(
+  computed(() =>
+    tableSearchShortcuts(props.searchShortcut, openSearchFromShortcut),
   ),
-});
+);
 
 const hasCustomFilterConfig = computed(() => {
   const filters = tableSharedData?.columnFiltersState.value || [];

package/frontend-vue/layers/dms-ui/app/build/components/table/Empty.vue

@@ -80,6 +80,18 @@ const customComponent = computed(() => {
   return name ? resolveDmsComponent(name) || name : undefined;
 });
 const refresh = () => tableSharedData.value?.emits("refresh");
+// A custom state clears what narrows the rows as the built-in one does; each
+// is unset while there is nothing of it to clear.
+const clearSearch = computed(() =>
+  clearable.value?.search
+    ? () => tableSharedData.value?.clearSearch()
+    : undefined,
+);
+const clearFilters = computed(() =>
+  clearable.value?.filters
+    ? () => tableSharedData.value?.clearFilters()
+    : undefined,
+);
 
 interface EmptyStateContent {
   title: string;
@@ -221,6 +233,8 @@ const builtInActions = computed(() => {
     :state="kind"
     :search="search"
     :refresh="refresh"
+    :clear-search="clearSearch"
+    :clear-filters="clearFilters"
   />
   <DmsEmptyState
     v-else

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -113,6 +113,8 @@ export interface TableRowActionOptions {
   copyLink?: boolean | RowActionConfig;
   hasSelection?: boolean;
   custom?: CustomRowAction[];
+  /** Name of a row's ⋯ menu button, its `{field}` braces filled from the row. */
+  menuLabel?: string;
 }
 
 export interface NavItem {
@@ -149,6 +151,8 @@ export interface TableProps<T> {
   caption?: string;
 
   rowIdKey?: string;
+  /** Field naming a row: the default name of its ⋯ menu button. */
+  labelKey?: string;
   rowActions?: TableRowActionOptions;
   /**
    * What runs a row's click action: a double-click (the default) or a single
@@ -203,6 +207,8 @@ export interface TableProps<T> {
   chrome?: ResolvedTableChrome;
   /** Placeholder of the search field. */
   searchPlaceholder?: string;
+  /** Key opening the search (`defineShortcuts` notation); `shift_f` else. */
+  searchShortcut?: string;
   /**
    * One-click dropdown filters of the toolbar, writing the column filters
    * (the `columnFilters` model).
@@ -342,6 +348,10 @@ export interface TableSharedData<T> {
    * included) and the toolbar search — and goes back to the first page.
    */
   resetFilters: () => void;
+  /** Empties the toolbar search alone (the toolbar folds it). */
+  clearSearch: () => void;
+  /** Clears the filter chips alone, the search kept. */
+  clearFilters: () => void;
   /** What `resetFilters` would clear (nothing: no clear action to offer). */
   clearableFilters: ComputedRef<ClearableTableFilters>;
   /** A search, a filter chip or a hidden filter narrows the rows. */
@@ -409,7 +419,9 @@ import TableTabs from "./Tabs.vue";
 import { createTableViewDeleteShortcut } from "../../../composables/table-view/shortcuts/tableViewDelete";
 import { FULL_TABLE_CHROME } from "../../composables/table-view/utils/chrome";
 import {
+  clearTableColumnFilters,
   clearTableFilters,
+  clearTableSearch,
   clearableTableFilters,
   isTableNarrowed,
   type TableNarrowingState,
@@ -444,11 +456,14 @@ const ROW_SELECTED_BG = "data-[selected=true]:bg-primary/10";
 const ROW_SELECTED_CELL_BG =
   "group-data-[selected=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
 
-// The row a side panel has open: the hover tint, held, and an accent rule on
-// its leading edge.
+// The row a side panel has open: the accent tint of a selected row and a 2px
+// accent bar on its leading edge, the "current item" of the design system
+// (a list row, a settings role). The bar is drawn by the first cell: a
+// table row's own box shadow is not painted under its cells' backgrounds.
 const ROW_OPEN_BG =
-  "data-[open=true]:bg-elevated data-[open=true]:shadow-[inset_2px_0_0_0_var(--ui-primary)]";
-const ROW_OPEN_CELL_BG = "group-data-[open=true]:bg-elevated";
+  "data-[open=true]:bg-primary/10 data-[open=true]:[&>td:first-child]:shadow-[inset_2px_0_0_0_var(--ui-primary)]";
+const ROW_OPEN_CELL_BG =
+  "group-data-[open=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
 
 // An expanded row keeps the hover tint and hands its bottom rule to the detail
 // band below it.
@@ -1079,6 +1094,13 @@ const resetFilters = () => {
   clearTableFilters(narrowingState);
   void filtersCleared.trigger();
 };
+// Clearing the search folds the toolbar's field, as a full clear does; the
+// filters alone leave it as it is.
+const clearSearch = () => {
+  clearTableSearch(narrowingState);
+  void filtersCleared.trigger();
+};
+const clearFilters = () => clearTableColumnFilters(narrowingState);
 const clearableFilters = computed(() => clearableTableFilters(narrowingState));
 const isFiltered = computed(() => isTableNarrowed(narrowingState));
 
@@ -1162,6 +1184,8 @@ watchEffect(() => {
     hasCustomColumns,
     deleteFilter,
     resetFilters,
+    clearSearch,
+    clearFilters,
     clearableFilters,
     isFiltered,
     onFiltersCleared: filtersCleared.on,
@@ -1305,6 +1329,7 @@ defineShortcuts({
           :on-custom-button="onCustomButton"
           :chrome="resolvedChrome"
           :search-placeholder="searchPlaceholder"
+          :search-shortcut="searchShortcut"
           :quick-filters="quickFilters"
           :class="{
             'ms-auto': !resolvedChrome.caption && !tabsInline,

package/frontend-vue/layers/dms-ui/app/build/composables/actions/useActionTargets.ts

@@ -91,8 +91,13 @@ interface SidePanelTargetRun extends TargetRunExtras {
   title: string;
   containerId: string;
   rowData?: Data;
+  /** Id of a row the link names but the route answered 404 for. */
+  missingId?: string;
 }
 
+const NOT_FOUND_TITLE_KEY = "side_panel.not_found.title";
+const NOT_FOUND_DESCRIPTION_KEY = "side_panel.not_found.description";
+
 /** A drawer or modal to open, and on what. */
 interface ComponentTargetRun extends TargetRunExtras {
   target: ActionTarget & { type: "modal" | "drawer" };
@@ -246,21 +251,39 @@ export function useActionTargets(config: ActionTargetsConfig) {
     return id === undefined || id === null ? undefined : String(id);
   };
 
-  // A deep-linked action keeps the row it has open in the URL; `undefined`
-  // removes it, but only the row this run wrote, on the page it wrote it:
-  // closing as the user navigates leaves the next page's `?record=` alone.
-  const rowRecorder = (deepLink?: boolean) => {
+  // A deep-linked action keeps the row it has open in the URL, by id;
+  // `undefined` removes it, but only the row this run wrote, on the page it
+  // wrote it: closing as the user navigates leaves the next page's
+  // `?record=` alone.
+  const recordRecorder = (deepLink?: boolean) => {
     let written: WrittenRecord | undefined;
-    return (row?: Data): void => {
+    return (id?: string): void => {
       if (!deepLink || !config.recordScope || !config.rowNavigation) return;
-      if (!row) {
+      if (!id) {
         clearWrittenRecord(written);
         written = undefined;
         return;
       }
-      written = writeRecordId(config.recordScope, rowIdOf(row));
+      written = writeRecordId(config.recordScope, id);
     };
   };
+  const rowRecorder = (deepLink?: boolean) => {
+    const recordId = recordRecorder(deepLink);
+    return (row?: Data): void => recordId(rowIdOf(row));
+  };
+
+  // The header names the open row when the target words it from its fields.
+  const rowTitleOf = (target: SidePanelTarget, row?: Data) =>
+    row && target.rowTitle
+      ? resolveConfirmText(target.rowTitle, row, t as ConfirmTranslate)
+      : undefined;
+
+  const notFoundOf = (target: SidePanelTarget) => ({
+    title: processI18n(target.notFound?.title || `$${NOT_FOUND_TITLE_KEY}`),
+    description: processI18n(
+      target.notFound?.description || `$${NOT_FOUND_DESCRIPTION_KEY}`,
+    ),
+  });
 
   const ownerKey = rowSidePanelOwnerKey(config.pageId, config.componentId);
 
@@ -274,36 +297,40 @@ export function useActionTargets(config: ActionTargetsConfig) {
     const componentName = run.target.component?.componentName;
     if (!componentName) return;
     const session = Symbol(componentName);
-    const component = resolveTargetComponent(componentName);
-    const recordRow = rowRecorder(run.deepLink && !run.selection);
-    const componentOptions = {
-      ...run.target.component?.options,
-      pageId: config.pageId,
-      componentId: config.componentId,
-      containerId: run.containerId,
-      selection: run.selection,
-      onSuccessCallback: () => {
-        closeRowSidePanel(session);
-        config.refreshCallback?.();
+    const recordId = recordRecorder(run.deepLink && !run.selection);
+    const panel = {
+      session,
+      ownerKey,
+      title: run.title,
+      positionLabel: run.target.positionLabel,
+      component: resolveTargetComponent(componentName),
+      componentOptions: {
+        ...run.target.component?.options,
+        pageId: config.pageId,
+        componentId: config.componentId,
+        containerId: run.containerId,
+        selection: run.selection,
+        onSuccessCallback: () => {
+          closeRowSidePanel(session);
+          config.refreshCallback?.();
+        },
       },
+      onClose: () => recordId(undefined),
     };
     const showRow = (row?: Data) => {
       openRowSidePanel({
-        session,
-        ownerKey,
-        title: run.title,
-        positionLabel: run.target.positionLabel,
-        component,
-        componentOptions,
+        ...panel,
+        rowTitle: rowTitleOf(run.target, row),
         row,
         rowKey: rowIdOf(row),
         source: row ? config.rowNavigation : undefined,
         showRow,
-        onClose: () => recordRow(undefined),
       });
-      recordRow(row);
+      recordId(rowIdOf(row));
     };
-    showRow(run.rowData);
+    if (!run.missingId) return showRow(run.rowData);
+    openRowSidePanel({ ...panel, notFound: notFoundOf(run.target), showRow });
+    recordId(run.missingId);
   };
 
   // A container opened on a listed row steps through the rows shown (its
@@ -543,5 +570,26 @@ export function useActionTargets(config: ActionTargetsConfig) {
     );
   };
 
-  return { handleCustomButton, handleCustomRowAction, handleBulkCustomAction };
+  /**
+   * Opens a side panel action on a row its link names but its route answered
+   * 404 for: the panel says the row is gone, and closing it removes the link.
+   * Another target opens nothing: no row, no drawer.
+   */
+  const handleMissingRow = (action: CustomRowAction, id: string) => {
+    if (action.target.type !== "sidePanel") return;
+    handleSidePanelTarget({
+      target: action.target,
+      title: processI18n(action.target.title || action.label),
+      containerId: `${config.pageId}-${config.componentId}-${action.target.type}`,
+      deepLink: isDeepLinkAction(action),
+      missingId: id,
+    });
+  };
+
+  return {
+    handleCustomButton,
+    handleCustomRowAction,
+    handleBulkCustomAction,
+    handleMissingRow,
+  };
 }

package/frontend-vue/layers/dms-ui/app/build/composables/blocks/useBlockItems.ts

@@ -3,10 +3,16 @@ import { useChartFetch } from "../../../composables/chart/useChartFetch";
 import { useComponentEvent } from "../../../../../dms-core/app/composables/components/useComponentEvent";
 import { useWatch } from "../../../../../dms-core/app/composables/watch/useWatch";
 import type { WatchAction } from "../../../../../dms-core/app/types/watch";
+import {
+  type FetchNotFound,
+  readFetchNotFound,
+} from "../../utils/fetchNotFound";
 
 /** What a list block's `fetchUrl` answers with. */
 export interface BlockItemsResponse<T> {
   items?: T[];
+  /** How many items the source holds in all (an ActivityFeed's head count). */
+  count?: number;
 }
 
 export interface UseBlockItemsOptions<T> {
@@ -31,10 +37,17 @@ export interface UseBlockItemsOptions<T> {
 
 export interface UseBlockItemsReturn<T> {
   items: ComputedRef<T[]>;
+  /** The `count` the source answered with, if it answered one. */
+  count: ComputedRef<number | undefined>;
   /** First load of a fetched list: nothing to show yet. */
   isPending: ComputedRef<boolean>;
   /** The first load failed; a refetch failure keeps the last items. */
   hasError: ComputedRef<boolean>;
+  /**
+   * The source answered 404: what the block lists does not exist (its last
+   * items are dropped). `null` otherwise. Never also `hasError`.
+   */
+  notFound: ComputedRef<FetchNotFound | null>;
   refresh: () => Promise<void>;
 }
 
@@ -71,12 +84,23 @@ export function useBlockItems<T>(
   const items = computed<T[]>(() =>
     isFetched ? (data.value?.items ?? []) : (options.items() ?? []),
   );
+  const count = computed<number | undefined>(() =>
+    typeof data.value?.count === "number" ? data.value.count : undefined,
+  );
   const isPending = computed(
     () => isFetched && isLoading.value && data.value === null,
   );
+  const notFound = computed(() =>
+    isFetched && !isLoading.value ? readFetchNotFound(error.value) : null,
+  );
   const hasError = computed(
-    () => isFetched && !isLoading.value && data.value === null && !!error.value,
+    () =>
+      isFetched &&
+      !isLoading.value &&
+      data.value === null &&
+      !!error.value &&
+      !notFound.value,
   );
 
-  return { items, isPending, hasError, refresh };
+  return { items, count, isPending, hasError, notFound, refresh };
 }