@mohasinac/appkit 3.9.0 → 4.0.0

package/dist/_internal/shared/actions/action-registry.js

@@ -310,6 +310,14 @@ export const ACTIONS = {
             kind: "ghost",
             permissions: ["seller", "admin"],
         },
+        "set-payout-reminder": {
+            id: "store.set-payout-reminder",
+            label: "Remind Me",
+            ariaLabel: "Toggle a follow-up reminder on this payout",
+            description: "Flag this payout for a personal follow-up reminder.",
+            kind: "ghost",
+            permissions: ["seller"],
+        },
         // ── Review management ───────────────────────────────────────────────
         "reply-review": {
             id: "store.reply-review",

package/dist/client.d.ts

@@ -32,7 +32,8 @@ export { Skeleton } from "./ui/components/Skeleton";
 export { Alert } from "./ui/components/Alert";
 export type { SkeletonProps } from "./ui/components/Skeleton";
 export { Divider } from "./ui/components/Divider";
-export { TabStrip } from "./ui/components/TabStrip";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/components/Tabs";
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from "./ui/components/Tabs";
 export { SellerProductsView } from "./features/seller/components/SellerProductsView";
 export { Drawer } from "./ui/components/Drawer";
 export { FilterDrawer } from "./ui/components/FilterDrawer";
@@ -69,7 +70,6 @@ export { useSwipe } from "./react/hooks/useSwipe";
 export { useInfiniteScroll } from "./react/hooks/useInfiniteScroll";
 export type { UseInfiniteScrollOptions, UseInfiniteScrollResult, } from "./react/hooks/useInfiniteScroll";
 export { useUnsavedChanges } from "./react/hooks/useUnsavedChanges";
-export { useVisibleItems } from "./react/hooks/useVisibleItems";
 export { FirebaseClientAuthProvider } from "./providers/firebase-client/index";
 export { FirebaseClientRealtimeProvider } from "./providers/firebase-client/index";
 export { EventFormDrawer, EventParticipateView, EventPollWidget } from "./features/events/index";

package/dist/client.js

@@ -41,7 +41,7 @@ export { EmptyState } from "./ui/components/EmptyState";
 export { Skeleton } from "./ui/components/Skeleton";
 export { Alert } from "./ui/components/Alert";
 export { Divider } from "./ui/components/Divider";
-export { TabStrip } from "./ui/components/TabStrip";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/components/Tabs";
 export { SellerProductsView } from "./features/seller/components/SellerProductsView";
 // [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.
 // Drawer - Component for drawer.
@@ -113,9 +113,6 @@ export { useInfiniteScroll } from "./react/hooks/useInfiniteScroll";
 // useUnsavedChanges - React hook for use unsaved changes.
 export { useUnsavedChanges } from "./react/hooks/useUnsavedChanges";
 // [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.
-// useVisibleItems - React hook for use visible items.
-export { useVisibleItems } from "./react/hooks/useVisibleItems";
-// [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.
 // FirebaseClientAuthProvider - Component for firebase client auth provider.
 export { FirebaseClientAuthProvider } from "./providers/firebase-client/index";
 // [CLIENT-ONLY]-Cannot run in SSR mode â€" uses browser-only APIs (window, navigator, localStorage, matchMedia, DOM events) that do not exist in Node.js.

package/dist/constants/api-endpoints.d.ts

@@ -359,6 +359,7 @@ export declare const SELLER_ENDPOINTS: {
     readonly COUPON_BY_ID: (id: string) => string;
     readonly OFFERS: "/api/store/offers";
     readonly PAYOUTS: "/api/store/payouts";
+    readonly PAYOUT_BY_ID: (id: string) => string;
     readonly PAYOUT_SETTINGS: "/api/store/payout-settings";
     readonly PAYOUT_REQUEST: "/api/store/payouts/request";
     readonly REVIEWS: "/api/store/reviews";
@@ -805,6 +806,7 @@ export declare const API_ENDPOINTS: {
         readonly COUPON_BY_ID: (id: string) => string;
         readonly OFFERS: "/api/store/offers";
         readonly PAYOUTS: "/api/store/payouts";
+        readonly PAYOUT_BY_ID: (id: string) => string;
         readonly PAYOUT_SETTINGS: "/api/store/payout-settings";
         readonly PAYOUT_REQUEST: "/api/store/payouts/request";
         readonly REVIEWS: "/api/store/reviews";
@@ -1253,6 +1255,7 @@ export declare const API_ROUTES: {
         readonly COUPON_BY_ID: (id: string) => string;
         readonly OFFERS: "/api/store/offers";
         readonly PAYOUTS: "/api/store/payouts";
+        readonly PAYOUT_BY_ID: (id: string) => string;
         readonly PAYOUT_SETTINGS: "/api/store/payout-settings";
         readonly PAYOUT_REQUEST: "/api/store/payouts/request";
         readonly REVIEWS: "/api/store/reviews";

package/dist/constants/api-endpoints.js

@@ -477,6 +477,7 @@ export const SELLER_ENDPOINTS = {
     COUPON_BY_ID: (id) => `/api/store/coupons/${id}`,
     OFFERS: "/api/store/offers",
     PAYOUTS: "/api/store/payouts",
+    PAYOUT_BY_ID: (id) => `/api/store/payouts/${id}`,
     PAYOUT_SETTINGS: "/api/store/payout-settings",
     PAYOUT_REQUEST: "/api/store/payouts/request",
     REVIEWS: "/api/store/reviews",

package/dist/features/account/hooks/useDataViewMode.d.ts

@@ -0,0 +1,17 @@
+export type DataViewMode = "table" | "grid" | "list";
+/**
+ * Persisted, per-user "last saved" listing view-mode preference (table vs
+ * grid vs list) — a single global value shared across every listing page,
+ * not scoped per page. When the user has never explicitly chosen a view,
+ * defaults to "list" (AdminViewCards' one-full-width-card-per-row layout —
+ * easier to read than a compacted table) below the mobile breakpoint, and
+ * "table" at desktop widths.
+ *
+ * Only the view-mode toggle is persisted here. Filters, sort, search, and
+ * pagination already live in the URL via useUrlTable() and must never be
+ * added to this hook — see CLAUDE.md Phase 3 / user directive 2026-08-18.
+ */
+export declare function useDataViewMode(fallback?: DataViewMode): {
+    view: DataViewMode;
+    setView: (next: DataViewMode) => void;
+};

package/dist/features/account/hooks/useDataViewMode.js

@@ -0,0 +1,55 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useCurrentProfile, useUpdateCurrentProfile } from "./useProfile";
+const PERSIST_DEBOUNCE_MS = 600;
+const MOBILE_BREAKPOINT_PX = 768;
+/**
+ * Persisted, per-user "last saved" listing view-mode preference (table vs
+ * grid vs list) — a single global value shared across every listing page,
+ * not scoped per page. When the user has never explicitly chosen a view,
+ * defaults to "list" (AdminViewCards' one-full-width-card-per-row layout —
+ * easier to read than a compacted table) below the mobile breakpoint, and
+ * "table" at desktop widths.
+ *
+ * Only the view-mode toggle is persisted here. Filters, sort, search, and
+ * pagination already live in the URL via useUrlTable() and must never be
+ * added to this hook — see CLAUDE.md Phase 3 / user directive 2026-08-18.
+ */
+export function useDataViewMode(fallback = "table") {
+    const { data: profile } = useCurrentProfile();
+    const updateProfile = useUpdateCurrentProfile();
+    const debounceRef = useRef(null);
+    const [view, setViewState] = useState(fallback);
+    const hasAppliedDefault = useRef(false);
+    // Apply the persisted preference (or a viewport-based default when none
+    // exists yet) exactly once per mount, so a later profile refetch doesn't
+    // clobber a view the user has since changed locally.
+    useEffect(() => {
+        if (hasAppliedDefault.current)
+            return;
+        if (profile === undefined)
+            return; // still loading — wait rather than flash "table" then jump
+        hasAppliedDefault.current = true;
+        const saved = profile.uiPreferences?.dataViewMode;
+        if (saved) {
+            setViewState(saved);
+            return;
+        }
+        if (typeof window !== "undefined" && window.innerWidth < MOBILE_BREAKPOINT_PX) {
+            setViewState("list");
+        }
+    }, [profile]);
+    useEffect(() => () => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+    }, []);
+    const setView = useCallback((next) => {
+        setViewState(next);
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            updateProfile.mutate({ uiPreferences: { dataViewMode: next } });
+        }, PERSIST_DEBOUNCE_MS);
+    }, [updateProfile]);
+    return { view, setView };
+}

package/dist/features/account/hooks/useProfile.d.ts

@@ -13,6 +13,7 @@ export interface UserProfile {
     googleLinkedEmail?: string | null;
     uiPreferences?: {
         collapsedSections?: string[];
+        dataViewMode?: "table" | "grid" | "list";
     };
 }
 export interface UpdateCurrentProfileInput {
@@ -31,6 +32,7 @@ export interface UpdateCurrentProfileInput {
     profileIsPublic?: boolean;
     uiPreferences?: {
         collapsedSections?: string[];
+        dataViewMode?: "table" | "grid" | "list";
     };
 }
 export declare function useCurrentProfile(options?: {

package/dist/features/admin/components/AdminBundlesView.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
 export interface AdminBundlesViewProps {
-    getEditHref: (row: {
-        id: string;
-    }) => string;
+    /** Plain string with an `{id}` placeholder — safe to build in a Server Component page.tsx. */
+    editHrefTemplate: string;
     newHref: string;
 }
-export declare function AdminBundlesView({ getEditHref, newHref }: AdminBundlesViewProps): React.JSX.Element;
+export declare function AdminBundlesView({ editHrefTemplate, newHref }: AdminBundlesViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminBundlesView.js

@@ -40,7 +40,7 @@ const COLUMNS = [
     },
     { key: "updatedAt", header: "Updated", className: "w-28" },
 ];
-export function AdminBundlesView({ getEditHref, newHref }) {
+export function AdminBundlesView({ editHrefTemplate, newHref }) {
     const [rebuildingId, setRebuildingId] = useState(null);
     const toast = useToast();
     const handleRebuild = useCallback(async (bundleId) => {
@@ -99,7 +99,7 @@ export function AdminBundlesView({ getEditHref, newHref }) {
                 parts.push(sieveFilter("bundleStockStatus", SIEVE_OP.EQ, filterState.bundleStockStatus));
             return parts.join(",") || undefined;
         },
-        getRowHref: getEditHref,
+        rowHrefTemplate: editHrefTemplate,
         toolbarExtra: (_jsx(Button, { asChild: true, size: "sm", variant: "primary", children: _jsxs(TextLink, { href: newHref, layout: "flex", align: "center", gap: "xs", children: ["+ ", BUNDLE_COPY.adminList.newButton] }) })),
         // Rule #7: bulk-action array sourced from the ADMIN_BULK_ACTIONS preset.
         buildBulkActions: (selection) => {

package/dist/features/admin/components/AdminCarouselView.js

@@ -145,5 +145,5 @@ export function AdminCarouselView({ children, onBulkDelete, ...props }) {
                 ] })),
         },
     ];
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search slide titles", onSearchChange: setSearchInput, onSearchCommit: commitSearch, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), _jsx(DataTable, { rows: displayRows, columns: columns, isLoading: isLoading, emptyLabel: "No carousel slides \u2014 use 'New slide' to add one", getRowHref: (row) => `/admin/carousel/${row.id}/edit` })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Row, { wrap: true, gap: "sm", children: [{ label: "All", value: "" }, { label: "Active", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setPendingFilters((p) => ({ ...p, active: opt.value })), className: `rounded-full px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium border transition-colors min-h-0 h-auto ${(pendingFilters.active || "") === opt.value ? "bg-primary text-white border-primary" : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: opt.label }, opt.label))) })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Carousel Slide", message: "Delete this carousel slide? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(deleteTargetId); setDeleteTargetId(null); }, onClose: () => setDeleteTargetId(null), isDeleting: deleteMutation.isPending }))] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search slide titles", onSearchChange: setSearchInput, onSearchCommit: commitSearch, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedCount > 0 && bulkActions.length > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), _jsx(DataTable, { rows: displayRows, columns: columns, isLoading: isLoading, emptyLabel: "No carousel slides \u2014 use 'New slide' to add one", rowHrefTemplate: "/admin/carousel/{id}/edit" })] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Row, { wrap: true, gap: "sm", children: [{ label: "All", value: "" }, { label: "Active", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => setPendingFilters((p) => ({ ...p, active: opt.value })), className: `rounded-full px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium border transition-colors min-h-0 h-auto ${(pendingFilters.active || "") === opt.value ? "bg-primary text-white border-primary" : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: opt.label }, opt.label))) })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Carousel Slide", message: "Delete this carousel slide? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(deleteTargetId); setDeleteTargetId(null); }, onClose: () => setDeleteTargetId(null), isDeleting: deleteMutation.isPending }))] }));
 }

package/dist/features/admin/components/AdminCategoriesView.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
-export interface AdminCategoriesViewProps extends ListingLayoutProps {
-    getRowHref?: (row: {
-        id: string;
-    }) => string;
-}
-export declare function AdminCategoriesView({ children, getRowHref: _getRowHref, ...props }: AdminCategoriesViewProps): React.JSX.Element;
+export type AdminCategoriesViewProps = ListingLayoutProps;
+export declare function AdminCategoriesView({ children, ...props }: AdminCategoriesViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminCategoriesView.js

@@ -95,7 +95,7 @@ const ADMIN_CATEGORIES_CONFIG = {
     renderEditor: ({ editId, closePanel }) => (_jsx(AdminCategoryEditorView, { categoryId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
     resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Category" : "Edit Category"),
 };
-export function AdminCategoriesView({ children, getRowHref: _getRowHref, ...props }) {
+export function AdminCategoriesView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Categories" }), children] }));
     }

package/dist/features/admin/components/AdminFaqsView.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui";
-import type { AdminListingScaffoldRow } from "./DataListingView";
 export interface AdminFaqsViewProps extends ListingLayoutProps {
     actionHref?: string;
-    getRowHref?: (row: AdminListingScaffoldRow) => string;
     onBulkArchive?: (ids: string[]) => Promise<void>;
     onBulkDelete?: (ids: string[]) => Promise<void>;
 }

package/dist/features/admin/components/AdminPrizeDrawsView.js

@@ -93,7 +93,7 @@ export function AdminPrizeDrawsView({ children, ...props }) {
             const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
             return ["listingType==prize-draw", status].filter(Boolean).join(",");
         },
-        getRowHref: (row) => String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)),
+        rowHrefTemplate: String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT("{id}")),
         // Rule #7: bulk-action array sourced from the ADMIN_BULK_ACTIONS preset.
         buildBulkActions: (selection) => ADMIN_BULK_ACTIONS.prizeDraws.map((id) => ({
             id,

package/dist/features/admin/components/AdminSectionsView.js

@@ -703,7 +703,7 @@ export function AdminSectionsView({ children }) {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Reviews Section Builder" }), _jsx(Input, { label: "Section title", value: reviewsBuilder.title, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Reviews source", value: reviewsBuilder.source, onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, source: v })), options: [
                         { label: "Platform reviews (LetItRip)", value: "platform" },
                         { label: "Google Business Reviews", value: "google" },
-                    ] }), reviewsBuilder.source === "google" ? (_jsx(Input, { label: "Google Place ID", value: reviewsBuilder.placeId, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at maps.google.com/placesinventory" })) : null, _jsx(Select, { label: "Max reviews", value: String(reviewsBuilder.maxReviews), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, maxReviews: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Select, { label: "Items per view", value: String(reviewsBuilder.itemsPerView), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, itemsPerView: Number(v) })), options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }] }), _jsx(Checkbox, { checked: reviewsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(reviewsBuilder.scrollInterval), onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+                    ] }), reviewsBuilder.source === "google" ? (_jsx(Input, { label: "Google Place ID", value: reviewsBuilder.placeId, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at maps.google.com/placesinventory" })) : null, _jsx(Select, { label: "Max reviews", value: String(reviewsBuilder.maxReviews), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, maxReviews: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Select, { label: "Items per view", value: String(reviewsBuilder.itemsPerView), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, itemsPerView: Number(v) })), options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }] }), _jsx(Checkbox, { checked: reviewsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(reviewsBuilder.scrollInterval), onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) }), _jsx(Checkbox, { checked: reviewsBuilder.loop, label: "Loop carousel", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, loop: e.target.checked })) })] }));
     }
     function renderWhatsAppBuilder() {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "WhatsApp Community Builder" }), _jsx(Input, { label: "Title", value: whatsappBuilder.title, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: whatsappBuilder.description, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "WhatsApp group link", type: "url", value: whatsappBuilder.groupLink, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, groupLink: e.target.value })), placeholder: "https://chat.whatsapp.com/..." }), _jsx(Input, { label: "Member count", type: "number", min: 0, value: String(whatsappBuilder.memberCount), onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, memberCount: Math.max(0, Number(e.target.value) || 0) })) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Benefits" }), whatsappBuilder.benefits.map((benefit, index) => (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { value: benefit, onChange: (e) => setWhatsappBuilder((prev) => { const next = [...prev.benefits]; next[index] = e.target.value; return { ...prev, benefits: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: prev.benefits.filter((_, i) => i !== index) })), children: "\u2715" })] }, `wb-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: [...prev.benefits, ""] })), children: "+ Add benefit" })] }), _jsx(Input, { label: "Button text", value: whatsappBuilder.buttonText, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Testimonial (optional)", value: whatsappBuilder.testimonial, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, testimonial: e.target.value })) })] }));
@@ -715,10 +715,10 @@ export function AdminSectionsView({ children }) {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Trust Indicators Builder" }), _jsx(Input, { label: "Section title", value: trustIndicatorsBuilder.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => ({ ...prev, title: e.target.value })) }), trustIndicatorsBuilder.indicators.map((ind, index) => (_jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "md", border: "default", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Indicator ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: prev.indicators.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Icon (emoji or text)", value: ind.icon, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], icon: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Title", value: ind.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], title: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Description", value: ind.description, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], description: e.target.value }; return { ...prev, indicators: next }; }) })] }, ind.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: [...prev.indicators, { id: `ti-${Date.now()}`, icon: "✨", title: "", description: "" }] })), children: "+ Add indicator" })] }));
     }
     function renderCategoriesBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) }), _jsx(Checkbox, { checked: categoriesBuilder.loop, label: "Loop carousel", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, loop: e.target.checked })) })] }));
     }
     function renderBrandsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) }), _jsx(Checkbox, { checked: brandsBuilder.loop, label: "Loop carousel", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, loop: e.target.checked })) })] }));
     }
     function renderCarouselBuilder() {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Carousel Section Builder" }), _jsx(Input, { label: "Section title", value: carouselBuilder.title, onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Hero Carousel" }), _jsx(Select, { label: "Slide height", value: carouselBuilder.height, onValueChange: (value) => setCarouselBuilder((prev) => ({ ...prev, height: value })), options: [
@@ -786,7 +786,7 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Checkbox, { checked: customCardsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(customCardsBuilder.scrollIntervalMs), onChange: (e) => setCustomCardsBuilder((prev) => ({
                         ...prev,
                         scrollIntervalMs: Math.max(1000, Number(e.target.value) || 4000),
-                    })) }), _jsxs(Stack, { gap: "3", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => renderCardFields(card, index)), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
+                    })) }), _jsx(Checkbox, { checked: customCardsBuilder.loop, label: "Loop carousel", onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsxs(Stack, { gap: "3", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => renderCardFields(card, index)), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
     }
     function renderGoogleReviewsBuilder() {
         return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Google Reviews Builder" }), _jsx(Input, { label: "Google Place ID", value: googleReviewsBuilder.placeId, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id" }), _jsx(Input, { label: "Max reviews to show", type: "number", min: 1, max: 20, value: String(googleReviewsBuilder.maxReviews), onChange: (e) => setGoogleReviewsBuilder((prev) => ({

package/dist/features/admin/components/DataListingView.d.ts

@@ -108,8 +108,14 @@ export interface ListingViewConfig<TResponse, TRow extends {
     onRowClick?: (row: TRow, panel: {
         openEditPanel: (id: string) => void;
     }) => void;
-    /** When set, the table renders rows as anchor links to this href. */
-    getRowHref?: (row: TRow) => string;
+    /**
+     * When set, the table renders rows as anchor links to this href. Prefer a
+     * plain string with an `{id}` placeholder (e.g. "/admin/x/{id}/edit") —
+     * it's the only form safe to build inside a Server Component page.tsx,
+     * since RSC cannot pass function values across the server/client boundary.
+     * A function is only safe when the config itself is assembled client-side.
+     */
+    rowHrefTemplate?: string | ((row: TRow) => string);
     /** Hide the table toggle in the toolbar; views with no table column set should use this. */
     hideTableView?: boolean;
     /** Initial view mode (defaults to "table" when not hidden, "grid" when hidden). */

package/dist/features/admin/components/DataListingView.js

@@ -44,15 +44,19 @@ export function DataListingView({ config, }) {
     const isEditorOpen = panel.isCreateOpen || panel.isEditOpen;
     return (_jsxs(Div, { className: config.className ?? "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: config.searchPlaceholder, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || config.defaultSort, sortOptions: config.sortOptions, onSortChange: (v) => table.set("sort", v), showTableView: !config.hideTableView, toggles: config.toggles, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: config.primaryAction || config.toolbarExtra ? (_jsxs(Row, { align: "center", gap: "sm", children: [config.toolbarExtra, config.primaryAction && (_jsxs(Button, { gap: "sm", size: "sm", onClick: () => config.primaryAction.onClick({
                                 openCreatePanel: panel.openCreatePanel,
-                            }), children: [config.primaryAction.icon ?? _jsx(Plus, { className: "h-4 w-4" }), config.primaryAction.label] }))] })) : undefined }), config.renderAboveContent?.(), bulkActionItems && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActionItems })), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p), pageSize: pageSize, onPageSizeChange: setPageSize, paginationConfig: { showPageSizeSelector: true, pageSizeOptions: [10, 25, 50, 100] } }) }) })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), view === "table" ? (_jsx(DataTable, { columns: config.columns, rows: rows, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next
+                            }), children: [config.primaryAction.icon ?? _jsx(Plus, { className: "h-4 w-4" }), config.primaryAction.label] }))] })) : undefined }), config.renderAboveContent?.(), bulkActionItems && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActionItems })), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p), pageSize: pageSize, onPageSizeChange: setPageSize, paginationConfig: { showPageSizeSelector: true, pageSizeOptions: [10, 25, 50, 100] } }) }) })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), view === "table" && !config.hideTableView ? (_jsx(DataTable, { columns: config.columns, rows: rows, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: (next) => next
                             ? selection.setSelectedIds(rows.map((r) => r.id))
-                            : selection.clearSelection(), getRowHref: config.getRowHref, onRowClick: config.onRowClick
+                            : selection.clearSelection(), rowHrefTemplate: config.rowHrefTemplate, onRowClick: config.onRowClick
                             ? (row) => config.onRowClick(row, {
                                 openEditPanel: panel.openEditPanel,
                             })
                             : config.renderEditor
                                 ? (row) => panel.openEditPanel(row.id)
-                                : undefined, renderRowActions: config.renderRowActions })) : config.renderCards ? (config.renderCards(rows, view, selectionContext, isLoading)) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, onRowClick: (row) => panel.openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), config.renderFilterPanel && (_jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: config.renderFilterPanel({
+                                : undefined, renderRowActions: config.renderRowActions })) : config.renderCards ? (
+                    // The persisted view-mode preference is global, so a "table"
+                    // value can still reach here on a hideTableView-only view (see
+                    // the DataTable branch's guard above) — fall back to "grid".
+                    config.renderCards(rows, view === "table" ? "grid" : view, selectionContext, isLoading)) : (_jsx(AdminViewCards, { rows: rows, view: view === "table" ? "grid" : view, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, onRowClick: (row) => panel.openEditPanel(row.id), selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), config.renderFilterPanel && (_jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: config.renderFilterPanel({
                     pendingFilters,
                     setPendingFilters,
                     applyFilters,

package/dist/features/admin/components/DataTable.d.ts

@@ -6,7 +6,15 @@ interface DataTableProps<T extends {
     columns?: AdminTableColumn<T>[];
     rows: T[];
     isLoading?: boolean;
-    getRowHref?: (row: T) => string;
+    /**
+     * Row link target. Prefer a plain string containing an `{id}` placeholder
+     * (e.g. "/admin/products/{id}/edit") — it's the only form safe to construct
+     * inside a Server Component page.tsx, since React Server Components cannot
+     * pass function values to Client Components. A function is only safe when
+     * both the caller and DataTable are already client-side (e.g. conditional
+     * per-row routing inside an already-"use client" view).
+     */
+    rowHrefTemplate?: string | ((row: T) => string);
     onRowClick?: (row: T) => void;
     renderRowActions?: (row: T) => React.ReactNode;
     sortKey?: string;
@@ -23,5 +31,5 @@ interface DataTableProps<T extends {
 }
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages, currentPage, onPageChange, emptyLabel, getRowHref, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages, currentPage, onPageChange, emptyLabel, rowHrefTemplate, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }: DataTableProps<T>): React.JSX.Element;
 export {};

package/dist/features/admin/components/DataTable.js

@@ -43,9 +43,11 @@ function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, o
                     ? col.render(row)
                     : String(row[col.key] ?? "") }, col.key))), renderRowActions && (_jsx(Td, { padding: "xs-3", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }));
 }
-export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No records found", getRowHref, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }) {
+export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No records found", rowHrefTemplate, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }) {
     const columns = (columnsProp ?? DEFAULT_COLUMNS);
     const selectionEnabled = Boolean(onToggleSelect);
     const allRowsSelected = selectionEnabled && rows.length > 0 && rows.every((r) => selectedIds?.has(r.id));
-    return (_jsxs(Div, { surface: "card", className: `${__O.hidden}`, children: [_jsx(Div, { className: `${__O.xAuto}`, children: _jsxs(Table, { "data-testid": "data-table", size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "bg-[var(--appkit-color-bg)] dark:bg-[var(--appkit-color-surface-elevated)]", border: "default", children: [selectionEnabled && (_jsx(Th, { padding: "xs-3", scope: "col", className: "w-10", children: onToggleSelectAll && (_jsx(Checkbox, { bare: true, "data-testid": "select-all-checkbox", "aria-label": allRowsSelected ? "Deselect all" : "Select all", checked: allRowsSelected, onChange: () => onToggleSelectAll(!allRowsSelected), className: "h-4 w-4 rounded border-[var(--appkit-color-border)] accent-zinc-900 dark:accent-zinc-100" })) })), columns.map((col) => (_jsxs(Th, { scope: "col", onClick: col.sortable && onSort ? () => onSort(col.key) : undefined, className: `text-left text-[var(--appkit-color-text)] text-[var(--appkit-color-text)] ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${col.className ?? ""}`, padding: "md", weight: "semibold", children: [col.header, col.sortable && sortKey === col.key && (_jsx(Span, { className: "ml-1", children: sortDir === "asc" ? "↑" : "↓" }))] }, col.key))), renderRowActions && _jsx(Th, { padding: "xs-3", scope: "col", className: "w-12" })] }) }), _jsx(Tbody, { children: isLoading ? (Array.from({ length: 5 }).map((_, i) => (_jsxs(Tr, { border: "default", children: [selectionEnabled && _jsx(Td, { padding: "xs-3", className: "w-10" }), columns.map((col) => (_jsx(Td, { padding: "md", children: _jsx(Div, { className: "h-4 w-full animate-pulse bg-neutral-200", rounded: "default" }) }, col.key)))] }, i)))) : rows.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: columns.length + (selectionEnabled ? 1 : 0) + (renderRowActions ? 1 : 0), align: "center", color: "faint", paddingX: "md", paddingY: "md", children: emptyLabel }) })) : (rows.map((row) => (_jsx(SelectableRow, { row: row, columns: columns, isSelected: selectedIds?.has(row.id) ?? false, onToggle: onToggleSelect, renderRowActions: renderRowActions, onRowClick: onRowClick, rowHref: getRowHref?.(row), selectionEnabled: selectionEnabled }, row.id)))) })] }) }), totalPages > 1 && onPageChange && (_jsx(Row, { className: "border-t border-neutral-200", padding: "inline", align: "center", justify: "end", gap: "sm", children: Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (_jsx(Button, { onClick: () => onPageChange(p), variant: p === currentPage ? "primary" : "ghost", size: "sm", className: `h-8 w-8 rounded text-[length:var(--appkit-text-xs)] font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: p }, p))) }))] }));
+    return (_jsxs(Div, { surface: "card", className: `${__O.hidden}`, children: [_jsx(Div, { className: `${__O.xAuto}`, children: _jsxs(Table, { "data-testid": "data-table", size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "bg-[var(--appkit-color-bg)] dark:bg-[var(--appkit-color-surface-elevated)]", border: "default", children: [selectionEnabled && (_jsx(Th, { padding: "xs-3", scope: "col", className: "w-10", children: onToggleSelectAll && (_jsx(Checkbox, { bare: true, "data-testid": "select-all-checkbox", "aria-label": allRowsSelected ? "Deselect all" : "Select all", checked: allRowsSelected, onChange: () => onToggleSelectAll(!allRowsSelected), className: "h-4 w-4 rounded border-[var(--appkit-color-border)] accent-zinc-900 dark:accent-zinc-100" })) })), columns.map((col) => (_jsxs(Th, { scope: "col", onClick: col.sortable && onSort ? () => onSort(col.key) : undefined, className: `text-left text-[var(--appkit-color-text)] text-[var(--appkit-color-text)] ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${col.className ?? ""}`, padding: "md", weight: "semibold", children: [col.header, col.sortable && sortKey === col.key && (_jsx(Span, { className: "ml-1", children: sortDir === "asc" ? "↑" : "↓" }))] }, col.key))), renderRowActions && _jsx(Th, { padding: "xs-3", scope: "col", className: "w-12" })] }) }), _jsx(Tbody, { children: isLoading ? (Array.from({ length: 5 }).map((_, i) => (_jsxs(Tr, { border: "default", children: [selectionEnabled && _jsx(Td, { padding: "xs-3", className: "w-10" }), columns.map((col) => (_jsx(Td, { padding: "md", children: _jsx(Div, { className: "h-4 w-full animate-pulse bg-neutral-200", rounded: "default" }) }, col.key)))] }, i)))) : rows.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: columns.length + (selectionEnabled ? 1 : 0) + (renderRowActions ? 1 : 0), align: "center", color: "faint", paddingX: "md", paddingY: "md", children: emptyLabel }) })) : (rows.map((row) => (_jsx(SelectableRow, { row: row, columns: columns, isSelected: selectedIds?.has(row.id) ?? false, onToggle: onToggleSelect, renderRowActions: renderRowActions, onRowClick: onRowClick, rowHref: typeof rowHrefTemplate === "function"
+                                    ? rowHrefTemplate(row)
+                                    : rowHrefTemplate?.replace("{id}", encodeURIComponent(row.id)), selectionEnabled: selectionEnabled }, row.id)))) })] }) }), totalPages > 1 && onPageChange && (_jsx(Row, { className: "border-t border-neutral-200", padding: "inline", align: "center", justify: "end", gap: "sm", children: Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (_jsx(Button, { onClick: () => onPageChange(p), variant: p === currentPage ? "primary" : "ghost", size: "sm", className: `h-8 w-8 rounded text-[length:var(--appkit-text-xs)] font-medium transition ${p === currentPage ? "bg-neutral-900 text-white" : "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: p }, p))) }))] }));
 }

package/dist/features/admin/components/sections/adminSectionsBuildParse.js

@@ -190,7 +190,7 @@ export function parseProductsBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_PRODUCTS_BUILDER.loop),
     };
 }
 export function parseAuctionsBuilder(config) {
@@ -210,7 +210,7 @@ export function parseAuctionsBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_AUCTIONS_BUILDER.loop),
     };
 }
 export function parseStatsBuilder(config) {
@@ -271,7 +271,7 @@ export function parsePreOrdersBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_PRE_ORDERS_BUILDER.loop),
     };
 }
 export function parseStoresBuilder(config) {
@@ -292,7 +292,7 @@ export function parseStoresBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_STORES_BUILDER.loop),
     };
 }
 export function parseEventsBuilder(config) {
@@ -313,7 +313,7 @@ export function parseEventsBuilder(config) {
         manualResourceIds: toStringArray(resources.ids).join(", "),
         filterByCategory: toStringValue(config.filterByCategory),
         maxCount: ([5, 10, 20].includes(maxCount) ? maxCount : 10),
-        loop: toBooleanValue(config.loop, false),
+        loop: toBooleanValue(config.loop, DEFAULT_EVENTS_BUILDER.loop),
     };
 }
 export function buildSocialFeedConfig(builder) {
@@ -395,6 +395,7 @@ export function buildCategoriesConfig(builder) {
         maxCategories: builder.maxCategories,
         autoScroll: builder.autoScroll,
         scrollInterval: builder.scrollInterval,
+        loop: builder.loop,
     };
 }
 export function parseCategoriesBuilder(config) {
@@ -403,6 +404,7 @@ export function parseCategoriesBuilder(config) {
         maxCategories: toNumberValue(config.maxCategories, DEFAULT_CATEGORIES_BUILDER.maxCategories),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_CATEGORIES_BUILDER.autoScroll),
         scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_CATEGORIES_BUILDER.scrollInterval),
+        loop: toBooleanValue(config.loop, DEFAULT_CATEGORIES_BUILDER.loop),
     };
 }
 export function buildBrandsConfig(builder) {
@@ -412,6 +414,7 @@ export function buildBrandsConfig(builder) {
         maxBrands: builder.maxBrands,
         autoScroll: builder.autoScroll,
         scrollInterval: builder.scrollInterval,
+        loop: builder.loop,
     };
 }
 export function parseBrandsBuilder(config) {
@@ -421,6 +424,7 @@ export function parseBrandsBuilder(config) {
         maxBrands: toNumberValue(config.maxBrands, DEFAULT_BRANDS_BUILDER.maxBrands),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_BRANDS_BUILDER.autoScroll),
         scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_BRANDS_BUILDER.scrollInterval),
+        loop: toBooleanValue(config.loop, DEFAULT_BRANDS_BUILDER.loop),
     };
 }
 export function buildBannerConfig(builder) {
@@ -486,6 +490,7 @@ export function buildReviewsConfig(builder) {
         mobileItemsPerView: 1,
         autoScroll: builder.autoScroll,
         scrollInterval: builder.scrollInterval,
+        loop: builder.loop,
         source: builder.source,
         placeId: builder.source === "google" ? builder.placeId || undefined : undefined,
     };
@@ -497,6 +502,7 @@ export function parseReviewsBuilder(config) {
         itemsPerView: toNumberValue(config.itemsPerView, DEFAULT_REVIEWS_BUILDER.itemsPerView),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_REVIEWS_BUILDER.autoScroll),
         scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_REVIEWS_BUILDER.scrollInterval),
+        loop: toBooleanValue(config.loop, DEFAULT_REVIEWS_BUILDER.loop),
         source: toStringValue(config.source, "platform"),
         placeId: toStringValue(config.placeId),
     };
@@ -613,6 +619,7 @@ export function buildCustomCardsConfig(builder) {
         columns: builder.columns,
         autoScroll: builder.autoScroll,
         scrollIntervalMs: builder.scrollIntervalMs,
+        loop: builder.loop,
         cards: builder.cards.map((card, index) => ({
             id: card.id || `card-${index + 1}`,
             image: card.image || undefined,
@@ -639,6 +646,7 @@ export function parseCustomCardsBuilder(config) {
         columns: ([1, 2, 3, 4].includes(cols) ? cols : DEFAULT_CUSTOM_CARDS_BUILDER.columns),
         autoScroll: toBooleanValue(config.autoScroll, DEFAULT_CUSTOM_CARDS_BUILDER.autoScroll),
         scrollIntervalMs: toNumberValue(config.scrollIntervalMs, DEFAULT_CUSTOM_CARDS_BUILDER.scrollIntervalMs),
+        loop: toBooleanValue(config.loop, DEFAULT_CUSTOM_CARDS_BUILDER.loop),
         cards: cardsRaw.map((item, index) => {
             const c = (item ?? {});
             const br = toStringValue(c.borderRadius, "none");

package/dist/features/admin/components/sections/adminSectionsTypes.d.ts

@@ -150,6 +150,7 @@ export interface CategoriesBuilderState {
     maxCategories: number;
     autoScroll: boolean;
     scrollInterval: number;
+    loop: boolean;
 }
 export interface BrandsBuilderState {
     title: string;
@@ -157,6 +158,7 @@ export interface BrandsBuilderState {
     maxBrands: number;
     autoScroll: boolean;
     scrollInterval: number;
+    loop: boolean;
 }
 export interface BannerBuilderState {
     height: "sm" | "md" | "lg" | "xl";
@@ -185,6 +187,7 @@ export interface ReviewsBuilderState {
     itemsPerView: number;
     autoScroll: boolean;
     scrollInterval: number;
+    loop: boolean;
     source: "platform" | "google";
     placeId: string;
 }
@@ -249,6 +252,7 @@ export interface CustomCardsBuilderState {
     columns: 1 | 2 | 3 | 4;
     autoScroll: boolean;
     scrollIntervalMs: number;
+    loop: boolean;
     cards: CustomCardsCardBuilderEntry[];
 }
 export interface GoogleReviewsBuilderState {