@blocklet/list 0.14.7 → 0.14.9

package/lib/index.es.js

@@ -1,56 +1,79 @@
-import { jsx as t, jsxs as f, Fragment as M } from "react/jsx-runtime";
-import { styled as E, useTheme as fe } from "@arcblock/ux/lib/Theme";
-import { Box as v, Autocomplete as Qe, TextField as Xe, OutlinedInput as Ke, InputAdornment as ae, Button as J, useTheme as ge, useMediaQuery as O, Drawer as Ye, CircularProgress as Z, MenuList as Je, SvgIcon as Ze, Popper as et, Grow as tt, Paper as rt, ClickAwayListener as ot, MenuItem as nt, Stack as z, FormControlLabel as ye, Checkbox as xe, Typography as L, Link as lt, Grid as se, Chip as it, createTheme as at, ThemeProvider as st } from "@mui/material";
-import ct from "lodash/merge";
-import { ErrorFallback as ee } from "@arcblock/ux/lib/ErrorBoundary";
-import { ErrorBoundary as dt } from "react-error-boundary";
-import ut from "@iconify-icons/tabler/compass";
-import { Icon as be } from "@iconify/react";
-import we from "@mui/icons-material/Close";
-import { createContext as ke, useState as F, useMemo as D, useContext as ve, useCallback as X, useEffect as N, useRef as K, forwardRef as pt, memo as ht } from "react";
-import { createAxios as Ce } from "@blocklet/js-sdk";
-import mt from "lodash/omitBy";
-import ft from "lodash/orderBy";
-import { useRequest as U, useDebounceFn as Se, useInfiniteScroll as gt, useReactive as yt } from "ahooks";
+import { jsx as t, jsxs as f, Fragment as N } from "react/jsx-runtime";
+import { styled as q, useTheme as de } from "@arcblock/ux/lib/Theme";
+import Ge from "@mui/material/styles/createTheme";
+import Ke from "@mui/material/styles/ThemeProvider";
+import Xe from "lodash/merge";
+import { ErrorFallback as ue } from "@arcblock/ux/lib/ErrorBoundary";
+import w from "@mui/material/Box";
+import T from "@mui/material/Stack";
+import { ErrorBoundary as Qe } from "react-error-boundary";
+import Ye from "@iconify-icons/tabler/compass";
+import { Icon as Be } from "@iconify/react";
+import he from "@mui/icons-material/Close";
+import x from "@mui/material/Typography";
+import { createContext as Re, useState as L, useMemo as $, useContext as Pe, useCallback as ae, useEffect as j, forwardRef as Ze, useRef as ce, memo as Je } from "react";
+import { createAxios as Te } from "@blocklet/js-sdk";
+import et from "lodash/orderBy";
+import { useRequest as Z, useDebounceFn as Ae, useInfiniteScroll as tt, useReactive as rt } from "ahooks";
+import re from "lodash/omitBy";
 import "color";
 import "lodash/cloneDeep";
-import { parseURL as xt, parseQuery as bt, parseFilename as wt, stringifyParsedURL as kt, withQuery as Pe, joinURL as ce } from "ufo";
-import de from "flat";
-import Be from "@arcblock/ux/lib/Avatar";
-import Y from "@mui/icons-material/Search";
-import vt from "@mui/material/CircularProgress";
-import { useHotkeys as Ct } from "react-hotkeys-hook";
-import w from "prop-types";
-import St from "@mui/icons-material/Check";
-import Pt from "@mui/icons-material/KeyboardArrowDown";
-import Bt from "lodash/isEmpty";
-import Te from "@mui/material/Box";
-import Tt from "@arcblock/ux/lib/Img";
-import Rt from "@iconify-icons/tabler/cloud-download";
-import It from "@mui/icons-material/ChevronLeft";
-import Lt from "@mui/icons-material/ChevronRight";
-import At from "react-image-gallery";
+import { parseURL as ot, parseQuery as nt, parseFilename as lt, stringifyParsedURL as it, withQuery as pe, joinURL as ye } from "ufo";
+import xe from "flat";
+import J from "@mui/material/Button";
+import st from "@mui/material/styles/useTheme";
+import W from "@mui/material/useMediaQuery";
+import at from "@mui/material/Drawer";
+import Fe from "@mui/material/Checkbox";
+import Le from "@mui/material/FormControlLabel";
+import ct from "@mui/icons-material/Check";
+import dt from "@mui/icons-material/KeyboardArrowDown";
+import ut from "@mui/material/ClickAwayListener";
+import ht from "@mui/material/Grow";
+import Oe from "@mui/material/MenuItem";
+import ze from "@mui/material/MenuList";
+import pt from "@mui/material/Paper";
+import mt from "@mui/material/Popper";
+import ft from "@mui/material/SvgIcon";
+import gt from "lodash/isEmpty";
+import ee from "@mui/material/CircularProgress";
+import _e from "@arcblock/ux/lib/Avatar";
+import yt from "@iconify-icons/tabler/cloud-download";
+import xt from "@mui/icons-material/ChevronLeft";
+import wt from "@mui/icons-material/ChevronRight";
+import bt from "react-image-gallery";
+import kt from "@arcblock/ux/lib/Img";
+import vt from "@mui/material/Skeleton";
 import "react-image-gallery/styles/css/image-gallery.css";
-import zt from "@arcblock/ux/lib/Empty";
-import _t from "react-infinite-scroll-hook";
-import Re from "@mui/material/Typography";
+import we from "@mui/material/Grid";
+import Ct from "react-infinite-scroll-hook";
+import St from "@mui/material/Chip";
+import Y from "@mui/icons-material/Search";
+import It from "@mui/icons-material/Verified";
+import Bt from "@mui/material/Autocomplete";
+import Rt from "@mui/material/Dialog";
+import Ee from "@mui/material/OutlinedInput";
+import Pt from "@mui/material/TextField";
+import { useHotkeys as Tt } from "react-hotkeys-hook";
+import be from "@mui/material/InputAdornment";
+import At from "@arcblock/ux/lib/Empty";
 import Ft from "json-stable-stringify";
-import Et from "@mui/icons-material/Menu";
-const Ie = ke({
+import Lt from "@mui/icons-material/Menu";
+const Me = Re({
   open: !1,
   toggleOpen: (e) => {
   }
 });
 function Ot({ children: e }) {
-  const [r, o] = F(!1), l = (a) => {
-    o(a ?? !a);
-  }, n = D(() => ({ open: r, toggleOpen: l }), [r]);
-  return /* @__PURE__ */ t(Ie.Provider, { value: n, children: e });
+  const [r, o] = L(!1), n = (s) => {
+    o(s ?? !s);
+  }, i = $(() => ({ open: r, toggleOpen: n }), [r]);
+  return /* @__PURE__ */ t(Me.Provider, { value: i, children: e });
 }
-function te() {
-  return ve(Ie);
+function me() {
+  return Pe(Me);
 }
-const I = {
+const P = {
   nameAsc: "title",
   nameDesc: "title",
   popularity: "stats.downloads",
@@ -64,13 +87,59 @@ const I = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, Dt = (e) => U(
+}, zt = (e) => Z(
   async () => {
-    const { data: r } = await e.get(I.categoriesPath);
+    const { data: r } = await e.get(P.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
-), Le = (e) => [
+);
+function _t(e, r) {
+  const o = { sortBy: "popularity", sortDirection: "desc", ...e }, {
+    onFilterChange: n,
+    onSearchSelect: i = (l) => {
+      r.onFilterChange({ ...o, keyword: l.title });
+    },
+    emptyCategory: s
+  } = r;
+  !o.category && !s && (o.category = "All");
+  const c = (l) => {
+    const p = { ...o, ...l };
+    n(re(p, (d) => d === "" || d === void 0));
+  };
+  return {
+    filters: e,
+    cleanFilter: (l) => {
+      const p = l ? re(o, (d, g) => l.includes(g)) : {};
+      n(re(p, (d) => d === "" || d === void 0));
+    },
+    handleSort: (l, p) => {
+      c({ sortBy: l, sortDirection: p || l === "nameAsc" ? "asc" : "desc" });
+    },
+    handleKeyword: (l) => {
+      c({ category: void 0, keyword: l || void 0 });
+    },
+    handlePrice: (l) => {
+      c({ price: l === e.price ? void 0 : l });
+    },
+    handleCategory: (l) => {
+      c({ category: l === e.category ? "" : l });
+    },
+    handleDeveloper: (l) => {
+      c({ owner: l || void 0 });
+    },
+    handlePage: (l) => {
+      c({ currentPage: l });
+    },
+    handleSwitchShowResources: (l) => {
+      c({ showResources: l });
+    },
+    handleSearchSelect: (l) => {
+      i(l);
+    }
+  };
+}
+const Et = (e, r, o) => e && r || !o, Ne = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -83,25 +152,25 @@ const I = {
   //   name: t('sort.rating'),
   //   value: 'rating',
   // },
-], Ae = (e, r, o) => {
-  var g, h;
-  const l = xt(e), n = bt(l.search);
-  if ((g = wt(e, { strict: !0 })) == null ? void 0 : g.endsWith(".gif"))
-    return n.imageFilter ? kt({ ...l, search: "" }) : e;
-  if (n.imageFilter)
+], De = (e, r, o) => {
+  var d, g;
+  const n = ot(e), i = nt(n.search);
+  if ((d = lt(e, { strict: !0 })) == null ? void 0 : d.endsWith(".gif"))
+    return i.imageFilter ? it({ ...n, search: "" }) : e;
+  if (i.imageFilter)
     return e;
-  const d = o || ((h = window.blocklet) == null ? void 0 : h.version), { w: u, h: i } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
-  return Pe(e, {
-    ...u || i ? { imageFilter: "resize", w: u, h: i } : {},
-    v: d
+  const c = o || ((g = window.blocklet) == null ? void 0 : g.version), { w: l, h: p } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
+  return pe(e, {
+    ...l || p ? { imageFilter: "resize", w: l, h: p } : {},
+    v: c
   });
 }, Mt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Nt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), $t = (e, r) => (
+], Nt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Dt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
-  e == null ? void 0 : e.replace(/{(\w*)}/g, (o, l) => r.hasOwnProperty(l) ? r[l] : "")
-), Wt = () => window.innerWidth <= 600, jt = {
+  e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
+), Wt = () => window.innerWidth <= 600, $t = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -134,7 +203,7 @@ const I = {
     helperText: "Please select a category"
   },
   blocklet: {
-    noResults: "No Blocklets",
+    noResults: "Not found Blocklet",
     free: "Free",
     search: 'Results for "{keyword}"',
     resultCount: "{count} Blocklets",
@@ -150,7 +219,7 @@ const I = {
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, qt = {
+}, jt = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -183,7 +252,7 @@ const I = {
     helperText: "请选择分类"
   },
   blocklet: {
-    noResults: "暂无应用",
+    noResults: "未搜索到 Blocklet",
     free: "免费",
     search: '搜索 "{keyword}" 的结果',
     resultCount: "{count} 个 Blocklet",
@@ -199,16 +268,16 @@ const I = {
   autocomplete: {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
-}, Q = {
-  en: de(jt),
-  zh: de(qt)
-}, ze = (e, r) => {
+}, oe = {
+  en: xe($t),
+  zh: xe(jt)
+}, We = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
 }, Ut = (e) => (r, o) => {
-  const l = Q[e] ? Q[e][r] : Q.en[r];
-  return $t(l, o) || r;
-}, _e = {
+  const n = oe[e] ? oe[e][r] : oe.en[r];
+  return Dt(n, o) || r;
+}, $e = {
   errors: {
     fetchCategoriesError: null
   },
@@ -221,7 +290,6 @@ const I = {
   storeVersion: "",
   minItemWidth: 350,
   serverVersion: "",
-  filters: {},
   layout: {},
   selectedCategory: void 0,
   categoryList: [],
@@ -234,320 +302,126 @@ const I = {
   showResourcesSwitch: !1,
   showCategory: !1,
   tagFilters: [],
+  developerName: "",
   onFilterChange: () => {
   },
-  handleSort: () => {
-  },
-  cleanFilter: () => {
-  },
-  handleKeyword: () => {
-  },
-  handlePrice: () => {
-  },
-  handleCategory: () => {
-  },
-  handleDeveloper: () => {
-  },
-  handlePage: () => {
-  },
-  developerName: "",
   updateDeveloperName: () => {
   },
-  handleSwitchShowResources: () => {
-  },
   getCategoryLocale: () => null,
-  handleSearchSelect: () => {
-  }
-}, Fe = ke(_e), { Provider: Vt, Consumer: Yr } = Fe;
-function Ht(e) {
-  const {
-    locale: r = "zh",
-    filters: o = {},
-    serverVersion: l = "",
-    onFilterChange: n = () => {
+  search: {
+    filters: {},
+    cleanFilter: () => {
     },
-    onSearchSelect: a = ({ detailUrl: p }) => {
-      window.location.href = p;
+    handleSort: () => {
     },
-    minItemWidth: d = 350,
-    queryFilter: u = !0,
-    layout: i = {},
-    wrapChildren: g = (p) => p,
-    extraFilter: h = (p) => p,
-    baseSearch: m = !1,
-    fetchCategoryDelay: C = 0,
-    showResourcesSwitch: R = !1,
-    showCategory: A = !0,
-    tagFilters: c = [],
-    children: k,
-    storeVersion: x,
-    endpoint: B,
-    blockletRender: s
-  } = e, y = ze(l, x), T = D(() => Ce({ baseURL: B, headers: y }), [B]), P = { sortBy: "popularity", sortDirection: "desc", ...o };
-  !P.category && !i.showExplore && (P.category = "All");
-  const [Ne, $e] = F(""), We = P.category, {
-    data: H = [],
-    error: je,
-    loading: qe,
-    run: le
-  } = Dt(T), G = D(() => {
-    const p = ft(H, [(_) => _.name], ["asc"]), b = p.findIndex((_) => _.name === "All" || _.locales.en === "All");
-    return b > -1 ? [{ ...p[b], _id: "All" }, ...p.slice(0, b), ...p.slice(b + 1)] : p;
-  }, [H]), ie = X(Ut(r), [r]), Ue = D(() => Nt(G, r), [G, r]), Ve = Mt(ie), He = {
-    errors: { fetchCategoriesError: je },
-    loadings: {
-      fetchCategoriesLoading: qe
+    handleKeyword: () => {
     },
-    extraFilter: h,
-    endpoint: B,
-    queryFilter: u,
-    layout: {
-      showExplore: i.showExplore ?? !1,
-      showCategory: i.showCategory ?? !0,
-      showTitle: i.showTitle ?? !0,
-      showSearch: i.showSearch ?? !0
+    handlePrice: () => {
     },
-    minItemWidth: d,
-    wrapChildren: g,
-    t: ie,
-    storeVersion: x,
-    serverVersion: l,
-    filters: P,
-    selectedCategory: We,
-    categoryList: G,
-    blockletRender: s,
-    locale: r,
-    categoryOptions: Ue,
-    priceOptions: Ve,
-    storeApi: T,
-    baseSearch: m,
-    showResourcesSwitch: R,
-    showCategory: A,
-    tagFilters: c,
-    onFilterChange: n,
-    cleanFilter: (p) => {
-      const b = p ? mt(P, (_, Ge) => p == null ? void 0 : p.includes(Ge)) : {};
-      n(b);
+    handleCategory: () => {
     },
-    handleSort: (p) => {
-      const b = { ...P, sortBy: p, sortDirection: p === "nameAsc" ? "asc" : "desc" };
-      n(b);
+    handleDeveloper: () => {
     },
-    handleKeyword: (p) => {
-      const b = { ...P, category: void 0, keyword: p || void 0 };
-      n(b);
+    handleSwitchShowResources: () => {
     },
-    handlePrice: (p) => {
-      const b = { ...P, price: p === P.price ? void 0 : p };
-      n(b);
+    handleSearchSelect: () => {
     },
-    handleCategory: (p) => {
-      const b = p === "all" || p === P.category ? "" : p, _ = { ...P, category: b };
-      n(_);
+    handlePage: () => {
+    }
+  }
+}, je = Re($e), { Provider: Vt, Consumer: Co } = je;
+function Ht(e) {
+  const {
+    locale: r = "zh",
+    filters: o = {},
+    serverVersion: n = "",
+    onFilterChange: i = () => {
     },
-    handleDeveloper: (p) => {
-      const b = { ...P, owner: p || void 0 };
-      n(b);
+    minItemWidth: s = 350,
+    queryFilter: c = !0,
+    layout: l = {},
+    wrapChildren: p = (R) => R,
+    extraFilter: d = (R) => R,
+    baseSearch: g = !1,
+    fetchCategoryDelay: h = 0,
+    showResourcesSwitch: m = !1,
+    showCategory: k = !0,
+    tagFilters: C = [],
+    children: S,
+    storeVersion: B,
+    onSearchSelect: u = () => {
     },
-    handlePage: (p) => {
-      const b = { ...P, currentPage: p };
-      n(b);
+    endpoint: v,
+    blockletRender: y
+  } = e, A = We(n, B), F = $(() => Te({ baseURL: v, headers: A }), [v]), O = _t(o, { onFilterChange: i, emptyCategory: !l.showExplore, onSearchSelect: u }), [_, U] = L(""), {
+    data: V = [],
+    error: te,
+    loading: G,
+    run: K
+  } = zt(F), D = $(() => {
+    const R = et(V, [(M) => M.name], ["asc"]), z = R.findIndex((M) => M.name === "All" || M.locales.en === "All");
+    return z > -1 ? [{ ...R[z], _id: "All" }, ...R.slice(0, z), ...R.slice(z + 1)] : R;
+  }, [V]), H = ae(Ut(r), [r]), a = $(() => Nt(D, r), [D, r]), b = Mt(H), E = {
+    search: O,
+    errors: { fetchCategoriesError: te },
+    loadings: {
+      fetchCategoriesLoading: G
     },
-    handleSwitchShowResources: () => {
-      const p = { ...P };
-      n(p);
+    extraFilter: d,
+    endpoint: v,
+    queryFilter: c,
+    layout: {
+      showExplore: l.showExplore ?? !1,
+      showCategory: l.showCategory ?? !0,
+      showTitle: l.showTitle ?? !0,
+      showSearch: l.showSearch ?? !0
     },
-    getCategoryLocale: (p) => {
-      if (!p)
+    minItemWidth: s,
+    wrapChildren: p,
+    t: H,
+    storeVersion: B,
+    serverVersion: n,
+    selectedCategory: O.filters.category || (l.showExplore ? "" : "All"),
+    categoryList: D,
+    blockletRender: y,
+    locale: r,
+    categoryOptions: a,
+    priceOptions: b,
+    storeApi: F,
+    baseSearch: g,
+    showResourcesSwitch: m,
+    showCategory: k,
+    tagFilters: C,
+    onFilterChange: i,
+    getCategoryLocale: (R) => {
+      if (!R)
         return null;
-      const b = H.find((_) => _._id === p);
-      return b ? b.locales[r] || b.locales.en : null;
+      const z = V.find((M) => M._id === R || M.locales.en === "All");
+      return z ? z.locales[r] || z.locales.en : null;
     },
     get developerName() {
-      return Ne;
+      return _;
     },
-    updateDeveloperName: $e,
-    handleSearchSelect: a
+    updateDeveloperName: U
   };
-  return N(() => {
-    setTimeout(le, C || 0);
-  }, [B, le, C]), /* @__PURE__ */ t(Vt, { value: He, children: k });
+  return j(() => {
+    setTimeout(K, h || 0);
+  }, [v, K, h]), /* @__PURE__ */ t(Vt, { value: E, children: S });
 }
-function S() {
-  const e = ve(Fe);
-  return e || _e;
-}
-const ue = "__FREE_TEXT__";
-function Gt() {
-  const e = K(null), r = K(!1), [o, l] = F(!1), [n, a] = F(""), { storeApi: d, filters: u, endpoint: i, handleKeyword: g, t: h, handleSearchSelect: m } = S(), C = async (s) => {
-    const { data: y } = await d.get(I.blockletsPath, { params: s });
-    return y.dataList || [];
-  }, { loading: R, data: A, run: c } = U(
-    (s) => s ? C({
-      sortBy: I.nameDesc,
-      page: 1,
-      pageSize: 10,
-      keyword: s
-    }) : Promise.resolve([]),
-    {
-      manual: !0
-    }
-  );
-  N(() => {
-    c(u.keyword), a(u.keyword || "");
-  }, [u.keyword, c]), Ct(
-    "ctrl + k, command + k",
-    (s) => {
-      var y, T;
-      return s.stopPropagation(), s.preventDefault(), (T = (y = e.current) == null ? void 0 : y.querySelector("input")) == null || T.focus(), !1;
-    },
-    { enableOnTags: ["INPUT"] }
-  );
-  const k = Se((s) => c(s), { wait: 300 }), x = { name: ue, title: n, did: "" };
-  return /* @__PURE__ */ t(v, { overflow: "hidden", children: /* @__PURE__ */ t(
-    Qe,
-    {
-      ref: e,
-      open: !!n && o,
-      size: "small",
-      onOpen: () => {
-        l(!0);
-      },
-      onClose: (s, y) => {
-        l(!1), y === "selectOption" && !r.current && g(n);
-      },
-      options: n ? [x, ...A || []] : [],
-      renderOption: (s, y) => /* @__PURE__ */ f(v, { component: "li", ...s, gap: 1, children: [
-        B(y),
-        y.title
-      ] }),
-      value: x,
-      onChange: (s, y) => {
-        y != null && y.did && (r.current = !0, m({
-          blocklet: y,
-          detailUrl: ce(i, "blocklets", y.did),
-          storeUrl: i
-        }));
-      },
-      inputValue: n,
-      onInputChange: (s, y, T) => {
-        a(y), r.current = !1, k.run(y), T === "clear" && g("");
-      },
-      isOptionEqualToValue: (s, y) => s.name === y.name,
-      getOptionLabel: (s) => s.title,
-      getOptionKey: (s) => s.name,
-      noOptionsText: h("blocklet.noResults"),
-      loading: R,
-      autoHighlight: !0,
-      forcePopupIcon: !1,
-      slotProps: { paper: { sx: { mt: 0.5, minWidth: "100%", width: "fit-content" } } },
-      sx: {
-        bgcolor: "#F9FAFB",
-        borderRadius: "8px",
-        overflow: "hidden",
-        ".MuiAutocomplete-clearIndicator": { visibility: n ? "visible" : "hidden" },
-        ".MuiOutlinedInput-notchedOutline": {
-          borderRadius: "8px",
-          borderColor: "transparent"
-        },
-        "&&:hover .MuiOutlinedInput-notchedOutline, &&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          borderColor: "divider"
-        }
-      },
-      renderInput: (s) => /* @__PURE__ */ t(
-        Xe,
-        {
-          ...s,
-          InputProps: {
-            ...s.InputProps,
-            autoFocus: !0,
-            placeholder: h("common.searchStore"),
-            className: "bl-autocomplete-input",
-            value: n,
-            startAdornment: /* @__PURE__ */ t(v, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: R ? /* @__PURE__ */ t(vt, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(Y, { sx: { fontSize: 16 } }) })
-          }
-        }
-      ),
-      filterOptions: (s) => s
-    }
-  ) });
-  function B(s) {
-    if (s.name === ue)
-      return /* @__PURE__ */ t(v, { width: 20, display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ t(Y, { sx: { fontSize: 16 } }) });
-    let y = "";
-    return s.logo && (y = ce(i, "assets", s.did, Ae(s.logo, 20, s.version))), /* @__PURE__ */ t(Be, { src: y, size: 20 });
-  }
-}
-function re({ placeholder: e, ...r }) {
-  const { filters: o, handleKeyword: l } = S(), [n, a] = F(o.keyword || ""), d = Se(l, { wait: 300 }), u = (g) => {
-    const { value: h } = g.target;
-    a(h), d.run(h);
-  }, i = () => {
-    a(""), l();
-  };
-  return N(() => {
-    a(o.keyword || "");
-  }, [o.keyword]), /* @__PURE__ */ t(
-    Qt,
-    {
-      inputProps: {
-        "data-cy": "search-blocklet"
-      },
-      startAdornment: /* @__PURE__ */ t(ae, { position: "start", children: /* @__PURE__ */ t(Xt, {}) }),
-      onChange: u,
-      placeholder: e,
-      value: n,
-      title: e,
-      "data-cy": "search",
-      endAdornment: n && /* @__PURE__ */ t(ae, { position: "end", children: /* @__PURE__ */ t(Kt, { "data-cy": "search-delete", onClick: i }) }),
-      ...r
-    }
-  );
+function I() {
+  const e = Pe(je);
+  return e || $e;
 }
-re.propTypes = {
-  placeholder: w.string
-};
-re.defaultProps = {
-  placeholder: "Type to search..."
-};
-const Qt = E(Ke)`
-  background-color: ${(e) => e.theme.palette.grey[50]};
-  font-size: 14px;
-  border-radius: 6px;
-  width: 100%;
-  .MuiInputBase-input {
-    padding: 8px 0 8px 10px;
-  }
-  .MuiOutlinedInput-notchedOutline {
-    border: none;
-  }
-  .Mui-focused {
-    background-color: #f6f6f6;
-    .MuiInputBase-input::placeholder {
-      color: transparent;
-    }
-  }
-`, Xt = E(Y)`
-  color: ${(e) => e.theme.palette.grey[500]};
-  font-size: 28px;
-  @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
-    font-size: 24px;
-  }
-`, Kt = E(we)`
-  color: ${(e) => e.theme.palette.grey[500]};
-  font-size: 16px;
-  cursor: pointer;
-`;
-function Ee({
+function Ue({
   children: e,
   onClick: r,
   size: o = 32,
-  ...l
+  ...n
 }) {
   return /* @__PURE__ */ t(
     J,
     {
-      ...l,
+      ...n,
       onClick: r,
       variant: "outlined",
       sx: [
@@ -562,130 +436,103 @@ function Ee({
           borderRadius: 2,
           color: "text.secondary"
         },
-        ...Array.isArray(l.sx) ? l.sx : [l.sx]
+        ...Array.isArray(n.sx) ? n.sx : [n.sx]
       ],
       children: e
     }
   );
 }
-function W(e, r) {
+function X(e, r) {
   return e === void 0 ? r : e;
 }
-function oe({
+function fe({
   xs: e,
   sm: r,
   md: o,
-  lg: l,
-  xl: n,
-  exact: a
+  lg: n,
+  xl: i,
+  exact: s
 }) {
-  const d = ge(), u = O(d.breakpoints.down("sm")), i = O(d.breakpoints.between("sm", "md")), g = O(d.breakpoints.between("md", "lg")), h = O(d.breakpoints.between("lg", "xl"));
-  if (a)
-    return u ? e || null : i ? r || null : g ? o || null : h ? l || null : n || null;
-  let m = e;
-  return u || (m = W(r, m), i) || (m = W(o, m), g) || (m = W(l, m), h) ? m : W(n, m);
+  const c = st(), l = W(c.breakpoints.down("sm")), p = W(c.breakpoints.between("sm", "md")), d = W(c.breakpoints.between("md", "lg")), g = W(c.breakpoints.between("lg", "xl"));
+  if (s)
+    return l ? e || null : p ? r || null : d ? o || null : g ? n || null : i || null;
+  let h = e;
+  return l || (h = X(r, h), p) || (h = X(o, h), d) || (h = X(n, h), g) ? h : X(i, h);
 }
-function Yt({ children: e }) {
-  const { open: r, toggleOpen: o } = te();
+function qt({ children: e }) {
+  const { open: r, toggleOpen: o } = me();
   return /* @__PURE__ */ t(
-    oe,
+    fe,
     {
-      xs: /* @__PURE__ */ t(Ye, { open: r, onClose: () => o(!1), children: e }),
-      md: /* @__PURE__ */ t(v, { children: e })
+      xs: /* @__PURE__ */ t(at, { open: r, onClose: () => o(!1), children: e }),
+      md: /* @__PURE__ */ t(w, { children: e })
     }
   );
 }
-const Jt = E(J)`
-  border-radius: 4px;
-`, ne = pt(({ children: e, rounded: r, loading: o, disabled: l, ...n }, a) => /* @__PURE__ */ t(
-  Jt,
+const Gt = Ze(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
+  J,
   {
-    ref: a,
+    ref: n,
     disableElevation: !0,
-    disabled: l || o,
-    ...n,
-    startIcon: o && /* @__PURE__ */ t(Z, { size: "1em" }),
-    children: e
+    disabled: r || e,
+    ...o,
+    sx: [{ borderRadius: "4px" }, ...Array.isArray(o.sx) ? o.sx : [o.sx]],
+    startIcon: e && /* @__PURE__ */ t(ee, { size: "1em" })
   }
 ));
-ne.propTypes = {
-  children: w.any,
-  rounded: w.bool,
-  loading: w.bool,
-  disabled: w.bool
-};
-ne.defaultProps = {
-  children: null,
-  rounded: !1,
-  loading: !1,
-  disabled: !1
-};
-function V({ title: e, value: r, icon: o, prepend: l, options: n, onChange: a, itemRender: d, ...u }) {
-  const i = K(null), g = fe(), [h, m] = F(!1), [C, R] = F(r !== null ? r : ""), A = O(g.breakpoints.down("sm"));
-  N(() => {
-    R(r !== null ? r : "");
-  }, [r]);
-  const c = X(() => {
-    m(!1);
-  }, []), k = X(() => {
-    m(!0);
+function Ve({ value: e, options: r, onChange: o, placeholder: n, ...i }) {
+  var B;
+  const s = ce(null), c = de(), [l, p] = L(!1), [d, g] = L(e !== null ? e : ""), h = W(c.breakpoints.down("sm"));
+  j(() => {
+    g(e !== null ? e : "");
+  }, [e]);
+  const m = ae(() => {
+    p(!1);
+  }, []), k = ae(() => {
+    p(!0);
   }, []);
-  function x(s) {
-    R(s.value), a(s.value), A && c();
+  function C(u) {
+    g(u.value), o(u.value), h && m();
   }
-  function B(s) {
-    return s === C;
+  function S(u) {
+    return u === d;
   }
-  return /* @__PURE__ */ f(M, { children: [
+  return /* @__PURE__ */ f(N, { children: [
     /* @__PURE__ */ f(
-      Zt,
+      Kt,
       {
-        ref: i,
+        ref: s,
         onClick: k,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", Bt(C) ? "" : "my-select__selector--active"].join(" "),
-        sx: { minWidth: "auto" },
-        ...u,
+        className: ["my-select__selector", gt(d) ? "" : "my-select__selector--active"].join(" "),
+        sx: { minWidth: "auto", color: "text.primary" },
+        ...i,
         children: [
-          /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
-          e,
-          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: Pt, fontSize: "small" })
+          ((B = r.find((u) => u.value === d)) == null ? void 0 : B.name) || n,
+          /* @__PURE__ */ t(ft, { className: "my-select__arrowdown", component: dt, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(et, { open: h, anchorEl: i.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: s, placement: y }) => /* @__PURE__ */ t(tt, { ...s, sx: { transformOrigin: y === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(ot, { onClickAway: c, children: /* @__PURE__ */ f(er, { autoFocusItem: h, onMouseEnter: k, onMouseLeave: c, children: [
-      l,
-      n.map((T) => d ? d(T) : /* @__PURE__ */ f(nt, { onClick: () => x(T), children: [
-        /* @__PURE__ */ t(
-          St,
-          {
-            sx: { mr: 1, fontSize: 16, visibility: B(T.value) ? "visible" : "hidden" }
-          }
-        ),
-        T.name
-      ] }, T.value))
-    ] }) }) }) }) })
+    /* @__PURE__ */ t(mt, { open: l, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: u, placement: v }) => /* @__PURE__ */ t(
+      ht,
+      {
+        ...u,
+        style: { transformOrigin: v === "bottom" ? "center top" : "center bottom" },
+        children: /* @__PURE__ */ t(pt, { children: /* @__PURE__ */ t(ut, { onClickAway: m, children: /* @__PURE__ */ t(Xt, { autoFocusItem: l, onMouseEnter: k, onMouseLeave: m, children: r.map((y) => /* @__PURE__ */ f(Oe, { onClick: () => C(y), children: [
+          /* @__PURE__ */ t(
+            ct,
+            {
+              sx: { mr: 1, fontSize: 16, visibility: S(y.value) ? "visible" : "hidden" }
+            }
+          ),
+          y.name
+        ] }, y.value)) }) }) })
+      }
+    ) })
   ] });
 }
-V.propTypes = {
-  options: w.array.isRequired,
-  value: w.oneOfType([w.string, w.number, w.array]),
-  onChange: w.func,
-  itemRender: w.func,
-  title: w.string.isRequired,
-  icon: w.any,
-  prepend: w.any
-};
-V.defaultProps = {
-  value: null,
-  icon: null,
-  prepend: null,
-  itemRender: null,
-  onChange: () => {
-  }
-};
-const Zt = E(ne)`
+const Kt = q(Gt)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -699,9 +546,6 @@ const Zt = E(ne)`
   &.my-select__selector--active {
     &,
     .my-select__arrowdown,
-    .my-select__icon svg {
-      color: ${(e) => e.theme.palette.primary.main};
-    }
   }
   .my-select__arrowdown {
     color: #999;
@@ -716,7 +560,7 @@ const Zt = E(ne)`
       margin-right: 3px;
     }
   }
-`, er = E(Je)`
+`, Xt = q(ze)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -733,11 +577,10 @@ const Zt = E(ne)`
     }
   }
 `;
-function Oe() {
-  var d;
-  const { filters: e, handleSort: r, handlePrice: o, t: l } = S(), n = Le(l), a = ((d = n.find((u) => u.value === e.sortBy)) == null ? void 0 : d.name) || l("sort.sort");
+function He() {
+  const { search: e, t: r } = I(), { filters: o, handleSort: n, handlePrice: i } = e, s = Ne(r);
   return /* @__PURE__ */ f(
-    z,
+    T,
     {
       direction: { xs: "row", md: "column" },
       alignItems: { xs: "center", md: "flex-start" },
@@ -746,46 +589,45 @@ function Oe() {
       justifyContent: "space-between",
       children: [
         /* @__PURE__ */ t(
-          ye,
+          Le,
           {
             control: /* @__PURE__ */ t(
-              xe,
+              Fe,
               {
-                checked: e.price === "free",
+                checked: o.price === "free",
                 size: "small",
                 sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                onChange: (u) => o(u.target.checked ? "free" : "")
+                onChange: (c) => i(c.target.checked ? "free" : "")
               }
             ),
-            label: l("blocklet.free")
+            label: r("blocklet.free")
           }
         ),
         /* @__PURE__ */ t(
-          V,
+          Ve,
           {
-            value: e.sortBy,
-            options: n,
-            title: a,
-            onChange: r,
-            icon: null,
-            prepend: null,
-            itemRender: null
+            value: o.sortBy || s[0].value,
+            options: s,
+            onChange: (c) => n(c),
+            placeholder: r("sort.sort")
           }
         )
       ]
     }
   );
 }
-function tr() {
-  const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: l, filters: n, cleanFilter: a, loadings: d, layout: u, baseSearch: i } = S(), { toggleOpen: g } = te();
-  return N(() => {
+function Qt() {
+  const { selectedCategory: e, search: r, t: o, categoryOptions: n, loadings: i, layout: s, baseSearch: c } = I(), { filters: l, handleCategory: p, cleanFilter: d } = r, { toggleOpen: g } = me();
+  j(() => {
     g(!1);
-  }, [n.category, n.owner, n.keyword, n.sortBy, n.sortDirection, n.resourceType]), u.showCategory ? /* @__PURE__ */ f(Yt, { children: [
+  }, [Object.values(l).join("")]);
+  const h = Et(c, s.showSearch, l.keyword);
+  return s.showCategory ? /* @__PURE__ */ f(qt, { children: [
     /* @__PURE__ */ t(
-      oe,
+      fe,
       {
         xs: /* @__PURE__ */ f(
-          z,
+          T,
           {
             direction: "row",
             justifyContent: "space-between",
@@ -796,113 +638,117 @@ function tr() {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(Ee, { onClick: () => g(!1), children: /* @__PURE__ */ t(we, {}) }),
-              /* @__PURE__ */ t(L, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: o("common.category") })
+              /* @__PURE__ */ t(Ue, { onClick: () => g(!1), children: /* @__PURE__ */ t(he, {}) }),
+              /* @__PURE__ */ t(x, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: o("common.category") })
             ]
           }
         ),
         md: null
       }
     ),
-    /* @__PURE__ */ f(
-      z,
+    /* @__PURE__ */ t(
+      T,
       {
-        visibility: d.fetchCategoriesLoading ? "hidden" : "visible",
+        visibility: i.fetchCategoriesLoading ? "hidden" : "visible",
         width: { xs: 268, md: 200 },
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: [
-          u.showSearch ? /* @__PURE__ */ t(v, { className: "filter-bar", mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: i ? /* @__PURE__ */ t(re, { className: "bl-search-container", placeholder: o("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(Gt, {}) }) : null,
-          n.keyword ? /* @__PURE__ */ t(Oe, {}) : /* @__PURE__ */ f(M, { children: [
-            u.showExplore && /* @__PURE__ */ f(v, { display: "flex", alignItems: "center", gap: 1, mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
-              /* @__PURE__ */ t(be, { icon: ut }),
-              /* @__PURE__ */ t(
-                L,
-                {
-                  variant: "body1",
-                  color: e ? "text.lighter" : "text.primary",
-                  fontWeight: e ? void 0 : "fontWeightMedium",
-                  sx: { cursor: "pointer" },
-                  onClick: () => {
-                    g(!1), a();
-                  },
-                  children: o("explore.title")
-                }
-              )
-            ] }),
-            !!l.length && /* @__PURE__ */ t(z, { gap: 2, children: l.map((h) => /* @__PURE__ */ t(
-              L,
+        children: h ? /* @__PURE__ */ f(N, { children: [
+          s.showExplore && /* @__PURE__ */ f(w, { display: "flex", alignItems: "center", gap: 1, mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
+            /* @__PURE__ */ t(Be, { icon: Ye }),
+            /* @__PURE__ */ t(
+              x,
               {
                 variant: "body1",
-                title: h.name,
+                color: e ? "text.lighter" : "text.primary",
+                fontWeight: e ? void 0 : "fontWeightMedium",
                 sx: { cursor: "pointer" },
-                "data-cy": "filter",
-                color: e === h.value ? "text.primary" : "text.lighter",
-                textTransform: "capitalize",
                 onClick: () => {
-                  e === h.value ? a() : r(h.value), g(!1);
+                  g(!1), d();
                 },
-                children: h.name
+                children: o("explore.title")
+              }
+            )
+          ] }),
+          !!n.length && /* @__PURE__ */ t(T, { gap: 2, children: n.map((m) => /* @__PURE__ */ t(
+            x,
+            {
+              variant: "body1",
+              title: m.name,
+              sx: { cursor: "pointer" },
+              "data-cy": "filter",
+              color: e === m.value ? "text.primary" : "text.lighter",
+              textTransform: "capitalize",
+              onClick: () => {
+                e === m.value ? d() : p(m.value), g(!1);
               },
-              h.value
-            )) })
-          ] })
-        ]
+              children: m.name
+            },
+            m.value
+          )) })
+        ] }) : /* @__PURE__ */ t(He, {})
       }
     )
   ] }) : null;
 }
-function De() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = S(), l = ze(r, o), n = D(() => Ce({
+function ge() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = I(), n = We(r, o), i = $(() => Te({
     baseURL: e,
-    headers: l
+    headers: n
   }), [e]);
   return {
-    get: async (a) => {
-      const { data: d } = await n.get(a);
-      return d;
+    get: async (s) => {
+      const { data: c } = await i.get(s);
+      return c;
     },
-    post: async (a, d) => {
-      const { data: u } = await n.post(a, d);
-      return u;
+    post: async (s, c) => {
+      const { data: l } = await i.post(s, c);
+      return l;
     }
   };
 }
-const Me = ht(function(r) {
-  return /* @__PURE__ */ t(Te, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(Z, {}) });
+const qe = Je(function(r) {
+  return /* @__PURE__ */ t(w, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ee, {}) });
 });
-function pe({
+function Yt({ showSkeleton: e, ...r }) {
+  return e ? /* @__PURE__ */ t(vt, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(kt, { ...r });
+}
+function ke({
   icon: e,
   children: r,
   maxWidth: o = 100,
-  title: l
+  title: n
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ f(T, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
-      L,
+      x,
       {
         flex: 1,
         variant: "body2",
         sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-        title: l || (typeof r == "string" ? r : void 0),
+        title: n || (typeof r == "string" ? r : void 0),
         children: r
       }
     )
   ] });
 }
-const he = 292;
-function rr() {
-  var R, A;
-  const { t: e } = S(), { get: r } = De(), o = ge(), l = O(o.breakpoints.down("md")), n = ((A = (R = window.blocklet) == null ? void 0 : R.preferences) == null ? void 0 : A.homeBanner) || [], { data: a = [], error: d } = U(async () => {
-    const c = await r(
-      Pe(I.blockletsPath, { didList: n.map((k) => k.did).join(",") })
+const ve = 292;
+function Zt() {
+  var S, B;
+  const { t: e, search: r } = I(), { get: o } = ge(), n = de(), i = W(n.breakpoints.down("md")), s = ((B = (S = window.blocklet) == null ? void 0 : S.preferences) == null ? void 0 : B.homeBanner) || [], {
+    data: c = [],
+    error: l,
+    loading: p
+  } = Z(async () => {
+    const u = await o(
+      pe(P.blockletsPath, { didList: s.map((v) => v.did).join(",") })
     );
-    return c != null && c.dataList ? n.map((k) => c.dataList.find((x) => x.did === k.did)) : [];
+    return u != null && u.dataList ? s.map((v) => u.dataList.find((y) => y.did === v.did)) : [];
   });
-  d && console.error("Get Banner Blocklets error:", d);
-  const u = {
+  l && console.error("Get Banner Blocklets error:", l);
+  const d = {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -910,40 +756,40 @@ function rr() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  return !d && n.length > 0 ? /* @__PURE__ */ f(M, { children: [
-    /* @__PURE__ */ t(L, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
+  return !l && s.length > 0 ? /* @__PURE__ */ f(N, { children: [
+    /* @__PURE__ */ t(x, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
     /* @__PURE__ */ t(
-      v,
+      w,
       {
-        height: { xs: "auto", md: he },
+        height: { xs: "auto", md: ve },
         position: "relative",
         border: 1,
         borderColor: "divider",
         borderRadius: 3,
         overflow: "hidden",
         children: /* @__PURE__ */ t(
-          At,
+          bt,
           {
             showNav: !0,
             autoPlay: !0,
-            slideDuration: 1e3,
+            slideDuration: i ? 500 : 1e3,
             slideInterval: 5e3,
             showPlayButton: !1,
             showIndex: !1,
             showBullets: !1,
             showThumbnails: !1,
             showFullscreenButton: !1,
-            renderLeftNav: (c) => /* @__PURE__ */ t(v, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(It, { sx: { ...u, left: 5 } }) }),
-            renderRightNav: (c) => /* @__PURE__ */ t(v, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Lt, { sx: { ...u, right: 5 } }) }),
-            items: n.map((c, k) => ({
-              original: c.did,
+            renderLeftNav: (u) => /* @__PURE__ */ t(w, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(xt, { sx: { ...d, left: 5 } }) }),
+            renderRightNav: (u) => /* @__PURE__ */ t(w, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(wt, { sx: { ...d, right: 5 } }) }),
+            items: s.map((u, v) => ({
+              original: u.did,
               renderItem: () => {
-                var y;
-                const x = a[k] || {}, B = c.cover || nr(c.did, (y = x.screenshots) == null ? void 0 : y[0]), s = Ae(B, { h: 400, w: 700 });
+                var O;
+                const y = c[v] || {}, A = u.cover || er(u.did, (O = y.screenshots) == null ? void 0 : O[0]), F = De(A, { h: 400, w: 700 });
                 return /* @__PURE__ */ f(
-                  z,
+                  T,
                   {
-                    height: { xs: "auto", md: he },
+                    height: { xs: "auto", md: ve },
                     sx: {
                       "&::before": {
                         content: '""',
@@ -952,9 +798,10 @@ function rr() {
                         left: 0,
                         right: 0,
                         bottom: 0,
-                        backgroundImage: `url("${s}")`,
+                        cursor: "pointer",
+                        backgroundImage: `url("${F}")`,
                         backgroundSize: "cover",
-                        filter: "blur(8px)",
+                        filter: "blur(50px)",
                         opacity: 0.15,
                         zIndex: 0
                       }
@@ -964,16 +811,17 @@ function rr() {
                     justifyContent: "center",
                     alignItems: { xs: "flex-start", md: "center" },
                     p: { xs: 2, md: 5 },
+                    onClick: () => r.handleSearchSelect(y),
                     gap: { xs: 2, md: 5 },
                     children: [
-                      i(s),
-                      /* @__PURE__ */ f(z, { flex: 1, height: "100%", gap: 3, children: [
-                        /* @__PURE__ */ f(v, { flex: 1, children: [
-                          g(c.name || x.title || c.name),
-                          h(c.desc || x.description)
+                      g(F),
+                      /* @__PURE__ */ f(T, { flex: 1, height: "100%", gap: 3, children: [
+                        /* @__PURE__ */ f(w, { flex: 1, children: [
+                          h(u.name || y.title || u.name),
+                          m(u.desc || y.description)
                         ] }),
-                        x.did && m(x, c.baseNum),
-                        C(c.link, c.did)
+                        y.did && k(y, u.baseNum),
+                        C(y)
                       ] })
                     ]
                   }
@@ -985,15 +833,25 @@ function rr() {
       }
     )
   ] }) : null;
-  function i(c) {
-    return /* @__PURE__ */ t(v, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(Tt, { src: c, alt: "", width: l ? void 0 : 338, height: 210, style: { objectFit: "cover" } }) });
+  function g(u) {
+    return /* @__PURE__ */ t(w, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(
+      Yt,
+      {
+        showSkeleton: p,
+        src: u,
+        alt: "",
+        width: i ? void 0 : 338,
+        height: 210,
+        style: { objectFit: "cover" }
+      }
+    ) });
   }
-  function g(c) {
-    return /* @__PURE__ */ t(L, { variant: "h2", width: "100%", children: c });
+  function h(u) {
+    return /* @__PURE__ */ t(x, { variant: "h2", width: "100%", children: u });
   }
-  function h(c) {
+  function m(u) {
     return /* @__PURE__ */ t(
-      L,
+      x,
       {
         variant: "body2",
         color: "text.secondary",
@@ -1011,109 +869,394 @@ function rr() {
           overflow: "hidden",
           WebkitBoxOrient: "vertical"
         },
-        children: c
+        children: u
       }
     );
   }
-  function m(c, k = 0) {
-    const { did: x, owner: B, stats: s } = c;
-    return /* @__PURE__ */ f(v, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
-      /* @__PURE__ */ t(pe, { icon: /* @__PURE__ */ t(Be, { src: B.avatar, did: x, size: 20, variant: "circle" }), children: B.fullName }),
-      /* @__PURE__ */ t(pe, { icon: /* @__PURE__ */ t(be, { icon: Rt }), title: `${s.downloads + k}`, children: or(s.downloads + k) })
+  function k(u, v = 0) {
+    const { did: y, owner: A, stats: F } = u;
+    return /* @__PURE__ */ f(w, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+      /* @__PURE__ */ t(ke, { icon: /* @__PURE__ */ t(_e, { src: A.avatar, did: y, size: 20, variant: "circle" }), children: A.fullName }),
+      /* @__PURE__ */ t(ke, { icon: /* @__PURE__ */ t(Be, { icon: yt }), title: `${F.downloads + v}`, children: Jt(F.downloads + v) })
     ] });
   }
-  function C(c, k) {
-    return /* @__PURE__ */ t(lt, { href: c || `/blocklets/${k}`, align: "left", width: 100, children: /* @__PURE__ */ t(
+  function C(u) {
+    return /* @__PURE__ */ t(
       J,
       {
         variant: "outlined",
         size: "small",
-        fullWidth: !0,
+        onClick: () => r.handleSearchSelect(u),
         sx: {
+          width: "fit-content",
+          textTransform: "none",
           bgcolor: "white",
+          borderRadius: "8px",
           borderColor: "divider",
           "&:hover": { borderColor: "divider" }
         },
         children: e("explore.viewDetail")
       }
-    ) });
+    );
   }
 }
-const or = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, nr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function lr({ title: e, blocklets: r }) {
-  const { blockletRender: o, serverVersion: l } = S();
-  return /* @__PURE__ */ f(v, { mt: 3, children: [
-    /* @__PURE__ */ t(L, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
-    /* @__PURE__ */ t(se, { container: !0, spacing: 2, children: r.map((n) => /* @__PURE__ */ t(se, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": n.did, children: /* @__PURE__ */ t(v, { padding: "1px", children: o({ blocklet: n, blocklets: r, serverVersion: l }) }) }, n.did)) })
+const Jt = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, er = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function tr({ title: e, blocklets: r }) {
+  const { blockletRender: o, serverVersion: n } = I();
+  return /* @__PURE__ */ f(w, { mt: 3, children: [
+    /* @__PURE__ */ t(x, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
+    /* @__PURE__ */ t(we, { container: !0, spacing: 2, children: r.map((i) => /* @__PURE__ */ t(we, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": i.did, children: /* @__PURE__ */ t(w, { padding: "1px", children: o({ blocklet: i, blocklets: r, serverVersion: n }) }) }, i.did)) })
   ] });
 }
-function ir() {
-  const { get: e } = De(), { t: r } = S(), {
+function rr() {
+  const { get: e } = ge(), { t: r } = I(), {
     data: o = [],
-    error: l,
-    loading: n
-  } = U(async () => {
-    const a = await e(I.explorePath);
-    return Array.isArray(a) ? a : [];
+    error: n,
+    loading: i
+  } = Z(async () => {
+    const s = await e(P.explorePath);
+    return Array.isArray(s) ? s : [];
   });
-  return l ? /* @__PURE__ */ t(ee, { error: new Error(`Failed to fetch blocklets from ${I.explorePath}`) }) : n ? /* @__PURE__ */ t(Me, { mt: 15 }) : /* @__PURE__ */ f(M, { children: [
-    /* @__PURE__ */ t(rr, {}),
+  return n ? /* @__PURE__ */ t(ue, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : i ? /* @__PURE__ */ t(qe, { mt: 15 }) : /* @__PURE__ */ f(N, { children: [
+    /* @__PURE__ */ t(Zt, {}),
     o.map(
-      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(lr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
+      (s) => s.blocklets.length > 0 ? /* @__PURE__ */ t(tr, { title: r(`explore.${s.type}`), blocklets: s.blocklets }, s.type) : null
+    )
+  ] });
+}
+const ne = "__FREE_TEXT__", Ce = "__NO_RESULT__", le = 40;
+function or({
+  endpoint: e,
+  t: r,
+  locale: o,
+  filters: n,
+  handleKeyword: i,
+  handleSearchSelect: s,
+  ...c
+}) {
+  const l = ce(null), p = ce(!1), [d, g] = L(!1), [h, m] = L(""), [k, C] = L(!1), S = ge(), [B, u] = L(!1), v = async (a) => {
+    u(!0);
+    const b = await S.get(ye(e, pe(P.blockletsPath, a)));
+    return u(!1), b.dataList || [];
+  }, { data: y, run: A } = Z(
+    (a) => a ? v({
+      sortBy: P.nameDesc,
+      page: 1,
+      pageSize: 10,
+      keyword: a
+    }) : Promise.resolve([]),
+    {
+      manual: !0
+    }
+  );
+  j(() => {
+    u(!0), A(n.keyword), m(n.keyword || "");
+  }, [n.keyword, A]), Tt(
+    "ctrl + k, command + k",
+    (a) => {
+      var b, E;
+      return a.stopPropagation(), a.preventDefault(), (E = (b = l.current) == null ? void 0 : b.querySelector("input")) == null || E.focus(), !1;
+    },
+    { enableOnTags: ["INPUT"] }
+  );
+  const F = Ae((a) => A(a), { wait: 300 }), O = { name: ne, title: h, did: "" };
+  let _ = [];
+  return h && (B ? _ = [O] : y != null && y.length ? _ = [O, ...y] : _ = [{ name: Ce, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ f(N, { children: [
+    /* @__PURE__ */ f(Rt, { fullScreen: !0, open: k, sx: { display: { md: "none" } }, children: [
+      /* @__PURE__ */ f(w, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ t(
+          Ee,
+          {
+            fullWidth: !0,
+            sx: {
+              bgcolor: "#F9FAFB",
+              px: 1,
+              py: 0.5,
+              ".MuiInputBase-input": { p: 1 },
+              ".MuiOutlinedInput-notchedOutline": {
+                borderRadius: "8px",
+                borderColor: "transparent"
+              },
+              "&&:hover .MuiOutlinedInput-notchedOutline, &&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                borderColor: "divider",
+                borderWidth: "1px"
+              }
+            },
+            autoFocus: !0,
+            placeholder: r("common.searchStore"),
+            className: "bl-autocomplete-input",
+            value: h,
+            onChange: (a) => U(a.target.value),
+            startAdornment: D(k),
+            endAdornment: H()
+          }
+        ),
+        /* @__PURE__ */ t(
+          J,
+          {
+            variant: "outlined",
+            onClick: () => {
+              C(!1), m(n.keyword || "");
+            },
+            children: r("common.cancel")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(ze, { sx: { p: 0.5 }, children: _.map((a) => G(a)) })
+    ] }),
+    /* @__PURE__ */ t(
+      Y,
+      {
+        sx: { display: { sx: "block", md: "none" }, fontSize: 28, color: "text.lighter" },
+        onClick: () => C(!0)
+      }
+    ),
+    /* @__PURE__ */ t(
+      Bt,
+      {
+        ref: l,
+        open: !!h && d,
+        size: "small",
+        onOpen: () => g(!0),
+        onClose: (a, b) => {
+          g(!1), b === "selectOption" && !p.current && i(h);
+        },
+        disableClearable: !0,
+        inputValue: h,
+        onInputChange: (a, b) => U(b),
+        isOptionEqualToValue: (a, b) => a.name === b.name,
+        getOptionLabel: (a) => a.title,
+        getOptionKey: (a) => a.name,
+        noOptionsText: r("blocklet.noResults"),
+        autoHighlight: !0,
+        forcePopupIcon: !1,
+        slotProps: {
+          paper: {
+            sx: {
+              mt: 0.5,
+              minWidth: "100%",
+              width: "fit-content",
+              "& > ul": { p: 0.5 }
+            }
+          }
+        },
+        renderInput: (a) => /* @__PURE__ */ t(
+          Pt,
+          {
+            ...a,
+            InputProps: {
+              ...a.InputProps,
+              autoFocus: !0,
+              placeholder: r("common.searchStore"),
+              className: "bl-autocomplete-input",
+              value: h,
+              startAdornment: D(d),
+              endAdornment: H()
+            }
+          }
+        ),
+        filterOptions: (a) => a,
+        ...c,
+        options: _,
+        renderOption: (a, b) => G(b),
+        value: O,
+        sx: [
+          {
+            bgcolor: "#F9FAFB",
+            borderRadius: "8px",
+            overflow: "hidden",
+            ".MuiOutlinedInput-notchedOutline": {
+              borderRadius: "8px",
+              borderColor: "transparent"
+            },
+            "&&:hover .MuiOutlinedInput-notchedOutline, &&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: "divider",
+              borderWidth: "1px"
+            }
+          },
+          ...Array.isArray(c.sx) ? c.sx : [c.sx]
+        ]
+      }
     )
   ] });
+  function U(a) {
+    u(!0), m(a), p.current = !1, F.run(a);
+  }
+  function V() {
+    C(!1), m(""), U(""), i("");
+  }
+  function te(a) {
+    a != null && a.did ? (C(!1), p.current = !0, m(""), s(a)) : a.name === ne && (C(!1), i(h));
+  }
+  function G(a) {
+    var b, E;
+    return /* @__PURE__ */ f(
+      Oe,
+      {
+        sx: { display: "flex", alignItems: "center", gap: 1, p: 1.5, borderRadius: "8px" },
+        onClick: () => te(a),
+        children: [
+          K(a),
+          /* @__PURE__ */ f(x, { variant: "body1", children: [
+            /* @__PURE__ */ f(x, { fontWeight: "fontWeightMedium", display: "flex", alignItems: "center", gap: 1, children: [
+              a.title,
+              " ",
+              /* @__PURE__ */ t(It, { sx: { color: "#D97706", fontSize: 16, display: "none" } })
+            ] }),
+            /* @__PURE__ */ t(x, { sx: { color: "text.lighter" }, fontSize: "13px", children: ((E = (b = a.category) == null ? void 0 : b.locales) == null ? void 0 : E[o || "en"]) || "" })
+          ] })
+        ]
+      },
+      a.did
+    );
+  }
+  function K(a) {
+    if ([ne, Ce].includes(a.name))
+      return /* @__PURE__ */ t(
+        w,
+        {
+          width: le,
+          p: "6px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          color: "text.lighter",
+          bgcolor: "#F1F3F5",
+          borderRadius: "8px",
+          children: /* @__PURE__ */ t(Y, { sx: { fontSize: 28 } })
+        }
+      );
+    let b = "";
+    return a.logo && (b = ye(e, "assets", a.did, De(a.logo, le, a.version))), /* @__PURE__ */ t(_e, { src: b, size: le, style: { borderRadius: "8px", overflow: "hidden" } });
+  }
+  function D(a = !0) {
+    return /* @__PURE__ */ t(w, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: a && h && B ? /* @__PURE__ */ t(ee, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(Y, { sx: { fontSize: 16, cursor: "default" } }) });
+  }
+  function H() {
+    return h ? /* @__PURE__ */ t(w, { sx: { display: "flex", alignItems: "center", color: "text.lighter" }, children: /* @__PURE__ */ t(he, { sx: { fontSize: 20, cursor: "pointer" }, onClick: () => V() }) }) : null;
+  }
+}
+function nr({ placeholder: e = "Type to search...", ...r }) {
+  const { search: o } = I(), { filters: n, handleKeyword: i } = o, [s, c] = L(n.keyword || ""), l = Ae(i, { wait: 300 }), p = (g) => {
+    const { value: h } = g.target;
+    c(h), l.run(h);
+  }, d = () => {
+    c(""), i("");
+  };
+  return j(() => {
+    c(n.keyword || "");
+  }, [n.keyword]), /* @__PURE__ */ t(
+    lr,
+    {
+      inputProps: {
+        "data-cy": "search-blocklet"
+      },
+      startAdornment: /* @__PURE__ */ t(be, { position: "start", children: /* @__PURE__ */ t(ir, {}) }),
+      onChange: p,
+      placeholder: e,
+      value: s,
+      title: e,
+      "data-cy": "search",
+      endAdornment: s && /* @__PURE__ */ t(be, { position: "end", children: /* @__PURE__ */ t(sr, { "data-cy": "search-delete", onClick: d }) }),
+      ...r
+    }
+  );
 }
+const lr = q(Ee)`
+  background-color: ${(e) => e.theme.palette.grey[50]};
+  font-size: 14px;
+  border-radius: 6px;
+  width: 100%;
+  .MuiInputBase-input {
+    padding: 8px 0 8px 10px;
+  }
+  .MuiOutlinedInput-notchedOutline {
+    border: none;
+  }
+  .Mui-focused {
+    background-color: #f6f6f6;
+    .MuiInputBase-input::placeholder {
+      color: transparent;
+    }
+  }
+`, ir = q(Y)`
+  color: ${(e) => e.theme.palette.grey[500]};
+  font-size: 28px;
+  @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
+    font-size: 24px;
+  }
+`, sr = q(he)`
+  color: ${(e) => e.theme.palette.grey[500]};
+  font-size: 16px;
+  cursor: pointer;
+`;
 function ar() {
-  var g;
-  const { filters: e, handleSort: r, handlePrice: o, t: l, getCategoryLocale: n, developerName: a, handleDeveloper: d } = S(), u = Le(l), i = ((g = u.find((h) => h.value === e.sortBy)) == null ? void 0 : g.name) || l("sort.sort");
+  const { search: e, t: r, endpoint: o, locale: n, getCategoryLocale: i, developerName: s, showResourcesSwitch: c, layout: l, baseSearch: p } = I(), { filters: d, handleSort: g, handlePrice: h, handleDeveloper: m, handleSwitchShowResources: k } = e, C = Ne(r);
   return /* @__PURE__ */ f(
-    z,
+    T,
     {
+      className: "filter-bar",
       direction: { xs: "column", md: "row" },
       alignItems: { xs: "flex-start", md: "center" },
       justifyContent: "space-between",
+      gap: 2,
       spacing: { xs: 1, md: 0 },
       pt: { xs: 2, md: 0 },
       px: 0,
       pb: 3,
       children: [
-        /* @__PURE__ */ t(L, { variant: "h2", textTransform: "capitalize", children: n(e.category) }),
+        /* @__PURE__ */ t(x, { variant: "h2", textTransform: "capitalize", children: i(d.category) }),
         /* @__PURE__ */ f(
-          z,
+          T,
           {
+            flex: 1,
             direction: "row",
             alignItems: "center",
-            width: { xs: "100%", md: "auto" },
-            justifyContent: "space-between",
+            width: "100%",
+            justifyContent: { xs: "space-between", md: "flex-end" },
             gap: 2,
             children: [
-              e.owner && a && /* @__PURE__ */ t(it, { label: a, size: "small", onDelete: () => d("") }),
+              l.showSearch ? /* @__PURE__ */ t(w, { flex: 1, children: p ? /* @__PURE__ */ t(nr, {}) : /* @__PURE__ */ t(
+                or,
+                {
+                  locale: n,
+                  endpoint: o,
+                  sx: {
+                    display: { md: "block", xs: "none" },
+                    flex: 1,
+                    mr: 1,
+                    width: "350px"
+                  },
+                  t: r,
+                  filters: e.filters,
+                  handleKeyword: e.handleKeyword,
+                  handleSearchSelect: e.handleSearchSelect
+                }
+              ) }) : null,
+              d.owner && s && /* @__PURE__ */ t(St, { label: s, size: "small", onDelete: () => m("") }),
+              c ? /* @__PURE__ */ t(
+                Se,
+                {
+                  checked: d.showResources === "true",
+                  onChange: (S) => k(S ? "true" : ""),
+                  label: r("common.showResources")
+                }
+              ) : null,
               /* @__PURE__ */ t(
-                ye,
+                Se,
                 {
-                  sx: { m: 0 },
-                  control: /* @__PURE__ */ t(
-                    xe,
-                    {
-                      checked: e.price === "free",
-                      size: "small",
-                      sx: { p: 0, pr: 1, "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                      onChange: (h) => o(h.target.checked ? "free" : "")
-                    }
-                  ),
-                  label: l("blocklet.free")
+                  checked: d.price === "free",
+                  onChange: (S) => h(S ? "free" : ""),
+                  label: r("blocklet.free")
                 }
               ),
               /* @__PURE__ */ t(
-                V,
+                Ve,
                 {
-                  value: e.sortBy,
-                  options: u,
-                  title: i,
-                  onChange: r,
-                  icon: null,
-                  prepend: null,
-                  itemRender: null
+                  value: d.sortBy || C[0].value,
+                  options: C,
+                  placeholder: r("sort.sort"),
+                  onChange: (S) => g(S)
                 }
               )
             ]
@@ -1123,179 +1266,209 @@ function ar() {
     }
   );
 }
-function me() {
-  const { t: e } = S();
-  return /* @__PURE__ */ t(Re, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+function Se({
+  checked: e,
+  onChange: r,
+  label: o
+}) {
+  return /* @__PURE__ */ t(
+    Le,
+    {
+      sx: { m: 0 },
+      control: /* @__PURE__ */ t(
+        Fe,
+        {
+          checked: e,
+          size: "small",
+          sx: { p: 0, pr: 1, "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
+          onChange: (n) => r(n.target.checked)
+        }
+      ),
+      label: o
+    }
+  );
 }
-function $({ filterTip: e, keywordTip: r }) {
-  const { t: o, locale: l } = S(), n = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ f(Te, { className: "tips", children: [
-    /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
-    e && /* @__PURE__ */ t("span", { children: o("blocklet.filterTip") }),
-    e && r && n(),
-    r && /* @__PURE__ */ t("span", { children: o("blocklet.keywordTip") })
+function Q({ children: e }) {
+  return /* @__PURE__ */ f(w, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.lighter", children: [
+    /* @__PURE__ */ t(At, {}),
+    e
   ] });
 }
-$.propTypes = {
-  filterTip: w.bool,
-  keywordTip: w.bool
-};
-$.defaultProps = {
-  filterTip: !1,
-  keywordTip: !1
-};
-function q({ primaryStart: e, primaryEnd: r, filter: o }) {
-  return /* @__PURE__ */ f(Re, { variant: "subtitle2", children: [
-    /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ f("span", { className: "primary", children: [
-      " ",
-      o,
-      " "
-    ] }),
-    /* @__PURE__ */ f("span", { children: [
+function Ie() {
+  const { t: e } = I();
+  return /* @__PURE__ */ t(x, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+}
+function ie({ filterTip: e, keywordTip: r }) {
+  const { t: o, locale: n } = I(), i = () => n === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ f(w, { mt: 1, display: "flex", children: [
+    /* @__PURE__ */ t(x, { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
+    e && /* @__PURE__ */ t(x, { children: o("blocklet.filterTip") }),
+    e && r && i(),
+    r && /* @__PURE__ */ t(x, { children: o("blocklet.keywordTip") })
+  ] });
+}
+function se({
+  primaryStart: e,
+  primaryEnd: r,
+  filter: o
+}) {
+  return /* @__PURE__ */ f(x, { variant: "subtitle2", display: "flex", gap: 0.5, mx: 0.5, children: [
+    /* @__PURE__ */ t(x, { children: e }),
+    /* @__PURE__ */ t(x, { color: "primary", children: o }),
+    /* @__PURE__ */ f(x, { children: [
       r,
       " "
     ] })
   ] });
 }
-q.propTypes = {
-  primaryStart: w.string.isRequired,
-  primaryEnd: w.string.isRequired,
-  filter: w.string.isRequired
-};
-const sr = (e, r, o, l) => gt(
-  async (n) => {
-    n || (o.currentPage = o.defaultCurrentPage);
-    const { currentPage: a, pageSize: d } = o, u = {
+function cr() {
+  const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = I(), { filters: i } = r, s = !!n || !!i.price;
+  if (i.keyword && s)
+    return /* @__PURE__ */ f(Q, { children: [
+      /* @__PURE__ */ t(
+        se,
+        {
+          primaryStart: e("blocklet.noBlockletPart1"),
+          primaryEnd: e("blocklet.noBlockletPart2"),
+          filter: i.keyword
+        }
+      ),
+      /* @__PURE__ */ t(ie, { keywordTip: !0, filterTip: !0 })
+    ] });
+  if (i.keyword)
+    return /* @__PURE__ */ f(Q, { children: [
+      /* @__PURE__ */ t(
+        se,
+        {
+          primaryStart: e("blocklet.noBlockletPart1"),
+          primaryEnd: e("blocklet.noBlockletPart2"),
+          filter: i.keyword
+        }
+      ),
+      /* @__PURE__ */ t(ie, { keywordTip: !0 })
+    ] });
+  if (s) {
+    const c = o(n);
+    return /* @__PURE__ */ f(Q, { children: [
+      c ? /* @__PURE__ */ t(
+        se,
+        {
+          primaryStart: e("blocklet.noCategoryResults1"),
+          primaryEnd: e("blocklet.noCategoryResults2"),
+          filter: c
+        }
+      ) : /* @__PURE__ */ t(Ie, {}),
+      /* @__PURE__ */ t(ie, { filterTip: !0 })
+    ] });
+  }
+  return /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(Ie, {}) });
+}
+const dr = (e, r, o, n) => tt(
+  async (i) => {
+    i || (o.currentPage = o.defaultCurrentPage);
+    const { currentPage: s, pageSize: c } = o, l = {
       ...r,
       category: r.category === "All" ? "" : r.category,
-      sortBy: I[r.sortBy],
-      page: a,
-      pageSize: d
+      sortBy: P[r.sortBy],
+      page: s,
+      pageSize: c
     };
-    l(null);
-    const { data: i = {} } = await e.get(I.blockletsPath, { params: u });
-    return o.currentPage++, { page: a, pageSize: d, list: (i == null ? void 0 : i.dataList) || [], total: (i == null ? void 0 : i.total) || 0 };
+    n(null);
+    const { data: p = {} } = await e.get(P.blockletsPath, { params: l });
+    return o.currentPage++, { page: s, pageSize: c, list: (p == null ? void 0 : p.dataList) || [], total: (p == null ? void 0 : p.total) || 0 };
   },
   {
-    isNoMore: (n) => n ? n.page * n.pageSize >= n.total : !1,
+    isNoMore: (i) => i ? i.page * i.pageSize >= i.total : !1,
     reloadDeps: [e, Ft(r)],
-    onError: l
+    onError: n
   }
 );
-function cr() {
+function ur() {
   var h;
-  const { storeApi: e, filters: r, extraFilter: o, errors: l, updateDeveloperName: n } = S(), a = yt({
-    currentPage: I.currentPage,
-    pageSize: Wt() ? I.mobilePageSize : I.pageSize,
-    defaultCurrentPage: I.defaultCurrentPage
-  }), [d, u] = F(null), i = sr(e, r, a, u), g = D(
+  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: i } = I(), { filters: s } = r, c = rt({
+    currentPage: P.currentPage,
+    pageSize: Wt() ? P.mobilePageSize : P.pageSize,
+    defaultCurrentPage: P.defaultCurrentPage
+  }), [l, p] = L(null), d = dr(e, s, c, p), g = $(
     () => {
-      var m, C;
-      return o ? o(((m = i.data) == null ? void 0 : m.list) || []) : ((C = i.data) == null ? void 0 : C.list) || [];
+      var m, k;
+      return o ? o(((m = d.data) == null ? void 0 : m.list) || []) : ((k = d.data) == null ? void 0 : k.list) || [];
     },
-    [i.data, o]
+    [d.data, o]
   );
-  return N(() => {
-    const m = g.find((C) => C.owner.did === r.owner);
-    n((m == null ? void 0 : m.owner.fullName) || (m == null ? void 0 : m.author.name) || "");
-  }, [r.owner, g, n]), {
+  return j(() => {
+    const m = g.find((k) => k.owner.did === s.owner);
+    i((m == null ? void 0 : m.owner.fullName) || (m == null ? void 0 : m.author.name) || "");
+  }, [s.owner, g, i]), {
     blocklets: g,
-    fetchBlockletsError: d,
-    loadMore: i.loadMore,
-    hasNextPage: !i.noMore,
-    total: (h = i.data) == null ? void 0 : h.total,
+    fetchBlockletsError: l,
+    loadMore: d.loadMore,
+    hasNextPage: !d.noMore,
+    total: (h = d.data) == null ? void 0 : h.total,
     loadings: {
-      fetchBlockletsLoading: i.loading,
-      loadingMore: i.loadingMore
+      fetchBlockletsLoading: d.loading,
+      loadingMore: d.loadingMore
     },
     errors: {
-      ...l,
-      fetchBlockletsError: d
+      ...n,
+      fetchBlockletsError: l
     }
   };
 }
-function dr() {
-  const { t: e, filters: r, endpoint: o, blockletRender: l, serverVersion: n, minItemWidth: a, selectedCategory: d, getCategoryLocale: u } = S(), { blocklets: i, errors: g, loadMore: h, loadings: m, hasNextPage: C, total: R } = cr(), A = !!d || !!r.price, [c] = _t({
+function hr() {
+  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: i, minItemWidth: s, layout: c, baseSearch: l } = I(), { filters: p } = r, { blocklets: d, errors: g, loadMore: h, loadings: m, hasNextPage: k, total: C } = ur(), [S] = Ct({
     loading: m.fetchBlockletsLoading || m.loadingMore,
-    hasNextPage: C,
+    hasNextPage: k,
     onLoadMore: h
   });
   if (g.fetchBlockletsError) {
-    const x = new Error(`Failed to fetch blocklets from ${o}: ${g.fetchBlockletsError.message}`);
-    return /* @__PURE__ */ t(ee, { error: x });
+    const y = new Error(`Failed to fetch blocklets from ${o}: ${g.fetchBlockletsError.message}`);
+    return /* @__PURE__ */ t(ue, { error: y });
   }
-  if (m.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(Me, { mt: 15 });
-  if (r.keyword && A && i.length === 0)
-    return /* @__PURE__ */ f(j, { children: [
-      /* @__PURE__ */ t(
-        q,
-        {
-          primaryStart: e("blocklet.noBlockletPart1"),
-          primaryEnd: e("blocklet.noBlockletPart2"),
-          filter: r.keyword
-        }
-      ),
-      /* @__PURE__ */ t($, { keywordTip: !0, filterTip: !0 })
-    ] });
-  if (r.keyword && i.length === 0)
-    return /* @__PURE__ */ f(j, { children: [
-      /* @__PURE__ */ t(
-        q,
-        {
-          primaryStart: e("blocklet.noBlockletPart1"),
-          primaryEnd: e("blocklet.noBlockletPart2"),
-          filter: r.keyword
-        }
-      ),
-      /* @__PURE__ */ t($, { keywordTip: !0 })
-    ] });
-  if (A && i.length === 0) {
-    const x = u(d);
-    return /* @__PURE__ */ f(j, { children: [
-      x ? /* @__PURE__ */ t(
-        q,
-        {
-          primaryStart: e("blocklet.noCategoryResults1"),
-          primaryEnd: e("blocklet.noCategoryResults2"),
-          filter: x
-        }
-      ) : /* @__PURE__ */ t(me, {}),
-      /* @__PURE__ */ t($, { filterTip: !0 })
-    ] });
-  }
-  if (i.length === 0)
-    return /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(me, {}) });
-  return /* @__PURE__ */ f(M, { children: [
-    r.keyword ? /* @__PURE__ */ f(M, { children: [
-      /* @__PURE__ */ t(oe, { xs: /* @__PURE__ */ t(Oe, {}), md: null }),
-      k()
-    ] }) : /* @__PURE__ */ t(ar, {}),
-    /* @__PURE__ */ t(v, { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${a}px, 1fr))`, p: "2px", gap: 2, children: i.map((x) => /* @__PURE__ */ t(v, { "data-blocklet-did": x.did, sx: { minWidth: a }, children: l({ blocklet: x, blocklets: i, serverVersion: n }) }, x.did)) }),
-    C && /* @__PURE__ */ t(v, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: c, children: /* @__PURE__ */ t(Z, {}) })
+  const B = l && c.showSearch || !p.keyword;
+  return /* @__PURE__ */ f(N, { children: [
+    B ? /* @__PURE__ */ t(ar, {}) : /* @__PURE__ */ f(N, { children: [
+      /* @__PURE__ */ t(fe, { xs: /* @__PURE__ */ t(He, {}), md: null }),
+      v()
+    ] }),
+    u(),
+    !m.fetchBlockletsLoading && k && /* @__PURE__ */ t(w, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: S, children: /* @__PURE__ */ t(ee, {}) })
   ] });
-  function k() {
-    return /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
-      /* @__PURE__ */ t(L, { variant: "h3", children: e("blocklet.search", { keyword: r.keyword }) }),
-      /* @__PURE__ */ t(L, { variant: "body1", color: "text.lighter", fontSize: 13, children: e("blocklet.resultCount", { count: R }) })
-    ] });
-  }
-}
-const j = E(zt)`
-  text-align: center;
-  margin-top: 100px;
-  .primary {
-    color: ${(e) => e.theme.palette.primary.main};
+  function u() {
+    return m.fetchBlockletsLoading ? /* @__PURE__ */ t(qe, { mt: 15 }) : d.length ? /* @__PURE__ */ t(
+      w,
+      {
+        className: "blocklet-list",
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fill, minmax(${s}px, 1fr))`,
+        p: "2px",
+        gap: 2,
+        children: d.map((y) => /* @__PURE__ */ t(w, { "data-blocklet-did": y.did, sx: { minWidth: s }, children: n({ blocklet: y, blocklets: d, serverVersion: i }) }, y.did))
+      }
+    ) : /* @__PURE__ */ t(cr, {});
   }
-  .tips {
-    margin-top: ${(e) => e.theme.spacing(1)};
+  function v() {
+    return /* @__PURE__ */ f(
+      T,
+      {
+        direction: "row",
+        className: "search-result-title",
+        alignItems: "center",
+        justifyContent: "space-between",
+        mb: 2,
+        mt: { xs: 2, md: 0 },
+        children: [
+          /* @__PURE__ */ t(x, { variant: "h3", children: e("blocklet.search", { keyword: p.keyword }) }),
+          /* @__PURE__ */ t(x, { variant: "body1", color: "text.lighter", fontSize: 13, children: e("blocklet.resultCount", { count: C }) })
+        ]
+      }
+    );
   }
-`;
-function ur() {
-  const { t: e } = S(), { toggleOpen: r } = te();
+}
+function pr() {
+  const { t: e, selectedCategory: r, getCategoryLocale: o } = I(), { toggleOpen: n } = me();
   return /* @__PURE__ */ f(
-    L,
+    x,
     {
       variant: "body1",
       display: { xs: "flex", md: "none" },
@@ -1304,25 +1477,25 @@ function ur() {
       py: 2,
       fontWeight: "fontWeightMedium",
       children: [
-        /* @__PURE__ */ t(Ee, { onClick: () => r(!0), children: /* @__PURE__ */ t(Et, {}) }),
-        e("common.category")
+        /* @__PURE__ */ t(Ue, { onClick: () => n(!0), children: /* @__PURE__ */ t(Lt, {}) }),
+        o(r) || e("common.category")
       ]
     }
   );
 }
-function pr() {
-  const { blockletList: e, filters: r } = S(), o = r.category || r.keyword || r.price;
-  return /* @__PURE__ */ t(Ot, { children: /* @__PURE__ */ f(dt, { FallbackComponent: ee, children: [
-    /* @__PURE__ */ t(ur, {}),
-    /* @__PURE__ */ f(v, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
-      /* @__PURE__ */ t(tr, {}),
-      /* @__PURE__ */ t(z, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: o ? /* @__PURE__ */ t(dr, { blocklets: e }) : /* @__PURE__ */ t(ir, {}) })
+function mr() {
+  const { search: e, layout: r } = I(), { filters: o } = e, n = o.category || o.keyword || o.price;
+  return /* @__PURE__ */ t(Ot, { children: /* @__PURE__ */ f(Qe, { FallbackComponent: ue, children: [
+    /* @__PURE__ */ t(pr, {}),
+    /* @__PURE__ */ f(w, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
+      /* @__PURE__ */ t(Qt, {}),
+      /* @__PURE__ */ t(T, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: r.showExplore && !n ? /* @__PURE__ */ t(rr, {}) : /* @__PURE__ */ t(hr, {}) })
     ] })
   ] }) });
 }
-function Jr(e) {
-  const r = fe(), o = at(
-    ct({
+function So(e) {
+  const r = de(), o = Ge(
+    Xe({
       ...r,
       typography: {
         h1: {
@@ -1350,8 +1523,11 @@ function Jr(e) {
       }
     })
   );
-  return /* @__PURE__ */ t(st, { theme: o, children: /* @__PURE__ */ t(Ht, { ...e, children: /* @__PURE__ */ t(pr, {}) }) });
+  return /* @__PURE__ */ t(Ke, { theme: o, children: /* @__PURE__ */ t(Ht, { ...e, children: /* @__PURE__ */ t(mr, {}) }) });
 }
 export {
-  Jr as default
+  or as Autocomplete,
+  Yt as Image,
+  So as default,
+  _t as useSearch
 };