@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/categories/components/CategoryProductsListing.js

@@ -4,7 +4,7 @@ import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Div, Pagination, useToast, ListingToolbar, FilterDrawer, LoginRequiredModal, } from "../../../ui";
+import { Div, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, useToast } from "../../../ui";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID } from "../../products/constants/action-defs";
 import { ROUTES } from "../../../next";
@@ -20,11 +20,10 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const FILTER_KEYS = ["condition", "brand", "minPrice", "maxPrice"];
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderCategoryProductGrid(props) {
     const { isLoading, products, view, getProductHref, onWishlistToggle, wishlistedIds, onAddToCart } = props;
     if (isLoading) {
-        return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6", children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3} space-y-2`, children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) }));
+        return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" })] })] }, i))) }));
     }
     return (_jsx(ProductGrid, { products: products, getProductHref: getProductHref, view: view, emptyLabel: "No products found in this category.", onWishlistToggle: onWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: onAddToCart }));
 }
@@ -104,9 +103,8 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, i
     }, [localCart, showToast]);
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
-                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: renderCategoryProductGrid({
+                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: renderCategoryProductGrid({
                     isLoading, products: products, view,
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)),
                     onWishlistToggle: handleWishlistToggle, wishlistedIds, onAddToCart: handleAddToCart,
                 }) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));

package/dist/features/categories/components/CategoryProductsView.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Heading, Input, SlottedListingView, Text, } from "../../../ui";
+import { Div, Heading, Input, SlottedListingView, Stack, Text } from "../../../ui";
 import { CategoryFilters } from "./CategoryFilters";
 import { CategorySortSelect } from "./CategorySortSelect";
 export function CategoryProductsView({ labels = {}, table, filterVariant = "public", sortValue, onSortChange, renderBreadcrumbs, renderChildCategories, renderFilters, renderActiveFilters, renderSearch, renderSort, renderViewToggle, renderProducts, renderPagination, category = null, children: childCategories = [], total = 0, isLoading = false, className = "", }) {
@@ -16,6 +16,6 @@ export function CategoryProductsView({ labels = {}, table, filterVariant = "publ
         }
         table?.set("sorts", next);
     };
-    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsxs(Div, { className: "py-6 px-4 max-w-screen-xl mx-auto space-y-4", children: [category && renderBreadcrumbs?.(category), category && (_jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold", children: category.name }), category.description && (_jsx(Text, { className: "text-zinc-500 dark:text-zinc-400 mt-1", children: category.description }))] })), childCategories.length > 0 && renderChildCategories?.(childCategories), _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search in category", className: "max-w-sm" })), renderSort: () => renderSort ? (renderSort(resolvedSort, handleSortChange)) : (_jsx(CategorySortSelect, { value: resolvedSort, onChange: handleSortChange, variant: filterVariant })), renderFilters: () => renderFilters?.() ??
+    return (_jsx(Div, { className: `min-h-screen ${className}`, children: _jsxs(Stack, { className: "max-w-screen-xl mx-auto", gap: "md", paddingY: "y-lg", paddingX: "x-md", children: [category && renderBreadcrumbs?.(category), category && (_jsxs(Div, { children: [_jsx(Heading, { level: 1, weight: "bold", size: "2xl", children: category.name }), category.description && (_jsx(Text, { className: "mt-1", color: "muted", children: category.description }))] })), childCategories.length > 0 && renderChildCategories?.(childCategories), _jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-4", renderSearch: () => renderSearch?.(search, setSearch) ?? (_jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search in category", className: "max-w-sm" })), renderSort: () => renderSort ? (renderSort(resolvedSort, handleSortChange)) : (_jsx(CategorySortSelect, { value: resolvedSort, onChange: handleSortChange, variant: filterVariant })), renderFilters: () => renderFilters?.() ??
                         (table ? _jsx(CategoryFilters, { table: table, variant: filterVariant }) : null), renderActiveFilters: renderActiveFilters, renderBulkActions: () => renderViewToggle?.(viewMode, setViewMode) ?? null, renderTable: () => renderProducts(isLoading), renderPagination: () => renderPagination?.(total) ?? null, total: total, isLoading: isLoading })] }) }));
 }

package/dist/features/categories/components/CategorySelectorCreate.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Div, Select, Label, Button, SideDrawer } from "../../../ui";
+import { Button, Div, Label, Row, Select, SideDrawer } from "../../../ui";
 import { useState, useCallback } from "react";
 import { useCategories, useCreateCategory } from "../hooks/useCategorySelector";
 import { useMessage } from "../../../react";
@@ -39,6 +39,7 @@ export function CategorySelectorCreate({ value, onChange, disabled = false, labe
     const [drawerOpen, setDrawerOpen] = useState(false);
     const L = { ...DEFAULT_LABELS, ...labels };
     const { categories: rawCategories, isLoading, refetch } = useCategories();
+    // audit-unknown-ok: TS structural escape — Category
     const categories = rawCategories;
     const flat = flattenCategories(categories);
     const handleSuccess = useCallback((newId) => {
@@ -47,7 +48,7 @@ export function CategorySelectorCreate({ value, onChange, disabled = false, labe
         if (newId)
             onChange(newId);
     }, [onChange, refetch]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs(Div, { className: "flex gap-2 items-center", children: [_jsx(Div, { className: "flex-1", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? "Category", options: [
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Div, { className: "flex-1", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? "Category", options: [
                                         { value: "", label: L.selectPlaceholder },
                                         ...flat.map((cat) => ({
                                             value: cat.id,

package/dist/features/categories/components/CategorySortSelect.js

@@ -3,5 +3,5 @@ import { Div, Row, Select, Span } from "../../../ui";
 import { getCategorySortOptions, } from "./CategoryFilters";
 export function CategorySortSelect({ value, onChange, variant = "public", label = "Sort", className = "", }) {
     const options = [...getCategorySortOptions(variant)];
-    return (_jsxs(Row, { className: ["items-center gap-3", className].filter(Boolean).join(" "), children: [_jsx(Span, { size: "sm", className: "text-zinc-600 dark:text-zinc-400", children: label }), _jsx(Div, { className: "min-w-44", children: _jsx(Select, { value: value, onValueChange: (next) => onChange(next), options: options }) })] }));
+    return (_jsxs(Row, { className: ["items-center gap-3", className].filter(Boolean).join(" "), children: [_jsx(Span, { size: "sm", color: "muted", children: label }), _jsx(Div, { className: "min-w-44", children: _jsx(Select, { value: value, onValueChange: (next) => onChange(next), options: options }) })] }));
 }

package/dist/features/categories/components/CategoryStoresListing.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
 import { ROUTES } from "../../../next";
-import { Div, Text } from "../../../ui";
+import { Div, Stack, Text } from "../../../ui";
 export function CategoryStoresListing({ stores }) {
     if (stores.length === 0) {
-        return (_jsx(Div, { className: "flex flex-col items-center justify-center py-16 text-center", children: _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400 text-sm", children: "No stores found in this category." }) }));
+        return (_jsx(Stack, { justify: "center", className: "text-center", padding: "y-4xl", align: "center", children: _jsx(Text, { size: "sm", color: "muted", children: "No stores found in this category." }) }));
     }
-    return (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5", children: stores.map((store) => (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug)) }, store.id))) }));
+    return (_jsx(Div, { layout: "grid", gap: "5", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: stores.map((store) => (_jsx(InteractiveStoreCard, { store: store, href: String(ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug)) }, store.id))) }));
 }

package/dist/features/categories/components/CategoryTableColumns.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, StatusBadge, Span, Button } from "../../../ui";
+import { Button, Div, Row, Span, StatusBadge } from "../../../ui";
 import { MediaImage } from "../../media";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_DELETE_BTN = "text-red-600 hover:text-red-800 dark:text-red-400";
+const CLS_DELETE_BTN = "text-error hover:text-error dark:text-error";
 const DEFAULT_LABELS = {
     colName: "Name",
     colSlug: "Slug",
@@ -22,9 +22,9 @@ export function getCategoryTableColumns(onEdit, onDelete, labels = {}) {
             {
                 key: "image",
                 header: "",
-                render: (cat) => (_jsx(Div, { className: `relative w-9 h-9 rounded ${__O.hidden} flex-shrink-0`, children: cat.display?.coverImage ? (_jsx(MediaImage, { src: cat.display.coverImage, alt: "", size: "thumbnail", className: "w-full h-full object-cover" })) : (_jsx(Div, { className: "w-full h-full flex items-center justify-center text-base", 
+                render: (cat) => (_jsx(Div, { className: `relative w-9 h-9 ${__O.hidden} flex-shrink-0`, rounded: "default", children: cat.display?.coverImage ? (_jsx(MediaImage, { src: cat.display.coverImage, alt: "", size: "thumbnail", className: "w-full h-full object-cover" })) : (_jsx(Row, { textSize: "base", className: "w-full h-full", align: "center", justify: "center", 
                         // audit-inline-style-ok: runtime theme color
-                        style: { backgroundColor: cat.display?.color ?? "#94a3b8", color: "#fff" }, children: cat.display?.icon ?? "🗂️" })) })),
+                        style: { backgroundColor: cat.display?.color ?? "var(--appkit-color-text-faint)", color: "var(--appkit-color-text-on-primary)" }, children: cat.display?.icon ?? "🗂️" })) })),
             },
             {
                 key: "name",
@@ -32,7 +32,7 @@ export function getCategoryTableColumns(onEdit, onDelete, labels = {}) {
                 sortable: true,
                 render: (cat) => (
                 // audit-inline-style-ok: computed pixel offset
-                _jsxs(Div, { style: { paddingLeft: `${cat.tier * 20}px` }, children: [cat.name, cat.tier > 0 && (_jsxs(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400 ml-2", children: ["(Tier ", cat.tier, ")"] }))] })),
+                _jsxs(Div, { style: { paddingLeft: `${cat.tier * 20}px` }, children: [cat.name, cat.tier > 0 && (_jsxs(Span, { size: "xs", className: "ml-2", color: "faint", children: ["(Tier ", cat.tier, ")"] }))] })),
             },
             {
                 key: "slug",
@@ -51,7 +51,7 @@ export function getCategoryTableColumns(onEdit, onDelete, labels = {}) {
                 render: (cat) => (_jsx(StatusBadge, { status: cat.isActive ? "active" : "inactive", label: cat.isActive ? L.statusActive : L.statusInactive })),
             },
         ],
-        actions: (cat) => (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", onClick: (e) => {
+        actions: (cat) => (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { variant: "ghost", onClick: (e) => {
                         e.stopPropagation();
                         onEdit(cat);
                     }, className: "text-primary hover:text-primary/80", children: L.actionEdit }), _jsx(Button, { variant: "ghost", onClick: (e) => {

package/dist/features/categories/components/CategoryTree.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row } from "@mohasinac/appkit";
 import { useState } from "react";
 import { Div, Span, Text } from "../../../ui";
 function CategoryTreeNode({ item, children = [], activeId, onSelect, depth = 0, }) {
@@ -7,7 +8,7 @@ function CategoryTreeNode({ item, children = [], activeId, onSelect, depth = 0,
     const isActive = item.id === activeId;
     const [expanded, setExpanded] = useState(true);
     const indent = depth * 16;
-    return (_jsxs(Div, { children: [_jsxs(Div, { role: "treeitem", "aria-expanded": hasChildren ? expanded : undefined, "aria-selected": isActive, tabIndex: 0, onKeyDown: (e) => {
+    return (_jsxs(Div, { children: [_jsxs(Row, { textWeight: "semibold", textSize: "sm", role: "treeitem", "aria-expanded": hasChildren ? expanded : undefined, "aria-selected": isActive, tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                         if (hasChildren)
                             setExpanded((p) => !p);
@@ -18,10 +19,9 @@ function CategoryTreeNode({ item, children = [], activeId, onSelect, depth = 0,
                     if (hasChildren)
                         setExpanded((p) => !p);
                     onSelect?.(item);
-                }, className: `flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition select-none
-          ${isActive ? "bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-400" : "text-neutral-700 hover:bg-neutral-50 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, 
+                }, className: `cursor-pointer py-1.5 transition select-none ${isActive ? "bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400" : "text-neutral-700 hover:bg-neutral-50 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, align: "center", gap: "xs", padding: "x-xs", rounded: "md", 
                 // audit-inline-style-ok: computed pixel offset
-                style: { paddingLeft: `${8 + indent}px` }, children: [hasChildren && (_jsx(Span, { size: "xs", "aria-hidden": "true", className: `text-zinc-400 dark:text-zinc-400 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`, children: "\u25B6" })), !hasChildren && _jsx(Span, { className: "w-3" }), item.display?.icon && (_jsx(Span, { size: "base", "aria-hidden": "true", className: "flex-shrink-0", children: item.display.icon })), _jsx(Text, { className: "flex-1 truncate", children: item.name }), item.metrics && (_jsx(Span, { size: "xs", className: "ml-auto flex-shrink-0 text-zinc-400 dark:text-zinc-400 tabular-nums", children: item.metrics.productCount }))] }), hasChildren && expanded && (_jsx(Div, { role: "group", children: children.map((child) => (_jsx(CategoryTreeNode, { item: child, activeId: activeId, onSelect: onSelect, depth: depth + 1 }, child.id))) }))] }));
+                style: { paddingLeft: `${8 + indent}px` }, children: [hasChildren && (_jsx(Span, { size: "xs", "aria-hidden": "true", className: `transition-transform duration-150 ${expanded ? "rotate-90" : ""}`, color: "faint", children: "\u25B6" })), !hasChildren && _jsx(Span, { className: "w-3" }), item.display?.icon && (_jsx(Span, { size: "base", "aria-hidden": "true", className: "flex-shrink-0", children: item.display.icon })), _jsx(Text, { className: "flex-1 truncate", children: item.name }), item.metrics && (_jsx(Span, { size: "xs", className: "ml-auto flex-shrink-0 tabular-nums", color: "faint", children: item.metrics.productCount }))] }), hasChildren && expanded && (_jsx(Div, { role: "group", children: children.map((child) => (_jsx(CategoryTreeNode, { item: child, activeId: activeId, onSelect: onSelect, depth: depth + 1 }, child.id))) }))] }));
 }
 /**
  * CategoryTree — hierarchical expandable navigation for categories.
@@ -45,7 +45,7 @@ export function CategoryTree({ categories, activeId, onSelect, className = "", }
         }
     }
     if (roots.length === 0) {
-        return (_jsx(Text, { className: "py-4 text-center text-sm text-neutral-500 dark:text-zinc-500", children: "No categories" }));
+        return (_jsx(Text, { paddingY: "md", className: "text-neutral-500 dark:text-neutral-400", size: "sm", align: "center", children: "No categories" }));
     }
     return (_jsx(Div, { role: "tree", "aria-label": "Category navigation", className: `select-none ${className}`, children: roots.map((root) => (_jsx(CategoryTreeNode, { item: root, children: childMap.get(root.id), activeId: activeId, onSelect: onSelect, depth: 0 }, root.id))) }));
 }

package/dist/features/categories/components/ConcernCard.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, Text } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
 export function ConcernCard({ concern, onClick, className = "", }) {
-    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-3 rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 text-center shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { role: "img", "aria-label": concern.name, className: "h-16 w-16 rounded-full bg-center bg-cover", 
+    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-3 rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 text-center shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { role: "img", "aria-label": concern.name, className: "h-16 w-16 bg-center bg-cover", rounded: "full", 
                 // audit-inline-style-ok: dynamic image URL
-                style: { backgroundImage: `url(${concern.display.coverImage})` } })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100 group-hover:text-primary dark:group-hover:text-primary-400", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1 text-xs ${THEME_CONSTANTS.utilities.textClamp2} text-neutral-500 dark:text-zinc-400`, children: concern.description }))] })] }));
+                style: { backgroundImage: `url(${concern.display.coverImage})` } })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-neutral-900 dark:text-neutral-100 group-hover:text-primary dark:group-hover:text-primary-400", size: "sm", weight: "semibold", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1`, color: "muted", truncate: 2, size: "xs", children: concern.description }))] })] }));
 }

package/dist/features/categories/hooks/useCategories.d.ts

@@ -4,7 +4,7 @@ interface UseCategoriesListOptions {
     enabled?: boolean;
 }
 export declare function useCategoriesList(opts?: UseCategoriesListOptions): {
-    categories: CategoryItem[];
+    categories: NoInfer<CategoryItem[]>;
     total: number;
     isLoading: boolean;
     error: Error | null;
@@ -37,8 +37,8 @@ interface UseCategoryDetailOptions {
     childrenEndpoint?: string;
 }
 export declare function useCategoryDetail(slug: string, opts?: UseCategoryDetailOptions): {
-    category: CategoryItem | null;
-    children: CategoryItem[];
+    category: NonNullable<NoInfer<CategoryItem | null>> | null;
+    children: NoInfer<CategoryItem[]>;
     isLoading: boolean;
     childrenLoading: boolean;
     error: Error | null;

package/dist/features/categories/hooks/useCategorySelector.d.ts

@@ -1,4 +1,5 @@
-import type { CategoryItem } from "../types";
+import type { JsonValue } from "@mohasinac/appkit";
+import type { Category, CategoryItem } from "../types";
 export interface UseCategorySelectorOptions {
     categoriesEndpoint?: string;
     createCategoryEndpoint?: string;
@@ -8,19 +9,19 @@ export interface UseCategorySelectorOptions {
 export declare function useCategorySelector(options?: UseCategorySelectorOptions): {
     categories: CategoryItem[];
     isLoading: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<CategoryItem[], Error>>;
-    createCategory: import("@tanstack/react-query").UseMutateFunction<CategoryItem, Error, Record<string, unknown>, unknown>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<CategoryItem[]>, Error>>;
+    createCategory: import("@tanstack/react-query").UseMutateFunction<CategoryItem, Error, Record<string, JsonValue>, unknown>;
     isCreating: boolean;
 };
 export declare function useCategories(options?: {
     endpoint?: string;
 }): {
-    categories: CategoryItem[];
+    categories: NoInfer<CategoryItem[]>;
     isLoading: boolean;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<CategoryItem[], Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<CategoryItem[]>, Error>>;
 };
 export declare function useCreateCategory(options?: {
     endpoint?: string;
     onSuccess?: (res: CategoryItem) => void;
     onError?: (err: Error) => void;
-}): import("@tanstack/react-query").UseMutationResult<CategoryItem, Error, Record<string, unknown>, unknown>;
+}): import("@tanstack/react-query").UseMutationResult<CategoryItem, Error, Partial<Category>, unknown>;

package/dist/features/categories/hooks/useCategoryTree.d.ts

@@ -7,7 +7,7 @@ import type { CategoryItem } from "../types";
 export declare function useCategoryTree(opts?: {
     enabled?: boolean;
 }): {
-    categories: CategoryItem[];
+    categories: NoInfer<CategoryItem[]>;
     isLoading: boolean;
 };
 /** Convert category tree to FacetOption[] with indentation prefix for tier > 0. */

package/dist/features/categories/hooks/useCategoryTree.js

@@ -60,6 +60,6 @@ export function categoriesToFacetOptions(categories) {
         value: cat.slug,
         label: (cat.tier ?? 0) === 0
             ? cat.name
-            : `${"  ".repeat(cat.tier ?? 1)}↳ ${cat.name}`,
+            : `${" ".repeat(cat.tier ?? 1)}↳ ${cat.name}`,
     }));
 }

package/dist/features/categories/repository/categories.repository.d.ts

@@ -1,5 +1,6 @@
 import { BaseRepository, type FirebaseSieveFields, type FirebaseSieveResult, type SieveModel } from "../../../providers/db-firebase";
 import { type CategoryCreateInput, type CategoryDocument, type CategoryMoveInput, type CategoryTreeNode } from "../schemas";
+import type { FirestoreDocument } from "@mohasinac/appkit";
 export declare class CategoriesRepository extends BaseRepository<CategoryDocument> {
     static readonly SIEVE_FIELDS: FirebaseSieveFields;
     constructor();
@@ -38,7 +39,7 @@ export declare class CategoriesRepository extends BaseRepository<CategoryDocumen
      * sublistingCategoryId field on ProductDocument), ordered by price asc.
      * Used by /api/sublisting-categories/[slug]/listings.
      */
-    getSublistingListings(sublistingId: string, limit?: number): Promise<Record<string, unknown>[]>;
+    getSublistingListings(sublistingId: string, limit?: number): Promise<FirestoreDocument[]>;
     /**
      * SB-UNI-B — delete a sublisting category and unlink all products
      * that referenced it. Mirrors the cascade behavior of the old

package/dist/features/categories/repository/categories.repository.js

@@ -1,3 +1,4 @@
+import { normalizeError } from "../../../errors/normalize";
 import { increment, arrayUnion, arrayRemove, } from "../../../contracts/field-ops";
 import { DatabaseError } from "../../../errors";
 import { BaseRepository, prepareForFirestore, } from "../../../providers/db-firebase";
@@ -59,6 +60,7 @@ export class CategoriesRepository extends BaseRepository {
             return this.findByIdOrFail(newCategoryId);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to create category: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -74,6 +76,7 @@ export class CategoriesRepository extends BaseRepository {
             return this.mapDoc(snapshot.docs[0]);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve category by slug: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -90,6 +93,7 @@ export class CategoriesRepository extends BaseRepository {
                 .filter((category) => !category.isBrand);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve root categories: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -104,6 +108,7 @@ export class CategoriesRepository extends BaseRepository {
             return snapshot.docs.map((doc) => this.mapDoc(doc));
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve leaf categories: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -120,6 +125,7 @@ export class CategoriesRepository extends BaseRepository {
                 .filter((category) => !category.isBrand);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve categories by tier: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -134,6 +140,7 @@ export class CategoriesRepository extends BaseRepository {
             return snapshot.docs.map((doc) => this.mapDoc(doc));
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve categories by rootId: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -150,6 +157,7 @@ export class CategoriesRepository extends BaseRepository {
                 .filter((category) => category.parentIds[category.parentIds.length - 1] === parentId);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve children categories: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -166,6 +174,7 @@ export class CategoriesRepository extends BaseRepository {
                 .filter((category) => !category.isBrand);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve featured categories: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -181,6 +190,7 @@ export class CategoriesRepository extends BaseRepository {
             return limit > 0 ? brands.slice(0, limit) : brands;
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to retrieve brand categories: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -217,6 +227,7 @@ export class CategoriesRepository extends BaseRepository {
             await batch.commit();
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to update category metrics: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -269,6 +280,7 @@ export class CategoriesRepository extends BaseRepository {
             return this.findByIdOrFail(categoryId);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to move category: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -291,6 +303,7 @@ export class CategoriesRepository extends BaseRepository {
             return buildCategoryTree(categories, rootId);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to build category tree: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -307,6 +320,7 @@ export class CategoriesRepository extends BaseRepository {
             return this.findByIdOrFail(categoryId);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to toggle featured status: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }