@salla.sa/twilight-theme-engine 1.0.49 → 1.0.51

package/dist/routes/account.js

@@ -1,10 +1,10 @@
 import { wallet } from '../chunk-PZL3JWM2.js';
-export { OrderSingle, OrderSinglePage, Orders, OrdersPage, orderSingleLoader, ordersLoader } from '../chunk-L3CR2OAD.js';
+export { OrderSingle, OrderSinglePage, Orders, OrdersPage, orderSingleLoader, ordersLoader } from '../chunk-JLUH5PUI.js';
 import '../chunk-OKP6LUT7.js';
 import { notification } from '../chunk-MENDTTOA.js';
-import { wishlist } from '../chunk-VSBG4G2C.js';
+import { wishlist } from '../chunk-TEOX2GUU.js';
 import { buildHreflangAlternates } from '../chunk-TZ3E5BN4.js';
-import '../chunk-CBNUZ7LI.js';
+import '../chunk-UYK4CSL3.js';
 import { unauthorized, orUnauthorized } from '../chunk-JK77XRXR.js';
 import { RouteId } from '../chunk-MTONGOJD.js';
 import '../chunk-O6XXHXC4.js';
@@ -30,7 +30,7 @@ async function profileLoader(_ctx) {
 
 // src/routes/account/profile/index.tsx
 var LazyProfilePage = lazy(
-  () => import('../ProfilePage-JKAR5TWA.js').then((m) => ({ default: m.ProfilePage }))
+  () => import('../ProfilePage-MVRNUM3D.js').then((m) => ({ default: m.ProfilePage }))
 );
 var ProfilePage = LazyProfilePage;
 var Profile = {
@@ -71,7 +71,7 @@ async function wishlistLoader(ctx) {
 
 // src/routes/account/wishlist/index.tsx
 var LazyWishlistPage = lazy(
-  () => import('../WishlistPage-THOWE6KB.js').then((m) => ({ default: m.WishlistPage }))
+  () => import('../WishlistPage-2VFKXDCV.js').then((m) => ({ default: m.WishlistPage }))
 );
 var WishlistPage = LazyWishlistPage;
 var Wishlist = {
@@ -112,7 +112,7 @@ async function walletLoader(ctx) {
 }
 
 // src/routes/account/wallet/index.tsx
-var LazyWalletPage = lazy(() => import('../WalletPage-CO4F3XWH.js').then((m) => ({ default: m.WalletPage })));
+var LazyWalletPage = lazy(() => import('../WalletPage-C3B2N57Q.js').then((m) => ({ default: m.WalletPage })));
 var WalletPage = LazyWalletPage;
 var Wallet = {
   id: RouteId.CUSTOMER_WALLET,
@@ -147,7 +147,7 @@ async function notificationsLoader(_ctx) {
 
 // src/routes/account/notifications/index.tsx
 var LazyNotificationsPage = lazy(
-  () => import('../NotificationsPage-PL3HYLDH.js').then((m) => ({ default: m.NotificationsPage }))
+  () => import('../NotificationsPage-ZFNG6MA7.js').then((m) => ({ default: m.NotificationsPage }))
 );
 var NotificationsPage = LazyNotificationsPage;
 var Notifications = {
@@ -179,7 +179,7 @@ async function settingsLoader(_ctx) {
 
 // src/routes/account/settings/index.tsx
 var LazySettingsPage = lazy(
-  () => import('../SettingsPage-UDWYTMHZ.js').then((m) => ({ default: m.SettingsPage }))
+  () => import('../SettingsPage-VYEI2SBG.js').then((m) => ({ default: m.SettingsPage }))
 );
 var SettingsPage = LazySettingsPage;
 var Settings = {

package/dist/routes/blog.js

@@ -134,18 +134,18 @@ async function blogTagLoader({
 }
 
 // src/routes/blog/index.tsx
-var LazyBlogPage = lazy(() => import('../BlogPage-7C6IWCBB.js').then((m) => ({ default: m.BlogPage })));
+var LazyBlogPage = lazy(() => import('../BlogPage-XCVB34G4.js').then((m) => ({ default: m.BlogPage })));
 var LazyBlogSinglePage = lazy(
-  () => import('../BlogSinglePage-JD73WQ4N.js').then((m) => ({ default: m.BlogSinglePage }))
+  () => import('../BlogSinglePage-HYIMMTTJ.js').then((m) => ({ default: m.BlogSinglePage }))
 );
 var LazyBlogAuthorPage = lazy(
-  () => import('../BlogAuthorPage-FJQ76FYU.js').then((m) => ({ default: m.BlogAuthorPage }))
+  () => import('../BlogAuthorPage-T5F77W5X.js').then((m) => ({ default: m.BlogAuthorPage }))
 );
 var LazyBlogCategoryPage = lazy(
-  () => import('../BlogCategoryPage-G3NUPFQG.js').then((m) => ({ default: m.BlogCategoryPage }))
+  () => import('../BlogCategoryPage-MRLME3PG.js').then((m) => ({ default: m.BlogCategoryPage }))
 );
 var LazyBlogTagPage = lazy(
-  () => import('../BlogTagPage-R5NF3YLM.js').then((m) => ({ default: m.BlogTagPage }))
+  () => import('../BlogTagPage-DLXTXS6O.js').then((m) => ({ default: m.BlogTagPage }))
 );
 var BlogPage = LazyBlogPage;
 var BlogSinglePage = LazyBlogSinglePage;

package/dist/routes/brands.js

@@ -34,7 +34,7 @@ async function brandsLoader() {
 }
 
 // src/routes/brands/index.tsx
-var LazyBrandsPage = lazy(() => import('../BrandsPage-6HOFLIDG.js').then((m) => ({ default: m.BrandsPage })));
+var LazyBrandsPage = lazy(() => import('../BrandsPage-A7IAQCUS.js').then((m) => ({ default: m.BrandsPage })));
 var BrandsPage = LazyBrandsPage;
 async function brandsLoaderWithExtend(_ctx, extend) {
   const data = await brandsLoader();

package/dist/routes/cart.js

@@ -1,16 +1,16 @@
 import { cart } from '../chunk-GXNQX4Z2.js';
 import { loyalty } from '../chunk-EMKO3C2V.js';
 import { CartSkeleton } from '../chunk-N7CCSGZF.js';
-import '../chunk-YZPS7GOM.js';
+import '../chunk-XC7AJ6I7.js';
 import '../chunk-P4DUWQU4.js';
 import { buildHreflangAlternates } from '../chunk-TZ3E5BN4.js';
-import '../chunk-HGNZIUZK.js';
-import '../chunk-CBNUZ7LI.js';
-import { LazySeoCartWidget, LazyCartItem, LazyCartSummary } from '../chunk-IBU4RNK5.js';
-import '../chunk-C7RST4KQ.js';
+import '../chunk-2OED73EU.js';
+import '../chunk-UYK4CSL3.js';
+import { LazySeoCartWidget, LazyCartItem, LazyCartSummary } from '../chunk-P37WZQ5P.js';
+import '../chunk-MDF2WJVW.js';
 import '../chunk-342EPVXN.js';
-import '../chunk-44G4RAUR.js';
-import '../chunk-OWNULELS.js';
+import '../chunk-PCDZ6WM2.js';
+import '../chunk-VQYTHUI3.js';
 import '../chunk-JKIRRMBU.js';
 import '../chunk-2JV6WZ6O.js';
 import '../chunk-6IATCGID.js';
@@ -41,7 +41,7 @@ import '../chunk-YMVLYYLU.js';
 import '../chunk-RJPPO3ET.js';
 import { HookSlot } from '../chunk-Q7VWURUR.js';
 import '../chunk-GU2KUQVD.js';
-import { LazyBreadcrumb, LazyNoContent } from '../chunk-QFJPYDY5.js';
+import { LazyBreadcrumb, LazyNoContent } from '../chunk-UZL4U74W.js';
 import '../chunk-AXW67SY7.js';
 import '../chunk-BYMOPN2S.js';
 import '../chunk-SKLEJJ6M.js';

package/dist/routes/home.js

@@ -1,12 +1,12 @@
-export { Home, HomeSkeleton, homeLoader } from '../chunk-YZPS7GOM.js';
+export { Home, HomeSkeleton, homeLoader } from '../chunk-XC7AJ6I7.js';
 import '../chunk-P4DUWQU4.js';
 import '../chunk-TZ3E5BN4.js';
-export { DefaultHomeComponents, registerHomeComponentConfig, registerHomeComponents } from '../chunk-HGNZIUZK.js';
-import '../chunk-CBNUZ7LI.js';
-import '../chunk-C7RST4KQ.js';
+export { DefaultHomeComponents, registerHomeComponentConfig, registerHomeComponents } from '../chunk-2OED73EU.js';
+import '../chunk-UYK4CSL3.js';
+import '../chunk-MDF2WJVW.js';
 import '../chunk-342EPVXN.js';
-import '../chunk-44G4RAUR.js';
-import '../chunk-OWNULELS.js';
+import '../chunk-PCDZ6WM2.js';
+import '../chunk-VQYTHUI3.js';
 import '../chunk-JKIRRMBU.js';
 import '../chunk-2JV6WZ6O.js';
 import '../chunk-6IATCGID.js';
@@ -37,7 +37,7 @@ import '../chunk-YMVLYYLU.js';
 import '../chunk-RJPPO3ET.js';
 import '../chunk-Q7VWURUR.js';
 import '../chunk-GU2KUQVD.js';
-import '../chunk-QFJPYDY5.js';
+import '../chunk-UZL4U74W.js';
 import '../chunk-AXW67SY7.js';
 import '../chunk-BYMOPN2S.js';
 import '../chunk-SKLEJJ6M.js';

package/dist/routes/loyalty.js

@@ -19,7 +19,7 @@ async function loyaltyLoader() {
 
 // src/routes/loyalty/index.tsx
 var LazyLoyaltyPage = lazy(
-  () => import('../LoyaltyPage-G3BDWISN.js').then((m) => ({ default: m.LoyaltyPage }))
+  () => import('../LoyaltyPage-XETIRHVI.js').then((m) => ({ default: m.LoyaltyPage }))
 );
 var LoyaltyPage = LazyLoyaltyPage;
 async function loader(_ctx, extend) {

package/dist/routes/not-found.d.ts

@@ -11,5 +11,5 @@ export interface NotFoundPageProps {
         children: ReactNode;
     }>;
 }
-export declare function NotFoundPage(props?: NotFoundPageProps): import("react").JSX.Element;
+export declare function NotFoundPage(props?: NotFoundPageProps): import("react").JSX.Element | null;
 //# sourceMappingURL=not-found.d.ts.map

package/dist/routes/not-found.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"not-found.d.ts","sourceRoot":"","sources":["../../src/routes/not-found.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;QAC5B,EAAE,EAAE,MAAM,CAAC;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC,CAAC;CACJ;AAED,wBAAgB,YAAY,CAAC,KAAK,GAAE,iBAAsB,+BA0BzD"}
+{"version":3,"file":"not-found.d.ts","sourceRoot":"","sources":["../../src/routes/not-found.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;QAC5B,EAAE,EAAE,MAAM,CAAC;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC,CAAC;CACJ;AAED,wBAAgB,YAAY,CAAC,KAAK,GAAE,iBAAsB,sCA8BzD"}

package/dist/routes/page.js

@@ -28,7 +28,7 @@ async function pageSingleLoader({ params }) {
 }
 
 // src/routes/page/index.tsx
-var LazyPageSingle = lazy(() => import('../PageSingle-HYNH3QYU.js').then((m) => ({ default: m.PageSingle })));
+var LazyPageSingle = lazy(() => import('../PageSingle-UB5YESMY.js').then((m) => ({ default: m.PageSingle })));
 var PageSingleLazy = LazyPageSingle;
 async function loader(ctx, extend) {
   const data = await pageSingleLoader({ params: ctx.params });

package/dist/routes/product-listing/ProductListPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductListPage.d.ts","sourceRoot":"","sources":["../../../src/routes/product-listing/ProductListPage.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAOrD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,GACR,EAAE,qBAAqB,+BAwOvB"}
+{"version":3,"file":"ProductListPage.d.ts","sourceRoot":"","sources":["../../../src/routes/product-listing/ProductListPage.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAOrD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,GACR,EAAE,qBAAqB,+BA2RvB"}

package/dist/routes/product-listing/useAppliedFilters.d.ts

@@ -0,0 +1,43 @@
+import type { ProductListFilters } from '../../api/product';
+import type { Product } from '../../types';
+import type { ProductListLoaderData } from './types';
+type Source = ProductListLoaderData['source'];
+/**
+ * Reads the `filters[...]` selection `<salla-filters>` writes to the address bar
+ * (`filters[k]=v`, `filters[k][]=v`, `filters[k][sub]=v`) back into an object, so a
+ * filtered link can be opened directly.
+ *
+ * The keys come straight from the URL, so nodes are null-prototype objects and any
+ * `__proto__` / `constructor` / `prototype` segment drops the whole entry — a crafted
+ * `?filters[__proto__][x]=1` must never reach `Object.prototype`.
+ */
+export declare function parseFiltersFromSearch(search: string): ProductListFilters | null;
+interface FilteredPage {
+    items: Product[];
+    next: string | null;
+}
+export type AppliedFiltersStatus = 'idle' | 'loading' | 'ready' | 'error';
+/**
+ * Applies the `<salla-filters>` selection to the product list.
+ *
+ * The filters component only rewrites the address bar (`history.pushState`, invisible
+ * to the router) and emits `salla-filters::changed`; nothing re-queries the list, so
+ * the route's loader output — fetched without filters — kept showing. This listens
+ * for that event (and for a filtered URL on first load) and fetches the first page
+ * with the selection.
+ *
+ * Each fetched page is stored with the selection that produced it, so `page` is only
+ * ever the page for the *current* selection. Until it arrives `status` is `loading`
+ * (and `lastPage` is the previous selection's page, for a dimmed placeholder); if the
+ * request fails `status` is `error` and `retry` re-runs it — the old products never
+ * pass for the new selection.
+ */
+export declare function useAppliedFilters(source: Source, sort: string, enabled: boolean): {
+    filters: ProductListFilters | null;
+    page: FilteredPage | null;
+    lastPage: FilteredPage | null;
+    status: AppliedFiltersStatus;
+    retry: () => void;
+};
+export {};
+//# sourceMappingURL=useAppliedFilters.d.ts.map

package/dist/routes/product-listing/useAppliedFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppliedFilters.d.ts","sourceRoot":"","sources":["../../../src/routes/product-listing/useAppliedFilters.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,KAAK,MAAM,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAM9C;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,CAyBhF;AAED,UAAU,YAAY;IACpB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,GACf;IACD,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,oBAAoB,CAAC;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAmDA"}

package/dist/routes/product-listing.js

@@ -2,13 +2,13 @@ import { sortOptions } from '../chunk-6Z4MOC4S.js';
 import { category } from '../chunk-WHOWSSX4.js';
 import { brand } from '../chunk-IH3TQ3LD.js';
 import { buildHreflangAlternates } from '../chunk-TZ3E5BN4.js';
-import { LazyTestimonials } from '../chunk-HGNZIUZK.js';
-import { product } from '../chunk-CBNUZ7LI.js';
+import { LazyTestimonials } from '../chunk-2OED73EU.js';
+import { product } from '../chunk-UYK4CSL3.js';
 import { Drawer } from '../chunk-6TKIUG5C.js';
-import { ProductCard } from '../chunk-C7RST4KQ.js';
+import { ProductCard } from '../chunk-MDF2WJVW.js';
 import '../chunk-342EPVXN.js';
-import { useStore } from '../chunk-44G4RAUR.js';
-import '../chunk-OWNULELS.js';
+import { useStore } from '../chunk-PCDZ6WM2.js';
+import '../chunk-VQYTHUI3.js';
 import '../chunk-JKIRRMBU.js';
 import '../chunk-2JV6WZ6O.js';
 import '../chunk-6IATCGID.js';
@@ -39,7 +39,7 @@ import '../chunk-YMVLYYLU.js';
 import '../chunk-RJPPO3ET.js';
 import { HookSlot } from '../chunk-Q7VWURUR.js';
 import '../chunk-GU2KUQVD.js';
-import { LazyBreadcrumb, Image, LazyNoContent, ProductCardSkeleton, LazyRenderWhenVisible } from '../chunk-QFJPYDY5.js';
+import { LazyBreadcrumb, Image, LazyNoContent, ProductCardSkeleton, LazyRenderWhenVisible } from '../chunk-UZL4U74W.js';
 import '../chunk-AXW67SY7.js';
 import '../chunk-BYMOPN2S.js';
 import '../chunk-SKLEJJ6M.js';
@@ -48,7 +48,7 @@ import '../chunk-FZKRSGLP.js';
 import '../chunk-CUG6VOLM.js';
 import '../chunk-HX3YKS5W.js';
 import '../chunk-OBSAH7K6.js';
-import '../chunk-DF6FBKDN.js';
+import { useTwilight } from '../chunk-DF6FBKDN.js';
 import '../chunk-DGUM43GV.js';
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { SallaFilters } from '@salla.sa/twilight-components-react/filters';
@@ -294,6 +294,72 @@ async function loadStaticProducts(source, title, slug, cursor, sort) {
     }
   };
 }
+var UNSAFE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function parseFiltersFromSearch(search) {
+  const out = /* @__PURE__ */ Object.create(null);
+  new URLSearchParams(search).forEach((value, rawKey) => {
+    if (!rawKey.startsWith("filters[")) return;
+    const path = [...rawKey.matchAll(/\[([^\]]*)\]/g)].map((m) => m[1]);
+    const isList = path[path.length - 1] === "";
+    const keys = isList ? path.slice(0, -1) : path;
+    if (!keys.length || keys.includes("") || keys.some((key) => UNSAFE_KEYS.has(key))) return;
+    let node = out;
+    keys.slice(0, -1).forEach((key) => {
+      const existing = node[key];
+      if (typeof existing !== "object" || existing === null || Array.isArray(existing)) {
+        node[key] = /* @__PURE__ */ Object.create(null);
+      }
+      node = node[key];
+    });
+    const leaf = keys[keys.length - 1];
+    if (isList) {
+      node[leaf] = [...Array.isArray(node[leaf]) ? node[leaf] : [], value];
+    } else {
+      node[leaf] = value;
+    }
+  });
+  return Object.keys(out).length ? out : null;
+}
+function useAppliedFilters(source, sort, enabled) {
+  const [filters, setFilters] = useState(null);
+  const [result, setResult] = useState(null);
+  const [failedKey, setFailedKey] = useState(null);
+  const [attempt, setAttempt] = useState(0);
+  useEffect(() => {
+    if (!enabled) return;
+    setFilters(parseFiltersFromSearch(window.location.search));
+    const sdk = window.salla;
+    if (!sdk?.event) return;
+    const onChanged = (...args) => {
+      const next = args[0];
+      setFilters(next && Object.keys(next).length ? { ...next } : null);
+    };
+    sdk.event.on("salla-filters::changed", onChanged);
+    return () => sdk.event.off("salla-filters::changed", onChanged);
+  }, [enabled, source.type, source.value]);
+  const key = filters ? JSON.stringify([source.type, source.value, sort, filters]) : "";
+  useEffect(() => {
+    if (!filters) return;
+    const controller = new AbortController();
+    setFailedKey(null);
+    product.list({
+      source: source.type,
+      sourceValue: source.value,
+      sort,
+      filterable: true,
+      filters,
+      signal: controller.signal
+    }).then((res) => setResult({ key, page: { items: res.items, next: res.next } })).catch(() => {
+      if (!controller.signal.aborted) setFailedKey(key);
+    });
+    return () => controller.abort();
+  }, [key, attempt]);
+  const retry = useCallback(() => setAttempt((n) => n + 1), []);
+  if (!filters) return { filters: null, page: null, lastPage: null, status: "idle", retry };
+  const page = result?.key === key ? result.page : null;
+  const status = page ? "ready" : failedKey === key ? "error" : "loading";
+  return { filters, page, lastPage: result?.page ?? null, status, retry };
+}
 var FILTERED_PRODUCT_IMAGE_SIZES = "(min-width: 768px) 25vw, 33vw";
 function ProductListPage({
   page,
@@ -305,6 +371,7 @@ function ProductListPage({
 }) {
   const { t } = useTranslation();
   const store = useStore();
+  const { theme } = useTwilight();
   const navigate = useNavigate();
   const selectedSort = query.sort;
   const [filtersOpen, setFiltersOpen] = useState(false);
@@ -313,6 +380,17 @@ function ProductListPage({
   const brand2 = isBrand ? source.entity : null;
   const sortOptionsWithTrans = useMemo(() => sortOptions(selectedSort, t), [selectedSort, t]);
   const location = useLocation();
+  const {
+    filters: appliedFilters,
+    page: filteredPage,
+    lastPage,
+    status: filterStatus,
+    retry: retryFilters
+  } = useAppliedFilters(source, selectedSort, !!showFilters);
+  const shownPage = filterStatus === "ready" ? filteredPage : lastPage;
+  const shownProducts = filterStatus === "error" ? [] : filterStatus === "idle" ? products : shownPage?.items ?? products;
+  const shownNext = filterStatus === "idle" ? pagination?.next : filterStatus === "ready" ? filteredPage?.next : null;
+  const filteredKey = filterStatus === "idle" ? "" : `-${filterStatus}${filterStatus === "ready" ? JSON.stringify(appliedFilters) : ""}`;
   useEffect(() => {
     const handleFiltersChanged = () => setFiltersOpen(false);
     const sdk = window.salla;
@@ -333,10 +411,10 @@ function ProductListPage({
     [navigate, location.pathname, location.searchStr]
   );
   const listKey = source.value ?? source.type;
-  const nextCursorRef = useRef(pagination?.next ?? null);
+  const nextCursorRef = useRef(shownNext ?? null);
   useEffect(() => {
-    nextCursorRef.current = pagination?.next ?? null;
-  }, [pagination?.next]);
+    nextCursorRef.current = shownNext ?? null;
+  }, [shownNext]);
   const loader = useCallback(async () => {
     const nextUrl = nextCursorRef.current;
     const cursorMatch = nextUrl?.match(/[?&]cursor=([^&]+)/);
@@ -345,13 +423,14 @@ function ProductListPage({
       source: source.type,
       sourceValue: source.value,
       ...cursor && { cursor },
-      sort: selectedSort
+      sort: selectedSort,
+      ...appliedFilters && { filterable: true, filters: appliedFilters }
     });
     nextCursorRef.current = result.next;
     return result;
-  }, [source.type, source.value, selectedSort]);
+  }, [source.type, source.value, selectedSort, appliedFilters]);
   return /* @__PURE__ */ jsxs("div", { className: "container px-2.5 ms:px-5 mb-10", children: [
-    /* @__PURE__ */ jsx(LazyBreadcrumb, { page }),
+    theme?.settings?.product_index_show_breadcrumbs !== false && /* @__PURE__ */ jsx(LazyBreadcrumb, { page }),
     isBrand && brand2 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Image,
@@ -432,39 +511,58 @@ function ProductListPage({
           ] })
         ] }),
         /* @__PURE__ */ jsx(HookSlot, { name: "product:list.items.start" }),
-        /* @__PURE__ */ jsx("div", { className: "flex min-h-screen", children: /* @__PURE__ */ jsx(
-          ItemsList,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            resetKey: `${listKey}-${selectedSort}`,
-            items: products,
-            loader,
-            mode: pagination?.next ? "infinite" : "static",
-            pageUrl: location.pathname + location.searchStr,
-            className: "s-products-list flex-1 min-w-0",
-            itemsClassName: `s-products-list-wrapper s-products-list-vertical-cards${showFilters ? " s-products-list-with-filters" : ""}`,
-            skeleton: /* @__PURE__ */ jsx(ProductCardSkeleton, {}),
-            skeletonType: "item",
-            skeletonCount: 12,
-            empty: /* @__PURE__ */ jsx(
-              LazyNoContent,
-              {
-                icon: "sicon-shopping-bag",
-                message: t("pages.categories.no_products", "No products found in this category")
-              }
-            ),
-            t: (key, fallback) => t(key, fallback || key),
-            children: (items) => items.map((prod, idx) => /* @__PURE__ */ jsx(
-              ProductCard,
+            className: `flex min-h-screen${filterStatus === "loading" ? " opacity-60" : ""}`,
+            "aria-busy": filterStatus === "loading",
+            children: filterStatus === "error" ? /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx(
+                LazyNoContent,
+                {
+                  icon: "sicon-shopping-bag",
+                  message: t("common.errors.error_occurred", "Something went wrong")
+                }
+              ),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "link--primary mt-4", onClick: retryFilters, children: t("common.elements.try_again", "Try again") })
+            ] }) : /* @__PURE__ */ jsx(
+              ItemsList,
               {
-                product: prod,
-                index: idx,
-                sizes: showFilters ? FILTERED_PRODUCT_IMAGE_SIZES : void 0
+                resetKey: `${listKey}-${selectedSort}${filteredKey}`,
+                items: shownProducts,
+                loader,
+                mode: shownNext ? "infinite" : "static",
+                pageUrl: location.pathname + location.searchStr,
+                className: "s-products-list flex-1 min-w-0",
+                itemsClassName: `s-products-list-wrapper s-products-list-vertical-cards${showFilters ? " s-products-list-with-filters" : ""}`,
+                skeleton: /* @__PURE__ */ jsx(ProductCardSkeleton, {}),
+                skeletonType: "item",
+                skeletonCount: 12,
+                empty: /* @__PURE__ */ jsx(
+                  LazyNoContent,
+                  {
+                    icon: "sicon-shopping-bag",
+                    message: t(
+                      "pages.categories.no_products",
+                      "No products found in this category"
+                    )
+                  }
+                ),
+                t: (key, fallback) => t(key, fallback || key),
+                children: (items) => items.map((prod, idx) => /* @__PURE__ */ jsx(
+                  ProductCard,
+                  {
+                    product: prod,
+                    index: idx,
+                    sizes: showFilters ? FILTERED_PRODUCT_IMAGE_SIZES : void 0
+                  },
+                  prod.id
+                ))
               },
-              prod.id
-            ))
-          },
-          `${listKey}-${selectedSort}`
-        ) }),
+              `${listKey}-${selectedSort}${filteredKey}`
+            )
+          }
+        ),
         /* @__PURE__ */ jsx(HookSlot, { name: "product:list.items.end" })
       ] })
     ] }),