@mohasinac/appkit 2.7.26 → 2.7.30

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

@@ -1,4 +1,3 @@
-export { AuctionCard, AuctionCountdown } from "./AuctionCard";
 export { MarketplaceAuctionCard, type MarketplaceAuctionCardData, type MarketplaceAuctionCardLabels, type MarketplaceAuctionCardProps, } from "./MarketplaceAuctionCard";
 export { MarketplaceAuctionGrid, type MarketplaceAuctionGridLabels, type MarketplaceAuctionGridProps, } from "./MarketplaceAuctionGrid";
 export { AuctionsListView } from "./AuctionsListView";

package/dist/features/auctions/components/index.js

@@ -1,4 +1,3 @@
-export { AuctionCard, AuctionCountdown } from "./AuctionCard";
 export { MarketplaceAuctionCard, } from "./MarketplaceAuctionCard";
 export { MarketplaceAuctionGrid, } from "./MarketplaceAuctionGrid";
 export { AuctionsListView } from "./AuctionsListView";

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

@@ -31,14 +31,14 @@ export declare const auctionItemSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
@@ -64,27 +64,27 @@ export declare const auctionItemSchema: z.ZodObject<{
     updatedAt: string;
     status: "draft" | "published" | "archived" | "sold";
     title: string;
-    price: number;
     featured: boolean;
     listingType: "auction";
     slug: string;
+    price: number;
     auctionEndDate: string;
     startingBid: number;
     bidCount: number;
     sellerId: string;
     storeId?: string | undefined;
+    description?: string | undefined;
+    mainImage?: string | undefined;
+    images?: string[] | undefined;
+    currentBid?: number | undefined;
     media?: {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }[] | undefined;
-    images?: string[] | undefined;
-    description?: string | undefined;
-    mainImage?: string | undefined;
-    currentBid?: number | undefined;
     storeSlug?: string | undefined;
 }, {
     currency: string;
@@ -93,27 +93,27 @@ export declare const auctionItemSchema: z.ZodObject<{
     updatedAt: string;
     status: "draft" | "published" | "archived" | "sold";
     title: string;
-    price: number;
     featured: boolean;
     listingType: "auction";
     slug: string;
+    price: number;
     auctionEndDate: string;
     startingBid: number;
     bidCount: number;
     sellerId: string;
     storeId?: string | undefined;
+    description?: string | undefined;
+    mainImage?: string | undefined;
+    images?: string[] | undefined;
+    currentBid?: number | undefined;
     media?: {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }[] | undefined;
-    images?: string[] | undefined;
-    description?: string | undefined;
-    mainImage?: string | undefined;
-    currentBid?: number | undefined;
     storeSlug?: string | undefined;
 }>;
 export declare const bidRecordSchema: z.ZodObject<{

package/dist/features/auth/actions/realtime-token-actions.js

@@ -6,6 +6,8 @@
  */
 import { getAdminAuth } from "../../../providers/db-firebase/index";
 import { chatRepository } from "../../admin/repository/chat.repository";
+import { conversationsRepository } from "../../messages/repository/conversations.repository";
+import { storeRepository } from "../../stores/repository/store.repository";
 import { serverLogger } from "../../../monitoring/index";
 export async function issueRealtimeToken(userId, userRole) {
     let chatIds = {};
@@ -14,14 +16,27 @@ export async function issueRealtimeToken(userId, userRole) {
         chatIds = Object.fromEntries(userChatIds.map((id) => [id, true]));
     }
     catch (err) {
-        serverLogger.warn("Could not resolve chatIds for realtime token", {
-            userId,
-            err,
-        });
+        serverLogger.warn("Could not resolve chatIds for realtime token", { userId, err });
+    }
+    let conversationIds = {};
+    try {
+        const buyerConvs = await conversationsRepository.listByBuyer(userId);
+        buyerConvs.forEach((c) => { conversationIds[c.id] = true; });
+        if (userRole === "seller") {
+            const store = await storeRepository.findByOwnerId(userId);
+            if (store?.id) {
+                const sellerConvs = await conversationsRepository.listByStore(store.id);
+                sellerConvs.forEach((c) => { conversationIds[c.id] = true; });
+            }
+        }
+    }
+    catch (err) {
+        serverLogger.warn("Could not resolve conversationIds for realtime token", { userId, err });
     }
     const customToken = await getAdminAuth().createCustomToken(userId, {
         role: userRole,
         chatIds,
+        conversationIds,
     });
     serverLogger.info("issueRealtimeToken: token issued", {
         userId,

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

@@ -1,7 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { Alert, Div, Heading, Label, Text } from "../../../ui";
+function renderRegisterFormFields(props) {
+    const { values, setValues, labels, renderTermsLink, renderPasswordStrength } = props;
+    const CLS_INPUT = "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary";
+    const CLS_LABEL = "block text-sm font-medium mb-1";
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-name", className: CLS_LABEL, children: labels?.displayNameLabel ?? "Full name" }), _jsx("input", { id: "reg-name", name: "displayName", type: "text", autoComplete: "name", required: true, placeholder: labels?.displayNamePlaceholder ?? "Your name", value: values.displayName, onChange: (e) => setValues({ ...values, displayName: e.target.value }), className: "w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-email", className: CLS_LABEL, children: labels?.emailLabel ?? "Email address" }), _jsx("input", { id: "reg-email", name: "email", type: "email", autoComplete: "username", required: true, placeholder: labels?.emailPlaceholder ?? "you@example.com", value: values.email, onChange: (e) => setValues({ ...values, email: e.target.value }), className: CLS_INPUT })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-password", className: CLS_LABEL, children: labels?.passwordLabel ?? "Password" }), _jsx("input", { id: "reg-password", name: "password", type: "password", autoComplete: "new-password", required: true, placeholder: labels?.passwordPlaceholder ?? "••••••••", value: values.password, onChange: (e) => setValues({ ...values, password: e.target.value }), className: CLS_INPUT }), renderPasswordStrength?.(values.password)] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-confirm", className: CLS_LABEL, children: labels?.confirmPasswordLabel ?? "Confirm password" }), _jsx("input", { id: "reg-confirm", name: "confirmPassword", type: "password", autoComplete: "new-password", required: true, placeholder: labels?.confirmPasswordPlaceholder ?? "••••••••", value: values.confirmPassword, onChange: (e) => setValues({ ...values, confirmPassword: e.target.value }), className: CLS_INPUT })] }), _jsxs(Div, { className: "flex items-start gap-2", children: [_jsx("input", { id: "reg-terms", type: "checkbox", required: true, checked: values.acceptTerms, onChange: (e) => setValues({ ...values, acceptTerms: e.target.checked }), className: "mt-0.5 h-4 w-4 rounded border-neutral-300 dark:border-slate-600 accent-primary" }), _jsxs(Label, { htmlFor: "reg-terms", className: "text-sm leading-snug", children: [labels?.acceptTermsLabel ?? "I accept the", " ", renderTermsLink?.()] })] })] }));
+}
 export function RegisterForm({ onSubmit, isLoading = false, error, success, labels = {}, renderSocialButtons, renderLoginLink, renderTermsLink, renderPasswordStrength, className = "", }) {
     const [values, setValues] = useState({
         email: "",
@@ -21,7 +27,5 @@ export function RegisterForm({ onSubmit, isLoading = false, error, success, labe
         await onSubmit(values);
     }, [onSubmit, values, labels.passwordMismatch]);
     const displayError = error ?? validationError;
-    return (_jsx(Div, { className: `flex items-center justify-center min-h-[60vh] px-4 ${className}`, children: _jsxs(Div, { className: "max-w-md w-full space-y-6", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-3xl font-extrabold", children: labels.title ?? "Create Account" }), (labels.subtitle || renderLoginLink) && (_jsxs(Text, { className: "mt-2 text-sm text-neutral-600 dark:text-zinc-400", children: [labels.subtitle ?? "Already have an account?", " ", renderLoginLink?.()] }))] }), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), displayError && (_jsx(Alert, { variant: "error", compact: true, children: displayError })), _jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, noValidate: true, children: [_jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-name", className: "block text-sm font-medium mb-1", children: labels.displayNameLabel ?? "Full name" }), _jsx("input", { id: "reg-name", name: "displayName", type: "text", autoComplete: "name", required: true, placeholder: labels.displayNamePlaceholder ?? "Your name", value: values.displayName, onChange: (e) => setValues({ ...values, displayName: e.target.value }), className: "w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-email", className: "block text-sm font-medium mb-1", children: labels.emailLabel ?? "Email address" }), _jsx("input", { id: "reg-email", name: "email", type: "email", autoComplete: "username", required: true, placeholder: labels.emailPlaceholder ?? "you@example.com", value: values.email, onChange: (e) => setValues({ ...values, email: e.target.value }), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-password", className: "block text-sm font-medium mb-1", children: labels.passwordLabel ?? "Password" }), _jsx("input", { id: "reg-password", name: "password", type: "password", autoComplete: "new-password", required: true, placeholder: labels.passwordPlaceholder ?? "••••••••", value: values.password, onChange: (e) => setValues({ ...values, password: e.target.value }), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" }), renderPasswordStrength?.(values.password)] }), _jsxs(Div, { children: [_jsx(Label, { htmlFor: "reg-confirm", className: "block text-sm font-medium mb-1", children: labels.confirmPasswordLabel ?? "Confirm password" }), _jsx("input", { id: "reg-confirm", name: "confirmPassword", type: "password", autoComplete: "new-password", required: true, placeholder: labels.confirmPasswordPlaceholder ?? "••••••••", value: values.confirmPassword, onChange: (e) => setValues({ ...values, confirmPassword: e.target.value }), className: "w-full rounded-lg border border-neutral-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-zinc-900 dark:text-zinc-100 placeholder:text-neutral-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" })] }), _jsxs(Div, { className: "flex items-start gap-2", children: [_jsx("input", { id: "reg-terms", type: "checkbox", required: true, checked: values.acceptTerms, onChange: (e) => setValues({ ...values, acceptTerms: e.target.checked }), className: "mt-0.5 h-4 w-4 rounded border-neutral-300 dark:border-slate-600 accent-primary" }), _jsxs(Label, { htmlFor: "reg-terms", className: "text-sm leading-snug", children: [labels.acceptTermsLabel ?? "I accept the", " ", renderTermsLink?.()] })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 transition-colors", children: isLoading
-                                ? (labels.submittingLabel ?? "Creating account…")
-                                : (labels.submitLabel ?? "Create account") })] }), renderSocialButtons?.()] }) }));
+    return (_jsx(Div, { className: `flex items-center justify-center min-h-[60vh] px-4 ${className}`, children: _jsxs(Div, { className: "max-w-md w-full space-y-6", children: [_jsxs(Div, { className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-3xl font-extrabold", children: labels.title ?? "Create Account" }), (labels.subtitle || renderLoginLink) && (_jsxs(Text, { className: "mt-2 text-sm text-neutral-600 dark:text-zinc-400", children: [labels.subtitle ?? "Already have an account?", " ", renderLoginLink?.()] }))] }), success && (_jsx(Alert, { variant: "success", compact: true, children: success })), displayError && (_jsx(Alert, { variant: "error", compact: true, children: displayError })), _jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, noValidate: true, children: [renderRegisterFormFields({ values, setValues, labels, renderTermsLink, renderPasswordStrength }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-white disabled:opacity-60 hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 transition-colors", children: isLoading ? (labels.submittingLabel ?? "Creating account…") : (labels.submitLabel ?? "Create account") })] }), renderSocialButtons?.()] }) }));
 }

package/dist/features/auth/consent-otp.d.ts

@@ -46,6 +46,8 @@ export declare function saveConsentOtp(uid: string, addressId: string, data: Rec
 export declare function readConsentOtp(uid: string, addressId: string): Promise<ConsentOtpDoc | null>;
 /** Partially update a consent OTP document. */
 export declare function patchConsentOtp(uid: string, addressId: string, data: Record<string, unknown>): Promise<void>;
+/** Build the consent OTP WhatsApp message body. */
+export declare function buildConsentOtpWhatsApp(recipientName: string, code: string, siteName: string): string;
 /** Build the consent OTP email subject and HTML body. */
 export declare function buildConsentOtpEmail(recipientName: string, code: string, siteName: string): {
     subject: string;

package/dist/features/auth/consent-otp.js

@@ -102,6 +102,14 @@ export async function patchConsentOtp(uid, addressId, data) {
     const db = getAdminDb();
     await consentOtpRef(db, uid, addressId).update(data);
 }
+/** Build the consent OTP WhatsApp message body. */
+export function buildConsentOtpWhatsApp(recipientName, code, siteName) {
+    return (`*${siteName} — Consent OTP*\n\n` +
+        `You are shipping to *${recipientName}*.\n\n` +
+        `Your verification code is: *${code}*\n\n` +
+        `This code expires in ${CONSENT_OTP_EXPIRY_MINUTES} minutes. ` +
+        `If you did not request this, please ignore this message.`);
+}
 /** Build the consent OTP email subject and HTML body. */
 export function buildConsentOtpEmail(recipientName, code, siteName) {
     return {

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

@@ -98,6 +98,8 @@ export interface UserDocument {
     hardBannedBy?: string;
     /** Timestamp when user confirmed they read the scam awareness guide. Required before full platform access. */
     scamAwarenessAcknowledgedAt?: Date;
+    /** User-controlled notification channel and type preferences. */
+    notificationPreferences?: import("../../account/types").NotificationPreferences;
 }
 export interface UserSoftBan {
     action: BannedAction;

package/dist/features/auth/schemas/firestore.js

@@ -212,31 +212,24 @@ export const sessionQueryHelpers = {
 };
 export function parseUserAgent(userAgent) {
     const ua = userAgent.toLowerCase();
-    let browser = "Unknown";
-    if (ua.includes("chrome"))
-        browser = "Chrome";
-    else if (ua.includes("firefox"))
-        browser = "Firefox";
-    else if (ua.includes("safari"))
-        browser = "Safari";
-    else if (ua.includes("edge"))
-        browser = "Edge";
-    let os = "Unknown";
-    if (ua.includes("windows"))
-        os = "Windows";
-    else if (ua.includes("mac"))
-        os = "macOS";
-    else if (ua.includes("linux"))
-        os = "Linux";
-    else if (ua.includes("android"))
-        os = "Android";
-    else if (ua.includes("ios") || ua.includes("iphone") || ua.includes("ipad"))
-        os = "iOS";
-    let device = "Desktop";
-    if (ua.includes("mobile"))
-        device = "Mobile";
-    else if (ua.includes("tablet") || ua.includes("ipad"))
-        device = "Tablet";
+    const BROWSER_TOKENS = [
+        ["chrome", "Chrome"],
+        ["firefox", "Firefox"],
+        ["safari", "Safari"],
+        ["edge", "Edge"],
+    ];
+    const browser = BROWSER_TOKENS.find(([tok]) => ua.includes(tok))?.[1] ?? "Unknown";
+    const OS_TOKENS = [
+        ["windows", "Windows"],
+        ["mac", "macOS"],
+        ["linux", "Linux"],
+        ["android", "Android"],
+        [["ios", "iphone", "ipad"], "iOS"],
+    ];
+    const os = OS_TOKENS.find(([tok]) => Array.isArray(tok) ? tok.some((t) => ua.includes(t)) : ua.includes(tok))?.[1] ?? "Unknown";
+    const device = ua.includes("mobile") ? "Mobile"
+        : ua.includes("tablet") || ua.includes("ipad") ? "Tablet"
+            : "Desktop";
     return { userAgent, browser, os, device };
 }
 export const SESSION_FIELDS = {

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

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

package/dist/features/before-after/api/[id]/route.js

@@ -10,6 +10,8 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../contracts";
+const ERR_DB_NOT_CONFIGURED = "DB not configured";
+const ERR_INTERNAL_SERVER_ERROR = "Internal server error";
 export async function GET(request, { params }) {
     try {
         const { id } = await params;
@@ -18,7 +20,7 @@ export async function GET(request, { params }) {
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("before_after");
         const item = await repo.findById(id);
         if (!item) {
@@ -32,7 +34,7 @@ export async function GET(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -45,7 +47,7 @@ export async function PATCH(request, { params }) {
         const body = await request.json();
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("before_after");
         const updated = await repo.update(id, body);
         if (!updated) {
@@ -59,7 +61,7 @@ export async function PATCH(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -71,7 +73,7 @@ export async function DELETE(request, { params }) {
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("before_after");
         await repo.delete(id);
         return NextResponse.json({
@@ -82,7 +84,7 @@ export async function DELETE(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }

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

@@ -27,8 +27,8 @@ export declare const beforeAfterItemSchema: z.ZodObject<{
     title: string;
     isActive: boolean;
     createdAt?: string | undefined;
-    productId?: string | undefined;
     description?: string | undefined;
+    productId?: string | undefined;
     concern?: string | undefined;
     beforeImageUrl?: string | undefined;
     afterImageUrl?: string | undefined;
@@ -38,9 +38,9 @@ export declare const beforeAfterItemSchema: z.ZodObject<{
     title: string;
     createdAt?: string | undefined;
     sortOrder?: number | undefined;
+    description?: string | undefined;
     isActive?: boolean | undefined;
     productId?: string | undefined;
-    description?: string | undefined;
     concern?: string | undefined;
     beforeImageUrl?: string | undefined;
     afterImageUrl?: string | undefined;

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

@@ -73,9 +73,9 @@ export declare const createBlogPostSchema: z.ZodObject<{
     title: string;
     content: string;
     category: "news" | "tips" | "guides" | "updates" | "community";
+    slug: string;
     tags: string[];
     isFeatured: boolean;
-    slug: string;
     excerpt: string;
     readTimeMinutes: number;
     contentImages: {
@@ -212,9 +212,9 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     title?: string | undefined;
     content?: string | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
+    slug?: string | undefined;
     tags?: string[] | undefined;
     isFeatured?: boolean | undefined;
-    slug?: string | undefined;
     publishedAt?: string | undefined;
     coverImage?: {
         type: "video" | "image" | "file";
@@ -249,9 +249,9 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     title?: string | undefined;
     content?: string | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
+    slug?: string | undefined;
     tags?: string[] | undefined;
     isFeatured?: boolean | undefined;
-    slug?: string | undefined;
     publishedAt?: string | undefined;
     coverImage?: string | {
         type: "video" | "image" | "file";

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

@@ -4,13 +4,32 @@ import { useState, useCallback, useMemo } from "react";
 import { X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBlogPosts } from "../hooks/useBlog";
-import { Pagination, ListingToolbar } from "../../../ui";
+import { ListingToolbar, Pagination, Text } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { BlogCard } from "./BlogListView";
 import { BlogFilters, BLOG_PUBLIC_SORT_OPTIONS } from "./BlogFilters";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
 import { sortBy } from "../../../constants/sort";
 import { BLOG_FIELDS } from "../../../constants/field-names";
+function renderBlogGrid(props) {
+    const { isLoading, posts, view } = props;
+    if (isLoading) {
+        return (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-5 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" })] })] }, i))) }));
+    }
+    if (posts.length === 0) {
+        return _jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No posts found." });
+    }
+    if (view === "list") {
+        return (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
+    }
+    return (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
+}
+function renderBlogFilterDrawer(props) {
+    const { filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable } = props;
+    if (!filterOpen)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(BlogFilters, { table: pendingTable, variant: "public" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }));
+}
 const PAGE_SIZE = 24;
 const DEFAULT_SORT = sortBy(BLOG_FIELDS.PUBLISHED_AT);
 const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO];
@@ -89,5 +108,5 @@ export function BlogIndexListing({ initialData }) {
     const commitSearch = useCallback(() => {
         table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search posts...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: BLOG_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-5 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" })] })] }, i))) })) : posts.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No posts found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: posts.map((post) => (_jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id))) })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: posts.map((post) => (_jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id))) })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(BlogFilters, { table: pendingTable, variant: "public" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search posts...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: BLOG_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: renderBlogGrid({ isLoading, posts, view }) }), renderBlogFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
 }

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

@@ -1,11 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Div, Input, Label, RichTextEditor, Select, Stack, TagInput, Text, Textarea, } from "../../../ui";
 import { Checkbox } from "../../forms/index";
 import { MediaUploadField, MediaUploadList } from "../../media/index";
 import { coerceMediaFieldArray, getMediaUrl, } from "../../media/types/index";
 import { normalizeRichTextHtml, slugify } from "../../../utils/string.formatter";
+function renderBlogPostMetaFields(props) {
+    const { value, update, isReadonly, categoryOptions, statusOptions, labels } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Select, { label: labels.category, value: value.category, onValueChange: (category) => update({ category }), options: categoryOptions, disabled: isReadonly }), _jsx(Select, { label: labels.status, value: value.status, onValueChange: (status) => update({ status }), options: statusOptions, disabled: isReadonly })] }), _jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsx(TagInput, { label: labels.tags, value: value.tags ?? [], onChange: (tags) => update({ tags }), disabled: isReadonly }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-read-time", children: labels.readTime }), _jsx(Input, { id: "blog-post-read-time", type: "number", value: String(value.readTimeMinutes ?? 5), onChange: (event) => update({ readTimeMinutes: parseInt(event.target.value, 10) || 5 }), disabled: isReadonly })] })] }), _jsx(Checkbox, { label: labels.featured, checked: value.isFeatured || false, onChange: (event) => update({ isFeatured: event.target.checked }), disabled: isReadonly })] }));
+}
+function renderBlogPostMediaFields(props) {
+    const { value, update, isReadonly, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, coverImageUrl, contentImages, additionalImages } = props;
+    return (_jsxs(_Fragment, { children: [_jsx(MediaUploadField, { label: labels.coverImage, value: coverImageUrl || "", onChange: (url) => update({ coverImage: url ? { url, type: "image" } : null }), onChangeField: (media) => update({ coverImage: media }), onUpload: onUploadCover, onAbort: onAbort, accept: "image/*", maxSizeMB: 10, disabled: isReadonly, helperText: labels.coverImageHelper }), _jsx(MediaUploadList, { label: labels.contentImages, value: contentImages, onChange: (media) => update({ contentImages: media }), onUpload: onUploadContentImage, onAbort: onAbort, accept: "image/*", maxItems: 10, maxSizeMB: 10, disabled: isReadonly, helperText: labels.contentImagesHelper }), _jsx(MediaUploadList, { label: labels.additionalImages, value: additionalImages, onChange: (media) => update({ additionalImages: media }), onUpload: onUploadAdditionalImage, onAbort: onAbort, accept: "image/*", maxItems: 5, maxSizeMB: 10, disabled: isReadonly, helperText: labels.additionalImagesHelper }), isReadonly && coverImageUrl && _jsx(Text, { size: "xs", variant: "secondary", children: coverImageUrl })] }));
+}
 export function BlogPostForm({ value, onChange, categoryOptions, statusOptions, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, isReadonly = false, renderContentField, renderContentReadonly, }) {
-    const coverImageUrl = getMediaUrl(value.coverImage);
+    const coverImageUrl = getMediaUrl(value.coverImage) ?? null;
     const contentImages = coerceMediaFieldArray(value.contentImages);
     const additionalImages = coerceMediaFieldArray(value.additionalImages);
     const update = (partial) => {
@@ -22,7 +30,5 @@ export function BlogPostForm({ value, onChange, categoryOptions, statusOptions,
                         value: value.content || "",
                         onChange: (content) => update({ content }),
                         isReadonly,
-                    })) : isReadonly && renderContentReadonly ? (renderContentReadonly(value.content || "")) : (_jsxs(Stack, { gap: "xs", children: [_jsx(RichTextEditor, { value: normalizeRichTextHtml(value.content || ""), onChange: (content) => update({ content }), disabled: isReadonly, minHeightClassName: "min-h-[240px]", placeholder: "Write blog content" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rich text is supported for blog content." })] }))] }), _jsx(MediaUploadField, { label: labels.coverImage, value: coverImageUrl || "", onChange: (url) => update({ coverImage: url ? { url, type: "image" } : null }), onChangeField: (media) => update({ coverImage: media }), onUpload: onUploadCover, onAbort: onAbort, accept: "image/*", maxSizeMB: 10, disabled: isReadonly, helperText: labels.coverImageHelper }), _jsx(MediaUploadList, { label: labels.contentImages, value: contentImages, onChange: (media) => update({ contentImages: media }), onUpload: onUploadContentImage, onAbort: onAbort, accept: "image/*", maxItems: 10, maxSizeMB: 10, disabled: isReadonly, helperText: labels.contentImagesHelper }), _jsx(MediaUploadList, { label: labels.additionalImages, value: additionalImages, onChange: (media) => update({ additionalImages: media }), onUpload: onUploadAdditionalImage, onAbort: onAbort, accept: "image/*", maxItems: 5, maxSizeMB: 10, disabled: isReadonly, helperText: labels.additionalImagesHelper }), _jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Select, { label: labels.category, value: value.category, onValueChange: (category) => update({ category }), options: categoryOptions, disabled: isReadonly }), _jsx(Select, { label: labels.status, value: value.status, onValueChange: (status) => update({ status }), options: statusOptions, disabled: isReadonly })] }), _jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsx(TagInput, { label: labels.tags, value: value.tags ?? [], onChange: (tags) => update({ tags }), disabled: isReadonly }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-read-time", children: labels.readTime }), _jsx(Input, { id: "blog-post-read-time", type: "number", value: String(value.readTimeMinutes ?? 5), onChange: (event) => update({
-                                    readTimeMinutes: parseInt(event.target.value, 10) || 5,
-                                }), disabled: isReadonly })] })] }), _jsx(Checkbox, { label: labels.featured, checked: value.isFeatured || false, onChange: (event) => update({ isFeatured: event.target.checked }), disabled: isReadonly }), isReadonly && coverImageUrl && (_jsx(Text, { size: "xs", variant: "secondary", children: coverImageUrl }))] }));
+                    })) : isReadonly && renderContentReadonly ? (renderContentReadonly(value.content || "")) : (_jsxs(Stack, { gap: "xs", children: [_jsx(RichTextEditor, { value: normalizeRichTextHtml(value.content || ""), onChange: (content) => update({ content }), disabled: isReadonly, minHeightClassName: "min-h-[240px]", placeholder: "Write blog content" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rich text is supported for blog content." })] }))] }), renderBlogPostMediaFields({ value, update, isReadonly, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, coverImageUrl, contentImages, additionalImages }), renderBlogPostMetaFields({ value, update, isReadonly, categoryOptions, statusOptions, labels })] }));
 }

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

@@ -1,5 +1,5 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Div, Heading, RichText, Row, Span, Text } from "../../../ui";
 import { useBlogPost } from "../hooks/useBlog";
@@ -15,6 +15,14 @@ const CATEGORY_BADGE = {
     updates: "bg-purple-100 text-purple-800",
     community: "bg-orange-100 text-orange-800",
 };
+function renderBlogPostHeader(post, date, labels) {
+    return (_jsxs(Div, { className: "mb-8", children: [_jsxs(Row, { className: "gap-2 mb-4", children: [_jsx(Span, { className: `inline-block px-2 py-0.5 rounded-full text-xs font-medium capitalize ${CATEGORY_BADGE[post.category] ?? ""}`, children: post.category }), post.isFeatured && _jsx(Span, { className: "bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs font-medium", children: labels?.featured ?? "Featured" })] }), _jsx(Heading, { level: 1, className: "text-3xl font-bold mb-4", children: post.title }), post.excerpt && _jsx(Text, { className: "text-lg text-neutral-500 mb-6", children: post.excerpt }), _jsxs(Row, { wrap: true, gap: "md", className: "text-sm text-neutral-400", children: [post.authorName && _jsxs(Span, { children: [labels?.author ?? "By", " ", _jsx(Span, { className: "font-medium text-neutral-700", children: post.authorName })] }), post.readTimeMinutes != null && _jsxs(Span, { children: [post.readTimeMinutes, " ", labels?.readTime ?? "min read"] }), date && _jsxs(Span, { children: [labels?.publishedOn ?? "Published", " ", date] }), post.views != null && _jsxs(Span, { children: [post.views, " ", labels?.viewsLabel ?? "views"] })] })] }));
+}
+function renderBlogPostRelated(related, labels, renderRelatedCard) {
+    if (related.length === 0)
+        return null;
+    return (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "text-xl font-semibold mb-6", children: labels?.relatedTitle ?? "Related Posts" }), _jsx(Div, { className: "grid sm:grid-cols-3 gap-6", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] }));
+}
 export function BlogPostView({ slug, initialData, labels = {}, renderImage, renderContent, renderBackButton, renderLoading, renderError, renderRelatedCard, renderAuthorBio, className = "", }) {
     const { post, related, isLoading, error } = useBlogPost(slug, {
         initialData,
@@ -37,5 +45,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 overflow-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(Div, { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto px-4 py-12", children: [_jsxs(Div, { className: "mb-8", children: [_jsxs(Row, { className: "gap-2 mb-4", children: [_jsx(Span, { className: `inline-block px-2 py-0.5 rounded-full text-xs font-medium capitalize ${CATEGORY_BADGE[post.category] ?? ""}`, children: post.category }), post.isFeatured && (_jsx(Span, { className: "bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs font-medium", children: labels.featured ?? "Featured" }))] }), _jsx(Heading, { level: 1, className: "text-3xl font-bold mb-4", children: post.title }), post.excerpt && (_jsx(Text, { className: "text-lg text-neutral-500 mb-6", children: post.excerpt })), _jsxs(Row, { wrap: true, gap: "md", className: "text-sm text-neutral-400", children: [post.authorName && (_jsxs(Span, { children: [labels.author ?? "By", " ", _jsx(Span, { className: "font-medium text-neutral-700", children: post.authorName })] })), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels.readTime ?? "min read"] })), date && (_jsxs(Span, { children: [labels.publishedOn ?? "Published", " ", date] })), post.views != null && (_jsxs(Span, { children: [post.views, " ", labels.viewsLabel ?? "views"] }))] })] }), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Span, { className: "inline-block px-3 py-1 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium", children: ["#", tag] }, tag))) })), renderAuthorBio && (_jsx(Div, { className: "mb-6", children: renderAuthorBio(post) })), _jsx(Div, { className: "bg-white dark:bg-slate-900 rounded-xl border border-neutral-200 dark:border-slate-700 p-8 mb-12", children: renderContent ? (renderContent(post)) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert", className: "text-neutral-800 dark:text-neutral-100" })) }), related.length > 0 && (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "text-xl font-semibold mb-6", children: labels.relatedTitle ?? "Related Posts" }), _jsx(Div, { className: "grid sm:grid-cols-3 gap-6", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] })), renderBackButton && (_jsx(Div, { className: "mt-10 pt-8 border-t border-neutral-200", children: renderBackButton() }))] })] }));
+    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: "relative h-72 md:h-96 overflow-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(Div, { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto px-4 py-12", 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(Span, { className: "inline-block px-3 py-1 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { className: "bg-white dark:bg-slate-900 rounded-xl border border-neutral-200 dark:border-slate-700 p-8 mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert", className: "text-neutral-800 dark:text-neutral-100" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { className: "mt-10 pt-8 border-t border-neutral-200", children: renderBackButton() })] })] }));
 }