@mohasinac/appkit 4.7.2 → 4.8.0

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

@@ -22,8 +22,9 @@ import { normalizeError } from "../../../../errors/normalize";
  * the underlying *Sidebar components.
  */
 import { useCallback, useEffect, useState, startTransition } from "react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
+import { useQueryClient } from "@tanstack/react-query";
 import { useDashboardNav } from "../../../../features/layout/DashboardNavContext";
 import { AdminSidebar } from "../../../../features/admin/components/AdminSidebar";
 import { StoreSidebar } from "../../../../features/seller/components/SellerSidebar";
@@ -33,7 +34,10 @@ import { filterNavItems } from "./filterNavItems";
 import { useSiteSettings } from "../../../../core/hooks/useSiteSettings";
 import { useTheme } from "../../theme";
 import { BackgroundRenderer, Div, Nav, Span } from "../../../../ui";
+import { useToast } from "../../../../ui/components/Toast";
 import { useVisualViewportInset } from "../../../../react/hooks/useVisualViewportInset";
+import { useSession } from "../../../../react/contexts/SessionContext";
+import { ROUTES } from "../../../../next/routing/route-map";
 /**
  * Hoisted drawer-state hook — the matchMedia-aware open/close logic that was
  * triplicated across admin/store/user layouts. Used internally by
@@ -153,6 +157,24 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
     const storageKey = `appkit:sidebar-open:${variant}`;
     const { desktopOpen, mobileOpen, close, closeMobile, toggle } = useResponsiveDrawer(storageKey);
     useEffect(() => { closeMobile(); }, [pathname, closeMobile]);
+    const router = useRouter();
+    const { signOut } = useSession();
+    const { showToast } = useToast();
+    const queryClient = useQueryClient();
+    const handleLogout = useCallback(async () => {
+        try {
+            await signOut();
+            void queryClient.invalidateQueries({ queryKey: ["wishlist"] });
+            void queryClient.invalidateQueries({ queryKey: ["cart"] });
+            void queryClient.invalidateQueries({ queryKey: ["notifications"] });
+            showToast("Signed out successfully", "info");
+        }
+        catch (_err) {
+            void normalizeError(_err);
+            showToast("Signed out", "info");
+        }
+        router.push(String(ROUTES.AUTH.LOGIN));
+    }, [signOut, queryClient, router, showToast]);
     const { data: settings } = useSiteSettings();
     const navConfig = settings?.navConfig;
     const { theme } = useTheme();
@@ -166,10 +188,8 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
         ? filteredGroups
         : groups;
     const crossNavLinkClass = "flex items-center gap-[var(--appkit-space-2)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[0.8125rem] font-medium text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]/60 hover:text-[var(--appkit-color-text)] transition-colors";
-    const hasCrossNav = Boolean(crossNav?.profileHref || crossNav?.storeHref || crossNav?.adminHref);
-    const renderCrossNavFooter = hasCrossNav
-        ? () => (_jsxs(Nav, { "aria-label": "Cross-dashboard links", padding: "y-xs", children: [crossNav?.storeHref && (_jsx(Link, { href: crossNav.storeHref, onClick: closeMobile, className: crossNavLinkClass, children: "Go to my Store" })), crossNav?.adminHref && (_jsx(Link, { href: crossNav.adminHref, onClick: closeMobile, className: crossNavLinkClass, children: "Back to Admin" })), crossNav?.profileHref && (_jsx(Link, { href: crossNav.profileHref, onClick: closeMobile, className: crossNavLinkClass, children: "My Profile" }))] }))
-        : undefined;
+    const logoutBtnClass = "flex w-full items-center gap-[var(--appkit-space-2)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[0.8125rem] font-medium text-error transition-colors hover:bg-error-surface hover:text-error";
+    const renderCrossNavFooter = () => (_jsxs(Nav, { "aria-label": "Cross-dashboard links", padding: "y-xs", children: [crossNav?.storeHref && (_jsx(Link, { href: crossNav.storeHref, onClick: closeMobile, className: crossNavLinkClass, children: "Go to my Store" })), crossNav?.adminHref && (_jsx(Link, { href: crossNav.adminHref, onClick: closeMobile, className: crossNavLinkClass, children: "Back to Admin" })), crossNav?.profileHref && (_jsx(Link, { href: crossNav.profileHref, onClick: closeMobile, className: crossNavLinkClass, children: "My Profile" })), _jsx("button", { type: "button", onClick: () => { closeMobile(); void handleLogout(); }, className: logoutBtnClass, children: "Log out" })] }));
     return (_jsxs(_Fragment, { children: [hasBackground && (_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: resolvedLightBackground ?? { type: "color", value: "" }, darkMode: resolvedDarkBackground ?? { type: "color", value: "" } })), variant === "admin" && (_jsx(AdminSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activePath: activeHref, groups: adminGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), variant === "store" && (_jsx(StoreSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activeHref: activeHref, items: [], groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), variant === "user" && (_jsx(UserSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, items: filteredGroups.flatMap((g) => g.items), groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), _jsx(Div, { className: [
                     "w-full flex-1 flex flex-col min-h-[calc(100dvh-var(--header-height,3.5rem))]",
                     "pb-[var(--appkit-space-16)] lg:pb-[0]", // clears the fixed mobile bottom-nav

package/dist/_internal/shared/features/cart/schema.d.ts

@@ -15,7 +15,7 @@ export declare const addToCartSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     currency: string;
     storeId: string;
-    listingType: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live";
+    listingType: "classified" | "standard" | "auction" | "pre-order" | "prize-draw" | "digital-code" | "live";
     price: number;
     storeName: string;
     productId: string;
@@ -27,7 +27,7 @@ export declare const addToCartSchema: z.ZodObject<{
     isOffer?: boolean | undefined;
 }, {
     storeId: string;
-    listingType: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live";
+    listingType: "classified" | "standard" | "auction" | "pre-order" | "prize-draw" | "digital-code" | "live";
     price: number;
     productId: string;
     productTitle: string;
@@ -73,7 +73,7 @@ export declare const mergeGuestCartSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         currency: string;
         storeId: string;
-        listingType: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live";
+        listingType: "classified" | "standard" | "auction" | "pre-order" | "prize-draw" | "digital-code" | "live";
         price: number;
         storeName: string;
         productId: string;
@@ -85,7 +85,7 @@ export declare const mergeGuestCartSchema: z.ZodObject<{
         isOffer?: boolean | undefined;
     }, {
         storeId: string;
-        listingType: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live";
+        listingType: "classified" | "standard" | "auction" | "pre-order" | "prize-draw" | "digital-code" | "live";
         price: number;
         productId: string;
         productTitle: string;
@@ -101,7 +101,7 @@ export declare const mergeGuestCartSchema: z.ZodObject<{
     guestItems: {
         currency: string;
         storeId: string;
-        listingType: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live";
+        listingType: "classified" | "standard" | "auction" | "pre-order" | "prize-draw" | "digital-code" | "live";
         price: number;
         storeName: string;
         productId: string;
@@ -115,7 +115,7 @@ export declare const mergeGuestCartSchema: z.ZodObject<{
 }, {
     guestItems: {
         storeId: string;
-        listingType: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live";
+        listingType: "classified" | "standard" | "auction" | "pre-order" | "prize-draw" | "digital-code" | "live";
         price: number;
         productId: string;
         productTitle: string;

package/dist/_internal/shared/features/orders/schema.d.ts

@@ -87,13 +87,13 @@ export declare const updateOrderStatusSchema: z.ZodObject<{
     carrier: z.ZodOptional<z.ZodString>;
     note: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    status: "cancelled" | "processing" | "refunded" | "shipped" | "delivered" | "return_requested";
+    status: "cancelled" | "processing" | "refunded" | "delivered" | "shipped" | "return_requested";
     orderId: string;
     note?: string | undefined;
     trackingNumber?: string | undefined;
     carrier?: string | undefined;
 }, {
-    status: "cancelled" | "processing" | "refunded" | "shipped" | "delivered" | "return_requested";
+    status: "cancelled" | "processing" | "refunded" | "delivered" | "shipped" | "return_requested";
     orderId: string;
     note?: string | undefined;
     trackingNumber?: string | undefined;

package/dist/_internal/shared/features/products/schema.d.ts

@@ -33,12 +33,12 @@ export declare const productInputSchema: z.ZodObject<{
     mainImage: string;
     images: string[];
     tags: string[];
+    features?: string[] | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
     seoDescription?: string | undefined;
     seoKeywords?: string[] | undefined;
     brandSlug?: string | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;
@@ -53,6 +53,7 @@ export declare const productInputSchema: z.ZodObject<{
     price: number;
     mainImage: string;
     currency?: string | undefined;
+    features?: string[] | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
     seoDescription?: string | undefined;
@@ -62,7 +63,6 @@ export declare const productInputSchema: z.ZodObject<{
     availableQuantity?: number | undefined;
     images?: string[] | undefined;
     tags?: string[] | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;
@@ -99,6 +99,7 @@ export declare const productUpdateSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     currency?: string | undefined;
     title?: string | undefined;
+    features?: string[] | undefined;
     category?: string | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
@@ -111,7 +112,6 @@ export declare const productUpdateSchema: z.ZodObject<{
     mainImage?: string | undefined;
     images?: string[] | undefined;
     tags?: string[] | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;
@@ -123,6 +123,7 @@ export declare const productUpdateSchema: z.ZodObject<{
 }, {
     currency?: string | undefined;
     title?: string | undefined;
+    features?: string[] | undefined;
     category?: string | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
@@ -135,7 +136,6 @@ export declare const productUpdateSchema: z.ZodObject<{
     mainImage?: string | undefined;
     images?: string[] | undefined;
     tags?: string[] | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;
@@ -193,12 +193,12 @@ export declare const auctionInputSchema: z.ZodObject<{
     auctionEndDate: string;
     startingBid: number;
     autoExtendable: boolean;
+    features?: string[] | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
     seoDescription?: string | undefined;
     seoKeywords?: string[] | undefined;
     brandSlug?: string | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;
@@ -221,6 +221,7 @@ export declare const auctionInputSchema: z.ZodObject<{
     auctionEndDate: string;
     startingBid: number;
     currency?: string | undefined;
+    features?: string[] | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
     seoDescription?: string | undefined;
@@ -230,7 +231,6 @@ export declare const auctionInputSchema: z.ZodObject<{
     availableQuantity?: number | undefined;
     images?: string[] | undefined;
     tags?: string[] | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;
@@ -291,12 +291,12 @@ export declare const preOrderInputSchema: z.ZodObject<{
     preOrderDeliveryDate: string;
     preOrderProductionStatus: "upcoming" | "in_production" | "ready_to_ship";
     preOrderCancellable: boolean;
+    features?: string[] | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
     seoDescription?: string | undefined;
     seoKeywords?: string[] | undefined;
     brandSlug?: string | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;
@@ -315,6 +315,7 @@ export declare const preOrderInputSchema: z.ZodObject<{
     mainImage: string;
     preOrderDeliveryDate: string;
     currency?: string | undefined;
+    features?: string[] | undefined;
     description?: string | undefined;
     seoTitle?: string | undefined;
     seoDescription?: string | undefined;
@@ -324,7 +325,6 @@ export declare const preOrderInputSchema: z.ZodObject<{
     availableQuantity?: number | undefined;
     images?: string[] | undefined;
     tags?: string[] | undefined;
-    features?: string[] | undefined;
     shippingInfo?: string | undefined;
     returnPolicy?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | undefined;

package/dist/features/account/schemas/index.d.ts

@@ -42,14 +42,14 @@ export declare const notificationPreferencesSchema: z.ZodObject<{
     push: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     push?: boolean | undefined;
-    promotions?: boolean | undefined;
     newsletter?: boolean | undefined;
+    promotions?: boolean | undefined;
     sms?: boolean | undefined;
     orderUpdates?: boolean | undefined;
 }, {
     push?: boolean | undefined;
-    promotions?: boolean | undefined;
     newsletter?: boolean | undefined;
+    promotions?: boolean | undefined;
     sms?: boolean | undefined;
     orderUpdates?: boolean | undefined;
 }>;
@@ -113,14 +113,14 @@ export declare const userProfileSchema: z.ZodObject<{
         push: z.ZodOptional<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         push?: boolean | undefined;
-        promotions?: boolean | undefined;
         newsletter?: boolean | undefined;
+        promotions?: boolean | undefined;
         sms?: boolean | undefined;
         orderUpdates?: boolean | undefined;
     }, {
         push?: boolean | undefined;
-        promotions?: boolean | undefined;
         newsletter?: boolean | undefined;
+        promotions?: boolean | undefined;
         sms?: boolean | undefined;
         orderUpdates?: boolean | undefined;
     }>>;
@@ -132,9 +132,6 @@ export declare const userProfileSchema: z.ZodObject<{
     displayName?: string | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    phone?: string | undefined;
-    photoURL?: string | undefined;
-    bio?: string | undefined;
     addresses?: {
         country: string;
         id: string;
@@ -147,10 +144,13 @@ export declare const userProfileSchema: z.ZodObject<{
         phone?: string | undefined;
         line2?: string | undefined;
     }[] | undefined;
+    phone?: string | undefined;
+    photoURL?: string | undefined;
+    bio?: string | undefined;
     notificationPreferences?: {
         push?: boolean | undefined;
-        promotions?: boolean | undefined;
         newsletter?: boolean | undefined;
+        promotions?: boolean | undefined;
         sms?: boolean | undefined;
         orderUpdates?: boolean | undefined;
     } | undefined;
@@ -160,9 +160,6 @@ export declare const userProfileSchema: z.ZodObject<{
     displayName?: string | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    phone?: string | undefined;
-    photoURL?: string | undefined;
-    bio?: string | undefined;
     addresses?: {
         country: string;
         id: string;
@@ -175,10 +172,13 @@ export declare const userProfileSchema: z.ZodObject<{
         phone?: string | undefined;
         line2?: string | undefined;
     }[] | undefined;
+    phone?: string | undefined;
+    photoURL?: string | undefined;
+    bio?: string | undefined;
     notificationPreferences?: {
         push?: boolean | undefined;
-        promotions?: boolean | undefined;
         newsletter?: boolean | undefined;
+        promotions?: boolean | undefined;
         sms?: boolean | undefined;
         orderUpdates?: boolean | undefined;
     } | undefined;

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

@@ -34,6 +34,7 @@ const ADMIN_ART_CONFIG = {
         ].join(" · "),
         status: toStringValue(item.status, "draft"),
         updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        image: toStringValue(item.mainImage, "") || undefined,
     })),
     getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
     buildFilters: () => "listingType==art",

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

@@ -42,6 +42,7 @@ export function AdminBlogView({ children, ...props }) {
             ].join(" · "),
             status: toStringValue(item.status, "Draft"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            image: toStringValue(item.coverImage, "") || undefined,
         })),
         getTotal: (response, mappedRows) => {
             if (typeof response.meta?.filteredTotal === "number")

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

@@ -34,6 +34,7 @@ const ADMIN_CLASSIFIED_CONFIG = {
         ].join(" · "),
         status: toStringValue(item.status, "draft"),
         updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        image: toStringValue(item.mainImage, "") || undefined,
     })),
     getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
     buildFilters: () => "listingType==classified",

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

@@ -40,6 +40,7 @@ const ADMIN_DIGITAL_CODES_CONFIG = {
                 .join(" · "),
             status: toStringValue(item.status, "draft"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            image: toStringValue(item.mainImage, "") || undefined,
         };
     }),
     getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,

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

@@ -39,6 +39,7 @@ const ADMIN_LIVE_CONFIG = {
                 .join(" · "),
             status: toStringValue(item.status, "draft"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            image: toStringValue(item.mainImage, "") || undefined,
         };
     }),
     getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,

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

@@ -86,6 +86,7 @@ export function AdminPrizeDrawsView({ children, ...props }) {
                 drawDate: item.prizeRevealWindowEnd
                     ? toRelativeDate(item.prizeRevealWindowEnd)
                     : "TBA",
+                image: toStringValue(item.mainImage, "") || undefined,
             };
         }),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,

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

@@ -154,6 +154,7 @@ export function AdminProductsView({ children, ...props }) {
                 isOnSale: Boolean(item.isOnSale),
                 isSold: Boolean(item.isSold),
                 barcodeId: typeof item.barcodeId === "string" ? item.barcodeId : undefined,
+                image: toStringValue(item.mainImage, "") || undefined,
             };
             return overrides[id] ? { ...base, ...overrides[id] } : base;
         }),

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

@@ -34,6 +34,7 @@ const ADMIN_STICKERS_CONFIG = {
         ].join(" · "),
         status: toStringValue(item.status, "draft"),
         updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        image: toStringValue(item.mainImage, "") || undefined,
     })),
     getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
     buildFilters: () => "listingType==stickers",

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

@@ -64,6 +64,7 @@ export function AdminStoresView({ children, ...props }) {
             ].join(" · "),
             status: toStringValue(item.status, "Pending"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            image: toStringValue(item.storeLogoURL, "") || undefined,
             _raw: item,
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,

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

@@ -132,6 +132,7 @@ export function AdminUsersView({ children, ...props }) {
                 ].join(" · "),
                 status,
                 updatedAt: toRelativeDate(item.lastLoginAt ?? item.createdAt),
+                image: toStringValue(item.photoURL, "") || undefined,
                 _raw: item,
             };
         }),

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

@@ -10,6 +10,8 @@ interface AdminViewCardsProps {
     onToggleSelect?: (id: string) => void;
     /** Same row-actions menu DataTable renders in its table view — mirrored here so cards carry the same quick actions, not just navigation. */
     renderRowActions?: (row: AdminListingScaffoldRow) => React.ReactNode;
+    /** Resource-type emoji fallback for rows without their own `image` (e.g. 👤 for users, 🏪 for stores). */
+    resourceIcon?: string;
 }
-export declare function AdminViewCards({ rows, view, isLoading, emptyLabel, onRowClick, selectedIdSet, onToggleSelect, renderRowActions, }: AdminViewCardsProps): React.JSX.Element;
+export declare function AdminViewCards({ rows, view, isLoading, emptyLabel, onRowClick, selectedIdSet, onToggleSelect, renderRowActions, resourceIcon, }: AdminViewCardsProps): React.JSX.Element;
 export {};

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

@@ -1,12 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, Div, Grid, Row, Span, Stack, Text } from "../../../ui";
+import { getStatusTone } from "../../../ui/columns/column-renderers";
+import { MediaImage } from "../../media/MediaImage";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
 const __O = {
     hidden: "overflow-hidden",
 };
+const STATUS_TONE_CLASSES = {
+    success: "bg-success-surface text-success",
+    warning: "bg-warning-surface text-warning",
+    error: "bg-error-surface text-error",
+    info: "bg-info-surface text-info",
+    neutral: "bg-primary-50 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300",
+};
+function RowAvatar({ image, alt, icon, size = "9" }) {
+    const dims = size === "12" ? "h-12 w-12" : "h-9 w-9";
+    return (_jsx(Div, { className: `relative ${dims} shrink-0 overflow-hidden`, rounded: "full", children: _jsx(MediaImage, { src: image, alt: alt, size: "avatar", fallback: icon }) }));
+}
 const FLAG_BADGES = [
     { key: "featured", label: "Featured", color: "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning" },
     { key: "isPromoted", label: "Promoted", color: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300" },
@@ -14,7 +27,8 @@ const FLAG_BADGES = [
     { key: "isSold", label: "Sold", color: "bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]" },
 ];
 function StatusBadge({ status }) {
-    return (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex bg-primary-50 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300 truncate max-w-[120px]", rounded: "full", padding: "pill-xs", children: status }));
+    const tone = getStatusTone(status);
+    return (_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex truncate max-w-[120px] ${STATUS_TONE_CLASSES[tone]}`, rounded: "full", padding: "pill-xs", children: status }));
 }
 function SkeletonCard({ view }) {
     if (view === "list") {
@@ -22,7 +36,7 @@ function SkeletonCard({ view }) {
     }
     return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} animate-pulse`, children: _jsxs(Stack, { gap: "xs", padding: "md", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-5 w-20 mt-1", surface: "subtle", rounded: "full" }), _jsx(Div, { className: "h-3 w-1/3", surface: "subtle", rounded: "default" })] }) }));
 }
-function AdminCardItem({ row, view, selected, onToggleSelect, onRowClick, renderRowActions, }) {
+function AdminCardItem({ row, view, selected, onToggleSelect, onRowClick, renderRowActions, resourceIcon, }) {
     const flags = FLAG_BADGES.filter(({ key }) => Boolean(row[key]));
     const handleClick = (e) => {
         if (e.target.closest('[data-no-row-click]'))
@@ -33,16 +47,16 @@ function AdminCardItem({ row, view, selected, onToggleSelect, onRowClick, render
         return (_jsxs(Row, { gap: "sm", className: [
                 "px-[var(--appkit-space-4)] py-[var(--appkit-space-3)] cursor-pointer transition-colors hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]/50",
                 selected ? "bg-primary-50/40 dark:bg-primary-900/10" : "",
-            ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsx(Div, { "data-no-row-click": true, className: "shrink-0", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: _jsx(Checkbox, { bare: true, checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }) })), _jsxs(Stack, { gap: "none", className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "truncate", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary }), row.barcodeId && (_jsx(Text, { size: "xs", color: "faint", className: "truncate font-mono", children: row.barcodeId }))] }), flags.length > 0 && (_jsx(Row, { gap: "xs", className: "hidden sm:flex shrink-0", children: flags.map(({ key, label, color }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${color}`, rounded: "full", children: label }, key))) })), _jsx(StatusBadge, { status: row.status }), _jsx(Span, { size: "xs", color: "muted", className: "hidden sm:block shrink-0 w-24", align: "end", children: row.updatedAt }), renderRowActions && (_jsx(Div, { "data-no-row-click": true, className: "shrink-0", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }));
+            ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsx(Div, { "data-no-row-click": true, className: "shrink-0", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: _jsx(Checkbox, { bare: true, checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }) })), _jsx(RowAvatar, { image: row.image, alt: row.primary, icon: resourceIcon }), _jsxs(Stack, { gap: "none", className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "truncate", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary }), row.barcodeId && (_jsx(Text, { size: "xs", color: "faint", className: "truncate font-mono", children: row.barcodeId }))] }), flags.length > 0 && (_jsx(Row, { gap: "xs", className: "hidden sm:flex shrink-0", children: flags.map(({ key, label, color }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${color}`, rounded: "full", children: label }, key))) })), _jsx(StatusBadge, { status: row.status }), _jsx(Span, { size: "xs", color: "muted", className: "hidden sm:block shrink-0 w-24", align: "end", children: row.updatedAt }), renderRowActions && (_jsx(Div, { "data-no-row-click": true, className: "shrink-0", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }));
     }
     return (_jsxs(Div, { rounded: "xl", className: [
             "border overflow-hidden cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5",
             selected
                 ? "border-primary ring-1 ring-primary/20 bg-primary-50/30 dark:bg-primary-900/10"
                 : "border-zinc-100 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]",
-        ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsxs(Row, { gap: "xs", "data-no-row-click": true, paddingY: "t-sm", padding: "x-sm", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: [_jsx(Checkbox, { bare: true, checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }), flags.length > 0 && (_jsx(Row, { gap: "xs", wrap: true, children: flags.map(({ key, label, color }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${color}`, rounded: "full", children: label }, key))) }))] })), _jsxs(Stack, { gap: "xs", className: `${__P.p3}.5`, children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "line-clamp-2 leading-snug", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary }), row.barcodeId && (_jsx(Text, { size: "xs", color: "faint", className: "truncate font-mono", children: row.barcodeId }))] }), _jsxs(Row, { justify: "between", gap: "xs", children: [_jsx(StatusBadge, { status: row.status }), _jsx(Span, { color: "muted", className: "text-[11px] shrink-0", children: row.updatedAt })] }), renderRowActions && (_jsx(Row, { "data-no-row-click": true, justify: "end", gap: "xs", className: "border-t border-[var(--appkit-color-border)] -mx-[var(--appkit-space-3)] -mb-[var(--appkit-space-3)] mt-[var(--appkit-space-1)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] })] }));
+        ].filter(Boolean).join(" "), onClick: handleClick, role: onRowClick ? "button" : undefined, children: [onToggleSelect && (_jsxs(Row, { gap: "xs", "data-no-row-click": true, paddingY: "t-sm", padding: "x-sm", onClick: (e) => { e.stopPropagation(); onToggleSelect(row.id); }, children: [_jsx(Checkbox, { bare: true, checked: selected, onChange: () => onToggleSelect(row.id), className: "h-4 w-4 rounded border-zinc-300 text-primary accent-primary cursor-pointer", "aria-label": `Select ${row.primary}` }), flags.length > 0 && (_jsx(Row, { gap: "xs", wrap: true, children: flags.map(({ key, label, color }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${color}`, rounded: "full", children: label }, key))) }))] })), _jsxs(Stack, { gap: "xs", className: `${__P.p3}.5`, children: [_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(RowAvatar, { image: row.image, alt: row.primary, icon: resourceIcon, size: "12" }), _jsxs(Stack, { gap: "none", className: "min-w-0 flex-1", children: [_jsx(Text, { size: "sm", weight: "semibold", className: "line-clamp-2 leading-snug", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: row.secondary })] })] }), row.barcodeId && (_jsx(Text, { size: "xs", color: "faint", className: "truncate font-mono", children: row.barcodeId })), _jsxs(Row, { justify: "between", gap: "xs", children: [_jsx(StatusBadge, { status: row.status }), _jsx(Span, { color: "muted", className: "text-[11px] shrink-0", children: row.updatedAt })] }), renderRowActions && (_jsx(Row, { "data-no-row-click": true, justify: "end", gap: "xs", className: "border-t border-[var(--appkit-color-border)] -mx-[var(--appkit-space-3)] -mb-[var(--appkit-space-3)] mt-[var(--appkit-space-1)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] })] }));
 }
-export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items found", onRowClick, selectedIdSet, onToggleSelect, renderRowActions, }) {
+export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items found", onRowClick, selectedIdSet, onToggleSelect, renderRowActions, resourceIcon, }) {
     if (isLoading) {
         const count = view === "grid" ? 12 : 8;
         if (view === "list") {
@@ -54,7 +68,7 @@ export function AdminViewCards({ rows, view, isLoading, emptyLabel = "No items f
         return (_jsx(Text, { paddingY: "3xl", size: "sm", color: "muted", align: "center", children: emptyLabel }));
     }
     if (view === "list") {
-        return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} divide-y divide-zinc-100 divide-[var(--appkit-color-border)]`, children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "list", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick, renderRowActions: renderRowActions }, row.id))) }));
+        return (_jsx(Div, { rounded: "xl", border: "subtle", className: `${__O.hidden} divide-y divide-zinc-100 divide-[var(--appkit-color-border)]`, children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "list", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick, renderRowActions: renderRowActions, resourceIcon: resourceIcon }, row.id))) }));
     }
-    return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "grid", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick, renderRowActions: renderRowActions }, row.id))) }));
+    return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: rows.map((row) => (_jsx(AdminCardItem, { row: row, view: "grid", selected: selectedIdSet?.has(row.id) ?? false, onToggleSelect: onToggleSelect, onRowClick: onRowClick, renderRowActions: renderRowActions, resourceIcon: resourceIcon }, row.id))) }));
 }

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

@@ -39,6 +39,8 @@ export interface AdminListingScaffoldRow {
     isOnSale?: boolean;
     isSold?: boolean;
     barcodeId?: string;
+    /** Row photo/thumbnail (avatar, product image, store logo, cover image, etc). Falls back to the table's resource icon when omitted. */
+    image?: string;
 }
 export interface ListingSortOption {
     value: string;

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

@@ -4,6 +4,7 @@ import { Plus } from "lucide-react";
 import { BulkActionBar, Button, Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, SideDrawer, StickyToolbar } from "../../../ui";
 import { useBottomActions } from "../../layout";
 import { useAdminListing } from "../hooks/useAdminListing";
+import { getResourceIcon } from "../../../ui/columns/column-renderers";
 import { AdminViewCards } from "./AdminViewCards";
 import { DataTable } from "./DataTable";
 export function DataListingView({ config, }) {
@@ -21,6 +22,7 @@ export function DataListingView({ config, }) {
         rows,
         openEditPanel: panel.openEditPanel,
     };
+    const resourceIcon = getResourceIcon(typeof config.queryKey[1] === "string" ? config.queryKey[1] : undefined);
     const bulkActionItems = config.buildBulkActions?.(selectionContext);
     // Mobile bulk bar
     useBottomActions(selection.selectedCount > 0 && bulkActionItems
@@ -64,7 +66,7 @@ export function DataListingView({ config, }) {
                 : undefined;
     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" && !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
+                            }), 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, resourceIcon: resourceIcon, 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(), rowHrefTemplate: config.rowHrefTemplate, onRowClick: config.onRowClick
                             ? (row) => config.onRowClick(row, {
@@ -76,7 +78,7 @@ export function DataListingView({ config, }) {
                     // 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: resolvedRowClick
+                    config.renderCards(rows, view === "table" ? "grid" : view, selectionContext, isLoading)) : (_jsx(AdminViewCards, { rows: rows, view: view === "table" ? "grid" : view, resourceIcon: resourceIcon, isLoading: isLoading, emptyLabel: config.emptyLabel ?? `No ${config.title.toLowerCase()} found`, onRowClick: resolvedRowClick
                             ? (row) => resolvedRowClick(row)
                             : undefined, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle, renderRowActions: config.renderRowActions
                             ? (row) => config.renderRowActions(row)

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

@@ -28,8 +28,10 @@ interface DataTableProps<T extends {
     selectedIds?: Set<string>;
     onToggleSelect?: (id: string, selected: boolean) => void;
     onToggleSelectAll?: (nextAllSelected: boolean) => void;
+    /** Resource-type emoji fallback for the default "Name" column's avatar when a row has no `image` and no custom `columns` were supplied. */
+    resourceIcon?: string;
 }
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, rows, isLoading, sortKey, sortDir, onSort, totalPages, currentPage, onPageChange, emptyLabel, rowHrefTemplate, 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, resourceIcon, }: DataTableProps<T>): React.JSX.Element;
 export {};