@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/search/components/SearchFiltersRow.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, Input, Label, Row, Select, Span } from "../../../ui";
+import { Button, Input, Label, Row, Select, Span, Stack } from "../../../ui";
 export function SearchFiltersRow({ urlCategory, categories, urlMinPrice, urlMaxPrice, showClear, onCategoryChange, onPriceFilter, onClearFilters, labels = {}, }) {
     const [minPrice, setMinPrice] = useState(urlMinPrice);
     const [maxPrice, setMaxPrice] = useState(urlMaxPrice);
@@ -14,8 +14,10 @@ export function SearchFiltersRow({ urlCategory, categories, urlMinPrice, urlMaxP
         apply: labels.apply ?? "Apply",
         clearFilters: labels.clearFilters ?? "Clear Filters",
     };
-    return (_jsxs(Row, { wrap: true, gap: "md", align: "end", children: [_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-600 dark:text-zinc-400", children: L.categoryFilter }), _jsx(Select, { value: urlCategory, onValueChange: (value) => onCategoryChange(value), options: [
+    return (_jsxs(Row, { wrap: true, gap: "md", align: "end", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "medium", color: "muted", children: L.categoryFilter }), _jsx(Select, { value: urlCategory, onValueChange: (value) => onCategoryChange(value), options: [
                             { value: "", label: L.allCategories },
                             ...categories.map((cat) => ({ value: cat.id, label: cat.name })),
-                        ], className: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-600 dark:text-zinc-400", children: L.priceRange }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, value: minPrice, onChange: (e) => setMinPrice(e.target.value), placeholder: L.minPrice, className: "w-28 rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }), _jsx(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, value: maxPrice, onChange: (e) => setMaxPrice(e.target.value), placeholder: L.maxPrice, className: "w-28 rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => onPriceFilter(minPrice, maxPrice), className: "h-10 px-4 rounded-lg bg-primary-600 hover:bg-primary-700 text-white text-sm font-medium transition-colors", children: L.apply })] })] }), showClear && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClearFilters, className: "h-10 px-4 rounded-lg border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.clearFilters }))] }));
+                        ], className: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "medium", color: "muted", children: L.priceRange }), _jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { type: "number", min: 0, value: minPrice, onChange: (e) => setMinPrice(e.target.value), placeholder: L.minPrice, className: "w-28 rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }), _jsx(Span, { size: "sm", color: "muted", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, value: maxPrice, onChange: (e) => setMaxPrice(e.target.value), placeholder: L.maxPrice, className: "w-28 rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }), _jsx(Button, { rounded: "lg", type: "button", variant: "primary", size: "sm", onClick: () => onPriceFilter(minPrice, maxPrice), className: "h-10 px-4 bg-primary-600 hover:bg-primary-700 text-white text-sm font-medium transition-colors", children: L.apply })] })] }), showClear && (
+            // audit-variant-ok: clear filters Button — bespoke h-10 + text-zinc-700 + hover-bg-zinc-100 ghost-outline composition
+            _jsx(Button, { rounded: "lg", type: "button", variant: "outline", size: "sm", onClick: onClearFilters, paddingX: "md", textSize: "sm", className: "h-10 border border-zinc-200 dark:border-slate-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.clearFilters }))] }));
 }

package/dist/features/search/components/SearchResultsSection.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div, Grid, Row, Select, Span, Text } from "../../../ui";
+import { Button, Div, Grid, Row, Select, Span, Stack, Text } from "../../../ui";
 const PAGE_SIZE = 24;
 export function SearchResultsSection({ products, total, totalPages, urlQ, urlSort, urlPage, isLoading, onSortChange, onPageChange, renderItem, renderLoading, renderEmpty, renderProducts, renderSortBar, renderPagination, sortOptions = [], labels = {}, }) {
     const L = {
@@ -13,23 +13,23 @@ export function SearchResultsSection({ products, total, totalPages, urlQ, urlSor
         if (renderLoading) {
             return _jsx(_Fragment, { children: renderLoading({ skeletonCount: PAGE_SIZE }) });
         }
-        return (_jsx(Grid, { cols: "statTiles", children: Array.from({ length: PAGE_SIZE }).map((_, i) => (_jsx(Div, { className: "aspect-square rounded-xl bg-zinc-100 dark:bg-slate-800 animate-pulse" }, i))) }));
+        return (_jsx(Grid, { cols: "statTiles", children: Array.from({ length: PAGE_SIZE }).map((_, i) => (_jsx(Div, { className: "aspect-square animate-pulse", surface: "subtle", rounded: "xl" }, i))) }));
     }
     if (products.length === 0) {
         if (renderEmpty) {
             return _jsx(_Fragment, { children: renderEmpty({ query: urlQ }) });
         }
-        return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-20 text-center gap-3", children: [_jsx(Span, { className: "text-5xl", "aria-hidden": "true", children: "\uD83D\uDD0D" }), _jsx(Text, { className: "text-lg font-semibold text-zinc-800 dark:text-zinc-100", children: L.noResultsTitle }), urlQ && L.noResultsSubtitle && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: L.noResultsSubtitle }))] }));
+        return (_jsxs(Stack, { justify: "center", padding: "y-5xl", className: "text-center", align: "center", gap: "3", children: [_jsx(Span, { "aria-hidden": "true", size: "5xl", children: "\uD83D\uDD0D" }), _jsx(Text, { size: "lg", weight: "semibold", color: "primary", children: L.noResultsTitle }), urlQ && L.noResultsSubtitle && (_jsx(Text, { size: "sm", color: "muted", children: L.noResultsSubtitle }))] }));
     }
-    return (_jsxs(Div, { className: "space-y-5", children: [renderSortBar ? (renderSortBar({
+    return (_jsxs(Stack, { gap: "5", children: [renderSortBar ? (renderSortBar({
                 total,
                 showing: products.length,
                 urlSort,
                 onSortChange,
-            })) : (_jsxs(Row, { justify: "between", children: [_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: L.showing(products.length, total) }), sortOptions.length > 0 && (_jsx(Select, { value: urlSort, onValueChange: onSortChange, options: sortOptions, className: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none" }))] })), renderProducts ? (renderProducts(products)) : (_jsx(Grid, { cols: "statTiles", children: products.map((p) => (_jsx(Div, { children: renderItem(p) }, p.id))) })), totalPages > 1 &&
+            })) : (_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", color: "muted", children: L.showing(products.length, total) }), sortOptions.length > 0 && (_jsx(Select, { value: urlSort, onValueChange: onSortChange, options: sortOptions, className: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none" }))] })), renderProducts ? (renderProducts(products)) : (_jsx(Grid, { cols: "statTiles", children: products.map((p) => (_jsx(Div, { children: renderItem(p) }, p.id))) })), totalPages > 1 &&
                 (renderPagination ? (renderPagination({
                     urlPage,
                     totalPages,
                     onPageChange,
-                })) : (_jsxs(Div, { className: "flex items-center justify-center gap-2 pt-4", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onPageChange(urlPage - 1), disabled: urlPage <= 1, className: "px-4 py-2 rounded-lg border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.prevPage }), _jsxs(Span, { size: "sm", className: "text-zinc-600 dark:text-zinc-400 tabular-nums", children: [urlPage, " / ", totalPages] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onPageChange(urlPage + 1), disabled: urlPage >= totalPages, className: "px-4 py-2 rounded-lg border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.nextPage })] })))] }));
+                })) : (_jsxs(Row, { align: "center", justify: "center", gap: "sm", padding: "t-md", children: [_jsx(Button, { rounded: "lg", type: "button", variant: "outline", size: "sm", onClick: () => onPageChange(urlPage - 1), disabled: urlPage <= 1, className: "px-4 py-2 border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.prevPage }), _jsxs(Span, { size: "sm", className: "tabular-nums", color: "muted", children: [urlPage, " / ", totalPages] }), _jsx(Button, { rounded: "lg", type: "button", variant: "outline", size: "sm", onClick: () => onPageChange(urlPage + 1), disabled: urlPage >= totalPages, className: "px-4 py-2 border border-zinc-200 dark:border-slate-700 text-sm text-zinc-700 dark:text-zinc-300 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: L.nextPage })] })))] }));
 }

package/dist/features/search/components/SearchView.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Div, Heading, Main, Row, Span, Text } from "../../../ui";
+import { Div, Heading, Main, Row, Span, Stack, Text } from "../../../ui";
 export function SearchView({ query, total, isLoading, labels = {}, renderSearchInput, renderFilters, renderActiveFilters, renderToolbar, renderResults, renderPagination, className = "", }) {
     const hasQuery = !!query?.trim();
-    return (_jsx(Main, { className: `min-h-screen ${className}`, children: _jsxs(Div, { className: "py-6 space-y-4", children: [_jsx(Div, { children: renderSearchInput() }), hasQuery && (_jsx(Div, { children: _jsx(Heading, { level: 1, className: "text-xl font-semibold", children: labels.resultsCount
+    return (_jsx(Main, { className: `min-h-screen ${className}`, children: _jsxs(Stack, { padding: "y-lg", gap: "md", children: [_jsx(Div, { children: renderSearchInput() }), hasQuery && (_jsx(Div, { children: _jsx(Heading, { level: 1, size: "xl", weight: "semibold", children: labels.resultsCount
                             ? labels.resultsCount(total, query)
-                            : `${total} results for "${query}"` }) })), !hasQuery && (_jsxs(Div, { className: "py-16 text-center", children: [_jsx(Span, { className: "text-4xl mb-4 block", children: "\uD83D\uDD0D" }), _jsx(Heading, { level: 2, className: "mb-2", children: labels.searchTitle ?? "Search" }), _jsx(Text, { variant: "secondary", children: labels.noQueryDescription ?? "Start typing to find products" })] })), hasQuery && (_jsxs(_Fragment, { children: [renderActiveFilters?.(), _jsxs(Row, { wrap: true, justify: "between", gap: "3", children: [renderFilters?.(), renderToolbar?.()] }), renderResults(), renderPagination?.()] }))] }) }));
+                            : `${total} results for "${query}"` }) })), !hasQuery && (_jsxs(Div, { className: "text-center", padding: "y-4xl", children: [_jsx(Span, { className: "mb-4 block", size: "4xl", children: "\uD83D\uDD0D" }), _jsx(Heading, { level: 2, className: "mb-2", children: labels.searchTitle ?? "Search" }), _jsx(Text, { variant: "secondary", children: labels.noQueryDescription ?? "Start typing to find products" })] })), hasQuery && (_jsxs(_Fragment, { children: [renderActiveFilters?.(), _jsxs(Row, { wrap: true, justify: "between", gap: "3", children: [renderFilters?.(), renderToolbar?.()] }), renderResults(), renderPagination?.()] }))] }) }));
 }

package/dist/features/search/hooks/useNavSuggestions.js

@@ -1,5 +1,6 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
+import { normalizeError } from "../../../errors/normalize";
 const SUGGESTIONS_ENDPOINT = "/api/search/suggestions";
 /**
  * W1-19 — wired to `/api/search/suggestions` 2026-05-23. Fetches up to 20
@@ -40,6 +41,7 @@ export function useNavSuggestions(query, selectedType, debounceMs = 250) {
                 setSuggestions(items);
             }
             catch (err) {
+                void normalizeError(err);
                 if (err.name !== "AbortError") {
                     setSuggestions([]);
                 }

package/dist/features/search/hooks/useSearch.d.ts

@@ -11,11 +11,11 @@ interface UseSearchOptions {
  * `options.initialCategories` — server-prefetched category list for filter facets.
  */
 export declare function useSearch(searchParams: string, options?: UseSearchOptions): {
-    results: SearchResponse | null;
+    results: NoInfer<SearchResponse> | null;
     items: import("..").SearchProductItem[];
     total: number;
     totalPages: number;
     isLoading: boolean;
-    categories: SearchCategoryOption[];
+    categories: NoInfer<SearchCategoryOption[]>;
 };
 export {};

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

@@ -24,8 +24,8 @@ export declare const searchProductItemSchema: z.ZodObject<{
     id: string;
     title: string;
     slug: string;
-    currency?: string | undefined;
     status?: string | undefined;
+    currency?: string | undefined;
     featured?: boolean | undefined;
     listingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | undefined;
     isPromoted?: boolean | undefined;
@@ -35,8 +35,8 @@ export declare const searchProductItemSchema: z.ZodObject<{
     id: string;
     title: string;
     slug: string;
-    currency?: string | undefined;
     status?: string | undefined;
+    currency?: string | undefined;
     featured?: boolean | undefined;
     listingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | undefined;
     isPromoted?: boolean | undefined;

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

@@ -10,6 +10,7 @@
  * thin wrapper because they use the @/lib/shiprocket/client SDK which is
  * a permanent letitrip-only dependency.
  */
+import type { JsonValue } from "../../../schemas/types";
 import type { SellerPayoutDetails } from "../../auth/schemas/firestore";
 import type { StoreDocument } from "../../stores/schemas/firestore";
 import type { ProductDocument } from "../../products/schemas/firestore";
@@ -106,7 +107,7 @@ export declare function updatePayoutSettings(userId: string, input: UpdatePayout
 }>;
 export declare function requestPayout(userId: string, userName: string, userEmail: string, input: RequestPayoutInput): Promise<unknown>;
 export declare function bulkSellerOrder(userId: string, userRole: string, userDisplayName: string, userEmail: string, orderIds: string[]): Promise<BulkSellerOrderResult>;
-export declare function createSellerProduct(userId: string, userName: string, userEmail: string, input: Record<string, unknown>): Promise<void>;
+export declare function createSellerProduct(userId: string, userName: string, userEmail: string, input: Record<string, JsonValue>): Promise<void>;
 export declare function getSellerStore(userId: string): Promise<StoreDocument | null>;
 export declare function getSellerShipping(userId: string): Promise<{
     method: import("../../auth").SellerShippingMethod;
@@ -163,7 +164,7 @@ export declare function listSellerMyProducts(userId: string, params?: SellerList
     totalPages: number;
     hasMore: boolean;
 }>;
-export declare function sellerUpdateProduct(userId: string, userRole: string, productId: string, input: Record<string, unknown>): Promise<ProductDocument>;
+export declare function sellerUpdateProduct(userId: string, userRole: string, productId: string, input: Record<string, JsonValue>): Promise<ProductDocument>;
 export declare function sellerDeleteProduct(userId: string, userRole: string, productId: string): Promise<void>;
 export declare function customShipOrder(userId: string, userRole: string, orderId: string, input: CustomShipOrderInput): Promise<{
     orderId: string;

package/dist/features/seller/actions/seller-actions.js

@@ -11,6 +11,7 @@
  * a permanent letitrip-only dependency.
  */
 import { serverLogger } from "../../../monitoring";
+import { isAdminUser, isSellerUser } from "../../auth/role-predicates";
 import { ApiError, AuthorizationError, NotFoundError, ValidationError, } from "../../../errors";
 import { userRepository } from "../../auth/repository/user.repository";
 import { storeRepository } from "../../stores/repository/store.repository";
@@ -51,7 +52,7 @@ function maskAccountNumber(accountNumber) {
 // --- Become Seller ------------------------------------------------------------
 export async function becomeSeller(userId) {
     const profile = await userRepository.findById(userId);
-    if (profile?.role === "seller" || profile?.role === "admin") {
+    if (profile && (isSellerUser(profile) || isAdminUser(profile))) {
         return {
             alreadySeller: true,
             storeStatus: profile.storeStatus ??

package/dist/features/seller/components/PhysicalLocationModal.js

@@ -7,6 +7,7 @@ import { Button } from "../../../ui/components/Button";
 import { Row } from "../../../ui/components/Layout";
 import { Div } from "../../../ui/components/Div";
 import { Text } from "../../../ui/components/Typography";
+import { normalizeError } from "../../../errors/normalize";
 export function PhysicalLocationModal({ count, onSave, onClose }) {
     const [zone, setZone] = useState("");
     const [shelf, setShelf] = useState("");
@@ -21,6 +22,7 @@ export function PhysicalLocationModal({ count, onSave, onClose }) {
             onClose();
         }
         catch (e) {
+            void normalizeError(e);
             setError(e instanceof Error ? e.message : "Failed to save location");
         }
         finally {

package/dist/features/seller/components/PrintCenterView.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Heading, Text } from "../../../ui/components/Typography";
-import { Div } from "../../../ui/components/Div";
+import { Stack } from "@mohasinac/appkit";
 export function PrintCenterView({ store, brandName = "LetItRip" }) {
-    return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-24 text-center gap-4", children: [_jsxs(Heading, { level: 2, children: [brandName, " Print Center"] }), store && _jsx(Text, { size: "sm", variant: "muted", children: store.storeName }), _jsx(Text, { size: "sm", variant: "muted", children: "Print center features are coming soon." })] }));
+    return (_jsxs(Stack, { justify: "center", padding: "y-6xl", className: "text-center", align: "center", gap: "md", children: [_jsxs(Heading, { level: 2, children: [brandName, " Print Center"] }), store && _jsx(Text, { size: "sm", variant: "muted", children: store.storeName }), _jsx(Text, { size: "sm", variant: "muted", children: "Print center features are coming soon." })] }));
 }

package/dist/features/seller/components/QuickProductForm.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row } from "@mohasinac/appkit/ui";
 import { useState } from "react";
 import { Alert, Button, Div, FormField, Stack, Text } from "../../../ui";
 const __P = {
@@ -46,8 +47,8 @@ export function QuickProductForm({ values, onChange, onPublish, onSave, onSwitch
         }
         onSave();
     };
-    return (_jsxs(Stack, { gap: "lg", className: `${__P.p5}`, children: [_jsx(Div, { children: _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Quick add \u2014 fill the essentials and publish. You can add more details later." }) }), touched && Object.keys(errors).length > 0 && (_jsx(Alert, { variant: "error", children: "Please fix the highlighted fields before publishing." })), _jsx(FormField, { name: "title", label: "Product Name", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9", required: true, error: touched ? errors.title : undefined }), renderCategorySelector ? (_jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Category" }), renderCategorySelector({
+    return (_jsxs(Stack, { gap: "lg", className: `${__P.p5}`, children: [_jsx(Div, { children: _jsx(Text, { size: "sm", color: "muted", children: "Quick add \u2014 fill the essentials and publish. You can add more details later." }) }), touched && Object.keys(errors).length > 0 && (_jsx(Alert, { variant: "error", children: "Please fix the highlighted fields before publishing." })), _jsx(FormField, { name: "title", label: "Product Name", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9", required: true, error: touched ? errors.title : undefined }), renderCategorySelector ? (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1", color: "muted", size: "sm", weight: "medium", children: "Category" }), renderCategorySelector({
                         value: values.category ?? "",
                         onChange: (v) => onChange({ category: v }),
-                    }), touched && errors.category && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-error)] mt-1", children: errors.category }))] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards", error: touched ? errors.category : undefined })), _jsx(FormField, { name: "price", label: "Price (\u20B9)", type: "number", value: toRupees(values.price), onChange: (v) => onChange({ price: toPaise(v) }), placeholder: "e.g. 499", required: true, error: touched ? errors.price : undefined }), _jsx(FormField, { name: "mainImage", label: "Product Image", type: "image", value: values.mainImage ?? "", onChange: (v) => onChange({ mainImage: v }), onUpload: onUploadImage, required: true, error: touched ? errors.mainImage : undefined }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: values.description ?? "", onChange: (v) => onChange({ description: v }), placeholder: "Brief description (optional)", rows: 3 }), _jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? 1), onChange: (v) => onChange({ stockQuantity: Math.max(0, parseInt(v, 10) || 0) }), placeholder: "1", hint: "How many units are available" }), _jsxs(Div, { className: "flex flex-col gap-3 pt-2", children: [_jsxs(Div, { className: "flex gap-3", children: [_jsx(Button, { variant: "primary", onClick: handlePublish, disabled: isLoading, className: "flex-1", children: isLoading ? "Publishing..." : "Publish" }), _jsx(Button, { variant: "secondary", onClick: handleSave, disabled: isLoading, children: "Save Draft" })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onSwitchToFull, className: "self-center text-xs", children: "Show all fields (advanced)" })] })] }));
+                    }), touched && errors.category && (_jsx(Text, { className: "text-[var(--appkit-color-error)] mt-1", size: "xs", children: errors.category }))] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards", error: touched ? errors.category : undefined })), _jsx(FormField, { name: "price", label: "Price (\u20B9)", type: "number", value: toRupees(values.price), onChange: (v) => onChange({ price: toPaise(v) }), placeholder: "e.g. 499", required: true, error: touched ? errors.price : undefined }), _jsx(FormField, { name: "mainImage", label: "Product Image", type: "image", value: values.mainImage ?? "", onChange: (v) => onChange({ mainImage: v }), onUpload: onUploadImage, required: true, error: touched ? errors.mainImage : undefined }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: values.description ?? "", onChange: (v) => onChange({ description: v }), placeholder: "Brief description (optional)", rows: 3 }), _jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? 1), onChange: (v) => onChange({ stockQuantity: Math.max(0, parseInt(v, 10) || 0) }), placeholder: "1", hint: "How many units are available" }), _jsxs(Stack, { gap: "3", padding: "t-xs", children: [_jsxs(Row, { gap: "3", children: [_jsx(Button, { variant: "primary", onClick: handlePublish, disabled: isLoading, className: "flex-1", children: isLoading ? "Publishing..." : "Publish" }), _jsx(Button, { variant: "secondary", onClick: handleSave, disabled: isLoading, children: "Save Draft" })] }), _jsx(Button, { variant: "ghost", size: "sm", textSize: "xs", onClick: onSwitchToFull, className: "self-center", children: "Show all fields (advanced)" })] })] }));
 }

package/dist/features/seller/components/SellerAddressesView.js

@@ -3,17 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useState } from "react";
 import { MapPin, Pencil, Plus, Trash2, Star } from "lucide-react";
 import { Button, ConfirmDeleteModal, Div, Grid, Heading, Label, Row, SideDrawer, Span, Stack, Table, Thead, Tbody, Tr, Th, Td, Text } from "../../../ui";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
+import { normalizeError } from "../../../errors/normalize";
 const __O = {
     xAuto: "overflow-x-auto",
 };
 const INPUT_CLS = "w-full rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]";
-const CLS_DEFAULT_PILL = "inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800 px-2 py-0.5";
-const CLS_DELETE_BTN = "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-red-50 dark:hover:bg-red-950/40 hover:text-red-600 dark:hover:text-red-400 transition-colors";
+const CLS_DEFAULT_PILL = "inline-flex items-center gap-1 rounded-full bg-warning-surface dark:bg-warning-surface text-warning dark:text-warning border border-warning dark:border-warning px-2 py-0.5";
+const CLS_DELETE_BTN = "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-error-surface dark:hover:bg-error-surface hover:text-error dark:hover:text-error transition-colors";
 function Field({ label, hint, children }) {
-    return (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "block text-xs font-medium text-zinc-700 dark:text-zinc-300", children: label }), children, hint && _jsx(Text, { size: "xs", color: "muted", children: hint })] }));
+    return (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "block", color: "primary", size: "xs", weight: "medium", children: label }), children, hint && _jsx(Text, { size: "xs", color: "muted", children: hint })] }));
 }
 // ---------------------------------------------------------------------------
 // Helpers
@@ -47,7 +50,7 @@ function fromDoc(doc) {
     };
 }
 function AddressCard({ address, onEdit, onDelete, }) {
-    return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex flex-col gap-2", children: [_jsxs(Row, { align: "start", justify: "between", gap: "xs", children: [_jsxs(Row, { gap: "xs", className: "min-w-0", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", weight: "semibold", className: "text-zinc-900 dark:text-zinc-100 truncate", children: address.label }), address.isDefault && (_jsxs(Span, { size: "xs", weight: "medium", className: CLS_DEFAULT_PILL, children: [_jsx(Star, { className: "h-3 w-3" }), "Default"] }))] }), _jsxs(Row, { gap: "px", className: "shrink-0", children: [_jsx("button", { type: "button", onClick: onEdit, title: "Edit address", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: onDelete, title: "Delete address", className: CLS_DELETE_BTN, children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), _jsxs(Text, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: [address.fullName, " \u00B7 ", address.phone] }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed", children: [address.addressLine1, address.addressLine2 ? `, ${address.addressLine2}` : "", address.landmark ? ` (near ${address.landmark})` : "", _jsx("br", {}), address.city, ", ", address.state, " ", address.postalCode, ", ", address.country] })] }));
+    return (_jsxs(Stack, { surface: "card", padding: "sm", gap: "sm", children: [_jsxs(Row, { align: "start", justify: "between", gap: "xs", children: [_jsxs(Row, { gap: "xs", className: "min-w-0", children: [_jsx(MapPin, { className: "h-4 w-4 shrink-0 text-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", weight: "semibold", className: "truncate", color: "primary", children: address.label }), address.isDefault && (_jsxs(Span, { size: "xs", weight: "medium", className: CLS_DEFAULT_PILL, children: [_jsx(Star, { className: "h-3 w-3" }), "Default"] }))] }), _jsxs(Row, { gap: "px", className: "shrink-0", children: [_jsx("button", { type: "button", onClick: onEdit, title: "Edit address", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: onDelete, title: "Delete address", className: CLS_DELETE_BTN, children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }), _jsxs(Text, { size: "sm", color: "muted", children: [address.fullName, " \u00B7 ", address.phone] }), _jsxs(Text, { className: "leading-relaxed", color: "muted", size: "xs", children: [address.addressLine1, address.addressLine2 ? `, ${address.addressLine2}` : "", address.landmark ? ` (near ${address.landmark})` : "", _jsx("br", {}), address.city, ", ", address.state, " ", address.postalCode, ", ", address.country] })] }));
 }
 // ---------------------------------------------------------------------------
 // Main Component
@@ -126,6 +129,7 @@ export function SellerAddressesView({ apiBase = SELLER_ENDPOINTS.STORE_ADDRESSES
             await load();
         }
         catch (err) {
+            void normalizeError(err);
             setSaveError(err instanceof Error ? err.message : "Failed to save address");
         }
         finally {
@@ -139,6 +143,10 @@ export function SellerAddressesView({ apiBase = SELLER_ENDPOINTS.STORE_ADDRESSES
     });
     const handleDelete = (addr) => setDeleteTargetAddr(addr);
     const set = (key, value) => setDraft((p) => ({ ...p, [key]: value }));
-    const handleTextField = (key) => (e) => set(key, e.target.value);
-    return (_jsxs(Div, { className: "min-h-screen", children: ["// audit-inline-style-ok: dynamic CSS", _jsxs(Row, { justify: "between", className: "sticky z-10 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-4 py-3", style: { top: "var(--header-height, 0px)" }, children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Button, { size: "sm", onClick: openAdd, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] }), _jsxs(Div, { className: "py-6 px-4 sm:px-6 max-w-2xl", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", className: "py-16", children: _jsx(Div, { className: "h-6 w-6 animate-spin rounded-full border-2 border-[var(--appkit-color-primary)] border-t-transparent" }) })) : addresses.length === 0 ? (_jsxs(Div, { className: "rounded-xl border-2 border-dashed border-zinc-200 dark:border-slate-700 py-16 flex flex-col items-center gap-3", children: [_jsx(MapPin, { className: "h-8 w-8 text-zinc-300 dark:text-slate-600" }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr) }) }, addr.id))) })) : (_jsx(Div, { className: `${__O.xAuto} rounded-lg border border-zinc-200 dark:border-slate-700`, children: _jsxs(Table, { className: "w-full text-sm", children: [_jsx(Thead, { className: "bg-zinc-50 dark:bg-slate-800", children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "Label" }), _jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "Name" }), _jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "City" }), _jsx(Th, { className: "text-left px-3 py-2 font-semibold", children: "Phone" }), _jsx(Th, { className: "text-right px-3 py-2 font-semibold", children: "Actions" })] }) }), _jsx(Tbody, { children: addresses.map((addr) => (_jsxs(Tr, { className: `border-t border-zinc-100 dark:border-slate-700 ${deletingId === addr.id ? "opacity-50" : ""}`, children: [_jsx(Td, { className: "px-3 py-2", children: addr.label }), _jsx(Td, { className: "px-3 py-2", children: addr.fullName }), _jsxs(Td, { className: "px-3 py-2", children: [addr.city, ", ", addr.state] }), _jsx(Td, { className: "px-3 py-2 tabular-nums", children: addr.phone }), _jsx(Td, { className: "px-3 py-2 text-right", children: _jsxs(Row, { justify: "end", className: "gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => openEdit(addr), children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(addr), children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label })] }) })] }, addr.id))) })] }) }))] }))] }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: editingId ? "Edit Address" : "Add Address", footer: _jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "outline", onClick: closeDrawer, className: "flex-1", children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: saving, className: "flex-1", children: saving ? "Saving…" : editingId ? "Save Changes" : "Add Address" })] }), children: _jsxs(Stack, { gap: "md", className: "py-1", children: [saveError && (_jsx(Div, { className: "rounded-lg border border-error/20 bg-error-surface px-3 py-2 text-sm text-error", children: saveError })), _jsx(Field, { label: "Label *", hint: "e.g. Warehouse, Shop, Home", children: _jsx("input", { type: "text", value: draft.label, onChange: handleTextField("label"), placeholder: "Warehouse", maxLength: 60, className: INPUT_CLS }) }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "Full Name *", children: _jsx("input", { type: "text", value: draft.fullName, onChange: handleTextField("fullName"), placeholder: "Ravi Kumar", maxLength: 100, className: INPUT_CLS }) }), _jsx(Field, { label: "Phone *", children: _jsx("input", { type: "tel", value: draft.phone, onChange: handleTextField("phone"), placeholder: "+91 98765 43210", maxLength: 20, className: INPUT_CLS }) })] }), _jsx(Field, { label: "Address Line 1 *", children: _jsx("input", { type: "text", value: draft.addressLine1, onChange: handleTextField("addressLine1"), placeholder: "Shop 12, Main Market", maxLength: 200, className: INPUT_CLS }) }), _jsx(Field, { label: "Address Line 2", children: _jsx("input", { type: "text", value: draft.addressLine2, onChange: handleTextField("addressLine2"), placeholder: "Building / Floor (optional)", maxLength: 200, className: INPUT_CLS }) }), _jsx(Field, { label: "Landmark", children: _jsx("input", { type: "text", value: draft.landmark, onChange: handleTextField("landmark"), placeholder: "Near metro station (optional)", maxLength: 100, className: INPUT_CLS }) }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "City *", children: _jsx("input", { type: "text", value: draft.city, onChange: handleTextField("city"), placeholder: "Mumbai", maxLength: 100, className: INPUT_CLS }) }), _jsx(Field, { label: "State *", children: _jsx("input", { type: "text", value: draft.state, onChange: handleTextField("state"), placeholder: "Maharashtra", maxLength: 100, className: INPUT_CLS }) })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(Field, { label: "Postal Code *", children: _jsx("input", { type: "text", value: draft.postalCode, onChange: handleTextField("postalCode"), placeholder: "400001", maxLength: 10, className: INPUT_CLS }) }), _jsx(Field, { label: "Country *", children: _jsx("input", { type: "text", value: draft.country, onChange: handleTextField("country"), placeholder: "India", maxLength: 60, className: INPUT_CLS }) })] }), _jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: draft.isDefault, onChange: (e) => set("isDefault", e.target.checked), className: "h-4 w-4 rounded border-zinc-300 dark:border-slate-600 text-[var(--appkit-color-primary)] focus:ring-[var(--appkit-color-primary)]" }), _jsx(Span, { size: "sm", className: "text-zinc-700 dark:text-zinc-300", children: "Set as default pickup address" })] })] }) }), deleteTargetAddr && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Address", message: `Delete address "${deleteTargetAddr.label}"? This cannot be undone.`, onConfirm: () => { deleteById(deleteTargetAddr.id); setDeleteTargetAddr(null); }, onClose: () => setDeleteTargetAddr(null), isDeleting: deletingId === deleteTargetAddr.id }))] }));
+    const setField = (key) => (value) => set(key, value);
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsxs(Row, { border: "default", justify: "between", className: "sticky z-10 backdrop-blur-sm border-b", surface: "default", padding: "inline", 
+                // audit-inline-style-ok: dynamic CSS
+                style: { top: "var(--header-height, 0px)" }, children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", color: "primary", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Button, { gap: "sm", size: "sm", onClick: openAdd, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] }), _jsxs(Div, { paddingX: "x-md-lg", className: "max-w-2xl", padding: "y-lg", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })) : addresses.length === 0 ? (_jsxs(Stack, { border: "default", className: "border-2 border-dashed", padding: "y-4xl", align: "center", gap: "3", rounded: "xl", children: [_jsx(MapPin, { className: "h-8 w-8 text-zinc-300 dark:text-slate-600" }), _jsx(Text, { size: "sm", color: "muted", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr) }) }, addr.id))) })) : (_jsx(Div, { className: `${__O.xAuto}`, rounded: "lg", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { surface: "muted", children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Label" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Name" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "City" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Phone" }), _jsx(Th, { className: "text-right", padding: "sm", weight: "semibold", children: "Actions" })] }) }), _jsx(Tbody, { children: addresses.map((addr) => (
+                                            // audit-variant-ok: address Tr — border-top + conditional opacity-50 (deleting state)
+                                            _jsxs(Tr, { className: `border-t border-zinc-100 dark:border-slate-700 ${deletingId === addr.id ? "opacity-50" : ""}`, children: [_jsx(Td, { padding: "sm", children: addr.label }), _jsx(Td, { padding: "sm", children: addr.fullName }), _jsxs(Td, { padding: "sm", children: [addr.city, ", ", addr.state] }), _jsx(Td, { className: "tabular-nums", padding: "sm", children: addr.phone }), _jsx(Td, { className: "text-right", padding: "sm", children: _jsxs(Row, { justify: "end", gap: "xs", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => openEdit(addr), children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(addr), children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label })] }) })] }, addr.id))) })] }) }))] }))] }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: editingId ? "Edit Address" : "Add Address", footer: _jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "outline", onClick: closeDrawer, className: "flex-1", children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: saving, className: "flex-1", children: saving ? "Saving…" : editingId ? "Save Changes" : "Add Address" })] }), children: _jsxs(Stack, { gap: "md", padding: "y-2xs", children: [saveError && (_jsx(Div, { textSize: "sm", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError })), _jsx(FieldInput, { name: "label", label: "Label *", hint: "e.g. Warehouse, Shop, Home", type: "text", value: draft.label, onChange: setField("label"), placeholder: "Warehouse", maxLength: 60 }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "fullName", label: "Full Name *", type: "text", value: draft.fullName, onChange: setField("fullName"), placeholder: "Ravi Kumar", maxLength: 100 }), _jsx(FieldInput, { name: "phone", label: "Phone *", type: "tel", value: draft.phone, onChange: setField("phone"), placeholder: "+91 98765 43210", maxLength: 20 })] }), _jsx(FieldInput, { name: "addressLine1", label: "Address Line 1 *", type: "text", value: draft.addressLine1, onChange: setField("addressLine1"), placeholder: "Shop 12, Main Market", maxLength: 200 }), _jsx(FieldInput, { name: "addressLine2", label: "Address Line 2", type: "text", value: draft.addressLine2, onChange: setField("addressLine2"), placeholder: "Building / Floor (optional)", maxLength: 200 }), _jsx(FieldInput, { name: "landmark", label: "Landmark", type: "text", value: draft.landmark, onChange: setField("landmark"), placeholder: "Near metro station (optional)", maxLength: 100 }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "city", label: "City *", type: "text", value: draft.city, onChange: setField("city"), placeholder: "Mumbai", maxLength: 100 }), _jsx(FieldInput, { name: "state", label: "State *", type: "text", value: draft.state, onChange: setField("state"), placeholder: "Maharashtra", maxLength: 100 })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "postalCode", label: "Postal Code *", type: "text", value: draft.postalCode, onChange: setField("postalCode"), placeholder: "400001", maxLength: 10 }), _jsx(FieldInput, { name: "country", label: "Country *", type: "text", value: draft.country, onChange: setField("country"), placeholder: "India", maxLength: 60 })] }), _jsx(FieldCheckbox, { name: "isDefault", label: "Set as default pickup address", checked: draft.isDefault, onChange: (c) => set("isDefault", c) })] }) }), deleteTargetAddr && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Address", message: `Delete address "${deleteTargetAddr.label}"? This cannot be undone.`, onConfirm: () => { deleteById(deleteTargetAddr.id); setDeleteTargetAddr(null); }, onClose: () => setDeleteTargetAddr(null), isDeleting: deletingId === deleteTargetAddr.id }))] }));
 }

package/dist/features/seller/components/SellerAnalyticsAlertsView.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { useState, useCallback } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Badge, Button, Div, Form, FormActions, Heading, Input, Row, Section, Select, Text, Toggle, useToast, } from "../../../ui";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Badge, Button, Div, Form, FormActions, Heading, Input, Row, Section, Select, Stack, Text, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 const __P = {
@@ -53,7 +54,7 @@ function AlertCard({ alert, onToggle, onDelete, }) {
     const metricLabel = METRIC_OPTIONS.find((m) => m.value === alert.metric)?.label ?? alert.metric;
     const opLabel = OPERATOR_OPTIONS.find((o) => o.value === alert.operator)?.label ?? alert.operator;
     const windowLabel = WINDOW_OPTIONS.find((w) => w.value === String(alert.windowHours))?.label ?? `${alert.windowHours}h`;
-    return (_jsxs(Div, { surface: "card", padding: "sm", className: "flex items-start justify-between gap-4", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "gap-2 mb-1 flex-wrap", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100 text-sm", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mb-1", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), _jsx(Row, { className: "gap-1 flex-wrap", children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 mt-1", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs(Div, { className: "flex items-center gap-2 shrink-0", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDelete(alert.id), className: "text-error hover:text-error", children: "Delete" })] })] }));
+    return (_jsxs(Row, { surface: "card", padding: "sm", align: "start", justify: "between", gap: "md", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-1", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), _jsx(Row, { gap: "xs", wrap: true, children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "mt-1", color: "faint", size: "xs", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onDelete(alert.id), className: "text-error hover:text-error", children: "Delete" })] })] }));
 }
 const EMPTY_DRAFT = {
     label: "",
@@ -72,11 +73,12 @@ export function SellerAnalyticsAlertsView({ labels = {}, }) {
         queryKey: ["seller", "analytics-alerts"],
         queryFn: async () => {
             const res = await apiClient.get(SELLER_ENDPOINTS.ANALYTICS_ALERTS);
+            // audit-unknown-ok: analytics API response items
             return (res?.items ?? []);
         },
     });
     const alerts = data ?? [];
-    const createMutation = useMutation({
+    const createMutation = useApiMutation({
         mutationFn: async () => {
             const payload = {
                 label: draft.label,
@@ -98,14 +100,14 @@ export function SellerAnalyticsAlertsView({ labels = {}, }) {
         },
         onError: () => showToast("Failed to create alert", "error"),
     });
-    const toggleMutation = useMutation({
+    const toggleMutation = useApiMutation({
         mutationFn: async ({ id, isActive }) => apiClient.patch(SELLER_ENDPOINTS.ANALYTICS_ALERT_BY_ID(id), { isActive }),
         onSuccess: () => {
             void queryClient.invalidateQueries({ queryKey: ["seller", "analytics-alerts"] });
         },
         onError: () => showToast("Failed to update alert", "error"),
     });
-    const deleteMutation = useMutation({
+    const deleteMutation = useApiMutation({
         mutationFn: async (id) => apiClient.delete(SELLER_ENDPOINTS.ANALYTICS_ALERT_BY_ID(id)),
         onSuccess: () => {
             showToast("Alert deleted", "success");
@@ -121,7 +123,9 @@ export function SellerAnalyticsAlertsView({ labels = {}, }) {
                 : [...d.notifyChannels, ch],
         }));
     }, []);
-    return (_jsxs(Div, { className: "space-y-6", children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: labels.title ?? "Analytics Alerts" }), _jsx(Button, { size: "sm", onClick: () => setShowForm((v) => !v), children: showForm ? "Cancel" : "+ New Alert" })] }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Get notified when a key metric crosses a threshold. Alerts check the metric over the selected window and fire through your chosen channels." }), showForm && (_jsxs(Section, { className: `border border-zinc-200 dark:border-zinc-700 rounded-xl ${__P.p5} space-y-4`, children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Create Alert" }), _jsxs(Form, { onSubmit: (e) => { e.preventDefault(); createMutation.mutate(); }, children: [_jsxs(Div, { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Alert label", value: draft.label, onChange: (e) => setDraft((d) => ({ ...d, label: e.target.value })), placeholder: "e.g. Low daily orders", required: true }), _jsx(Select, { label: "Metric", value: draft.metric, onValueChange: (v) => setDraft((d) => ({ ...d, metric: v })), options: METRIC_OPTIONS }), _jsx(Select, { label: "Operator", value: draft.operator, onValueChange: (v) => setDraft((d) => ({ ...d, operator: v })), options: OPERATOR_OPTIONS }), _jsx(Input, { label: "Threshold", type: "number", value: draft.threshold, onChange: (e) => setDraft((d) => ({ ...d, threshold: e.target.value })), placeholder: "e.g. 10", required: true }), _jsx(Select, { label: "Check window", value: draft.windowHours, onValueChange: (v) => setDraft((d) => ({ ...d, windowHours: v })), options: WINDOW_OPTIONS })] }), _jsxs(Div, { className: "mt-3", children: [_jsx(Text, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300 mb-2", children: "Notify via" }), _jsx(Row, { className: "gap-2 flex-wrap", children: CHANNEL_OPTIONS.map((ch) => (_jsx("button", { type: "button", onClick: () => toggleChannel(ch.value), className: `px-3 py-1.5 rounded-full text-xs border transition-colors ${draft.notifyChannels.includes(ch.value)
+    return (_jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", color: "primary", children: labels.title ?? "Analytics Alerts" }), _jsx(Button, { size: "sm", onClick: () => setShowForm((v) => !v), children: showForm ? "Cancel" : "+ New Alert" })] }), _jsx(Text, { size: "sm", color: "muted", children: "Get notified when a key metric crosses a threshold. Alerts check the metric over the selected window and fire through your chosen channels." }), showForm && (
+            // audit-variant-ok: form Section — space-y-4 vertical rhythm; Section lacks space-y variant
+            _jsxs(Section, { className: `${__P.p5} space-y-4`, rounded: "xl", border: "default", children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", color: "primary", children: "Create Alert" }), _jsxs(Form, { onSubmit: (e) => { e.preventDefault(); createMutation.mutate(); }, children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Alert label", value: draft.label, onChange: (e) => setDraft((d) => ({ ...d, label: e.target.value })), placeholder: "e.g. Low daily orders", required: true }), _jsx(Select, { label: "Metric", value: draft.metric, onValueChange: (v) => setDraft((d) => ({ ...d, metric: v })), options: METRIC_OPTIONS }), _jsx(Select, { label: "Operator", value: draft.operator, onValueChange: (v) => setDraft((d) => ({ ...d, operator: v })), options: OPERATOR_OPTIONS }), _jsx(Input, { label: "Threshold", type: "number", value: draft.threshold, onChange: (e) => setDraft((d) => ({ ...d, threshold: e.target.value })), placeholder: "e.g. 10", required: true }), _jsx(Select, { label: "Check window", value: draft.windowHours, onValueChange: (v) => setDraft((d) => ({ ...d, windowHours: v })), options: WINDOW_OPTIONS })] }), _jsxs(Div, { className: "mt-3", children: [_jsx(Text, { className: "mb-2", color: "muted", size: "xs", weight: "medium", children: "Notify via" }), _jsx(Row, { gap: "sm", wrap: true, children: CHANNEL_OPTIONS.map((ch) => (_jsx("button", { type: "button", onClick: () => toggleChannel(ch.value), className: `px-3 py-1.5 rounded-full text-xs border transition-colors ${draft.notifyChannels.includes(ch.value)
                                                 ? "bg-[var(--appkit-color-primary)] text-white border-transparent"
-                                                : "bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-zinc-700"}`, children: ch.label }, ch.value))) })] }), _jsx(FormActions, { align: "right", className: "mt-4", children: _jsx(Button, { type: "submit", isLoading: createMutation.isPending, children: createMutation.isPending ? "Creating…" : "Create Alert" }) })] })] })), isLoading && (_jsx(Div, { className: "space-y-2", children: [1, 2, 3].map((i) => (_jsx(Div, { className: "h-16 rounded-lg bg-zinc-100 dark:bg-zinc-800 animate-pulse" }, i))) })), !isLoading && alerts.length === 0 && !showForm && (_jsx(Alert, { variant: "info", children: "No alerts configured. Create an alert to get notified when a key metric crosses a threshold." })), !isLoading && alerts.length > 0 && (_jsx(Div, { className: "space-y-3", children: alerts.map((alert) => (_jsx(AlertCard, { alert: alert, onToggle: (id, isActive) => toggleMutation.mutate({ id, isActive }), onDelete: (id) => deleteMutation.mutate(id) }, alert.id))) }))] }));
+                                                : "bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-zinc-700"}`, children: ch.label }, ch.value))) })] }), _jsx(FormActions, { align: "right", className: "mt-4", children: _jsx(Button, { type: "submit", isLoading: createMutation.isPending, children: createMutation.isPending ? "Creating…" : "Create Alert" }) })] })] })), isLoading && (_jsx(Stack, { gap: "sm", children: [1, 2, 3].map((i) => (_jsx(Div, { className: "h-16 animate-pulse", surface: "subtle", rounded: "lg" }, i))) })), !isLoading && alerts.length === 0 && !showForm && (_jsx(Alert, { variant: "info", children: "No alerts configured. Create an alert to get notified when a key metric crosses a threshold." })), !isLoading && alerts.length > 0 && (_jsx(Stack, { gap: "3", children: alerts.map((alert) => (_jsx(AlertCard, { alert: alert, onToggle: (id, isActive) => toggleMutation.mutate({ id, isActive }), onDelete: (id) => deleteMutation.mutate(id) }, alert.id))) }))] }));
 }

package/dist/features/seller/components/SellerAnalyticsView.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { StackedViewShell, Label, Row, Text } from "../../../ui";
 function DefaultDateRange({ from, to, onChange, labels, }) {
-    return (_jsxs(Row, { gap: "md", align: "center", wrap: true, className: "flex-wrap", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm text-[var(--appkit-color-text-muted)]", children: [_jsx(Text, { size: "sm", variant: "secondary", children: labels.dateFrom ?? "From" }), _jsx("input", { type: "date", value: from, onChange: (e) => onChange(e.target.value, to), className: "appkit-input text-sm py-1.5 px-3" })] }), _jsxs(Label, { className: "flex items-center gap-2 text-sm text-[var(--appkit-color-text-muted)]", children: [_jsx(Text, { size: "sm", variant: "secondary", children: labels.dateTo ?? "To" }), _jsx("input", { type: "date", value: to, onChange: (e) => onChange(from, e.target.value), className: "appkit-input text-sm py-1.5 px-3" })] })] }));
+    return (_jsxs(Row, { gap: "md", align: "center", wrap: true, children: [_jsxs(Label, { layout: "flex", gap: "md", className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: [_jsx(Text, { size: "sm", variant: "secondary", children: labels.dateFrom ?? "From" }), _jsx("input", { type: "date", value: from, onChange: (e) => onChange(e.target.value, to), className: "appkit-input text-sm py-1.5 px-3" })] }), _jsxs(Label, { layout: "flex", gap: "md", className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: [_jsx(Text, { size: "sm", variant: "secondary", children: labels.dateTo ?? "To" }), _jsx("input", { type: "date", value: to, onChange: (e) => onChange(from, e.target.value), className: "appkit-input text-sm py-1.5 px-3" })] })] }));
 }
 export function SellerAnalyticsView({ labels = {}, renderDateRange, renderStats, renderCharts, renderTopProducts, isLoading = false, ...rest }) {
     const [from, setFrom] = React.useState("");

package/dist/features/seller/components/SellerBidsView.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { normalizeError } from "../../../errors/normalize";
+import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
@@ -99,19 +100,19 @@ export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
         {
             key: "productTitle",
             header: "Auction",
-            render: (row) => (_jsxs(Div, { className: "space-y-0.5", children: [_jsx(Text, { className: "font-medium text-sm text-zinc-900 dark:text-zinc-100 line-clamp-1", children: row.productTitle }), _jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 font-mono", children: row.productId })] })),
+            render: (row) => (_jsxs(Stack, { gap: "none", className: "", children: [_jsx(Text, { className: "line-clamp-1", color: "primary", size: "sm", weight: "medium", children: row.productTitle }), _jsx(Text, { className: "font-mono", color: "faint", size: "xs", children: row.productId })] })),
         },
         {
             key: "userName",
             header: "Bidder",
             className: "w-36",
-            render: (row) => _jsx(Span, { size: "sm", className: "text-zinc-700 dark:text-zinc-300", children: row.userName }),
+            render: (row) => _jsx(Span, { size: "sm", color: "muted", children: row.userName }),
         },
         {
             key: "bidAmount",
             header: "Bid",
             className: "w-28 text-right",
-            render: (row) => (_jsx(Span, { size: "sm", weight: "semibold", className: "text-zinc-900 dark:text-zinc-100", children: toRupees(row.bidAmount) })),
+            render: (row) => (_jsx(Span, { size: "sm", weight: "semibold", color: "primary", children: toRupees(row.bidAmount) })),
         },
         {
             key: "status",
@@ -123,7 +124,7 @@ export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
             key: "bidDate",
             header: "Date",
             className: "w-28",
-            render: (row) => _jsx(Span, { size: "xs", className: "text-zinc-500 dark:text-zinc-400", children: row.bidDate }),
+            render: (row) => _jsx(Span, { size: "xs", color: "muted", children: row.bidDate }),
         },
     ];
     const selection = useBulkSelection({ items: rows ?? [], keyExtractor: (r) => r.id });
@@ -160,6 +161,7 @@ export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
             selection.clearSelection();
         }
         catch (err) {
+            void normalizeError(err);
             showToast(err instanceof Error ? err.message : "Failed to cancel bids.", "error");
         }
     }, [selection, showToast]);
@@ -167,10 +169,10 @@ export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
         buildBulkAction(ACTIONS.SELLER["cancel-bid"], () => void bulkCancel()),
     ];
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by bidder name", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedIds.length > 0 && (_jsx(Div, { className: "sticky z-20 px-3 sm:px-4 py-2 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700", 
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by bidder name", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedIds.length > 0 && (_jsx(Div, { border: "default", paddingX: "x-sm-md", className: "sticky z-20 backdrop-blur-sm border-b", surface: "default", padding: "y-xs", 
                 // audit-inline-style-ok: sticky header offset
-                style: { top: "calc(var(--header-height, 0px) + 88px)" }, children: _jsx(BulkActionBar, { selectedCount: selection.selectedIds.length, onClearSelection: selection.clearSelection, actions: bulkActions }) })), _jsxs(Div, { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), table.get("grouped") === "0" ? (_jsx(DataTable, { rows: rows, columns: columns, isLoading: isLoading, emptyLabel: "No bids found for your auctions", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: () => selection.toggleAll() })) : (_jsxs(Div, { className: "space-y-3", children: [groupedRows.length === 0 && !isLoading && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No bids found for your auctions." })), groupedRows.map((group) => {
+                style: { top: "calc(var(--header-height, 0px) + 88px)" }, children: _jsx(BulkActionBar, { selectedCount: selection.selectedIds.length, onClearSelection: selection.clearSelection, actions: bulkActions }) })), _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 })), table.get("grouped") === "0" ? (_jsx(DataTable, { rows: rows, columns: columns, isLoading: isLoading, emptyLabel: "No bids found for your auctions", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle, onToggleSelectAll: () => selection.toggleAll() })) : (_jsxs(Stack, { gap: "3", children: [groupedRows.length === 0 && !isLoading && (_jsx(Text, { size: "sm", color: "muted", children: "No bids found for your auctions." })), groupedRows.map((group) => {
                                 const collapsed = collapsedGroups.has(group.id);
-                                return (_jsxs(Div, { className: "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsxs("button", { type: "button", onClick: () => toggleGroup(group.id), className: "w-full flex items-center justify-between px-4 py-2.5 text-sm font-semibold text-[var(--appkit-color-text)] hover:bg-[var(--appkit-color-surface-raised)]", children: [_jsxs(Span, { className: "truncate", children: [group.title, " ", _jsxs(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: ["\u00B7 ", group.bids.length, " bid", group.bids.length === 1 ? "" : "s"] })] }), _jsx(Span, { "aria-hidden": true, className: "text-[var(--appkit-color-text-muted)]", children: collapsed ? "▸" : "▾" })] }), !collapsed && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", children: _jsx(DataTable, { rows: group.bids, columns: columns, isLoading: false, emptyLabel: "", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle }) }))] }, group.id));
+                                return (_jsxs(Div, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "lg", children: [_jsxs("button", { type: "button", onClick: () => toggleGroup(group.id), className: "w-full flex items-center justify-between px-4 py-2.5 text-sm font-semibold text-[var(--appkit-color-text)] hover:bg-[var(--appkit-color-surface-raised)]", children: [_jsxs(Span, { className: "truncate", children: [group.title, " ", _jsxs(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: ["\u00B7 ", group.bids.length, " bid", group.bids.length === 1 ? "" : "s"] })] }), _jsx(Span, { "aria-hidden": true, className: "text-[var(--appkit-color-text-muted)]", children: collapsed ? "▸" : "▾" })] }), !collapsed && (_jsx(Div, { className: "border-t border-[var(--appkit-color-border)]", children: _jsx(DataTable, { rows: group.bids, columns: columns, isLoading: false, emptyLabel: "", selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle }) }))] }, group.id));
                             })] }))] }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(FilterChipGroup, { label: "Bid Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })), allId: "" }) })] }));
 }

package/dist/features/seller/components/SellerBundlesView.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { sortBy } from "@mohasinac/appkit";
+import { Badge, Span, sortBy } from "@mohasinac/appkit";
 import { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
 import { ConfirmDeleteModal, RowActionMenu, Text } from "../../../ui";
@@ -11,24 +11,22 @@ const CLS_ITEMS_PILL = "inline-flex items-center rounded-full px-2 py-0.5 text-x
 import { toRecordArray, toRelativeDate, toRupees, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
 const COLUMNS = [
-    { key: "title", header: "Bundle", render: (row) => _jsx(Text, { className: "text-sm font-medium", children: row.title }) },
-    { key: "price", header: "Price", render: (row) => _jsx(Text, { className: "text-sm tabular-nums", children: row.price }) },
+    { key: "title", header: "Bundle", render: (row) => _jsx(Text, { size: "sm", weight: "medium", children: row.title }) },
+    { key: "price", header: "Price", render: (row) => _jsx(Text, { className: "tabular-nums", size: "sm", children: row.price }) },
     {
         key: "itemCount",
         header: "Items",
-        render: (row) => (_jsx("span", { className: CLS_ITEMS_PILL, children: row.itemCount })),
+        render: (row) => (_jsx(Span, { className: CLS_ITEMS_PILL, children: row.itemCount })),
     },
     {
         key: "status",
         header: "Status",
-        render: (row) => (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium capitalize ${row.status === "active"
-                ? "bg-success-surface text-success"
-                : "bg-zinc-100 text-zinc-600 dark:bg-slate-800 dark:text-slate-400"}`, children: row.status })),
+        render: (row) => (_jsx(Badge, { variant: row.status === "active" ? "active" : "inactive", size: "xs", className: "capitalize", children: row.status })),
     },
     {
         key: "createdAt",
         header: "Created",
-        render: (row) => (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: row.createdAt })),
+        render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.createdAt })),
     },
 ];
 export function SellerBundlesView({ onCreateClick, onEditClick, onDelete, onBulkDelete, }) {
@@ -78,6 +76,7 @@ export function SellerBundlesView({ onCreateClick, onEditClick, onDelete, onBulk
             title: toStringValue(item.productTitle ?? item.title, "Untitled bundle"),
             price: toRupees(item.price),
             itemCount: Array.isArray(item.bundleProductIds)
+                // audit-unknown-ok: TS structural escape
                 ? item.bundleProductIds.length
                 : Number(item.bundleItemCount ?? 0),
             status: toStringValue(item.status, "draft"),