@multiplatform.one/frappe-ui 7.23.1 → 7.24.0

package/dist/jsx/FrappeListView.mjs

@@ -1,23 +1,34 @@
 import { HttpClient, useDocTypeMeta } from "@multiplatform.one/frappe";
-import { ArrowsClockwiseIcon, PlusIcon } from "@phosphor-icons/react";
+import { ArrowsClockwiseIcon, HeartIcon, ImageIcon, ListIcon, MagnifyingGlassIcon, PlusIcon, SparkleIcon, TableIcon } from "@phosphor-icons/react";
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, SearchInput, Spinner } from "@multiplatform.one/forms";
 import { Text, View, XStack, YStack, isWeb, useTheme } from "tamagui";
 import { SavedFilterDropdown, useSavedFilters } from "@multiplatform.one/table";
-import { AsyncBoundary, Avatar, ListPageLayout, PageHeader, ViewSwitcher, componentColors } from "@multiplatform.one/components";
+import { AsyncBoundary, Avatar, EmptyState, ListPageLayout, PageHeader, SkipLink, Tooltip, ViewSwitcher, componentColors, showToast } from "@multiplatform.one/components";
 import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
 import { storage } from "@multiplatform.one/store";
 import { useFrappeConfig } from "./FrappeProvider.mjs";
 import { FrappeList } from "./FrappeList.mjs";
+import { FrappeNotConfigured } from "./FrappeNotConfigured.mjs";
+import { FrappeRowsReader } from "./FrappeRowsReader.mjs";
 import { FrappeTable } from "./FrappeTable.mjs";
 import { useDocRights } from "./formEngine/useDocRights.mjs";
-import { frappeRouteHref, useFrappeRouter } from "./frappeNavigation.mjs";
+import { frappeRouteHref, useFrappeRouter, useRouteLoaderData } from "./frappeNavigation.mjs";
 import { connectionsFromMeta } from "./frappeConnections.mjs";
 import { isPermissionError } from "./liveErrors.mjs";
+import { favoritesKey } from "./list/favorites.mjs";
+import { RecordCard } from "./list/RecordCard.mjs";
+import { recordTitle } from "./list/recordLook.mjs";
+import { ListControls } from "./list/ListControls.mjs";
+import { isListNarrowed, listStateFilters, listStateOrderBy } from "./list/listState.mjs";
+import { ListToastHost } from "./list/ListToastHost.mjs";
+import { ShufflePanel } from "./list/ShufflePanel.mjs";
+import { useListControls } from "./list/useListControls.mjs";
 import { useConnectionFilters } from "./useConnectionFilters.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "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) {
@@ -41,7 +52,19 @@ async function setStoredViewMode(doctype, mode) {
     await Promise.resolve(storage.setItem(`${storageKeyPrefix}${doctype}`, mode));
   } catch {}
 }
-function FrappeListView({
+function FrappeListView(props) {
+  const config = useFrappeConfig();
+  if (!(props.baseURL ?? config?.baseURL) && !config?.fixtures) {
+    return /* @__PURE__ */jsx(FrappeNotConfigured, {
+      doctype: props.doctype,
+      page: props.route !== void 0
+    });
+  }
+  return /* @__PURE__ */jsx(FrappeListViewBody, {
+    ...props
+  });
+}
+function FrappeListViewBody({
   doctype,
   fields,
   connections,
@@ -54,10 +77,12 @@ function FrappeListView({
   route,
   orderBy,
   limit,
-  initialRows,
+  initialRows: initialRowsProp,
+  loader,
   columns,
   displayFields,
   renderCard,
+  look,
   gridProps,
   emptyState,
   onRetry,
@@ -68,13 +93,27 @@ function FrappeListView({
   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 = useFrappeConfig();
-  const navigate = useFrappeRouter()?.navigate;
+  const router = useFrappeRouter();
+  const navigate = router?.navigate;
   const {
     knobProps
   } = useResolvedKnobs();
@@ -99,8 +138,6 @@ function FrappeListView({
     fixtures: config?.fixtures
   };
   const [storedViewMode, setViewModeState] = useState(defaultViewMode);
-  const requestedViewMode = controlledViewMode ?? storedViewMode;
-  const viewMode = requestedViewMode === "grid" && !renderCard ? "list" : requestedViewMode;
   useEffect(() => {
     let cancelled = false;
     setViewModeState(defaultViewMode);
@@ -114,12 +151,6 @@ function FrappeListView({
       cancelled = true;
     };
   }, [doctype, defaultViewMode]);
-  const setViewMode = useCallback(mode => {
-    onViewModeChange?.(mode);
-    if (controlledViewMode !== void 0) return;
-    setViewModeState(mode);
-    void setStoredViewMode(doctype, mode);
-  }, [doctype, controlledViewMode, onViewModeChange]);
   const {
     meta,
     isLoading: isMetaLoading,
@@ -137,14 +168,6 @@ function FrappeListView({
   const onAdd = !rights.create ? void 0 : onAddProp ?? (route !== void 0 && navigate ? () => navigate(frappeRouteHref(route, {
     mode: "create"
   })) : void 0);
-  const asPage = view => route === void 0 ? view : /* @__PURE__ */jsx(ListPageLayout, {
-    scroll: false,
-    header: /* @__PURE__ */jsx(PageHeader, {
-      title: doctype,
-      divider: false
-    }),
-    children: view
-  });
   const [peekedFields, setPeekedFields] = useState(null);
   useEffect(() => {
     if (meta || isMetaLoading || !metaError || !finalBaseURL) return;
@@ -209,16 +232,16 @@ function FrappeListView({
   const renderListItem = 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__ */jsxs(XStack, {
       alignItems: "center",
       flex: 1,
@@ -241,7 +264,7 @@ function FrappeListView({
           ...{
             "data-list-slot": "title"
           },
-          children: title
+          children: title2
         }), subtitleParts.length > 0 && /* @__PURE__ */jsx(Text, {
           ...knobProps.body,
           color: knobProps.textAccentColor,
@@ -282,23 +305,76 @@ function FrappeListView({
     setActiveFilters(filters);
   }, [filters]);
   const effectiveConnections = useMemo(() => connections ?? (isMetaLoading ? void 0 : connectionsFromMeta(meta)), [connections, isMetaLoading, meta]);
-  const linkFilters = useConnectionFilters(connectionConfig, doctype, activeFilters, effectiveConnections);
-  const resolvedFilters = linkFilters.filters;
-  const [searchText, setSearchText] = useState("");
-  const [debouncedSearch, setDebouncedSearch] = useState("");
   const searchField = 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 : favoritesKey(doctype) : void 0;
+  const list = 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 = 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 = useMemo(() => {
+    if (!hasControls) return activeFilters;
+    const base = !activeFilters ? [] : Array.isArray(activeFilters) ? activeFilters : Object.entries(activeFilters).map(([field, value]) => [field, "=", value]);
+    return 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 ? listStateOrderBy(list.state, listControls, orderBy) : orderBy;
+  const loaded = useRouteLoaderData(loader);
+  const initialRows = initialRowsProp ?? loaded?.rows;
+  const seedRows = !hasControls || !isListNarrowed(list.state) && (!sorts?.length || list.state.sort === sorts[0].value) ? initialRows : void 0;
+  const linkFilters = useConnectionFilters(connectionConfig, doctype, controlFilters, effectiveConnections);
+  const resolvedFilters = linkFilters.filters;
+  const [searchText, setSearchText] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
   const listFilters = 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 = useMemo(() => {
     if (!activeFilters) return false;
@@ -325,18 +401,305 @@ function FrappeListView({
   const handleDeleteFilter = 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] = useState(false);
+  const [shuffleRows, setShuffleRows] = useState([]);
+  const handleShuffleRows = 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 = 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 = 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;
+    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 ? 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 = recordTitle(doc, look, nameField);
+    return /* @__PURE__ */jsx(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;
+  useEffect(() => {
+    if (!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__ */jsxs(XStack, {
+    ...knobProps.gap,
+    alignItems: "center",
+    flexWrap: "wrap",
+    flexShrink: 1,
+    minWidth: 0,
+    children: [headerOwnsTools ? /* @__PURE__ */jsx(Tooltip, {
+      content: t("Switch views"),
+      children: /* @__PURE__ */jsx(XStack, {
+        children: /* @__PURE__ */jsx(ViewSwitcher, {
+          views: [...(hasCards ? [{
+            type: "grid",
+            label: t("Cards"),
+            icon: ImageIcon
+          }] : []), {
+            type: "list",
+            label: t("List"),
+            icon: ListIcon
+          }, {
+            type: "table",
+            label: t("Table"),
+            icon: TableIcon
+          }],
+          currentView: viewMode,
+          onViewChange: v => setViewMode(v)
+        })
+      })
+    }) : null, headerAccessory, actions?.map(action => {
+      const Icon = action.icon;
+      const onPress = pressFor(action);
+      return /* @__PURE__ */jsxs(React.Fragment, {
+        children: [/* @__PURE__ */jsx(Tooltip, {
+          content: action.hint ?? action.label,
+          children: /* @__PURE__ */jsx(Button, {
+            outlined: true,
+            onPress,
+            icon: Icon ? /* @__PURE__ */jsx(Icon, {
+              size: 16
+            }) : void 0,
+            "$max-sm": {
+              display: "none"
+            },
+            testID: action.testID,
+            children: action.label
+          })
+        }), /* @__PURE__ */jsx(Button, {
+          outlined: true,
+          circular: true,
+          onPress,
+          icon: Icon ? /* @__PURE__ */jsx(Icon, {
+            size: 16
+          }) : void 0,
+          display: "none",
+          "aria-label": action.label,
+          "$max-sm": {
+            display: "flex"
+          }
+        })]
+      }, action.label);
+    }), headerOwnsTools && onAdd ? /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(Button, {
+        theme: "accent",
+        onPress: onAdd,
+        icon: /* @__PURE__ */jsx(PlusIcon, {
+          size: 16
+        }),
+        "$max-sm": {
+          display: "none"
+        },
+        children: t("Add {{doctype}}", {
+          doctype
+        })
+      }), /* @__PURE__ */jsx(Button, {
+        theme: "accent",
+        onPress: onAdd,
+        icon: /* @__PURE__ */jsx(PlusIcon, {
+          size: 16
+        }),
+        display: "none",
+        "$max-sm": {
+          display: "flex"
+        },
+        children: t("Add")
+      })]
+    }) : null]
+  }) : void 0;
+  const controlsBand = hasControls ? /* @__PURE__ */jsx(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__ */jsx(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__ */jsxs(Fragment, {
+      children: [list.readers, shuffle && shuffleOpen && !linkFilters.pending ? /* @__PURE__ */jsx(FrappeRowsReader, {
+        connection: connectionConfig,
+        doctype,
+        options: shuffleOptions,
+        onChange: handleShuffleRows
+      }) : null, favoritesStorageKey ? /* @__PURE__ */jsx(ListToastHost, {}) : null]
+    });
+    if (route === void 0) {
+      return controlsBand ? /* @__PURE__ */jsxs(YStack, {
+        ...knobProps.gap,
+        flex: viewMode === "grid" ? void 0 : 1,
+        children: [controlsBand, view, extras]
+      }) : /* @__PURE__ */jsxs(Fragment, {
+        children: [view, extras]
+      });
+    }
+    return /* @__PURE__ */jsxs(ListPageLayout, {
+      scroll: !surface,
+      header: /* @__PURE__ */jsxs(Fragment, {
+        children: [controlsBand ? /* @__PURE__ */jsx(SkipLink, {
+          targetId: resultsId,
+          children: t("Skip to results")
+        }) : null, /* @__PURE__ */jsx(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__ */jsx(EmptyState, {
+    "aria-live": "polite",
+    icon: list.state.favoritesOnly ? /* @__PURE__ */jsx(HeartIcon, {
+      size: 28
+    }) : isListNarrowed(list.state) ? /* @__PURE__ */jsx(MagnifyingGlassIcon, {
+      size: 28
+    }) : /* @__PURE__ */jsx(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()
+    }) : 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.") : isListNarrowed(list.state) ? t("Try a different search or filter.") : void 0,
+    action: isListNarrowed(list.state) ? /* @__PURE__ */jsx(Button, {
+      outlined: true,
+      onPress: list.clear,
+      children: t("Clear filters")
+    }) : onAdd ? /* @__PURE__ */jsx(Button, {
+      theme: "accent",
+      onPress: onAdd,
+      children: t("Add your first {{doctype}}", {
+        doctype
+      })
+    }) : void 0
+  }) : void 0;
   if (isMetaLoading && !fields) {
     return asPage(/* @__PURE__ */jsxs(YStack, {
       ...knobProps.panelPadding,
       alignItems: "center",
       justifyContent: "center",
+      gap: "$2",
       ...stackProps,
       children: [/* @__PURE__ */jsx(Spinner, {
         size: "large"
       }), /* @__PURE__ */jsx(Text, {
         ...knobProps.body,
         color: knobProps.textAccentColor,
-        marginTop: "$2",
         children: t("Loading {{doctype}} schema...", {
           doctype
         })
@@ -356,7 +719,7 @@ function FrappeListView({
         alignItems: "center",
         ...knobProps.gap,
         children: /* @__PURE__ */jsx(ViewSwitcher, {
-          views: [...(renderCard ? [{
+          views: [...(hasCards ? [{
             type: "grid",
             label: t("Cards")
           }] : []), {
@@ -449,6 +812,7 @@ function FrappeListView({
     borderBottomColor: "$borderColor",
     children: /* @__PURE__ */jsx(View, {
       flex: 1,
+      id: searchId,
       children: /* @__PURE__ */jsx(SearchInput, {
         value: searchText,
         onChange: setSearchText,
@@ -468,23 +832,23 @@ function FrappeListView({
       const isGrid = viewMode === "grid";
       return /* @__PURE__ */jsxs(YStack, {
         flex: isGrid ? void 0 : 1,
-        children: [showSearch ? renderListSearch() : null, /* @__PURE__ */jsx(FrappeList, {
+        children: [showSearch && !hasControls ? renderListSearch() : null, /* @__PURE__ */jsx(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
           } : {})
@@ -527,6 +891,9 @@ function FrappeListView({
     ...(surface ? knobProps.containerRadius : {}),
     overflow: surface ? "hidden" : void 0,
     testID: `${doctype.toLowerCase()}-list`,
+    ...(hasControls ? {
+      id: resultsId
+    } : {}),
     ...stackProps,
     children: [renderToolbar(), linkFilters.readers, showFilterSidebar ? /* @__PURE__ */jsxs(XStack, {
       flex: 1,