@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -102,9 +102,9 @@ export declare const createBlogPostSchema: z.ZodObject<{
     } | null | undefined;
     authorId?: string | undefined;
     authorName?: string | undefined;
-    authorAvatar?: string | undefined;
     metaTitle?: string | undefined;
     metaDescription?: string | undefined;
+    authorAvatar?: string | undefined;
 }, {
     category: "news" | "tips" | "guides" | "updates" | "community";
     title: string;
@@ -124,6 +124,8 @@ export declare const createBlogPostSchema: z.ZodObject<{
     authorId?: string | undefined;
     authorName?: string | undefined;
     readTimeMinutes?: number | undefined;
+    metaTitle?: string | undefined;
+    metaDescription?: string | undefined;
     contentImages?: {
         url: string;
         type: "image" | "video" | "file";
@@ -137,8 +139,6 @@ export declare const createBlogPostSchema: z.ZodObject<{
         thumbnailUrl?: string | undefined;
     }[] | undefined;
     authorAvatar?: string | undefined;
-    metaTitle?: string | undefined;
-    metaDescription?: string | undefined;
 }>;
 export declare const updateBlogPostSchema: z.ZodObject<{
     title: z.ZodOptional<z.ZodString>;
@@ -229,6 +229,8 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     authorId?: string | undefined;
     authorName?: string | undefined;
     readTimeMinutes?: number | undefined;
+    metaTitle?: string | undefined;
+    metaDescription?: string | undefined;
     contentImages?: {
         url: string;
         type: "image" | "video" | "file";
@@ -242,8 +244,6 @@ export declare const updateBlogPostSchema: z.ZodObject<{
         thumbnailUrl?: string | undefined;
     }[] | undefined;
     authorAvatar?: string | undefined;
-    metaTitle?: string | undefined;
-    metaDescription?: string | undefined;
 }, {
     status?: "draft" | "published" | "archived" | undefined;
     category?: "news" | "tips" | "guides" | "updates" | "community" | undefined;
@@ -263,6 +263,8 @@ export declare const updateBlogPostSchema: z.ZodObject<{
     authorId?: string | undefined;
     authorName?: string | undefined;
     readTimeMinutes?: number | undefined;
+    metaTitle?: string | undefined;
+    metaDescription?: string | undefined;
     contentImages?: {
         url: string;
         type: "image" | "video" | "file";
@@ -276,8 +278,6 @@ export declare const updateBlogPostSchema: z.ZodObject<{
         thumbnailUrl?: string | undefined;
     }[] | undefined;
     authorAvatar?: string | 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/api/[slug]/route.d.ts

@@ -5,7 +5,7 @@
  *
  * ```ts
  * // app/api/blog/[slug]/route.ts
- * export { GET } from "@mohasinac/feat-blog";   // re-exported as blogSlugGET
+ * export { GET } from "@mohasinac/feat-blog"; // re-exported as blogSlugGET
  * ```
  */
 import { NextResponse } from "next/server.js";

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

@@ -5,11 +5,12 @@
  *
  * ```ts
  * // app/api/blog/[slug]/route.ts
- * export { GET } from "@mohasinac/feat-blog";   // re-exported as blogSlugGET
+ * export { GET } from "@mohasinac/feat-blog"; // re-exported as blogSlugGET
  * ```
  */
 import { NextResponse } from "next/server.js";
 import { blogRepository } from "../../repository/blog.repository";
+import { normalizeError } from "../../../../errors/normalize";
 function toBlogPost(doc) {
     return {
         ...doc,
@@ -34,6 +35,7 @@ export async function GET(_request, context) {
         return NextResponse.json({ success: true, data: body });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-blog] GET /api/blog/[slug] failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch blog post" }, { status: 500 });
     }

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

@@ -10,6 +10,7 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../contracts";
+import { normalizeError } from "../../../errors/normalize";
 function param(url, key) {
     return url.searchParams.get(key);
 }
@@ -61,6 +62,7 @@ export async function GET(request) {
         return NextResponse.json({ success: true, data: body });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-blog] GET /api/blog failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch blog posts" }, { status: 500 });
     }

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

@@ -8,8 +8,8 @@ import type { BlogPost } from "../types";
  * import { buildBlogColumns } from "@mohasinac/feat-blog";
  *
  * const columns = buildBlogColumns<MyPost>({
- *   overrides: { title: { render: (p) => <Link href={p.slug}>{p.title}</Link> } },
- *   extras: [{ key: "series", header: "Series", render: (p) => p.series ?? "—" }],
+ * overrides: { title: { render: (p) => <Link href={p.slug}>{p.title}</Link> } },
+ * extras: [{ key: "series", header: "Series", render: (p) => p.series ?? "—" }],
  * });
  * ```
  */

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

@@ -7,8 +7,8 @@ import { buildColumns, } from "../../../ui/columns";
  * import { buildBlogColumns } from "@mohasinac/feat-blog";
  *
  * const columns = buildBlogColumns<MyPost>({
- *   overrides: { title: { render: (p) => <Link href={p.slug}>{p.title}</Link> } },
- *   extras: [{ key: "series", header: "Series", render: (p) => p.series ?? "—" }],
+ * overrides: { title: { render: (p) => <Link href={p.slug}>{p.title}</Link> } },
+ * extras: [{ key: "series", header: "Series", render: (p) => p.series ?? "—" }],
  * });
  * ```
  */

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Article, BaseListingCard, Div, Heading, Row, Span, Text, TextLink } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { Article, BaseListingCard, Div, Heading, Row, Span, Stack, Text, TextLink } from "../../../ui";
 import { getMediaUrl } from "../../media/types/index";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 import { safeDisplayName } from "../../../security";
@@ -13,13 +12,13 @@ const __O = {
     hidden: "overflow-hidden",
 };
 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",
+    news: "bg-info-surface text-info dark:bg-info-surface dark:text-info",
+    tips: "bg-success-surface text-success dark:bg-success-surface dark:text-success",
     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",
+    community: "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
 };
-const CLS_FEATURED_BADGE = "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 px-2 py-0.5 rounded-full";
+const CLS_FEATURED_BADGE = "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning px-2 py-0.5 rounded-full";
 export function BlogFeaturedCard({ post, href, labels = {}, className = "", selectable = false, isSelected = false, onSelect, }) {
     const longPress = useLongPress(() => onSelect?.(post.id, !isSelected));
     const safeTitle = post.title?.trim() || "Untitled post";
@@ -31,7 +30,9 @@ export function BlogFeaturedCard({ post, href, labels = {}, className = "", sele
             day: "numeric",
         })
         : "";
-    return (_jsxs(Article, { className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-shadow duration-200 ${isSelected ? "ring-2 ring-primary outline outline-2 outline-primary" : ""} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(post.id, !isSelected); }, label: isSelected ? "Deselect post" : "Select post", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(TextLink, { href: href, className: "flex h-full flex-col", children: [_jsx(Div, { className: `aspect-video ${__O.hidden} flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", 
+    return (
+    // audit-variant-ok: blog card Article — flex-col + hover-shadow-md transition + conditional ring-2 selected outline; Article lacks card-with-hover-state variant
+    _jsxs(Article, { className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-shadow duration-200 ${isSelected ? "ring-2 ring-primary outline outline-2 outline-primary" : ""} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(post.id, !isSelected); }, label: isSelected ? "Deselect post" : "Select post", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(TextLink, { href: href, className: "flex h-full flex-col", children: [_jsx(Div, { className: `aspect-video ${__O.hidden} flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", 
                             // audit-inline-style-ok: dynamic image URL
-                            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.p4}`, children: [_jsxs(Row, { className: "gap-1.5 mb-2 flex-wrap", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block px-2 py-0.5 rounded-full capitalize ${CATEGORY_BADGE[post.category] ?? "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"}`, children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, 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-zinc-400 dark:text-zinc-400 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 })] })] })] })] }));
+                            style: { backgroundImage: `url(${coverImageUrl})` } })) : (_jsx(Div, { role: "img", "aria-label": safeTitle, surface: "muted", className: "h-full w-full" })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { gap: "xs", className: "mb-2", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block capitalize ${CATEGORY_BADGE[post.category] ?? "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"}`, rounded: "full", padding: "pill-xs", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels.featuredBadge ?? "Featured" }))] }), _jsx(Heading, { level: 3, className: `leading-snug mb-1`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: safeTitle }), post.excerpt && (_jsx(Text, { className: `mb-3`, color: "muted", truncate: 2, size: "sm", children: post.excerpt })), _jsxs(Row, { color: "muted", textSize: "xs", className: "mt-auto", gap: "3", wrap: true, children: [post.authorName && (_jsx(Span, { children: safeDisplayName(post.authorName, "Author") })), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels.readTime ?? "min read"] })), date && _jsx(Span, { children: date })] })] })] })] }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBlogPosts } from "../hooks/useBlog";
-import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Text } from "../../../ui";
+import { Div, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { BlogCard } from "./BlogListView";
 import { BlogFilters, BLOG_PUBLIC_SORT_OPTIONS } from "./BlogFilters";
@@ -19,15 +19,15 @@ const __O = {
 function renderBlogGrid(props) {
     const { isLoading, posts, view } = props;
     if (isLoading) {
-        return (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p5} 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))) }));
+        return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p5}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-1/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" })] })] }, i))) }));
     }
     if (posts.length === 0) {
-        return _jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No posts found." });
+        return _jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "No posts found." });
     }
     if (view === "list") {
-        return (_jsx(Div, { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
+        return (_jsx(Stack, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", border: "subtle", rounded: "xl", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
     }
-    return (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
+    return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: posts.map((post) => _jsx(BlogCard, { post: post, href: String(ROUTES.BLOG.ARTICLE(post.slug)) }, post.id)) }));
 }
 function renderBlogFilterDrawer(props) {
     const { filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable } = props;
@@ -73,6 +73,7 @@ export function BlogIndexListing({ initialData }) {
         buildSieveParams: () => "",
         buildSearchParams: () => "",
         params: new URLSearchParams(),
+        // audit-unknown-ok: TS structural escape — table-state type
     }), [pendingFilters]);
     const openFilters = useCallback(() => {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
@@ -113,5 +114,5 @@ export function BlogIndexListing({ initialData }) {
     const commitSearch = useCallback(() => {
         table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search posts...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: BLOG_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: renderBlogGrid({ isLoading, posts, view }) }), renderBlogFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search posts...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: BLOG_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: renderBlogGrid({ isLoading, posts, view }) }), renderBlogFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
 }

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

@@ -27,5 +27,5 @@ export async function BlogIndexPageView({ searchParams = {} }) {
             },
         }
         : 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" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", 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.js

@@ -1,8 +1,7 @@
 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 { Article, Button, Div, Heading, Pagination, Row, Span, Stack, Text } from "../../../ui";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 import { getMediaUrl } from "../../media/types/index";
 import { safeDisplayName } from "../../../security";
@@ -13,7 +12,7 @@ const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
 };
-const CLS_FEATURED_BADGE = "rounded-full bg-yellow-100 px-2 py-0.5 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300";
+const CLS_FEATURED_BADGE = "rounded-full bg-warning-surface px-2 py-0.5 text-warning dark:bg-warning-surface dark:text-warning";
 export function BlogCard({ post, href, onClick, className = "" }) {
     const coverImageUrl = getMediaUrl(post.coverImage);
     const date = post.publishedAt
@@ -28,31 +27,31 @@ export function BlogCard({ post, href, onClick, className = "" }) {
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(post)
             : undefined, onClick: onClick && !href ? () => onClick(post) : undefined, className: `group flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm transition hover:shadow-md ${isInteractive ? "cursor-pointer" : ""} ${className}`, children: [_jsx(Div, { className: `aspect-video w-full ${__O.hidden} bg-neutral-100 dark:bg-slate-800 flex-shrink-0`, children: coverImageUrl ? (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", 
                     // audit-inline-style-ok: dynamic image URL
-                    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.p5}`, children: [_jsxs(Row, { className: "mb-2 gap-2 flex-wrap", children: [_jsx(Span, { size: "xs", weight: "medium", className: "rounded-full bg-primary/10 px-2 py-0.5 capitalize text-primary", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400", 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", 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(${coverImageUrl})` } })) : (_jsx(Row, { surface: "muted", className: "h-full w-full", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-30", size: "4xl", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p5}`, children: [_jsxs(Row, { className: "mb-2", gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: "bg-primary/10 text-primary", rounded: "full", padding: "pill-xs", transform: "capitalize", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", color: "muted", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `group-hover:text-primary`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 flex-1`, color: "muted", truncate: 3, size: "sm", children: post.excerpt })), _jsxs(Row, { className: "mt-auto", padding: "t-sm", gap: "3", children: [post.authorAvatar ? (_jsx(Div, { role: "img", "aria-label": post.authorName ?? "author", className: "h-7 w-7 flex-shrink-0 bg-center bg-cover", rounded: "full", 
                                 // audit-inline-style-ok: dynamic image URL
-                                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, { weight: "medium", className: "text-neutral-700 dark:text-zinc-300", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] })] })] }));
+                                style: { backgroundImage: `url(${post.authorAvatar})` } })) : post.authorName ? (_jsx(Row, { textWeight: "bold", textSize: "xs", className: "h-7 w-7 flex-shrink-0 bg-primary/10 text-primary", align: "center", justify: "center", rounded: "full", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400 min-w-0", size: "xs", children: [post.authorName && (_jsx(Span, { weight: "medium", className: "text-neutral-700", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] })] })] }));
     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 ${__O.xAuto} 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)))] }));
+    return (_jsxs(Div, { layout: "flex", gap: "2", className: `scrollbar-none ${__O.xAuto}`, padding: "b-2xs", 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.p5}`, 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))) }));
+        return (_jsx(Div, { layout: "grid", gap: "6", className: "sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: "animate-pulse overflow-hidden border border-neutral-200 bg-neutral-100 dark:bg-neutral-800", rounded: "xl", children: [_jsx(Div, { className: "aspect-video bg-neutral-200" }), _jsxs(Stack, { className: `${__P.p5}`, gap: "sm", children: [_jsx(Div, { className: "h-4 w-16 bg-neutral-200", rounded: "default" }), _jsx(Div, { className: "h-5 w-full bg-neutral-200", rounded: "default" }), _jsx(Div, { className: "h-4 w-3/4 bg-neutral-200", rounded: "default" })] })] }, 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-zinc-500 dark:text-zinc-400", children: emptyLabel }));
+        return (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: emptyLabel }));
     }
-    return (_jsxs(Div, { className: "space-y-8", children: [slots?.renderHeader
+    return (_jsxs(Stack, { gap: "xl", 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({
+                : null, _jsx(Div, { layout: "grid", gap: "6", className: "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] }));
+            }) : totalPages > 1 && onPageChange ? (_jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }) })) : null] }));
 }

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

@@ -7,7 +7,7 @@ import { coerceMediaFieldArray, getMediaUrl, } from "../../media/types/index";
 import { normalizeRichTextHtml, slugify } from "../../../utils/string.formatter";
 function renderBlogPostMetaFields(props) {
     const { value, update, isReadonly, categoryOptions, statusOptions, labels } = props;
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsx(Select, { label: labels.category, value: value.category, onValueChange: (category) => update({ category }), options: categoryOptions, disabled: isReadonly }), _jsx(Select, { label: labels.status, value: value.status, onValueChange: (status) => update({ status }), options: statusOptions, disabled: isReadonly })] }), _jsxs(Div, { className: "grid gap-4 md:grid-cols-2", children: [_jsx(TagInput, { label: labels.tags, value: value.tags ?? [], onChange: (tags) => update({ tags }), disabled: isReadonly }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-read-time", children: labels.readTime }), _jsx(Input, { id: "blog-post-read-time", type: "number", value: String(value.readTimeMinutes ?? 5), onChange: (event) => update({ readTimeMinutes: parseInt(event.target.value, 10) || 5 }), disabled: isReadonly })] })] }), _jsx(Checkbox, { label: labels.featured, checked: value.isFeatured || false, onChange: (event) => update({ isFeatured: event.target.checked }), disabled: isReadonly })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "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, { layout: "grid", gap: "4", className: "md:grid-cols-2", children: [_jsx(TagInput, { label: labels.tags, value: value.tags ?? [], onChange: (tags) => update({ tags }), disabled: isReadonly }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { htmlFor: "blog-post-read-time", children: labels.readTime }), _jsx(Input, { id: "blog-post-read-time", type: "number", value: String(value.readTimeMinutes ?? 5), onChange: (event) => update({ readTimeMinutes: parseInt(event.target.value, 10) || 5 }), disabled: isReadonly })] })] }), _jsx(Checkbox, { label: labels.featured, checked: value.isFeatured || false, onChange: (event) => update({ isFeatured: event.target.checked }), disabled: isReadonly })] }));
 }
 function renderBlogPostMediaFields(props) {
     const { value, update, isReadonly, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, coverImageUrl, contentImages, additionalImages } = props;
@@ -23,7 +23,7 @@ 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) => {
+    return (_jsxs(Stack, { gap: "5", children: [_jsxs(Div, { layout: "grid", gap: "4", className: "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 });
@@ -31,5 +31,5 @@ export function BlogPostForm({ value, onChange, categoryOptions, statusOptions,
                         value: value.content || "",
                         onChange: (content) => update({ content }),
                         isReadonly,
-                    })) : isReadonly && renderContentReadonly ? (renderContentReadonly(value.content || "")) : (_jsxs(Stack, { gap: "xs", children: [_jsx(RichTextEditor, { value: normalizeRichTextHtml(value.content || ""), onChange: (content) => update({ content }), disabled: isReadonly, minHeightClassName: "min-h-[240px]", placeholder: "Write blog content" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rich text is supported for blog content." })] }))] }), renderBlogPostMediaFields({ value, update, isReadonly, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, coverImageUrl, contentImages, additionalImages }), renderBlogPostMetaFields({ value, update, isReadonly, categoryOptions, statusOptions, labels })] }));
+                    })) : 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, { size: "xs", color: "muted", children: "Rich text is supported for blog content." })] }))] }), renderBlogPostMediaFields({ value, update, isReadonly, labels, onUploadCover, onUploadContentImage, onUploadAdditionalImage, onAbort, coverImageUrl, contentImages, additionalImages }), renderBlogPostMetaFields({ value, update, isReadonly, categoryOptions, statusOptions, labels })] }));
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link";
-import { Div, Heading, RichText, Row, Span, Text } from "../../../ui";
+import { Div, Heading, RichText, Row, Scrim, Span, Stack, Text } from "../../../ui";
 import { useBlogPost } from "../hooks/useBlog";
 import { BlogCard } from "./BlogListView";
 import { getMediaUrl } from "../../media/types/index";
@@ -16,20 +16,20 @@ const __O = {
     hidden: "overflow-hidden",
 };
 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",
+    news: "bg-info-surface text-info dark:bg-info-surface dark:text-info",
+    tips: "bg-success-surface text-success dark:bg-success-surface dark:text-success",
     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",
+    community: "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
 };
-const CLS_FEATURED_BADGE = "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 px-2 py-0.5 rounded-full";
+const CLS_FEATURED_BADGE = "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning px-2 py-0.5 rounded-full";
 function renderBlogPostHeader(post, date, labels) {
-    return (_jsxs(Div, { className: "mb-8", children: [_jsxs(Row, { className: "gap-2 mb-4", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block px-2 py-0.5 rounded-full capitalize ${CATEGORY_BADGE[post.category] ?? ""}`, children: post.category }), post.isFeatured && _jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, 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-zinc-500 dark:text-zinc-400 mb-6", children: post.excerpt }), _jsxs(Row, { wrap: true, gap: "md", className: "text-sm text-zinc-400 dark:text-zinc-400", children: [post.authorName && _jsxs(Span, { children: [labels?.author ?? "By", " ", _jsx(Span, { weight: "medium", className: "text-zinc-700 dark:text-zinc-300", 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"] })] })] }));
+    return (_jsxs(Div, { className: "mb-8", children: [_jsxs(Row, { className: "mb-4", gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block capitalize ${CATEGORY_BADGE[post.category] ?? ""}`, rounded: "full", padding: "pill-xs", children: post.category }), post.isFeatured && _jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels?.featured ?? "Featured" })] }), _jsx(Heading, { level: 1, className: "mb-4", size: "3xl", weight: "bold", children: post.title }), post.excerpt && _jsx(Text, { className: "mb-6", color: "muted", size: "lg", children: post.excerpt }), _jsxs(Row, { color: "muted", textSize: "sm", wrap: true, gap: "md", children: [post.authorName && _jsxs(Span, { children: [labels?.author ?? "By", " ", _jsx(Span, { weight: "medium", color: "muted", children: post.authorName })] }), post.readTimeMinutes != null && _jsxs(Span, { children: [post.readTimeMinutes, " ", labels?.readTime ?? "min read"] }), date && _jsxs(Span, { children: [labels?.publishedOn ?? "Published", " ", date] }), post.views != null && _jsxs(Span, { children: [post.views, " ", labels?.viewsLabel ?? "views"] })] })] }));
 }
 function renderBlogPostRelated(related, labels, renderRelatedCard) {
     if (related.length === 0)
         return null;
-    return (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "text-xl font-semibold mb-6", children: labels?.relatedTitle ?? "Related Posts" }), _jsx(Div, { className: "grid sm:grid-cols-3 gap-6", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] }));
+    return (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-6", size: "xl", weight: "semibold", children: labels?.relatedTitle ?? "Related Posts" }), _jsx(Div, { layout: "grid", gap: "6", className: "sm:grid-cols-3", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] }));
 }
 export function BlogPostView({ slug, initialData, labels = {}, renderImage, renderContent, renderBackButton, renderLoading, renderError, renderRelatedCard, renderAuthorBio, className = "", }) {
     const { post, related, isLoading, error } = useBlogPost(slug, {
@@ -38,12 +38,12 @@ export function BlogPostView({ slug, initialData, labels = {}, renderImage, rend
     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" }) }));
+        return (_jsx(Row, { className: "min-h-screen", align: "center", justify: "center", 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.p8}`, children: [_jsx(Heading, { level: 1, className: "text-xl font-semibold", children: labels.notFound ?? "Post not found" }), _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400", children: labels.notFoundDescription ?? "This post is not available." }), renderBackButton?.()] }));
+        return (_jsxs(Stack, { justify: "center", className: `min-h-screen ${__P.p8}`, align: "center", gap: "md", children: [_jsx(Heading, { level: 1, size: "xl", weight: "semibold", children: labels.notFound ?? "Post not found" }), _jsx(Text, { color: "muted", children: labels.notFoundDescription ?? "This post is not available." }), renderBackButton?.()] }));
     }
     const date = post.publishedAt
         ? new Date(post.publishedAt).toLocaleDateString(getDefaultLocale(), {
@@ -55,5 +55,5 @@ export function BlogPostView({ slug, initialData, labels = {}, renderImage, rend
     const coverImageUrl = getMediaUrl(post.coverImage);
     return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(Div, { role: "img", "aria-label": post.title, className: "h-full w-full bg-cover bg-center", 
                         // audit-inline-style-ok: dynamic image URL
-                        style: { backgroundImage: `url(${coverImageUrl})` } })), _jsx(Div, { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto px-4 py-12", children: [renderBlogPostHeader(post, date, labels), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-3 py-1 rounded-full bg-neutral-100 dark:bg-zinc-800 hover:bg-primary/10 text-zinc-600 dark:text-zinc-400 hover:text-primary text-xs font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { className: "mt-10 pt-8 border-t border-zinc-200 dark:border-zinc-700", children: renderBackButton() })] })] }));
+                        style: { backgroundImage: `url(${coverImageUrl})` } })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-0" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto", paddingY: "y-3xl", paddingX: "x-md", children: [renderBlogPostHeader(post, date, labels), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-3 py-1 rounded-full bg-neutral-100 dark:bg-zinc-800 hover:bg-primary/10 text-zinc-600 dark:text-zinc-400 hover:text-primary text-xs font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { border: "default", className: "mt-10 border-t", padding: "t-xl", children: renderBackButton() })] })] }));
 }

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

@@ -1,4 +1,5 @@
 import { DatabaseError } from "../../../errors";
+import { normalizeError } from "../../../errors/normalize";
 import { BaseRepository, prepareForFirestore, } from "../../../providers/db-firebase";
 import { BLOG_POST_FIELDS, BLOG_POSTS_COLLECTION, } from "../schemas";
 import { createBlogPostId } from "../schemas";
@@ -20,6 +21,7 @@ class BlogRepository extends BaseRepository {
             return this.mapDoc(doc);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to find blog post by slug: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -37,6 +39,7 @@ class BlogRepository extends BaseRepository {
             return { id, ...data };
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to create blog post: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -48,6 +51,7 @@ class BlogRepository extends BaseRepository {
             return doc;
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to update blog post: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -56,6 +60,7 @@ class BlogRepository extends BaseRepository {
             await this.db.collection(this.collection).doc(id).delete();
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to delete blog post: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -85,6 +90,7 @@ class BlogRepository extends BaseRepository {
                 .slice(0, limit);
         }
         catch (error) {
+            void normalizeError(error);
             throw new DatabaseError(`Failed to find related posts: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }