@mohasinac/appkit 4.15.0 → 4.16.1

package/dist/contracts/extend.js

@@ -37,6 +37,26 @@
  * <ProductGrid products={products} {...productExt.slots} />
  * ```
  */
+/**
+ * Tailwind classes per priority. `always` emits nothing — an unprefixed
+ * column is visible at every width.
+ *
+ * Written out in full rather than interpolated: Tailwind's scanner only sees
+ * literal class strings, so `hidden ${bp}:table-cell` would be purged.
+ */
+export const COLUMN_PRIORITY_CLASS = {
+    always: "",
+    md: "hidden md:table-cell",
+    lg: "hidden lg:table-cell",
+    xl: "hidden xl:table-cell",
+};
+/** The same, for a non-table (card/list) cell where `table-cell` is wrong. */
+export const COLUMN_PRIORITY_CLASS_BLOCK = {
+    always: "",
+    md: "hidden md:block",
+    lg: "hidden lg:block",
+    xl: "hidden xl:block",
+};
 /**
  * Merges an array of extra filter/sort definitions with a base set,
  * respecting `position` ordering. Used internally by listing views.

package/dist/contracts/index.d.ts

@@ -17,7 +17,8 @@ export type { ExtraFormField, ExtraFieldRenderArgs } from "./form";
 export { registerFormFields, resolveFormFields, removeFormFields, _resetFormFields, } from "./form";
 export type { RouteStub, ApiRouteStub, FeatureManifest, FeaturesConfig, } from "./feature";
 export type { SiteConfig, NavItem } from "./config";
-export type { WithTransformOpts, GenericListResponse, TableColumn, ColumnExtensionOpts, LayoutSlots, FeatureExtension, } from "./extend";
+export type { WithTransformOpts, GenericListResponse, TableColumn, ColumnPriority, ColumnExtensionOpts, LayoutSlots, FeatureExtension, } from "./extend";
+export { COLUMN_PRIORITY_CLASS, COLUMN_PRIORITY_CLASS_BLOCK } from "./extend";
 export type { PaginationConfig, StickyConfig, TableConfig, TableViewMode, } from "./table";
 export { DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, DEFAULT_TABLE_CONFIG, mergeTableConfig, } from "./table";
 export type { IFieldOps, FieldSentinel } from "./field-ops";

package/dist/contracts/index.js

@@ -10,6 +10,8 @@ export { IShippingProvider } from "./shipping";
 export { registerProviders, getProviders, _resetProviders } from "./registry";
 export { setCollectionHooks, getCollectionHooks, removeCollectionHooks, _resetCollectionHooks, } from "./repository";
 export { registerFormFields, resolveFormFields, removeFormFields, _resetFormFields, } from "./form";
+// Value exports (the priority→class maps are runtime lookups, not types).
+export { COLUMN_PRIORITY_CLASS, COLUMN_PRIORITY_CLASS_BLOCK } from "./extend";
 export { DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, DEFAULT_TABLE_CONFIG, mergeTableConfig, } from "./table";
 export { registerFieldOps, serverTimestamp, increment, arrayUnion, arrayRemove, deleteField, } from "./field-ops";
 export { registerClientRealtimeProvider, getClientRealtimeProvider, } from "./client-realtime";

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

@@ -1,7 +1,7 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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 { STATUS_TONE_CLASSES, renderStatusBadge } from "../../../ui/columns/cell-renderers";
 import { MediaImage } from "../../media/MediaImage";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -9,26 +9,33 @@ const __P = {
 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 }) }));
 }
+/*
+ * Flag chips, all drawn from the shared tone map.
+ *
+ * Three defects lived in the previous literal list:
+ *  - `isSold` carried TWO backgrounds and TWO inks on one element
+ *    (`bg-…surface … bg-…surface-elevated …`). Tailwind emits all four and
+ *    stylesheet order — not string order — decides the winner, so the painted
+ *    colour was not what the list said. The identical bug was found and fixed
+ *    on the scammer status badge the same week.
+ *  - `isPromoted` was raw dual-theme purple (`bg-purple-100 … dark:bg-purple-900/30`),
+ *    the hand-written theme branching that variants exist to absorb.
+ *  - `featured` repeated its light classes under `dark:`, which is a no-op —
+ *    `-surface` tokens already invert with the theme.
+ */
 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" },
-    { key: "isOnSale", label: "Sale", color: "bg-success-surface text-success" },
-    { 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)]" },
+    { key: "featured", label: "Featured", tone: "warning" },
+    { key: "isPromoted", label: "Promoted", tone: "info" },
+    { key: "isOnSale", label: "Sale", tone: "success" },
+    // Sold is the absence of availability, not a status outcome — neutral.
+    { key: "isSold", label: "Sold", tone: "neutral" },
 ];
 function StatusBadge({ 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 }));
+    return _jsx(_Fragment, { children: renderStatusBadge(status) });
 }
 function SkeletonCard({ view }) {
     if (view === "list") {
@@ -47,14 +54,14 @@ 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}` }) })), _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) }))] }));
+            ].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, tone }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${STATUS_TONE_CLASSES[tone]}`, 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(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) }))] })] }));
+        ].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, tone }) => (_jsx(Span, { padding: "pill-2xs", weight: "medium", className: `inline-flex text-[10px] ${STATUS_TONE_CLASSES[tone]}`, 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, resourceIcon, }) {
     if (isLoading) {

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

@@ -7,7 +7,21 @@ import { useAdminListing } from "../hooks/useAdminListing";
 import { getResourceIcon } from "../../../ui/columns/column-renderers";
 import { AdminViewCards } from "./AdminViewCards";
 import { DataTable } from "./DataTable";
+import { useBreakpoint } from "../../../react/hooks/useBreakpoint";
 export function DataListingView({ config, }) {
+    /*
+     * Below `md` the table view is suppressed entirely and the list/card view is
+     * rendered instead.
+     *
+     * No amount of per-column hiding rescues a grid at 320px — even a two-column
+     * table wraps its cells, so rows grow to different heights and stop being
+     * scannable. `TableColumn.priority` handles density from `md` upward; this
+     * handles the case below it, where the answer is "not a table at all".
+     *
+     * The user's stored preference is untouched, so widening the window brings
+     * their table straight back.
+     */
+    const { isMobile } = useBreakpoint();
     const effectiveInitialView = config.initialView ?? "list";
     const listing = useAdminListing({
         ...config,
@@ -66,7 +80,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, resourceIcon: resourceIcon, 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 && !isMobile ? (_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, {

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

@@ -1,36 +1,26 @@
 "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 { renderStatusBadge, renderThumbnail } from "../../../ui/columns/cell-renderers";
+import { resolveColumnPriority } from "../../../ui/columns/build-columns";
+import { COLUMN_PRIORITY_CLASS } from "../../../contracts/extend";
 import { useLongPress } from "../../../react/hooks/useLongPress";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
 };
-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] })] })),
+            render: (row) => (_jsxs(Row, { gap: "sm", align: "center", children: [renderThumbnail(typeof row.image === "string" ? row.image : undefined, String(row.primary ?? ""), { rounded: "full", 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 }));
-            },
+            render: (row) => renderStatusBadge(row.status == null ? null : String(row.status)),
         },
         {
             key: "updatedAt",
@@ -54,7 +44,7 @@ function SelectableRow({ row, columns, isSelected, onToggle, renderRowActions, o
         }
         : undefined;
     const isInteractive = Boolean(onRowClick ?? rowHref);
-    return (_jsxs(Tr, { "data-testid": "data-table-row", onClick: handleClick, onKeyDown: handleKeyDown, role: isInteractive ? "link" : undefined, tabIndex: isInteractive ? 0 : undefined, onMouseDown: selectionEnabled && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: selectionEnabled && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: selectionEnabled && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: selectionEnabled && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: selectionEnabled && !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: selectionEnabled && !isSelected ? longPress.onTouchCancel : undefined, className: `hover:bg-[var(--appkit-color-bg)] dark:hover:bg-[var(--appkit-color-bg)] ${isInteractive ? "cursor-pointer" : ""} ${isSelected ? "bg-primary/5 dark:bg-primary/10" : ""}`, border: "default", children: [selectionEnabled && (_jsx(Td, { padding: "xs-3", className: "relative w-10", onClick: (e) => e.stopPropagation(), children: _jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onToggle?.(row.id, !isSelected); }, label: isSelected ? "Deselect row" : "Select row", position: "top-1/2 left-2 -translate-y-1/2", "data-testid": "row-checkbox" }) })), columns.map((col) => (_jsx(Td, { color: "muted", className: col.className ?? "", padding: "md", children: col.render
+    return (_jsxs(Tr, { "data-testid": "data-table-row", onClick: handleClick, onKeyDown: handleKeyDown, role: isInteractive ? "link" : undefined, tabIndex: isInteractive ? 0 : undefined, onMouseDown: selectionEnabled && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: selectionEnabled && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: selectionEnabled && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: selectionEnabled && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: selectionEnabled && !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: selectionEnabled && !isSelected ? longPress.onTouchCancel : undefined, className: `hover:bg-[var(--appkit-color-bg)] dark:hover:bg-[var(--appkit-color-bg)] ${isInteractive ? "cursor-pointer" : ""} ${isSelected ? "bg-primary/5 dark:bg-primary/10" : ""}`, border: "default", children: [selectionEnabled && (_jsx(Td, { padding: "xs-3", className: "relative w-10", onClick: (e) => e.stopPropagation(), children: _jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onToggle?.(row.id, !isSelected); }, label: isSelected ? "Deselect row" : "Select row", position: "top-1/2 left-2 -translate-y-1/2", "data-testid": "row-checkbox" }) })), columns.map((col) => (_jsx(Td, { color: "muted", className: `${COLUMN_PRIORITY_CLASS[resolveColumnPriority(col)]} ${col.className ?? ""}`, padding: "md", children: col.render
                     ? col.render(row)
                     : String(row[col.key] ?? "") }, col.key))), renderRowActions && (_jsx(Td, { padding: "xs-3", onClick: (e) => e.stopPropagation(), children: renderRowActions(row) }))] }));
 }
@@ -62,7 +52,7 @@ export function DataTable({ columns: columnsProp, rows, isLoading, sortKey, sort
     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"
+    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)] ${col.sortable && onSort ? "cursor-pointer select-none hover:text-primary" : ""} ${COLUMN_PRIORITY_CLASS[resolveColumnPriority(col)]} ${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", className: COLUMN_PRIORITY_CLASS[resolveColumnPriority(col)], 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/auctions/schemas/index.d.ts

@@ -67,20 +67,15 @@ export declare const auctionItemSchema: z.ZodObject<{
     title: string;
     createdAt: string;
     updatedAt: string;
-    slug: string;
     price: number;
+    listingType: "auction";
+    slug: string;
     sellerId: string;
     featured: boolean;
-    listingType: "auction";
     auctionEndDate: string;
     startingBid: number;
     bidCount: number;
     storeId?: string | undefined;
-    description?: string | undefined;
-    mainImage?: string | undefined;
-    images?: string[] | undefined;
-    currentBid?: number | undefined;
-    storeSlug?: string | undefined;
     media?: {
         type: "video" | "image" | "file";
         url: string;
@@ -90,6 +85,11 @@ export declare const auctionItemSchema: z.ZodObject<{
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }[] | undefined;
+    description?: string | undefined;
+    mainImage?: string | undefined;
+    images?: string[] | undefined;
+    currentBid?: number | undefined;
+    storeSlug?: string | undefined;
 }, {
     currency: string;
     status: "draft" | "published" | "archived" | "sold";
@@ -97,20 +97,15 @@ export declare const auctionItemSchema: z.ZodObject<{
     title: string;
     createdAt: string;
     updatedAt: string;
-    slug: string;
     price: number;
+    listingType: "auction";
+    slug: string;
     sellerId: string;
     featured: boolean;
-    listingType: "auction";
     auctionEndDate: string;
     startingBid: number;
     bidCount: number;
     storeId?: string | undefined;
-    description?: string | undefined;
-    mainImage?: string | undefined;
-    images?: string[] | undefined;
-    currentBid?: number | undefined;
-    storeSlug?: string | undefined;
     media?: {
         type: "video" | "image" | "file";
         url: string;
@@ -120,6 +115,11 @@ export declare const auctionItemSchema: z.ZodObject<{
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }[] | undefined;
+    description?: string | undefined;
+    mainImage?: string | undefined;
+    images?: string[] | undefined;
+    currentBid?: number | undefined;
+    storeSlug?: string | undefined;
 }>;
 export declare const bidRecordSchema: z.ZodObject<{
     id: z.ZodString;

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

@@ -65,14 +65,14 @@ export declare const authUserSchema: z.ZodObject<{
     isEmailVerified: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     id: string;
-    role?: "user" | "seller" | "moderator" | "employee" | "admin" | undefined;
+    role?: "user" | "admin" | "moderator" | "seller" | "employee" | undefined;
     email?: string | undefined;
     displayName?: string | undefined;
     photoURL?: string | undefined;
     isEmailVerified?: boolean | undefined;
 }, {
     id: string;
-    role?: "user" | "seller" | "moderator" | "employee" | "admin" | undefined;
+    role?: "user" | "admin" | "moderator" | "seller" | "employee" | undefined;
     email?: string | undefined;
     displayName?: string | undefined;
     photoURL?: string | undefined;

package/dist/features/blog/actions/blog-actions.d.ts

@@ -72,8 +72,8 @@ export declare const createBlogPostSchema: z.ZodObject<{
     status: "draft" | "published" | "archived";
     title: string;
     content: string;
-    slug: string;
     category: "news" | "tips" | "guides" | "updates" | "community";
+    slug: string;
     tags: string[];
     isFeatured: boolean;
     excerpt: string;
@@ -108,12 +108,12 @@ export declare const createBlogPostSchema: z.ZodObject<{
 }, {
     title: string;
     content: string;
-    slug: string;
     category: "news" | "tips" | "guides" | "updates" | "community";
+    slug: string;
     excerpt: string;
     status?: "draft" | "published" | "archived" | undefined;
-    tags?: string[] | undefined;
     publishedAt?: string | undefined;
+    tags?: string[] | undefined;
     isFeatured?: boolean | undefined;
     coverImage?: string | {
         type: "video" | "image" | "file";
@@ -211,10 +211,10 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     status?: "draft" | "published" | "archived" | undefined;
     title?: string | undefined;
     content?: string | undefined;
-    slug?: string | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
-    tags?: string[] | undefined;
     publishedAt?: string | undefined;
+    slug?: string | undefined;
+    tags?: string[] | undefined;
     isFeatured?: boolean | undefined;
     excerpt?: string | undefined;
     coverImage?: {
@@ -248,10 +248,10 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     status?: "draft" | "published" | "archived" | undefined;
     title?: string | undefined;
     content?: string | undefined;
-    slug?: string | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
-    tags?: string[] | undefined;
     publishedAt?: string | undefined;
+    slug?: string | undefined;
+    tags?: string[] | undefined;
     isFeatured?: boolean | undefined;
     excerpt?: string | undefined;
     coverImage?: string | {

package/dist/features/blog/schemas/blog-form.d.ts

@@ -51,11 +51,11 @@ export declare const blogDraftSchema: z.ZodObject<{
     status: "draft" | "published" | "archived";
     title: string;
     content: string;
-    youtubeId: string;
-    slug: string;
     category: "news" | "tips" | "guides" | "updates" | "community";
-    tags: string[];
     publishedAt: string;
+    slug: string;
+    youtubeId: string;
+    tags: string[];
     isFeatured: boolean;
     excerpt: string;
     coverImage: string;
@@ -66,11 +66,11 @@ export declare const blogDraftSchema: z.ZodObject<{
     status: "draft" | "published" | "archived";
     title: string;
     content: string;
-    youtubeId: string;
-    slug: string;
     category: "news" | "tips" | "guides" | "updates" | "community";
-    tags: string[];
     publishedAt: string;
+    slug: string;
+    youtubeId: string;
+    tags: string[];
     isFeatured: boolean;
     excerpt: string;
     coverImage: string;

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

@@ -125,15 +125,15 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
     updatedAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    slug: string;
     category: string;
+    slug: string;
+    views: number;
     tags: string[];
     isFeatured: boolean;
     excerpt: string;
     authorId: string;
     authorName: string;
     readTimeMinutes: number;
-    views: number;
     publishedAt?: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough"> | undefined;
@@ -178,15 +178,15 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
     updatedAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    slug: string;
     category: string;
+    slug: string;
+    views: number;
     tags: string[];
     isFeatured: boolean;
     excerpt: string;
     authorId: string;
     authorName: string;
     readTimeMinutes: number;
-    views: number;
     publishedAt?: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough"> | undefined;
@@ -358,8 +358,8 @@ export declare const blogPostSchema: z.ZodObject<{
     status: "draft" | "published" | "archived";
     id: string;
     title: string;
-    slug: string;
     category: "news" | "tips" | "guides" | "updates" | "community";
+    slug: string;
     coverImage: {
         type: "video" | "image" | "file";
         url: string;
@@ -393,14 +393,14 @@ export declare const blogPostSchema: z.ZodObject<{
     content?: string | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    tags?: string[] | undefined;
     publishedAt?: string | undefined;
+    views?: number | undefined;
+    tags?: string[] | undefined;
     isFeatured?: boolean | undefined;
     excerpt?: string | undefined;
     authorId?: string | undefined;
     authorName?: string | undefined;
     readTimeMinutes?: number | undefined;
-    views?: number | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
     authorAvatar?: string | undefined;
@@ -408,13 +408,14 @@ export declare const blogPostSchema: z.ZodObject<{
     status: "draft" | "published" | "archived";
     id: string;
     title: string;
-    slug: string;
     category: "news" | "tips" | "guides" | "updates" | "community";
+    slug: string;
     content?: string | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
-    tags?: string[] | undefined;
     publishedAt?: string | undefined;
+    views?: number | undefined;
+    tags?: string[] | undefined;
     isFeatured?: boolean | undefined;
     excerpt?: string | undefined;
     coverImage?: string | {
@@ -429,7 +430,6 @@ export declare const blogPostSchema: z.ZodObject<{
     authorId?: string | undefined;
     authorName?: string | undefined;
     readTimeMinutes?: number | undefined;
-    views?: number | undefined;
     additionalImages?: {
         type: "video" | "image" | "file";
         url: string;

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

@@ -57,8 +57,8 @@ export declare const cartItemSchema: z.ZodObject<{
     addedAt: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     id: string;
-    productId: string;
     quantity: number;
+    productId: string;
     meta?: {
         currency: string;
         title: string;
@@ -113,8 +113,8 @@ export declare const cartSummarySchema: z.ZodObject<{
         addedAt: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         id: string;
-        productId: string;
         quantity: number;
+        productId: string;
         meta?: {
             currency: string;
             title: string;
@@ -147,8 +147,8 @@ export declare const cartSummarySchema: z.ZodObject<{
     currency: string;
     items: {
         id: string;
-        productId: string;
         quantity: number;
+        productId: string;
         meta?: {
             currency: string;
             title: string;

package/dist/features/catalogue/schemas/validation.d.ts

@@ -12,25 +12,25 @@ export declare const createCatalogueItemSchema: z.ZodObject<{
     visibility: z.ZodDefault<z.ZodEnum<["public", "private"]>>;
 }, "strip", z.ZodTypeAny, {
     title: string;
-    images: string[];
     quantity: number;
+    images: string[];
     visibility: "public" | "private";
+    price?: number | undefined;
+    brandSlug?: string | undefined;
     description?: string | undefined;
     categorySlugs?: string[] | undefined;
-    brandSlug?: string | undefined;
-    price?: number | undefined;
     mainImage?: string | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | "graded" | undefined;
 }, {
     title: string;
+    price?: number | undefined;
+    brandSlug?: string | undefined;
+    quantity?: number | undefined;
     description?: string | undefined;
     categorySlugs?: string[] | undefined;
-    brandSlug?: string | undefined;
-    price?: number | undefined;
     mainImage?: string | undefined;
     images?: string[] | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | "graded" | undefined;
-    quantity?: number | undefined;
     visibility?: "public" | "private" | undefined;
 }>;
 export declare const updateCatalogueItemSchema: z.ZodObject<{
@@ -46,25 +46,25 @@ export declare const updateCatalogueItemSchema: z.ZodObject<{
     visibility: z.ZodOptional<z.ZodDefault<z.ZodEnum<["public", "private"]>>>;
 }, "strip", z.ZodTypeAny, {
     title?: string | undefined;
+    price?: number | undefined;
+    brandSlug?: string | undefined;
+    quantity?: number | undefined;
     description?: string | undefined;
     categorySlugs?: string[] | undefined;
-    brandSlug?: string | undefined;
-    price?: number | undefined;
     mainImage?: string | undefined;
     images?: string[] | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | "graded" | undefined;
-    quantity?: number | undefined;
     visibility?: "public" | "private" | undefined;
 }, {
     title?: string | undefined;
+    price?: number | undefined;
+    brandSlug?: string | undefined;
+    quantity?: number | undefined;
     description?: string | undefined;
     categorySlugs?: string[] | undefined;
-    brandSlug?: string | undefined;
-    price?: number | undefined;
     mainImage?: string | undefined;
     images?: string[] | undefined;
     condition?: "new" | "used" | "refurbished" | "like_new" | "good" | "fair" | "poor" | "broken" | "graded" | undefined;
-    quantity?: number | undefined;
     visibility?: "public" | "private" | undefined;
 }>;
 export type CreateCatalogueItemInput = z.infer<typeof createCatalogueItemSchema>;