@multiplatform.one/frappe-ui 7.23.2 → 7.24.0

package/dist/esm/FrappeListView.native.js

@@ -1,24 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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.native.js";
 import { FrappeList } from "./FrappeList.native.js";
 import { FrappeNotConfigured } from "./FrappeNotConfigured.native.js";
+import { FrappeRowsReader } from "./FrappeRowsReader.native.js";
 import { FrappeTable } from "./FrappeTable.native.js";
 import { useDocRights } from "./formEngine/useDocRights.native.js";
-import { frappeRouteHref, useFrappeRouter } from "./frappeNavigation.native.js";
+import { frappeRouteHref, useFrappeRouter, useRouteLoaderData } from "./frappeNavigation.native.js";
 import { connectionsFromMeta } from "./frappeConnections.native.js";
 import { isPermissionError } from "./liveErrors.native.js";
+import { favoritesKey } from "./list/favorites.native.js";
+import { RecordCard } from "./list/RecordCard.native.js";
+import { recordTitle } from "./list/recordLook.native.js";
+import { ListControls } from "./list/ListControls.native.js";
+import { isListNarrowed, listStateFilters, listStateOrderBy } from "./list/listState.native.js";
+import { ListToastHost } from "./list/ListToastHost.native.js";
+import { ShufflePanel } from "./list/ShufflePanel.native.js";
+import { useListControls } from "./list/useListControls.native.js";
 import { useConnectionFilters } from "./useConnectionFilters.native.js";
 var storageKeyPrefix = "frappe-listview-";
+var eagerCards = 6;
 var internalDocKeys = /* @__PURE__ */new Set(["name", "owner", "creation", "modified", "modified_by", "docstatus", "idx", "doctype", "_user_tags", "_comments", "_assign", "_liked_by", "_seen"]);
 var layoutFieldtypes = /* @__PURE__ */new Set(["Column Break", "Section Break", "Tab Break", "HTML", "Heading", "Fold", "Button"]);
 function fieldKeyLabel(key) {
@@ -71,10 +81,12 @@ function FrappeListViewBody(param) {
     route,
     orderBy,
     limit,
-    initialRows,
+    initialRows: initialRowsProp,
+    loader,
     columns,
     displayFields,
     renderCard,
+    look,
     gridProps,
     emptyState,
     onRetry,
@@ -85,14 +97,29 @@ function FrappeListViewBody(param) {
     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
   } = param;
-  var _useFrappeRouter;
+  var _ref, _ref1, _ref2;
+  var _sorts_;
   var config = useFrappeConfig();
-  var navigate = (_useFrappeRouter = useFrappeRouter()) === null || _useFrappeRouter === void 0 ? void 0 : _useFrappeRouter.navigate;
+  var router = useFrappeRouter();
+  var navigate = router === null || router === void 0 ? void 0 : router.navigate;
   var {
     knobProps
   } = useResolvedKnobs();
@@ -117,8 +144,6 @@ function FrappeListViewBody(param) {
     fixtures: config === null || config === void 0 ? void 0 : config.fixtures
   };
   var [storedViewMode, setViewModeState] = useState(defaultViewMode);
-  var requestedViewMode = controlledViewMode !== null && controlledViewMode !== void 0 ? controlledViewMode : storedViewMode;
-  var viewMode = requestedViewMode === "grid" && !renderCard ? "list" : requestedViewMode;
   useEffect(function () {
     var cancelled = false;
     setViewModeState(defaultViewMode);
@@ -132,12 +157,6 @@ function FrappeListViewBody(param) {
       cancelled = true;
     };
   }, [doctype, defaultViewMode]);
-  var setViewMode = useCallback(function (mode) {
-    onViewModeChange === null || onViewModeChange === void 0 ? void 0 : onViewModeChange(mode);
-    if (controlledViewMode !== void 0) return;
-    setViewModeState(mode);
-    void setStoredViewMode(doctype, mode);
-  }, [doctype, controlledViewMode, onViewModeChange]);
   var {
     meta,
     isLoading: isMetaLoading,
@@ -157,16 +176,6 @@ function FrappeListViewBody(param) {
       mode: "create"
     }));
   } : void 0;
-  var asPage = function asPage2(view) {
-    return route === void 0 ? view : /* @__PURE__ */_jsx(ListPageLayout, {
-      scroll: false,
-      header: /* @__PURE__ */_jsx(PageHeader, {
-        title: doctype,
-        divider: false
-      }),
-      children: view
-    });
-  };
   var [peekedFields, setPeekedFields] = useState(null);
   useEffect(function () {
     if (meta || isMetaLoading || !metaError || !finalBaseURL) return;
@@ -255,9 +264,9 @@ function FrappeListViewBody(param) {
     var textFields = effectiveDisplayFields.filter(function (field) {
       return field.key !== imageFieldName;
     });
-    var [titleField, ...subtitleFields] = textFields;
-    var titleValue = titleField ? row[titleField.key] : void 0;
-    var title = (titleField === null || titleField === void 0 ? void 0 : titleField.render) ? titleField.render(titleValue, doc) : titleValue !== null && titleValue !== void 0 ? titleValue : doc.name;
+    var [titleField2, ...subtitleFields] = textFields;
+    var titleValue = titleField2 ? row[titleField2.key] : void 0;
+    var title2 = (titleField2 === null || titleField2 === void 0 ? void 0 : titleField2.render) ? titleField2.render(titleValue, doc) : titleValue !== null && titleValue !== void 0 ? titleValue : doc.name;
     var subtitleParts = subtitleFields.map(function (field) {
       var value = row[field.key];
       var rendered = field.render ? field.render(value, doc) : value;
@@ -266,7 +275,7 @@ function FrappeListViewBody(param) {
       return part !== null;
     });
     var imageUrl = imageFieldName ? resolveImageUrl(row[imageFieldName], finalBaseURL) : "";
-    var titleName = typeof title === "string" ? title : void 0;
+    var titleName = typeof title2 === "string" ? title2 : void 0;
     return /* @__PURE__ */_jsxs(XStack, {
       alignItems: "center",
       flex: 1,
@@ -289,7 +298,7 @@ function FrappeListViewBody(param) {
           ...{
             "data-list-slot": "title"
           },
-          children: title
+          children: title2
         }), subtitleParts.length > 0 && /* @__PURE__ */_jsx(Text, {
           ...knobProps.body,
           color: knobProps.textAccentColor,
@@ -342,26 +351,92 @@ function FrappeListViewBody(param) {
   var effectiveConnections = useMemo(function () {
     return connections !== null && connections !== void 0 ? connections : isMetaLoading ? void 0 : connectionsFromMeta(meta);
   }, [connections, isMetaLoading, meta]);
-  var linkFilters = useConnectionFilters(connectionConfig, doctype, activeFilters, effectiveConnections);
-  var resolvedFilters = linkFilters.filters;
-  var [searchText, setSearchText] = useState("");
-  var [debouncedSearch, setDebouncedSearch] = useState("");
   var searchField = useMemo(function () {
     if (meta === null || meta === void 0 ? void 0 : 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]);
+  var hasCards = Boolean(renderCard || (look === null || look === void 0 ? void 0 : look.images));
+  var listControls = {
+    sorts,
+    facets,
+    ranges,
+    views: hasCards ? ["grid", "list", "table"] : ["list", "table"],
+    defaultView: defaultViewMode
+  };
+  var hasControls = Boolean((sorts === null || sorts === void 0 ? void 0 : sorts.length) || (facets === null || facets === void 0 ? void 0 : facets.length) || (ranges === null || ranges === void 0 ? void 0 : ranges.length) || favorites || shuffle);
+  var favoritesStorageKey = favorites ? typeof favorites === "string" ? favorites : favoritesKey(doctype) : void 0;
+  var list = useListControls({
+    doctype,
+    controls: listControls,
+    connections: effectiveConnections,
+    connection: connectionConfig,
+    limit,
+    favoritesKey: favoritesStorageKey,
+    router: urlState ? router : void 0,
+    readBase: Boolean(subtitle || (facets === null || facets === void 0 ? void 0 : facets.length) || (ranges === null || ranges === void 0 ? void 0 : ranges.length))
+  });
+  var updateList = list.update;
+  var requestedViewMode = (_ref = controlledViewMode !== null && controlledViewMode !== void 0 ? controlledViewMode : urlState ? list.state.view : void 0) !== null && _ref !== void 0 ? _ref : storedViewMode;
+  var viewMode = requestedViewMode === "grid" && !hasCards ? "list" : requestedViewMode;
+  var setViewMode = useCallback(function (mode) {
+    onViewModeChange === null || onViewModeChange === void 0 ? void 0 : onViewModeChange(mode);
+    if (controlledViewMode !== void 0) return;
+    if (urlState) {
+      updateList({
+        view: mode
+      });
+      return;
+    }
+    setViewModeState(mode);
+    void setStoredViewMode(doctype, mode);
+  }, [doctype, controlledViewMode, onViewModeChange, urlState, updateList]);
+  var controlsKey = JSON.stringify({
+    facets: facets === null || facets === void 0 ? void 0 : facets.map(function (facet) {
+      return [facet.param, facet.field, facet.doctype];
+    }),
+    ranges: ranges === null || ranges === void 0 ? void 0 : ranges.map(function (range) {
+      return [range.param, range.field];
+    }),
+    sorts: sorts === null || sorts === void 0 ? void 0 : sorts.map(function (sort) {
+      return [sort.value, sort.orderBy];
+    })
+  });
+  var controlFilters = useMemo(function () {
+    if (!hasControls) return activeFilters;
+    var base = !activeFilters ? [] : Array.isArray(activeFilters) ? activeFilters : Object.entries(activeFilters).map(function (param2) {
+      var [field, value] = param2;
+      return [field, "=", value];
+    });
+    return listStateFilters(list.state, listControls, {
+      base,
+      search: searchFilter !== null && searchFilter !== void 0 ? searchFilter : function (query) {
+        return [[searchField, "like", `%${query}%`]];
+      },
+      favorites: list.favorites.favoriteSet
+    });
+  },
+  // controlsKey stands for the facet and range definitions listControls carries.
+  [hasControls, activeFilters, list.state, list.favorites.favoriteSet, searchFilter, searchField, controlsKey]);
+  var effectiveOrderBy = hasControls ? listStateOrderBy(list.state, listControls, orderBy) : orderBy;
+  var loaded = useRouteLoaderData(loader);
+  var initialRows = initialRowsProp !== null && initialRowsProp !== void 0 ? initialRowsProp : loaded === null || loaded === void 0 ? void 0 : loaded.rows;
+  var seedRows = !hasControls || !isListNarrowed(list.state) && (!(sorts === null || sorts === void 0 ? void 0 : sorts.length) || list.state.sort === sorts[0].value) ? initialRows : void 0;
+  var linkFilters = useConnectionFilters(connectionConfig, doctype, controlFilters, effectiveConnections);
+  var resolvedFilters = linkFilters.filters;
+  var [searchText, setSearchText] = useState("");
+  var [debouncedSearch, setDebouncedSearch] = useState("");
   var listFilters = useMemo(function () {
     var query = debouncedSearch.trim();
     if (!query) return resolvedFilters;
-    var searchFilter = [searchField, "like", `%${query}%`];
-    if (!resolvedFilters) return [searchFilter];
-    if (Array.isArray(resolvedFilters)) return [...resolvedFilters, searchFilter];
+    var searchFilter2 = [searchField, "like", `%${query}%`];
+    if (!resolvedFilters) return [searchFilter2];
+    if (Array.isArray(resolvedFilters)) return [...resolvedFilters, searchFilter2];
     return [...Object.entries(resolvedFilters).map(function (param2) {
       var [key, value] = param2;
       return [key, "=", value];
-    }), searchFilter];
+    }), searchFilter2];
   }, [resolvedFilters, debouncedSearch, searchField]);
   var hasProvidedFilters = useMemo(function () {
     if (!activeFilters) return false;
@@ -390,18 +465,352 @@ function FrappeListViewBody(param) {
   var handleDeleteFilter = useCallback(async function (name) {
     await savedFiltersHook.deleteFilter(name);
   }, [savedFiltersHook]);
+  var slug = doctype.toLowerCase().replace(/\s+/g, "-");
+  var searchId = `${slug}-list-search`;
+  var resultsId = `${slug}-results`;
+  var nameField = titleField !== null && titleField !== void 0 ? titleField : meta === null || meta === void 0 ? void 0 : meta.title_field;
+  var [shuffleOpen, setShuffleOpen] = useState(false);
+  var [shuffleRows, setShuffleRows] = useState([]);
+  var handleShuffleRows = useCallback(function (snapshot) {
+    return setShuffleRows(snapshot.rows);
+  }, []);
+  var shuffleOrderKey = JSON.stringify((_ref1 = (_ref2 = sorts === null || sorts === void 0 ? void 0 : (_sorts_ = sorts[0]) === null || _sorts_ === void 0 ? void 0 : _sorts_.orderBy) !== null && _ref2 !== void 0 ? _ref2 : orderBy) !== null && _ref1 !== void 0 ? _ref1 : null);
+  var shuffleFiltersKey = JSON.stringify(resolvedFilters !== null && resolvedFilters !== void 0 ? resolvedFilters : null);
+  var shuffleFieldsKey = JSON.stringify(effectiveFields);
+  var shuffleOptions = useMemo(function () {
+    var _JSON_parse, _JSON_parse1;
+    return {
+      fields: JSON.parse(shuffleFieldsKey),
+      filters: (_JSON_parse = JSON.parse(shuffleFiltersKey)) !== null && _JSON_parse !== void 0 ? _JSON_parse : void 0,
+      orderBy: (_JSON_parse1 = JSON.parse(shuffleOrderKey)) !== null && _JSON_parse1 !== void 0 ? _JSON_parse1 : void 0,
+      limit: limit !== null && limit !== void 0 ? limit : 0
+    };
+  }, [shuffleFieldsKey, shuffleFiltersKey, shuffleOrderKey, limit]);
+  var {
+    isFavorite,
+    toggle: toggleStar
+  } = list.favorites;
+  var toggleFavorite = useCallback(function (doc) {
+    var name = doc.name;
+    if (!name) return;
+    var starred = isFavorite(name);
+    toggleStar(name);
+    var titleValue = nameField ? doc[nameField] : void 0;
+    var 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: function onPress() {
+          return toggleStar(name);
+        }
+      }
+    } : {
+      id: `${slug}-favorite-${name}`,
+      title: t("{{name}} added to favorites", {
+        name: label
+      }),
+      intent: "success"
+    });
+  }, [isFavorite, toggleStar, nameField, slug, t]);
+  var cardFor = function cardFor2(doc) {
+    var _doc_name;
+    var name = (_doc_name = doc.name) !== null && _doc_name !== void 0 ? _doc_name : "";
+    var row = doc;
+    return {
+      href: route !== void 0 && name ? frappeRouteHref(route, {
+        mode: "view",
+        name
+      }) : void 0,
+      open: function open() {
+        return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(doc);
+      },
+      facets: Object.fromEntries((facets !== null && facets !== void 0 ? facets : []).map(function (facet) {
+        var _ref3;
+        var _list_facets_facet_param;
+        return [facet.param, facet.doctype ? (_ref3 = (_list_facets_facet_param = list.facets[facet.param]) === null || _list_facets_facet_param === void 0 ? void 0 : _list_facets_facet_param.values.get(name)) !== null && _ref3 !== void 0 ? _ref3 : [] : row[facet.field] === void 0 || row[facet.field] === null ? [] : [String(row[facet.field])]];
+      })),
+      favorite: favoritesStorageKey && name ? {
+        active: isFavorite(name),
+        toggle: function toggle() {
+          return toggleFavorite(doc);
+        }
+      } : void 0
+    };
+  };
+  var tintFacet = facets === null || facets === void 0 ? void 0 : facets.find(function (facet) {
+    return facet.tint;
+  });
+  var drawRecordCard = function drawRecordCard2(doc, index) {
+    var _doc_name, _card_facets_tintFacet_param, _ref3;
+    var _look_subtitle, _look_code, _look_images;
+    var card = cardFor(doc);
+    var name = (_doc_name = doc.name) !== null && _doc_name !== void 0 ? _doc_name : "";
+    var values = tintFacet ? (_card_facets_tintFacet_param = card.facets[tintFacet.param]) !== null && _card_facets_tintFacet_param !== void 0 ? _card_facets_tintFacet_param : [] : [];
+    var title2 = recordTitle(doc, look, nameField);
+    return /* @__PURE__ */_jsx(RecordCard, {
+      title: title2,
+      subtitle: look === null || look === void 0 ? void 0 : (_look_subtitle = look.subtitle) === null || _look_subtitle === void 0 ? void 0 : _look_subtitle.call(look, doc),
+      code: look === null || look === void 0 ? void 0 : (_look_code = look.code) === null || _look_code === void 0 ? void 0 : _look_code.call(look, doc),
+      images: (_ref3 = look === null || look === void 0 ? void 0 : (_look_images = look.images) === null || _look_images === void 0 ? void 0 : _look_images.call(look, doc, finalBaseURL)) !== null && _ref3 !== void 0 ? _ref3 : [],
+      tints: values.slice(0, 2).map(function (value) {
+        var _tintFacet_tint;
+        return tintFacet === null || tintFacet === void 0 ? void 0 : (_tintFacet_tint = tintFacet.tint) === null || _tintFacet_tint === void 0 ? void 0 : _tintFacet_tint.call(tintFacet, value);
+      }),
+      badges: values.map(function (value) {
+        var _ref4;
+        var _tintFacet_optionLabel, _tintFacet_tint;
+        return {
+          value,
+          label: (_ref4 = tintFacet === null || tintFacet === void 0 ? void 0 : (_tintFacet_optionLabel = tintFacet.optionLabel) === null || _tintFacet_optionLabel === void 0 ? void 0 : _tintFacet_optionLabel.call(tintFacet, value)) !== null && _ref4 !== void 0 ? _ref4 : value,
+          tint: tintFacet === null || tintFacet === void 0 ? void 0 : (_tintFacet_tint = tintFacet.tint) === null || _tintFacet_tint === void 0 ? void 0 : _tintFacet_tint.call(tintFacet, value)
+        };
+      }),
+      href: card.href,
+      onPress: card.open,
+      favorite: card.favorite,
+      lazy: index >= eagerCards,
+      testID: `${slug}-card-${name}`,
+      favoriteTestID: `${slug}-favorite-${name}`
+    });
+  };
+  var drawCard = renderCard ? function (doc, index) {
+    return renderCard(doc, index, cardFor(doc));
+  } : (look === null || look === void 0 ? void 0 : look.images) ? drawRecordCard : void 0;
+  useEffect(function () {
+    if (!isWeb || typeof document === "undefined" || !showSearch) return;
+    var handleKeyDown = function handleKeyDown2(event) {
+      var _document_getElementById, _input_select;
+      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.defaultPrevented) return;
+      var target = event.target;
+      if (target) {
+        var _target_closest;
+        var tag = target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (target.isContentEditable) return;
+        if ((_target_closest = target.closest) === null || _target_closest === void 0 ? void 0 : _target_closest.call(target, '[role="dialog"], [role="menu"], [role="listbox"]')) return;
+      }
+      var input = (_document_getElementById = document.getElementById(searchId)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.querySelector("input");
+      if (!input) return;
+      event.preventDefault();
+      input.focus();
+      (_input_select = input.select) === null || _input_select === void 0 ? void 0 : _input_select.call(input);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      return document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [searchId, showSearch]);
+  var headerOwnsTools = route !== void 0 && !showToolbar;
+  var pressFor = function pressFor2(action) {
+    var _action_onPress;
+    return (_action_onPress = action.onPress) !== null && _action_onPress !== void 0 ? _action_onPress : action.href && navigate ? function () {
+      return navigate(action.href);
+    } : void 0;
+  };
+  var headerActions = headerOwnsTools || headerAccessory || (actions === null || actions === void 0 ? void 0 : 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: function onViewChange(v) {
+            return setViewMode(v);
+          }
+        })
+      })
+    }) : null, headerAccessory, actions === null || actions === void 0 ? void 0 : actions.map(function (action) {
+      var _action_hint;
+      var Icon = action.icon;
+      var onPress = pressFor(action);
+      return /* @__PURE__ */_jsxs(React.Fragment, {
+        children: [/* @__PURE__ */_jsx(Tooltip, {
+          content: (_action_hint = action.hint) !== null && _action_hint !== void 0 ? _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;
+  var controlsBand = hasControls ? /* @__PURE__ */_jsx(ListControls, {
+    controls: listControls,
+    list,
+    searchId,
+    searchPlaceholder,
+    showSearch,
+    showFavorites: Boolean(favoritesStorageKey),
+    shuffle: shuffle ? {
+      open: shuffleOpen,
+      toggle: function toggle() {
+        return setShuffleOpen(function (open) {
+          return !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: function renderPick(doc) {
+        return drawCard(doc, 0);
+      },
+      onGo: function onGo(doc) {
+        setShuffleOpen(false);
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(doc);
+      },
+      testID: `${slug}-shuffle-panel`
+    }) : null,
+    separator: !surface,
+    testID: slug
+  }) : null;
+  var asPage = function asPage2(view) {
+    var 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 !== null && title !== void 0 ? title : doctype,
+          subtitle: subtitle && list.total !== void 0 ? subtitle(list.total) : void 0,
+          actions: headerActions,
+          divider: !surface
+        })]
+      }),
+      toolbar: controlsBand !== null && controlsBand !== void 0 ? controlsBand : void 0,
+      children: [view, extras]
+    });
+  };
+  var 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
         })
@@ -423,7 +832,7 @@ function FrappeListViewBody(param) {
         alignItems: "center",
         ...knobProps.gap,
         children: /* @__PURE__ */_jsx(ViewSwitcher, {
-          views: [...(renderCard ? [{
+          views: [...(hasCards ? [{
             type: "grid",
             label: t("Cards")
           }] : []), {
@@ -533,6 +942,7 @@ function FrappeListViewBody(param) {
       borderBottomColor: "$borderColor",
       children: /* @__PURE__ */_jsx(View, {
         flex: 1,
+        id: searchId,
         children: /* @__PURE__ */_jsx(SearchInput, {
           value: searchText,
           onChange: setSearchText,
@@ -553,23 +963,23 @@ function FrappeListViewBody(param) {
       var 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 !== null && emptyState !== void 0 ? emptyState : controlsEmptyState,
           pageSize,
           onRetry: onRetry !== null && onRetry !== void 0 ? 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,
           // Only override when narrowing is active: FrappeList's own
           // "No {doctype} records found" stays the true-empty message.
           ...(noResultsMessage ? {
@@ -614,6 +1024,9 @@ function FrappeListViewBody(param) {
     ...(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,