@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/admin/components/AdminFeatureFlagsView.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 React from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, Div, Form, FormActions, Input, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, Div, Form, FormActions, Input, Row, Stack, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { apiClient } from "../../../http";
 const __O = {
@@ -41,10 +42,10 @@ const CATEGORY_TYPE_FLAGS = [
 ];
 function AccordionSection({ title, defaultOpen = true, children }) {
     const [open, setOpen] = React.useState(defaultOpen);
-    return (_jsxs(Div, { className: `rounded-lg border border-zinc-200 dark:border-zinc-700 ${__O.hidden}`, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "w-full flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-800/60 text-left", "aria-expanded": open, children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: title }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Div, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", children: children }))] }));
+    return (_jsxs(Div, { className: `${__O.hidden}`, rounded: "lg", border: "default", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "w-full flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-800/60 text-left", "aria-expanded": open, children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: title }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Div, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", children: children }))] }));
 }
 function FlagRow({ label, desc, checked, onChange, rollout, onRolloutChange, showRollout }) {
-    return (_jsxs(Div, { surface: "default", padding: "inline", className: "flex items-center justify-between gap-4", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Toggle, { checked: checked, onChange: onChange, label: label }), _jsx(Text, { className: "mt-0.5 ml-10 text-xs text-zinc-400 dark:text-zinc-400 truncate", children: desc })] }), showRollout && (_jsxs(Div, { className: "flex flex-col gap-1 w-28 shrink-0", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rollout %" }), _jsx(Input, { type: "number", min: 0, max: 100, value: rollout ?? 100, onChange: (e) => onRolloutChange?.(Math.min(100, Math.max(0, Number(e.target.value)))), disabled: !checked, className: "w-full" })] }))] }));
+    return (_jsxs(Row, { surface: "default", padding: "inline", align: "center", justify: "between", gap: "md", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Toggle, { checked: checked, onChange: onChange, label: label }), _jsx(Text, { className: "mt-0.5 ml-10 truncate", color: "faint", size: "xs", children: desc })] }), showRollout && (_jsxs(Stack, { className: "w-28 shrink-0", gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Rollout %" }), _jsx(Input, { type: "number", min: 0, max: 100, value: rollout ?? 100, onChange: (e) => onRolloutChange?.(Math.min(100, Math.max(0, Number(e.target.value)))), disabled: !checked, className: "w-full" })] }))] }));
 }
 export function AdminFeatureFlagsView({ labels = {}, renderFlags, ...rest }) {
     const queryClient = useQueryClient();
@@ -82,7 +83,7 @@ export function AdminFeatureFlagsView({ labels = {}, renderFlags, ...rest }) {
         ...prev,
         categoryTypes: { ...(prev.categoryTypes ?? {}), [key]: val },
     }));
-    const saveFlags = useMutation({
+    const saveFlags = useApiMutation({
         mutationFn: async () => {
             await apiClient.put(ADMIN_ENDPOINTS.FEATURE_FLAGS, { flags, rollouts });
         },
@@ -97,7 +98,7 @@ export function AdminFeatureFlagsView({ labels = {}, renderFlags, ...rest }) {
     const defaultFlags = () => (_jsxs(Form, { onSubmit: (event) => {
             event.preventDefault();
             saveFlags.mutate();
-        }, className: "space-y-4", children: [_jsx(AccordionSection, { title: "Platform Features", children: PLATFORM_FLAGS.map(({ key, label, desc }) => (_jsx(FlagRow, { label: label, desc: desc, checked: getPlatformFlag(key), onChange: (val) => setPlatformFlag(key, val), rollout: rollouts[key], onRolloutChange: (val) => setRollouts((prev) => ({ ...prev, [key]: val })), showRollout: true }, key))) }), _jsx(AccordionSection, { title: "Listing Types", children: LISTING_TYPE_FLAGS.map(({ key, label, desc }) => (_jsx(FlagRow, { label: label, desc: desc, checked: getListingTypeFlag(key), onChange: (val) => setListingTypeFlag(key, val), showRollout: false }, key))) }), _jsx(AccordionSection, { title: "Category Types", children: CATEGORY_TYPE_FLAGS.map(({ key, label, desc }) => (_jsx(FlagRow, { label: label, desc: desc, checked: getCategoryTypeFlag(key), onChange: (val) => setCategoryTypeFlag(key, val), showRollout: false }, key))) }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
+        }, spacing: "md", children: [_jsx(AccordionSection, { title: "Platform Features", children: PLATFORM_FLAGS.map(({ key, label, desc }) => (_jsx(FlagRow, { label: label, desc: desc, checked: getPlatformFlag(key), onChange: (val) => setPlatformFlag(key, val), rollout: rollouts[key], onRolloutChange: (val) => setRollouts((prev) => ({ ...prev, [key]: val })), showRollout: true }, key))) }), _jsx(AccordionSection, { title: "Listing Types", children: LISTING_TYPE_FLAGS.map(({ key, label, desc }) => (_jsx(FlagRow, { label: label, desc: desc, checked: getListingTypeFlag(key), onChange: (val) => setListingTypeFlag(key, val), showRollout: false }, key))) }), _jsx(AccordionSection, { title: "Category Types", children: CATEGORY_TYPE_FLAGS.map(({ key, label, desc }) => (_jsx(FlagRow, { label: label, desc: desc, checked: getCategoryTypeFlag(key), onChange: (val) => setCategoryTypeFlag(key, val), showRollout: false }, key))) }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
                             setFlags(data?.flags ?? {});
                             setRollouts(data?.rollouts ?? {});
                         }, disabled: saveFlags.isPending, children: "Reset" }), _jsx(Button, { type: "submit", isLoading: saveFlags.isPending, disabled: saveFlags.isPending, children: "Save All Flags" })] })] }));

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

@@ -10,15 +10,15 @@
  * @example
  * ```tsx
  * <AdminFilterBar
- *   deferred
- *   onApply={filters.apply}
- *   onReset={filters.reset}
- *   pendingCount={filters.pendingCount}
- *   labels={{ apply: "Apply", reset: "Reset", applyCount: "Apply" }}
- *   themeConfig={{ cardPadding: "p-4", flexEnd: "flex justify-end" }}
+ * deferred
+ * onApply={filters.apply}
+ * onReset={filters.reset}
+ * pendingCount={filters.pendingCount}
+ * labels={{ apply: "Apply", reset: "Reset", applyCount: "Apply" }}
+ * themeConfig={{ cardPadding: "p-4", flexEnd: "flex justify-end" }}
  * >
- *   <Input placeholder="Search users..." />
- *   <Select>...</Select>
+ * <Input placeholder="Search users..." />
+ * <Select>...</Select>
  * </AdminFilterBar>
  * ```
  */

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

@@ -7,7 +7,7 @@ export function AdminFilterBar({ children, columns = 3, className = "", withCard
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
         4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4",
     };
-    const innerContent = (_jsxs(_Fragment, { children: [_jsx(Div, { className: `grid ${gridCols[columns]} gap-4`, children: children }), deferred && (_jsxs(Div, { className: `${themeConfig.flexEnd} gap-2 mt-3`, children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
+    const innerContent = (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "grid", gap: "4", className: `${gridCols[columns]}`, children: children }), deferred && (_jsxs(Div, { gap: "2", className: `${themeConfig.flexEnd} mt-3`, children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
                             ? `${labels.applyCount || labels.apply} (${pendingCount})`
                             : labels.apply })] }))] }));
     // If Card component is provided in config, use it; otherwise wrap in plain div

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Users, Package, Store, ShoppingBag, FileText, Settings, Shield, BarChart2, AlertTriangle, BookOpen, } from "lucide-react";
-import { Div, Heading, Text, Section, Alert } from "../../../ui";
+import { Alert, Div, Heading, Row, Section, Stack, Text } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const CLS_WARN_PANEL = "rounded-2xl border border-amber-200 bg-warning-surface dark:border-amber-800 p-6";
 const CLS_WARN_HEAD = "font-semibold text-amber-800 dark:text-amber-300 mb-1";
@@ -74,9 +74,9 @@ export function AdminGuideHubView({ permissions = [], isFullAdmin = false }) {
     const hasPermission = (perm) => isFullAdmin || permissions.includes(perm);
     const visibleCards = GUIDE_CARDS.filter((c) => hasPermission(c.permission));
     const hasAny = visibleCards.length > 0;
-    return (_jsxs(Div, { className: "space-y-8 pb-10", children: [_jsx(Section, { className: "rounded-2xl overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm", children: _jsxs(Div, { className: "px-6 py-8 md:px-10", style: {
-                        background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 60%,var(--appkit-color-secondary-400,#7c3aed) 100%)",
-                    }, children: [_jsxs(Div, { className: "flex items-center gap-3 mb-3", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-white/80 uppercase tracking-widest", children: "Admin & Employee Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-white mb-2", children: "LetItRip Internal Guide" }), _jsx(Text, { className: "text-white/80 text-base", children: "Everything you need to operate and manage LetItRip \u2014 India's largest collectibles marketplace." })] }) }), _jsx(Alert, { variant: "info", compact: true, children: "These guides describe expected platform behaviour. Real access to each section is enforced independently by the permission system \u2014 this page is reference only." }), !hasAny && (_jsx(Alert, { variant: "info", title: "Limited access", children: "Your permission set doesn't include read access to any admin sections yet. Contact your admin to request the permissions you need." })), hasAny && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold text-[var(--appkit-color-text)] mb-4", children: "Guides" }), _jsx(Div, { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: visibleCards.map(({ Icon, title, description, href }) => (_jsxs("a", { href: href, className: "group flex flex-col gap-3 rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Div, { className: "flex items-center gap-3", children: [_jsx(Div, { className: "flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center", style: {
-                                                background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 100%)",
-                                            }, children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", children: title })] }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: description }), _jsx(Text, { className: "text-xs font-medium text-[var(--appkit-color-primary)] mt-auto", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: CLS_WARN_PANEL, children: _jsxs(Div, { className: "flex items-start gap-3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: CLS_WARN_HEAD, children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: CLS_WARN_BODY, children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
+    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { className: "overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", style: {
+                        background: "linear-gradient(135deg,var(--appkit-color-primary-700) 0%,var(--appkit-color-cobalt) 60%,var(--appkit-color-secondary-400) 100%)",
+                    }, children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse", className: "/80 tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin & Employee Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "LetItRip Internal Guide" }), _jsx(Text, { color: "inverse", className: "/80", size: "base", children: "Everything you need to operate and manage LetItRip \u2014 India's largest collectibles marketplace." })] }) }), _jsx(Alert, { variant: "info", compact: true, children: "These guides describe expected platform behaviour. Real access to each section is enforced independently by the permission system \u2014 this page is reference only." }), !hasAny && (_jsx(Alert, { variant: "info", title: "Limited access", children: "Your permission set doesn't include read access to any admin sections yet. Contact your admin to request the permissions you need." })), hasAny && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)] mb-4", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: visibleCards.map(({ Icon, title, description, href }) => (_jsxs("a", { href: href, className: "group flex flex-col gap-3 rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9", align: "center", justify: "center", rounded: "lg", style: {
+                                                background: "linear-gradient(135deg,var(--appkit-color-primary-700) 0%,var(--appkit-color-cobalt) 100%)",
+                                            }, children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: CLS_WARN_PANEL, children: _jsxs(Row, { align: "start", gap: "3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: CLS_WARN_HEAD, children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: CLS_WARN_BODY, children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
 }

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

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Alert, Button, Div, Input, Select, StackedViewShell, Text, useToast, } from "../../../ui";
+import { Alert, Button, Div, Input, Row, Select, Stack, StackedViewShell, Text, useToast } from "../../../ui";
+import { normalizeError } from "../../../errors/normalize";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { MediaUploadField, MediaUploadList, useMediaCleanup, useMediaUpload, } from "../../media";
 const __P = {
@@ -45,6 +46,7 @@ function MediaBrowser({ onCopy }) {
             setNextPageToken(data.data.nextPageToken ?? null);
         }
         catch (err) {
+            void normalizeError(err);
             setError(err instanceof Error ? err.message : "Failed to load");
         }
         finally {
@@ -61,15 +63,17 @@ function MediaBrowser({ onCopy }) {
             return files;
         return files.filter((f) => f.name.toLowerCase().includes(q));
     }, [files, search]);
-    return (_jsxs(Div, { className: `space-y-3 rounded-xl border border-zinc-200 bg-white ${__P.p4} dark:border-slate-700 dark:bg-slate-900`, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Browse existing media" }), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", className: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
+    return (_jsxs(Stack, { className: `${__P.p4}`, gap: "3", rounded: "xl", surface: "default", border: "default", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Browse existing media" }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", className: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { layout: "grid", gap: "2", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
                         const isImage = (f.contentType ?? "").startsWith("image/");
-                        return (_jsxs(Div, { className: "group rounded-lg border border-zinc-200 dark:border-slate-700 overflow-hidden bg-zinc-50 dark:bg-slate-800", children: [_jsx(Div, { className: "aspect-square flex items-center justify-center bg-zinc-100 dark:bg-slate-700 text-xs text-zinc-500 dark:text-zinc-400", children: isImage ? (
+                        return (_jsxs(Div, { className: "group overflow-hidden", surface: "muted", rounded: "lg", border: "default", children: [_jsx(Row, { color: "muted", textSize: "xs", className: "aspect-square", surface: "subtle", align: "center", justify: "center", children: isImage ? (
                                     // eslint-disable-next-line @next/next/no-img-element
-                                    _jsx("img", { src: f.downloadURL, alt: f.name, className: "h-full w-full object-cover", loading: "lazy" })) : (_jsx(Text, { className: "px-2 text-center break-all", children: f.contentType ?? "file" })) }), _jsxs(Div, { className: "p-1.5", children: [_jsx(Text, { className: "truncate text-[10px] text-zinc-600 dark:text-zinc-400 font-mono", children: f.name.split("/").pop() }), _jsx(Button, { type: "button", variant: "ghost", className: "mt-1 w-full text-xs", onClick: () => onCopy(f.downloadURL), children: ACTIONS.MEDIA["copy-url"].label })] })] }, f.name));
-                    }), filtered.length === 0 && !isLoading && (_jsx(Text, { className: "col-span-full py-6 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No files found." }))] }), _jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [filtered.length, " file(s)", nextPageToken ? " · more available" : ""] }), nextPageToken && (_jsx(Button, { type: "button", variant: "outline", onClick: () => void load(nextPageToken), disabled: isLoading, children: isLoading ? "Loading…" : "Load more" }))] })] }));
+                                    _jsx("img", { src: f.downloadURL, alt: f.name, className: "h-full w-full object-cover", loading: "lazy" })) : (
+                                    // audit-variant-ok: file label — px-2 horizontal nudge + break-all; Text lacks paddingX variant
+                                    _jsx(Text, { align: "center", className: "px-2 break-all", children: f.contentType ?? "file" })) }), _jsxs(Div, { className: "p-1.5", children: [_jsx(Text, { className: "truncate text-[10px] font-mono", color: "muted", children: f.name.split("/").pop() }), _jsx(Button, { type: "button", variant: "ghost", textSize: "xs", className: "mt-1 w-full", onClick: () => onCopy(f.downloadURL), children: ACTIONS.MEDIA["copy-url"].label })] })] }, f.name));
+                    }), filtered.length === 0 && !isLoading && (_jsx(Text, { paddingY: "lg", className: "col-span-full", color: "muted", size: "sm", align: "center", children: "No files found." }))] }), _jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { size: "xs", color: "muted", children: [filtered.length, " file(s)", nextPageToken ? " · more available" : ""] }), nextPageToken && (_jsx(Button, { type: "button", variant: "outline", onClick: () => void load(nextPageToken), disabled: isLoading, children: isLoading ? "Loading…" : "Load more" }))] })] }));
 }
 function MediaUploaderPanel({ onUpload, isUploadPending, isCleanupPending, heroAssetUrl, setHeroAssetUrl, galleryAssets, setGalleryAssets, stagedUrls, setHeroStagedUrls, setGalleryStagedUrls, handleAbort, copiedUrl, onCopy, onClearPreviews, onDiscardStaged, }) {
-    return (_jsxs(Div, { className: "space-y-5 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Upload & Copy URL" }), _jsx(MediaUploadField, { label: "Primary media asset", value: heroAssetUrl, onChange: setHeroAssetUrl, onUpload: onUpload, helperText: "Uploads via signed URL (sign \u2192 PUT \u2192 finalize) and previews the returned URL.", onAbort: handleAbort, onStagedUrlsChange: setHeroStagedUrls }), heroAssetUrl && (_jsxs(Div, { className: "flex items-center gap-2 rounded-lg bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 px-3 py-2", children: [_jsx(Text, { className: "flex-1 truncate text-xs text-zinc-600 dark:text-zinc-400 font-mono", children: heroAssetUrl }), _jsx(Button, { type: "button", variant: "outline", onClick: () => onCopy(heroAssetUrl), children: copiedUrl === heroAssetUrl ? "Copied!" : ACTIONS.MEDIA["copy-url"].label })] })), _jsx(MediaUploadList, { label: "Gallery assets", value: galleryAssets, onChange: setGalleryAssets, onUpload: onUpload, helperText: "Attach multiple images or videos for batch checks.", onAbort: handleAbort, onStagedUrlsChange: setGalleryStagedUrls, maxItems: 12 }), galleryAssets.length > 0 && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 font-medium", children: "Gallery URLs" }), galleryAssets.map((asset, i) => (_jsxs(Div, { className: "flex items-center gap-2 rounded bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 px-2 py-1", children: [_jsx(Text, { className: "flex-1 truncate text-xs text-zinc-600 dark:text-zinc-400 font-mono", children: asset.url }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => onCopy(asset.url), children: copiedUrl === asset.url ? "Copied!" : "Copy" })] }, i)))] })), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClearPreviews, disabled: isUploadPending || isCleanupPending, children: ACTIONS.MEDIA["clear-previews"].label }), _jsx(Button, { type: "button", variant: "outline", onClick: onDiscardStaged, disabled: isUploadPending || isCleanupPending || stagedUrls.length === 0, children: isCleanupPending ? "Discarding…" : ACTIONS.MEDIA["discard-staged"].label }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [stagedUrls.length, " staged upload(s)"] })] })] }));
+    return (_jsxs(Stack, { surface: "default", rounded: "xl", padding: "md", border: "default", gap: "5", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Upload & Copy URL" }), _jsx(MediaUploadField, { label: "Primary media asset", value: heroAssetUrl, onChange: setHeroAssetUrl, onUpload: onUpload, helperText: "Uploads via signed URL (sign \u2192 PUT \u2192 finalize) and previews the returned URL.", onAbort: handleAbort, onStagedUrlsChange: setHeroStagedUrls }), heroAssetUrl && (_jsxs(Row, { surface: "muted", padding: "inlineSm", align: "center", gap: "sm", rounded: "lg", border: "default", children: [_jsx(Text, { className: "flex-1 truncate font-mono", color: "muted", size: "xs", children: heroAssetUrl }), _jsx(Button, { type: "button", variant: "outline", onClick: () => onCopy(heroAssetUrl), children: copiedUrl === heroAssetUrl ? "Copied!" : ACTIONS.MEDIA["copy-url"].label })] })), _jsx(MediaUploadList, { label: "Gallery assets", value: galleryAssets, onChange: setGalleryAssets, onUpload: onUpload, helperText: "Attach multiple images or videos for batch checks.", onAbort: handleAbort, onStagedUrlsChange: setGalleryStagedUrls, maxItems: 12 }), galleryAssets.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Gallery URLs" }), galleryAssets.map((asset, i) => (_jsxs(Row, { paddingY: "y-2xs", padding: "x-xs", surface: "muted", rounded: "default", align: "center", gap: "sm", border: "default", children: [_jsx(Text, { className: "flex-1 truncate font-mono", color: "muted", size: "xs", children: asset.url }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => onCopy(asset.url), children: copiedUrl === asset.url ? "Copied!" : "Copy" })] }, i)))] })), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClearPreviews, disabled: isUploadPending || isCleanupPending, children: ACTIONS.MEDIA["clear-previews"].label }), _jsx(Button, { type: "button", variant: "outline", onClick: onDiscardStaged, disabled: isUploadPending || isCleanupPending || stagedUrls.length === 0, children: isCleanupPending ? "Discarding…" : ACTIONS.MEDIA["discard-staged"].label }), _jsxs(Text, { size: "xs", color: "muted", children: [stagedUrls.length, " staged upload(s)"] })] })] }));
 }
 export function AdminMediaView({ labels = {}, children, ...rest }) {
     const hasChildren = React.Children.count(children) > 0;
@@ -105,6 +109,7 @@ export function AdminMediaView({ labels = {}, children, ...rest }) {
             showToast("Staged uploads cleared.", "success");
         }
         catch (err) {
+            void normalizeError(err);
             setOperationMessage("Failed to discard staged media uploads.");
             showToast(err instanceof Error ? err.message : "Failed to clear uploads.", "error");
         }
@@ -117,6 +122,7 @@ export function AdminMediaView({ labels = {}, children, ...rest }) {
             showToast("Copied!", "success");
         }
         catch (err) {
+            void normalizeError(err);
             setOperationMessage("Could not copy URL to clipboard.");
             showToast(err instanceof Error ? err.message : "Failed to copy.", "error");
         }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { useMutation } from "@tanstack/react-query";
 import { Button, Form, FormActions, Input, Select, SideDrawer, Toggle, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -48,7 +48,7 @@ export function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions
         }
     }, [open, item]);
     const { showToast } = useToast();
-    const saveMutation = useMutation({
+    const saveMutation = useApiMutation({
         mutationFn: async () => {
             const payload = {
                 label,
@@ -80,5 +80,5 @@ export function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions
     return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: isEdit ? "Edit Nav Item" : "New Nav Item", children: _jsxs(Form, { onSubmit: (e) => {
                 e.preventDefault();
                 saveMutation.mutate();
-            }, className: "space-y-4 p-4", children: [_jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Products" }), _jsx(Input, { label: "URL / href", value: href, onChange: (e) => setHref(e.target.value), required: true, placeholder: "/products", helperText: "Use relative paths (e.g. /products) or full URLs." }), _jsx(Select, { label: "Icon (optional)", options: ICON_OPTIONS, value: icon, onValueChange: setIcon }), parentOptions.length > 0 && (_jsx(Select, { label: "Parent item (for nested nav)", options: parentSelectOptions, value: parentId, onValueChange: setParentId })), _jsx(Input, { label: "Order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower numbers appear first." }), _jsx(Toggle, { label: "Visible in navigation", checked: isVisible, onChange: setIsVisible }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !canSave || saveMutation.isPending, children: isEdit ? "Save changes" : "Create item" })] })] }) }));
+            }, spacing: "md", padding: "md", children: [_jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Products" }), _jsx(Input, { label: "URL / href", value: href, onChange: (e) => setHref(e.target.value), required: true, placeholder: "/products", helperText: "Use relative paths (e.g. /products) or full URLs." }), _jsx(Select, { label: "Icon (optional)", options: ICON_OPTIONS, value: icon, onValueChange: setIcon }), parentOptions.length > 0 && (_jsx(Select, { label: "Parent item (for nested nav)", options: parentSelectOptions, value: parentId, onValueChange: setParentId })), _jsx(Input, { label: "Order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower numbers appear first." }), _jsx(Toggle, { label: "Visible in navigation", checked: isVisible, onChange: setIsVisible }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !canSave || saveMutation.isPending, children: isEdit ? "Save changes" : "Create item" })] })] }) }));
 }

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, ConfirmDeleteModal, Div, RowActionMenu, Span, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, ConfirmDeleteModal, Div, Row, RowActionMenu, Span, Stack, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { AdminNavEditorView } from "./AdminNavEditorView";
@@ -11,7 +12,7 @@ const __O = {
     hidden: "overflow-hidden",
 };
 function NavItemRow({ item, idx, total, reorderPending, onMoveUp, onMoveDown, onVisibilityChange, onEdit, onDelete, }) {
-    return (_jsxs(Div, { surface: "default", className: "flex items-center gap-3 px-4 py-3", children: [_jsxs(Div, { className: "flex flex-col gap-0.5 shrink-0", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveUp(idx), disabled: idx === 0 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move up", children: "\u25B2" }), _jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveDown(idx), disabled: idx >= total - 1 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move down", children: "\u25BC" })] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Text, { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate", children: [item.parentId ? _jsx(Span, { className: "text-zinc-400 mr-1", children: "\u21B3" }) : null, item.label] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: item.href })] }), _jsx(Toggle, { checked: item.isVisible ?? true, onChange: (val) => onVisibilityChange(item.id, val), label: "" }), _jsx(RowActionMenu, { actions: [
+    return (_jsxs(Row, { surface: "default", padding: "inline", align: "center", gap: "3", children: [_jsxs(Stack, { className: "gap-0.5 shrink-0", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveUp(idx), disabled: idx === 0 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move up", children: "\u25B2" }), _jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveDown(idx), disabled: idx >= total - 1 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move down", children: "\u25BC" })] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Text, { className: "truncate", color: "primary", size: "sm", weight: "medium", children: [item.parentId ? _jsx(Span, { className: "mr-1", color: "faint", children: "\u21B3" }) : null, item.label] }), _jsx(Text, { className: "truncate", color: "muted", size: "xs", children: item.href })] }), _jsx(Toggle, { checked: item.isVisible ?? true, onChange: (val) => onVisibilityChange(item.id, val), label: "" }), _jsx(RowActionMenu, { actions: [
                     { label: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label, onClick: () => onEdit(item) },
                     { label: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label, destructive: true, onClick: () => onDelete(item) },
                 ] })] }));
@@ -32,7 +33,7 @@ export function AdminNavigationView({ labels = {}, ...rest }) {
     });
     const items = data?.items ?? [];
     const sorted = [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-    const visibilityMutation = useMutation({
+    const visibilityMutation = useApiMutation({
         mutationFn: async ({ id, isVisible }) => {
             await apiClient.patch(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(id), { isVisible });
         },
@@ -41,7 +42,7 @@ export function AdminNavigationView({ labels = {}, ...rest }) {
         },
         onError: () => showToast("Failed to update visibility.", "error"),
     });
-    const reorderMutation = useMutation({
+    const reorderMutation = useApiMutation({
         mutationFn: async ({ id, newOrder }) => {
             await apiClient.patch(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(id), { order: newOrder });
         },
@@ -50,7 +51,7 @@ export function AdminNavigationView({ labels = {}, ...rest }) {
         },
         onError: () => showToast("Failed to reorder.", "error"),
     });
-    const deleteMutation = useMutation({
+    const deleteMutation = useApiMutation({
         mutationFn: async (id) => {
             await apiClient.delete(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(id));
         },
@@ -81,11 +82,11 @@ export function AdminNavigationView({ labels = {}, ...rest }) {
     return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Navigation", sections: [
                     isLoading ? (_jsx(Alert, { variant: "info", title: "Loading", children: "Fetching nav items\u2026" }, "loading")) : null,
                     error ? (_jsx(Alert, { variant: "error", title: "Load failed", children: error instanceof Error ? error.message : "Unknown error" }, "error")) : null,
-                    _jsxs(Div, { className: "flex items-center justify-between mb-4", children: [_jsxs(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [sorted.length, " nav item", sorted.length !== 1 ? "s" : ""] }), _jsx(Button, { onClick: () => {
+                    _jsxs(Row, { className: "mb-4", align: "center", justify: "between", children: [_jsxs(Text, { size: "sm", color: "muted", children: [sorted.length, " nav item", sorted.length !== 1 ? "s" : ""] }), _jsx(Button, { onClick: () => {
                                     setEditing(null);
                                     setDrawerOpen(true);
                                 }, children: "+ New item" })] }, "header"),
-                    sorted.length === 0 && !isLoading ? (_jsx(Text, { className: "text-sm text-zinc-400 dark:text-zinc-400 py-8 text-center", children: "No nav items yet. Click \"New item\" to add one." }, "empty")) : null,
-                    _jsx(Div, { className: `divide-y divide-zinc-200 dark:divide-zinc-700 rounded-lg border border-zinc-200 dark:border-zinc-700 ${__O.hidden}`, children: sorted.map((item, idx) => (_jsx(NavItemRow, { item: item, idx: idx, total: sorted.length, reorderPending: reorderMutation.isPending, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown, onVisibilityChange: (id, isVisible) => visibilityMutation.mutate({ id, isVisible }), onEdit: (i) => { setEditing(i); setDrawerOpen(true); }, onDelete: setDeleteTarget }, item.id))) }, "list"),
+                    sorted.length === 0 && !isLoading ? (_jsx(Text, { paddingY: "xl", color: "faint", size: "sm", align: "center", children: "No nav items yet. Click \"New item\" to add one." }, "empty")) : null,
+                    _jsx(Div, { className: `divide-y divide-zinc-200 dark:divide-zinc-700 ${__O.hidden}`, rounded: "lg", border: "default", children: sorted.map((item, idx) => (_jsx(NavItemRow, { item: item, idx: idx, total: sorted.length, reorderPending: reorderMutation.isPending, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown, onVisibilityChange: (id, isVisible) => visibilityMutation.mutate({ id, isVisible }), onEdit: (i) => { setEditing(i); setDrawerOpen(true); }, onDelete: setDeleteTarget }, item.id))) }, "list"),
                 ] }), _jsx(AdminNavEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), onSaved: () => queryClient.invalidateQueries({ queryKey: ["admin", "navigation"] }), item: editing, parentOptions: parentOptions }), _jsx(ConfirmDeleteModal, { isOpen: Boolean(deleteTarget), onClose: () => setDeleteTarget(null), onConfirm: () => deleteMutation.mutate(deleteTarget.id), isDeleting: deleteMutation.isPending, title: "Delete nav item", message: `Remove "${deleteTarget?.label}" from navigation? This cannot be undone.` })] }));
 }

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useCallback, useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { Button, ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
@@ -17,7 +18,7 @@ export function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }) {
     const { showToast } = useToast();
     const [unsubscribeOpen, setUnsubscribeOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
-    const unsubscribeMutation = useMutation({
+    const unsubscribeMutation = useApiMutation({
         mutationFn: async (id) => {
             await apiClient.delete(ADMIN_ENDPOINTS.NEWSLETTER_BY_ID(id));
         },

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ConfirmDeleteModal, Div, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { ConfirmDeleteModal, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
@@ -18,7 +19,7 @@ export function AdminNotificationsView({ children, ...props }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [deleteTarget, setDeleteTarget] = useState(null);
-    const deleteMutation = useMutation({
+    const deleteMutation = useApiMutation({
         mutationFn: async (id) => {
             await apiClient.delete(ADMIN_ENDPOINTS.ADMIN_NOTIFICATION_BY_ID(id));
         },
@@ -31,7 +32,7 @@ export function AdminNotificationsView({ children, ...props }) {
             showToast(err?.message ?? "Failed to delete notification.", "error");
         },
     });
-    const resendMutation = useMutation({
+    const resendMutation = useApiMutation({
         mutationFn: async (id) => {
             await apiClient.post(ADMIN_ENDPOINTS.ADMIN_NOTIFICATION_RESEND(id), {});
         },
@@ -96,7 +97,7 @@ export function AdminNotificationsView({ children, ...props }) {
                     onClick: () => setDeleteTarget(row),
                 },
             ] })),
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Type" }), _jsx(Div, { className: "flex flex-wrap gap-2", children: NOTIF_TYPES.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Type" }), _jsx(Row, { wrap: true, gap: "sm", children: NOTIF_TYPES.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt
                             ? "bg-primary text-white border-primary"
                             : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] })),
     };

package/dist/features/admin/components/AdminOrderEditorView.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 React from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Div, Form, FormActions, Input, Label, Select, SideDrawer, useToast, } from "../../../ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button, Form, FormActions, Input, Label, Select, SideDrawer, Stack, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const STATUS_OPTIONS = [
@@ -41,7 +42,7 @@ export function AdminOrderEditorView({ open, onClose, orderId, orderLabel, curre
             setRefundAmount("");
         }
     }, [open, currentStatus]);
-    const saveMutation = useMutation({
+    const saveMutation = useApiMutation({
         mutationFn: async () => {
             const payload = {
                 status,
@@ -70,5 +71,5 @@ export function AdminOrderEditorView({ open, onClose, orderId, orderLabel, curre
     return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: orderLabel ? `Order: ${orderLabel}` : "Update Order", children: _jsxs(Form, { onSubmit: (e) => {
                 e.preventDefault();
                 saveMutation.mutate();
-            }, className: "space-y-4 p-4", children: [_jsx(Select, { label: "Order status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Input, { label: "Tracking number (optional)", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. DEL1234567890IN" }), _jsx(Select, { label: "Carrier (optional)", options: CARRIER_OPTIONS, value: carrier, onValueChange: setCarrier }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Internal note (optional)" }), _jsx("textarea", { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Reason for status change, escalation notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), (status === "refunded" || status === "return_requested") && (_jsx(Input, { label: "Refund amount \u20B9 (optional)", type: "number", min: "0", step: "0.01", value: refundAmount, onChange: (e) => setRefundAmount(e.target.value), placeholder: "e.g. 499.00" })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !orderId || saveMutation.isPending, children: "Save changes" })] })] }) }));
+            }, spacing: "md", padding: "md", children: [_jsx(Select, { label: "Order status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Input, { label: "Tracking number (optional)", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. DEL1234567890IN" }), _jsx(Select, { label: "Carrier (optional)", options: CARRIER_OPTIONS, value: carrier, onValueChange: setCarrier }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "medium", color: "primary", children: "Internal note (optional)" }), _jsx("textarea", { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Reason for status change, escalation notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), (status === "refunded" || status === "return_requested") && (_jsx(Input, { label: "Refund amount \u20B9 (optional)", type: "number", min: "0", step: "0.01", value: refundAmount, onChange: (e) => setRefundAmount(e.target.value), placeholder: "e.g. 499.00" })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !orderId || saveMutation.isPending, children: "Save changes" })] })] }) }));
 }

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ShoppingBag, Hash, Scale, Wallet, RotateCcw, DollarSign, Gavel } from "lucide-react";
-import { Div, Heading, Span, Text, Section } from "../../../ui";
+import { Code, Div, Heading, Li, Row, Section, Span, Stack, Text, Ul } from "../../../ui";
 import { GC } from "../../_guide-cls";
 export function AdminOrdersGuideView() {
-    return (_jsxs(Div, { className: "space-y-8 pb-10 max-w-3xl mx-auto", children: [_jsxs(Section, { children: [_jsxs(Div, { className: "flex items-center gap-3 mb-2", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center", style: { background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 100%)" }, children: _jsx(ShoppingBag, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-widest", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-[var(--appkit-color-text)] mb-2", children: "Orders & Finance" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Order statuses, payouts, disputes, returns, and commission math on LetItRip." })] }), [
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "xl", style: { background: "linear-gradient(135deg,var(--appkit-color-primary-700) 0%,var(--appkit-color-cobalt) 100%)" }, children: _jsx(ShoppingBag, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Orders & Finance" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Order statuses, payouts, disputes, returns, and commission math on LetItRip." })] }), [
                 {
                     Icon: ShoppingBag, title: "Order Statuses",
-                    content: (_jsxs(Div, { className: "space-y-2 text-sm", children: [[
+                    content: (_jsxs(Stack, { textSize: "sm", gap: "sm", children: [[
                                 ["PENDING", "Payment received. Can still be cancelled by buyer or admin."],
                                 ["PROCESSING", "Seller has acknowledged and is packing."],
                                 ["SHIPPED", "Dispatched. Tracking number provided by seller."],
@@ -14,31 +14,31 @@ export function AdminOrdersGuideView() {
                                 ["RETURN_REQUESTED", "Buyer opened a return. Seller has 3 days to respond."],
                                 ["REFUNDED", "Return accepted and refund issued via Razorpay."],
                                 ["CANCELLED", "Cancelled before shipping. Payment returned."],
-                            ].map(([status, note]) => (_jsxs(Div, { className: "flex gap-3", children: [_jsx(Text, { className: "flex-shrink-0 font-mono font-semibold text-[var(--appkit-color-primary)] w-40 text-xs", children: status }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: note })] }, status))), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] pt-2", children: "Admin-only transitions: force-cancel (any status before DELIVERED), force-refund (post-DELIVERED dispute)." })] })),
+                            ].map(([status, note]) => (_jsxs(Row, { gap: "3", children: [_jsx(Text, { className: "flex-shrink-0 font-mono text-[var(--appkit-color-primary)] w-40", size: "xs", weight: "semibold", children: status }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: note })] }, status))), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] pt-2", size: "sm", children: "Admin-only transitions: force-cancel (any status before DELIVERED), force-refund (post-DELIVERED dispute)." })] })),
                 },
                 {
                     Icon: Hash, title: "Order ID Format",
-                    content: (_jsxs(_Fragment, { children: [_jsxs(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] mb-3", children: ["Format: ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 py-0.5 rounded", children: "order-{itemCount}-{YYYYMMDD}-{rand6}" })] }), _jsxs(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: ["The item count in the ID enables quick triage \u2014 a ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "order-8-..." }), " is a large multi-item order that needs more careful handling than a ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "order-1-..." }), ". Search by order ID in the admin panel using the full ID string."] })] })),
+                    content: (_jsxs(_Fragment, { children: [_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mb-3", size: "sm", children: ["Format: ", _jsx(Code, { size: "xs", padding: "inline", rounded: "default", surface: "subtle", children: "order-{itemCount}-{YYYYMMDD}-{rand6}" })] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["The item count in the ID enables quick triage \u2014 a ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "order-8-..." }), " is a large multi-item order that needs more careful handling than a ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "order-1-..." }), ". Search by order ID in the admin panel using the full ID string."] })] })),
                 },
                 {
                     Icon: Scale, title: "Intervening in a Dispute",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsx("li", { children: "Admin steps in when: seller is unresponsive for 3+ days on a return, or buyer escalates via support ticket." }), _jsxs("li", { children: ["Admin dispute tools: ", _jsx(Span, { weight: "bold", children: "force-accept return" }), " (moves to REFUNDED and withholds seller payout), ", _jsx(Span, { weight: "bold", children: "platform credit" }), " (future feature)."] }), _jsx("li", { children: "Document your reasoning in the support ticket before taking any force action." })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsx(Li, { children: "Admin steps in when: seller is unresponsive for 3+ days on a return, or buyer escalates via support ticket." }), _jsxs(Li, { children: ["Admin dispute tools: ", _jsx(Span, { weight: "bold", children: "force-accept return" }), " (moves to REFUNDED and withholds seller payout), ", _jsx(Span, { weight: "bold", children: "platform credit" }), " (future feature)."] }), _jsx(Li, { children: "Document your reasoning in the support ticket before taking any force action." })] })),
                 },
                 {
                     Icon: Wallet, title: "Payouts",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Payout cycle" }), ": Weekly. All DELIVERED orders (minus platform commission) are batched into a single payout per store."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "Status flow" }), ": PENDING \u2192 PROCESSING \u2192 PAID / FAILED."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "FAILED payout" }), ": Check the store's ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "payoutDetails" }), " \u2014 UPI VPA or bank details may be stale. Contact the seller via their store email before retrying."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "ordersIncluded" }), ": Array of order IDs bundled in this payout batch \u2014 use to audit which orders are covered."] })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Payout cycle" }), ": Weekly. All DELIVERED orders (minus platform commission) are batched into a single payout per store."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Status flow" }), ": PENDING \u2192 PROCESSING \u2192 PAID / FAILED."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "FAILED payout" }), ": Check the store's ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "payoutDetails" }), " \u2014 UPI VPA or bank details may be stale. Contact the seller via their store email before retrying."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "ordersIncluded" }), ": Array of order IDs bundled in this payout batch \u2014 use to audit which orders are covered."] })] })),
                 },
                 {
                     Icon: RotateCcw, title: "Return Requests",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsx("li", { children: "Admin can view the return reason and attached photos on the order detail page." }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "When to override a seller rejection" }), ": Only when photographic evidence clearly supports the buyer's claim of a significant not-as-described defect. Do not override for buyer's remorse."] }), _jsx("li", { children: "After admin override: refund is issued automatically via Razorpay (3\u20137 business days for card, 1\u20132 for UPI). Seller payout for that order is withheld." })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsx(Li, { children: "Admin can view the return reason and attached photos on the order detail page." }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "When to override a seller rejection" }), ": Only when photographic evidence clearly supports the buyer's claim of a significant not-as-described defect. Do not override for buyer's remorse."] }), _jsx(Li, { children: "After admin override: refund is issued automatically via Razorpay (3\u20137 business days for card, 1\u20132 for UPI). Seller payout for that order is withheld." })] })),
                 },
                 {
                     Icon: DollarSign, title: "Commission & Settlement Math",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "platformFee" }), ": Set in ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "siteSettings.fees.platformFee" }), " (percentage). Applied to the order's item subtotal."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: "text-[var(--appkit-color-text)]", children: "customCommissionRate" }), ": Stored on ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "StoreDocument" }), " for stores with the ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "lower_commission_rate" }), " capability. Overrides the platform default for that store."] }), _jsx("li", { children: "Payout = order subtotal \u00D7 (1 \u2212 commission rate). Shipping fees are passed through to the seller at cost." })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "platformFee" }), ": Set in ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "siteSettings.fees.platformFee" }), " (percentage). Applied to the order's item subtotal."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "customCommissionRate" }), ": Stored on ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "StoreDocument" }), " for stores with the ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "lower_commission_rate" }), " capability. Overrides the platform default for that store."] }), _jsx(Li, { children: "Payout = order subtotal \u00D7 (1 \u2212 commission rate). Shipping fees are passed through to the seller at cost." })] })),
                 },
                 {
                     Icon: Gavel, title: "Auction Settlement",
-                    content: (_jsxs("ul", { className: GC.listMuted, children: [_jsx("li", { children: "When an auction ends and the winner does not pay within 48 hours: the order auto-cancels and the system notifies the next-highest bidder." }), _jsx("li", { children: "If the auto-cancel system fails (rare), admin can manually cancel from the order detail page and trigger the next-bidder flow via a support action." }), _jsxs("li", { children: ["Repeat non-paying winners can receive a ", _jsx("code", { className: "text-xs bg-[var(--appkit-color-border)] px-1 rounded", children: "place_bids" }), " soft ban from the Trust & Safety section."] })] })),
+                    content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsx(Li, { children: "When an auction ends and the winner does not pay within 48 hours: the order auto-cancels and the system notifies the next-highest bidder." }), _jsx(Li, { children: "If the auto-cancel system fails (rare), admin can manually cancel from the order detail page and trigger the next-bidder flow via a support action." }), _jsxs(Li, { children: ["Repeat non-paying winners can receive a ", _jsx(Code, { size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "place_bids" }), " soft ban from the Trust & Safety section."] })] })),
                 },
-            ].map(({ Icon, title, content }) => (_jsxs(Section, { className: "rounded-2xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", children: [_jsxs(Div, { className: "flex items-center gap-3 px-6 py-4 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-2,var(--appkit-color-border))]/20", children: [_jsx(Icon, { className: "w-5 h-5 text-[var(--appkit-color-primary)]" }), _jsx(Heading, { level: 2, className: "text-base font-semibold text-[var(--appkit-color-text)]", children: title })] }), _jsx(Div, { className: "px-6 py-5", children: content })] }, title)))] }));
+            ].map(({ Icon, title, content }) => (_jsxs(Section, { className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", rounded: "2xl", children: [_jsxs(Row, { className: "border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-2,var(--appkit-color-border))]/20", padding: "inlineLg", align: "center", gap: "3", children: [_jsx(Icon, { className: "w-5 h-5 text-[var(--appkit-color-primary)]" }), _jsx(Heading, { level: 2, size: "base", weight: "semibold", children: title })] }), _jsx(Div, { paddingY: "y-md-lg", padding: "x-lg", children: content })] }, title)))] }));
 }

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

@@ -9,15 +9,15 @@
  * @example
  * ```tsx
  * <AdminPageHeader
- *   title="User Management"
- *   subtitle="Manage user accounts and permissions"
- *   actionLabel="Add User"
- *   onAction={() => setShowUserDrawer(true)}
- *   themeConfig={{
- *     gradient: "bg-gradient-to-r from-blue-50 to-blue-100",
- *     titleClass: "text-3xl font-bold",
- *     subtitleClass: "text-lg text-gray-600"
- *   }}
+ * title="User Management"
+ * subtitle="Manage user accounts and permissions"
+ * actionLabel="Add User"
+ * onAction={() => setShowUserDrawer(true)}
+ * themeConfig={{
+ * gradient: "bg-info-surface",
+ * titleClass: "text-3xl font-bold",
+ * subtitleClass: "text-lg text-gray-600"
+ * }}
  * />
  * ```
  */

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Nav, Text, Span, Button, Row } from "@mohasinac/appkit/ui";
+import { Button, Div, Heading, Nav, Row, Span, Stack, Text } from "@mohasinac/appkit/ui";
 import { ChevronRight } from "lucide-react";
 const __P = {
     p6: "p-6",
 };
 export function AdminPageHeader({ title, subtitle, description, badge, breadcrumb, actionLabel, onAction, actionIcon, actionDisabled = false, className = "", themeConfig = {
-    gradient: "bg-blue-50",
+    gradient: "bg-info-surface",
     titleClass: "text-3xl font-bold",
     subtitleClass: "text-lg text-gray-700",
     spacingClass: "space-y-1",
 }, }) {
-    return (_jsxs(Div, { className: `${themeConfig.gradient} ${__P.p6} ${className}`, children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { className: "flex items-center gap-1", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { weight: "medium", className: "text-zinc-700 dark:text-zinc-200", children: crumb.label }))] }, index))) })), _jsxs(Div, { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [_jsxs(Div, { className: themeConfig.spacingClass, children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400 mt-1", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
+    return (_jsxs(Div, { className: `${themeConfig.gradient} ${__P.p6} ${className}`, children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", layout: "flex", gap: "xs", textSize: "sm", color: "muted", className: "mb-3", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { layout: "flex", gap: "xs", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { weight: "medium", color: "primary", children: crumb.label }))] }, index))) })), _jsxs(Stack, { direction: "sm-row", align: "center", justify: "between", gap: "md", children: [_jsxs(Div, { className: themeConfig.spacingClass, children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
 }