@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -5,6 +5,7 @@
  * and query helpers for the auth feature (users, tokens, sessions).
  */
 import type { UserRole } from "../types";
+import type { BannedAction, EmployeeGroup, Permission } from "../permissions/constants";
 import { type GenerateUserIdInput } from "../../../utils/id-generators";
 /**
  * Generic schema defaults for user-related data.
@@ -87,6 +88,25 @@ export interface UserDocument {
     };
     shippingConfig?: SellerShippingConfig;
     payoutDetails?: SellerPayoutDetails;
+    /** Explicit permission set for this employee. admin role bypasses this field entirely. */
+    permissions?: Permission[];
+    /** Which preset group this employee was assigned at invite time (display only). */
+    permissionGroup?: EmployeeGroup;
+    softBans?: UserSoftBan[];
+    hardBanReason?: string;
+    hardBannedAt?: Date;
+    hardBannedBy?: string;
+    /** Timestamp when user confirmed they read the scam awareness guide. Required before full platform access. */
+    scamAwarenessAcknowledgedAt?: Date;
+}
+export interface UserSoftBan {
+    action: BannedAction;
+    reason: string;
+    /** UID of the employee/admin who applied the ban. */
+    bannedBy: string;
+    bannedAt: Date;
+    /** Null or absent = permanent. Past date = expired (treated as lifted without deletion). */
+    expiresAt?: Date | null;
 }
 export type SellerShippingMethod = "custom" | "shiprocket";
 export interface SellerPickupAddress {

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

@@ -47,24 +47,24 @@ export declare const resetPasswordSchema: z.ZodObject<{
     password: string;
     token: string;
 }>;
-export declare const userRoleSchema: z.ZodEnum<["customer", "seller", "admin", "superadmin"]>;
+export declare const userRoleSchema: z.ZodEnum<["user", "seller", "moderator", "employee", "admin"]>;
 export declare const authUserSchema: z.ZodObject<{
     id: z.ZodString;
     email: z.ZodOptional<z.ZodString>;
     displayName: z.ZodOptional<z.ZodString>;
     photoURL: z.ZodOptional<z.ZodString>;
-    role: z.ZodOptional<z.ZodEnum<["customer", "seller", "admin", "superadmin"]>>;
+    role: z.ZodOptional<z.ZodEnum<["user", "seller", "moderator", "employee", "admin"]>>;
     isEmailVerified: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
     id: string;
-    role?: "admin" | "seller" | "customer" | "superadmin" | undefined;
+    role?: "admin" | "seller" | "user" | "moderator" | "employee" | undefined;
     email?: string | undefined;
     displayName?: string | undefined;
     photoURL?: string | undefined;
     isEmailVerified?: boolean | undefined;
 }, {
     id: string;
-    role?: "admin" | "seller" | "customer" | "superadmin" | undefined;
+    role?: "admin" | "seller" | "user" | "moderator" | "employee" | undefined;
     email?: string | undefined;
     displayName?: string | undefined;
     photoURL?: string | undefined;

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

@@ -26,10 +26,11 @@ export const resetPasswordSchema = z.object({
 });
 // --- Auth user schema ---------------------------------------------------------
 export const userRoleSchema = z.enum([
-    "customer",
+    "user",
     "seller",
+    "moderator",
+    "employee",
     "admin",
-    "superadmin",
 ]);
 export const authUserSchema = z.object({
     id: z.string(),

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

@@ -1,4 +1,4 @@
-export type UserRole = "user" | "seller" | "moderator" | "admin";
+export type UserRole = "user" | "seller" | "moderator" | "employee" | "admin";
 export interface AuthUser {
     id: string;
     email?: string;

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

@@ -27,8 +27,8 @@ export declare const beforeAfterItemSchema: z.ZodObject<{
     isActive: boolean;
     sortOrder: number;
     createdAt?: string | undefined;
-    description?: string | undefined;
     productId?: string | undefined;
+    description?: 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;
     isActive?: boolean | undefined;
+    productId?: string | undefined;
     sortOrder?: number | undefined;
     description?: string | undefined;
-    productId?: string | undefined;
     concern?: string | undefined;
     beforeImageUrl?: string | undefined;
     afterImageUrl?: string | undefined;

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

@@ -99,12 +99,12 @@ export declare const createBlogPostSchema: z.ZodObject<{
         url: string;
         type: "image";
     } | null | undefined;
-    authorName?: string | undefined;
     publishedAt?: string | undefined;
-    authorId?: string | undefined;
-    authorAvatar?: string | undefined;
+    authorName?: string | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
+    authorId?: string | undefined;
+    authorAvatar?: string | undefined;
 }, {
     title: string;
     content: string;
@@ -125,9 +125,11 @@ export declare const createBlogPostSchema: z.ZodObject<{
         thumbnailUrl?: string | undefined;
     }[] | undefined;
     tags?: string[] | undefined;
-    authorName?: string | undefined;
-    isFeatured?: boolean | undefined;
     publishedAt?: string | undefined;
+    isFeatured?: boolean | undefined;
+    authorName?: string | undefined;
+    metaTitle?: string | undefined;
+    metaDescription?: string | undefined;
     contentImages?: {
         url: string;
         type: "video" | "image" | "file";
@@ -137,8 +139,6 @@ export declare const createBlogPostSchema: z.ZodObject<{
     authorId?: string | undefined;
     authorAvatar?: string | undefined;
     readTimeMinutes?: number | undefined;
-    metaTitle?: string | undefined;
-    metaDescription?: string | undefined;
 }>;
 export declare const updateBlogPostSchema: z.ZodObject<{
     title: z.ZodOptional<z.ZodString>;
@@ -229,10 +229,12 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     }[] | undefined;
     tags?: string[] | undefined;
     slug?: string | undefined;
-    authorName?: string | undefined;
-    isFeatured?: boolean | undefined;
     publishedAt?: string | undefined;
+    isFeatured?: boolean | undefined;
+    authorName?: string | undefined;
     excerpt?: string | undefined;
+    metaTitle?: string | undefined;
+    metaDescription?: string | undefined;
     contentImages?: {
         url: string;
         type: "video" | "image" | "file";
@@ -242,8 +244,6 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     authorId?: string | undefined;
     authorAvatar?: string | undefined;
     readTimeMinutes?: number | undefined;
-    metaTitle?: string | undefined;
-    metaDescription?: string | undefined;
 }, {
     title?: string | undefined;
     content?: string | undefined;
@@ -263,10 +263,12 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     }[] | undefined;
     tags?: string[] | undefined;
     slug?: string | undefined;
-    authorName?: string | undefined;
-    isFeatured?: boolean | undefined;
     publishedAt?: string | undefined;
+    isFeatured?: boolean | undefined;
+    authorName?: string | undefined;
     excerpt?: string | undefined;
+    metaTitle?: string | undefined;
+    metaDescription?: string | undefined;
     contentImages?: {
         url: string;
         type: "video" | "image" | "file";
@@ -276,8 +278,6 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     authorId?: string | undefined;
     authorAvatar?: string | undefined;
     readTimeMinutes?: number | undefined;
-    metaTitle?: string | undefined;
-    metaDescription?: string | undefined;
 }>;
 export type CreateBlogPostInput = z.infer<typeof createBlogPostSchema>;
 export type UpdateBlogPostInput = z.infer<typeof updateBlogPostSchema>;

package/dist/features/blog/components/BlogFeaturedCard.d.ts

@@ -1,17 +1,11 @@
-import React from "react";
 import type { BlogPost } from "../types";
 export interface BlogFeaturedCardProps {
     post: BlogPost;
-    /** Full URL/path to the post */
     href: string;
     labels?: {
         featuredBadge?: string;
         readTime?: string;
     };
-    /** Render-prop for wrapping in a link */
-    renderLink?: (href: string, children: React.ReactNode) => React.ReactNode;
-    /** Render-prop for the cover image slot */
-    renderImage?: (post: BlogPost) => React.ReactNode;
     className?: string;
 }
-export declare function BlogFeaturedCard({ post, href, labels, renderLink, renderImage, className, }: BlogFeaturedCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlogFeaturedCard({ post, href, labels, className, }: BlogFeaturedCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Article, Div, Heading, Row, Span, Text } from "../../../ui";
-import { THEME_CONSTANTS, LAYOUT } from "../../../tokens";
+import { Article, Div, Heading, Row, Span, Text, TextLink } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
 import { getMediaUrl } from "../../media/types/index";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 import { safeDisplayName } from "../../../security";
@@ -11,7 +11,7 @@ const CATEGORY_BADGE = {
     updates: "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300",
     community: "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
 };
-export function BlogFeaturedCard({ post, href, labels = {}, renderLink, renderImage, className = "", }) {
+export function BlogFeaturedCard({ post, href, labels = {}, className = "", }) {
     const safeTitle = post.title?.trim() || "Untitled post";
     const coverImageUrl = getMediaUrl(post.coverImage);
     const date = post.publishedAt
@@ -21,6 +21,5 @@ export function BlogFeaturedCard({ post, href, labels = {}, renderLink, renderIm
             day: "numeric",
         })
         : "";
-    const inner = (_jsxs(Article, { className: `overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-lg transition-shadow duration-200 md:flex ${className}`, children: [_jsx(Div, { className: `md:w-1/2 relative ${LAYOUT.cardHeight.blog} overflow-hidden`, children: renderImage ? (renderImage(post)) : (coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center", style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900" }))) }), _jsxs(Div, { className: "p-8 md:w-1/2 flex flex-col justify-center", children: [_jsxs(Row, { className: "gap-2 mb-3", 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 dark:bg-yellow-900/40 dark:text-yellow-300 px-2 py-0.5 rounded-full text-xs font-medium", children: labels.featuredBadge ?? "Featured" }))] }), _jsx(Heading, { level: 2, className: "text-xl font-semibold text-neutral-900 dark:text-zinc-100 mb-3 leading-snug", children: safeTitle }), post.excerpt && (_jsx(Text, { className: `text-neutral-500 dark:text-zinc-400 mb-4 ${THEME_CONSTANTS.utilities.textClamp3} text-sm`, children: post.excerpt })), _jsxs(Row, { className: "gap-4 text-xs text-neutral-400 dark:text-zinc-500", 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 (_jsx(Div, { className: "mb-10", children: renderLink ? renderLink(href, inner) : inner }));
+    return (_jsx(TextLink, { href: href, className: "block h-full", children: _jsxs(Article, { className: `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 ${className}`, children: [_jsx(Div, { className: "aspect-video overflow-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, className: "h-full w-full bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900" })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Row, { className: "gap-1.5 mb-2 flex-wrap", children: [_jsx(Span, { className: `inline-block px-2 py-0.5 rounded-full text-xs font-medium capitalize ${CATEGORY_BADGE[post.category] ?? "bg-zinc-100 text-zinc-700"}`, children: post.category }), post.isFeatured && (_jsx(Span, { className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 px-2 py-0.5 rounded-full text-xs font-medium", children: labels.featuredBadge ?? "Featured" }))] }), _jsx(Heading, { level: 3, className: `font-semibold text-neutral-900 dark:text-zinc-100 text-base leading-snug mb-1 ${THEME_CONSTANTS.utilities.textClamp2}`, children: safeTitle }), post.excerpt && (_jsx(Text, { className: `text-neutral-500 dark:text-zinc-400 text-sm ${THEME_CONSTANTS.utilities.textClamp2} mb-3`, children: post.excerpt })), _jsxs(Row, { className: "mt-auto gap-3 text-xs text-neutral-400 dark:text-zinc-500 flex-wrap", 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/BlogFilters.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
 import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
 export const BLOG_FILTER_KEYS = {
@@ -62,5 +63,5 @@ export function BlogFilters({ table, variant = "admin" }) {
     const selectedCategory = table.get("category")
         ? table.get("category").split("|").filter(Boolean)
         : [];
-    return (_jsxs(Div, { children: [variant !== "public" && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false })), _jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategory, onChange: (vals) => table.set("category", vals.join("|")), searchable: false, defaultCollapsed: variant !== "public" }), variant !== "public" && (_jsx(SwitchFilter, { title: t("isFeatured"), label: t("showFeaturedOnly"), checked: table.get("isFeatured") === "true", onChange: (v) => table.set("isFeatured", v ? "true" : ""), defaultCollapsed: true }))] }));
+    return (_jsxs(Div, { children: [variant !== "public" && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false })), _jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategory, onChange: (vals) => table.set("category", vals.join("|")), searchable: false, defaultCollapsed: variant !== "public" }), variant !== "public" && (_jsx(SwitchFilter, { title: t("isFeatured"), label: t("showFeaturedOnly"), checked: table.get("isFeatured") === "true", onChange: (v) => table.set("isFeatured", v ? "true" : "") })), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true }), _jsx(RangeFilter, { title: t("votesRange"), minValue: table.get("minVotes"), maxValue: table.get("maxVotes"), onMinChange: (v) => table.set("minVotes", v), onMaxChange: (v) => table.set("maxVotes", v), minBound: 0, maxBound: 100000, step: 10, minPlaceholder: t("minVotes"), maxPlaceholder: t("maxVotes"), defaultCollapsed: true })] }));
 }

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

@@ -1,14 +1,71 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBlogPosts } from "../hooks/useBlog";
-import { Div, Grid, Input, Pagination, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
+import { Pagination, ListingToolbar } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { BlogCard } from "./BlogListView";
-import { BlogFilters, BLOG_PUBLIC_SORT_OPTIONS, } from "./BlogFilters";
+import { BlogFilters, BLOG_PUBLIC_SORT_OPTIONS } from "./BlogFilters";
 const PAGE_SIZE = 24;
+const FILTER_KEYS = ["category", "dateFrom", "dateTo"];
 export function BlogIndexListing({ initialData }) {
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "-publishedAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    // Pending filter state — buffered until "Apply Filters" clicked
+    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+    const pendingTable = useMemo(() => ({
+        get: (key) => pendingFilters[key] ?? "",
+        getNumber: (key, fallback = 0) => {
+            const v = pendingFilters[key];
+            if (!v)
+                return fallback;
+            const n = Number(v);
+            return isNaN(n) ? fallback : n;
+        },
+        set: (key, value) => setPendingFilters((p) => ({ ...p, [key]: value })),
+        setMany: (updates) => setPendingFilters((p) => ({ ...p, ...updates })),
+        clear: (keys) => {
+            const ks = keys ?? FILTER_KEYS;
+            setPendingFilters((p) => ({
+                ...p,
+                ...Object.fromEntries(ks.map((k) => [k, ""])),
+            }));
+        },
+        setPage: (_) => { },
+        setPageSize: (_) => { },
+        setSort: (_) => { },
+        buildSieveParams: () => "",
+        buildSearchParams: () => "",
+        params: new URLSearchParams(),
+    }), [pendingFilters]);
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") ||
+        table.get("sort") !== "-publishedAt" ||
+        activeFilterCount > 0;
     const params = {
         q: table.get("q") || undefined,
         category: (table.get("category") || undefined),
@@ -16,11 +73,11 @@ export function BlogIndexListing({ initialData }) {
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", PAGE_SIZE),
     };
-    const { posts, total, totalPages, isLoading } = useBlogPosts(params, {
-        initialData,
-    });
+    const { posts, total, totalPages, isLoading } = useBlogPosts(params, { initialData });
     const currentPage = table.getNumber("page", 1);
-    return (_jsx(Div, { className: "min-h-screen", children: _jsx(SlottedListingView, { portal: "public", manageSearch: true, manageSort: true, inlineToolbar: true, renderSearch: (search, setSearch) => (_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search posts...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: BLOG_PUBLIC_SORT_OPTIONS })), renderFilters: () => (_jsx(BlogFilters, { table: table, variant: "public" })), renderTable: () => posts.length === 0 && !isLoading ? (_jsx(Stack, { align: "center", gap: "3", className: "justify-center py-24 text-center", children: _jsx(Text, { className: "text-xl font-medium text-zinc-900 dark:text-zinc-50", children: "No posts found" }) })) : (_jsx(Grid, { cols: 3, gap: "md", children: posts.map((post) => (_jsx(BlogCard, { post: post, onClick: () => {
-                        window.location.href = String(ROUTES.BLOG.ARTICLE(post.slug));
-                    } }, post.id))) })), renderPagination: () => totalPages > 1 ? (_jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })) : null, total: total, isLoading: isLoading }) }));
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [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("sort") || "-publishedAt", sortOptions: BLOG_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, 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." })) : (_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})` : ""] }) })] })] }))] }));
 }

package/dist/features/blog/components/BlogIndexPageView.d.ts

@@ -1 +1,6 @@
-export declare function BlogIndexPageView(): Promise<import("react/jsx-runtime").JSX.Element>;
+type SearchParams = Record<string, string | string[]>;
+export interface BlogIndexPageViewProps {
+    searchParams?: SearchParams;
+}
+export declare function BlogIndexPageView({ searchParams }: BlogIndexPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -3,9 +3,29 @@ import { blogRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { BlogIndexListing } from "./BlogIndexListing";
-export async function BlogIndexPageView() {
-    const result = await blogRepository
-        .listPublished({}, { sorts: "-publishedAt", page: 1, pageSize: 24 })
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+export async function BlogIndexPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "-publishedAt";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const pageSize = Number(sp(searchParams, "pageSize")) || 24;
+    const category = sp(searchParams, "category");
+    const sieveResult = await blogRepository
+        .listPublished({ ...(category ? { category } : {}) }, { sorts: sort, page, pageSize })
         .catch(() => null);
-    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Blog" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(BlogIndexListing, { initialData: result }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    const initialData = sieveResult
+        ? {
+            posts: sieveResult.items,
+            meta: {
+                total: sieveResult.total,
+                page: sieveResult.page,
+                pageSize: sieveResult.pageSize,
+                totalPages: sieveResult.totalPages,
+                hasMore: sieveResult.hasMore,
+            },
+        }
+        : undefined;
+    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Blog" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(BlogIndexListing, { initialData: initialData }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

package/dist/features/blog/components/BlogListView.d.ts

@@ -2,10 +2,11 @@ import type { LayoutSlots } from "../../../contracts";
 import type { BlogPost, BlogPostCategory } from "../types";
 interface BlogCardProps {
     post: BlogPost;
+    href?: string;
     onClick?: (post: BlogPost) => void;
     className?: string;
 }
-export declare function BlogCard({ post, onClick, className }: BlogCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlogCard({ post, href, onClick, className }: BlogCardProps): import("react/jsx-runtime").JSX.Element;
 interface BlogCategoryTabsProps {
     categories: BlogPostCategory[];
     active?: BlogPostCategory | null;

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
+import Link from "next/link";
 import { Article, Button, Div, Heading, Pagination, Row, Span, Text, } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 import { getMediaUrl } from "../../media/types/index";
-export function BlogCard({ post, onClick, className = "" }) {
+import { safeDisplayName } from "../../../security";
+export function BlogCard({ post, href, onClick, className = "" }) {
     const coverImageUrl = getMediaUrl(post.coverImage);
     const date = post.publishedAt
         ? new Date(post.publishedAt).toLocaleDateString(getDefaultLocale(), {
@@ -13,9 +15,14 @@ export function BlogCard({ post, onClick, className = "" }) {
             day: "numeric",
         })
         : "";
-    return (_jsxs(Article, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+    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 ? () => 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 ${onClick ? "cursor-pointer" : ""} ${className}`, children: [coverImageUrl && (_jsx(Div, { className: "aspect-video w-full overflow-hidden bg-neutral-100 dark:bg-slate-800", children: _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})` } }) })), _jsxs(Div, { className: "flex flex-1 flex-col p-5", children: [_jsxs(Row, { className: "mb-2 gap-2", children: [_jsx(Span, { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium capitalize text-primary", children: post.category }), post.readTimeMinutes && (_jsxs(Span, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp2} text-base font-semibold text-neutral-900 dark:text-zinc-100 group-hover:text-primary`, children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 ${THEME_CONSTANTS.utilities.textClamp3} flex-1 text-sm text-neutral-500 dark:text-zinc-400`, children: post.excerpt })), _jsxs(Row, { className: "mt-4 gap-3", children: [post.authorAvatar && (_jsx(Div, { role: "img", "aria-label": post.authorName ?? "author", className: "h-7 w-7 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${post.authorAvatar})` } })), _jsxs(Text, { className: "text-xs text-neutral-500 dark:text-zinc-400", children: [post.authorName && (_jsx(Span, { className: "font-medium text-neutral-700 dark:text-zinc-300", children: post.authorName })), date && _jsxs(Span, { className: "ml-1", 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 overflow-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(Div, { className: "h-full w-full bg-gradient-to-br from-zinc-200 via-zinc-100 to-zinc-300 dark:from-slate-800 dark:via-slate-700 dark:to-slate-900 flex items-center justify-center", children: _jsx("span", { className: "text-4xl opacity-30", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-5", children: [_jsxs(Row, { className: "mb-2 gap-2 flex-wrap", children: [_jsx(Span, { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium capitalize text-primary", children: post.category }), post.isFeatured && (_jsx(Span, { className: "rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300", children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { className: "text-xs text-neutral-400 dark:text-zinc-500", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `${THEME_CONSTANTS.utilities.textClamp2} text-base font-semibold text-neutral-900 dark:text-zinc-100 group-hover:text-primary`, children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 ${THEME_CONSTANTS.utilities.textClamp3} flex-1 text-sm text-neutral-500 dark:text-zinc-400`, children: post.excerpt })), _jsxs(Row, { className: "mt-auto pt-3 gap-3 items-center", children: [post.authorAvatar ? (_jsx(Div, { role: "img", "aria-label": post.authorName ?? "author", className: "h-7 w-7 flex-shrink-0 rounded-full bg-center bg-cover", style: { backgroundImage: `url(${post.authorAvatar})` } })) : post.authorName ? (_jsx(Div, { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-xs text-neutral-500 dark:text-zinc-400 min-w-0", children: [post.authorName && (_jsx(Span, { className: "font-medium text-neutral-700 dark:text-zinc-300", 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 }));
+    }
+    return card;
 }
 export function BlogCategoryTabs({ categories, active, onSelect, labels = {}, }) {
     return (_jsxs(Div, { className: "scrollbar-none flex gap-2 overflow-x-auto pb-1", children: [_jsx(Button, { onClick: () => onSelect(null), variant: !active ? "primary" : "ghost", size: "sm", className: `whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium transition ${!active ? "bg-neutral-900 text-white" : "bg-neutral-100 dark:bg-slate-800 text-neutral-600 dark:text-zinc-300 hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels.all ?? "All" }), categories.map((cat) => (_jsx(Button, { onClick: () => onSelect(cat), variant: active === cat ? "primary" : "ghost", size: "sm", className: `whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium capitalize transition ${active === cat ? "bg-neutral-900 text-white" : "bg-neutral-100 dark:bg-slate-800 text-neutral-600 dark:text-zinc-300 hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels[cat] ?? cat }, cat)))] }));

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

@@ -3,7 +3,7 @@ import { Div, Input, Label, RichTextEditor, Select, Stack, TagInput, Text, Texta
 import { Checkbox } from "../../forms/index";
 import { MediaUploadField, MediaUploadList } from "../../media/index";
 import { coerceMediaFieldArray, getMediaUrl, } from "../../media/types/index";
-import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { normalizeRichTextHtml, slugify } from "../../../utils/string.formatter";
 export function BlogPostForm({ value, onChange, categoryOptions, statusOptions, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, isReadonly = false, renderContentField, renderContentReadonly, }) {
     const coverImageUrl = getMediaUrl(value.coverImage);
     const contentImages = coerceMediaFieldArray(value.contentImages);
@@ -14,7 +14,11 @@ export function BlogPostForm({ value, onChange, categoryOptions, statusOptions,
             ...partial,
         });
     };
-    return (_jsxs(Stack, { gap: "5", children: [_jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-title", children: labels.title }), _jsx(Input, { id: "blog-post-title", value: value.title || "", onChange: (event) => update({ title: event.target.value }), disabled: isReadonly })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-slug", children: labels.slug }), _jsx(Input, { id: "blog-post-slug", value: value.slug || "", onChange: (event) => update({ slug: event.target.value }), disabled: isReadonly })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-excerpt", children: labels.excerpt }), _jsx(Textarea, { id: "blog-post-excerpt", value: value.excerpt || "", onChange: (event) => update({ excerpt: event.target.value }), rows: 3, disabled: isReadonly })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { children: labels.content }), renderContentField ? (renderContentField({
+    return (_jsxs(Stack, { gap: "5", children: [_jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-title", children: labels.title }), _jsx(Input, { id: "blog-post-title", value: value.title || "", onChange: (event) => {
+                                    const title = event.target.value;
+                                    const autoSlug = `blog-${slugify(title)}`;
+                                    update({ title, slug: autoSlug });
+                                }, disabled: isReadonly })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-slug", children: labels.slug }), _jsx(Input, { id: "blog-post-slug", value: value.slug || "", onChange: (event) => update({ slug: event.target.value }), disabled: isReadonly })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-excerpt", children: labels.excerpt }), _jsx(Textarea, { id: "blog-post-excerpt", value: value.excerpt || "", onChange: (event) => update({ excerpt: event.target.value }), rows: 3, disabled: isReadonly })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { children: labels.content }), renderContentField ? (renderContentField({
                         value: value.content || "",
                         onChange: (content) => update({ content }),
                         isReadonly,

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

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Div, Heading, RichText, Row, Span, Text } from "../../../ui";
@@ -35,5 +36,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))) })), _jsx(Div, { className: "bg-white rounded-xl border border-neutral-200 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 }, 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: [_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))) })), _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 }, rel.id))) })] })), renderBackButton && (_jsx(Div, { className: "mt-10 pt-8 border-t border-neutral-200", children: renderBackButton() }))] })] }));
 }

package/dist/features/blog/hooks/useBlog.d.ts

@@ -5,6 +5,7 @@ interface UseBlogPostsOptions {
     initialData?: BlogListResponse;
     enabled?: boolean;
     endpoint?: string;
+    staleTime?: number;
 }
 export declare function useBlogPosts(params?: BlogListParams, opts?: UseBlogPostsOptions): {
     posts: import("..").BlogPost[];
@@ -18,6 +19,7 @@ export declare function useBlogPosts(params?: BlogListParams, opts?: UseBlogPost
 interface UseBlogPostOptions {
     initialData?: BlogPostDetailResponse;
     enabled?: boolean;
+    staleTime?: number;
 }
 export declare function useBlogPost(slug: string, opts?: UseBlogPostOptions): {
     post: import("..").BlogPost | null;

package/dist/features/blog/hooks/useBlog.js

@@ -22,6 +22,7 @@ export function useBlogPosts(params = {}, opts) {
         queryKey: ["blog", qs],
         queryFn: () => apiClient.get(`${BLOG_ENDPOINTS.LIST}${qs ? `?${qs}` : ""}`),
         initialData: opts?.initialData,
+        staleTime: opts?.staleTime ?? (opts?.initialData !== undefined ? Infinity : 0),
         enabled: opts?.enabled,
     });
     return {
@@ -39,6 +40,7 @@ export function useBlogPost(slug, opts) {
         queryKey: ["blog", "post", slug],
         queryFn: () => apiClient.get(BLOG_ENDPOINTS.BY_SLUG(slug)),
         initialData: opts?.initialData,
+        staleTime: opts?.staleTime ?? (opts?.initialData !== undefined ? Infinity : 0),
         enabled: opts?.enabled !== false && !!slug,
     });
     return {