@multiplatform.one/frappe-ui 7.23.1 → 7.24.0

package/dist/cjs/FrappeListView.native.js

@@ -51,13 +51,24 @@ var import_theme = require("@multiplatform.one/theme");
 var import_store = require("@multiplatform.one/store");
 var import_FrappeProvider = require("./FrappeProvider.native.js");
 var import_FrappeList = require("./FrappeList.native.js");
+var import_FrappeNotConfigured = require("./FrappeNotConfigured.native.js");
+var import_FrappeRowsReader = require("./FrappeRowsReader.native.js");
 var import_FrappeTable = require("./FrappeTable.native.js");
 var import_useDocRights = require("./formEngine/useDocRights.native.js");
 var import_frappeNavigation = require("./frappeNavigation.native.js");
 var import_frappeConnections = require("./frappeConnections.native.js");
 var import_liveErrors = require("./liveErrors.native.js");
+var import_favorites = require("./list/favorites.native.js");
+var import_RecordCard = require("./list/RecordCard.native.js");
+var import_recordLook = require("./list/recordLook.native.js");
+var import_ListControls = require("./list/ListControls.native.js");
+var import_listState = require("./list/listState.native.js");
+var import_ListToastHost = require("./list/ListToastHost.native.js");
+var import_ShufflePanel = require("./list/ShufflePanel.native.js");
+var import_useListControls = require("./list/useListControls.native.js");
 var import_useConnectionFilters = require("./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) {
@@ -83,7 +94,20 @@ async function setStoredViewMode(doctype, mode) {
     await Promise.resolve(import_store.storage.setItem(`${storageKeyPrefix}${doctype}`, mode));
   } catch (unused) {}
 }
-function FrappeListView(param) {
+function FrappeListView(props) {
+  var _props_baseURL;
+  var config = (0, import_FrappeProvider.useFrappeConfig)();
+  if (!((_props_baseURL = props.baseURL) !== null && _props_baseURL !== void 0 ? _props_baseURL : config === null || config === void 0 ? void 0 : config.baseURL) && !(config === null || config === void 0 ? void 0 : config.fixtures)) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeNotConfigured.FrappeNotConfigured, {
+      doctype: props.doctype,
+      page: props.route !== void 0
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FrappeListViewBody, {
+    ...props
+  });
+}
+function FrappeListViewBody(param) {
   var {
     doctype,
     fields,
@@ -97,10 +121,12 @@ function FrappeListView(param) {
     route,
     orderBy,
     limit,
-    initialRows,
+    initialRows: initialRowsProp,
+    loader,
     columns,
     displayFields,
     renderCard,
+    look,
     gridProps,
     emptyState,
     onRetry,
@@ -111,14 +137,29 @@ function FrappeListView(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 = (0, import_FrappeProvider.useFrappeConfig)();
-  var navigate = (_useFrappeRouter = (0, import_frappeNavigation.useFrappeRouter)()) === null || _useFrappeRouter === void 0 ? void 0 : _useFrappeRouter.navigate;
+  var router = (0, import_frappeNavigation.useFrappeRouter)();
+  var navigate = router === null || router === void 0 ? void 0 : router.navigate;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
@@ -143,8 +184,6 @@ function FrappeListView(param) {
     fixtures: config === null || config === void 0 ? void 0 : config.fixtures
   };
   var [storedViewMode, setViewModeState] = (0, import_react2.useState)(defaultViewMode);
-  var requestedViewMode = controlledViewMode !== null && controlledViewMode !== void 0 ? controlledViewMode : storedViewMode;
-  var viewMode = requestedViewMode === "grid" && !renderCard ? "list" : requestedViewMode;
   (0, import_react2.useEffect)(function () {
     var cancelled = false;
     setViewModeState(defaultViewMode);
@@ -158,12 +197,6 @@ function FrappeListView(param) {
       cancelled = true;
     };
   }, [doctype, defaultViewMode]);
-  var setViewMode = (0, import_react2.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,
@@ -183,16 +216,6 @@ function FrappeListView(param) {
       mode: "create"
     }));
   } : void 0;
-  var asPage = function asPage2(view) {
-    return 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
-    });
-  };
   var [peekedFields, setPeekedFields] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(function () {
     if (meta || isMetaLoading || !metaError || !finalBaseURL) return;
@@ -281,9 +304,9 @@ function FrappeListView(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;
@@ -292,7 +315,7 @@ function FrappeListView(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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       alignItems: "center",
       flex: 1,
@@ -315,7 +338,7 @@ function FrappeListView(param) {
           ...{
             "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,
@@ -368,26 +391,92 @@ function FrappeListView(param) {
   var effectiveConnections = (0, import_react2.useMemo)(function () {
     return connections !== null && connections !== void 0 ? connections : isMetaLoading ? void 0 : (0, import_frappeConnections.connectionsFromMeta)(meta);
   }, [connections, isMetaLoading, meta]);
-  var linkFilters = (0, import_useConnectionFilters.useConnectionFilters)(connectionConfig, doctype, activeFilters, effectiveConnections);
-  var resolvedFilters = linkFilters.filters;
-  var [searchText, setSearchText] = (0, import_react2.useState)("");
-  var [debouncedSearch, setDebouncedSearch] = (0, import_react2.useState)("");
   var searchField = (0, import_react2.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 : (0, import_favorites.favoritesKey)(doctype) : void 0;
+  var list = (0, import_useListControls.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 = (0, import_react2.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 = (0, import_react2.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 (0, import_listState.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 ? (0, import_listState.listStateOrderBy)(list.state, listControls, orderBy) : orderBy;
+  var loaded = (0, import_frappeNavigation.useRouteLoaderData)(loader);
+  var initialRows = initialRowsProp !== null && initialRowsProp !== void 0 ? initialRowsProp : loaded === null || loaded === void 0 ? void 0 : loaded.rows;
+  var seedRows = !hasControls || !(0, import_listState.isListNarrowed)(list.state) && (!(sorts === null || sorts === void 0 ? void 0 : sorts.length) || list.state.sort === sorts[0].value) ? initialRows : void 0;
+  var linkFilters = (0, import_useConnectionFilters.useConnectionFilters)(connectionConfig, doctype, controlFilters, effectiveConnections);
+  var resolvedFilters = linkFilters.filters;
+  var [searchText, setSearchText] = (0, import_react2.useState)("");
+  var [debouncedSearch, setDebouncedSearch] = (0, import_react2.useState)("");
   var listFilters = (0, import_react2.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 = (0, import_react2.useMemo)(function () {
     if (!activeFilters) return false;
@@ -416,18 +505,352 @@ function FrappeListView(param) {
   var handleDeleteFilter = (0, import_react2.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] = (0, import_react2.useState)(false);
+  var [shuffleRows, setShuffleRows] = (0, import_react2.useState)([]);
+  var handleShuffleRows = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.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;
+    (0, import_components.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 ? (0, import_frappeNavigation.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 = (0, import_recordLook.recordTitle)(doc, look, nameField);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RecordCard.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;
+  (0, import_react2.useEffect)(function () {
+    if (!import_tamagui.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__ */(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: 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__ */(0, import_jsx_runtime.jsxs)(import_react2.default.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: (_action_hint = action.hint) !== null && _action_hint !== void 0 ? _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;
+  var 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: function toggle() {
+        return setShuffleOpen(function (open) {
+          return !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: 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__ */(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 !== 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__ */(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
         })
@@ -449,7 +872,7 @@ function FrappeListView(param) {
         alignItems: "center",
         ...knobProps.gap,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ViewSwitcher, {
-          views: [...(renderCard ? [{
+          views: [...(hasCards ? [{
             type: "grid",
             label: t("Cards")
           }] : []), {
@@ -559,6 +982,7 @@ function FrappeListView(param) {
       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,
@@ -579,23 +1003,23 @@ function FrappeListView(param) {
       var 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 !== 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 ? {
@@ -640,6 +1064,9 @@ function FrappeListView(param) {
     ...(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,