@blocklet/list 0.14.8 → 0.14.10

package/lib/index.es.js

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as f, Fragment as M } from "react/jsx-runtime";
+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 k from "@mui/material/Box";
-import A from "@mui/material/Stack";
+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 F, useMemo as $, useContext as Pe, useCallback as ae, useEffect as j, forwardRef as Ze, useRef as ce, memo as Je } from "react";
+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";
@@ -38,33 +38,34 @@ 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 "@arcblock/ux/lib/Img";
-import xt from "@iconify-icons/tabler/cloud-download";
-import bt from "@mui/icons-material/ChevronLeft";
+import yt from "@iconify-icons/tabler/cloud-download";
+import xt from "@mui/icons-material/ChevronLeft";
 import wt from "@mui/icons-material/ChevronRight";
-import kt from "react-image-gallery";
+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 be from "@mui/material/Grid";
-import vt from "react-infinite-scroll-hook";
-import Ct from "@mui/material/Chip";
+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 St from "@mui/icons-material/Verified";
-import It from "@mui/material/Autocomplete";
-import Bt from "@mui/material/Dialog";
+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 Rt from "@mui/material/TextField";
-import { useHotkeys as Pt } from "react-hotkeys-hook";
-import we from "@mui/material/InputAdornment";
-import Tt from "@arcblock/ux/lib/Empty";
-import At from "json-stable-stringify";
-import Ft from "@mui/icons-material/Menu";
+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 Lt from "@mui/icons-material/Menu";
 const Me = Re({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function Lt({ children: e }) {
-  const [r, o] = F(!1), n = (s) => {
+function Ot({ 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 });
@@ -86,14 +87,14 @@ const P = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, Ot = (e) => Z(
+}, zt = (e) => Z(
   async () => {
     const { data: r } = await e.get(P.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
 );
-function zt(e, r) {
+function _t(e, r) {
   const o = { sortBy: "popularity", sortDirection: "desc", ...e }, {
     onFilterChange: n,
     onSearchSelect: i = (l) => {
@@ -103,17 +104,17 @@ function zt(e, r) {
   } = r;
   !o.category && !s && (o.category = "All");
   const c = (l) => {
-    const u = { ...o, ...l };
-    n(re(u, (d) => d === "" || d === void 0));
+    const p = { ...o, ...l };
+    n(re(p, (d) => d === "" || d === void 0));
   };
   return {
     filters: e,
     cleanFilter: (l) => {
-      const u = l ? re(o, (d, g) => l.includes(g)) : {};
-      n(re(u, (d) => d === "" || d === void 0));
+      const p = l ? re(o, (d, g) => l.includes(g)) : {};
+      n(re(p, (d) => d === "" || d === void 0));
     },
-    handleSort: (l, u) => {
-      c({ sortBy: l, sortDirection: u || l === "nameAsc" ? "asc" : "desc" });
+    handleSort: (l, p) => {
+      c({ sortBy: l, sortDirection: p || l === "nameAsc" ? "asc" : "desc" });
     },
     handleKeyword: (l) => {
       c({ category: void 0, keyword: l || void 0 });
@@ -138,7 +139,7 @@ function zt(e, r) {
     }
   };
 }
-const _t = (e, r, o) => e && r || !o, Ne = (e) => [
+const Et = (e, r, o) => e && r || !o, Ne = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -158,18 +159,18 @@ const _t = (e, r, o) => e && r || !o, Ne = (e) => [
     return i.imageFilter ? it({ ...n, search: "" }) : e;
   if (i.imageFilter)
     return e;
-  const c = o || ((g = window.blocklet) == null ? void 0 : g.version), { w: l, h: u } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
+  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 || u ? { imageFilter: "resize", w: l, h: u } : {},
+    ...l || p ? { imageFilter: "resize", w: l, h: p } : {},
     v: c
   });
-}, Et = (e) => [
+}, Mt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Mt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Nt = (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, n) => r.hasOwnProperty(n) ? r[n] : "")
-), Dt = () => window.innerWidth <= 600, Wt = {
+), Wt = () => window.innerWidth <= 600, $t = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -218,7 +219,7 @@ const _t = (e, r, o) => e && r || !o, Ne = (e) => [
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, $t = {
+}, jt = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -268,14 +269,14 @@ const _t = (e, r, o) => e && r || !o, Ne = (e) => [
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
 }, oe = {
-  en: xe(Wt),
-  zh: xe($t)
+  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;
-}, jt = (e) => (r, o) => {
+}, Ut = (e) => (r, o) => {
   const n = oe[e] ? oe[e][r] : oe.en[r];
-  return Nt(n, o) || r;
+  return Dt(n, o) || r;
 }, $e = {
   errors: {
     fetchCategoriesError: null
@@ -328,8 +329,8 @@ const _t = (e, r, o) => e && r || !o, Ne = (e) => [
     handlePage: () => {
     }
   }
-}, je = Re($e), { Provider: Ut, Consumer: wo } = je;
-function Vt(e) {
+}, je = Re($e), { Provider: Vt, Consumer: Co } = je;
+function Ht(e) {
   const {
     locale: r = "zh",
     filters: o = {},
@@ -339,35 +340,35 @@ function Vt(e) {
     minItemWidth: s = 350,
     queryFilter: c = !0,
     layout: l = {},
-    wrapChildren: u = (R) => R,
+    wrapChildren: p = (R) => R,
     extraFilter: d = (R) => R,
     baseSearch: g = !1,
     fetchCategoryDelay: h = 0,
-    showResourcesSwitch: p = !1,
-    showCategory: C = !0,
-    tagFilters: S = [],
-    children: I,
-    storeVersion: m,
-    onSearchSelect: y = () => {
+    showResourcesSwitch: m = !1,
+    showCategory: k = !0,
+    tagFilters: C = [],
+    children: S,
+    storeVersion: B,
+    onSearchSelect: u = () => {
     },
-    endpoint: b,
-    blockletRender: w
-  } = e, T = We(n, m), O = $(() => Te({ baseURL: b, headers: T }), [b]), N = zt(o, { onFilterChange: i, emptyCategory: !l.showExplore, onSearchSelect: y }), [z, U] = F(""), {
+    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
-  } = Ot(O), D = $(() => {
-    const R = et(V, [(E) => E.name], ["asc"]), L = R.findIndex((E) => E.name === "All" || E.locales.en === "All");
-    return L > -1 ? [{ ...R[L], _id: "All" }, ...R.slice(0, L), ...R.slice(L + 1)] : R;
-  }, [V]), H = ae(jt(r), [r]), a = $(() => Mt(D, r), [D, r]), v = Et(H), _ = {
-    search: N,
+  } = 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
     },
     extraFilter: d,
-    endpoint: b,
+    endpoint: v,
     queryFilter: c,
     layout: {
       showExplore: l.showExplore ?? !1,
@@ -376,38 +377,38 @@ function Vt(e) {
       showSearch: l.showSearch ?? !0
     },
     minItemWidth: s,
-    wrapChildren: u,
+    wrapChildren: p,
     t: H,
-    storeVersion: m,
+    storeVersion: B,
     serverVersion: n,
-    selectedCategory: N.filters.category || (l.showExplore ? "" : "All"),
+    selectedCategory: O.filters.category || (l.showExplore ? "" : "All"),
     categoryList: D,
-    blockletRender: w,
+    blockletRender: y,
     locale: r,
     categoryOptions: a,
-    priceOptions: v,
-    storeApi: O,
+    priceOptions: b,
+    storeApi: F,
     baseSearch: g,
-    showResourcesSwitch: p,
-    showCategory: C,
-    tagFilters: S,
+    showResourcesSwitch: m,
+    showCategory: k,
+    tagFilters: C,
     onFilterChange: i,
     getCategoryLocale: (R) => {
       if (!R)
         return null;
-      const L = V.find((E) => E._id === R || E.locales.en === "All");
-      return L ? L.locales[r] || L.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 z;
+      return _;
     },
     updateDeveloperName: U
   };
   return j(() => {
     setTimeout(K, h || 0);
-  }, [b, K, h]), /* @__PURE__ */ t(Ut, { value: _, children: I });
+  }, [v, K, h]), /* @__PURE__ */ t(Vt, { value: E, children: S });
 }
-function B() {
+function I() {
   const e = Pe(je);
   return e || $e;
 }
@@ -452,23 +453,23 @@ function fe({
   xl: i,
   exact: s
 }) {
-  const c = st(), l = W(c.breakpoints.down("sm")), u = W(c.breakpoints.between("sm", "md")), d = W(c.breakpoints.between("md", "lg")), g = W(c.breakpoints.between("lg", "xl"));
+  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 : u ? r || null : d ? o || null : g ? n || null : i || null;
+    return l ? e || null : p ? r || null : d ? o || null : g ? n || null : i || null;
   let h = e;
-  return l || (h = X(r, h), u) || (h = X(o, h), d) || (h = X(n, h), g) ? h : X(i, h);
+  return l || (h = X(r, h), p) || (h = X(o, h), d) || (h = X(n, h), g) ? h : X(i, h);
 }
-function Ht({ children: e }) {
+function qt({ children: e }) {
   const { open: r, toggleOpen: o } = me();
   return /* @__PURE__ */ t(
     fe,
     {
       xs: /* @__PURE__ */ t(at, { open: r, onClose: () => o(!1), children: e }),
-      md: /* @__PURE__ */ t(k, { children: e })
+      md: /* @__PURE__ */ t(w, { children: e })
     }
   );
 }
-const qt = Ze(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
+const Gt = Ze(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
   J,
   {
     ref: n,
@@ -480,58 +481,58 @@ const qt = Ze(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
   }
 ));
 function Ve({ value: e, options: r, onChange: o, placeholder: n, ...i }) {
-  var m;
-  const s = ce(null), c = de(), [l, u] = F(!1), [d, g] = F(e !== null ? e : ""), h = W(c.breakpoints.down("sm"));
+  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 p = ae(() => {
-    u(!1);
-  }, []), C = ae(() => {
-    u(!0);
+  const m = ae(() => {
+    p(!1);
+  }, []), k = ae(() => {
+    p(!0);
   }, []);
-  function S(y) {
-    g(y.value), o(y.value), h && p();
+  function C(u) {
+    g(u.value), o(u.value), h && m();
   }
-  function I(y) {
-    return y === d;
+  function S(u) {
+    return u === d;
   }
-  return /* @__PURE__ */ f(M, { children: [
+  return /* @__PURE__ */ f(N, { children: [
     /* @__PURE__ */ f(
-      Gt,
+      Kt,
       {
         ref: s,
-        onClick: C,
+        onClick: k,
         variant: "outlined",
         size: "small",
         className: ["my-select__selector", gt(d) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto", color: "text.primary" },
         ...i,
         children: [
-          ((m = r.find((y) => y.value === d)) == null ? void 0 : m.name) || n,
+          ((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(mt, { open: l, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: y, placement: b }) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(mt, { open: l, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: u, placement: v }) => /* @__PURE__ */ t(
       ht,
       {
-        ...y,
-        style: { transformOrigin: b === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(pt, { children: /* @__PURE__ */ t(ut, { onClickAway: p, children: /* @__PURE__ */ t(Kt, { autoFocusItem: l, onMouseEnter: C, onMouseLeave: p, children: r.map((w) => /* @__PURE__ */ f(Oe, { onClick: () => S(w), children: [
+        ...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: I(w.value) ? "visible" : "hidden" }
+              sx: { mr: 1, fontSize: 16, visibility: S(y.value) ? "visible" : "hidden" }
             }
           ),
-          w.name
-        ] }, w.value)) }) }) })
+          y.name
+        ] }, y.value)) }) }) })
       }
     ) })
   ] });
 }
-const Gt = q(qt)`
+const Kt = q(Gt)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -559,7 +560,7 @@ const Gt = q(qt)`
       margin-right: 3px;
     }
   }
-`, Kt = q(ze)`
+`, Xt = q(ze)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -577,9 +578,9 @@ const Gt = q(qt)`
   }
 `;
 function He() {
-  const { search: e, t: r } = B(), { filters: o, handleSort: n, handlePrice: i } = e, s = Ne(r);
+  const { search: e, t: r } = I(), { filters: o, handleSort: n, handlePrice: i } = e, s = Ne(r);
   return /* @__PURE__ */ f(
-    A,
+    T,
     {
       direction: { xs: "row", md: "column" },
       alignItems: { xs: "center", md: "flex-start" },
@@ -615,18 +616,18 @@ function He() {
     }
   );
 }
-function Xt() {
-  const { selectedCategory: e, search: r, t: o, categoryOptions: n, loadings: i, layout: s, baseSearch: c } = B(), { filters: l, handleCategory: u, cleanFilter: d } = r, { toggleOpen: g } = me();
+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);
   }, [Object.values(l).join("")]);
-  const h = _t(c, s.showSearch, l.keyword);
-  return s.showCategory ? /* @__PURE__ */ f(Ht, { children: [
+  const h = Et(c, s.showSearch, l.keyword);
+  return s.showCategory ? /* @__PURE__ */ f(qt, { children: [
     /* @__PURE__ */ t(
       fe,
       {
         xs: /* @__PURE__ */ f(
-          A,
+          T,
           {
             direction: "row",
             justifyContent: "space-between",
@@ -646,15 +647,15 @@ function Xt() {
       }
     ),
     /* @__PURE__ */ t(
-      A,
+      T,
       {
         visibility: i.fetchCategoriesLoading ? "hidden" : "visible",
         width: { xs: 268, md: 200 },
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: h ? /* @__PURE__ */ f(M, { children: [
-          s.showExplore && /* @__PURE__ */ f(k, { display: "flex", alignItems: "center", gap: 1, mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
+        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,
@@ -670,21 +671,21 @@ function Xt() {
               }
             )
           ] }),
-          !!n.length && /* @__PURE__ */ t(A, { gap: 2, children: n.map((p) => /* @__PURE__ */ t(
+          !!n.length && /* @__PURE__ */ t(T, { gap: 2, children: n.map((m) => /* @__PURE__ */ t(
             x,
             {
               variant: "body1",
-              title: p.name,
+              title: m.name,
               sx: { cursor: "pointer" },
               "data-cy": "filter",
-              color: e === p.value ? "text.primary" : "text.lighter",
+              color: e === m.value ? "text.primary" : "text.lighter",
               textTransform: "capitalize",
               onClick: () => {
-                e === p.value ? d() : u(p.value), g(!1);
+                e === m.value ? d() : p(m.value), g(!1);
               },
-              children: p.name
+              children: m.name
             },
-            p.value
+            m.value
           )) })
         ] }) : /* @__PURE__ */ t(He, {})
       }
@@ -692,7 +693,7 @@ function Xt() {
   ] }) : null;
 }
 function ge() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), n = We(r, o), i = $(() => Te({
+  const { endpoint: e, serverVersion: r, storeVersion: o } = I(), n = We(r, o), i = $(() => Te({
     baseURL: e,
     headers: n
   }), [e]);
@@ -708,15 +709,18 @@ function ge() {
   };
 }
 const qe = Je(function(r) {
-  return /* @__PURE__ */ t(k, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ee, {}) });
+  return /* @__PURE__ */ t(w, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ee, {}) });
 });
+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: n
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ f(A, { 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(
       x,
@@ -731,16 +735,20 @@ function ke({
   ] });
 }
 const ve = 292;
-function Qt() {
-  var S, I;
-  const { t: e, search: r } = B(), { get: o } = ge(), n = de(), i = W(n.breakpoints.down("md")), s = ((I = (S = window.blocklet) == null ? void 0 : S.preferences) == null ? void 0 : I.homeBanner) || [], { data: c = [], error: l } = Z(async () => {
-    const m = await o(
-      pe(P.blockletsPath, { didList: s.map((y) => y.did).join(",") })
+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 m != null && m.dataList ? s.map((y) => m.dataList.find((b) => b.did === y.did)) : [];
+    return u != null && u.dataList ? s.map((v) => u.dataList.find((y) => y.did === v.did)) : [];
   });
   l && console.error("Get Banner Blocklets error:", l);
-  const u = {
+  const d = {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -748,10 +756,10 @@ function Qt() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  return !l && s.length > 0 ? /* @__PURE__ */ f(M, { children: [
+  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(
-      k,
+      w,
       {
         height: { xs: "auto", md: ve },
         position: "relative",
@@ -760,26 +768,26 @@ function Qt() {
         borderRadius: 3,
         overflow: "hidden",
         children: /* @__PURE__ */ t(
-          kt,
+          bt,
           {
             showNav: !0,
             autoPlay: !0,
-            slideDuration: 1e3,
+            slideDuration: i ? 500 : 1e3,
             slideInterval: 5e3,
             showPlayButton: !1,
             showIndex: !1,
             showBullets: !1,
             showThumbnails: !1,
             showFullscreenButton: !1,
-            renderLeftNav: (m) => /* @__PURE__ */ t(k, { onClick: m, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(bt, { sx: { ...u, left: 5 } }) }),
-            renderRightNav: (m) => /* @__PURE__ */ t(k, { onClick: m, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(wt, { sx: { ...u, right: 5 } }) }),
-            items: s.map((m, y) => ({
-              original: m.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 O;
-                const b = c[y] || {}, w = m.cover || Zt(m.did, (O = b.screenshots) == null ? void 0 : O[0]), T = De(w, { h: 400, w: 700 });
+                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(
-                  A,
+                  T,
                   {
                     height: { xs: "auto", md: ve },
                     sx: {
@@ -791,7 +799,7 @@ function Qt() {
                         right: 0,
                         bottom: 0,
                         cursor: "pointer",
-                        backgroundImage: `url("${T}")`,
+                        backgroundImage: `url("${F}")`,
                         backgroundSize: "cover",
                         filter: "blur(50px)",
                         opacity: 0.15,
@@ -803,17 +811,17 @@ function Qt() {
                     justifyContent: "center",
                     alignItems: { xs: "flex-start", md: "center" },
                     p: { xs: 2, md: 5 },
-                    onClick: () => r.handleSearchSelect(b),
+                    onClick: () => r.handleSearchSelect(y),
                     gap: { xs: 2, md: 5 },
                     children: [
-                      d(T),
-                      /* @__PURE__ */ f(A, { flex: 1, height: "100%", gap: 3, children: [
-                        /* @__PURE__ */ f(k, { flex: 1, children: [
-                          g(m.name || b.title || m.name),
-                          h(m.desc || b.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)
                         ] }),
-                        b.did && p(b, m.baseNum),
-                        C(b)
+                        y.did && k(y, u.baseNum),
+                        C(y)
                       ] })
                     ]
                   }
@@ -825,13 +833,23 @@ function Qt() {
       }
     )
   ] }) : null;
-  function d(m) {
-    return /* @__PURE__ */ t(k, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(yt, { src: m, alt: "", width: i ? 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(m) {
-    return /* @__PURE__ */ t(x, { variant: "h2", width: "100%", children: m });
+  function h(u) {
+    return /* @__PURE__ */ t(x, { variant: "h2", width: "100%", children: u });
   }
-  function h(m) {
+  function m(u) {
     return /* @__PURE__ */ t(
       x,
       {
@@ -851,24 +869,24 @@ function Qt() {
           overflow: "hidden",
           WebkitBoxOrient: "vertical"
         },
-        children: m
+        children: u
       }
     );
   }
-  function p(m, y = 0) {
-    const { did: b, owner: w, stats: T } = m;
-    return /* @__PURE__ */ f(k, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
-      /* @__PURE__ */ t(ke, { icon: /* @__PURE__ */ t(_e, { src: w.avatar, did: b, size: 20, variant: "circle" }), children: w.fullName }),
-      /* @__PURE__ */ t(ke, { icon: /* @__PURE__ */ t(Be, { icon: xt }), title: `${T.downloads + y}`, children: Yt(T.downloads + y) })
+  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(m) {
+  function C(u) {
     return /* @__PURE__ */ t(
       J,
       {
         variant: "outlined",
         size: "small",
-        onClick: () => r.handleSearchSelect(m),
+        onClick: () => r.handleSearchSelect(u),
         sx: {
           width: "fit-content",
           textTransform: "none",
@@ -882,16 +900,16 @@ function Qt() {
     );
   }
 }
-const Yt = (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`, Zt = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function Jt({ title: e, blocklets: r }) {
-  const { blockletRender: o, serverVersion: n } = B();
-  return /* @__PURE__ */ f(k, { mt: 3, children: [
+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(be, { container: !0, spacing: 2, children: r.map((i) => /* @__PURE__ */ t(be, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": i.did, children: /* @__PURE__ */ t(k, { padding: "1px", children: o({ blocklet: i, blocklets: r, serverVersion: n }) }) }, i.did)) })
+    /* @__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 er() {
-  const { get: e } = ge(), { t: r } = B(), {
+function rr() {
+  const { get: e } = ge(), { t: r } = I(), {
     data: o = [],
     error: n,
     loading: i
@@ -899,15 +917,15 @@ function er() {
     const s = await e(P.explorePath);
     return Array.isArray(s) ? s : [];
   });
-  return n ? /* @__PURE__ */ t(ue, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : i ? /* @__PURE__ */ t(qe, { mt: 15 }) : /* @__PURE__ */ f(M, { children: [
-    /* @__PURE__ */ t(Qt, {}),
+  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(
-      (s) => s.blocklets.length > 0 ? /* @__PURE__ */ t(Jt, { title: r(`explore.${s.type}`), blocklets: s.blocklets }, s.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 tr({
+function or({
   endpoint: e,
   t: r,
   locale: o,
@@ -916,12 +934,12 @@ function tr({
   handleSearchSelect: s,
   ...c
 }) {
-  const l = ce(null), u = ce(!1), [d, g] = F(!1), [h, p] = F(""), [C, S] = F(!1), I = ge(), [m, y] = F(!1), b = async (a) => {
-    y(!0);
-    const v = await I.get(ye(e, pe(P.blockletsPath, a)));
-    return y(!1), v.dataList || [];
-  }, { data: w, run: T } = Z(
-    (a) => a ? b({
+  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,
@@ -932,20 +950,20 @@ function tr({
     }
   );
   j(() => {
-    y(!0), T(n.keyword), p(n.keyword || "");
-  }, [n.keyword, T]), Pt(
+    u(!0), A(n.keyword), m(n.keyword || "");
+  }, [n.keyword, A]), Tt(
     "ctrl + k, command + k",
     (a) => {
-      var v, _;
-      return a.stopPropagation(), a.preventDefault(), (_ = (v = l.current) == null ? void 0 : v.querySelector("input")) == null || _.focus(), !1;
+      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 O = Ae((a) => T(a), { wait: 300 }), N = { name: ne, title: h, did: "" };
-  let z = [];
-  return h && (m ? z = [N] : w != null && w.length ? z = [N, ...w] : z = [{ name: Ce, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ f(M, { children: [
-    /* @__PURE__ */ f(Bt, { fullScreen: !0, open: C, sx: { display: { md: "none" } }, children: [
-      /* @__PURE__ */ f(k, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
+  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,
           {
@@ -969,7 +987,7 @@ function tr({
             className: "bl-autocomplete-input",
             value: h,
             onChange: (a) => U(a.target.value),
-            startAdornment: D(C),
+            startAdornment: D(k),
             endAdornment: H()
           }
         ),
@@ -978,35 +996,35 @@ function tr({
           {
             variant: "outlined",
             onClick: () => {
-              S(!1), p(n.keyword || "");
+              C(!1), m(n.keyword || "");
             },
             children: r("common.cancel")
           }
         )
       ] }),
-      /* @__PURE__ */ t(ze, { sx: { p: 0.5 }, children: z.map((a) => G(a)) })
+      /* @__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: () => S(!0)
+        onClick: () => C(!0)
       }
     ),
     /* @__PURE__ */ t(
-      It,
+      Bt,
       {
         ref: l,
         open: !!h && d,
         size: "small",
         onOpen: () => g(!0),
-        onClose: (a, v) => {
-          g(!1), v === "selectOption" && !u.current && i(h);
+        onClose: (a, b) => {
+          g(!1), b === "selectOption" && !p.current && i(h);
         },
         disableClearable: !0,
         inputValue: h,
-        onInputChange: (a, v) => U(v),
-        isOptionEqualToValue: (a, v) => a.name === v.name,
+        onInputChange: (a, b) => U(b),
+        isOptionEqualToValue: (a, b) => a.name === b.name,
         getOptionLabel: (a) => a.title,
         getOptionKey: (a) => a.name,
         noOptionsText: r("blocklet.noResults"),
@@ -1023,7 +1041,7 @@ function tr({
           }
         },
         renderInput: (a) => /* @__PURE__ */ t(
-          Rt,
+          Pt,
           {
             ...a,
             InputProps: {
@@ -1039,9 +1057,9 @@ function tr({
         ),
         filterOptions: (a) => a,
         ...c,
-        options: z,
-        renderOption: (a, v) => G(v),
-        value: N,
+        options: _,
+        renderOption: (a, b) => G(b),
+        value: O,
         sx: [
           {
             bgcolor: "#F9FAFB",
@@ -1062,16 +1080,16 @@ function tr({
     )
   ] });
   function U(a) {
-    y(!0), p(a), u.current = !1, O.run(a);
+    u(!0), m(a), p.current = !1, F.run(a);
   }
   function V() {
-    S(!1), p(""), U(""), i("");
+    C(!1), m(""), U(""), i("");
   }
   function te(a) {
-    a != null && a.did ? (S(!1), u.current = !0, p(""), s(a)) : a.name === ne && (S(!1), i(h));
+    a != null && a.did ? (C(!1), p.current = !0, m(""), s(a)) : a.name === ne && (C(!1), i(h));
   }
   function G(a) {
-    var v, _;
+    var b, E;
     return /* @__PURE__ */ f(
       Oe,
       {
@@ -1083,9 +1101,9 @@ function tr({
             /* @__PURE__ */ f(x, { fontWeight: "fontWeightMedium", display: "flex", alignItems: "center", gap: 1, children: [
               a.title,
               " ",
-              /* @__PURE__ */ t(St, { sx: { color: "#D97706", fontSize: 16, display: "none" } })
+              /* @__PURE__ */ t(It, { sx: { color: "#D97706", fontSize: 16, display: "none" } })
             ] }),
-            /* @__PURE__ */ t(x, { sx: { color: "text.lighter" }, fontSize: "13px", children: ((_ = (v = a.category) == null ? void 0 : v.locales) == null ? void 0 : _[o || "en"]) || "" })
+            /* @__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"]) || "" })
           ] })
         ]
       },
@@ -1095,7 +1113,7 @@ function tr({
   function K(a) {
     if ([ne, Ce].includes(a.name))
       return /* @__PURE__ */ t(
-        k,
+        w,
         {
           width: le,
           p: "6px",
@@ -1108,18 +1126,18 @@ function tr({
           children: /* @__PURE__ */ t(Y, { sx: { fontSize: 28 } })
         }
       );
-    let v = "";
-    return a.logo && (v = ye(e, "assets", a.did, De(a.logo, le, a.version))), /* @__PURE__ */ t(_e, { src: v, size: le, style: { borderRadius: "8px", overflow: "hidden" } });
+    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(k, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: a && h && m ? /* @__PURE__ */ t(ee, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(Y, { sx: { fontSize: 16, cursor: "default" } }) });
+    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(k, { sx: { display: "flex", alignItems: "center", color: "text.lighter" }, children: /* @__PURE__ */ t(he, { sx: { fontSize: 20, cursor: "pointer" }, onClick: () => V() }) }) : null;
+    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 rr({ placeholder: e = "Type to search...", ...r }) {
-  const { search: o } = B(), { filters: n, handleKeyword: i } = o, [s, c] = F(n.keyword || ""), l = Ae(i, { wait: 300 }), u = (g) => {
+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 = () => {
@@ -1128,23 +1146,23 @@ function rr({ placeholder: e = "Type to search...", ...r }) {
   return j(() => {
     c(n.keyword || "");
   }, [n.keyword]), /* @__PURE__ */ t(
-    or,
+    lr,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(we, { position: "start", children: /* @__PURE__ */ t(nr, {}) }),
-      onChange: u,
+      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(we, { position: "end", children: /* @__PURE__ */ t(lr, { "data-cy": "search-delete", onClick: d }) }),
+      endAdornment: s && /* @__PURE__ */ t(be, { position: "end", children: /* @__PURE__ */ t(sr, { "data-cy": "search-delete", onClick: d }) }),
       ...r
     }
   );
 }
-const or = q(Ee)`
+const lr = q(Ee)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1161,21 +1179,21 @@ const or = q(Ee)`
       color: transparent;
     }
   }
-`, nr = q(Y)`
+`, 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;
   }
-`, lr = q(he)`
+`, sr = q(he)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function ir() {
-  const { search: e, t: r, endpoint: o, locale: n, getCategoryLocale: i, developerName: s, showResourcesSwitch: c, layout: l, baseSearch: u } = B(), { filters: d, handleSort: g, handlePrice: h, handleDeveloper: p, handleSwitchShowResources: C } = e, S = Ne(r);
+function ar() {
+  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(
-    A,
+    T,
     {
       className: "filter-bar",
       direction: { xs: "column", md: "row" },
@@ -1189,7 +1207,7 @@ function ir() {
       children: [
         /* @__PURE__ */ t(x, { variant: "h2", textTransform: "capitalize", children: i(d.category) }),
         /* @__PURE__ */ f(
-          A,
+          T,
           {
             flex: 1,
             direction: "row",
@@ -1198,8 +1216,8 @@ function ir() {
             justifyContent: { xs: "space-between", md: "flex-end" },
             gap: 2,
             children: [
-              l.showSearch ? /* @__PURE__ */ t(k, { flex: 1, children: u ? /* @__PURE__ */ t(rr, {}) : /* @__PURE__ */ t(
-                tr,
+              l.showSearch ? /* @__PURE__ */ t(w, { flex: 1, children: p ? /* @__PURE__ */ t(nr, {}) : /* @__PURE__ */ t(
+                or,
                 {
                   locale: n,
                   endpoint: o,
@@ -1215,12 +1233,12 @@ function ir() {
                   handleSearchSelect: e.handleSearchSelect
                 }
               ) }) : null,
-              d.owner && s && /* @__PURE__ */ t(Ct, { label: s, size: "small", onDelete: () => p("") }),
+              d.owner && s && /* @__PURE__ */ t(St, { label: s, size: "small", onDelete: () => m("") }),
               c ? /* @__PURE__ */ t(
                 Se,
                 {
                   checked: d.showResources === "true",
-                  onChange: (I) => C(I ? "true" : ""),
+                  onChange: (S) => k(S ? "true" : ""),
                   label: r("common.showResources")
                 }
               ) : null,
@@ -1228,17 +1246,17 @@ function ir() {
                 Se,
                 {
                   checked: d.price === "free",
-                  onChange: (I) => h(I ? "free" : ""),
+                  onChange: (S) => h(S ? "free" : ""),
                   label: r("blocklet.free")
                 }
               ),
               /* @__PURE__ */ t(
                 Ve,
                 {
-                  value: d.sortBy || S[0].value,
-                  options: S,
+                  value: d.sortBy || C[0].value,
+                  options: C,
                   placeholder: r("sort.sort"),
-                  onChange: (I) => g(I)
+                  onChange: (S) => g(S)
                 }
               )
             ]
@@ -1271,18 +1289,18 @@ function Se({
   );
 }
 function Q({ children: e }) {
-  return /* @__PURE__ */ f(k, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.lighter", children: [
-    /* @__PURE__ */ t(Tt, {}),
+  return /* @__PURE__ */ f(w, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.lighter", children: [
+    /* @__PURE__ */ t(At, {}),
     e
   ] });
 }
 function Ie() {
-  const { t: e } = B();
+  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 } = B(), i = () => n === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ f(k, { mt: 1, display: "flex", children: [
+  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(),
@@ -1303,8 +1321,8 @@ function se({
     ] })
   ] });
 }
-function sr() {
-  const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = B(), { filters: i } = r, s = !!n || !!i.price;
+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(
@@ -1345,7 +1363,7 @@ function sr() {
   }
   return /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(Ie, {}) });
 }
-const ar = (e, r, o, n) => tt(
+const dr = (e, r, o, n) => tt(
   async (i) => {
     i || (o.currentPage = o.defaultCurrentPage);
     const { currentPage: s, pageSize: c } = o, l = {
@@ -1356,31 +1374,31 @@ const ar = (e, r, o, n) => tt(
       pageSize: c
     };
     n(null);
-    const { data: u = {} } = await e.get(P.blockletsPath, { params: l });
-    return o.currentPage++, { page: s, pageSize: c, list: (u == null ? void 0 : u.dataList) || [], total: (u == null ? void 0 : u.total) || 0 };
+    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: (i) => i ? i.page * i.pageSize >= i.total : !1,
-    reloadDeps: [e, At(r)],
+    reloadDeps: [e, Ft(r)],
     onError: n
   }
 );
-function cr() {
+function ur() {
   var h;
-  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: i } = B(), { filters: s } = r, c = rt({
+  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: i } = I(), { filters: s } = r, c = rt({
     currentPage: P.currentPage,
-    pageSize: Dt() ? P.mobilePageSize : P.pageSize,
+    pageSize: Wt() ? P.mobilePageSize : P.pageSize,
     defaultCurrentPage: P.defaultCurrentPage
-  }), [l, u] = F(null), d = ar(e, s, c, u), g = $(
+  }), [l, p] = L(null), d = dr(e, s, c, p), g = $(
     () => {
-      var p, C;
-      return o ? o(((p = d.data) == null ? void 0 : p.list) || []) : ((C = d.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) || [];
     },
     [d.data, o]
   );
   return j(() => {
-    const p = g.find((C) => C.owner.did === s.owner);
-    i((p == null ? void 0 : p.owner.fullName) || (p == null ? void 0 : p.author.name) || "");
+    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: l,
@@ -1397,41 +1415,41 @@ function cr() {
     }
   };
 }
-function dr() {
-  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: i, minItemWidth: s, layout: c, baseSearch: l } = B(), { filters: u } = r, { blocklets: d, errors: g, loadMore: h, loadings: p, hasNextPage: C, total: S } = cr(), [I] = vt({
-    loading: p.fetchBlockletsLoading || p.loadingMore,
-    hasNextPage: C,
+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: k,
     onLoadMore: h
   });
   if (g.fetchBlockletsError) {
-    const w = new Error(`Failed to fetch blocklets from ${o}: ${g.fetchBlockletsError.message}`);
-    return /* @__PURE__ */ t(ue, { error: w });
+    const y = new Error(`Failed to fetch blocklets from ${o}: ${g.fetchBlockletsError.message}`);
+    return /* @__PURE__ */ t(ue, { error: y });
   }
-  const m = l && c.showSearch || !u.keyword;
-  return /* @__PURE__ */ f(M, { children: [
-    m ? /* @__PURE__ */ t(ir, {}) : /* @__PURE__ */ f(M, { children: [
+  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 }),
-      b()
+      v()
     ] }),
-    y(),
-    !p.fetchBlockletsLoading && C && /* @__PURE__ */ t(k, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: I, children: /* @__PURE__ */ t(ee, {}) })
+    u(),
+    !m.fetchBlockletsLoading && k && /* @__PURE__ */ t(w, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: S, children: /* @__PURE__ */ t(ee, {}) })
   ] });
-  function y() {
-    return p.fetchBlockletsLoading ? /* @__PURE__ */ t(qe, { mt: 15 }) : d.length ? /* @__PURE__ */ t(
-      k,
+  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((w) => /* @__PURE__ */ t(k, { "data-blocklet-did": w.did, sx: { minWidth: s }, children: n({ blocklet: w, blocklets: d, serverVersion: i }) }, w.did))
+        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(sr, {});
+    ) : /* @__PURE__ */ t(cr, {});
   }
-  function b() {
+  function v() {
     return /* @__PURE__ */ f(
-      A,
+      T,
       {
         direction: "row",
         className: "search-result-title",
@@ -1440,15 +1458,15 @@ function dr() {
         mb: 2,
         mt: { xs: 2, md: 0 },
         children: [
-          /* @__PURE__ */ t(x, { variant: "h3", children: e("blocklet.search", { keyword: u.keyword }) }),
-          /* @__PURE__ */ t(x, { variant: "body1", color: "text.lighter", fontSize: 13, children: e("blocklet.resultCount", { count: S }) })
+          /* @__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, selectedCategory: r, getCategoryLocale: o } = B(), { toggleOpen: n } = me();
+function pr() {
+  const { t: e, selectedCategory: r, getCategoryLocale: o } = I(), { toggleOpen: n } = me();
   return /* @__PURE__ */ f(
     x,
     {
@@ -1459,23 +1477,23 @@ function ur() {
       py: 2,
       fontWeight: "fontWeightMedium",
       children: [
-        /* @__PURE__ */ t(Ue, { onClick: () => n(!0), children: /* @__PURE__ */ t(Ft, {}) }),
+        /* @__PURE__ */ t(Ue, { onClick: () => n(!0), children: /* @__PURE__ */ t(Lt, {}) }),
         o(r) || e("common.category")
       ]
     }
   );
 }
-function hr() {
-  const { search: e, layout: r } = B(), { filters: o } = e, n = o.category || o.keyword || o.price;
-  return /* @__PURE__ */ t(Lt, { children: /* @__PURE__ */ f(Qe, { FallbackComponent: ue, children: [
-    /* @__PURE__ */ t(ur, {}),
-    /* @__PURE__ */ f(k, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
-      /* @__PURE__ */ t(Xt, {}),
-      /* @__PURE__ */ t(A, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: r.showExplore && !n ? /* @__PURE__ */ t(er, {}) : /* @__PURE__ */ t(dr, {}) })
+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 ko(e) {
+function So(e) {
   const r = de(), o = Ge(
     Xe({
       ...r,
@@ -1505,10 +1523,11 @@ function ko(e) {
       }
     })
   );
-  return /* @__PURE__ */ t(Ke, { theme: o, children: /* @__PURE__ */ t(Vt, { ...e, children: /* @__PURE__ */ t(hr, {}) }) });
+  return /* @__PURE__ */ t(Ke, { theme: o, children: /* @__PURE__ */ t(Ht, { ...e, children: /* @__PURE__ */ t(mr, {}) }) });
 }
 export {
-  tr as Autocomplete,
-  ko as default,
-  zt as useSearch
+  or as Autocomplete,
+  Yt as Image,
+  So as default,
+  _t as useSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.14.8",
+  "version": "0.14.10",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@blocklet/js-sdk": "^1.16.32",
-    "@blocklet/util": "0.14.8",
+    "@blocklet/util": "0.14.10",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify-icons/tabler": "^1.2.95",
@@ -90,5 +90,5 @@
     "prettier": "^3.3.2",
     "vite": "^5.2.12"
   },
-  "gitHead": "98158d034972b4f73f97c059948cce665fb78f87"
+  "gitHead": "95adeb5cdcdcc3c16d048913a3d3740caa22adbb"
 }