@everystack/admin 0.4.3 → 0.4.4

package/CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to `@everystack/admin` are documented here.
 
 Format based on [Keep a Changelog](https://keepachangelog.com/).
 
+## [0.4.4] - 2026-10-15
+
+### Added
+
+- the Show screen renders html and markdown fields as sanitised HTML
+- list and show can embed related rows with ResourceConfig.select
+- relation fields show the related name as a link in the list and on Show
+- relation fields get a searchable picker in the Create and Edit forms
+- soft-deletable resources get a Deleted tab and Restore
+- Delete shows how many rows link to the record before it confirms
+
+### Fixed
+
+- a dashboard dimension named size, page or sort no longer clashes with view state
+- clicking the default tab clears ?tab, and the tabs are a tablist
+- the delete preview counts by exact id and ignores a second Confirm press
+
+### Documentation
+
+- the Show screen allowlist, the install step and the known sanitize gap
+- RPC list search covers the first field, counts cover all of them
+- use posts and comments in the Embeds and Association examples
+
 ## [0.4.3] - 2026-10-14
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everystack/admin",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Declarative admin dashboard framework for PostgREST APIs",
   "license": "AGPL-3.0-only",
   "author": "Scalable Technology, Inc. <licensing@scalable.technology>",
@@ -50,7 +50,7 @@
   },
   "peerDependencies": {
     "drizzle-orm": "0.41.0",
-    "@everystack/api": ">=0.2.4",
+    "@everystack/api": ">=0.4.4",
     "@everystack/ui": ">=0.4.2",
     "@tiptap/extension-code": ">=3.0.0",
     "@tiptap/extension-code-block": ">=3.0.0",
@@ -117,8 +117,8 @@
     "react-test-renderer": "19.2.0",
     "ts-jest": "29.4.9",
     "typescript": "5.9.3",
-    "@everystack/api": "0.4.3",
-    "@everystack/ui": "0.4.2"
+    "@everystack/api": "0.4.4",
+    "@everystack/ui": "0.4.3"
   },
   "scripts": {
     "test": "jest",

package/src/adapters/EverystackAdapter.ts

@@ -10,6 +10,7 @@ import { toCamelCaseKeys } from '../utils/naming';
 import { mergeFilters, normalizeSearchText } from '../utils/list-query';
 import type { DataAdapter } from './types';
 import type {
+  DeletedMode,
   ListParams,
   ListResult,
   DataRecord,
@@ -63,7 +64,7 @@ export interface EverystackAdapterOptions extends ClientOptions {
 
 export class EverystackAdapter implements DataAdapter {
   readonly supportsSearch = true;
-  private client: Client;
+  protected readonly client: Client;
   private listRpcs: Record<string, string>;
   private crudRpcs: Record<string, string>;
 
@@ -98,6 +99,7 @@ export class EverystackAdapter implements DataAdapter {
         sort: params.sort,
         dir: params.order ?? 'asc',
         filter,
+        ...(params.deleted ? { deleted: params.deleted } : {}),
       });
       // Normalize row keys to camelCase so the list columns resolve regardless of whether
       // the RPC returns snake_case (e.g. jobsEventList over ops.runs) or camelCase (S3 lists,
@@ -112,6 +114,8 @@ export class EverystackAdapter implements DataAdapter {
     }
 
     let builder = this.client.from(resource);
+    if (params.select) builder = builder.select(params.select);
+    if (params.deleted) builder = builder.deleted(params.deleted);
 
     // Apply filters, then the search group beside them
     builder = applyFilters(builder, params.filter);
@@ -142,16 +146,24 @@ export class EverystackAdapter implements DataAdapter {
   async fetchOne<T extends DataRecord = DataRecord>(
     resource: string,
     id: string | number,
+    params?: { select?: string; deleted?: DeletedMode },
   ): Promise<T> {
     // RPC-backed single read (e.g. DB-free alert rules from the S3 config object).
     const crudRpc = this.crudRpcs[resource];
     if (crudRpc) {
-      const record = await this.rpc<T | null>(crudRpc, { action: 'get', id: String(id) });
+      const record = await this.rpc<T | null>(crudRpc, {
+        action: 'get',
+        id: String(id),
+        ...(params?.deleted ? { deleted: params.deleted } : {}),
+      });
       if (!record) throw new Error(`${resource}/${id} not found`);
       return record;
     }
 
-    const result = await this.client.from(resource).eq('id', String(id)).single();
+    let builder = this.client.from(resource).eq('id', String(id));
+    if (params?.select) builder = builder.select(params.select);
+    if (params?.deleted) builder = builder.deleted(params.deleted);
+    const result = await builder.single();
 
     if (result.error) {
       throw new Error(result.error.status === 406
@@ -184,23 +196,31 @@ export class EverystackAdapter implements DataAdapter {
     resource: string,
     id: string | number,
     data: Partial<T>,
+    params?: { deleted?: DeletedMode },
   ): Promise<T> {
     const crudRpc = this.crudRpcs[resource];
     if (crudRpc) {
-      return this.rpcResult<T>(await this.rpc<T | { error: string }>(crudRpc, { action: 'update', id: String(id), data }));
+      return this.rpcResult<T>(await this.rpc<T | { error: string }>(crudRpc, {
+        action: 'update',
+        id: String(id),
+        data,
+        ...(params?.deleted ? { deleted: params.deleted } : {}),
+      }));
     }
 
-    const result = await this.client
-      .from(resource)
-      .eq('id', String(id))
-      .update(data as Record<string, unknown>);
+    let builder = this.client.from(resource).eq('id', String(id));
+    if (params?.deleted) builder = builder.deleted(params.deleted);
+    const result = await builder.update(data as Record<string, unknown>);
 
     if (result.error) {
       throw new Error(result.error.message);
     }
 
     const rows = (result.data ?? []) as T[];
-    if (rows.length === 0) throw new Error(ZERO_ROW_UPDATE);
+    if (rows.length === 0) {
+      // A restore that matched nothing: the row is not deleted, or not there.
+      throw new Error(params?.deleted ? `${resource}/${id} not found or not changed` : ZERO_ROW_UPDATE);
+    }
     return rows[0];
   }
 
@@ -258,6 +278,7 @@ export class EverystackAdapter implements DataAdapter {
     }
 
     let builder = this.client.from(resource).select(selectParts.join(','));
+    if (params.deleted) builder = builder.deleted(params.deleted);
 
     // Apply filters, then the search group beside them (the same rules as a list)
     builder = applyFilters(builder, params.filter);

package/src/adapters/types.ts

@@ -6,6 +6,7 @@
  */
 
 import type {
+  DeletedMode,
   ListParams,
   ListResult,
   DataRecord,
@@ -30,9 +31,15 @@ export interface DataAdapter {
   ): Promise<ListResult<T>>;
 
   /**
-   * Fetch a single record by ID
+   * Fetch a single record by ID. `params.select` is a PostgREST select string,
+   * embeds included. EverystackAdapter ignores it on the crudRpcs branch.
+   * `params.deleted` reads a soft-deleted row (see ListParams.deleted).
    */
-  fetchOne<T extends DataRecord = DataRecord>(resource: string, id: string | number): Promise<T>;
+  fetchOne<T extends DataRecord = DataRecord>(
+    resource: string,
+    id: string | number,
+    params?: { select?: string; deleted?: DeletedMode }
+  ): Promise<T>;
 
   /**
    * Create a new record
@@ -40,12 +47,14 @@ export interface DataAdapter {
   create<T extends DataRecord = DataRecord>(resource: string, data: Omit<T, 'id'>): Promise<T>;
 
   /**
-   * Update an existing record
+   * Update an existing record. `params.deleted` lets the write match a
+   * soft-deleted row: Restore sends `{ [column]: null }` with `{ deleted: 'only' }`.
    */
   update<T extends DataRecord = DataRecord>(
     resource: string,
     id: string | number,
-    data: Partial<T>
+    data: Partial<T>,
+    params?: { deleted?: DeletedMode }
   ): Promise<T>;
 
   /**
@@ -58,6 +67,8 @@ export interface DataAdapter {
    * EverystackAdapter queries the table named after the resource; unlike its
    * fetchList it has no listRpcs path. For a resource whose name is not a
    * table, override aggregate() together with fetchList().
+   * Honour `params.deleted`: an aggregate that ignores it counts live rows on
+   * a Deleted tab, and the admin cannot tell.
    */
   aggregate?(resource: string, params: AggregateParams): Promise<AggregateResult>;
 

package/src/components/AdminLink.tsx

@@ -0,0 +1,59 @@
+/**
+ * AdminLink — a link to an admin screen of another resource.
+ *
+ * The href comes from adminHref, the same builder AdminRouter uses. With no
+ * AdminNavigationContext, or a resource the admin does not configure, it
+ * renders the children as plain Text: there is nowhere to go.
+ *
+ * The link claims the press, so a press in a list row does not also fire the
+ * row's onRowPress. `href` lets react-native-web render an anchor.
+ */
+
+import React, { type ReactNode } from 'react';
+import { Pressable, Text } from 'react-native';
+import { useAdminNavigation } from '../hooks/useAdminNavigation';
+import { adminHref } from '../utils/admin-routing';
+
+export interface AdminLinkProps {
+  to: { resource: string; id?: string | number; action?: 'show' | 'edit' };
+  children: ReactNode;
+  numberOfLines?: number;
+}
+
+interface PressEvent {
+  stopPropagation?: () => void;
+  preventDefault?: () => void;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  shiftKey?: boolean;
+}
+
+export function AdminLink({ to, children, numberOfLines }: AdminLinkProps): React.ReactElement {
+  const navigation = useAdminNavigation();
+  if (!navigation || !navigation.resources.includes(to.resource)) {
+    return <Text className="text-sm text-gray-900" numberOfLines={numberOfLines}>{children}</Text>;
+  }
+  const href = adminHref(navigation.basePath, {
+    resource: to.resource,
+    id: to.id,
+    action: to.action === 'edit' ? 'edit' : undefined,
+  });
+  // react-native's Pressable types have no `href`; react-native-web reads it.
+  const anchor = { href } as Record<string, unknown>;
+  return (
+    <Pressable
+      accessibilityRole="link"
+      {...anchor}
+      onPress={(e?: PressEvent) => {
+        e?.stopPropagation?.();
+        // A modifier click is the browser's: the anchor opens a new tab.
+        if (e?.metaKey || e?.ctrlKey || e?.shiftKey) return;
+        // The anchor would load the page itself on web; the router navigates instead.
+        e?.preventDefault?.();
+        navigation.push(href);
+      }}
+    >
+      <Text className="text-sm text-blue-600 underline" numberOfLines={numberOfLines}>{children}</Text>
+    </Pressable>
+  );
+}

package/src/components/DeletePreview.tsx

@@ -0,0 +1,109 @@
+/**
+ * DeletePreview — before a delete, how many rows each declared association links
+ * to this record. The counts are information only: a count that fails shows `?`,
+ * and Confirm never waits for them or depends on them. It adds no write.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@everystack/ui';
+import type { DataAdapter } from '../adapters/types';
+import type { AssociationConfig } from '../types';
+import { safeRelationId } from '../hooks/useRelationLabels';
+
+/** Each association costs one request, so the preview counts at most this many. */
+export const MAX_ASSOCIATIONS = 12;
+
+export interface DeletePreviewProps {
+  adapter: DataAdapter;
+  /** e.g. 'Contents' */
+  label: string;
+  id: string | number;
+  associations: AssociationConfig[];
+  /** The resource soft-deletes, so the linked rows stay as they are. */
+  softDelete: boolean;
+  /** The existing delete path. */
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+}
+
+/** The linked rows of one association: a `count` aggregate when the adapter has one, else a one-row list's total. */
+export async function countAssociation(adapter: DataAdapter, association: AssociationConfig, id: string | number): Promise<number> {
+  const safeId = safeRelationId(id);
+  if (safeId === null) throw new Error('Association count needs a safe record id');
+  // The adapter skips an undefined filter value, so a missing typeValue would count every type.
+  if (association.typeColumn && association.typeValue == null) {
+    throw new Error(`association "${association.label}": typeColumn needs a typeValue`);
+  }
+  const filter = {
+    [association.foreignKey]: `eq.${safeId}`,
+    ...(association.typeColumn ? { [association.typeColumn]: association.typeValue } : {}),
+  };
+  if (adapter.aggregate) {
+    const result = await adapter.aggregate(association.resource, { aggregates: [{ function: 'count' }], filter });
+    return Number(result.data[0]?.count ?? 0);
+  }
+  return (await adapter.fetchList(association.resource, { page: 1, perPage: 1, filter })).total;
+}
+
+type Count = number | '?' | undefined;
+
+export function DeletePreview({
+  adapter,
+  label,
+  id,
+  associations,
+  softDelete,
+  onConfirm,
+  onCancel,
+}: DeletePreviewProps): React.ReactElement {
+  const shown = associations.slice(0, MAX_ASSOCIATIONS);
+  const [counts, setCounts] = useState<Count[]>([]);
+  const busy = useRef(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (associations.length > MAX_ASSOCIATIONS) {
+      console.warn(`[admin] ${label}: only the first ${MAX_ASSOCIATIONS} associations are counted`);
+    }
+    let live = true;
+    setCounts([]);
+    Promise.allSettled(associations.slice(0, MAX_ASSOCIATIONS).map(a => countAssociation(adapter, a, id)))
+      .then(results => {
+        if (live) setCounts(results.map(r => (r.status === 'fulfilled' ? r.value : '?')));
+      });
+    return () => { live = false; };
+  }, [adapter, associations, id, label]);
+
+  const confirm = async (): Promise<void> => {
+    if (busy.current) return;
+    busy.current = true;
+    setError(null);
+    try {
+      await onConfirm();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      busy.current = false;
+    }
+  };
+
+  return (
+    <View testID="delete-preview" className="mx-4 mb-4 p-3 rounded-md bg-red-50">
+      <Text className="text-base font-semibold text-red-800 mb-2">{`Delete ${label} #${String(id)}?`}</Text>
+      {shown.map((association, i) => (
+        <Text key={`${association.resource}:${association.foreignKey}:${i}`} className="text-sm text-gray-900">
+          {`${association.label}: ${counts[i] ?? '…'}`}
+        </Text>
+      ))}
+      <Text className="text-xs text-gray-600 mt-2">
+        {softDelete ? 'Nothing is deleted from these tables.' : 'These rows will be left without their record.'}
+      </Text>
+      <View className="flex-row gap-2 mt-3">
+        <Button label="Confirm" variant="destructive" onPress={confirm} />
+        <Button label="Cancel" variant="outline" onPress={onCancel} />
+      </View>
+      {error && <Text className="text-xs text-red-600 mt-1">{error}</Text>}
+    </View>
+  );
+}

package/src/components/RelationFieldInput.tsx

@@ -0,0 +1,159 @@
+/**
+ * RelationFieldInput
+ *
+ * Create/edit picker for `type: 'relation'`. Typing searches the related
+ * resource 250 ms after the last key: digits search by `relation.field`, other
+ * text searches `relation.displayField` through ListParams.search (the
+ * adapter escapes it). Without a displayField, text that passes
+ * safeRelationId is matched exactly by `relation.field`. A result
+ * reads `#id name`; a pick saves the fetched row's `relation.field` value, so
+ * a number stays a number.
+ *
+ * The current value shows as a chip with a Clear control. A picked row names
+ * its own chip; a stored value gets its name from useRelationLabels, one
+ * lookup on mount.
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { TextInput } from '@everystack/ui';
+import { useRelationLabels, safeRelationId } from '../hooks/useRelationLabels';
+import type { DataAdapter } from '../adapters/types';
+import type { DataRecord, FieldDefinition, ListParams } from '../types';
+
+export interface RelationFieldInputProps {
+  field: FieldDefinition;
+  value: unknown;
+  onChange: (value: string | number | null) => void;
+  adapter: DataAdapter;
+}
+
+const DEBOUNCE_MS = 250;
+const PAGE_SIZE = 10;
+const DIGITS = /^\d+$/;
+
+type Status = 'idle' | 'searching' | 'results' | 'none' | 'failed';
+
+function relationLabel(id: unknown, name: unknown): string {
+  return name != null && name !== '' ? `#${String(id)} ${String(name)}` : `#${String(id)}`;
+}
+
+export function RelationFieldInput({ field, value, onChange, adapter }: RelationFieldInputProps): React.ReactElement {
+  const relation = field.relation;
+  const [text, setText] = useState('');
+  const [status, setStatus] = useState<Status>('idle');
+  const [results, setResults] = useState<DataRecord[]>([]);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Bumped by every search and every pick; a response for an older number is dropped.
+  const requestId = useRef(0);
+  const mounted = useRef(true);
+  // The last picked row, so its chip needs no lookup.
+  const [picked, setPicked] = useState<{ id: string; name: unknown } | null>(null);
+
+  const currentId = safeRelationId(value);
+  const pickedCurrent = picked !== null && picked.id === currentId;
+  const fields = useMemo(() => [field], [field]);
+  const rows = useMemo(
+    () => (pickedCurrent ? [] : [{ [field.name]: value }]),
+    [pickedCurrent, field.name, value],
+  );
+  const labels = useRelationLabels(adapter, fields, rows);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+
+  const search = (query: string): void => {
+    if (!relation) return;
+    const id = ++requestId.current;
+    let params: ListParams;
+    if (DIGITS.test(query) || (!relation.displayField && safeRelationId(query) !== null)) {
+      params = { page: 1, perPage: PAGE_SIZE, filter: { [relation.field]: `eq.${query}` } };
+    } else if (relation.displayField) {
+      params = { page: 1, perPage: PAGE_SIZE, search: query, searchFields: [relation.displayField] };
+    } else {
+      setResults([]);
+      setStatus('none');
+      return;
+    }
+    setStatus('searching');
+    adapter.fetchList(relation.resource, params).then(result => {
+      if (!mounted.current || id !== requestId.current) return;
+      setResults(result.data);
+      setStatus(result.data.length > 0 ? 'results' : 'none');
+    }).catch(() => {
+      if (!mounted.current || id !== requestId.current) return;
+      setResults([]);
+      setStatus('failed');
+    });
+  };
+
+  const onChangeText = (next: string): void => {
+    setText(next);
+    if (timer.current) clearTimeout(timer.current);
+    const query = next.trim();
+    if (query === '') {
+      requestId.current++;
+      setResults([]);
+      setStatus('idle');
+      return;
+    }
+    timer.current = setTimeout(() => search(query), DEBOUNCE_MS);
+  };
+
+  const pick = (row: DataRecord): void => {
+    if (!relation) return;
+    requestId.current++;
+    setText('');
+    setResults([]);
+    setStatus('idle');
+    const id = safeRelationId(row[relation.field]);
+    setPicked(id === null ? null : { id, name: relation.displayField ? row[relation.displayField] : undefined });
+    onChange(row[relation.field] as string | number);
+  };
+
+  const currentName = pickedCurrent
+    ? picked.name
+    : currentId !== null ? labels.get(field.name)?.get(currentId) : undefined;
+  const placeholder = relation?.displayField ? 'Search by name or id' : 'Search by id';
+
+  return (
+    <View>
+      {value != null && value !== '' && (
+        <View className="flex-row items-center gap-2 mb-2">
+          <Text className="text-sm text-gray-900">{relationLabel(value, currentName)}</Text>
+          <Pressable accessibilityRole="button" accessibilityLabel="Clear" onPress={() => onChange(null)}>
+            <Text className="text-sm text-gray-500">×</Text>
+          </Pressable>
+        </View>
+      )}
+      <TextInput value={text} onChangeText={onChangeText} placeholder={placeholder} />
+      {status === 'searching' && <Text className="text-sm text-gray-500 mt-1">Searching…</Text>}
+      {status === 'none' && <Text className="text-sm text-gray-500 mt-1">No matches</Text>}
+      {status === 'failed' && <Text className="text-sm text-red-600 mt-1">Lookup failed</Text>}
+      {status === 'results' && relation && (
+        <View className="mt-1 border border-gray-200 rounded-lg">
+          {results.map(row => {
+            const id = row[relation.field];
+            const name = relation.displayField ? row[relation.displayField] : undefined;
+            return (
+              <Pressable
+                key={String(id)}
+                testID={`relation-${field.name}-option-${String(id)}`}
+                accessibilityRole="button"
+                onPress={() => pick(row)}
+                className="px-3 py-2"
+              >
+                <Text className="text-sm text-gray-900">{relationLabel(id, name)}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/RelationValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { AdminLink } from './AdminLink';
+import { safeRelationId } from '../hooks/useRelationLabels';
+
+/**
+ * A relation value: the label (else the id) linked to the related show page.
+ * Null or empty shows nothing. An id that is unsafe in a path shows as plain text.
+ */
+export function RelationValue({ resource, value, labels, numberOfLines }: {
+  resource: string;
+  value: unknown;
+  labels: Map<string, string> | undefined;
+  numberOfLines?: number;
+}): React.ReactElement | null {
+  if (value == null || value === '') return null;
+  const id = safeRelationId(value);
+  if (id === null) {
+    return <Text className="text-sm text-gray-900" numberOfLines={numberOfLines}>{String(value)}</Text>;
+  }
+  return (
+    <AdminLink to={{ resource, id }} numberOfLines={numberOfLines}>
+      {labels?.get(id) ?? id}
+    </AdminLink>
+  );
+}

package/src/hooks/useAdminData.ts

@@ -126,6 +126,8 @@ export function useAdminData<T extends DataRecord = DataRecord>(
     filter,
     search: options.search ?? null,
     searchFields: options.searchFields ?? null,
+    select: options.select ?? null,
+    deleted: options.deleted ?? null,
   });
   const reqKey = `${paramsKey}#${refetchIndex}`;
 
@@ -165,6 +167,8 @@ export function useAdminData<T extends DataRecord = DataRecord>(
         filter: { ...(options.baseFilter ?? {}), ...filter },
         ...(options.search !== undefined ? { search: options.search } : {}),
         ...(options.searchFields !== undefined ? { searchFields: options.searchFields } : {}),
+        ...(options.select ? { select: options.select } : {}),
+        ...(options.deleted ? { deleted: options.deleted } : {}),
       })
       .then(result => {
         if (seq !== seqRef.current) return;

package/src/hooks/useAdminNavigation.ts

@@ -0,0 +1,19 @@
+/**
+ * AdminNavigationContext — what an admin link needs to navigate: the router's
+ * push, the admin's mount point, and the configured resource names (a link
+ * to any other resource renders as plain text). AdminRouter provides it.
+ */
+
+import { createContext, useContext } from 'react';
+
+export interface AdminNavigationContextValue {
+  push(href: string): void;
+  basePath: string;
+  resources: string[];
+}
+
+export const AdminNavigationContext = createContext<AdminNavigationContextValue | null>(null);
+
+export function useAdminNavigation(): AdminNavigationContextValue | null {
+  return useContext(AdminNavigationContext);
+}

package/src/hooks/useListQuery.ts

@@ -19,6 +19,8 @@ export interface UseListQueryResult {
 export interface UseListQueryOptions {
   /** The resource's page size. A query at this size leaves `size` out of the URL. */
   defaultPerPage?: number;
+  /** The resource's default scope id. A query on this scope leaves `tab` out of the URL. */
+  defaultScope?: string;
 }
 
 export function useListQuery(options: UseListQueryOptions = {}): UseListQueryResult {
@@ -31,13 +33,13 @@ export function useListQuery(options: UseListQueryOptions = {}): UseListQueryRes
 
   // `update` is stable but must read the newest query: a debounce timer or an
   // event handler may call it from a render that is already out of date.
-  const latest = useRef({ query, setParams: view?.setParams, defaultPerPage: options.defaultPerPage });
-  latest.current = { query, setParams: view?.setParams, defaultPerPage: options.defaultPerPage };
+  const latest = useRef({ query, setParams: view?.setParams, defaultPerPage: options.defaultPerPage, defaultScope: options.defaultScope });
+  latest.current = { query, setParams: view?.setParams, defaultPerPage: options.defaultPerPage, defaultScope: options.defaultScope };
 
   const update = useCallback((patch: Partial<ListQuery>) => {
-    const { query: current, setParams, defaultPerPage } = latest.current;
+    const { query: current, setParams, defaultPerPage, defaultScope } = latest.current;
     const next = updateListQuery(current, patch);
-    if (setParams) setParams(listQueryToParams(next, { defaultPerPage }));
+    if (setParams) setParams(listQueryToParams(next, { defaultPerPage, defaultScope }));
     else setLocal(next);
   }, []);