@mohasinac/appkit 2.3.0 → 2.3.1

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

@@ -0,0 +1,26 @@
+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 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(), {
+            year: "numeric",
+            month: "short",
+            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 }));
+}

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

@@ -0,0 +1,106 @@
+import type { UrlTable } from "../../filters/FilterPanel";
+export type BlogFilterVariant = "admin" | "seller" | "public";
+export declare const BLOG_FILTER_KEYS: {
+    readonly admin: readonly ["status", "category", "isFeatured"];
+    readonly seller: readonly ["status", "category", "isFeatured"];
+    readonly public: readonly ["category"];
+};
+export declare const BLOG_ADMIN_SORT_OPTIONS: readonly [{
+    readonly value: "-createdAt";
+    readonly label: "Newest First";
+}, {
+    readonly value: "createdAt";
+    readonly label: "Oldest First";
+}, {
+    readonly value: "title";
+    readonly label: "Title A–Z";
+}, {
+    readonly value: "-title";
+    readonly label: "Title Z–A";
+}, {
+    readonly value: "-views";
+    readonly label: "Most Viewed";
+}, {
+    readonly value: "-readTimeMinutes";
+    readonly label: "Longest Read";
+}, {
+    readonly value: "-publishedAt";
+    readonly label: "Published: Newest";
+}, {
+    readonly value: "publishedAt";
+    readonly label: "Published: Oldest";
+}];
+export declare const BLOG_SELLER_SORT_OPTIONS: readonly [{
+    readonly value: "-createdAt";
+    readonly label: "Newest First";
+}, {
+    readonly value: "createdAt";
+    readonly label: "Oldest First";
+}, {
+    readonly value: "title";
+    readonly label: "Title A–Z";
+}, {
+    readonly value: "-title";
+    readonly label: "Title Z–A";
+}, {
+    readonly value: "-views";
+    readonly label: "Most Viewed";
+}, {
+    readonly value: "-readTimeMinutes";
+    readonly label: "Longest Read";
+}, {
+    readonly value: "-publishedAt";
+    readonly label: "Published: Newest";
+}, {
+    readonly value: "publishedAt";
+    readonly label: "Published: Oldest";
+}];
+export declare const BLOG_PUBLIC_SORT_OPTIONS: readonly [{
+    readonly value: "-publishedAt";
+    readonly label: "Published: Newest";
+}, {
+    readonly value: "publishedAt";
+    readonly label: "Published: Oldest";
+}, {
+    readonly value: "-views";
+    readonly label: "Most Viewed";
+}, {
+    readonly value: "title";
+    readonly label: "Title A–Z";
+}];
+export declare const BLOG_SORT_OPTIONS: readonly [{
+    readonly value: "-createdAt";
+    readonly label: "Newest First";
+}, {
+    readonly value: "createdAt";
+    readonly label: "Oldest First";
+}, {
+    readonly value: "title";
+    readonly label: "Title A–Z";
+}, {
+    readonly value: "-title";
+    readonly label: "Title Z–A";
+}, {
+    readonly value: "-views";
+    readonly label: "Most Viewed";
+}, {
+    readonly value: "-readTimeMinutes";
+    readonly label: "Longest Read";
+}, {
+    readonly value: "-publishedAt";
+    readonly label: "Published: Newest";
+}, {
+    readonly value: "publishedAt";
+    readonly label: "Published: Oldest";
+}];
+export declare function getBlogFilterKeys(variant: BlogFilterVariant): readonly string[];
+export declare function getBlogSortOptions(variant: BlogFilterVariant): ReadonlyArray<{
+    value: string;
+    label: string;
+}>;
+export interface BlogFiltersProps {
+    table: UrlTable;
+    /** "public" hides admin-only fields (status, isFeatured) */
+    variant?: BlogFilterVariant;
+}
+export declare function BlogFilters({ table, variant }: BlogFiltersProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { SwitchFilter } from "../../filters/SwitchFilter";
+import { Div } from "../../../ui";
+export const BLOG_FILTER_KEYS = {
+    admin: ["status", "category", "isFeatured"],
+    seller: ["status", "category", "isFeatured"],
+    public: ["category"],
+};
+export const BLOG_ADMIN_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "createdAt", label: "Oldest First" },
+    { value: "title", label: "Title A–Z" },
+    { value: "-title", label: "Title Z–A" },
+    { value: "-views", label: "Most Viewed" },
+    { value: "-readTimeMinutes", label: "Longest Read" },
+    { value: "-publishedAt", label: "Published: Newest" },
+    { value: "publishedAt", label: "Published: Oldest" },
+];
+export const BLOG_SELLER_SORT_OPTIONS = BLOG_ADMIN_SORT_OPTIONS;
+export const BLOG_PUBLIC_SORT_OPTIONS = [
+    { value: "-publishedAt", label: "Published: Newest" },
+    { value: "publishedAt", label: "Published: Oldest" },
+    { value: "-views", label: "Most Viewed" },
+    { value: "title", label: "Title A–Z" },
+];
+// Backward-compatible alias.
+export const BLOG_SORT_OPTIONS = BLOG_ADMIN_SORT_OPTIONS;
+export function getBlogFilterKeys(variant) {
+    return BLOG_FILTER_KEYS[variant];
+}
+export function getBlogSortOptions(variant) {
+    switch (variant) {
+        case "admin":
+            return BLOG_ADMIN_SORT_OPTIONS;
+        case "seller":
+            return BLOG_SELLER_SORT_OPTIONS;
+        case "public":
+            return BLOG_PUBLIC_SORT_OPTIONS;
+        default:
+            return BLOG_PUBLIC_SORT_OPTIONS;
+    }
+}
+export function BlogFilters({ table, variant = "admin" }) {
+    const t = useTranslations("filters");
+    const statusOptions = [
+        { value: "draft", label: t("blogStatusDraft") },
+        { value: "published", label: t("blogStatusPublished") },
+        { value: "archived", label: t("blogStatusArchived") },
+    ];
+    const categoryOptions = [
+        { value: "news", label: t("blogCategoryNews") },
+        { value: "tips", label: t("blogCategoryTips") },
+        { value: "guides", label: t("blogCategoryGuides") },
+        { value: "updates", label: t("blogCategoryUpdates") },
+        { value: "community", label: t("blogCategoryCommunity") },
+    ];
+    const selectedStatus = table.get("status")
+        ? table.get("status").split("|").filter(Boolean)
+        : [];
+    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 }))] }));
+}

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.d.ts

@@ -0,0 +1,29 @@
+import type { LayoutSlots } from "../../../contracts";
+import type { BlogPost, BlogPostCategory } from "../types";
+interface BlogCardProps {
+    post: BlogPost;
+    onClick?: (post: BlogPost) => void;
+    className?: string;
+}
+export declare function BlogCard({ post, onClick, className }: BlogCardProps): import("react/jsx-runtime").JSX.Element;
+interface BlogCategoryTabsProps {
+    categories: BlogPostCategory[];
+    active?: BlogPostCategory | null;
+    onSelect: (cat: BlogPostCategory | null) => void;
+    labels?: Record<string, string>;
+}
+export declare function BlogCategoryTabs({ categories, active, onSelect, labels, }: BlogCategoryTabsProps): import("react/jsx-runtime").JSX.Element;
+interface BlogListViewProps<T extends BlogPost = BlogPost> {
+    posts: T[];
+    isLoading?: boolean;
+    totalPages?: number;
+    currentPage?: number;
+    total?: number;
+    onPageChange?: (page: number) => void;
+    onPostClick?: (post: T) => void;
+    emptyLabel?: string;
+    /** Render-prop slot overrides — pass via `FeatureExtension.slots`. */
+    slots?: LayoutSlots<T>;
+}
+export declare function BlogListView<T extends BlogPost = BlogPost>({ posts, isLoading, totalPages, currentPage, total, onPageChange, onPostClick, emptyLabel, slots, }: BlogListViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+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 = "" }) {
+    const coverImageUrl = getMediaUrl(post.coverImage);
+    const date = post.publishedAt
+        ? new Date(post.publishedAt).toLocaleDateString(getDefaultLocale(), {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        })
+        : "";
+    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 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 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 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) {
+            return _jsx(_Fragment, { children: slots.renderEmptyState() });
+        }
+        return (_jsx(Text, { className: "py-12 text-center text-sm text-neutral-500", children: emptyLabel }));
+    }
+    return (_jsxs(Div, { className: "space-y-8", children: [slots?.renderHeader
+                ? slots.renderHeader({ total })
+                : null, _jsx(Div, { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: posts.map((post, i) => slots?.renderCard ? (_jsx(React.Fragment, { children: slots.renderCard(post, i) }, post.id)) : (_jsx(BlogCard, { post: post, onClick: onPostClick }, post.id))) }), slots?.renderFooter ? slots.renderFooter({
+                page: currentPage,
+                totalPages,
+            }) : totalPages > 1 && onPageChange ? (_jsx(Div, { className: "flex justify-center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }) })) : null] }));
+}

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { type MediaField, type MediaFieldInput } from "../../media/types/index";
+export interface BlogPostFormValue {
+    title?: string;
+    slug?: string;
+    excerpt?: string;
+    content?: string;
+    coverImage?: MediaFieldInput;
+    contentImages?: MediaField[];
+    additionalImages?: MediaField[];
+    category?: string;
+    tags?: string[];
+    isFeatured?: boolean;
+    status?: string;
+    readTimeMinutes?: number;
+}
+export interface BlogPostFormOption {
+    value: string;
+    label: string;
+}
+export interface BlogPostFormLabels {
+    title: string;
+    slug: string;
+    excerpt: string;
+    content: string;
+    coverImage: string;
+    coverImageHelper?: string;
+    contentImages: string;
+    contentImagesHelper?: string;
+    additionalImages: string;
+    additionalImagesHelper?: string;
+    category: string;
+    status: string;
+    tags: string;
+    readTime: string;
+    featured: string;
+}
+export interface BlogPostFormProps {
+    value: BlogPostFormValue;
+    onChange: (next: BlogPostFormValue) => void;
+    categoryOptions: BlogPostFormOption[];
+    statusOptions: BlogPostFormOption[];
+    labels: BlogPostFormLabels;
+    onUploadCover: (file: File) => Promise<string>;
+    onUploadContentImage: (file: File) => Promise<string>;
+    onUploadAdditionalImage: (file: File) => Promise<string>;
+    onAbort?: (stagedUrls: string[]) => void;
+    isReadonly?: boolean;
+    renderContentField?: (args: {
+        value: string;
+        onChange: (value: string) => void;
+        isReadonly: boolean;
+    }) => React.ReactNode;
+    renderContentReadonly?: (value: string) => React.ReactNode;
+}
+export declare function BlogPostForm({ value, onChange, categoryOptions, statusOptions, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, isReadonly, renderContentField, renderContentReadonly, }: BlogPostFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 } 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);
+    const additionalImages = coerceMediaFieldArray(value.additionalImages);
+    const update = (partial) => {
+        onChange({
+            ...value,
+            ...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({
+                        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 }))] }));
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import type { BlogPost } from "../types";
+import type { BlogPostDetailResponse } from "../api/[slug]/route";
+export interface BlogPostViewProps {
+    slug: string;
+    initialData?: BlogPostDetailResponse;
+    labels?: {
+        backToBlog?: string;
+        notFound?: string;
+        notFoundDescription?: string;
+        author?: string;
+        readTime?: string;
+        publishedOn?: string;
+        viewsLabel?: string;
+        featured?: string;
+        relatedTitle?: string;
+    };
+    /** Render the cover image */
+    renderImage?: (post: BlogPost) => React.ReactNode;
+    /** Render the HTML content (for custom sanitization/prosemirror) */
+    renderContent?: (post: BlogPost) => React.ReactNode;
+    /** Render a back button */
+    renderBackButton?: () => React.ReactNode;
+    /** Render loading state */
+    renderLoading?: () => React.ReactNode;
+    /** Render error/not-found state */
+    renderError?: (error: Error | null) => React.ReactNode;
+    /** Render a related post card */
+    renderRelatedCard?: (post: BlogPost, index: number) => React.ReactNode;
+    className?: string;
+}
+export declare function BlogPostView({ slug, initialData, labels, renderImage, renderContent, renderBackButton, renderLoading, renderError, renderRelatedCard, className, }: BlogPostViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+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";
+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",
+    guides: "bg-indigo-100 text-indigo-800",
+    updates: "bg-purple-100 text-purple-800",
+    community: "bg-orange-100 text-orange-800",
+};
+export function BlogPostView({ slug, initialData, labels = {}, renderImage, renderContent, renderBackButton, renderLoading, renderError, renderRelatedCard, className = "", }) {
+    const { post, related, isLoading, error } = useBlogPost(slug, {
+        initialData,
+    });
+    if (isLoading) {
+        if (renderLoading)
+            return _jsx(_Fragment, { children: renderLoading() });
+        return (_jsx(Div, { className: "flex items-center justify-center min-h-screen", children: _jsx(Div, { className: "animate-pulse text-neutral-400", children: "Loading\u2026" }) }));
+    }
+    if (error || !post) {
+        if (renderError)
+            return _jsx(_Fragment, { children: renderError(error ?? null) });
+        return (_jsxs(Div, { className: "flex flex-col items-center justify-center min-h-screen gap-4 p-8", children: [_jsx(Heading, { level: 1, className: "text-xl font-semibold", children: labels.notFound ?? "Post not found" }), _jsx(Text, { className: "text-neutral-500", children: labels.notFoundDescription ?? "This post is not available." }), renderBackButton?.()] }));
+    }
+    const date = post.publishedAt
+        ? new Date(post.publishedAt).toLocaleDateString(getDefaultLocale(), {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+        })
+        : "";
+    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() }))] })] }));
+}

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

@@ -0,0 +1,11 @@
+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";
+export type { BlogFeaturedCardProps } from "./BlogFeaturedCard";
+export { BlogPostForm } from "./BlogPostForm";
+export type { BlogPostFormLabels, BlogPostFormOption, BlogPostFormProps, BlogPostFormValue, } from "./BlogPostForm";
+export { BlogPostView } from "./BlogPostView";
+export type { BlogPostViewProps } from "./BlogPostView";

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

@@ -0,0 +1,6 @@
+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";
+export { BlogPostView } from "./BlogPostView";

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

@@ -0,0 +1,27 @@
+import type { BlogListResponse, BlogListParams } from "../types";
+import type { BlogPostDetailResponse } from "../api/[slug]/route";
+export type { BlogListResponse };
+interface UseBlogPostsOptions {
+    initialData?: BlogListResponse;
+    enabled?: boolean;
+    endpoint?: string;
+}
+export declare function useBlogPosts(params?: BlogListParams, opts?: UseBlogPostsOptions): {
+    posts: import("..").BlogPost[];
+    meta: import("..").BlogListMeta | undefined;
+    total: number;
+    totalPages: number;
+    page: number;
+    isLoading: boolean;
+    error: Error | null;
+};
+interface UseBlogPostOptions {
+    initialData?: BlogPostDetailResponse;
+    enabled?: boolean;
+}
+export declare function useBlogPost(slug: string, opts?: UseBlogPostOptions): {
+    post: import("..").BlogPost | null;
+    related: import("..").BlogPost[];
+    isLoading: boolean;
+    error: Error | null;
+};

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

@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../../http";
+import { BLOG_ENDPOINTS } from "../../../constants/api-endpoints";
+export function useBlogPosts(params = {}, opts) {
+    const searchParams = new URLSearchParams();
+    if (params.category)
+        searchParams.set("category", params.category);
+    if (params.q)
+        searchParams.set("q", params.q);
+    if (params.tags)
+        searchParams.set("tags", params.tags);
+    if (params.page)
+        searchParams.set("page", String(params.page));
+    if (params.perPage)
+        searchParams.set("perPage", String(params.perPage));
+    if (params.sort)
+        searchParams.set("sort", params.sort);
+    if (params.featured !== undefined)
+        searchParams.set("featured", String(params.featured));
+    const qs = searchParams.toString();
+    const query = useQuery({
+        queryKey: ["blog", qs],
+        queryFn: () => apiClient.get(`${BLOG_ENDPOINTS.LIST}${qs ? `?${qs}` : ""}`),
+        initialData: opts?.initialData,
+        enabled: opts?.enabled,
+    });
+    return {
+        posts: query.data?.posts ?? [],
+        meta: query.data?.meta,
+        total: query.data?.meta?.total ?? 0,
+        totalPages: query.data?.meta?.totalPages ?? 1,
+        page: query.data?.meta?.page ?? 1,
+        isLoading: query.isLoading,
+        error: query.error,
+    };
+}
+export function useBlogPost(slug, opts) {
+    const query = useQuery({
+        queryKey: ["blog", "post", slug],
+        queryFn: () => apiClient.get(BLOG_ENDPOINTS.BY_SLUG(slug)),
+        initialData: opts?.initialData,
+        enabled: opts?.enabled !== false && !!slug,
+    });
+    return {
+        post: query.data?.post ?? null,
+        related: query.data?.related ?? [],
+        isLoading: query.isLoading,
+        error: query.error,
+    };
+}

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

@@ -0,0 +1,6 @@
+export * from "./types";
+export * from "./hooks/useBlog";
+export * from "./components";
+export * from "./schemas";
+export * from "./columns";
+export { manifest } from "./manifest";

package/dist/features/blog/index.js

@@ -0,0 +1,6 @@
+export * from "./types";
+export * from "./hooks/useBlog";
+export * from "./components";
+export * from "./schemas";
+export * from "./columns";
+export { manifest } from "./manifest";

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

@@ -0,0 +1,2 @@
+import type { FeatureManifest } from "../../contracts";
+export declare const manifest: FeatureManifest;

package/dist/features/blog/manifest.js

@@ -0,0 +1,14 @@
+export const manifest = {
+    name: "blog",
+    i18nNamespace: "blog",
+    envKeys: [],
+    routes: [
+        { segment: "[locale]/blog", exports: { default: "BlogListView" } },
+        { segment: "[locale]/blog/[slug]", exports: { default: "BlogPostView" } },
+    ],
+    apiRoutes: [
+        { segment: "api/blog", methods: ["GET", "POST"] },
+        { segment: "api/blog/[slug]", methods: ["GET", "PATCH", "DELETE"] },
+        { segment: "api/blog/[slug]/related", methods: ["GET"] },
+    ],
+};