@mohasinac/appkit 4.7.3 → 4.8.1

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 {};

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

@@ -1,30 +1,45 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseListingCard, Button, Checkbox, Div, Row, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr } from "../../../ui";
+import { getStatusTone } from "../../../ui/columns/column-renderers";
+import { MediaImage } from "../../media/MediaImage";
 import { useLongPress } from "../../../react/hooks/useLongPress";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
 };
-const DEFAULT_COLUMNS = [
-    {
-        key: "primary",
-        header: "Name",
-        render: (row) => (_jsxs(Stack, { gap: "none", className: "", children: [_jsx(Text, { weight: "medium", color: "primary", children: String(row.primary ?? "") }), row.secondary ? _jsx(Text, { size: "xs", color: "muted", children: String(row.secondary) }) : null] })),
-    },
-    {
-        key: "status",
-        header: "Status",
-        className: "w-32",
-        render: (row) => (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex bg-primary-50 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", rounded: "full", padding: "pill-sm-tall", children: String(row.status ?? "—") })),
-    },
-    {
-        key: "updatedAt",
-        header: "Updated",
-        className: "w-32",
-        render: (row) => _jsx(Span, { size: "sm", color: "muted", children: String(row.updatedAt ?? "") }),
-    },
-];
+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 buildDefaultColumns(resourceIcon) {
+    return [
+        {
+            key: "primary",
+            header: "Name",
+            render: (row) => (_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Div, { className: "relative h-8 w-8 shrink-0", overflow: "hidden", rounded: "full", children: _jsx(MediaImage, { src: typeof row.image === "string" ? row.image : undefined, alt: String(row.primary ?? ""), size: "avatar", fallback: resourceIcon }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "medium", color: "primary", className: "truncate", children: String(row.primary ?? "") }), row.secondary ? _jsx(Text, { size: "xs", color: "muted", className: "truncate", children: String(row.secondary) }) : null] })] })),
+        },
+        {
+            key: "status",
+            header: "Status",
+            className: "w-32",
+            render: (row) => {
+                const status = String(row.status ?? "—");
+                const tone = getStatusTone(status);
+                return (_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex ${STATUS_TONE_CLASSES[tone]}`, rounded: "full", padding: "pill-sm-tall", children: status }));
+            },
+        },
+        {
+            key: "updatedAt",
+            header: "Updated",
+            className: "w-32",
+            render: (row) => _jsx(Span, { size: "sm", color: "muted", children: String(row.updatedAt ?? "") }),
+        },
+    ];
+}
 function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, onRowClick, rowHref, selectionEnabled, }) {
     const longPress = useLongPress(() => onToggle?.(row.id, !isSelected));
     const handleClick = onRowClick
@@ -43,8 +58,8 @@ 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", rowHrefTemplate, onRowClick, renderRowActions, selectedIds, onToggleSelect, onToggleSelectAll, }) {
-    const columns = (columnsProp ?? DEFAULT_COLUMNS);
+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, resourceIcon, }) {
+    const columns = (columnsProp ?? buildDefaultColumns(resourceIcon));
     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: typeof rowHrefTemplate === "function"