@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/dist/cjs/list/FacetRail.native.js

@@ -31,8 +31,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@multiplatform.one/components");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
-var chipVisualHeight = 38;
-var chipHitSlop = (0, import_theme.pressTargetHitSlop)(chipVisualHeight);
 var pipSize = "$1";
 function RailChip(param) {
   var {
@@ -49,6 +47,13 @@ function RailChip(param) {
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var chipToken = (0, import_theme.sizeKeyBelow)(knobProps.sizeToken);
+  var chip = (0, import_theme.sizeRecipeForToken)(chipToken, {
+    family: "chip"
+  });
+  var count = (0, import_theme.sizeRecipeForToken)((0, import_theme.sizeKeyBelow)(chipToken), {
+    family: "chip"
+  });
   var [kbFocus, setKbFocus] = (0, import_react.useState)(false);
   if (import_components.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   var hue = option.tint;
@@ -66,18 +71,18 @@ function RailChip(param) {
     ...knobProps.borderRadius,
     backgroundColor: fill,
     borderWidth: 0,
-    paddingHorizontal: "$3",
-    minHeight: chipVisualHeight,
-    hitSlop: chipHitSlop,
+    paddingHorizontal: chip.paddingHorizontal,
+    height: chip.height,
+    hitSlop: (0, import_theme.pressTargetHitSlop)(chip.height),
     alignItems: "center",
-    gap: "$1.5",
+    gap: chip.gap,
     cursor: "pointer",
     role: "radio",
     "aria-checked": selected,
     ...(import_components.isWeb ? {
       tabIndex: tabStop ? 0 : -1
     } : void 0),
-    ...(0, import_theme.transitionProps)(knobProps.transition),
+    ...(0, import_theme.transitionProps)(knobProps.motion.control),
     hoverStyle: {
       backgroundColor: hoverFill
     },
@@ -127,6 +132,7 @@ function RailChip(param) {
       flexShrink: 0
     }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
       ...knobProps.label,
+      fontSize: chip.fontSize,
       fontWeight: selected ? "700" : "500",
       color: textColor,
       textTransform: "capitalize",
@@ -134,7 +140,7 @@ function RailChip(param) {
       children: option.label
     }), typeof option.count === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
       ...knobProps.label,
-      fontSize: "$1",
+      fontSize: count.fontSize,
       fontWeight: "700",
       color: textColor,
       opacity: 0.7,

package/dist/cjs/list/FacetRail.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FacetRail_exports","__export","FacetRail","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","chipVisualHeight","chipHitSlop","pressTargetHitSlop","pipSize","RailChip","param","option","selected","tabStop","onPress","onFocusChip","onBlurChip","onMove","testID","register","knobProps","useResolvedKnobs","kbFocus","setKbFocus","useState","isWeb","ensureKeyboardModalityTracking","hue","tint","fill","hoverFill","textColor","keys","ArrowRight","ArrowLeft","Home","End","jsxs","XStack","ref","borderRadius","backgroundColor","borderWidth","paddingHorizontal","minHeight","hitSlop","alignItems","gap","cursor","role","tabIndex","transitionProps","transition","hoverStyle","pressStyle","outlineWidth","focusStyle","focusVisibleStyle","onFocus","wasKeyboardFocus","onBlur","onKeyDown","event","direction","key","_event_preventDefault","preventDefault","call","_event_preventDefault1","keyboardFocusRingProps","children","jsx","width","height","flexShrink","Text","label","fontWeight","color","textTransform","userSelect","count","fontSize","opacity","options","onChange","itemRefs","useRef","focusValue","setFocusValue","anchor","some","focusAndSelect","focusAndSelect2","next","requestAnimationFrame","_node_focus","_node_scrollIntoView","node","current","focus","scrollIntoView","inline","block","moveFrom","moveFrom2","from","length","index","Math","max","findIndex","ScrollView","horizontal","showsHorizontalScrollIndicator","paddingVertical","map","prev"],"sources":["../../../src/list/FacetRail.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FacetRail_exports","__export","FacetRail","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","pipSize","RailChip","param","option","selected","tabStop","onPress","onFocusChip","onBlurChip","onMove","testID","register","knobProps","useResolvedKnobs","chipToken","sizeKeyBelow","sizeToken","chip","sizeRecipeForToken","family","count","kbFocus","setKbFocus","useState","isWeb","ensureKeyboardModalityTracking","hue","tint","fill","hoverFill","textColor","keys","ArrowRight","ArrowLeft","Home","End","jsxs","XStack","ref","borderRadius","backgroundColor","borderWidth","paddingHorizontal","height","hitSlop","pressTargetHitSlop","alignItems","gap","cursor","role","tabIndex","transitionProps","motion","control","hoverStyle","pressStyle","outlineWidth","focusStyle","focusVisibleStyle","onFocus","wasKeyboardFocus","onBlur","onKeyDown","event","direction","key","_event_preventDefault","preventDefault","call","_event_preventDefault1","keyboardFocusRingProps","children","jsx","width","flexShrink","Text","label","fontSize","fontWeight","color","textTransform","userSelect","opacity","options","onChange","itemRefs","useRef","focusValue","setFocusValue","anchor","some","focusAndSelect","focusAndSelect2","next","requestAnimationFrame","_node_focus","_node_scrollIntoView","node","current","focus","scrollIntoView","inline","block","moveFrom","moveFrom2","from","length","index","Math","max","findIndex","ScrollView","horizontal","showsHorizontalScrollIndicator","paddingVertical","map","prev"],"sources":["../../../src/list/FacetRail.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/list/ImageWell.cjs

@@ -86,7 +86,7 @@ function ImageWell({
       height: imageSize,
       objectFit: "contain",
       opacity: revealed ? 1 : 0,
-      transition: knobProps.transition,
+      ...(0, import_theme.transitionProps)(knobProps.motion.reveal),
       zIndex: 1,
       ...(import_components.isWeb ? {
         loading: lazy ? "lazy" : "eager",

package/dist/cjs/list/ImageWell.native.js

@@ -94,7 +94,7 @@ function ImageWell(param) {
       height: imageSize,
       objectFit: "contain",
       opacity: revealed ? 1 : 0,
-      transition: knobProps.transition,
+      ...(0, import_theme.transitionProps)(knobProps.motion.reveal),
       zIndex: 1,
       ...(import_components.isWeb ? {
         loading: lazy ? "lazy" : "eager",

package/dist/cjs/list/ImageWell.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ImageWell_exports","__export","ImageWell","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","param","sources","alt","tints","pixelated","inset","lazy","wellProps","_ref","_sources_sourceIndex","knobProps","useResolvedKnobs","sourceIndex","setSourceIndex","useState","revealedSrc","setRevealedSrc","hue","secondHue","sourceKey","join","useEffect","src","revealed","isWeb","timer","setTimeout","clearTimeout","imageSize","Math","round","jsxs","YStack","borderRadius","borderWidth","backgroundColor","aspectRatio","width","alignItems","justifyContent","overflow","position","children","XStack","fullscreen","zIndex","pointerEvents","jsx","flex","Image","height","objectFit","opacity","transition"],"sources":["../../../src/list/ImageWell.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ImageWell_exports","__export","ImageWell","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","param","sources","alt","tints","pixelated","inset","lazy","wellProps","_ref","_sources_sourceIndex","knobProps","useResolvedKnobs","sourceIndex","setSourceIndex","useState","revealedSrc","setRevealedSrc","hue","secondHue","sourceKey","join","useEffect","src","revealed","isWeb","timer","setTimeout","clearTimeout","imageSize","Math","round","jsxs","YStack","borderRadius","borderWidth","backgroundColor","aspectRatio","width","alignItems","justifyContent","overflow","position","children","XStack","fullscreen","zIndex","pointerEvents","jsx","flex","Image","height","objectFit","opacity","transitionProps","motion","reveal"],"sources":["../../../src/list/ImageWell.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/list/ListControls.cjs

@@ -30,8 +30,10 @@ var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react_i18next = require("react-i18next");
+var import_BandFilters = require("./BandFilters.cjs");
 var import_FacetRail = require("./FacetRail.cjs");
 var import_listState = require("./listState.cjs");
+var import_ListToolsSheet = require("./ListToolsSheet.cjs");
 var import_RangeFilter = require("./RangeFilter.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const searchBasis = 260;
@@ -48,6 +50,7 @@ function ListControls({
   shuffle,
   shufflePanel,
   separator,
+  compactAccessory,
   testID
 }) {
   const {
@@ -64,15 +67,91 @@ function ListControls({
   const sorts = controls.sorts ?? [];
   const narrowed = (0, import_listState.isListNarrowed)(state);
   const favoritesLabel = t("Favorites");
+  const compact = (0, import_theme.useLayoutSizeClass)() === "compact";
+  const facets = controls.facets ?? [];
+  const facetRail = facet => {
+    const reading = list.facets[facet.param];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
+      label: facet.label,
+      value: state.facets[facet.param] ?? "",
+      onChange: value => update({
+        facets: {
+          [facet.param]: value
+        }
+      }),
+      testID: `${testID}-${facet.param}`,
+      options: [{
+        value: "",
+        label: facet.allLabel ?? t("All"),
+        count: list.total
+      }, ...facet.options.map(value => ({
+        value,
+        label: facet.optionLabel?.(value) ?? value,
+        tint: facet.tint?.(value),
+        count: reading?.counts[value]
+      }))]
+    }, facet.param);
+  };
+  const searchBox = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+      value: list.searchText,
+      onChange: list.setSearchText,
+      onSearch: text => update({
+        search: text
+      }),
+      placeholder: searchPlaceholder ?? t("Search..."),
+      "aria-label": searchPlaceholder ?? t("Search..."),
+      debounceMs: 200,
+      clearable: true
+    })
+  });
+  if (compact) {
+    const [chipFacet, ...sheetFacets] = facets;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gap,
+        testID: `${testID}-controls`,
+        ...{
+          "data-controls-layout": "compact"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          ...knobProps.gap,
+          alignItems: "center",
+          flexWrap: "nowrap",
+          testID: `${testID}-controls-row`,
+          children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            id: searchId,
+            flex: 1,
+            minWidth: 0,
+            alignItems: "center",
+            children: searchBox
+          }) : null, compactAccessory, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListToolsSheet.ListToolsSheet, {
+            controls,
+            list,
+            showFavorites,
+            shuffle,
+            facets: sheetFacets,
+            testID
+          })]
+        }), shufflePanel, chipFacet ? facetRail(chipFacet) : null]
+      }), separator ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Separator, {}) : null]
+    });
+  }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
       ...knobProps.gap,
       testID: `${testID}-controls`,
+      ...{
+        "data-controls-layout": "wide"
+      },
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         ...knobProps.gap,
         alignItems: "center",
-        flexWrap: "wrap",
-        justifyContent: "space-between",
+        flexWrap: "nowrap",
+        testID: `${testID}-controls-row`,
         children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
           id: searchId,
           flexGrow: 1,
@@ -80,34 +159,12 @@ function ListControls({
           flexBasis: searchBasis,
           minWidth: searchMinWidth,
           alignItems: "center",
-          "$max-sm": {
-            flexBasis: "100%",
-            maxWidth: "100%"
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-            flexGrow: 1,
-            flexShrink: 1,
-            minWidth: 0,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
-              value: list.searchText,
-              onChange: list.setSearchText,
-              onSearch: text => update({
-                search: text
-              }),
-              placeholder: searchPlaceholder ?? t("Search..."),
-              "aria-label": searchPlaceholder ?? t("Search..."),
-              debounceMs: 200,
-              compact: true,
-              clearable: true
-            })
-          })
+          children: searchBox
         }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
           ...knobProps.gap,
           alignItems: "center",
-          flexWrap: "wrap",
-          "$max-sm": {
-            width: "100%"
-          },
+          flexWrap: "nowrap",
+          flexShrink: 1,
           children: [sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
             minWidth: sortMinWidth,
             flexGrow: 1,
@@ -163,40 +220,17 @@ function ListControls({
             })
           }) : null]
         })]
-      }), shufflePanel, (controls.facets ?? []).map(facet => {
-        const reading = list.facets[facet.param];
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
-          label: facet.label,
-          value: state.facets[facet.param] ?? "",
-          onChange: value => update({
-            facets: {
-              [facet.param]: value
-            }
-          }),
-          testID: `${testID}-${facet.param}`,
-          options: [{
-            value: "",
-            label: facet.allLabel ?? t("All"),
-            count: list.total
-          }, ...facet.options.map(value => ({
-            value,
-            label: facet.optionLabel?.(value) ?? value,
-            tint: facet.tint?.(value),
-            count: reading?.counts[value]
-          }))]
-        }, facet.param);
-      }), (controls.ranges?.length ?? 0) > 0 || narrowed ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      }), shufflePanel, facets.map(facetRail), (controls.bands ?? []).map(band => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BandFilters.BandFilter, {
+        band,
+        list,
+        testID: `${testID}-${band.param}`
+      }, band.param)), (controls.ranges?.length ?? 0) > 0 || narrowed ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         ...knobProps.gap,
         alignItems: "center",
         flexWrap: "wrap",
-        justifyContent: "space-between",
         children: [(controls.ranges ?? []).map(range => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
           maxWidth: rangeMaxWidth,
           flexGrow: 1,
-          "$max-sm": {
-            maxWidth: "100%",
-            width: "100%"
-          },
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RangeFilter.RangeFilter, {
             label: range.label,
             value: state.ranges[range.param] ?? 0,

package/dist/cjs/list/ListControls.native.js

@@ -33,8 +33,10 @@ var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react_i18next = require("react-i18next");
+var import_BandFilters = require("./BandFilters.native.js");
 var import_FacetRail = require("./FacetRail.native.js");
 var import_listState = require("./listState.native.js");
+var import_ListToolsSheet = require("./ListToolsSheet.native.js");
 var import_RangeFilter = require("./RangeFilter.native.js");
 var searchBasis = 260;
 var searchMinWidth = 220;
@@ -51,9 +53,10 @@ function ListControls(param) {
     shuffle,
     shufflePanel,
     separator,
+    compactAccessory,
     testID
   } = param;
-  var _controls_sorts, _controls_facets, _ref, _controls_ranges;
+  var _controls_sorts, _controls_facets, _controls_bands, _ref, _controls_ranges;
   var _controls_ranges1;
   var {
     t
@@ -69,15 +72,100 @@ function ListControls(param) {
   var sorts = (_controls_sorts = controls.sorts) !== null && _controls_sorts !== void 0 ? _controls_sorts : [];
   var narrowed = (0, import_listState.isListNarrowed)(state);
   var favoritesLabel = t("Favorites");
+  var compact = (0, import_theme.useLayoutSizeClass)() === "compact";
+  var facets = (_controls_facets = controls.facets) !== null && _controls_facets !== void 0 ? _controls_facets : [];
+  var facetRail = function facetRail2(facet) {
+    var _state_facets_facet_param, _facet_allLabel;
+    var reading = list.facets[facet.param];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
+      label: facet.label,
+      value: (_state_facets_facet_param = state.facets[facet.param]) !== null && _state_facets_facet_param !== void 0 ? _state_facets_facet_param : "",
+      onChange: function onChange(value) {
+        return update({
+          facets: {
+            [facet.param]: value
+          }
+        });
+      },
+      testID: `${testID}-${facet.param}`,
+      options: [{
+        value: "",
+        label: (_facet_allLabel = facet.allLabel) !== null && _facet_allLabel !== void 0 ? _facet_allLabel : t("All"),
+        count: list.total
+      }, ...facet.options.map(function (value) {
+        var _ref2;
+        var _facet_optionLabel, _facet_tint;
+        return {
+          value,
+          label: (_ref2 = (_facet_optionLabel = facet.optionLabel) === null || _facet_optionLabel === void 0 ? void 0 : _facet_optionLabel.call(facet, value)) !== null && _ref2 !== void 0 ? _ref2 : value,
+          tint: (_facet_tint = facet.tint) === null || _facet_tint === void 0 ? void 0 : _facet_tint.call(facet, value),
+          count: reading === null || reading === void 0 ? void 0 : reading.counts[value]
+        };
+      })]
+    }, facet.param);
+  };
+  var searchBox = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+      value: list.searchText,
+      onChange: list.setSearchText,
+      onSearch: function onSearch(text) {
+        return update({
+          search: text
+        });
+      },
+      placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t("Search..."),
+      "aria-label": searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t("Search..."),
+      debounceMs: 200,
+      clearable: true
+    })
+  });
+  if (compact) {
+    var [chipFacet, ...sheetFacets] = facets;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gap,
+        testID: `${testID}-controls`,
+        ...{
+          "data-controls-layout": "compact"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          ...knobProps.gap,
+          alignItems: "center",
+          flexWrap: "nowrap",
+          testID: `${testID}-controls-row`,
+          children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            id: searchId,
+            flex: 1,
+            minWidth: 0,
+            alignItems: "center",
+            children: searchBox
+          }) : null, compactAccessory, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListToolsSheet.ListToolsSheet, {
+            controls,
+            list,
+            showFavorites,
+            shuffle,
+            facets: sheetFacets,
+            testID
+          })]
+        }), shufflePanel, chipFacet ? facetRail(chipFacet) : null]
+      }), separator ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Separator, {}) : null]
+    });
+  }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
       ...knobProps.gap,
       testID: `${testID}-controls`,
+      ...{
+        "data-controls-layout": "wide"
+      },
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         ...knobProps.gap,
         alignItems: "center",
-        flexWrap: "wrap",
-        justifyContent: "space-between",
+        flexWrap: "nowrap",
+        testID: `${testID}-controls-row`,
         children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
           id: searchId,
           flexGrow: 1,
@@ -85,36 +173,12 @@ function ListControls(param) {
           flexBasis: searchBasis,
           minWidth: searchMinWidth,
           alignItems: "center",
-          "$max-sm": {
-            flexBasis: "100%",
-            maxWidth: "100%"
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-            flexGrow: 1,
-            flexShrink: 1,
-            minWidth: 0,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
-              value: list.searchText,
-              onChange: list.setSearchText,
-              onSearch: function onSearch(text) {
-                return update({
-                  search: text
-                });
-              },
-              placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t("Search..."),
-              "aria-label": searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t("Search..."),
-              debounceMs: 200,
-              compact: true,
-              clearable: true
-            })
-          })
+          children: searchBox
         }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
           ...knobProps.gap,
           alignItems: "center",
-          flexWrap: "wrap",
-          "$max-sm": {
-            width: "100%"
-          },
+          flexWrap: "nowrap",
+          flexShrink: 1,
           children: [sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
             minWidth: sortMinWidth,
             flexGrow: 1,
@@ -176,49 +240,21 @@ function ListControls(param) {
             })
           }) : null]
         })]
-      }), shufflePanel, ((_controls_facets = controls.facets) !== null && _controls_facets !== void 0 ? _controls_facets : []).map(function (facet) {
-        var _state_facets_facet_param, _facet_allLabel;
-        var reading = list.facets[facet.param];
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
-          label: facet.label,
-          value: (_state_facets_facet_param = state.facets[facet.param]) !== null && _state_facets_facet_param !== void 0 ? _state_facets_facet_param : "",
-          onChange: function onChange(value) {
-            return update({
-              facets: {
-                [facet.param]: value
-              }
-            });
-          },
-          testID: `${testID}-${facet.param}`,
-          options: [{
-            value: "",
-            label: (_facet_allLabel = facet.allLabel) !== null && _facet_allLabel !== void 0 ? _facet_allLabel : t("All"),
-            count: list.total
-          }, ...facet.options.map(function (value) {
-            var _ref2;
-            var _facet_optionLabel, _facet_tint;
-            return {
-              value,
-              label: (_ref2 = (_facet_optionLabel = facet.optionLabel) === null || _facet_optionLabel === void 0 ? void 0 : _facet_optionLabel.call(facet, value)) !== null && _ref2 !== void 0 ? _ref2 : value,
-              tint: (_facet_tint = facet.tint) === null || _facet_tint === void 0 ? void 0 : _facet_tint.call(facet, value),
-              count: reading === null || reading === void 0 ? void 0 : reading.counts[value]
-            };
-          })]
-        }, facet.param);
+      }), shufflePanel, facets.map(facetRail), ((_controls_bands = controls.bands) !== null && _controls_bands !== void 0 ? _controls_bands : []).map(function (band) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BandFilters.BandFilter, {
+          band,
+          list,
+          testID: `${testID}-${band.param}`
+        }, band.param);
       }), ((_ref = (_controls_ranges1 = controls.ranges) === null || _controls_ranges1 === void 0 ? void 0 : _controls_ranges1.length) !== null && _ref !== void 0 ? _ref : 0) > 0 || narrowed ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         ...knobProps.gap,
         alignItems: "center",
         flexWrap: "wrap",
-        justifyContent: "space-between",
         children: [((_controls_ranges = controls.ranges) !== null && _controls_ranges !== void 0 ? _controls_ranges : []).map(function (range) {
           var _state_ranges_range_param, _list_highest_range_param;
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
             maxWidth: rangeMaxWidth,
             flexGrow: 1,
-            "$max-sm": {
-              maxWidth: "100%",
-              width: "100%"
-            },
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RangeFilter.RangeFilter, {
               label: range.label,
               value: (_state_ranges_range_param = state.ranges[range.param]) !== null && _state_ranges_range_param !== void 0 ? _state_ranges_range_param : 0,