@mohasinac/appkit 3.0.3 → 3.0.6

package/dist/features/auctions/schemas/firestore.d.ts

@@ -2,6 +2,7 @@
  * Bids/Auctions Firestore Document Types & Constants
  */
 import { type GenerateBidIdInput } from "../../../utils/id-generators";
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 export type BidStatus = "active" | "outbid" | "won" | "lost" | "cancelled";
 /** Runtime-accessible bid status values — use instead of bare string literals. */
 export declare const BidStatusValues: {
@@ -11,8 +12,7 @@ export declare const BidStatusValues: {
     readonly LOST: "lost";
     readonly CANCELLED: "cancelled";
 };
-export interface BidDocument {
-    id: string;
+export interface BidDocument extends BaseDocument {
     productId: string;
     productTitle: string;
     userId: string;
@@ -25,8 +25,6 @@ export interface BidDocument {
     previousBidAmount?: number;
     bidDate: Date;
     autoMaxBid?: number;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const BID_COLLECTION: "bids";
 export declare const BID_INDEXED_FIELDS: readonly ["productId", "userId", "status", "isWinning", "bidDate", "createdAt"];

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

@@ -63,13 +63,13 @@ export declare const auctionItemSchema: z.ZodObject<{
     featured: boolean;
     listingType: "auction";
     createdAt: string;
-    id: string;
     title: string;
     slug: string;
     price: number;
     auctionEndDate: string;
     startingBid: number;
     bidCount: number;
+    id: string;
     updatedAt: string;
     sellerId: string;
     storeId?: string | undefined;
@@ -92,13 +92,13 @@ export declare const auctionItemSchema: z.ZodObject<{
     featured: boolean;
     listingType: "auction";
     createdAt: string;
-    id: string;
     title: string;
     slug: string;
     price: number;
     auctionEndDate: string;
     startingBid: number;
     bidCount: number;
+    id: string;
     updatedAt: string;
     sellerId: string;
     storeId?: string | undefined;

package/dist/features/auth/components/ForgotPasswordView.js

@@ -1,21 +1,32 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
 import { useState } from "react";
-import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Alert, Button, Div, Heading, Row, Stack, Text, useToast } from "../../../ui";
 import { Form } from "../../../ui/components/Form";
 import { FieldInput } from "../../../ui/forms/FieldInput";
 import { applyZodIssues } from "../../../ui/forms/FormShell";
 import { forgotPasswordSchema } from "../schemas";
 export function ForgotPasswordView({ onSubmit, isLoading = false, error, success, labels = {}, renderBackLink, className = "", }) {
     const [email, setEmail] = useState("");
+    const { showToast } = useToast();
+    function buildClickHandler(setFieldError, clearErrors) {
+        return async () => {
+            clearErrors();
+            const parsed = forgotPasswordSchema.safeParse({ email });
+            if (!parsed.success)
+                return applyZodIssues(parsed.error.issues, setFieldError);
+            try {
+                await onSubmit(parsed.data.email);
+            }
+            catch (err) {
+                void normalizeError(err);
+                showToast(err instanceof Error ? err.message : "Failed to send reset link", "error");
+            }
+        };
+    }
     return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Forgot Password" }), _jsx(Text, { className: "mt-2 text-neutral-600 dark:text-neutral-400", size: "sm", children: labels.description ??
-                                "Enter your email and we'll send you a reset link." })] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), !success && (_jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "email", label: labels.emailLabel ?? "Email address", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: email, onChange: setEmail }), _jsx(Button, { type: "submit", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: async () => {
-                                    clearErrors();
-                                    const parsed = forgotPasswordSchema.safeParse({ email });
-                                    if (!parsed.success)
-                                        return applyZodIssues(parsed.error.issues, setFieldError);
-                                    await onSubmit(parsed.data.email);
-                                }, children: isLoading
+                                "Enter your email and we'll send you a reset link." })] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), !success && (_jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "email", label: labels.emailLabel ?? "Email address", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: email, onChange: setEmail }), _jsx(Button, { type: "submit", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: buildClickHandler(setFieldError, clearErrors), children: isLoading
                                     ? (labels.submittingLabel ?? "Sending…")
                                     : (labels.submitLabel ?? "Send reset link") })] })) })), renderBackLink && (_jsx(Div, { textSize: "sm", className: "text-center", children: renderBackLink() }))] }) }));
 }

package/dist/features/auth/components/LoginForm.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
 import { useState } from "react";
-import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Alert, Button, Div, Heading, Row, Stack, Text, useToast } from "../../../ui";
 import { Form } from "../../../ui/components/Form";
 import { FieldInput } from "../../../ui/forms/FieldInput";
 import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
@@ -9,6 +10,7 @@ import { applyZodIssues } from "../../../ui/forms/FormShell";
 import { loginSchema } from "../schemas";
 import { SocialAuthButtons } from "./SocialAuthButtons";
 export function LoginForm({ onSubmit, onGoogleLogin, isLoading = false, error, labels = {}, renderSocialButtons, renderCreateAccountLink, renderForgotPasswordLink, className = "", }) {
+    const { showToast } = useToast();
     const [values, setValues] = useState({
         email: "",
         password: "",
@@ -19,7 +21,13 @@ export function LoginForm({ onSubmit, onGoogleLogin, isLoading = false, error, l
                                     const parsed = loginSchema.safeParse(values);
                                     if (!parsed.success)
                                         return applyZodIssues(parsed.error.issues, setFieldError);
-                                    await onSubmit(values);
+                                    try {
+                                        await onSubmit(values);
+                                    }
+                                    catch (err) {
+                                        void normalizeError(err);
+                                        showToast(err instanceof Error ? err.message : "Sign in failed", "error");
+                                    }
                                 }, children: isLoading
                                     ? (labels.submittingLabel ?? "Signing in…")
                                     : (labels.submitLabel ?? "Sign in") })] })) }), onGoogleLogin && !renderSocialButtons ? (_jsx(SocialAuthButtons, { onGoogle: onGoogleLogin, disabled: isLoading, dividerLabel: labels.orSeparator ?? "Or continue with", googleLabel: "Sign in with Google" })) : (renderSocialButtons?.())] }) }));

package/dist/features/auth/components/RegisterForm.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
 import { useState } from "react";
 import { z } from "zod";
-import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Alert, Button, Div, Heading, Row, Stack, Text, useToast } from "../../../ui";
 import { Form } from "../../../ui/components/Form";
 import { FieldInput } from "../../../ui/forms/FieldInput";
 import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
@@ -19,6 +20,7 @@ const registerClientSchema = registerSchema.extend({
     path: ["confirmPassword"],
 });
 export function RegisterForm({ onSubmit, isLoading = false, error, success, labels = {}, renderSocialButtons, renderLoginLink, renderTermsLink, renderPasswordStrength, className = "", }) {
+    const { showToast } = useToast();
     const [values, setValues] = useState({
         email: "",
         password: "",
@@ -31,7 +33,13 @@ export function RegisterForm({ onSubmit, isLoading = false, error, success, labe
                                     const parsed = registerClientSchema.safeParse(values);
                                     if (!parsed.success)
                                         return applyZodIssues(parsed.error.issues, setFieldError);
-                                    await onSubmit(values);
+                                    try {
+                                        await onSubmit(values);
+                                    }
+                                    catch (err) {
+                                        void normalizeError(err);
+                                        showToast(err instanceof Error ? err.message : "Registration failed", "error");
+                                    }
                                 }, children: isLoading
                                     ? (labels.submittingLabel ?? "Creating account…")
                                     : (labels.submitLabel ?? "Create account") })] })) }), renderSocialButtons?.()] }) }));

package/dist/features/auth/components/ResetPasswordView.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
 import { useState } from "react";
 import { z } from "zod";
-import { Alert, Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { Alert, Button, Div, Heading, Row, Stack, Text, useToast } from "../../../ui";
 import { Form } from "../../../ui/components/Form";
 import { FieldInput } from "../../../ui/forms/FieldInput";
 import { applyZodIssues } from "../../../ui/forms/FormShell";
@@ -14,15 +15,25 @@ const resetClientSchema = z.object({
     path: ["confirmPassword"],
 });
 export function ResetPasswordView({ oobCode, onSubmit, isLoading = false, error, success, labels = {}, renderLoginLink, className = "", }) {
+    const { showToast } = useToast();
     const [password, setPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
-    return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Reset Password" }), labels.description && (_jsx(Text, { className: "mt-2 text-neutral-600 dark:text-neutral-400", size: "sm", children: labels.description }))] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), success ? (_jsxs(Alert, { variant: "success", compact: true, children: [success, renderLoginLink && _jsx(Div, { className: "mt-2", children: renderLoginLink() })] })) : (_jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "password", label: labels.passwordLabel ?? "New password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: password, onChange: setPassword }), _jsx(FieldInput, { name: "confirmPassword", label: labels.confirmPasswordLabel ?? "Confirm new password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.confirmPasswordPlaceholder ?? "••••••••", value: confirmPassword, onChange: setConfirmPassword }), _jsx(Button, { type: "submit", variant: "primary", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: async () => {
-                                    clearErrors();
-                                    const parsed = resetClientSchema.safeParse({ password, confirmPassword });
-                                    if (!parsed.success)
-                                        return applyZodIssues(parsed.error.issues, setFieldError);
-                                    await onSubmit(oobCode, parsed.data.password);
-                                }, children: isLoading
+    function buildClickHandler(setFieldError, clearErrors) {
+        return async () => {
+            clearErrors();
+            const parsed = resetClientSchema.safeParse({ password, confirmPassword });
+            if (!parsed.success)
+                return applyZodIssues(parsed.error.issues, setFieldError);
+            try {
+                await onSubmit(oobCode, parsed.data.password);
+            }
+            catch (err) {
+                void normalizeError(err);
+                showToast(err instanceof Error ? err.message : "Password reset failed", "error");
+            }
+        };
+    }
+    return (_jsx(Row, { className: `min-h-[60vh] ${className}`, align: "center", justify: "center", padding: "x-md", children: _jsxs(Stack, { className: "max-w-md w-full", gap: "lg", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "font-extrabold", size: "3xl", children: labels.title ?? "Reset Password" }), labels.description && (_jsx(Text, { className: "mt-2 text-neutral-600 dark:text-neutral-400", size: "sm", children: labels.description }))] }), error && (_jsx(Alert, { variant: "error", compact: true, children: error })), success ? (_jsxs(Alert, { variant: "success", compact: true, children: [success, renderLoginLink && _jsx(Div, { className: "mt-2", children: renderLoginLink() })] })) : (_jsx(Form, { noValidate: true, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsx(FieldInput, { name: "password", label: labels.passwordLabel ?? "New password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: password, onChange: setPassword }), _jsx(FieldInput, { name: "confirmPassword", label: labels.confirmPasswordLabel ?? "Confirm new password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.confirmPasswordPlaceholder ?? "••••••••", value: confirmPassword, onChange: setConfirmPassword }), _jsx(Button, { type: "submit", variant: "primary", isLoading: isLoading, disabled: isLoading, className: "w-full", onClick: buildClickHandler(setFieldError, clearErrors), children: isLoading
                                     ? (labels.submittingLabel ?? "Resetting…")
                                     : (labels.submitLabel ?? "Reset password") })] })) }))] }) }));
 }

package/dist/features/auth/components/SocialAuthButtons.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Div, Row, Span } from "../../../ui";
 export function SocialAuthButtons({ onGoogle, disabled, dividerLabel, googleLabel, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "relative", children: [_jsx(Row, { className: "absolute inset-0", align: "center", children: _jsx(Div, { className: "w-full border-t border-neutral-200" }) }), _jsx(Row, { textSize: "sm", className: "relative", justify: "center", children: _jsx(Span, { className: "text-neutral-500 dark:text-neutral-400", padding: "x-xs", surface: "default", children: dividerLabel }) })] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1", children: _jsxs(Button, { rounded: "md", type: "button", onClick: onGoogle, disabled: disabled, variant: "outline", paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", className: "inline- justify-center border border-neutral-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-neutral-900 dark:text-zinc-100 hover:bg-neutral-50 dark:hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("svg", { className: "mr-2 h-5 w-5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "currentColor", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "currentColor", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "currentColor", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), googleLabel] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "relative", children: [_jsx(Row, { className: "absolute inset-0", align: "center", children: _jsx(Div, { className: "w-full border-t border-neutral-200" }) }), _jsx(Row, { textSize: "sm", className: "relative", justify: "center", children: _jsx(Span, { className: "text-neutral-500 dark:text-neutral-400", padding: "x-xs", surface: "default", children: dividerLabel }) })] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1", children: _jsxs(Button, { rounded: "md", type: "button", onClick: onGoogle, disabled: disabled, variant: "outline", paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", className: "inline- justify-[center] border border-neutral-300 dark:border-neutral-700 bg-[var(--appkit-color-surface)] dark:bg-neutral-900 text-neutral-900 dark:text-[var(--appkit-color-text)] hover:bg-neutral-50 dark:hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("svg", { className: "mr-2 h-5 w-5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "currentColor", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "currentColor", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "currentColor", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), googleLabel] }) })] }));
 }

package/dist/features/before-after/components/BeforeAfterSlider.js

@@ -23,5 +23,5 @@ export function BeforeAfterSlider({ item, className = "", }) {
     return (_jsxs(Div, { ref: containerRef, className: `relative aspect-square select-none overflow-hidden ${className}`, rounded: "xl", onPointerMove: handlePointerMove, onTouchMove: handleTouchMove, children: [_jsx(Div, { role: "img", "aria-label": "After", className: "absolute inset-0 h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${item.afterImageUrl})` } }), _jsx(Div, { className: "absolute inset-0 overflow-hidden", style: { width: `${position}%` }, children: _jsx(Div, { role: "img", "aria-label": "Before", className: "h-full w-full bg-center bg-cover", style: {
                         width: containerRef.current?.offsetWidth ?? "100%",
                         backgroundImage: `url(${item.beforeImageUrl})`,
-                    } }) }), _jsxs(Stack, { justify: "center", className: "absolute inset-y-0 w-1 -translate-x-1/2 cursor-ew-resize", align: "center", style: { left: `${position}%` }, children: [_jsx(Div, { className: "h-full w-0.5 shadow", surface: "default" }), _jsx(Div, { className: "absolute h-8 w-8 border-2 border-white", surface: "default", rounded: "full", shadow: "md" })] }), _jsx(Span, { surface: "overlay-xs", color: "inverse", size: "xs", weight: "medium", className: "absolute left-2 top-2", rounded: "default", padding: "pill-xs", children: "Before" }), _jsx(Span, { surface: "overlay-xs", color: "inverse", size: "xs", weight: "medium", className: "absolute right-2 top-2", rounded: "default", padding: "pill-xs", children: "After" }), item.durationWeeks && (_jsxs(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute bottom-2 left-1/2 -translate-x-1/2", rounded: "default", padding: "pill-md", children: [item.durationWeeks, " weeks"] }))] }));
+                    } }) }), _jsxs(Stack, { justify: "center", className: "absolute inset-y-0 w-1 -translate-x-1/2 cursor-ew-resize", align: "center", style: { left: `${position}%` }, children: [_jsx(Div, { className: "h-full w-0.5", surface: "default", style: { boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)" } }), _jsx(Div, { className: "absolute h-8 w-8 border-2 border-white", surface: "default", rounded: "full", shadow: "md" })] }), _jsx(Span, { surface: "overlay-xs", color: "inverse", size: "xs", weight: "medium", className: "absolute left-2 top-2", rounded: "default", padding: "pill-xs", children: "Before" }), _jsx(Span, { surface: "overlay-xs", color: "inverse", size: "xs", weight: "medium", className: "absolute right-2 top-2", rounded: "default", padding: "pill-xs", children: "After" }), item.durationWeeks && (_jsxs(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute bottom-2 left-1/2 -translate-x-1/2", rounded: "default", padding: "pill-md", children: [item.durationWeeks, " weeks"] }))] }));
 }

package/dist/features/before-after/schemas/index.d.ts

@@ -22,8 +22,8 @@ export declare const beforeAfterItemSchema: z.ZodObject<{
     sortOrder: z.ZodDefault<z.ZodNumber>;
     createdAt: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    id: string;
     title: string;
+    id: string;
     sortOrder: number;
     isActive: boolean;
     createdAt?: string | undefined;
@@ -34,8 +34,8 @@ export declare const beforeAfterItemSchema: z.ZodObject<{
     afterImageUrl?: string | undefined;
     durationWeeks?: number | undefined;
 }, {
-    id: string;
     title: string;
+    id: string;
     createdAt?: string | undefined;
     description?: string | undefined;
     sortOrder?: number | undefined;

package/dist/features/blog/api/[slug]/route.js

@@ -28,7 +28,7 @@ export async function GET(_request, context) {
             return NextResponse.json({ success: false, error: "Blog post not found" }, { status: 404 });
         }
         // Increment view count fire-and-forget — must not block response
-        blogRepository.incrementViews(post.id).catch(() => { });
+        blogRepository.incrementViews(post.id).catch(console.error);
         // Related posts: same category, latest 3, excluding current
         const related = (await blogRepository.findRelated(post.category, post.id, 3)).map(toBlogPost);
         const body = { post: toBlogPost(post), related };

package/dist/features/blog/components/BlogFeaturedCard.js

@@ -30,5 +30,5 @@ export function BlogFeaturedCard({ post, href, labels = {}, className = "", sele
             day: "numeric",
         })
         : "";
-    return (_jsxs(Article, { className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-shadow duration-200 ${isSelected ? "ring-2 ring-primary outline outline-2 outline-primary" : ""} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(post.id, !isSelected); }, label: isSelected ? "Deselect post" : "Select post", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(TextLink, { href: href, className: "flex h-full flex-col", children: [_jsx(Div, { className: `aspect-video ${__O.hidden} flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Div, { role: "img", "aria-label": safeTitle, surface: "muted", className: "h-full w-full" })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { gap: "xs", className: "mb-2", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block capitalize ${CATEGORY_BADGE[post.category] ?? "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"}`, rounded: "full", padding: "pill-xs", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels.featuredBadge ?? "Featured" }))] }), _jsx(Heading, { level: 3, className: `leading-snug mb-1`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: safeTitle }), post.excerpt && (_jsx(Text, { className: `mb-3`, color: "muted", truncate: 2, size: "sm", children: post.excerpt })), _jsxs(Row, { color: "muted", textSize: "xs", className: "mt-auto", gap: "3", wrap: true, children: [post.authorName && (_jsx(Span, { children: safeDisplayName(post.authorName, "Author") })), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels.readTime ?? "min read"] })), date && _jsx(Span, { children: date })] })] })] })] }));
+    return (_jsxs(Article, { rounded: "xl", shadow: "hover-md", className: `group relative h-full overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${isSelected ? "ring-2 ring-primary outline outline-2 outline-primary" : ""} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(post.id, !isSelected); }, label: isSelected ? "Deselect post" : "Select post", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(TextLink, { href: href, layout: "flex-col", className: "h-full", children: [_jsx(Div, { className: `aspect-video ${__O.hidden} flex-shrink-0`, children: coverImageUrl ? (_jsx("img", { src: coverImageUrl, alt: safeTitle, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" })) : (_jsx(Div, { role: "img", "aria-label": safeTitle, surface: "muted", className: "h-full w-full" })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { gap: "xs", className: "mb-2", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block capitalize ${CATEGORY_BADGE[post.category] ?? "bg-[var(--appkit-color-bg)] text-[var(--appkit-color-text-muted)]"}`, rounded: "full", padding: "pill-xs", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels.featuredBadge ?? "Featured" }))] }), _jsx(Heading, { level: 3, className: `leading-snug mb-1`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: safeTitle }), post.excerpt && (_jsx(Text, { className: `mb-3`, color: "muted", truncate: 2, size: "sm", children: post.excerpt })), _jsxs(Row, { color: "muted", textSize: "xs", className: "mt-auto", gap: "3", wrap: true, children: [post.authorName && (_jsx(Span, { children: safeDisplayName(post.authorName, "Author") })), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels.readTime ?? "min read"] })), date && _jsx(Span, { children: date })] })] })] })] }));
 }

package/dist/features/blog/components/BlogListView.js

@@ -25,7 +25,7 @@ export function BlogCard({ post, href, onClick, className = "" }) {
     const isInteractive = !!(href || onClick);
     const card = (_jsxs(Article, { role: onClick && !href ? "button" : undefined, tabIndex: onClick && !href ? 0 : undefined, onKeyDown: onClick && !href
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(post)
-            : undefined, onClick: onClick && !href ? () => onClick(post) : undefined, className: `group flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm transition hover:shadow-md ${isInteractive ? "cursor-pointer" : ""} ${className}`, children: [_jsx(Div, { className: `aspect-video w-full ${__O.hidden} bg-neutral-100 dark:bg-slate-800 flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Row, { surface: "muted", className: "h-full w-full", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-30", size: "4xl", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p5}`, children: [_jsxs(Row, { className: "mb-2", gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: "bg-primary/10 text-primary", rounded: "full", padding: "pill-xs", transform: "capitalize", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", color: "muted", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `group-hover:text-primary`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 flex-1`, color: "muted", truncate: 3, size: "sm", children: post.excerpt })), _jsxs(Row, { className: "mt-auto", padding: "t-sm", gap: "3", children: [post.authorAvatar ? (_jsx(Div, { role: "img", "aria-label": post.authorName ?? "author", className: "h-7 w-7 flex-shrink-0 bg-center bg-cover", rounded: "full", style: { backgroundImage: `url(${post.authorAvatar})` } })) : post.authorName ? (_jsx(Row, { textWeight: "bold", textSize: "xs", className: "h-7 w-7 flex-shrink-0 bg-primary/10 text-primary", align: "center", justify: "center", rounded: "full", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400 min-w-0", size: "xs", children: [post.authorName && (_jsx(Span, { weight: "medium", className: "text-neutral-700", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] })] })] }));
+            : undefined, onClick: onClick && !href ? () => onClick(post) : undefined, className: `group flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm transition hover:shadow-md ${isInteractive ? "cursor-pointer" : ""} ${className}`, children: [_jsx(Div, { className: `aspect-video w-full ${__O.hidden} bg-neutral-100 dark:bg-[var(--appkit-color-surface-elevated)] flex-shrink-0`, children: coverImageUrl ? (_jsx("img", { src: coverImageUrl, alt: post.title, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" })) : (_jsx(Row, { surface: "muted", className: "h-full w-full", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-30", size: "4xl", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p5}`, children: [_jsxs(Row, { className: "mb-2", gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: "bg-primary/10 text-primary", rounded: "full", padding: "pill-xs", transform: "capitalize", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", color: "muted", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `group-hover:text-primary`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 flex-1`, color: "muted", truncate: 3, size: "sm", children: post.excerpt })), _jsxs(Row, { className: "mt-auto", padding: "t-sm", gap: "3", children: [post.authorAvatar ? (_jsx("img", { src: post.authorAvatar, alt: post.authorName ?? "author", className: "h-7 w-7 flex-shrink-0 object-cover rounded-full" })) : post.authorName ? (_jsx(Row, { textWeight: "bold", textSize: "xs", className: "h-7 w-7 flex-shrink-0 bg-primary/10 text-primary", align: "center", justify: "center", rounded: "full", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400 min-w-0", size: "xs", children: [post.authorName && (_jsx(Span, { weight: "medium", className: "text-neutral-700", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] })] })] }));
     if (href) {
         return (_jsx(Link, { href: href, className: "block h-full", children: card }));
     }

package/dist/features/blog/components/BlogPostView.js

@@ -53,5 +53,5 @@ export function BlogPostView({ slug, initialData, labels = {}, renderImage, rend
         })
         : "";
     const coverImageUrl = getMediaUrl(post.coverImage);
-    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-cover bg-center", style: { backgroundImage: `url(${coverImageUrl})` } })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-0" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto", paddingY: "y-3xl", paddingX: "x-md", children: [renderBlogPostHeader(post, date, labels), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-3 py-1 rounded-full bg-neutral-100 dark:bg-zinc-800 hover:bg-primary/10 text-zinc-600 dark:text-zinc-400 hover:text-primary text-xs font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { border: "default", className: "mt-10 border-t", padding: "t-xl", children: renderBackButton() })] })] }));
+    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx("img", { src: coverImageUrl, alt: post.title, className: "h-full w-full object-cover" })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-0" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto", paddingY: "y-3xl", paddingX: "x-md", children: [renderBlogPostHeader(post, date, labels), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-3 py-1 rounded-full bg-neutral-100 dark:bg-zinc-800 hover:bg-primary/10 text-zinc-600 dark:text-zinc-400 hover:text-primary text-xs font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { border: "default", className: "mt-10 border-t", padding: "t-xl", children: renderBackButton() })] })] }));
 }

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

@@ -3,14 +3,14 @@
  */
 import type { MediaFieldInput, MediaField } from "../../media/types";
 import type { BlogPostStatus, BlogPostCategory } from "../types";
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 /** Runtime-accessible blog post status values — use instead of bare string literals. */
 export declare const BlogPostStatusValues: {
     readonly DRAFT: BlogPostStatus;
     readonly PUBLISHED: BlogPostStatus;
     readonly ARCHIVED: BlogPostStatus;
 };
-export interface BlogPostDocument {
-    id: string;
+export interface BlogPostDocument extends BaseDocument {
     title: string;
     slug: string;
     excerpt: string;
@@ -30,8 +30,6 @@ export interface BlogPostDocument {
     views: number;
     metaTitle?: string;
     metaDescription?: string;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const BLOG_POSTS_COLLECTION: "blogPosts";
 export declare const BLOG_POSTS_INDEXED_FIELDS: readonly ["status", "publishedAt", "isFeatured", "category", "slug"];

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

@@ -111,10 +111,10 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
     createdAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    id: string;
     title: string;
     slug: string;
     tags: string[];
+    id: string;
     updatedAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
@@ -161,10 +161,10 @@ export declare const blogPostFirestoreSchema: z.ZodObject<{
     createdAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    id: string;
     title: string;
     slug: string;
     tags: string[];
+    id: string;
     updatedAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
@@ -331,9 +331,9 @@ export declare const blogPostSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     status: "draft" | "published" | "archived";
     category: "news" | "tips" | "guides" | "updates" | "community";
-    id: string;
     title: string;
     slug: string;
+    id: string;
     coverImage: {
         url: string;
         type: "image" | "video" | "file";
@@ -378,9 +378,9 @@ export declare const blogPostSchema: z.ZodObject<{
 }, {
     status: "draft" | "published" | "archived";
     category: "news" | "tips" | "guides" | "updates" | "community";
-    id: string;
     title: string;
     slug: string;
+    id: string;
     createdAt?: string | undefined;
     tags?: string[] | undefined;
     updatedAt?: string | undefined;
@@ -434,15 +434,15 @@ export declare const blogListParamsSchema: z.ZodObject<{
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
     featured?: boolean | undefined;
     tags?: string | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
 }, {
     sort?: string | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
     featured?: boolean | undefined;
     tags?: string | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
 }>;

package/dist/features/cart/components/CartDrawer.js

@@ -11,7 +11,7 @@ const __O = {
 };
 const CLS_REMOVE_BTN = "self-start text-zinc-400 dark:text-zinc-400 transition hover:text-error";
 export function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock = false }) {
-    return (_jsxs(Div, { layout: "flex", gap: "4", surface: "card", padding: "sm", className: `transition-opacity ${isOutOfStock ? "opacity-60" : ""}`, children: [_jsx(Div, { surface: "muted", className: `h-20 w-20 flex-shrink-0 ${__O.hidden}`, rounded: "lg", children: item.meta.image && (_jsx(Div, { role: "img", "aria-label": item.meta.title, className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${item.meta.image})` } })) }), _jsxs(Stack, { justify: "between", className: "flex-1", children: [_jsxs(Row, { gap: "xs", className: "", align: "start", children: [href ? (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "font-medium text-neutral-900 dark:text-zinc-100 hover:underline underline-offset-2 line-clamp-2", children: item.meta.title })) : (_jsx(Text, { truncate: 2, weight: "medium", color: "primary", children: item.meta.title })), isOutOfStock && (_jsx(Span, { padding: "pill-2xs", color: "error", surface: "danger-surface", weight: "semibold", className: "flex-shrink-0 text-[10px] tracking-wide", rounded: "default", transform: "uppercase", children: "Out of Stock" }))] }), item.meta.attributes &&
+    return (_jsxs(Div, { layout: "flex", gap: "4", surface: "card", padding: "sm", className: `transition-opacity ${isOutOfStock ? "opacity-60" : ""}`, children: [_jsx(Div, { surface: "muted", className: `h-20 w-20 flex-shrink-0 ${__O.hidden}`, rounded: "lg", children: item.meta.image && (_jsx("img", { src: item.meta.image, alt: item.meta.title, className: "h-full w-full object-cover" })) }), _jsxs(Stack, { justify: "between", className: "flex-1", children: [_jsxs(Row, { gap: "xs", className: "", align: "start", children: [href ? (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "font-medium text-neutral-900 dark:text-zinc-100 hover:underline underline-offset-2 line-clamp-2", children: item.meta.title })) : (_jsx(Text, { truncate: 2, weight: "medium", color: "primary", children: item.meta.title })), isOutOfStock && (_jsx(Span, { padding: "pill-2xs", color: "error", surface: "danger-surface", weight: "semibold", className: "flex-shrink-0 text-[10px] tracking-wide", rounded: "default", transform: "uppercase", children: "Out of Stock" }))] }), item.meta.attributes &&
                         Object.keys(item.meta.attributes).length > 0 && (_jsx(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "xs", children: Object.entries(item.meta.attributes)
                             .map(([k, v]) => `${k}: ${v}`)
                             .join(", ") })), _jsxs(Row, { justify: "between", children: [_jsx(Text, { className: "text-neutral-900 dark:text-neutral-100", weight: "semibold", children: formatCurrency(item.meta.price * item.quantity, item.meta.currency) }), onQtyChange && !isOutOfStock && (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity - 1), disabled: item.quantity <= 1, variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 dark:border-slate-600 text-sm disabled:opacity-40", children: "\u2212" }), _jsx(Span, { size: "sm", className: "min-w-[1.5rem]", align: "center", children: item.quantity }), _jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity + 1), variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 dark:border-slate-600 text-sm", children: "+" })] })), isOutOfStock && (_jsxs(Span, { size: "xs", color: "muted", children: ["Qty: ", item.quantity] }))] })] }), onRemove && (_jsx(Button, { onClick: () => onRemove(item.id), variant: "ghost", size: "sm", "aria-label": ACTIONS.CART["remove-item"].ariaLabel, className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
@@ -19,5 +19,5 @@ export function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock =
 export function CartDrawer({ isOpen, onClose, items, subtotal = 0, currency, isLoading, onQtyChange, onRemove, onCheckout, labels = {}, }) {
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", role: "presentation", className: "fixed inset-0 z-40", onClick: onClose }), _jsxs(Aside, { className: "fixed inset-y-0 right-0 z-50 flex w-full max-w-sm flex-col bg-white dark:bg-slate-900 shadow-xl", children: [_jsxs(Row, { justify: "between", border: "bottom", className: __P.p4, children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: labels.title ?? "Cart" }), _jsx(Button, { onClick: onClose, variant: "ghost", size: "sm", "aria-label": "Close cart", textColor: "faint", className: "hover:text-neutral-900 dark:hover:text-zinc-100", children: "\u2715" })] }), _jsx(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "3", children: isLoading ? (_jsx(Row, { justify: "center", padding: "y-3xl", children: _jsx(Div, { className: "h-8 w-8 animate-spin border-2 border-neutral-300 border-t-neutral-800 dark:border-t-zinc-200", rounded: "full" }) })) : items.length === 0 ? (_jsx(Text, { paddingY: "3xl", className: "text-neutral-500 dark:text-neutral-400", size: "sm", align: "center", children: labels.empty ?? "Your cart is empty" })) : (items.map((item) => (_jsx(CartItemRow, { item: item, onQtyChange: onQtyChange, onRemove: onRemove }, item.id)))) }), items.length > 0 && (_jsxs(Stack, { border: "top", className: __P.p4, gap: "md", children: [_jsxs(Row, { textSize: "sm", justify: "between", children: [_jsx(Span, { className: "text-neutral-600 dark:text-neutral-400", children: labels.subtotal ?? "Subtotal" }), _jsx(Span, { weight: "semibold", children: formatCurrency(subtotal, currency) })] }), onCheckout && (_jsx(Button, { rounded: "xl", onClick: onCheckout, variant: "primary", textSize: "sm", className: "w-full bg-neutral-900 py-3 font-semibold text-white transition hover:bg-neutral-800", children: labels.checkout ?? ACTIONS.CART["checkout"].label }))] }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", role: "presentation", className: "fixed inset-0 z-40", onClick: onClose }), _jsx(Aside, { surface: "sidePanel", shadow: "xl", className: "fixed inset-y-0 right-0 z-50 w-full max-w-sm", children: _jsxs(Stack, { className: "h-full", children: [_jsxs(Row, { justify: "between", border: "bottom", className: __P.p4, children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: labels.title ?? "Cart" }), _jsx(Button, { onClick: onClose, variant: "ghost", size: "sm", "aria-label": "Close cart", textColor: "faint", className: "hover:text-neutral-900 dark:hover:text-[var(--appkit-color-text)]", children: "\u2715" })] }), _jsx(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "3", children: isLoading ? (_jsx(Row, { justify: "center", padding: "y-3xl", children: _jsx(Div, { className: "h-8 w-8 animate-spin border-2 border-neutral-300 border-t-neutral-800 dark:border-t-zinc-200", rounded: "full" }) })) : items.length === 0 ? (_jsx(Text, { paddingY: "3xl", className: "text-neutral-500 dark:text-neutral-400", size: "sm", align: "center", children: labels.empty ?? "Your cart is empty" })) : (items.map((item) => (_jsx(CartItemRow, { item: item, onQtyChange: onQtyChange, onRemove: onRemove }, item.id)))) }), items.length > 0 && (_jsxs(Stack, { border: "top", className: __P.p4, gap: "md", children: [_jsxs(Row, { textSize: "sm", justify: "between", children: [_jsx(Span, { className: "text-neutral-600 dark:text-neutral-400", children: labels.subtotal ?? "Subtotal" }), _jsx(Span, { weight: "semibold", children: formatCurrency(subtotal, currency) })] }), onCheckout && (_jsx(Button, { rounded: "xl", onClick: onCheckout, variant: "primary", textSize: "sm", className: "w-full bg-neutral-900 py-[0.75rem] font-[600] text-white transition hover:bg-neutral-800", children: labels.checkout ?? ACTIONS.CART["checkout"].label }))] }))] }) })] }));
 }

package/dist/features/cart/components/CartView.js

@@ -4,5 +4,5 @@ import { AdSlot } from "../../homepage/components/AdSlot";
 export function CartView({ labels = {}, renderItems, renderGroups, groups = [], renderSummary, renderPromoCode, renderCheckoutButton, renderEmpty, isEmpty = false, isLoading = false, className = "", }) {
     if (isEmpty && renderEmpty)
         return _jsx(_Fragment, { children: renderEmpty() });
-    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })), _jsxs(Stack, { direction: "lg-row", className: "lg:gap-8", gap: "lg", children: [_jsxs(Div, { className: "flex-1", children: [renderGroups ? renderGroups(groups, isLoading) : renderItems(isLoading), !renderGroups && renderPromoCode?.(), renderGroups && renderPromoCode?.(), _jsx(AdSlot, { id: "cart-upsell", className: "mt-6" })] }), _jsxs(Div, { className: "w-full lg:w-80", children: [renderSummary?.(), renderCheckoutButton?.(() => { }, isLoading)] })] })] }));
+    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })), _jsxs(Stack, { direction: "lg-row", className: "lg:gap-[2rem]", gap: "lg", children: [_jsxs(Div, { className: "flex-1", children: [renderGroups ? renderGroups(groups, isLoading) : renderItems(isLoading), !renderGroups && renderPromoCode?.(), renderGroups && renderPromoCode?.(), _jsx(AdSlot, { id: "cart-upsell", className: "mt-6" })] }), _jsxs(Div, { className: "w-full lg:w-80", children: [renderSummary?.(), renderCheckoutButton?.(() => { }, isLoading)] })] })] }));
 }

package/dist/features/cart/components/CheckoutView.js

@@ -15,5 +15,5 @@ export function CheckoutView({ labels = {}, renderStep, renderStepIndicator, ren
         }
         onStepChange?.(nextStep);
     }, [activeStep, onStepChange, step]);
-    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })), renderStepIndicator?.(step, totalSteps, setStep), _jsxs(Stack, { direction: "lg-row", className: "lg:gap-8", gap: "lg", children: [_jsxs(Div, { className: "flex-1", children: [renderStep(step, setStep), _jsx(AdSlot, { id: "checkout-upsell", className: "mt-6" })] }), renderOrderSummary && (_jsx(Div, { className: "w-full lg:w-80", children: renderOrderSummary() }))] })] }));
+    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })), renderStepIndicator?.(step, totalSteps, setStep), _jsxs(Stack, { direction: "lg-row", className: "lg:gap-[2rem]", gap: "lg", children: [_jsxs(Div, { className: "flex-1", children: [renderStep(step, setStep), _jsx(AdSlot, { id: "checkout-upsell", className: "mt-6" })] }), renderOrderSummary && (_jsx(Div, { className: "w-full lg:w-80", children: renderOrderSummary() }))] })] }));
 }

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

@@ -4,6 +4,7 @@
  * Canonical Firestore document interfaces, collection names, field constants
  * for the cart feature.
  */
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 export interface CartItemDocument {
     itemId: string;
     productId: string;
@@ -66,16 +67,13 @@ export interface CartAppliedCoupon {
     /** Mirrors CouponDocument.restrictions.combineWithSellerCoupons — used for conflict detection when adding future coupons */
     combineWithSellerCoupons?: boolean;
 }
-export interface CartDocument {
-    id: string;
+export interface CartDocument extends BaseDocument {
     userId: string;
     items: CartItemDocument[];
     /** Multiple coupons/deals applied at cart level */
     appliedCoupons?: CartAppliedCoupon[];
     /** Item IDs the user has selected for the next checkout (undefined = all items) */
     selectedItemIds?: string[];
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const CART_COLLECTION: "carts";
 export declare const CART_INDEXED_FIELDS: string[];

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

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { categoriesRepository, productRepository, } from "../../../repositories";
 import { ROUTES } from "../../../next";
 import { Container, Div, Heading, Main, Nav, Section, Span, Text } from "../../../ui";
+import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv";
 import { BrandDetailTabs } from "./BrandDetailTabs";
 const __O = {
     hidden: "overflow-hidden",
@@ -89,5 +90,5 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         counts.preOrders +
         counts.prizeDraws +
         counts.bundles;
-    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-zinc-50 dark:bg-zinc-900"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-center bg-cover", style: { backgroundImage: `url(${coverImage})` } }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && (_jsx("div", { className: "absolute inset-0 opacity-10", style: { backgroundColor: brandColor } })), _jsxs(Div, { className: `relative z-10 max-w-7xl mx-auto ${hasCover ? "py-12" : "py-8"}`, padding: "x-md", children: [_jsxs(Nav, { className: "flex items-center gap-1.5 text-sm mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS ?? "/brands"), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-100", children: brand?.name ?? slug })] }), _jsxs(Row, { className: "mb-3", align: "center", gap: "md", children: [brand?.display?.icon && (_jsx(Span, { className: "leading-none", size: "5xl", children: brand.display.icon })), _jsxs(_Fragment, { children: [_jsx(Heading, { color: "inverse", level: 1, className: `${hasCover ? "" : "text-zinc-900 dark:text-zinc-50"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: "inverse", className: `max-w-2xl mt-1 ${hasCover ? "/80" : "text-zinc-600 dark:text-zinc-400"}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", className: "flex-wrap mt-3", children: [counts.products > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-white/20 backdrop-blur-sm" : "bg-info-surface text-info dark:bg-info-surface dark:text-info"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.preOrders.toLocaleString(), " ", counts.preOrders === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts })) : (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "Brand not found." })) }) })] }));
+    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx("img", { src: coverImage, alt: "", className: "absolute inset-0 w-full h-full object-cover" }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && (_jsx(DynamicBgDiv, { color: brandColor, className: "absolute inset-0 opacity-10" })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS ?? "/brands"), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-zinc-500 dark:text-zinc-400 hover:text-primary-600 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-zinc-900 dark:text-zinc-100", children: brand?.name ?? slug })] }), _jsxs(Row, { className: "mb-3", align: "center", gap: "md", children: [brand?.display?.icon && (_jsx(Span, { className: "leading-none", size: "5xl", children: brand.display.icon })), _jsxs(_Fragment, { children: [_jsx(Heading, { color: "inverse", level: 1, className: `${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mt-1 ${hasCover ? "/80" : ""}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", wrap: true, className: "mt-3", children: [counts.products > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts.preOrders.toLocaleString(), " ", counts.preOrders === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts })) : (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "Brand not found." })) }) })] }));
 }

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

@@ -22,5 +22,5 @@ export function BundleDetailView({ bundle, members = [], onBuyNow, }) {
     const priceLabel = bundle.bundlePriceInPaise
         ? formatCurrency(bundle.bundlePriceInPaise / 100, "INR")
         : BUNDLE_COPY.detail.priceFallback;
-    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { gap: "lg", align: "start", className: "flex-col md:flex-row", children: [_jsx(Div, { className: "w-full md:w-2/5", children: members.length > 0 ? (_jsx(BundleCollage, { members: members })) : (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, rounded: "2xl", surface: "subtle", children: _jsx(Div, { className: "h-full w-full", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "hero", fallback: PLACEHOLDER_EMOJI }) }) })) }), _jsxs(Stack, { gap: "md", className: "flex-1", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "semibold", color: "primary", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Text, { size: "lg", weight: "bold", children: priceLabel }), _jsxs(Text, { size: "sm", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.detail.itemCount(memberCount)] }), _jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: STOCK_BADGE_TEXT[stock] })] }), bundle.description && (_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text-muted)]", size: "sm", weight: "semibold", children: BUNDLE_COPY.detailDescriptionHeading }), _jsx(Text, { className: "whitespace-pre-line", children: bundle.description })] })), onBuyNow ? (_jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: stock === "out_of_stock", onBuyNow: onBuyNow })) : (_jsxs(Div, { textSize: "sm", className: "border-dashed", border: "strong", surface: "muted", rounded: "xl", padding: "md", "aria-live": "polite", children: [_jsx(Text, { weight: "semibold", className: "mb-1 block", children: BUNDLE_COPY.detail.ctaDisabled }), _jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.detail.ctaHint })] }))] })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, size: "xl", weight: "semibold", color: "primary", children: BUNDLE_COPY.detailItemsHeading }), members.length === 0 ? (_jsx(Text, { color: "muted", children: BUNDLE_COPY.detail.emptyMembers })) : (_jsx(Ul, { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: members.map((p, i) => (_jsxs(Li, { className: "flex items-center gap-2 rounded-lg border border-zinc-100 dark:border-zinc-800 px-3 py-2 text-sm", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "w-5", color: "faint", children: ["#", i + 1] }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? p.id) ?? "#"), className: "flex-1 truncate font-medium hover:underline hover:text-primary", children: p.title })] }, p.id))) }))] })] }) }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "lg", direction: "md-row", align: "start", children: [_jsx(Div, { className: "w-full md:w-2/5", children: members.length > 0 ? (_jsx(BundleCollage, { members: members })) : (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, rounded: "2xl", surface: "subtle", children: _jsx(Div, { className: "h-full w-full", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "hero", fallback: PLACEHOLDER_EMOJI }) }) })) }), _jsxs(Stack, { gap: "md", className: "flex-1", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "semibold", color: "primary", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Text, { size: "lg", weight: "bold", children: priceLabel }), _jsxs(Text, { size: "sm", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.detail.itemCount(memberCount)] }), _jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: STOCK_BADGE_TEXT[stock] })] }), bundle.description && (_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text-muted)]", size: "sm", weight: "semibold", children: BUNDLE_COPY.detailDescriptionHeading }), _jsx(Text, { className: "whitespace-pre-line", children: bundle.description })] })), onBuyNow ? (_jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: stock === "out_of_stock", onBuyNow: onBuyNow })) : (_jsxs(Div, { textSize: "sm", className: "border-dashed", border: "strong", surface: "muted", rounded: "xl", padding: "md", "aria-live": "polite", children: [_jsx(Text, { weight: "semibold", className: "mb-1 block", children: BUNDLE_COPY.detail.ctaDisabled }), _jsx(Text, { size: "sm", color: "muted", children: BUNDLE_COPY.detail.ctaHint })] }))] })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, size: "xl", weight: "semibold", color: "primary", children: BUNDLE_COPY.detailItemsHeading }), members.length === 0 ? (_jsx(Text, { color: "muted", children: BUNDLE_COPY.detail.emptyMembers })) : (_jsx(Ul, { gap: "2", className: "grid grid-cols-1 sm:grid-cols-2", children: members.map((p, i) => (_jsxs(Li, { layout: "flex-center", gap: "2", rounded: "lg", border: "subtle", padding: "inlineSm", textSize: "sm", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "w-5", color: "faint", children: ["#", i + 1] }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? p.id) ?? "#"), className: "flex-1 truncate font-medium hover:underline hover:text-primary", children: p.title })] }, p.id))) }))] })] }) }) }) }));
 }

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

@@ -29,7 +29,7 @@ function renderBundleSelectedChips(props) {
     const { value, metadata, remove } = props;
     if (value.length === 0)
         return null;
-    return (_jsx(Div, { layout: "flex", gap: "2", className: `flex-wrap ${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: value.map((id) => {
+    return (_jsx(Row, { gap: "sm", padding: "sm", rounded: "lg", surface: "muted", border: "default", wrap: true, children: value.map((id) => {
             const meta = metadata[id];
             const label = meta?.title ?? id;
             return (_jsxs(Row, { textSize: "xs", gap: "xs", align: "center", paddingY: "y-2xs", border: "strong", padding: "x-sm", surface: "default", rounded: "full", children: [_jsx(Text, { size: "xs", className: "max-w-[200px] truncate", children: label }), _jsx(Button, { variant: "ghost", size: "sm", "aria-label": BUNDLE_COPY.picker.removeAria(label), onClick: () => remove(id), children: "\u00D7" })] }, id));