@multiplatform.one/frappe-ui 7.23.2 → 7.24.0

package/dist/cjs/FrappeListView.cjs

@@ -49,14 +49,24 @@ var import_store = require("@multiplatform.one/store");
 var import_FrappeProvider = require("./FrappeProvider.cjs");
 var import_FrappeList = require("./FrappeList.cjs");
 var import_FrappeNotConfigured = require("./FrappeNotConfigured.cjs");
+var import_FrappeRowsReader = require("./FrappeRowsReader.cjs");
 var import_FrappeTable = require("./FrappeTable.cjs");
 var import_useDocRights = require("./formEngine/useDocRights.cjs");
 var import_frappeNavigation = require("./frappeNavigation.cjs");
 var import_frappeConnections = require("./frappeConnections.cjs");
 var import_liveErrors = require("./liveErrors.cjs");
+var import_favorites = require("./list/favorites.cjs");
+var import_RecordCard = require("./list/RecordCard.cjs");
+var import_recordLook = require("./list/recordLook.cjs");
+var import_ListControls = require("./list/ListControls.cjs");
+var import_listState = require("./list/listState.cjs");
+var import_ListToastHost = require("./list/ListToastHost.cjs");
+var import_ShufflePanel = require("./list/ShufflePanel.cjs");
+var import_useListControls = require("./list/useListControls.cjs");
 var import_useConnectionFilters = require("./useConnectionFilters.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const storageKeyPrefix = "frappe-listview-";
+const eagerCards = 6;
 const internalDocKeys = /* @__PURE__ */new Set(["name", "owner", "creation", "modified", "modified_by", "docstatus", "idx", "doctype", "_user_tags", "_comments", "_assign", "_liked_by", "_seen"]);
 const layoutFieldtypes = /* @__PURE__ */new Set(["Column Break", "Section Break", "Tab Break", "HTML", "Heading", "Fold", "Button"]);
 function fieldKeyLabel(key) {
@@ -105,10 +115,12 @@ function FrappeListViewBody({
   route,
   orderBy,
   limit,
-  initialRows,
+  initialRows: initialRowsProp,
+  loader,
   columns,
   displayFields,
   renderCard,
+  look,
   gridProps,
   emptyState,
   onRetry,
@@ -119,13 +131,27 @@ function FrappeListViewBody({
   showFilterSidebar = false,
   // deprecated: switcher always renders; destructured so it stays out of stackProps
   enableViewSwitcher: _enableViewSwitcher,
+  title,
+  subtitle,
+  actions,
+  headerAccessory,
+  titleField,
+  sorts,
+  searchFilter,
+  searchPlaceholder,
+  facets,
+  ranges,
+  favorites,
+  shuffle,
+  urlState = false,
   baseURL,
   auth,
   syncOptions,
   ...stackProps
 }) {
   const config = (0, import_FrappeProvider.useFrappeConfig)();
-  const navigate = (0, import_frappeNavigation.useFrappeRouter)()?.navigate;
+  const router = (0, import_frappeNavigation.useFrappeRouter)();
+  const navigate = router?.navigate;
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
@@ -150,8 +176,6 @@ function FrappeListViewBody({
     fixtures: config?.fixtures
   };
   const [storedViewMode, setViewModeState] = (0, import_react2.useState)(defaultViewMode);
-  const requestedViewMode = controlledViewMode ?? storedViewMode;
-  const viewMode = requestedViewMode === "grid" && !renderCard ? "list" : requestedViewMode;
   (0, import_react2.useEffect)(() => {
     let cancelled = false;
     setViewModeState(defaultViewMode);
@@ -165,12 +189,6 @@ function FrappeListViewBody({
       cancelled = true;
     };
   }, [doctype, defaultViewMode]);
-  const setViewMode = (0, import_react2.useCallback)(mode => {
-    onViewModeChange?.(mode);
-    if (controlledViewMode !== void 0) return;
-    setViewModeState(mode);
-    void setStoredViewMode(doctype, mode);
-  }, [doctype, controlledViewMode, onViewModeChange]);
   const {
     meta,
     isLoading: isMetaLoading,
@@ -188,14 +206,6 @@ function FrappeListViewBody({
   const onAdd = !rights.create ? void 0 : onAddProp ?? (route !== void 0 && navigate ? () => navigate((0, import_frappeNavigation.frappeRouteHref)(route, {
     mode: "create"
   })) : void 0);
-  const asPage = view => route === void 0 ? view : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ListPageLayout, {
-    scroll: false,
-    header: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageHeader, {
-      title: doctype,
-      divider: false
-    }),
-    children: view
-  });
   const [peekedFields, setPeekedFields] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(() => {
     if (meta || isMetaLoading || !metaError || !finalBaseURL) return;
@@ -260,16 +270,16 @@ function FrappeListViewBody({
   const renderListItem = (0, import_react2.useCallback)(doc => {
     const row = doc;
     const textFields = effectiveDisplayFields.filter(field => field.key !== imageFieldName);
-    const [titleField, ...subtitleFields] = textFields;
-    const titleValue = titleField ? row[titleField.key] : void 0;
-    const title = titleField?.render ? titleField.render(titleValue, doc) : titleValue ?? doc.name;
+    const [titleField2, ...subtitleFields] = textFields;
+    const titleValue = titleField2 ? row[titleField2.key] : void 0;
+    const title2 = titleField2?.render ? titleField2.render(titleValue, doc) : titleValue ?? doc.name;
     const subtitleParts = subtitleFields.map(field => {
       const value = row[field.key];
       const rendered = field.render ? field.render(value, doc) : value;
       return rendered === null || rendered === void 0 || rendered === "" ? null : rendered;
     }).filter(part => part !== null);
     const imageUrl = imageFieldName ? resolveImageUrl(row[imageFieldName], finalBaseURL) : "";
-    const titleName = typeof title === "string" ? title : void 0;
+    const titleName = typeof title2 === "string" ? title2 : void 0;
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       alignItems: "center",
       flex: 1,
@@ -292,7 +302,7 @@ function FrappeListViewBody({
           ...{
             "data-list-slot": "title"
           },
-          children: title
+          children: title2
         }), subtitleParts.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           ...knobProps.body,
           color: knobProps.textAccentColor,
@@ -333,23 +343,76 @@ function FrappeListViewBody({
     setActiveFilters(filters);
   }, [filters]);
   const effectiveConnections = (0, import_react2.useMemo)(() => connections ?? (isMetaLoading ? void 0 : (0, import_frappeConnections.connectionsFromMeta)(meta)), [connections, isMetaLoading, meta]);
-  const linkFilters = (0, import_useConnectionFilters.useConnectionFilters)(connectionConfig, doctype, activeFilters, effectiveConnections);
-  const resolvedFilters = linkFilters.filters;
-  const [searchText, setSearchText] = (0, import_react2.useState)("");
-  const [debouncedSearch, setDebouncedSearch] = (0, import_react2.useState)("");
   const searchField = (0, import_react2.useMemo)(() => {
     if (meta?.title_field) return meta.title_field;
     if (metaListFields.length > 0) return metaListFields[0].fieldname;
     if (peekedFields && peekedFields.length > 0) return peekedFields[0];
     return "name";
   }, [meta, metaListFields, peekedFields]);
+  const hasCards = Boolean(renderCard || look?.images);
+  const listControls = {
+    sorts,
+    facets,
+    ranges,
+    views: hasCards ? ["grid", "list", "table"] : ["list", "table"],
+    defaultView: defaultViewMode
+  };
+  const hasControls = Boolean(sorts?.length || facets?.length || ranges?.length || favorites || shuffle);
+  const favoritesStorageKey = favorites ? typeof favorites === "string" ? favorites : (0, import_favorites.favoritesKey)(doctype) : void 0;
+  const list = (0, import_useListControls.useListControls)({
+    doctype,
+    controls: listControls,
+    connections: effectiveConnections,
+    connection: connectionConfig,
+    limit,
+    favoritesKey: favoritesStorageKey,
+    router: urlState ? router : void 0,
+    readBase: Boolean(subtitle || facets?.length || ranges?.length)
+  });
+  const updateList = list.update;
+  const requestedViewMode = controlledViewMode ?? (urlState ? list.state.view : void 0) ?? storedViewMode;
+  const viewMode = requestedViewMode === "grid" && !hasCards ? "list" : requestedViewMode;
+  const setViewMode = (0, import_react2.useCallback)(mode => {
+    onViewModeChange?.(mode);
+    if (controlledViewMode !== void 0) return;
+    if (urlState) {
+      updateList({
+        view: mode
+      });
+      return;
+    }
+    setViewModeState(mode);
+    void setStoredViewMode(doctype, mode);
+  }, [doctype, controlledViewMode, onViewModeChange, urlState, updateList]);
+  const controlsKey = JSON.stringify({
+    facets: facets?.map(facet => [facet.param, facet.field, facet.doctype]),
+    ranges: ranges?.map(range => [range.param, range.field]),
+    sorts: sorts?.map(sort => [sort.value, sort.orderBy])
+  });
+  const controlFilters = (0, import_react2.useMemo)(() => {
+    if (!hasControls) return activeFilters;
+    const base = !activeFilters ? [] : Array.isArray(activeFilters) ? activeFilters : Object.entries(activeFilters).map(([field, value]) => [field, "=", value]);
+    return (0, import_listState.listStateFilters)(list.state, listControls, {
+      base,
+      search: searchFilter ?? (query => [[searchField, "like", `%${query}%`]]),
+      favorites: list.favorites.favoriteSet
+    });
+  }, [hasControls, activeFilters, list.state, list.favorites.favoriteSet, searchFilter, searchField, controlsKey]);
+  const effectiveOrderBy = hasControls ? (0, import_listState.listStateOrderBy)(list.state, listControls, orderBy) : orderBy;
+  const loaded = (0, import_frappeNavigation.useRouteLoaderData)(loader);
+  const initialRows = initialRowsProp ?? loaded?.rows;
+  const seedRows = !hasControls || !(0, import_listState.isListNarrowed)(list.state) && (!sorts?.length || list.state.sort === sorts[0].value) ? initialRows : void 0;
+  const linkFilters = (0, import_useConnectionFilters.useConnectionFilters)(connectionConfig, doctype, controlFilters, effectiveConnections);
+  const resolvedFilters = linkFilters.filters;
+  const [searchText, setSearchText] = (0, import_react2.useState)("");
+  const [debouncedSearch, setDebouncedSearch] = (0, import_react2.useState)("");
   const listFilters = (0, import_react2.useMemo)(() => {
     const query = debouncedSearch.trim();
     if (!query) return resolvedFilters;
-    const searchFilter = [searchField, "like", `%${query}%`];
-    if (!resolvedFilters) return [searchFilter];
-    if (Array.isArray(resolvedFilters)) return [...resolvedFilters, searchFilter];
-    return [...Object.entries(resolvedFilters).map(([key, value]) => [key, "=", value]), searchFilter];
+    const searchFilter2 = [searchField, "like", `%${query}%`];
+    if (!resolvedFilters) return [searchFilter2];
+    if (Array.isArray(resolvedFilters)) return [...resolvedFilters, searchFilter2];
+    return [...Object.entries(resolvedFilters).map(([key, value]) => [key, "=", value]), searchFilter2];
   }, [resolvedFilters, debouncedSearch, searchField]);
   const hasProvidedFilters = (0, import_react2.useMemo)(() => {
     if (!activeFilters) return false;
@@ -376,18 +439,305 @@ function FrappeListViewBody({
   const handleDeleteFilter = (0, import_react2.useCallback)(async name => {
     await savedFiltersHook.deleteFilter(name);
   }, [savedFiltersHook]);
+  const slug = doctype.toLowerCase().replace(/\s+/g, "-");
+  const searchId = `${slug}-list-search`;
+  const resultsId = `${slug}-results`;
+  const nameField = titleField ?? meta?.title_field;
+  const [shuffleOpen, setShuffleOpen] = (0, import_react2.useState)(false);
+  const [shuffleRows, setShuffleRows] = (0, import_react2.useState)([]);
+  const handleShuffleRows = (0, import_react2.useCallback)(snapshot => setShuffleRows(snapshot.rows), []);
+  const shuffleOrderKey = JSON.stringify(sorts?.[0]?.orderBy ?? orderBy ?? null);
+  const shuffleFiltersKey = JSON.stringify(resolvedFilters ?? null);
+  const shuffleFieldsKey = JSON.stringify(effectiveFields);
+  const shuffleOptions = (0, import_react2.useMemo)(() => ({
+    fields: JSON.parse(shuffleFieldsKey),
+    filters: JSON.parse(shuffleFiltersKey) ?? void 0,
+    orderBy: JSON.parse(shuffleOrderKey) ?? void 0,
+    limit: limit ?? 0
+  }), [shuffleFieldsKey, shuffleFiltersKey, shuffleOrderKey, limit]);
+  const {
+    isFavorite,
+    toggle: toggleStar
+  } = list.favorites;
+  const toggleFavorite = (0, import_react2.useCallback)(doc => {
+    const name = doc.name;
+    if (!name) return;
+    const starred = isFavorite(name);
+    toggleStar(name);
+    const titleValue = nameField ? doc[nameField] : void 0;
+    const label = typeof titleValue === "string" && titleValue ? titleValue : name;
+    (0, import_components.showToast)(starred ? {
+      id: `${slug}-favorite-${name}`,
+      title: t("{{name}} removed from favorites", {
+        name: label
+      }),
+      intent: "accent",
+      action: {
+        label: t("Undo"),
+        onPress: () => toggleStar(name)
+      }
+    } : {
+      id: `${slug}-favorite-${name}`,
+      title: t("{{name}} added to favorites", {
+        name: label
+      }),
+      intent: "success"
+    });
+  }, [isFavorite, toggleStar, nameField, slug, t]);
+  const cardFor = doc => {
+    const name = doc.name ?? "";
+    const row = doc;
+    return {
+      href: route !== void 0 && name ? (0, import_frappeNavigation.frappeRouteHref)(route, {
+        mode: "view",
+        name
+      }) : void 0,
+      open: () => onItemClick?.(doc),
+      facets: Object.fromEntries((facets ?? []).map(facet => [facet.param, facet.doctype ? list.facets[facet.param]?.values.get(name) ?? [] : row[facet.field] === void 0 || row[facet.field] === null ? [] : [String(row[facet.field])]])),
+      favorite: favoritesStorageKey && name ? {
+        active: isFavorite(name),
+        toggle: () => toggleFavorite(doc)
+      } : void 0
+    };
+  };
+  const tintFacet = facets?.find(facet => facet.tint);
+  const drawRecordCard = (doc, index) => {
+    const card = cardFor(doc);
+    const name = doc.name ?? "";
+    const values = tintFacet ? card.facets[tintFacet.param] ?? [] : [];
+    const title2 = (0, import_recordLook.recordTitle)(doc, look, nameField);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordCard.RecordCard, {
+      title: title2,
+      subtitle: look?.subtitle?.(doc),
+      code: look?.code?.(doc),
+      images: look?.images?.(doc, finalBaseURL) ?? [],
+      tints: values.slice(0, 2).map(value => tintFacet?.tint?.(value)),
+      badges: values.map(value => ({
+        value,
+        label: tintFacet?.optionLabel?.(value) ?? value,
+        tint: tintFacet?.tint?.(value)
+      })),
+      href: card.href,
+      onPress: card.open,
+      favorite: card.favorite,
+      lazy: index >= eagerCards,
+      testID: `${slug}-card-${name}`,
+      favoriteTestID: `${slug}-favorite-${name}`
+    });
+  };
+  const drawCard = renderCard ? (doc, index) => renderCard(doc, index, cardFor(doc)) : look?.images ? drawRecordCard : void 0;
+  (0, import_react2.useEffect)(() => {
+    if (!import_tamagui.isWeb || typeof document === "undefined" || !showSearch) return;
+    const handleKeyDown = event => {
+      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.defaultPrevented) return;
+      const target = event.target;
+      if (target) {
+        const tag = target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (target.isContentEditable) return;
+        if (target.closest?.('[role="dialog"], [role="menu"], [role="listbox"]')) return;
+      }
+      const input = document.getElementById(searchId)?.querySelector("input");
+      if (!input) return;
+      event.preventDefault();
+      input.focus();
+      input.select?.();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [searchId, showSearch]);
+  const headerOwnsTools = route !== void 0 && !showToolbar;
+  const pressFor = action => action.onPress ?? (action.href && navigate ? () => navigate(action.href) : void 0);
+  const headerActions = headerOwnsTools || headerAccessory || actions?.length ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    ...knobProps.gap,
+    alignItems: "center",
+    flexWrap: "wrap",
+    flexShrink: 1,
+    minWidth: 0,
+    children: [headerOwnsTools ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+      content: t("Switch views"),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ViewSwitcher, {
+          views: [...(hasCards ? [{
+            type: "grid",
+            label: t("Cards"),
+            icon: import_react.ImageIcon
+          }] : []), {
+            type: "list",
+            label: t("List"),
+            icon: import_react.ListIcon
+          }, {
+            type: "table",
+            label: t("Table"),
+            icon: import_react.TableIcon
+          }],
+          currentView: viewMode,
+          onViewChange: v => setViewMode(v)
+        })
+      })
+    }) : null, headerAccessory, actions?.map(action => {
+      const Icon = action.icon;
+      const onPress = pressFor(action);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react2.default.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: action.hint ?? action.label,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: true,
+            onPress,
+            icon: Icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+              size: 16
+            }) : void 0,
+            "$max-sm": {
+              display: "none"
+            },
+            testID: action.testID,
+            children: action.label
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          outlined: true,
+          circular: true,
+          onPress,
+          icon: Icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+            size: 16
+          }) : void 0,
+          display: "none",
+          "aria-label": action.label,
+          "$max-sm": {
+            display: "flex"
+          }
+        })]
+      }, action.label);
+    }), headerOwnsTools && onAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        theme: "accent",
+        onPress: onAdd,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+          size: 16
+        }),
+        "$max-sm": {
+          display: "none"
+        },
+        children: t("Add {{doctype}}", {
+          doctype
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        theme: "accent",
+        onPress: onAdd,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+          size: 16
+        }),
+        display: "none",
+        "$max-sm": {
+          display: "flex"
+        },
+        children: t("Add")
+      })]
+    }) : null]
+  }) : void 0;
+  const controlsBand = hasControls ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListControls.ListControls, {
+    controls: listControls,
+    list,
+    searchId,
+    searchPlaceholder,
+    showSearch,
+    showFavorites: Boolean(favoritesStorageKey),
+    shuffle: shuffle ? {
+      open: shuffleOpen,
+      toggle: () => setShuffleOpen(open => !open),
+      panelId: `${slug}-shuffle-panel`
+    } : void 0,
+    shufflePanel: shuffle && shuffleOpen && shuffleRows.length > 0 && drawCard ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ShufflePanel.ShufflePanel, {
+      id: `${slug}-shuffle-panel`,
+      label: t("Surprise me"),
+      rows: shuffleRows,
+      itemLabel: shuffle.label,
+      renderPick: doc => drawCard(doc, 0),
+      onGo: doc => {
+        setShuffleOpen(false);
+        onItemClick?.(doc);
+      },
+      testID: `${slug}-shuffle-panel`
+    }) : null,
+    separator: !surface,
+    testID: slug
+  }) : null;
+  const asPage = view => {
+    const extras = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [list.readers, shuffle && shuffleOpen && !linkFilters.pending ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeRowsReader.FrappeRowsReader, {
+        connection: connectionConfig,
+        doctype,
+        options: shuffleOptions,
+        onChange: handleShuffleRows
+      }) : null, favoritesStorageKey ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListToastHost.ListToastHost, {}) : null]
+    });
+    if (route === void 0) {
+      return controlsBand ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.gap,
+        flex: viewMode === "grid" ? void 0 : 1,
+        children: [controlsBand, view, extras]
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [view, extras]
+      });
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.ListPageLayout, {
+      scroll: !surface,
+      header: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [controlsBand ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SkipLink, {
+          targetId: resultsId,
+          children: t("Skip to results")
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageHeader, {
+          title: title ?? doctype,
+          subtitle: subtitle && list.total !== void 0 ? subtitle(list.total) : void 0,
+          actions: headerActions,
+          divider: !surface
+        })]
+      }),
+      toolbar: controlsBand ?? void 0,
+      children: [view, extras]
+    });
+  };
+  const controlsEmptyState = hasControls ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+    "aria-live": "polite",
+    icon: list.state.favoritesOnly ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+      size: 28
+    }) : (0, import_listState.isListNarrowed)(list.state) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+      size: 28
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.SparkleIcon, {
+      size: 28
+    }),
+    title: list.state.favoritesOnly ? t("No favorites yet") : list.state.search.trim() ? t('No match for "{{query}}"', {
+      query: list.state.search.trim()
+    }) : (0, import_listState.isListNarrowed)(list.state) ? t("No {{doctype}} match the active filters", {
+      doctype
+    }) : t("No {{doctype}} yet", {
+      doctype
+    }),
+    description: list.state.favoritesOnly ? t("Tap the heart on a record to favorite it.") : (0, import_listState.isListNarrowed)(list.state) ? t("Try a different search or filter.") : void 0,
+    action: (0, import_listState.isListNarrowed)(list.state) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      outlined: true,
+      onPress: list.clear,
+      children: t("Clear filters")
+    }) : onAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      theme: "accent",
+      onPress: onAdd,
+      children: t("Add your first {{doctype}}", {
+        doctype
+      })
+    }) : void 0
+  }) : void 0;
   if (isMetaLoading && !fields) {
     return asPage(/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       ...knobProps.panelPadding,
       alignItems: "center",
       justifyContent: "center",
+      gap: "$2",
       ...stackProps,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Spinner, {
         size: "large"
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         ...knobProps.body,
         color: knobProps.textAccentColor,
-        marginTop: "$2",
         children: t("Loading {{doctype}} schema...", {
           doctype
         })
@@ -407,7 +757,7 @@ function FrappeListViewBody({
         alignItems: "center",
         ...knobProps.gap,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ViewSwitcher, {
-          views: [...(renderCard ? [{
+          views: [...(hasCards ? [{
             type: "grid",
             label: t("Cards")
           }] : []), {
@@ -500,6 +850,7 @@ function FrappeListViewBody({
     borderBottomColor: "$borderColor",
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flex: 1,
+      id: searchId,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
         value: searchText,
         onChange: setSearchText,
@@ -519,23 +870,23 @@ function FrappeListViewBody({
       const isGrid = viewMode === "grid";
       return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
         flex: isGrid ? void 0 : 1,
-        children: [showSearch ? renderListSearch() : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeList.FrappeList, {
+        children: [showSearch && !hasControls ? renderListSearch() : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeList.FrappeList, {
           layout: isGrid ? "grid" : "list",
           gridProps,
-          emptyState,
+          emptyState: emptyState ?? controlsEmptyState,
           pageSize,
           onRetry: onRetry ?? handleRefresh,
           doctype,
           fields: effectiveFields,
           filters: listFilters,
-          renderItem: isGrid && renderCard ? renderCard : renderListItem,
+          renderItem: isGrid && drawCard ? drawCard : renderListItem,
           onItemClick,
           baseURL: finalBaseURL,
           auth: finalAuth,
           syncOptions: finalSyncOptions,
-          orderBy,
+          orderBy: effectiveOrderBy,
           limit,
-          initialRows,
+          initialRows: seedRows,
           ...(noResultsMessage ? {
             emptyMessage: noResultsMessage
           } : {})
@@ -578,6 +929,9 @@ function FrappeListViewBody({
     ...(surface ? knobProps.containerRadius : {}),
     overflow: surface ? "hidden" : void 0,
     testID: `${doctype.toLowerCase()}-list`,
+    ...(hasControls ? {
+      id: resultsId
+    } : {}),
     ...stackProps,
     children: [renderToolbar(), linkFilters.readers, showFilterSidebar ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       flex: 1,