@everystack/admin 0.4.2 → 0.4.4

package/src/screens/ResourceList.tsx

@@ -3,19 +3,41 @@
  *
  * List view for a resource with sortable table, search/filter, and pagination.
  * Wires useAdminData() to DataTable, FilterBar, and PaginationBar components.
+ *
+ * The list's search, sort, page and page size live in the URL (useListQuery),
+ * so a list view is a link. The search box waits for a pause in typing before writing it.
  */
 
-import React, { useCallback, useMemo } from 'react';
+/** How long the search box waits after the last keystroke before it searches. */
+const SEARCH_DEBOUNCE_MS = 300;
+
+/** Rows per page when the resource names no `perPage`. */
+const DEFAULT_PER_PAGE = 20;
+/** Sizes the page bar always offers; the resource's own size is added when missing. */
+const PAGE_SIZES = [20, 50, 100];
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, Text } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useAdminData, useDataAdapter } from '../hooks/useAdminData';
-import { DataTable, FilterBar, PaginationBar, LoadingState, ErrorState, EmptyState, Button, type DataTableColumn } from '@everystack/ui';
+import { useListQuery } from '../hooks/useListQuery';
+import { useAdminNavigation } from '../hooks/useAdminNavigation';
+import { adminHref } from '../utils/admin-routing';
+import { buildListParams, mergeFilters, nextSort, normalizeSearchText, pageForSize, parseListQuery, resolvePageSize } from '../utils/list-query';
+import { resolveScope } from '../utils/scopes';
+import { useScopeCounts } from '../hooks/useScopeCounts';
+import { RESERVED_PARAMS } from '../utils/view-filters';
+import { DataTable, FilterBar, PaginationBar, ScopeTabs, LoadingState, ErrorState, EmptyState, Button, type DataTableColumn } from '@everystack/ui';
 import { formatCellValue } from '../utils/format-cell-value';
 import { cellRenderKind } from '../utils/render-resolution';
-import { visibleRowActions } from '../utils/row-actions';
+import { estimateActionsWidth, visibleRowActions } from '../utils/row-actions';
 import { standardRowActions } from '../utils/standard-actions';
 import { ImageDisplay } from '../components/ImageDisplay';
 import { RowActionButton } from '../components/RowActionButton';
+import { InlineEnumCell } from '../components/InlineEnumCell';
+import { wrapBareText } from '../components/CellText';
+import { RelationValue } from '../components/RelationValue';
+import { useRelationLabels, type RelationLabels } from '../hooks/useRelationLabels';
 import type { DataAdapter } from '../adapters/types';
 import type { ResourceConfig, FieldDefinition, DataRecord, RowActionConfig } from '../types';
 
@@ -41,61 +63,151 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
   const resourceConfig = config.resources.find(r => r.name === resource);
 
   const defaultSort = resourceConfig?.defaultSort;
+  const defaultPerPage = resolvePageSize(resourceConfig?.perPage, DEFAULT_PER_PAGE);
+  const pageSizes = useMemo(
+    () => [...new Set([...PAGE_SIZES, defaultPerPage])].sort((a, b) => a - b),
+    [defaultPerPage],
+  );
+  const defaultScope = resolveScope(resourceConfig?.scopes, undefined)?.id;
+  const { query, update } = useListQuery({ defaultPerPage, defaultScope });
+
+  const searchFields = useMemo(
+    () => resourceConfig?.fields.filter(f => f.searchable).map(f => f.name) ?? [],
+    [resourceConfig],
+  );
+  const sortableFields = useMemo(
+    () => new Set(resourceConfig?.fields.filter(f => f.sortable).map(f => f.name) ?? []),
+    [resourceConfig],
+  );
+  const activeScope = useMemo(
+    () => resolveScope(resourceConfig?.scopes, query.scope),
+    [resourceConfig, query.scope],
+  );
+  const listParams = useMemo(
+    () => buildListParams(query, {
+      perPage: defaultPerPage, baseFilter, scopeFilter: activeScope?.filter, scopeDeleted: activeScope?.deleted, sortableFields, defaultSort,
+    }),
+    [query, defaultPerPage, baseFilter, activeScope, sortableFields, defaultSort],
+  );
+
+  const searchParams = adapter.supportsSearch === true && searchFields.length > 0
+    ? { search: listParams.search, searchFields }
+    : {};
+  const legacySearchFilter = useMemo(() => {
+    const text = normalizeSearchText(query.search);
+    return adapter.supportsSearch !== true && text && searchFields[0]
+      ? { [searchFields[0]]: `ilike.*${text}*` }
+      : undefined;
+  }, [adapter.supportsSearch, query.search, searchFields]);
+
+  // Bumped after an inline edit, so the tab counts follow the change.
+  const [countsToken, setCountsToken] = useState(0);
+  const scopeCounts = useScopeCounts({
+    resource,
+    scopes: resourceConfig?.scopes,
+    enabled: Boolean(resourceConfig?.scopeCounts),
+    baseFilter: mergeFilters(baseFilter, legacySearchFilter),
+    ...searchParams,
+    refreshToken: countsToken,
+  });
+
   const {
     data,
     total,
     loading,
+    refreshing,
     error,
     refetch,
     page,
     perPage,
-    setPage,
-    setSort,
-    setFilter,
   } = useAdminData(resource, {
-    sort: defaultSort?.field,
-    order: defaultSort?.order,
-    baseFilter,
+    controlled: true,
+    page: listParams.page,
+    perPage: listParams.perPage,
+    sort: listParams.sort,
+    order: listParams.order,
+    ...searchParams,
+    select: resourceConfig?.select,
+    deleted: listParams.deleted,
+    baseFilter: mergeFilters(listParams.filter, legacySearchFilter),
   });
 
+  // A column named like a list URL param cannot be filtered from the URL: say so while developing.
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    const clashes = (resourceConfig?.fields ?? []).map(f => f.name).filter(name => RESERVED_PARAMS.has(name));
+    if (clashes.length === 0) return;
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[admin] resource "${resource}" has ${clashes.map(c => `"${c}"`).join(', ')}, a name the list reserves for its URL ` +
+      `(reserved: ${[...RESERVED_PARAMS].join(', ')}). That column cannot be filtered with ?${clashes[0]}=... in the URL.`,
+    );
+  }, [resourceConfig, resource]);
+
+  // The box shows what the user typed; the URL gets it after a pause. When the
+  // URL changes by itself (back button, a link), the box follows.
+  const [searchText, setSearchText] = useState(query.search ?? '');
+  const lastWritten = useRef(query.search);
+  useEffect(() => {
+    if (query.search === lastWritten.current) return;
+    lastWritten.current = query.search;
+    setSearchText(query.search ?? '');
+  }, [query.search]);
+  useEffect(() => {
+    const wanted = parseListQuery({ q: searchText }).search;
+    // Against what we last wrote, not the URL's current value: the URL may not have caught up.
+    if (wanted === lastWritten.current) return;
+    const timer = setTimeout(() => {
+      lastWritten.current = wanted;
+      update({ search: wanted });
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+    // `query.search` is read, not watched: re-running on it would restart the pause.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText]);
+
+  // Relation cells print the related row's displayField, one request per related resource per page.
+  const relationFields = useMemo(() => {
+    if (!resourceConfig) return [];
+    const listed = new Set(resourceConfig.listFields ?? resourceConfig.fields.map(f => f.name));
+    return resourceConfig.fields.filter(f => listed.has(f.name) && f.type === 'relation' && !f.render);
+  }, [resourceConfig]);
+  const relationLabels = useRelationLabels(adapter, relationFields, data);
+
   // Build columns from field definitions, plus an actions column combining the
   // built-in Show/Edit/Delete (gated by actions.*) with any custom rowActions.
+  // Returns the refetch, so the cell can re-sync once the new rows are in.
+  const afterInlineEdit = useCallback((): Promise<void> => {
+    setCountsToken(t => t + 1);
+    return refetch();
+  }, [refetch]);
+
+  const deletedOnly = listParams.deleted === 'only';
+  // Under AdminRouter, Delete on a resource with associations opens Show with its delete preview.
+  const navigation = useAdminNavigation();
   const columns = useMemo(() => {
     if (!resourceConfig) return [];
-    const cols = fieldsToColumns(resourceConfig);
+    const cols = fieldsToColumns(resourceConfig, adapter, afterInlineEdit, relationLabels, deletedOnly);
+    const onConfirmDelete = navigation
+      ? (record: DataRecord) => {
+        const id = (record[resourceConfig.primaryKey ?? 'id'] as string | number) ?? record.id;
+        navigation.push(`${adminHref(navigation.basePath, { resource, id })}?confirmDelete=1`);
+      }
+      : undefined;
     const actions = [
-      ...standardRowActions(resourceConfig, { onShow: onRowPress, onEdit: onEditPress }),
+      ...standardRowActions(resourceConfig, { onShow: onRowPress, onEdit: onEditPress, onConfirmDelete }, { deletedOnly }),
       ...(resourceConfig.rowActions ?? []),
     ];
     if (actions.length) {
       cols.push(actionsColumn(resourceConfig, actions, adapter, refetch));
     }
     return cols;
-  }, [resourceConfig, adapter, refetch, onRowPress, onEditPress]);
-
-  // Build filter chips from filterable fields
-  const filterChips = useMemo(() => {
-    if (!resourceConfig) return [];
-    return resourceConfig.fields
-      .filter(f => f.filterable)
-      .map(f => ({ key: f.name, label: f.label ?? f.name }));
-  }, [resourceConfig]);
+  }, [resourceConfig, adapter, refetch, afterInlineEdit, onRowPress, onEditPress, relationLabels, deletedOnly, navigation, resource]);
 
+  // The click cycles from what is shown (the default sort included), not from the URL alone.
   const handleSort = useCallback((key: string) => {
-    setSort(key, 'asc');
-  }, [setSort]);
-
-  const handleSearch = useCallback((query: string) => {
-    if (!query) {
-      setFilter({});
-      return;
-    }
-    // Search across searchable fields using ilike
-    const searchableFields = resourceConfig?.fields.filter(f => f.searchable) ?? [];
-    if (searchableFields.length > 0) {
-      setFilter({ [searchableFields[0].name]: `ilike.*${query}*` });
-    }
-  }, [resourceConfig, setFilter]);
+    update(nextSort({ sort: listParams.sort, order: listParams.order }, key, defaultSort));
+  }, [update, listParams.sort, listParams.order, defaultSort]);
 
   if (!resourceConfig) {
     return (
@@ -117,27 +229,51 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
       </View>
 
       {/* Filter bar */}
-      <FilterBar
-        placeholder={`Search ${label.toLowerCase()}...`}
-        onSearch={handleSearch}
-        filters={filterChips}
-      />
+      {searchFields.length > 0 ? (
+        <FilterBar
+          placeholder={`Search ${label.toLowerCase()}...`}
+          onSearch={setSearchText}
+          value={searchText}
+        />
+      ) : null}
+      {query.search && searchFields.length > 0 && (!loading || refreshing) && !error ? (
+        <Text className="px-4 pb-2 text-sm text-gray-500">
+          {`${total} ${total === 1 ? 'result' : 'results'}`}
+        </Text>
+      ) : null}
 
-      {/* Content */}
-      {loading ? (
+      {resourceConfig.scopes && resourceConfig.scopes.length > 0 && activeScope ? (
+        <ScopeTabs
+          tabs={resourceConfig.scopes.map(scope => ({ id: scope.id, label: scope.label, count: scopeCounts?.[scope.id] }))}
+          active={activeScope.id}
+          onChange={id => update({ scope: id })}
+        />
+      ) : null}
+
+      {/* Content. An explicit refetch keeps the table, and its cells, on screen until new rows land. */}
+      {loading && !refreshing ? (
         <LoadingState message={`Loading ${label.toLowerCase()}...`} />
       ) : error ? (
         <ErrorState message={error.message} onRetry={refetch} />
       ) : data.length === 0 ? (
-        <EmptyState
-          title={`No ${label.toLowerCase()}`}
-          message={`No ${label.toLowerCase()} found. ${canCreate ? 'Create one to get started.' : ''}`}
-        />
+        query.search ? (
+          <EmptyState title={`No results for \u201c${query.search}\u201d`} message="Try a different search." />
+        ) : (
+          <EmptyState
+            title={`No ${label.toLowerCase()}`}
+            message={`No ${label.toLowerCase()} found. ${canCreate ? 'Create one to get started.' : ''}`}
+          />
+        )
       ) : (
         <DataTable
           columns={columns}
           data={data}
           onSort={handleSort}
+          sortField={listParams.sort}
+          sortOrder={listParams.order}
+          // Key rows by the record's own key, so a row's cell state (an inline-enum
+          // error, a row action's message) stays with that record across a refetch.
+          rowKey={resourceConfig?.primaryKey ?? 'id'}
           // A list-only resource (actions.show === false) has no detail screen —
           // don't make rows navigate to a fetchOne that 404s. The row-action menu
           // already hides "Show" via standardRowActions; this gates the whole-row tap.
@@ -151,7 +287,9 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
           page={page}
           perPage={perPage}
           total={total}
-          onPageChange={setPage}
+          onPageChange={next => update({ page: next })}
+          pageSizes={pageSizes}
+          onPerPageChange={size => update({ perPage: size, page: pageForSize(page, perPage, size) })}
         />
       )}
     </View>
@@ -162,7 +300,13 @@ export function ResourceList({ resource, onRowPress, onEditPress, onCreatePress,
 // Helpers
 // =============================================================================
 
-function fieldsToColumns(resourceConfig: ResourceConfig): DataTableColumn[] {
+function fieldsToColumns(
+  resourceConfig: ResourceConfig,
+  adapter: DataAdapter,
+  onInlineSaved: () => Promise<void>,
+  relationLabels: RelationLabels,
+  deletedOnly: boolean,
+): DataTableColumn[] {
   const fieldNames = resourceConfig.listFields ?? resourceConfig.fields.map(f => f.name);
   const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
 
@@ -173,18 +317,50 @@ function fieldsToColumns(resourceConfig: ResourceConfig): DataTableColumn[] {
       key: field.name,
       label: field.label ?? field.name,
       sortable: field.sortable,
-      render: cellRenderer(field),
+      ...(field.listWidth !== undefined && { width: field.listWidth }),
+      ...(field.listPriority !== undefined && { priority: field.listPriority }),
+      ...(field.listHideBelow !== undefined && { hideBelow: field.listHideBelow }),
+      render: cellRenderer(field, resourceConfig, adapter, onInlineSaved, relationLabels, deletedOnly),
     }));
 }
 
 /**
  * Cell rendering precedence: custom render → image thumbnail → type text.
- * (See render-resolution.cellRenderKind.)
+ * (See render-resolution.cellRenderKind.) An `inlineEdit` enum field shows a
+ * picker in place of the type text, unless the resource sets `actions.edit: false`
+ * or the tab lists deleted rows only (the save matches live rows only, so it would fail).
+ * A relation field links to the related show page, labelled with its displayField.
  */
-function cellRenderer(field: FieldDefinition): DataTableColumn['render'] {
-  switch (cellRenderKind(field)) {
+function cellRenderer(
+  field: FieldDefinition,
+  resourceConfig: ResourceConfig,
+  adapter: DataAdapter,
+  onInlineSaved: () => Promise<void>,
+  relationLabels: RelationLabels,
+  deletedOnly: boolean,
+): DataTableColumn['render'] {
+  const kind = cellRenderKind(field);
+  const relation = field.relation;
+  if (kind === 'text' && field.type === 'relation' && relation) {
+    return (value) => <RelationValue resource={relation.resource} value={value} labels={relationLabels.get(field.name)} numberOfLines={1} />;
+  }
+  if (kind === 'text' && field.inlineEdit === true && field.type === 'enum' && resourceConfig.actions?.edit !== false && !deletedOnly) {
+    const primaryKey = resourceConfig.primaryKey ?? 'id';
+    return (value, record) => (
+      <InlineEnumCell
+        resource={resourceConfig.name}
+        field={field.name}
+        recordId={(record[primaryKey] as string | number) ?? (record.id as string | number)}
+        value={value}
+        enumValues={field.enumValues ?? []}
+        adapter={adapter}
+        onSaved={onInlineSaved}
+      />
+    );
+  }
+  switch (kind) {
     case 'custom':
-      return (value, record) => field.render!(value, record as DataRecord, { view: 'list' });
+      return (value, record) => wrapBareText(field.render!(value, record as DataRecord, { view: 'list' }), 1);
     case 'image':
       return (value) => <ImageDisplay field={field} value={value} view="list" />;
     default:
@@ -196,6 +372,13 @@ function cellRenderer(field: FieldDefinition): DataTableColumn['render'] {
   }
 }
 
+/** The resource's actionsWidth when it is a finite number above 0, else the estimate from the labels. */
+function actionsColumnWidth(configured: number | undefined, actions: RowActionConfig[]): number {
+  return typeof configured === 'number' && Number.isFinite(configured) && configured > 0
+    ? configured
+    : estimateActionsWidth(actions);
+}
+
 /**
  * A trailing column of per-row actions, each gated by its `when` clause.
  * The cell claims the press so tapping an action doesn't also fire the row's
@@ -211,11 +394,16 @@ function actionsColumn(
   return {
     key: '__actions',
     label: 'Actions',
+    // Rows cannot share a content-sized width in a flex layout, so the width is a number.
+    width: actionsColumnWidth(resourceConfig.actionsWidth, actions),
+    // Every row needs its actions, so a narrow list never drops this column.
+    // `keep` rather than priority 1, which would turn dropping on for every list with actions.
+    keep: true,
     render: (_value, record) => {
       const visible = visibleRowActions(actions, record);
       if (!visible.length) return null;
       return (
-        <View className="flex-row gap-2" onStartShouldSetResponder={() => true}>
+        <View className="flex-row flex-wrap gap-2" onStartShouldSetResponder={() => true}>
           {visible.map(action => (
             <RowActionButton
               key={action.id}

package/src/screens/ResourceShow.tsx

@@ -5,14 +5,23 @@
  * Fetches via adapter.fetchOne() and displays field values.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useCallback, useMemo, useRef } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
-import { LoadingState, ErrorState, Button, Card, Divider } from '@everystack/ui';
+import { LoadingState, ErrorState, Button, Card, Divider, RichContent } from '@everystack/ui';
 import { ImageDisplay } from '../components/ImageDisplay';
+import { TagsDisplay } from '../components/TagsDisplay';
 import { RowActionButton } from '../components/RowActionButton';
+import { DeletePreview } from '../components/DeletePreview';
+import { FieldColumns } from '../components/FieldColumns';
+import { RelationValue } from '../components/RelationValue';
+import { useRelationLabels, type RelationLabels } from '../hooks/useRelationLabels';
+import { useEditors } from '../hooks/useEditors';
+import { resolveColumns, screenLayout } from '../utils/resolve-columns';
+import { wrapBareText } from '../components/CellText';
 import { visibleRowActions } from '../utils/row-actions';
+import { restoreAction, softDeleteColumn } from '../utils/standard-actions';
 import { toCamelCase } from '../utils/naming';
 import { formatDateOnly } from '../utils/format-cell-value';
 import type { FieldDefinition, DataRecord, ResourceConfig } from '../types';
@@ -25,10 +34,15 @@ export interface ResourceShowProps {
   id: string | number;
   /** Called when the edit button is pressed */
   onEditPress?: () => void;
-  /** Called when the delete button is pressed */
-  onDeletePress?: () => void;
+  /**
+   * Called when the delete button is pressed. When the resource declares
+   * `associations`, Delete opens the delete preview and its Confirm calls this.
+   */
+  onDeletePress?: () => void | Promise<void>;
   /** Called when the back/list button is pressed */
   onBackPress?: () => void;
+  /** Open the delete preview on mount (a resource with `associations` only). */
+  confirmDelete?: boolean;
 }
 
 export function ResourceShow({
@@ -37,31 +51,66 @@ export function ResourceShow({
   onEditPress,
   onDeletePress,
   onBackPress,
+  confirmDelete,
 }: ResourceShowProps): React.ReactElement {
   const config = useAdminConfig();
   const adapter = useDataAdapter();
   const resourceConfig = config.resources.find(r => r.name === resource);
+  const editors = useEditors();
 
   const [record, setRecord] = useState<DataRecord | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  // Declared associations put a preview of the linked rows between Delete and the delete.
+  const [previewOpen, setPreviewOpen] = useState(Boolean(confirmDelete));
 
-  const fetchRecord = useCallback(async () => {
-    setLoading(true);
+  // Latest-request guard: only the most recent load may write state, so an older
+  // id's or an older request's response can't land over a newer one.
+  const seqRef = useRef(0);
+  // The id on screen now. A load captured for an older id (a row action's refetch
+  // after it navigated away) writes nothing.
+  const idRef = useRef(id);
+  // Set when the id commits, not during render: a render React throws away must not move it.
+  // Declared before the fetch effect, so a layout effect always runs first.
+  useLayoutEffect(() => { idRef.current = id; }, [id]);
+
+  // A quiet load keeps the screen (and a row action's error) mounted; it still
+  // ends in the ErrorState when the fetch throws, so stale data never stays.
+  // A superseded load still resolves; it just writes nothing.
+  const loadRecord = useCallback(async (quiet: boolean): Promise<void> => {
+    // A call from an older id's closure takes no turn, so it cannot supersede the current load.
+    if (id !== idRef.current) return;
+    const seq = ++seqRef.current;
+    // An id change starts a new load (a new seq), so the seq alone drops an older id's result.
+    const latest = (): boolean => seq === seqRef.current;
+    if (!quiet) setLoading(true);
     setError(null);
     try {
-      setRecord(await fetchDetail(adapter, resource, id, resourceConfig));
+      const next = await fetchDetail(adapter, resource, id, resourceConfig);
+      if (latest()) setRecord(next);
     } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
+      if (latest()) setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
-      setLoading(false);
+      if (latest()) setLoading(false);
     }
   }, [adapter, resource, id, resourceConfig]);
 
+  const fetchRecord = useCallback((): Promise<void> => loadRecord(false), [loadRecord]);
+  const refetchQuietly = useCallback((): Promise<void> => loadRecord(true), [loadRecord]);
+
   useEffect(() => {
     fetchRecord();
   }, [fetchRecord]);
 
+  // Relation fields print the related row's displayField (one request per related resource).
+  const relationFields = useMemo(() => {
+    if (!resourceConfig) return [];
+    const shown = new Set(resourceConfig.showFields ?? resourceConfig.fields.map(f => f.name));
+    return resourceConfig.fields.filter(f => shown.has(f.name) && f.type === 'relation' && !f.render);
+  }, [resourceConfig]);
+  const relationRows = useMemo(() => (record ? [record] : []), [record]);
+  const relationLabels = useRelationLabels(adapter, relationFields, relationRows);
+
   if (!resourceConfig) {
     return <ErrorState message={`Resource "${resource}" not found in admin configuration`} />;
   }
@@ -81,9 +130,23 @@ export function ResourceShow({
   const label = resourceConfig.label ?? resourceConfig.name;
   const showFields = resourceConfig.showFields ?? resourceConfig.fields.map(f => f.name);
   const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
-  const canEdit = resourceConfig.actions?.edit !== false;
-  const canDelete = resourceConfig.actions?.delete !== false;
+  // A soft-deleted row shows a banner with Restore instead of Edit and Delete.
+  const deletedColumn = softDeleteColumn(resourceConfig);
+  const deletedAt = deletedColumn ? record[deletedColumn] : undefined;
+  const isDeleted = deletedAt != null;
+  const restore = isDeleted ? restoreAction(resourceConfig) : undefined;
+  const canEdit = resourceConfig.actions?.edit !== false && !isDeleted;
+  const canDelete = resourceConfig.actions?.delete !== false && !isDeleted;
+  const associations = resourceConfig.associations?.length ? resourceConfig.associations : undefined;
   const rowActions = visibleRowActions(resourceConfig.rowActions, record);
+  const layout = screenLayout(resourceConfig, 'show');
+  const columns = layout
+    ? resolveColumns(
+      showFields.map(name => fieldMap.get(name)).filter((f): f is FieldDefinition => f != null),
+      layout,
+      editors,
+    )
+    : null;
 
   return (
     <ScrollView className="flex-1">
@@ -105,28 +168,57 @@ export function ResourceShow({
               record={record}
               recordId={id}
               adapter={adapter}
-              refetch={fetchRecord}
+              refetch={refetchQuietly}
             />
           ))}
           {canEdit && onEditPress && (
             <Button label="Edit" variant="outline" onPress={onEditPress} />
           )}
           {canDelete && onDeletePress && (
-            <Button label="Delete" variant="destructive" onPress={onDeletePress} />
+            <Button label="Delete" variant="destructive" onPress={associations ? () => setPreviewOpen(true) : onDeletePress} />
           )}
         </View>
       </View>
 
+      {previewOpen && associations && canDelete && onDeletePress && (
+        <DeletePreview
+          adapter={adapter}
+          label={label}
+          id={id}
+          associations={associations}
+          softDelete={Boolean(deletedColumn)}
+          onConfirm={async () => { await onDeletePress(); setPreviewOpen(false); }}
+          onCancel={() => setPreviewOpen(false)}
+        />
+      )}
+
+      {restore && (
+        <View testID="soft-delete-banner" className="flex-row items-center justify-between mx-4 mb-4 p-3 rounded-md bg-red-50">
+          <Text className="text-sm text-red-700">{`Deleted ${formatDateTime(deletedAt)}`}</Text>
+          <RowActionButton action={restore} record={record} recordId={id} adapter={adapter} refetch={refetchQuietly} />
+        </View>
+      )}
+
       {/* Fields */}
       <Card style={{ marginHorizontal: 16, marginBottom: 16 }}>
-        {showFields.map((fieldName, idx) => {
+        {columns ? (
+          <FieldColumns
+            columns={columns}
+            renderField={(fieldDef, idx) => (
+              <>
+                {idx > 0 && <Divider />}
+                <FieldRow field={fieldDef} value={record[fieldDef.name]} record={record} labels={relationLabels} />
+              </>
+            )}
+          />
+        ) : showFields.map((fieldName, idx) => {
           const fieldDef = fieldMap.get(fieldName);
           if (!fieldDef) return null;
           const value = record[fieldName];
           return (
             <React.Fragment key={fieldName}>
               {idx > 0 && <Divider />}
-              <FieldRow field={fieldDef} value={value} record={record} />
+              <FieldRow field={fieldDef} value={value} record={record} labels={relationLabels} />
             </React.Fragment>
           );
         })}
@@ -158,7 +250,12 @@ async function fetchDetail(
     }
     return (await adapter.rpc(`${toCamelCase(resource)}EventDetail`, { id })) as DataRecord;
   }
-  return adapter.fetchOne(resource, id);
+  const select = resourceConfig?.select;
+  // A soft-delete resource loads the row even when it is deleted, so Show can offer Restore.
+  if (resourceConfig?.softDelete) {
+    return adapter.fetchOne(resource, id, { ...(select ? { select } : {}), deleted: 'include' });
+  }
+  return select ? adapter.fetchOne(resource, id, { select }) : adapter.fetchOne(resource, id);
 }
 
 // =============================================================================
@@ -169,18 +266,26 @@ interface FieldRowProps {
   field: FieldDefinition;
   value: unknown;
   record: DataRecord;
+  labels: RelationLabels;
 }
 
-function FieldRow({ field, value, record }: FieldRowProps): React.ReactElement {
+function FieldRow({ field, value, record, labels }: FieldRowProps): React.ReactElement {
   return (
     <View className="py-3">
       <Text className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">
         {field.label ?? field.name}
       </Text>
       {field.render ? (
-        <>{field.render(value, record, { view: 'show' })}</>
+        <>{wrapBareText(field.render(value, record, { view: 'show' }))}</>
       ) : field.type === 'image' ? (
         <ImageDisplay field={field} value={value} view="show" />
+      ) : field.type === 'tags' ? (
+        <TagsDisplay field={field} value={value} />
+      ) : field.type === 'relation' && field.relation && value != null && value !== '' ? (
+        <RelationValue resource={field.relation.resource} value={value} labels={labels.get(field.name)} />
+      ) : value != null && (field.format === 'html' || field.format === 'markdown') ? (
+        // Stored rich text is sanitised at render by ui RichContent (web-only).
+        <RichContent value={value} format={field.format} className="text-sm text-gray-900" />
       ) : (
         <Text className="text-sm text-gray-900">{formatFieldValue(value, field)}</Text>
       )}
@@ -188,6 +293,11 @@ function FieldRow({ field, value, record }: FieldRowProps): React.ReactElement {
   );
 }
 
+function formatDateTime(value: unknown): string {
+  const date = new Date(String(value));
+  return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
+}
+
 function formatFieldValue(value: unknown, field: FieldDefinition): string {
   if (value == null) return '\u2014';
 
@@ -196,10 +306,8 @@ function formatFieldValue(value: unknown, field: FieldDefinition): string {
       return value ? 'Yes' : 'No';
     case 'date':
       return formatDateOnly(value);
-    case 'datetime': {
-      const date = new Date(String(value));
-      return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
-    }
+    case 'datetime':
+      return formatDateTime(value);
     case 'json':
       return JSON.stringify(value, null, 2);
     case 'url':