@mohasinac/appkit 2.2.0 → 2.3.1

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

@@ -16,13 +16,13 @@ export declare const createBlogPostSchema: z.ZodObject<{
         alt: z.ZodOptional<z.ZodString>;
         thumbnailUrl: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }>, z.ZodEffects<z.ZodString, {
@@ -35,13 +35,13 @@ export declare const createBlogPostSchema: z.ZodObject<{
         alt: z.ZodOptional<z.ZodString>;
         thumbnailUrl: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }>, "many">>>;
@@ -51,13 +51,13 @@ export declare const createBlogPostSchema: z.ZodObject<{
         alt: z.ZodOptional<z.ZodString>;
         thumbnailUrl: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }>, "many">>>;
@@ -69,39 +69,39 @@ export declare const createBlogPostSchema: z.ZodObject<{
     metaTitle: z.ZodOptional<z.ZodString>;
     metaDescription: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    status: "draft" | "published" | "archived";
     title: string;
     content: string;
+    status: "draft" | "published" | "archived";
     category: "news" | "tips" | "guides" | "updates" | "community";
+    additionalImages: {
+        url: string;
+        type: "video" | "image" | "file";
+        alt?: string | undefined;
+        thumbnailUrl?: string | undefined;
+    }[];
+    tags: string[];
     slug: string;
     isFeatured: boolean;
-    tags: string[];
     excerpt: string;
     contentImages: {
-        type: "video" | "image" | "file";
         url: string;
-        alt?: string | undefined;
-        thumbnailUrl?: string | undefined;
-    }[];
-    additionalImages: {
         type: "video" | "image" | "file";
-        url: string;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }[];
     readTimeMinutes: number;
     coverImage?: {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     } | {
         url: string;
         type: "image";
     } | null | undefined;
+    authorName?: string | undefined;
     publishedAt?: string | undefined;
     authorId?: string | undefined;
-    authorName?: string | undefined;
     authorAvatar?: string | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
@@ -112,29 +112,29 @@ export declare const createBlogPostSchema: z.ZodObject<{
     slug: string;
     excerpt: string;
     status?: "draft" | "published" | "archived" | undefined;
-    isFeatured?: boolean | undefined;
     coverImage?: string | {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     } | null | undefined;
-    tags?: string[] | undefined;
-    publishedAt?: string | undefined;
-    contentImages?: {
-        type: "video" | "image" | "file";
+    additionalImages?: {
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }[] | undefined;
-    additionalImages?: {
-        type: "video" | "image" | "file";
+    tags?: string[] | undefined;
+    authorName?: string | undefined;
+    isFeatured?: boolean | undefined;
+    publishedAt?: string | undefined;
+    contentImages?: {
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }[] | undefined;
     authorId?: string | undefined;
-    authorName?: string | undefined;
     authorAvatar?: string | undefined;
     readTimeMinutes?: number | undefined;
     metaTitle?: string | undefined;
@@ -155,13 +155,13 @@ export declare const updateBlogPostSchema: z.ZodObject<{
         alt: z.ZodOptional<z.ZodString>;
         thumbnailUrl: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }>, z.ZodEffects<z.ZodString, {
@@ -174,13 +174,13 @@ export declare const updateBlogPostSchema: z.ZodObject<{
         alt: z.ZodOptional<z.ZodString>;
         thumbnailUrl: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }>, "many">>>>;
@@ -190,13 +190,13 @@ export declare const updateBlogPostSchema: z.ZodObject<{
         alt: z.ZodOptional<z.ZodString>;
         thumbnailUrl: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }, {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }>, "many">>>>;
@@ -208,72 +208,72 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     metaTitle: z.ZodOptional<z.ZodOptional<z.ZodString>>;
     metaDescription: z.ZodOptional<z.ZodOptional<z.ZodString>>;
 }, "strip", z.ZodTypeAny, {
-    status?: "draft" | "published" | "archived" | undefined;
     title?: string | undefined;
     content?: string | undefined;
+    status?: "draft" | "published" | "archived" | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
-    slug?: string | undefined;
-    isFeatured?: boolean | undefined;
     coverImage?: {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     } | {
         url: string;
         type: "image";
     } | null | undefined;
+    additionalImages?: {
+        url: string;
+        type: "video" | "image" | "file";
+        alt?: string | undefined;
+        thumbnailUrl?: string | undefined;
+    }[] | undefined;
     tags?: string[] | undefined;
+    slug?: string | undefined;
+    authorName?: string | undefined;
+    isFeatured?: boolean | undefined;
     publishedAt?: string | undefined;
     excerpt?: string | undefined;
     contentImages?: {
-        type: "video" | "image" | "file";
         url: string;
-        alt?: string | undefined;
-        thumbnailUrl?: string | undefined;
-    }[] | undefined;
-    additionalImages?: {
         type: "video" | "image" | "file";
-        url: string;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }[] | undefined;
     authorId?: string | undefined;
-    authorName?: string | undefined;
     authorAvatar?: string | undefined;
     readTimeMinutes?: number | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
 }, {
-    status?: "draft" | "published" | "archived" | undefined;
     title?: string | undefined;
     content?: string | undefined;
+    status?: "draft" | "published" | "archived" | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
-    slug?: string | undefined;
-    isFeatured?: boolean | undefined;
     coverImage?: string | {
-        type: "video" | "image" | "file";
         url: string;
+        type: "video" | "image" | "file";
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     } | null | undefined;
+    additionalImages?: {
+        url: string;
+        type: "video" | "image" | "file";
+        alt?: string | undefined;
+        thumbnailUrl?: string | undefined;
+    }[] | undefined;
     tags?: string[] | undefined;
+    slug?: string | undefined;
+    authorName?: string | undefined;
+    isFeatured?: boolean | undefined;
     publishedAt?: string | undefined;
     excerpt?: string | undefined;
     contentImages?: {
-        type: "video" | "image" | "file";
         url: string;
-        alt?: string | undefined;
-        thumbnailUrl?: string | undefined;
-    }[] | undefined;
-    additionalImages?: {
         type: "video" | "image" | "file";
-        url: string;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
     }[] | undefined;
     authorId?: string | undefined;
-    authorName?: string | undefined;
     authorAvatar?: string | undefined;
     readTimeMinutes?: number | undefined;
     metaTitle?: string | undefined;

package/dist/features/blog/actions/blog-actions.js

@@ -3,7 +3,7 @@ import { serverLogger } from "../../../monitoring";
 import { blogRepository } from "../repository/blog.repository";
 import { coerceMediaField, getMediaUrl } from "../../../utils";
 import { finalizeStagedMediaField, finalizeStagedMediaObject, finalizeStagedMediaObjectArray, } from "../../media/finalize";
-// ─── Schemas ──────────────────────────────────────────────────────────────
+// --- Schemas --------------------------------------------------------------
 const singleImageMediaSchema = z
     .union([
     z.object({
@@ -46,7 +46,7 @@ export const createBlogPostSchema = z.object({
     metaDescription: z.string().optional(),
 });
 export const updateBlogPostSchema = createBlogPostSchema.partial();
-// ─── Actions ──────────────────────────────────────────────────────────────
+// --- Actions --------------------------------------------------------------
 export async function createBlogPost(input, author) {
     const finalizedCoverUrl = await finalizeStagedMediaField(getMediaUrl(input.coverImage));
     const finalizedCoverImage = await finalizeStagedMediaObject(coerceMediaField(input.coverImage ?? finalizedCoverUrl ?? null));

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

@@ -18,7 +18,7 @@ function toBlogPost(doc) {
         updatedAt: doc.updatedAt.toISOString(),
     };
 }
-// ─── GET /api/blog/[slug] ─────────────────────────────────────────────────────
+// --- GET /api/blog/[slug] -----------------------------------------------------
 export async function GET(_request, context) {
     try {
         const { slug } = await context.params;

package/dist/features/blog/api/route.js

@@ -18,7 +18,7 @@ function numParam(url, key, fallback) {
     const n = v !== null ? Number(v) : NaN;
     return Number.isFinite(n) ? n : fallback;
 }
-// ─── GET /api/blog ────────────────────────────────────────────────────────────
+// --- GET /api/blog ------------------------------------------------------------
 export async function GET(request) {
     try {
         const url = new URL(request.url);

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

@@ -1,16 +1,18 @@
-"use client";
 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 { getMediaUrl } from "../../media/types/index";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
+import { safeDisplayName } from "../../../security";
 const CATEGORY_BADGE = {
-    news: "bg-blue-100 text-blue-800",
-    tips: "bg-emerald-100 text-emerald-800",
-    guides: "bg-indigo-100 text-indigo-800",
-    updates: "bg-purple-100 text-purple-800",
-    community: "bg-orange-100 text-orange-800",
+    news: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+    tips: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
+    guides: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300",
+    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 = "", }) {
+    const safeTitle = post.title?.trim() || "Untitled post";
     const coverImageUrl = getMediaUrl(post.coverImage);
     const date = post.publishedAt
         ? new Date(post.publishedAt).toLocaleDateString(getDefaultLocale(), {
@@ -19,6 +21,6 @@ export function BlogFeaturedCard({ post, href, labels = {}, renderLink, renderIm
             day: "numeric",
         })
         : "";
-    const inner = (_jsxs(Article, { className: `overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm hover:shadow-lg transition-shadow duration-200 md:flex ${className}`, children: [coverImageUrl && (_jsx(Div, { className: "md:w-1/2 relative h-64 md:min-h-[320px] 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})` } })) })), _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 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 mb-3 leading-snug", children: post.title }), post.excerpt && (_jsx(Text, { className: "text-neutral-500 mb-4 line-clamp-3 text-sm", children: post.excerpt })), _jsxs(Row, { className: "gap-4 text-xs text-neutral-400", children: [post.authorName && _jsx(Span, { children: post.authorName }), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels.readTime ?? "min read"] })), date && _jsx(Span, { children: date })] })] })] }));
+    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 }));
 }

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";

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

@@ -0,0 +1,4 @@
+export interface BlogIndexListingProps {
+    initialData?: any;
+}
+export declare function BlogIndexListing({ initialData }: BlogIndexListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useBlogPosts } from "../hooks/useBlog";
+import { Div, Grid, Input, Pagination, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
+import { ROUTES } from "../../../next";
+import { BlogCard } from "./BlogListView";
+import { BlogFilters, BLOG_PUBLIC_SORT_OPTIONS, } from "./BlogFilters";
+const PAGE_SIZE = 24;
+export function BlogIndexListing({ initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "-publishedAt" } });
+    const params = {
+        q: table.get("q") || undefined,
+        category: (table.get("category") || undefined),
+        sort: table.get("sort") || "-publishedAt",
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", PAGE_SIZE),
+    };
+    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 }) }));
+}

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

@@ -0,0 +1 @@
+export declare function BlogIndexPageView(): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 })
+        .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" })] }) }) }));
+}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 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 = "" }) {
@@ -14,14 +15,14 @@ export function BlogCard({ post, onClick, className = "" }) {
         : "";
     return (_jsxs(Article, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (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 bg-white shadow-sm transition hover:shadow-md ${onClick ? "cursor-pointer" : ""} ${className}`, children: [coverImageUrl && (_jsx(Div, { className: "aspect-video w-full overflow-hidden bg-neutral-100", 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", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: "line-clamp-2 text-base font-semibold text-neutral-900 group-hover:text-primary", children: post.title }), post.excerpt && (_jsx(Text, { className: "mt-2 line-clamp-3 flex-1 text-sm text-neutral-500", 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", children: [post.authorName && (_jsx(Span, { className: "font-medium text-neutral-700", children: post.authorName })), date && _jsxs(Span, { className: "ml-1", children: ["\u00B7 ", date] })] })] })] })] }));
+            : 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] })] })] })] })] }));
 }
 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 text-neutral-600 hover:bg-neutral-200"}`, 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 text-neutral-600 hover:bg-neutral-200"}`, children: labels[cat] ?? cat }, cat)))] }));
+    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)))] }));
 }
 export function BlogListView({ posts, isLoading, totalPages = 1, currentPage = 1, total = 0, onPageChange, onPostClick, emptyLabel = "No posts found", slots, }) {
     if (isLoading) {
-        return (_jsx(Div, { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: "animate-pulse overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100", children: [_jsx(Div, { className: "aspect-video bg-neutral-200" }), _jsxs(Div, { className: "space-y-2 p-5", children: [_jsx(Div, { className: "h-4 w-16 rounded bg-neutral-200" }), _jsx(Div, { className: "h-5 w-full rounded bg-neutral-200" }), _jsx(Div, { className: "h-4 w-3/4 rounded bg-neutral-200" })] })] }, i))) }));
+        return (_jsx(Div, { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: "animate-pulse overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-neutral-100 dark:bg-slate-800", children: [_jsx(Div, { className: "aspect-video bg-neutral-200 dark:bg-slate-700" }), _jsxs(Div, { className: "space-y-2 p-5", children: [_jsx(Div, { className: "h-4 w-16 rounded bg-neutral-200 dark:bg-slate-700" }), _jsx(Div, { className: "h-5 w-full rounded bg-neutral-200 dark:bg-slate-700" }), _jsx(Div, { className: "h-4 w-3/4 rounded bg-neutral-200 dark:bg-slate-700" })] })] }, i))) }));
     }
     if (posts.length === 0) {
         if (slots?.renderEmptyState) {

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

@@ -1,9 +1,9 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Input, Label, Select, Stack, TagInput, Text, Textarea, } from "../../../ui";
+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 } 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);
@@ -18,7 +18,7 @@ export function BlogPostForm({ value, onChange, categoryOptions, statusOptions,
                         value: value.content || "",
                         onChange: (content) => update({ content }),
                         isReadonly,
-                    })) : isReadonly && renderContentReadonly ? (renderContentReadonly(value.content || "")) : (_jsx(Textarea, { value: value.content || "", onChange: (event) => update({ content: event.target.value }), rows: 10, disabled: isReadonly }))] }), _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({
+                    })) : 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 }))] }));
 }

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

@@ -1,11 +1,11 @@
-"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Heading, Row, Span, Text } from "../../../ui";
+import { Div, Heading, RichText, Row, Span, Text } from "../../../ui";
 import { useBlogPost } from "../hooks/useBlog";
 import { BlogCard } from "./BlogListView";
 import { getMediaUrl } from "../../media/types/index";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 const CATEGORY_BADGE = {
     news: "bg-blue-100 text-blue-800",
     tips: "bg-emerald-100 text-emerald-800",
@@ -35,5 +35,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(Div, { className: "prose max-w-none", dangerouslySetInnerHTML: { __html: post.content ?? "" } })) }), 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 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() }))] })] }));
 }

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

@@ -1,4 +1,6 @@
 export { BlogCard, BlogCategoryTabs, BlogListView } from "./BlogListView";
+export { BlogIndexListing } from "./BlogIndexListing";
+export type { BlogIndexListingProps } from "./BlogIndexListing";
 export { BlogFilters, BLOG_SORT_OPTIONS, BLOG_FILTER_KEYS, BLOG_ADMIN_SORT_OPTIONS, BLOG_SELLER_SORT_OPTIONS, BLOG_PUBLIC_SORT_OPTIONS, getBlogFilterKeys, getBlogSortOptions, } from "./BlogFilters";
 export type { BlogFiltersProps, BlogFilterVariant } from "./BlogFilters";
 export { BlogFeaturedCard } from "./BlogFeaturedCard";

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

@@ -1,4 +1,5 @@
 export { BlogCard, BlogCategoryTabs, BlogListView } from "./BlogListView";
+export { BlogIndexListing } from "./BlogIndexListing";
 export { BlogFilters, BLOG_SORT_OPTIONS, BLOG_FILTER_KEYS, BLOG_ADMIN_SORT_OPTIONS, BLOG_SELLER_SORT_OPTIONS, BLOG_PUBLIC_SORT_OPTIONS, getBlogFilterKeys, getBlogSortOptions, } from "./BlogFilters";
 export { BlogFeaturedCard } from "./BlogFeaturedCard";
 export { BlogPostForm } from "./BlogPostForm";

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

@@ -1,4 +1,3 @@
-"use client";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { BLOG_ENDPOINTS } from "../../../constants/api-endpoints";

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

@@ -1,4 +1,3 @@
-import "server-only";
 import type { FirebaseSieveResult, SieveModel } from "../../../providers/db-firebase";
 import { BaseRepository } from "../../../providers/db-firebase";
 import { type BlogPostCreateInput, type BlogPostDocument, type BlogPostUpdateInput } from "../schemas";

package/dist/features/blog/repository/blog.repository.js

@@ -1,4 +1,3 @@
-import "server-only";
 import { DatabaseError } from "../../../errors";
 import { BaseRepository, prepareForFirestore, } from "../../../providers/db-firebase";
 import { BLOG_POST_FIELDS, BLOG_POSTS_COLLECTION, } from "../schemas";