@blocklet/list 0.16.55 → 0.16.57

package/lib/index.es.js

@@ -1,25 +1,25 @@
-import { jsx as t, jsxs as h, Fragment as z } from "react/jsx-runtime";
+import { jsx as t, jsxs as h, Fragment as F } from "react/jsx-runtime";
 import { styled as Q, useTheme as we } from "@arcblock/ux/lib/Theme";
 import et from "@mui/material/styles/createTheme";
 import tt from "@mui/material/styles/ThemeProvider";
-import { pick as rt, omitBy as se, orderBy as ot, isEmpty as nt, merge as it } from "lodash-es";
+import { pick as rt, omitBy as ae, orderBy as ot, isEmpty as nt, merge as it } from "lodash-es";
 import { ErrorFallback as be } from "@arcblock/ux/lib/ErrorBoundary";
 import w from "@mui/material/Box";
 import O from "@mui/material/Stack";
-import { createContext as Me, useState as E, useMemo as V, useContext as ze, useCallback as ge, useEffect as G, forwardRef as lt, useRef as re, memo as at } from "react";
+import { createContext as _e, useState as E, useMemo as G, useContext as Me, useCallback as ge, useEffect as q, forwardRef as lt, useRef as te, memo as at } from "react";
 import { ErrorBoundary as st } from "react-error-boundary";
 import ct from "@iconify-icons/tabler/compass";
-import { Icon as X } from "@iconify/react";
-import ke from "@mui/icons-material/Close";
+import { Icon as M } from "@iconify/react";
+import ze from "@mui/icons-material/Close";
 import v from "@mui/material/Typography";
 import { createAxios as Fe } from "@blocklet/js-sdk";
-import { useRequest as ne, useDebounceFn as De, useInfiniteScroll as dt, useReactive as ut } from "ahooks";
+import { useRequest as oe, useDebounceFn as De, useInfiniteScroll as dt, useReactive as ut } from "ahooks";
 import "color";
-import { parseURL as ht, parseQuery as pt, parseFilename as mt, stringifyParsedURL as ft, withQuery as ve, joinURL as Re } from "ufo";
-import Be from "flat";
-import ie from "@mui/material/Button";
+import { parseURL as ht, parseQuery as pt, parseFilename as mt, stringifyParsedURL as ft, withQuery as ke, joinURL as Ie } from "ufo";
+import Re from "flat";
+import ne from "@mui/material/Button";
 import gt from "@mui/material/styles/useTheme";
-import U from "@mui/material/useMediaQuery";
+import V from "@mui/material/useMediaQuery";
 import yt from "@mui/material/Drawer";
 import Ne from "@mui/material/Checkbox";
 import We from "@mui/material/FormControlLabel";
@@ -32,7 +32,7 @@ import je from "@mui/material/MenuList";
 import vt from "@mui/material/Paper";
 import Ct from "@mui/material/Popper";
 import St from "@mui/material/SvgIcon";
-import le from "@mui/material/CircularProgress";
+import ie from "@mui/material/CircularProgress";
 import He from "@arcblock/ux/lib/Avatar";
 import It from "@iconify-icons/tabler/cloud-download";
 import Rt from "@mui/icons-material/ChevronLeft";
@@ -40,37 +40,39 @@ import Bt from "@mui/icons-material/ChevronRight";
 import _ from "@mui/material/Skeleton";
 import Tt from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-import Te from "@mui/material/Grid";
+import Be from "@mui/material/Grid";
 import Pt from "react-infinite-scroll-hook";
 import At from "@iconify-icons/tabler/square";
 import Et from "@iconify-icons/tabler/square-check-filled";
-import Pe from "@mui/material/Chip";
+import Te from "@mui/material/Chip";
 import { useTheme as Ot } from "@mui/material/styles";
-import te from "@mui/icons-material/Search";
-import Lt from "@mui/material/Autocomplete";
-import _t from "@mui/material/Dialog";
+import se from "@iconify-icons/tabler/search";
+import Lt from "@iconify-icons/tabler/x";
+import _t from "@mui/material/Autocomplete";
+import Mt from "@mui/material/Dialog";
 import Ue from "@mui/material/OutlinedInput";
-import Mt from "@mui/material/TextField";
-import { useHotkeys as zt } from "react-hotkeys-hook";
-import Ae from "@mui/material/InputAdornment";
-import Ft from "@arcblock/ux/lib/Empty";
-import Dt from "json-stable-stringify";
-import Nt from "@mui/icons-material/Menu";
-import { Card as Wt, Box as ce, Skeleton as L } from "@mui/material";
-import $t from "@arcblock/ux/lib/Img";
-const Ve = Me({
+import zt from "@mui/material/TextField";
+import { useHotkeys as Ft } from "react-hotkeys-hook";
+import Dt from "@mui/icons-material/Search";
+import Pe from "@mui/material/InputAdornment";
+import Nt from "@arcblock/ux/lib/Empty";
+import Wt from "json-stable-stringify";
+import $t from "@mui/icons-material/Menu";
+import { Card as jt, Box as ce, Skeleton as L } from "@mui/material";
+import Ht from "@arcblock/ux/lib/Img";
+const Ve = _e({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function jt({ children: e }) {
+function Ut({ children: e }) {
   const [r, o] = E(!1), n = (a) => {
     o(a ?? !a);
-  }, l = V(() => ({ open: r, toggleOpen: n }), [r]);
+  }, l = G(() => ({ open: r, toggleOpen: n }), [r]);
   return /* @__PURE__ */ t(Ve.Provider, { value: l, children: e });
 }
-function Ce() {
-  return ze(Ve);
+function ve() {
+  return Me(Ve);
 }
 const P = {
   nameAsc: "title",
@@ -86,14 +88,14 @@ const P = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, Ht = (e) => ne(
+}, Vt = (e) => oe(
   async () => {
     const { data: r } = await e.get(P.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
 );
-function Ut(e, r) {
+function Gt(e, r) {
   const o = e.menu ? {
     sortBy: "popularity",
     sortDirection: "desc",
@@ -115,13 +117,13 @@ function Ut(e, r) {
   !o.category && !a && (o.category = "All");
   const s = (i) => {
     const m = { ...o, ...i };
-    n(se(m, (d) => d === "" || d === void 0));
+    n(ae(m, (d) => d === "" || d === void 0));
   };
   return {
     filters: e,
     cleanFilter: (i) => {
-      const m = i ? se(o, (d, f) => i.includes(f)) : {};
-      n(se(m, (d) => d === "" || d === void 0));
+      const m = i ? ae(o, (d, f) => i.includes(f)) : {};
+      n(ae(m, (d) => d === "" || d === void 0));
     },
     handleActiveMenu: (i) => {
       i !== e.menu && n({ menu: i });
@@ -152,7 +154,7 @@ function Ut(e, r) {
     }
   };
 }
-const Vt = (e, r, o) => e && r || !o, Ge = (e) => [
+const qt = (e, r, o) => e && r || !o, Ge = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -173,21 +175,21 @@ const Vt = (e, r, o) => e && r || !o, Ge = (e) => [
   if (l.imageFilter)
     return e;
   const s = o || ((f = window.blocklet) == null ? void 0 : f.version), { w: i, h: m } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
-  return ve(e, {
+  return ke(e, {
     ...i || m ? { imageFilter: "resize", w: i, h: m } : {},
     v: s
   });
-}, Gt = (e) => [
+}, Kt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], qt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Kt = (e) => {
+], Xt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Qt = (e) => {
   var r, o;
   return Array.isArray(e) ? e.map((n) => n.message).join(`
 `) : (o = (r = e.response) == null ? void 0 : r.data) != null && o.error ? e.response.data.error.message || e.response.data.error : e.message || e;
-}, Xt = (e, r) => (
+}, Yt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
   e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
-), Qt = () => window.innerWidth <= 600, Yt = {
+), Zt = () => window.innerWidth <= 600, Jt = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -239,7 +241,7 @@ const Vt = (e, r, o) => e && r || !o, Ge = (e) => [
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, Zt = {
+}, er = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -292,14 +294,14 @@ const Vt = (e, r, o) => e && r || !o, Ge = (e) => [
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
 }, de = {
-  en: Be(Yt),
-  zh: Be(Zt)
+  en: Re(Jt),
+  zh: Re(er)
 }, Ke = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
-}, Jt = (e) => (r, o) => {
+}, tr = (e) => (r, o) => {
   const n = de[e] ? de[e][r] : de.en[r];
-  return Xt(n, o) || r;
+  return Yt(n, o) || r;
 }, Xe = {
   errors: {
     fetchCategoriesError: null
@@ -355,8 +357,8 @@ const Vt = (e, r, o) => e && r || !o, Ge = (e) => [
     handlePage: () => {
     }
   }
-}, Qe = Me(Xe), { Provider: er, Consumer: Lo } = Qe;
-function tr(e) {
+}, Qe = _e(Xe), { Provider: rr, Consumer: Fo } = Qe;
+function or(e) {
   const {
     locale: r = "zh",
     filters: o = {},
@@ -371,27 +373,27 @@ function tr(e) {
     baseSearch: f = !1,
     fetchCategoryDelay: u = 0,
     showResourcesSwitch: g = !1,
-    showCategory: x = !0,
+    showCategory: y = !0,
     tagFilters: I = [],
-    children: y,
+    children: x,
     storeVersion: R,
     onSearchSelect: p = () => {
     },
     endpoint: C,
     blockletRender: b,
     compact: k = !1
-  } = e, A = Ke(n, R), F = V(() => Fe({ baseURL: C, headers: A }), [C]), $ = Ut(o, { onFilterChange: l, emptyCategory: !i.showExplore, onSearchSelect: p }), [D, q] = E(""), {
-    data: j = [],
-    error: ae,
+  } = e, A = Ke(n, R), D = G(() => Fe({ baseURL: C, headers: A }), [C]), j = Gt(o, { onFilterChange: l, emptyCategory: !i.showExplore, onSearchSelect: p }), [N, K] = E(""), {
+    data: H = [],
+    error: le,
     loading: Y,
     run: Z
-  } = Ht(F), H = V(() => {
-    const T = ot(j, [(W) => W.name], ["asc"]), M = T.findIndex((W) => W.name === "All" || W.locales.en === "All");
-    return M > -1 ? [{ ...T[M], _id: "All" }, ...T.slice(0, M), ...T.slice(M + 1)] : T;
-  }, [j]), K = ge(Jt(r), [r]), c = V(() => qt(H, r), [H, r]), S = Gt(K), N = {
-    search: $,
+  } = Vt(D), U = G(() => {
+    const T = ot(H, [($) => $.name], ["asc"]), z = T.findIndex(($) => $.name === "All" || $.locales.en === "All");
+    return z > -1 ? [{ ...T[z], _id: "All" }, ...T.slice(0, z), ...T.slice(z + 1)] : T;
+  }, [H]), X = ge(tr(r), [r]), c = G(() => Xt(U, r), [U, r]), S = Kt(X), W = {
+    search: j,
     compact: k,
-    errors: { fetchCategoriesError: ae },
+    errors: { fetchCategoriesError: le },
     loadings: {
       fetchCategoriesLoading: Y
     },
@@ -406,37 +408,37 @@ function tr(e) {
     },
     minItemWidth: a,
     wrapChildren: m,
-    t: K,
+    t: X,
     storeVersion: R,
     serverVersion: n,
-    selectedCategory: $.filters.category || (i.showExplore ? "" : "All"),
-    categoryList: H,
+    selectedCategory: j.filters.category || (i.showExplore ? "" : "All"),
+    categoryList: U,
     blockletRender: b,
     locale: r,
     categoryOptions: c,
     priceOptions: S,
-    storeApi: F,
+    storeApi: D,
     baseSearch: f,
     showResourcesSwitch: g,
-    showCategory: x,
+    showCategory: y,
     tagFilters: I,
     onFilterChange: l,
     getCategoryLocale: (T) => {
       if (!T) return null;
-      const M = j.find((W) => W._id === T || W.locales.en === "All");
-      return M ? M.locales[r] || M.locales.en : null;
+      const z = H.find(($) => $._id === T || $.locales.en === "All");
+      return z ? z.locales[r] || z.locales.en : null;
     },
     get developerName() {
-      return D;
+      return N;
     },
-    updateDeveloperName: q
+    updateDeveloperName: K
   };
-  return G(() => {
+  return q(() => {
     setTimeout(Z, u || 0);
-  }, [C, Z, u]), /* @__PURE__ */ t(er, { value: N, children: y });
+  }, [C, Z, u]), /* @__PURE__ */ t(rr, { value: W, children: x });
 }
 function B() {
-  const e = ze(Qe);
+  const e = Me(Qe);
   return e || Xe;
 }
 function Ye({
@@ -446,7 +448,7 @@ function Ye({
   ...n
 }) {
   return /* @__PURE__ */ t(
-    ie,
+    ne,
     {
       ...n,
       onClick: r,
@@ -472,7 +474,7 @@ function Ye({
 function J(e, r) {
   return e === void 0 ? r : e;
 }
-function Se({
+function Ce({
   xs: e,
   sm: r,
   md: o,
@@ -480,56 +482,56 @@ function Se({
   xl: l,
   exact: a
 }) {
-  const s = gt(), i = U(s.breakpoints.down("sm")), m = U(s.breakpoints.between("sm", "md")), d = U(s.breakpoints.between("md", "lg")), f = U(s.breakpoints.between("lg", "xl"));
+  const s = gt(), i = V(s.breakpoints.down("sm")), m = V(s.breakpoints.between("sm", "md")), d = V(s.breakpoints.between("md", "lg")), f = V(s.breakpoints.between("lg", "xl"));
   if (a)
     return i ? e || null : m ? r || null : d ? o || null : f ? n || null : l || null;
   let u = e;
   return i || (u = J(r, u), m) || (u = J(o, u), d) || (u = J(n, u), f) ? u : J(l, u);
 }
-function rr({ children: e }) {
-  const { open: r, toggleOpen: o } = Ce();
+function nr({ children: e }) {
+  const { open: r, toggleOpen: o } = ve();
   return /* @__PURE__ */ t(
-    Se,
+    Ce,
     {
       xs: /* @__PURE__ */ t(yt, { open: r, onClose: () => o(!1), children: e }),
       md: /* @__PURE__ */ t(w, { children: e })
     }
   );
 }
-const or = lt(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
-  ie,
+const ir = lt(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
+  ne,
   {
     ref: n,
     disableElevation: !0,
     disabled: r || e,
     ...o,
     sx: [{ borderRadius: "4px" }, ...Array.isArray(o.sx) ? o.sx : [o.sx]],
-    startIcon: e && /* @__PURE__ */ t(le, { size: "1em" })
+    startIcon: e && /* @__PURE__ */ t(ie, { size: "1em" })
   }
 ));
 function ye({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
   var R;
-  const a = re(null), s = we(), [i, m] = E(!1), [d, f] = E(e !== null ? e : ""), u = U(s.breakpoints.down("sm"));
-  G(() => {
+  const a = te(null), s = we(), [i, m] = E(!1), [d, f] = E(e !== null ? e : ""), u = V(s.breakpoints.down("sm"));
+  q(() => {
     f(e !== null ? e : "");
   }, [e]);
   const g = ge(() => {
     m(!1);
-  }, []), x = ge(() => {
+  }, []), y = ge(() => {
     m(!0);
   }, []);
   function I(p) {
     f(p.value), o(p.value), u && g();
   }
-  function y(p) {
+  function x(p) {
     return p === d;
   }
-  return /* @__PURE__ */ h(z, { children: [
+  return /* @__PURE__ */ h(F, { children: [
     /* @__PURE__ */ h(
-      nr,
+      lr,
       {
         ref: a,
-        onClick: x,
+        onClick: y,
         variant: "outlined",
         size: "medium",
         className: ["my-select__selector", nt(d) ? "" : "my-select__selector--active"].join(" "),
@@ -546,11 +548,11 @@ function ye({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
       {
         ...p,
         style: { transformOrigin: C === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(vt, { children: /* @__PURE__ */ t(bt, { onClickAway: g, children: /* @__PURE__ */ t(ir, { autoFocusItem: i, onMouseEnter: x, onMouseLeave: g, children: r.map((b) => /* @__PURE__ */ h($e, { onClick: () => I(b), sx: { fontSize: 14 }, children: [
+        children: /* @__PURE__ */ t(vt, { children: /* @__PURE__ */ t(bt, { onClickAway: g, children: /* @__PURE__ */ t(ar, { autoFocusItem: i, onMouseEnter: y, onMouseLeave: g, children: r.map((b) => /* @__PURE__ */ h($e, { onClick: () => I(b), sx: { fontSize: 14 }, children: [
           /* @__PURE__ */ t(
             xt,
             {
-              sx: { mr: 1, fontSize: 16, visibility: y(b.value) ? "visible" : "hidden" }
+              sx: { mr: 1, fontSize: 16, visibility: x(b.value) ? "visible" : "hidden" }
             }
           ),
           b.name
@@ -559,7 +561,7 @@ function ye({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
     ) })
   ] });
 }
-const nr = Q(or)`
+const lr = Q(ir)`
   border: 1px solid ${(e) => e.theme.palette.divider};
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -587,7 +589,7 @@ const nr = Q(or)`
       margin-right: 3px;
     }
   }
-`, ir = Q(je)`
+`, ar = Q(je)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -643,15 +645,15 @@ function Ze() {
     }
   );
 }
-function lr({ menus: e }) {
-  const { selectedCategory: r, search: o, t: n, categoryOptions: l, loadings: a, layout: s, baseSearch: i, compact: m } = B(), { filters: d, handleActiveMenu: f, handleCategory: u, cleanFilter: g } = o, { toggleOpen: x } = Ce();
-  G(() => {
-    x(!1);
+function sr({ menus: e }) {
+  const { selectedCategory: r, search: o, t: n, categoryOptions: l, loadings: a, layout: s, baseSearch: i, compact: m } = B(), { filters: d, handleActiveMenu: f, handleCategory: u, cleanFilter: g } = o, { toggleOpen: y } = ve();
+  q(() => {
+    y(!1);
   }, [Object.values(d).join("")]);
-  const I = Vt(i, s.showSearch, d.keyword);
-  return s.showCategory && !m ? /* @__PURE__ */ h(rr, { children: [
+  const I = qt(i, s.showSearch, d.keyword);
+  return s.showCategory && !m ? /* @__PURE__ */ h(nr, { children: [
     /* @__PURE__ */ t(
-      Se,
+      Ce,
       {
         xs: /* @__PURE__ */ h(
           O,
@@ -665,7 +667,7 @@ function lr({ menus: e }) {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(Ye, { onClick: () => x(!1), children: /* @__PURE__ */ t(ke, {}) }),
+              /* @__PURE__ */ t(Ye, { onClick: () => y(!1), children: /* @__PURE__ */ t(ze, {}) }),
               /* @__PURE__ */ t(v, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: n("common.category") })
             ]
           }
@@ -681,10 +683,10 @@ function lr({ menus: e }) {
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: I ? /* @__PURE__ */ h(z, { children: [
+        children: I ? /* @__PURE__ */ h(F, { children: [
           s.showExplore && /* @__PURE__ */ h(w, { mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
             /* @__PURE__ */ h(w, { display: "flex", alignItems: "center", gap: 1, children: [
-              /* @__PURE__ */ t(X, { icon: ct, width: 20, height: 20 }),
+              /* @__PURE__ */ t(M, { icon: ct, width: 20, height: 20 }),
               /* @__PURE__ */ t(
                 v,
                 {
@@ -693,53 +695,53 @@ function lr({ menus: e }) {
                   fontWeight: !r && !d.menu ? "fontWeightMedium" : void 0,
                   sx: { cursor: "pointer" },
                   onClick: () => {
-                    x(!1), g();
+                    y(!1), g();
                   },
                   children: n("explore.title")
                 }
               )
             ] }),
-            e == null ? void 0 : e.map((y) => /* @__PURE__ */ h(w, { display: "flex", alignItems: "center", mt: 2, gap: 1, children: [
-              typeof y.icon == "string" ? /* @__PURE__ */ t(X, { icon: y.icon, width: 20, height: 20 }) : y.icon,
+            e == null ? void 0 : e.map((x) => /* @__PURE__ */ h(w, { display: "flex", alignItems: "center", mt: 2, gap: 1, children: [
+              typeof x.icon == "string" ? /* @__PURE__ */ t(M, { icon: x.icon, width: 20, height: 20 }) : x.icon,
               /* @__PURE__ */ t(
                 v,
                 {
                   variant: "body1",
-                  color: d.menu === y.key ? "text.primary" : "grey.400",
-                  fontWeight: d.menu === y.key ? "fontWeightMedium" : void 0,
+                  color: d.menu === x.key ? "text.primary" : "grey.400",
+                  fontWeight: d.menu === x.key ? "fontWeightMedium" : void 0,
                   sx: { cursor: "pointer" },
                   onClick: () => {
                     var R;
-                    x(!1), f(y.key), (R = y.onClick) == null || R.call(y);
+                    y(!1), f(x.key), (R = x.onClick) == null || R.call(x);
                   },
-                  children: y.title
+                  children: x.title
                 }
               )
-            ] }, y.key))
+            ] }, x.key))
           ] }),
-          !!l.length && /* @__PURE__ */ t(O, { gap: 2, children: l.map((y) => /* @__PURE__ */ t(
+          !!l.length && /* @__PURE__ */ t(O, { gap: 2, children: l.map((x) => /* @__PURE__ */ t(
             v,
             {
               variant: "body1",
-              title: y.name,
+              title: x.name,
               sx: { cursor: "pointer" },
               "data-cy": "filter",
-              color: r === y.value ? "text.primary" : "grey.400",
+              color: r === x.value ? "text.primary" : "grey.400",
               textTransform: "capitalize",
               onClick: () => {
-                r === y.value ? g() : u(y.value), x(!1);
+                r === x.value ? g() : u(x.value), y(!1);
               },
-              children: y.name
+              children: x.name
             },
-            y.value
+            x.value
           )) })
         ] }) : /* @__PURE__ */ t(Ze, {})
       }
     )
   ] }) : null;
 }
-function Ie() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), n = Ke(r, o), l = V(() => Fe({
+function Se() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), n = Ke(r, o), l = G(() => Fe({
     baseURL: e,
     headers: n
   }), [e]);
@@ -755,9 +757,9 @@ function Ie() {
   };
 }
 const Je = at(function(r) {
-  return /* @__PURE__ */ t(w, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(le, {}) });
+  return /* @__PURE__ */ t(w, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ie, {}) });
 });
-function Ee({
+function Ae({
   icon: e,
   children: r,
   maxWidth: o = 100,
@@ -777,16 +779,16 @@ function Ee({
     )
   ] });
 }
-const ar = 16 / 9, ue = 292, xe = 189, oe = 336;
-function sr() {
-  var y, R;
-  const { t: e, search: r } = B(), { get: o } = Ie(), n = we(), l = U(n.breakpoints.down("md")), a = ((R = (y = window.blocklet) == null ? void 0 : y.preferences) == null ? void 0 : R.homeBanner) || [], {
+const cr = 16 / 9, ue = 292, xe = 189, re = 336;
+function dr() {
+  var x, R;
+  const { t: e, search: r } = B(), { get: o } = Se(), n = we(), l = V(n.breakpoints.down("md")), a = ((R = (x = window.blocklet) == null ? void 0 : x.preferences) == null ? void 0 : R.homeBanner) || [], {
     data: s = [],
     error: i,
     loading: m
-  } = ne(async () => {
+  } = oe(async () => {
     const p = await o(
-      ve(P.blockletsPath, { didList: a.map((C) => C.did).join(",") })
+      ke(P.blockletsPath, { didList: a.map((C) => C.did).join(",") })
     );
     return p != null && p.dataList ? a.map((C) => p.dataList.find((b) => b.did === C.did)) : [];
   });
@@ -799,7 +801,7 @@ function sr() {
     cursor: "pointer",
     color: "text.hint"
   };
-  return !i && a.length > 0 ? /* @__PURE__ */ h(z, { children: [
+  return !i && a.length > 0 ? /* @__PURE__ */ h(F, { children: [
     /* @__PURE__ */ t(v, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
     /* @__PURE__ */ t(
       w,
@@ -812,7 +814,7 @@ function sr() {
         borderRadius: 3,
         overflow: "hidden",
         children: m ? /* @__PURE__ */ h(w, { p: 5, display: { md: "flex" }, gap: 5, alignItems: "center", justifyContent: "center", children: [
-          /* @__PURE__ */ t(_, { variant: "rounded", height: xe, width: oe }),
+          /* @__PURE__ */ t(_, { variant: "rounded", height: xe, width: re }),
           /* @__PURE__ */ h(w, { flex: 1, height: "100%", children: [
             /* @__PURE__ */ t(_, { variant: "text", height: 50, width: 100 }),
             /* @__PURE__ */ t(_, { variant: "text", height: 40, width: "100%" }),
@@ -840,8 +842,8 @@ function sr() {
             items: a.map((p, C) => ({
               original: p.did,
               renderItem: () => {
-                var F;
-                const b = s[C] || {}, k = p.cover || dr(p.did, (F = b.screenshots) == null ? void 0 : F[0]), A = qe(k, n.breakpoints.values.md * 2);
+                var D;
+                const b = s[C] || {}, k = p.cover || hr(p.did, (D = b.screenshots) == null ? void 0 : D[0]), A = qe(k, n.breakpoints.values.md * 2);
                 return /* @__PURE__ */ h(
                   O,
                   {
@@ -876,7 +878,7 @@ function sr() {
                           u(p.name || b.title || p.name),
                           g(p.desc || b.description)
                         ] }),
-                        b.did && x(b, p.baseNum),
+                        b.did && y(b, p.baseNum),
                         I(b)
                       ] })
                     ]
@@ -890,7 +892,7 @@ function sr() {
     )
   ] }) : null;
   function f(p) {
-    return /* @__PURE__ */ t(w, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: oe }, children: /* @__PURE__ */ t(ur, { url: p }) });
+    return /* @__PURE__ */ t(w, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: re }, children: /* @__PURE__ */ t(pr, { url: p }) });
   }
   function u(p) {
     return /* @__PURE__ */ t(v, { variant: "h2", width: "100%", children: p });
@@ -919,16 +921,16 @@ function sr() {
       }
     );
   }
-  function x(p, C = 0) {
+  function y(p, C = 0) {
     const { did: b, owner: k, stats: A } = p;
     return /* @__PURE__ */ h(w, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
-      /* @__PURE__ */ t(Ee, { icon: /* @__PURE__ */ t(He, { src: k.avatar, did: b, size: 20, variant: "circle" }), children: k.fullName }),
-      /* @__PURE__ */ t(Ee, { icon: /* @__PURE__ */ t(X, { icon: It }), title: `${A.downloads + C}`, children: cr(A.downloads + C) })
+      /* @__PURE__ */ t(Ae, { icon: /* @__PURE__ */ t(He, { src: k.avatar, did: b, size: 20, variant: "circle" }), children: k.fullName }),
+      /* @__PURE__ */ t(Ae, { icon: /* @__PURE__ */ t(M, { icon: It }), title: `${A.downloads + C}`, children: ur(A.downloads + C) })
     ] });
   }
   function I(p) {
     return /* @__PURE__ */ t(
-      ie,
+      ne,
       {
         variant: "outlined",
         size: "small",
@@ -945,16 +947,16 @@ function sr() {
     );
   }
 }
-const cr = (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`, dr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function ur({ url: e }) {
+const ur = (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`, hr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function pr({ url: e }) {
   const [r, o] = E(!0);
-  return /* @__PURE__ */ h(z, { children: [
+  return /* @__PURE__ */ h(F, { children: [
     r && /* @__PURE__ */ t(
       _,
       {
         variant: "rectangular",
         sx: {
-          width: { xs: "100%", md: oe },
+          width: { xs: "100%", md: re },
           height: { xs: "auto", md: xe }
         }
       }
@@ -966,46 +968,46 @@ function ur({ url: e }) {
         component: "img",
         src: e,
         alt: "",
-        width: { xs: "100%", md: oe },
+        width: { xs: "100%", md: re },
         height: { xs: "auto", md: xe },
         borderRadius: 2,
         border: 1,
         borderColor: "divider",
-        sx: { objectFit: "container", cursor: "pointer", aspectRatio: ar },
+        sx: { objectFit: "container", cursor: "pointer", aspectRatio: cr },
         onLoad: () => o(!1),
         onError: () => o(!1)
       }
     )
   ] });
 }
-function hr({ title: e, blocklets: r }) {
+function mr({ title: e, blocklets: r }) {
   const { blockletRender: o, serverVersion: n } = B();
   return /* @__PURE__ */ h(w, { mt: 3, children: [
     /* @__PURE__ */ t(v, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
-    /* @__PURE__ */ t(Te, { container: !0, spacing: 2, boxSizing: "border-box", maxWidth: "calc(100vw - 16px)", children: r.map((l) => /* @__PURE__ */ t(Te, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": l.did, children: /* @__PURE__ */ t(w, { padding: "1px", children: o({ blocklet: l, blocklets: r, serverVersion: n }) }) }, l.did)) })
+    /* @__PURE__ */ t(Be, { container: !0, spacing: 2, boxSizing: "border-box", maxWidth: "calc(100vw - 16px)", children: r.map((l) => /* @__PURE__ */ t(Be, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": l.did, children: /* @__PURE__ */ t(w, { padding: "1px", children: o({ blocklet: l, blocklets: r, serverVersion: n }) }) }, l.did)) })
   ] });
 }
-function pr() {
-  const { get: e } = Ie(), { t: r } = B(), {
+function fr() {
+  const { get: e } = Se(), { t: r } = B(), {
     data: o = [],
     error: n,
     loading: l
-  } = ne(async () => {
+  } = oe(async () => {
     const a = await e(P.explorePath);
     return Array.isArray(a) ? a : [];
   });
-  return n ? /* @__PURE__ */ t(be, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : l ? /* @__PURE__ */ t(Je, { mt: 15 }) : /* @__PURE__ */ h(z, { children: [
-    /* @__PURE__ */ t(sr, {}),
+  return n ? /* @__PURE__ */ t(be, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : l ? /* @__PURE__ */ t(Je, { mt: 15 }) : /* @__PURE__ */ h(F, { children: [
+    /* @__PURE__ */ t(dr, {}),
     o.map(
       (a) => {
         var s;
-        return ((s = a.blocklets) == null ? void 0 : s.length) > 0 ? /* @__PURE__ */ t(hr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null;
+        return ((s = a.blocklets) == null ? void 0 : s.length) > 0 ? /* @__PURE__ */ t(mr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null;
       }
     )
   ] });
 }
-const he = "__FREE_TEXT__", Oe = "__NO_RESULT__", pe = 40;
-function mr({
+const he = "__FREE_TEXT__", Ee = "__NO_RESULT__", pe = 40;
+function gr({
   endpoint: e,
   t: r,
   locale: o,
@@ -1014,11 +1016,11 @@ function mr({
   handleSearchSelect: a,
   ...s
 }) {
-  const i = re(null), m = re(!1), [d, f] = E(!1), [u, g] = E(""), [x, I] = E(!1), y = Ie(), [R, p] = E(!1), C = (s == null ? void 0 : s.placeholder) || r("common.searchStore"), b = async (c) => {
+  const i = te(null), m = te(!1), [d, f] = E(!1), [u, g] = E(""), [y, I] = E(!1), x = Se(), [R, p] = E(!1), C = (s == null ? void 0 : s.placeholder) || r("common.searchStore"), b = async (c) => {
     p(!0);
-    const S = await y.get(Re(e, ve(P.blockletsPath, c)));
+    const S = await x.get(Ie(e, ke(P.blockletsPath, c)));
     return p(!1), S.dataList || [];
-  }, { data: k, run: A } = ne(
+  }, { data: k, run: A } = oe(
     (c) => c ? b({
       sortBy: P.nameDesc,
       page: 1,
@@ -1030,20 +1032,20 @@ function mr({
       manual: !0
     }
   );
-  G(() => {
+  q(() => {
     p(!0), A(n.keyword), g(n.keyword || "");
-  }, [n.keyword, A]), zt(
+  }, [n.keyword, A]), Ft(
     "ctrl + k, command + k",
     (c) => {
-      var S, N;
-      return c.stopPropagation(), c.preventDefault(), (N = (S = i.current) == null ? void 0 : S.querySelector("input")) == null || N.focus(), !1;
+      var S, W;
+      return c.stopPropagation(), c.preventDefault(), (W = (S = i.current) == null ? void 0 : S.querySelector("input")) == null || W.focus(), !1;
     },
     { enableOnTags: ["INPUT"] }
   );
-  const F = De((c) => A(c), { wait: 300 }), $ = { name: he, title: u, did: "" };
-  let D = [];
-  return u && (R ? D = [$] : k != null && k.length ? D = [$, ...k] : D = [{ name: Oe, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ h(z, { children: [
-    /* @__PURE__ */ h(_t, { fullScreen: !0, open: x, sx: { display: { md: "none" } }, children: [
+  const D = De((c) => A(c), { wait: 300 }), j = { name: he, title: u, did: "" };
+  let N = [];
+  return u && (R ? N = [j] : k != null && k.length ? N = [j, ...k] : N = [{ name: Ee, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ h(F, { children: [
+    /* @__PURE__ */ h(Mt, { fullScreen: !0, open: y, sx: { display: { md: "none" } }, children: [
       /* @__PURE__ */ h(w, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
         /* @__PURE__ */ t(
           Ue,
@@ -1067,13 +1069,13 @@ function mr({
             placeholder: C,
             className: "bl-autocomplete-input",
             value: u,
-            onChange: (c) => q(c.target.value),
-            startAdornment: H(x),
-            endAdornment: K()
+            onChange: (c) => K(c.target.value),
+            startAdornment: U(y),
+            endAdornment: X()
           }
         ),
         /* @__PURE__ */ t(
-          ie,
+          ne,
           {
             variant: "outlined",
             onClick: () => {
@@ -1083,17 +1085,11 @@ function mr({
           }
         )
       ] }),
-      /* @__PURE__ */ t(je, { sx: { p: 0.5 }, children: D.map((c) => Y(c)) })
+      /* @__PURE__ */ t(je, { sx: { p: 0.5 }, children: N.map((c) => Y(c)) })
     ] }),
+    /* @__PURE__ */ t(w, { sx: { display: { sx: "block", md: "none" }, paddingTop: 1, opacity: 0.5 }, children: /* @__PURE__ */ t(M, { icon: se, style: { fontSize: 22, color: "inherit" }, onClick: () => I(!0) }) }),
     /* @__PURE__ */ t(
-      te,
-      {
-        sx: { display: { sx: "block", md: "none" }, fontSize: 28, color: "text.hint" },
-        onClick: () => I(!0)
-      }
-    ),
-    /* @__PURE__ */ t(
-      Lt,
+      _t,
       {
         ref: i,
         open: !!u && d,
@@ -1103,11 +1099,11 @@ function mr({
           f(!1), S === "selectOption" && !m.current && l(u);
         },
         onKeyDown: (c) => {
-          c.key === "Enter" && !u && j();
+          c.key === "Enter" && !u && H();
         },
         disableClearable: !0,
         inputValue: u,
-        onInputChange: (c, S) => q(S),
+        onInputChange: (c, S) => K(S),
         isOptionEqualToValue: (c, S) => c.name === S.name,
         getOptionLabel: (c) => c.title,
         getOptionKey: (c) => c.name,
@@ -1125,7 +1121,7 @@ function mr({
           }
         },
         renderInput: (c) => /* @__PURE__ */ t(
-          Mt,
+          zt,
           {
             ...c,
             InputProps: {
@@ -1134,16 +1130,16 @@ function mr({
               placeholder: C,
               className: "bl-autocomplete-input",
               value: u,
-              startAdornment: H(d),
-              endAdornment: K()
+              startAdornment: U(d),
+              endAdornment: X()
             }
           }
         ),
         filterOptions: (c) => c,
         ...s,
-        options: D,
+        options: N,
         renderOption: (c, S) => Y(S),
-        value: $,
+        value: j,
         sx: [
           {
             bgcolor: "grey.50",
@@ -1163,27 +1159,27 @@ function mr({
       }
     )
   ] });
-  function q(c) {
-    p(!0), g(c), m.current = !1, F.run(c);
+  function K(c) {
+    p(!0), g(c), m.current = !1, D.run(c);
   }
-  function j() {
-    I(!1), g(""), q(""), l("");
+  function H() {
+    I(!1), g(""), K(""), l("");
   }
-  function ae(c) {
+  function le(c) {
     c != null && c.did ? (I(!1), m.current = !0, g(""), a(c)) : c.name === he && (I(!1), l(u));
   }
   function Y(c) {
-    var S, N;
+    var S, W;
     return /* @__PURE__ */ h(
       $e,
       {
         sx: { display: "flex", alignItems: "center", gap: 1, p: 1.5, borderRadius: "8px" },
-        onClick: () => ae(c),
+        onClick: () => le(c),
         children: [
           Z(c),
           /* @__PURE__ */ h(v, { variant: "body1", children: [
             /* @__PURE__ */ t(v, { fontWeight: "fontWeightMedium", display: "flex", alignItems: "center", gap: 1, children: c.title }),
-            /* @__PURE__ */ t(v, { sx: { color: "text.hint" }, fontSize: "13px", children: ((N = (S = c.category) == null ? void 0 : S.locales) == null ? void 0 : N[o || "en"]) || "" })
+            /* @__PURE__ */ t(v, { sx: { color: "text.hint" }, fontSize: "13px", children: ((W = (S = c.category) == null ? void 0 : S.locales) == null ? void 0 : W[o || "en"]) || "" })
           ] })
         ]
       },
@@ -1191,7 +1187,7 @@ function mr({
     );
   }
   function Z(c) {
-    if ([he, Oe].includes(c.name))
+    if ([he, Ee].includes(c.name))
       return /* @__PURE__ */ t(
         w,
         {
@@ -1203,48 +1199,55 @@ function mr({
           color: "text.hint",
           bgcolor: "grey.100",
           borderRadius: "8px",
-          children: /* @__PURE__ */ t(te, { sx: { fontSize: 28 } })
+          children: /* @__PURE__ */ t(M, { icon: se, style: { fontSize: 28 } })
         }
       );
     let S = "";
-    return c.logo && (S = Re(e, "assets", c.did, qe(c.logo, pe, c.version))), /* @__PURE__ */ t(He, { src: S, size: pe, style: { borderRadius: "8px", overflow: "hidden" } });
+    return c.logo && (S = Ie(e, "assets", c.did, qe(c.logo, pe, c.version))), /* @__PURE__ */ t(He, { src: S, size: pe, style: { borderRadius: "8px", overflow: "hidden" } });
   }
-  function H(c = !0) {
-    return /* @__PURE__ */ t(w, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.hint" }, children: c && u && R ? /* @__PURE__ */ t(le, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(te, { sx: { fontSize: 16, cursor: "default" } }) });
+  function U(c = !0) {
+    return /* @__PURE__ */ t(w, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.hint" }, children: c && u && R ? /* @__PURE__ */ t(ie, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(M, { icon: se, style: { fontSize: 16, cursor: "default" } }) });
   }
-  function K() {
-    return u ? /* @__PURE__ */ t(w, { sx: { display: "flex", alignItems: "center", color: "text.hint" }, children: /* @__PURE__ */ t(ke, { sx: { fontSize: 20, cursor: "pointer" }, onClick: () => j() }) }) : null;
+  function X() {
+    return u ? /* @__PURE__ */ t(w, { sx: { display: "flex", alignItems: "center", color: "text.hint" }, children: /* @__PURE__ */ t(
+      M,
+      {
+        icon: Lt,
+        style: { fontSize: 20, cursor: "pointer", color: "inherit" },
+        onClick: () => H()
+      }
+    ) }) : null;
   }
 }
-function fr({ placeholder: e, ...r }) {
+function yr({ placeholder: e, ...r }) {
   const { search: o, t: n } = B(), { filters: l, handleKeyword: a } = o, [s, i] = E(l.keyword || ""), m = De(a, { wait: 300 }), d = (g) => {
-    const { value: x } = g.target;
-    i(x), m.run(x);
+    const { value: y } = g.target;
+    i(y), m.run(y);
   }, f = () => {
     i(""), a("");
   };
-  G(() => {
+  q(() => {
     i(l.keyword || "");
   }, [l.keyword]);
   const u = e || n("common.searchPlaceholder");
   return /* @__PURE__ */ t(
-    gr,
+    xr,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(Ae, { position: "start", children: /* @__PURE__ */ t(yr, { sx: { fontSize: 18, ml: -0.5 } }) }),
+      startAdornment: /* @__PURE__ */ t(Pe, { position: "start", children: /* @__PURE__ */ t(wr, { sx: { fontSize: 18, ml: -0.5 } }) }),
       onChange: d,
       placeholder: u,
       value: s,
       title: u,
       "data-cy": "search",
-      endAdornment: s && /* @__PURE__ */ t(Ae, { position: "end", children: /* @__PURE__ */ t(xr, { "data-cy": "search-delete", onClick: f }) }),
+      endAdornment: s && /* @__PURE__ */ t(Pe, { position: "end", children: /* @__PURE__ */ t(br, { "data-cy": "search-delete", onClick: f }) }),
       ...r
     }
   );
 }
-const gr = Q(Ue)`
+const xr = Q(Ue)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1261,14 +1264,14 @@ const gr = Q(Ue)`
       color: transparent;
     }
   }
-`, yr = Q(te)`
+`, wr = Q(Dt)`
   color: ${(e) => e.theme.palette.grey[500]};
-`, xr = Q(ke)`
+`, br = Q(ze)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function wr() {
+function kr() {
   var b;
   const {
     search: e,
@@ -1282,7 +1285,7 @@ function wr() {
     baseSearch: m,
     categoryOptions: d,
     compact: f
-  } = B(), { filters: u, handleSort: g, handlePrice: x, handleDeveloper: I, handleSwitchShowResources: y, cleanFilter: R, handleCategory: p } = e, C = Ge(r);
+  } = B(), { filters: u, handleSort: g, handlePrice: y, handleDeveloper: I, handleSwitchShowResources: x, cleanFilter: R, handleCategory: p } = e, C = Ge(r);
   return /* @__PURE__ */ h(
     O,
     {
@@ -1312,8 +1315,8 @@ function wr() {
             justifyContent: { xs: "flex-start", md: "flex-end" },
             gap: 2,
             children: [
-              i.showSearch ? /* @__PURE__ */ t(w, { flex: 1, flexBasis: { xs: "100%", md: "auto" }, children: m ? /* @__PURE__ */ t(fr, {}) : /* @__PURE__ */ t(
-                mr,
+              i.showSearch ? /* @__PURE__ */ t(w, { flex: 1, flexBasis: { xs: "100%", md: "auto" }, children: m ? /* @__PURE__ */ t(yr, {}) : /* @__PURE__ */ t(
+                gr,
                 {
                   locale: n,
                   endpoint: o,
@@ -1330,7 +1333,7 @@ function wr() {
                 }
               ) }) : null,
               u.owner && a && /* @__PURE__ */ t(
-                Pe,
+                Te,
                 {
                   label: r("blocklet.authorTag", { name: a }),
                   size: "small",
@@ -1338,7 +1341,7 @@ function wr() {
                 }
               ),
               u.resourceDid && u.resourceBlocklet && /* @__PURE__ */ t(
-                Pe,
+                Te,
                 {
                   label: r("blocklet.resourceTag", { name: u.resourceBlocklet }),
                   size: "small",
@@ -1346,18 +1349,18 @@ function wr() {
                 }
               ),
               s ? /* @__PURE__ */ t(
-                Le,
+                Oe,
                 {
                   checked: u.showResources !== "false",
-                  onChange: (k) => y(k ? "true" : "false"),
+                  onChange: (k) => x(k ? "true" : "false"),
                   label: r("common.showResources")
                 }
               ) : null,
               /* @__PURE__ */ t(
-                Le,
+                Oe,
                 {
                   checked: u.price === "free",
-                  onChange: (k) => x(k ? "free" : ""),
+                  onChange: (k) => y(k ? "free" : ""),
                   label: r("blocklet.free")
                 }
               ),
@@ -1386,7 +1389,7 @@ function wr() {
     }
   );
 }
-function Le({
+function Oe({
   checked: e,
   onChange: r,
   label: o
@@ -1401,8 +1404,8 @@ function Le({
         Ne,
         {
           checked: e,
-          icon: /* @__PURE__ */ t(X, { style: { padding: 0, color: n.palette.text.secondary }, icon: At }),
-          checkedIcon: /* @__PURE__ */ t(X, { style: { padding: 0, color: n.palette.primary.main }, icon: Et }),
+          icon: /* @__PURE__ */ t(M, { style: { padding: 0, color: n.palette.text.secondary }, icon: At }),
+          checkedIcon: /* @__PURE__ */ t(M, { style: { padding: 0, color: n.palette.primary.main }, icon: Et }),
           size: "large",
           sx: { p: 0, mr: 1 },
           onChange: (l) => r(l.target.checked)
@@ -1414,11 +1417,11 @@ function Le({
 }
 function ee({ children: e }) {
   return /* @__PURE__ */ h(w, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.hint", children: [
-    /* @__PURE__ */ t(Ft, {}),
+    /* @__PURE__ */ t(Nt, {}),
     e
   ] });
 }
-function _e() {
+function Le() {
   const { t: e } = B();
   return /* @__PURE__ */ t(v, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
@@ -1453,7 +1456,7 @@ function fe({
     ] })
   ] });
 }
-function br() {
+function vr() {
   const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = B(), { filters: l } = r, a = !!n || !!l.price;
   if (l.keyword && a)
     return /* @__PURE__ */ h(ee, { children: [
@@ -1489,13 +1492,13 @@ function br() {
           primaryEnd: e("blocklet.noCategoryResults2"),
           filter: s
         }
-      ) : /* @__PURE__ */ t(_e, {}),
+      ) : /* @__PURE__ */ t(Le, {}),
       /* @__PURE__ */ t(me, { filterTip: !0 })
     ] });
   }
-  return /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(_e, {}) });
+  return /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(Le, {}) });
 }
-const kr = (e, r, o, n) => dt(
+const Cr = (e, r, o, n) => dt(
   async (l) => {
     l || (o.currentPage = o.defaultCurrentPage);
     const { currentPage: a, pageSize: s } = o, i = {
@@ -1511,25 +1514,25 @@ const kr = (e, r, o, n) => dt(
   },
   {
     isNoMore: (l) => l ? l.page * l.pageSize >= l.total : !1,
-    reloadDeps: [e, Dt(r)],
+    reloadDeps: [e, Wt(r)],
     onError: n
   }
 );
-function vr() {
+function Sr() {
   var u;
   const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: l } = B(), { filters: a } = r, s = ut({
     currentPage: P.currentPage,
-    pageSize: Qt() ? P.mobilePageSize : P.pageSize,
+    pageSize: Zt() ? P.mobilePageSize : P.pageSize,
     defaultCurrentPage: P.defaultCurrentPage
-  }), [i, m] = E(null), d = kr(e, a, s, m), f = V(
+  }), [i, m] = E(null), d = Cr(e, a, s, m), f = G(
     () => {
-      var g, x;
-      return o ? o(((g = d.data) == null ? void 0 : g.list) || []) : ((x = d.data) == null ? void 0 : x.list) || [];
+      var g, y;
+      return o ? o(((g = d.data) == null ? void 0 : g.list) || []) : ((y = d.data) == null ? void 0 : y.list) || [];
     },
     [d.data, o]
   );
-  return G(() => {
-    const g = f.find((x) => x.owner.did === a.owner);
+  return q(() => {
+    const g = f.find((y) => y.owner.did === a.owner);
     l((g == null ? void 0 : g.owner.fullName) || (g == null ? void 0 : g.author.name) || "");
   }, [a.owner, f, l]), {
     blocklets: f,
@@ -1547,27 +1550,39 @@ function vr() {
     }
   };
 }
-function Cr() {
-  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: l, minItemWidth: a, layout: s, baseSearch: i, compact: m } = B(), { filters: d } = r, { blocklets: f, errors: u, loadMore: g, loadings: x, hasNextPage: I, total: y } = vr(), [R] = Pt({
-    loading: x.fetchBlockletsLoading || x.loadingMore,
+function Ir() {
+  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: l, minItemWidth: a, layout: s, baseSearch: i, compact: m } = B(), { filters: d } = r, { blocklets: f, errors: u, loadMore: g, loadings: y, hasNextPage: I, total: x } = Sr(), [R] = Pt({
+    loading: y.fetchBlockletsLoading || y.loadingMore,
     hasNextPage: I,
     onLoadMore: g
   });
   if (u.fetchBlockletsError) {
-    const k = new Error(`Failed to fetch blocklets from ${o}: ${Kt(u.fetchBlockletsError)}`);
+    const k = new Error(`Failed to fetch blocklets from ${o}: ${Qt(u.fetchBlockletsError)}`);
     return /* @__PURE__ */ t(be, { error: k });
   }
   const p = i && s.showSearch || !d.keyword;
-  return /* @__PURE__ */ h(z, { children: [
-    p ? /* @__PURE__ */ t(wr, {}) : /* @__PURE__ */ h(z, { children: [
-      /* @__PURE__ */ t(Se, { xs: /* @__PURE__ */ t(Ze, {}), md: null }),
+  return /* @__PURE__ */ h(F, { children: [
+    p ? /* @__PURE__ */ t(kr, {}) : /* @__PURE__ */ h(F, { children: [
+      /* @__PURE__ */ t(Ce, { xs: /* @__PURE__ */ t(Ze, {}), md: null }),
       b()
     ] }),
     C(),
-    !x.fetchBlockletsLoading && I && /* @__PURE__ */ t(w, { height: 70, minHeight: 70, display: "flex", justifyContent: "center", py: 2, overflow: "hidden", ref: R, children: /* @__PURE__ */ t(le, {}) })
+    !y.fetchBlockletsLoading && I && /* @__PURE__ */ t(
+      w,
+      {
+        height: 70,
+        minHeight: 70,
+        display: "flex",
+        justifyContent: "center",
+        py: 2,
+        overflow: "hidden",
+        ref: R,
+        children: y.loadingMore ? /* @__PURE__ */ t(ie, {}) : null
+      }
+    )
   ] });
   function C() {
-    return x.fetchBlockletsLoading ? /* @__PURE__ */ t(Je, { mt: 15 }) : f.length ? /* @__PURE__ */ t(
+    return y.fetchBlockletsLoading ? /* @__PURE__ */ t(Je, { mt: 15 }) : f.length ? /* @__PURE__ */ t(
       w,
       {
         className: "blocklet-list",
@@ -1593,7 +1608,7 @@ function Cr() {
           k.did
         ))
       }
-    ) : /* @__PURE__ */ t(br, {});
+    ) : /* @__PURE__ */ t(vr, {});
   }
   function b() {
     return /* @__PURE__ */ h(
@@ -1616,14 +1631,14 @@ function Cr() {
               children: e("blocklet.search", { keyword: d.keyword })
             }
           ),
-          /* @__PURE__ */ t(v, { variant: "body1", color: "text.hint", fontSize: 13, children: e("blocklet.resultCount", { count: y }) })
+          /* @__PURE__ */ t(v, { variant: "body1", color: "text.hint", fontSize: 13, children: e("blocklet.resultCount", { count: x }) })
         ]
       }
     );
   }
 }
-function Sr() {
-  const { t: e, selectedCategory: r, getCategoryLocale: o } = B(), { toggleOpen: n } = Ce();
+function Rr() {
+  const { t: e, selectedCategory: r, getCategoryLocale: o } = B(), { toggleOpen: n } = ve();
   return /* @__PURE__ */ h(
     v,
     {
@@ -1634,17 +1649,17 @@ function Sr() {
       py: 2,
       fontWeight: "fontWeightMedium",
       children: [
-        /* @__PURE__ */ t(Ye, { onClick: () => n(!0), children: /* @__PURE__ */ t(Nt, {}) }),
+        /* @__PURE__ */ t(Ye, { onClick: () => n(!0), children: /* @__PURE__ */ t($t, {}) }),
         o(r) || e("common.category")
       ]
     }
   );
 }
-function Ir({ menus: e, children: r }) {
+function Br({ menus: e, children: r }) {
   var d;
-  const { search: o, layout: n, compact: l } = B(), { filters: a } = o, s = re(null), i = a.category || a.keyword || a.price, m = (d = e == null ? void 0 : e.find((f) => f.key === a.menu)) == null ? void 0 : d.key;
-  return /* @__PURE__ */ t(jt, { children: /* @__PURE__ */ h(st, { FallbackComponent: be, children: [
-    !l && /* @__PURE__ */ t(Sr, {}),
+  const { search: o, layout: n, compact: l } = B(), { filters: a } = o, s = te(null), i = a.category || a.keyword || a.price, m = (d = e == null ? void 0 : e.find((f) => f.key === a.menu)) == null ? void 0 : d.key;
+  return /* @__PURE__ */ t(Ut, { children: /* @__PURE__ */ h(st, { FallbackComponent: be, children: [
+    !l && /* @__PURE__ */ t(Rr, {}),
     /* @__PURE__ */ h(
       w,
       {
@@ -1654,7 +1669,7 @@ function Ir({ menus: e, children: r }) {
         className: "list-container",
         pt: { xs: 0, md: l ? 0 : 5 },
         children: [
-          /* @__PURE__ */ t(lr, { menus: e }),
+          /* @__PURE__ */ t(sr, { menus: e }),
           /* @__PURE__ */ h(
             O,
             {
@@ -1669,7 +1684,7 @@ function Ir({ menus: e, children: r }) {
               } : { overflow: "visible" },
               children: [
                 m && (r == null ? void 0 : r(m)),
-                !m && (n.showExplore && !i ? /* @__PURE__ */ t(pr, {}) : /* @__PURE__ */ t(Cr, {}))
+                !m && (n.showExplore && !i ? /* @__PURE__ */ t(fr, {}) : /* @__PURE__ */ t(Ir, {}))
               ]
             }
           )
@@ -1678,8 +1693,8 @@ function Ir({ menus: e, children: r }) {
     )
   ] }) });
 }
-function _o(e) {
-  return /* @__PURE__ */ h(Wt, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
+function Do(e) {
+  return /* @__PURE__ */ h(jt, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
     /* @__PURE__ */ h(ce, { display: "flex", alignItems: "center", gap: 2, pb: 1, children: [
       /* @__PURE__ */ h(ce, { display: "flex", alignItems: "center", gap: 2, flex: 1, children: [
         /* @__PURE__ */ t(L, { variant: "rounded", width: 48, height: 48 }),
@@ -1697,10 +1712,10 @@ function _o(e) {
     ] })
   ] });
 }
-function Mo({ showSkeleton: e, ...r }) {
-  return e ? /* @__PURE__ */ t(_, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t($t, { ...r });
+function No({ showSkeleton: e, ...r }) {
+  return e ? /* @__PURE__ */ t(_, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(Ht, { ...r });
 }
-function zo(e) {
+function Wo(e) {
   const { menus: r, children: o, ...n } = e, l = we(), a = et(
     it({}, l, {
       typography: {
@@ -1729,12 +1744,12 @@ function zo(e) {
       }
     })
   );
-  return /* @__PURE__ */ t(tt, { theme: a, children: /* @__PURE__ */ t(tr, { ...n, children: /* @__PURE__ */ t(Ir, { menus: r, children: o }) }) });
+  return /* @__PURE__ */ t(tt, { theme: a, children: /* @__PURE__ */ t(or, { ...n, children: /* @__PURE__ */ t(Br, { menus: r, children: o }) }) });
 }
 export {
-  mr as Autocomplete,
-  _o as CardSkeleton,
-  Mo as Image,
-  zo as default,
-  Ut as useSearch
+  gr as Autocomplete,
+  Do as CardSkeleton,
+  No as Image,
+  Wo as default,
+  Gt as useSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.16.55",
+  "version": "0.16.57",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@blocklet/js-sdk": "^1.16.44",
-    "@blocklet/util": "0.16.55",
+    "@blocklet/util": "0.16.57",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify-icons/tabler": "^1.2.95",
@@ -91,5 +91,5 @@
     "prettier": "^3.3.2",
     "vite": "^5.4.10"
   },
-  "gitHead": "75838ea763ecc1ddb620ed0a2176a7d9c93cd24e"
+  "gitHead": "87ce608bbfd1cc965d6a98068c5d3c3080f7a6dc"
 }