@mohasinac/appkit 2.7.19 → 2.7.20

package/dist/_internal/client/features/layout/DashboardLayoutClient.js

@@ -27,6 +27,8 @@ import { AdminSidebar } from "../../../../features/admin/components/AdminSidebar
 import { StoreSidebar } from "../../../../features/seller/components/SellerSidebar";
 import { UserSidebar } from "../../../../features/account/components/UserSidebar";
 import { DASHBOARD_DESKTOP_MEDIA_QUERY } from "../../../shared/features/layout/config";
+import { filterNavItems } from "./filterNavItems";
+import { useSiteSettings } from "../../../../core/hooks/useSiteSettings";
 /**
  * Hoisted drawer-state hook — the matchMedia-aware open/close logic that was
  * triplicated across admin/store/user layouts. Used internally by
@@ -67,16 +69,15 @@ function useResponsiveDrawer() {
     }, [registerNav, unregisterNav, open, close, toggle]);
     return { desktopOpen, mobileOpen, close, toggle };
 }
-/** Filter admin nav groups to only show items the user has permission to see. */
-function filterAdminGroups(groups, permissions) {
-    // null = admin (show everything); undefined = no filtering (backwards compat)
-    if (permissions === null || permissions === undefined)
+/** Filter nav groups by navConfig (enabled toggle) + requiredPermission. */
+function filterGroups(groups, navConfig, permissions) {
+    // null permissions = admin (show everything); undefined = no filtering (backwards compat)
+    if (permissions === null && !navConfig)
         return groups;
     return groups
         .map((group) => ({
         ...group,
-        items: group.items.filter((item) => !item.requiredPermission ||
-            permissions.includes(item.requiredPermission)),
+        items: filterNavItems(group.items, navConfig, permissions ?? undefined),
     }))
         .filter((group) => group.items.length > 0);
 }
@@ -84,8 +85,11 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
     const pathname = usePathname();
     const activeHref = explicitActiveHref ?? pathname ?? "";
     const { desktopOpen, mobileOpen, close, toggle } = useResponsiveDrawer();
+    const { data: settings } = useSiteSettings();
+    const navConfig = settings?.navConfig;
+    const filteredGroups = filterGroups(groups, navConfig, permissions);
     const adminGroups = variant === "admin"
-        ? filterAdminGroups(groups, permissions)
+        ? filteredGroups
         : groups;
-    return (_jsxs(_Fragment, { children: [variant === "admin" && (_jsx(AdminSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activePath: activeHref, groups: adminGroups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "store" && (_jsx(StoreSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activeHref: activeHref, items: [], groups: groups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "user" && (_jsx(UserSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, items: groups.flatMap((g) => g.items), groups: groups, onCloseMobile: close, onToggle: toggle, className: className })), children] }));
+    return (_jsxs(_Fragment, { children: [variant === "admin" && (_jsx(AdminSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activePath: activeHref, groups: adminGroups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "store" && (_jsx(StoreSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activeHref: activeHref, items: [], groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className })), variant === "user" && (_jsx(UserSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, items: filteredGroups.flatMap((g) => g.items), groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className })), children] }));
 }

package/dist/_internal/client/features/layout/filterNavItems.d.ts

@@ -0,0 +1,15 @@
+type FilterableItem = {
+    id?: string;
+    requiredPermission?: string;
+};
+/**
+ * Filters nav items by:
+ * 1. siteSettings.navConfig[item.id].enabled (admin toggle)
+ * 2. requiredPermission — item hidden when user lacks the permission
+ *
+ * Items without an `id` always pass through (legacy / unmanaged items).
+ */
+export declare function filterNavItems<T extends FilterableItem>(items: T[], navConfig: Record<string, {
+    enabled: boolean;
+}> | undefined, userPermissions: string[] | undefined): T[];
+export {};

package/dist/_internal/client/features/layout/filterNavItems.js

@@ -0,0 +1,19 @@
+"use client";
+/**
+ * Filters nav items by:
+ * 1. siteSettings.navConfig[item.id].enabled (admin toggle)
+ * 2. requiredPermission — item hidden when user lacks the permission
+ *
+ * Items without an `id` always pass through (legacy / unmanaged items).
+ */
+export function filterNavItems(items, navConfig, userPermissions) {
+    return items.filter((item) => {
+        if (!item.id)
+            return true;
+        if (!(navConfig?.[item.id]?.enabled ?? true))
+            return false;
+        if (item.requiredPermission && !userPermissions?.includes(item.requiredPermission))
+            return false;
+        return true;
+    });
+}

package/dist/_internal/server/features/site-settings/actions.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Toggle a single action's enabled state in siteSettings.actionConfig.
+ * Performs a sparse merge — only updates the one key.
+ */
+export declare function updateActionConfigDomain(actionId: string, enabled: boolean): Promise<void>;
+/**
+ * Toggle a single nav item's enabled state in siteSettings.navConfig.
+ * Also recomputes the derived disabledRoutes[] array from all current nav items.
+ * The `allNavItems` argument is the full { id, href } list so we can derive disabledRoutes.
+ */
+export declare function updateNavConfigDomain(navId: string, enabled: boolean, allNavItems: Array<{
+    id: string;
+    href: string;
+}>): Promise<void>;

package/dist/_internal/server/features/site-settings/actions.js

@@ -0,0 +1,29 @@
+import { siteSettingsRepository } from "../../../../features/admin/repository/site-settings.repository";
+/**
+ * Toggle a single action's enabled state in siteSettings.actionConfig.
+ * Performs a sparse merge — only updates the one key.
+ */
+export async function updateActionConfigDomain(actionId, enabled) {
+    await siteSettingsRepository.updateSingleton({
+        actionConfig: { [actionId]: { enabled } },
+    });
+}
+/**
+ * Toggle a single nav item's enabled state in siteSettings.navConfig.
+ * Also recomputes the derived disabledRoutes[] array from all current nav items.
+ * The `allNavItems` argument is the full { id, href } list so we can derive disabledRoutes.
+ */
+export async function updateNavConfigDomain(navId, enabled, allNavItems) {
+    const current = await siteSettingsRepository.getSingleton();
+    const merged = {
+        ...(current.navConfig ?? {}),
+        [navId]: { enabled },
+    };
+    const disabledRoutes = allNavItems
+        .filter((item) => (merged[item.id]?.enabled ?? true) === false)
+        .map((item) => item.href);
+    await siteSettingsRepository.updateSingleton({
+        navConfig: merged,
+        disabledRoutes,
+    });
+}

package/dist/_internal/shared/features/layout/types.d.ts

@@ -23,6 +23,13 @@ export interface SidebarNavItem {
     label: string;
     icon?: ReactNode;
     badge?: number;
+    /**
+     * Stable nav-* slug used as the key in siteSettings.navConfig.
+     * If absent, item is always visible (no admin toggle, no permission check).
+     */
+    id?: string;
+    /** RBAC permission key — item only shows to users with this permission. */
+    requiredPermission?: string;
 }
 /** Sidebar group with title + items + default-open state. */
 export interface SidebarNavGroup {
@@ -37,6 +44,10 @@ export interface MainNavItem {
     icon?: ReactNode;
     /** Translation key (consumer fills in `label` at render time via t(key)). */
     key?: string;
+    /** Stable nav-* slug used as the key in siteSettings.navConfig. */
+    id?: string;
+    /** RBAC permission key — item only shows to users with this permission. */
+    requiredPermission?: string;
 }
 /** Branding config — propagated to TitleBar / Footer / mobile chrome. */
 export interface BrandingConfig {

package/dist/client.d.ts

@@ -134,6 +134,8 @@ export { FORM_ACTION_ID, FORM_ACTION_META, FORM_FOOTER_PRESET } from "./features
 export type { FormActionId, FormActionMeta } from "./features/products/index";
 export { DASHBOARD_QUICK_ACTION_ID, DASHBOARD_QUICK_ACTION_META, DASHBOARD_QUICK_ACTIONS } from "./features/products/index";
 export type { DashboardQuickActionId, DashboardQuickActionMeta } from "./features/products/index";
+export { useAuthGate } from "./react/hooks/useAuthGate";
+export type { UseAuthGateReturn } from "./react/hooks/useAuthGate";
 export { useActionDispatch } from "./react/hooks/use-action-dispatch";
 export type { DispatchAction, UseActionDispatchOptions } from "./react/hooks/use-action-dispatch";
 export { usePanelStore } from "./stores/panel-store";

package/dist/client.js

@@ -174,6 +174,8 @@ export { ROW_ACTION_ID, ROW_ACTION_META, ADMIN_ROW_ACTIONS, SELLER_ROW_ACTIONS,
 export { FORM_ACTION_ID, FORM_ACTION_META, FORM_FOOTER_PRESET } from "./features/products/index";
 // Dashboard quick actions
 export { DASHBOARD_QUICK_ACTION_ID, DASHBOARD_QUICK_ACTION_META, DASHBOARD_QUICK_ACTIONS } from "./features/products/index";
+// [CLIENT-ONLY] useAuthGate: pre-dispatch auth gate using ACTION_ID registry.
+export { useAuthGate } from "./react/hooks/useAuthGate";
 // Action dispatch hook + panel store
 export { useActionDispatch } from "./react/hooks/use-action-dispatch";
 export { usePanelStore } from "./stores/panel-store";

package/dist/contracts/auth.d.ts

@@ -12,6 +12,8 @@ export interface AuthPayload {
     phoneNumber?: string | null;
     /** Any extra custom claims stored on the token */
     claims?: Record<string, unknown>;
+    /** RBAC permission keys granted to this user. */
+    permissions?: string[];
 }
 export interface AuthUser {
     uid: string;

package/dist/features/admin/utils/checkActionAllowed.d.ts

@@ -0,0 +1,4 @@
+import type { ActionId } from "../../products/constants/action-defs";
+import type { AuthPayload } from "../../../contracts/auth";
+/** Throws if the action is disabled, requires auth the caller lacks, or requires a permission the caller lacks. */
+export declare function checkActionAllowed(actionId: ActionId, user: AuthPayload | null): Promise<void>;

package/dist/features/admin/utils/checkActionAllowed.js

@@ -0,0 +1,21 @@
+import { getSiteSettingsGlobal } from "./getSiteSettingsGlobal";
+import { ACTION_META } from "../../products/constants/action-defs";
+import { AuthenticationError } from "../../../errors/authentication-error";
+import { AuthorizationError } from "../../../errors/authorization-error";
+/** Throws if the action is disabled, requires auth the caller lacks, or requires a permission the caller lacks. */
+export async function checkActionAllowed(actionId, user) {
+    const settings = await getSiteSettingsGlobal();
+    const enabled = settings?.actionConfig?.[actionId]?.enabled ??
+        ACTION_META[actionId]?.defaultEnabled ??
+        true;
+    if (!enabled) {
+        throw new AuthorizationError("This action is currently unavailable.");
+    }
+    const meta = ACTION_META[actionId];
+    if (meta?.requiresAuth && !user?.uid) {
+        throw new AuthenticationError("Authentication required.");
+    }
+    if (meta?.requiredPermission && !user?.permissions?.includes(meta.requiredPermission)) {
+        throw new AuthorizationError("You don't have permission to perform this action.");
+    }
+}

package/dist/features/admin/utils/getDisabledRoutes.d.ts

@@ -0,0 +1,2 @@
+/** Returns the hrefs of all disabled nav items (empty array when none disabled). */
+export declare function getDisabledRoutes(): Promise<string[]>;

package/dist/features/admin/utils/getDisabledRoutes.js

@@ -0,0 +1,6 @@
+import { getSiteSettingsGlobal } from "./getSiteSettingsGlobal";
+/** Returns the hrefs of all disabled nav items (empty array when none disabled). */
+export async function getDisabledRoutes() {
+    const settings = await getSiteSettingsGlobal();
+    return settings?.disabledRoutes ?? [];
+}

package/dist/features/admin/utils/getSiteSettingsGlobal.d.ts

@@ -0,0 +1,2 @@
+/** React.cache deduplication — one Firestore read per RSC request tree. */
+export declare const getSiteSettingsGlobal: () => Promise<import("..").SiteSettingsDocument>;

package/dist/features/admin/utils/getSiteSettingsGlobal.js

@@ -0,0 +1,4 @@
+import { cache } from "react";
+import { siteSettingsRepository } from "../repository/site-settings.repository";
+/** React.cache deduplication — one Firestore read per RSC request tree. */
+export const getSiteSettingsGlobal = cache(() => siteSettingsRepository.getSingleton());

package/dist/features/categories/components/CategoryProductsListing.js

@@ -4,7 +4,9 @@ import { useState, useCallback } from "react";
 import { Search, SlidersHorizontal, LayoutGrid, List, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Pagination, SortDropdown, useToast } from "../../../ui";
+import { Pagination, SortDropdown, useToast, LoginRequiredModal } from "../../../ui";
+import { useAuthGate } from "../../../react/hooks/useAuthGate";
+import { ACTION_ID } from "../../products/constants/action-defs";
 import { ROUTES } from "../../../next";
 import { ProductGrid } from "../../products/components/ProductGrid";
 import { ProductFilters } from "../../products/components/ProductFilters";
@@ -15,6 +17,7 @@ import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
 export function CategoryProductsListing({ categorySlug, categoryId, brandName, initialData, }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
     const { showToast } = useToast();
+    const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
     const [searchInput, setSearchInput] = useState(table.get("q") || "");
     const [filterOpen, setFilterOpen] = useState(false);
     const [view, setView] = useState(table.get("view") || "card");
@@ -40,17 +43,19 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, i
     }, [searchInput, table]);
     const handleWishlistToggle = useCallback((productId) => {
         const isWishlisted = wishlistedIds.has(productId);
-        if (isWishlisted) {
-            localWishlist.remove(productId, "product");
-            pushWishlistOp({ op: "remove", itemId: productId, type: "product" });
-            showToast("Removed from wishlist", "info");
-        }
-        else {
-            localWishlist.add(productId, "product");
-            pushWishlistOp({ op: "add", itemId: productId, type: "product" });
-            showToast("Added to wishlist", "success");
-        }
-    }, [wishlistedIds, localWishlist, showToast]);
+        requireAuth(isWishlisted ? ACTION_ID.REMOVE_FROM_WISHLIST : ACTION_ID.ADD_TO_WISHLIST, () => {
+            if (isWishlisted) {
+                localWishlist.remove(productId, "product");
+                pushWishlistOp({ op: "remove", itemId: productId, type: "product" });
+                showToast("Removed from wishlist", "info");
+            }
+            else {
+                localWishlist.add(productId, "product");
+                pushWishlistOp({ op: "add", itemId: productId, type: "product" });
+                showToast("Added to wishlist", "success");
+            }
+        });
+    }, [wishlistedIds, localWishlist, showToast, requireAuth]);
     const handleAddToCart = useCallback((product) => {
         localCart.add(product.id, 1, {
             productTitle: product.title,
@@ -65,5 +70,5 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, i
         table.set("view", next);
     };
     const closeFilters = () => setFilterOpen(false);
-    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx("div", { className: "sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "-createdAt", onChange: (v) => { table.set("sort", v); }, options: PRODUCT_PUBLIC_SORT_OPTIONS })] }), _jsxs("div", { className: "flex shrink-0 items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleViewToggle("card"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "card" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleViewToggle("list"), "aria-label": "List view", className: `p-2 transition-colors ${view === "list" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(List, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: "py-6", children: [isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6", children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, emptyLabel: "No products found in this category.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsx("button", { type: "button", onClick: closeFilters, "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(ProductFilters, { table: table, currencyPrefix: "\u20B9" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
+    return (_jsxs("div", { className: "min-h-[200px]", children: [_jsx("div", { className: "sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "-createdAt", onChange: (v) => { table.set("sort", v); }, options: PRODUCT_PUBLIC_SORT_OPTIONS })] }), _jsxs("div", { className: "flex shrink-0 items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleViewToggle("card"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "card" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleViewToggle("list"), "aria-label": "List view", className: `p-2 transition-colors ${view === "list" ? "bg-primary text-white" : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(List, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: "py-6", children: [isLoading ? (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6", children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: view, emptyLabel: "No products found in this category.", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsx("button", { type: "button", onClick: closeFilters, "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(ProductFilters, { table: table, currencyPrefix: "\u20B9" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] })), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/layout/AppLayoutShell.js

@@ -10,6 +10,9 @@ const ROLE_DOT_COLORS = {
     employee: "#f59e0b",
 };
 import { useTheme } from "../../react";
+import { useAuth } from "../../react/contexts/SessionContext";
+import { useSiteSettings } from "../../core/hooks/useSiteSettings";
+import { filterNavItems } from "../../_internal/client/features/layout/filterNavItems";
 import { useBottomActionsContext } from "./BottomActionsContext";
 import BottomActions from "./BottomActions";
 import { AutoBreadcrumbs } from "./AutoBreadcrumbs";
@@ -50,6 +53,10 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
     const { theme, toggleTheme } = useTheme();
     const { closeNav: closeDashboardNav, hasNav: hasDashboardNav, toggleNav: toggleDashboardNav } = useDashboardNav();
     const { state: bottomActionsState } = useBottomActionsContext();
+    const { user: authUser } = useAuth();
+    const { data: siteSettingsData } = useSiteSettings();
+    const navConfig = siteSettingsData?.navConfig;
+    const visibleNavItems = filterNavItems(navItems, navConfig, authUser?.permissions);
     const headerRef = useRef(null);
     useEffect(() => {
         const el = headerRef.current;
@@ -154,7 +161,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Div, { className: "flex min-h-screen w-full flex-col overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(MainNavbar, { navItems: navItems, hiddenNavItems: hiddenNavItems }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot)] }), eventBannerSlot, _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { className: "relative flex w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsxs(Div, { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsxs(Div, { className: "flex-shrink-0 relative", children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Div, { className: "flex min-h-screen w-full flex-col overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(MainNavbar, { navItems: visibleNavItems, hiddenNavItems: hiddenNavItems }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot)] }), eventBannerSlot, _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { className: "relative flex w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsxs(Div, { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsxs(Div, { className: "flex-shrink-0 relative", children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata
                                                             ? {
                                                                 url: user.avatarMetadata.url,
                                                                 position: user.avatarMetadata.position ?? {

package/dist/features/layout/ListingLayout.js

@@ -76,7 +76,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                                             "text-zinc-600 dark:text-slate-300",
                                             "hover:bg-zinc-50 dark:hover:bg-slate-800/60 transition-colors",
                                             filterActiveCount > 0
-                                                ? "border-primary/40 bg-primary/5 text-primary"
+                                                ? "border-primary/40 bg-primary/5 text-zinc-800 dark:text-zinc-100"
                                                 : "",
                                         ].join(" "), children: [l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] })), searchSlot && _jsx(Div, { className: "flex-1 min-w-0", children: searchSlot })] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx(Div, { className: "flex items-stretch min-h-[44px] gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsxs(Row, { className: "gap-2 flex-shrink-0 pb-px", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && bulkActionBarSlot && (_jsx(Div, { className: "hidden md:block pt-2 mt-2 border-t border-zinc-100 dark:border-slate-800", children: bulkActionBarSlot }))] }), _jsxs(Div, { className: "flex gap-4 lg:gap-6 items-start", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
                             "hidden lg:block flex-shrink-0 self-start",

package/dist/features/layout/MainNavbar.d.ts

@@ -8,6 +8,10 @@ export interface MainNavbarItem {
     label: string;
     icon?: React.ReactNode;
     highlighted?: boolean;
+    /** Stable nav-* slug for siteSettings.navConfig toggling. */
+    id?: string;
+    /** RBAC permission key — item hidden when user lacks this permission. */
+    requiredPermission?: string;
 }
 export interface MainNavbarProps {
     /** Pre-translated nav items to display */

package/dist/features/layout/NavItem.js

@@ -18,7 +18,7 @@ export function NavItem({ href, label, icon, isActive = false, variant = "horizo
     }
     if (highlighted) {
         return (_jsxs(Link, { href: href, className: [
-                "flex items-center gap-2 px-3 py-1 rounded-full border border-primary-700/30 dark:border-primary/30 bg-primary-700/5 dark:bg-primary/5 text-primary-700 dark:text-primary text-sm font-medium transition-all hover:bg-primary-700/10 dark:hover:bg-primary/10",
+                "flex items-center gap-2 px-3 py-1 rounded-full border border-primary-700/30 dark:border-primary/30 bg-primary-700/5 dark:bg-primary/5 text-zinc-800 dark:text-zinc-100 text-sm font-medium transition-all hover:bg-primary-700/10 dark:hover:bg-primary/10",
                 className,
             ]
                 .filter(Boolean)

package/dist/features/pre-orders/components/PreOrdersIndexListing.js

@@ -4,7 +4,8 @@ import { useState, useCallback, useMemo } from "react";
 import { Columns, Heart, ShoppingCart, SlidersHorizontal, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Pagination, useToast, BulkActionBar, ListingToolbar } from "../../../ui";
+import { Pagination, useToast, BulkActionBar, ListingToolbar, LoginRequiredModal } from "../../../ui";
+import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID, ACTION_META, COMPARE_MAX_ITEMS } from "../../products/constants/action-defs";
 import { CompareOverlay } from "../../products/components/CompareOverlay";
 import { ROUTES } from "../../../next";
@@ -32,6 +33,7 @@ const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.BRAND, TABLE_KEYS.MIN_PRICE
 export function PreOrdersIndexListing({ initialData, categorySlug, brandName }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
     const { showToast } = useToast();
+    const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
     const [compareIds, setCompareIds] = useState([]);
@@ -132,15 +134,19 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
     };
     const wishlistActions = {
         addToWishlist: (productId) => {
-            localWishlist.add(productId, "preorder");
-            pushWishlistOp({ op: "add", itemId: productId, type: "preorder" });
-            showToast("Added to wishlist", "success");
+            requireAuth(ACTION_ID.ADD_TO_WISHLIST, () => {
+                localWishlist.add(productId, "preorder");
+                pushWishlistOp({ op: "add", itemId: productId, type: "preorder" });
+                showToast("Added to wishlist", "success");
+            });
             return Promise.resolve();
         },
         removeFromWishlist: (productId) => {
-            localWishlist.remove(productId, "preorder");
-            pushWishlistOp({ op: "remove", itemId: productId, type: "preorder" });
-            showToast("Removed from wishlist", "info");
+            requireAuth(ACTION_ID.REMOVE_FROM_WISHLIST, () => {
+                localWishlist.remove(productId, "preorder");
+                pushWishlistOp({ op: "remove", itemId: productId, type: "preorder" });
+                showToast("Removed from wishlist", "info");
+            });
             return Promise.resolve();
         },
         isWishlisted: (productId) => wishlistedIds.has(productId),
@@ -178,13 +184,15 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                         icon: _jsx(Heart, { className: "h-3.5 w-3.5" }),
                         variant: "secondary",
                         onClick: () => {
-                            const selected = preOrders.filter((p) => selection.selectedIdSet.has(p.id));
-                            selected.forEach((p) => {
-                                localWishlist.add(p.id, "preorder");
-                                pushWishlistOp({ op: "add", itemId: p.id, type: "preorder" });
+                            requireAuth(ACTION_ID.ADD_TO_WISHLIST, () => {
+                                const selected = preOrders.filter((p) => selection.selectedIdSet.has(p.id));
+                                selected.forEach((p) => {
+                                    localWishlist.add(p.id, "preorder");
+                                    pushWishlistOp({ op: "add", itemId: p.id, type: "preorder" });
+                                });
+                                showToast(`${selected.length} items added to wishlist`, "success");
+                                selection.clearSelection();
                             });
-                            showToast(`${selected.length} items added to wishlist`, "success");
-                            selection.clearSelection();
                         },
                     },
                     {
@@ -201,5 +209,5 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                 ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
                     setCompareIds([]);
                     selection.clearSelection();
-                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [pendingFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(PreOrderFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", pendingFilterCount > 0 ? ` (${pendingFilterCount})` : ""] }) })] })] }))] }));
+                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [pendingFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(PreOrderFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", pendingFilterCount > 0 ? ` (${pendingFilterCount})` : ""] }) })] })] })), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/products/components/AuctionsIndexListing.js

@@ -4,7 +4,7 @@ import { useState, useCallback, useMemo } from "react";
 import { SlidersHorizontal, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../hooks/useProducts";
-import { Pagination, useToast, ListingToolbar, BulkActionBar } from "../../../ui";
+import { Pagination, useToast, ListingToolbar, BulkActionBar, LoginRequiredModal } from "../../../ui";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
 import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
 import { AuctionFilters } from "../../auctions/components/AuctionFilters";
@@ -15,6 +15,8 @@ import { useBrands } from "../hooks/useBrands";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
 import { sortBy } from "../../../constants/sort";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
+import { useAuthGate } from "../../../react/hooks/useAuthGate";
+import { ACTION_ID } from "../constants/action-defs";
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.AUCTION_END_DATE, "ASC");
 const AUCTION_SORT_OPTIONS = [
     { value: sortBy(PRODUCT_FIELDS.AUCTION_END_DATE, "ASC"), label: "Ending Soonest" },
@@ -28,6 +30,7 @@ const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.BRAND, TABLE_KEYS.MIN_BID,
 export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
     const { showToast } = useToast();
+    const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
     const showEnded = table.get(TABLE_KEYS.SHOW_ENDED) === "true";
@@ -127,15 +130,19 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
     };
     const wishlistActions = {
         addToWishlist: (productId) => {
-            localWishlist.add(productId, "auction");
-            pushWishlistOp({ op: "add", itemId: productId, type: "auction" });
-            showToast("Added to wishlist", "success");
+            requireAuth(ACTION_ID.WATCH_AUCTION, () => {
+                localWishlist.add(productId, "auction");
+                pushWishlistOp({ op: "add", itemId: productId, type: "auction" });
+                showToast("Added to wishlist", "success");
+            });
             return Promise.resolve();
         },
         removeFromWishlist: (productId) => {
-            localWishlist.remove(productId, "auction");
-            pushWishlistOp({ op: "remove", itemId: productId, type: "auction" });
-            showToast("Removed from wishlist", "info");
+            requireAuth(ACTION_ID.UNWATCH_AUCTION, () => {
+                localWishlist.remove(productId, "auction");
+                pushWishlistOp({ op: "remove", itemId: productId, type: "auction" });
+                showToast("Removed from wishlist", "info");
+            });
             return Promise.resolve();
         },
         isWishlisted: (productId) => wishlistedIds.has(productId),
@@ -143,28 +150,24 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
     const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-4";
     return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: auctions.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show ended" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showEnded, onClick: () => table.set(TABLE_KEYS.SHOW_ENDED, showEnded ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showEnded ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showEnded ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {
-                        id: "watchlist",
+                        id: ACTION_ID.WATCH_AUCTION,
                         label: "Add to Watchlist",
                         variant: "primary",
                         onClick: () => {
                             const selected = auctions.filter((a) => selection.selectedIdSet.has(a.id));
-                            selected.forEach((a) => {
-                                wishlistActions.addToWishlist(a.id);
-                            });
+                            selected.forEach((a) => { wishlistActions.addToWishlist(a.id); });
                             selection.clearSelection();
                         },
                     },
                     {
-                        id: "remove-watchlist",
+                        id: ACTION_ID.UNWATCH_AUCTION,
                         label: "Remove from Watchlist",
                         variant: "secondary",
                         onClick: () => {
                             const selected = auctions.filter((a) => selection.selectedIdSet.has(a.id));
-                            selected.forEach((a) => {
-                                wishlistActions.removeFromWishlist(a.id);
-                            });
+                            selected.forEach((a) => { wishlistActions.removeFromWishlist(a.id); });
                             selection.clearSelection();
                         },
                     },
-                ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [pendingFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", pendingFilterCount > 0 ? ` (${pendingFilterCount})` : ""] }) })] })] }))] }));
+                ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [pendingFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", pendingFilterCount > 0 ? ` (${pendingFilterCount})` : ""] }) })] })] })), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/products/components/ProductGrid.js

@@ -81,7 +81,7 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
                                             e.stopPropagation();
                                             e.preventDefault();
                                             onAddToCart(product);
-                                        }, className: "flex items-center justify-center gap-1 rounded-xl border-2 border-primary/40 bg-primary/5 py-2 text-xs font-semibold text-primary hover:bg-primary/10 hover:border-primary/60 active:scale-[0.97] transition-all duration-150 dark:text-primary-400 dark:border-primary-400/50 dark:bg-primary/[0.08] dark:hover:bg-primary/[0.15] dark:hover:border-primary-400/70", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 3h2l.4 2M7 13h10l4-8H5.4m1.6 8L5 3H3m4 10v7a1 1 0 001 1h8a1 1 0 001-1v-7M9 21h6" }) }), "Cart"] }))] }))] })] })] }));
+                                        }, className: "flex items-center justify-center gap-1 rounded-xl border-2 border-primary/40 bg-primary/5 py-2 text-xs font-semibold text-zinc-800 hover:bg-primary/10 hover:border-primary/60 active:scale-[0.97] transition-all duration-150 dark:text-zinc-100 dark:border-primary-400/50 dark:bg-primary/[0.08] dark:hover:bg-primary/[0.15] dark:hover:border-primary-400/70", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 3h2l.4 2M7 13h10l4-8H5.4m1.6 8L5 3H3m4 10v7a1 1 0 001 1h8a1 1 0 001-1v-7M9 21h6" }) }), "Cart"] }))] }))] })] })] }));
     if (href && !selectionMode) {
         return (_jsx(Link, { href: href, className: "block h-full", children: cardBody }));
     }