@mohasinac/appkit 2.3.0 → 2.3.2

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

@@ -0,0 +1,136 @@
+/**
+ * feat-homepage — Next.js App Router API handlers (GET/POST /api/homepage-sections)
+ *
+ * Pure stub:
+ * ```ts
+ * // app/api/homepage-sections/route.ts
+ * export { GET, POST } from "@mohasinac/feat-homepage";
+ * ```
+ */
+import { NextResponse } from "next/server.js";
+import { z } from "zod";
+import { getProviders } from "../../../contracts";
+import { createRouteHandler } from "../../../next";
+/** Read `__session` cookie from request headers (HTTP cookie string). */
+function getSessionCookie(request) {
+    const cookieHeader = request.headers.get("cookie") ?? "";
+    const match = cookieHeader.match(/(?:^|;\s*)__session=([^;]+)/);
+    return match ? match[1] : null;
+}
+/** Returns the role from the session cookie, or null if invalid / no session provider. */
+async function getRoleFromSession(request) {
+    try {
+        const { session } = getProviders();
+        if (!session)
+            return null;
+        const cookie = getSessionCookie(request);
+        if (!cookie)
+            return null;
+        const payload = await session.verifySession(cookie);
+        return payload.role ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+// --- GET /api/homepage-sections -----------------------------------------------
+export async function GET(request) {
+    try {
+        const url = new URL(request.url);
+        const typeFilter = url.searchParams.get("type");
+        const includeDisabled = url.searchParams.get("includeDisabled") === "true";
+        // Admin auth guard for includeDisabled
+        if (includeDisabled) {
+            const role = await getRoleFromSession(request);
+            if (role !== "admin") {
+                return NextResponse.json({ success: false, error: "Admin access required" }, { status: 403 });
+            }
+        }
+        const filterParts = includeDisabled ? [] : ["enabled==true"];
+        if (typeFilter)
+            filterParts.push(`type==${typeFilter}`);
+        const { db } = getProviders();
+        if (!db) {
+            return NextResponse.json({ success: false, error: "Database provider not registered" }, { status: 503 });
+        }
+        const repo = db.getRepository("homepageSections");
+        const result = await repo.findAll({
+            filters: filterParts.join(",") || undefined,
+            sort: "order",
+            order: "asc",
+            perPage: 50,
+        });
+        const sections = result.data.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        const res = NextResponse.json({ success: true, data: sections });
+        res.headers.set("Cache-Control", includeDisabled
+            ? "private, no-cache"
+            : "public, max-age=300, s-maxage=600, stale-while-revalidate=120");
+        return res;
+    }
+    catch (error) {
+        console.error("[feat-homepage] GET /api/homepage-sections failed", error);
+        return NextResponse.json({ success: false, error: "Failed to fetch homepage sections" }, { status: 500 });
+    }
+}
+// ---------------------------------------------------------------------------
+// POST /api/homepage-sections — create a new section (admin only)
+// ---------------------------------------------------------------------------
+const homepageSectionCreateSchema = z
+    .object({
+    type: z.enum([
+        "hero",
+        "featured_categories",
+        "featured_products",
+        "banner",
+        "testimonials",
+        "promotions",
+        "blog_posts",
+        "sellers",
+        "custom",
+    ]),
+    title: z.string().optional(),
+    enabled: z.boolean().optional(),
+    order: z.number().int().min(0).optional(),
+    content: z
+        .object({
+        title: z.string().optional(),
+        subtitle: z.string().optional(),
+        ctaLabel: z.string().optional(),
+        ctaUrl: z.string().optional(),
+        imageUrl: z.string().url().optional(),
+        videoUrl: z.string().url().optional(),
+        itemIds: z.array(z.string()).optional(),
+        html: z.string().optional(),
+    })
+        .optional(),
+    mobile: z.object({}).passthrough().optional(),
+})
+    .passthrough();
+export const POST = createRouteHandler({
+    auth: true,
+    roles: ["admin"],
+    schema: homepageSectionCreateSchema,
+    handler: async ({ body }) => {
+        const { db } = getProviders();
+        if (!db) {
+            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+        }
+        const repo = db.getRepository("homepageSections");
+        // Auto-assign order: place at end of existing sections
+        const existing = await repo.findAll({
+            sort: "order",
+            order: "desc",
+            perPage: 1,
+        });
+        const maxOrder = existing.data[0]?.order ?? -1;
+        const now = new Date().toISOString();
+        const created = await repo.create({
+            ...body,
+            order: body.order ?? maxOrder + 1,
+            enabled: body.enabled ?? true,
+            createdAt: now,
+            updatedAt: now,
+        });
+        return NextResponse.json({ success: true, data: created }, { status: 201 });
+    },
+});

package/dist/features/homepage/api/sections/[id]/route.d.ts

@@ -0,0 +1,26 @@
+/**
+ * feat-homepage — GET/PATCH/DELETE /api/homepage/sections/[id]
+ *
+ * Homepage section retrieval, updates, and deletion.
+ *
+ * Consumer stub:
+ * ```ts
+ * export { sectionDetailGET as GET, sectionDetailPATCH as PATCH, sectionDetailDELETE as DELETE } from "@mohasinac/feat-homepage";
+ * ```
+ */
+import { NextResponse } from "next/server.js";
+export declare function GET(request: Request, { params }: {
+    params: {
+        id: string;
+    };
+}): Promise<NextResponse>;
+export declare function PATCH(request: Request, { params }: {
+    params: {
+        id: string;
+    };
+}): Promise<NextResponse>;
+export declare function DELETE(request: Request, { params }: {
+    params: {
+        id: string;
+    };
+}): Promise<NextResponse>;

package/dist/features/homepage/api/sections/[id]/route.js

@@ -0,0 +1,88 @@
+/**
+ * feat-homepage — GET/PATCH/DELETE /api/homepage/sections/[id]
+ *
+ * Homepage section retrieval, updates, and deletion.
+ *
+ * Consumer stub:
+ * ```ts
+ * export { sectionDetailGET as GET, sectionDetailPATCH as PATCH, sectionDetailDELETE as DELETE } from "@mohasinac/feat-homepage";
+ * ```
+ */
+import { NextResponse } from "next/server.js";
+import { getProviders } from "../../../../../contracts";
+export async function GET(request, { params }) {
+    try {
+        const { id } = await params;
+        if (!id) {
+            return NextResponse.json({ success: false, error: "Section ID required" }, { status: 400 });
+        }
+        const { db } = getProviders();
+        if (!db)
+            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+        const repo = db.getRepository("homepage_sections");
+        const section = await repo.findById(id);
+        if (!section) {
+            return NextResponse.json({ success: false, error: "Section not found" }, { status: 404 });
+        }
+        return NextResponse.json({
+            success: true,
+            data: section,
+        });
+    }
+    catch (error) {
+        return NextResponse.json({
+            success: false,
+            error: error instanceof Error ? error.message : "Internal server error",
+        }, { status: 500 });
+    }
+}
+export async function PATCH(request, { params }) {
+    try {
+        const { id } = await params;
+        if (!id) {
+            return NextResponse.json({ success: false, error: "Section ID required" }, { status: 400 });
+        }
+        const body = await request.json();
+        const { db } = getProviders();
+        if (!db)
+            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+        const repo = db.getRepository("homepage_sections");
+        const updated = await repo.update(id, body);
+        if (!updated) {
+            return NextResponse.json({ success: false, error: "Section not found" }, { status: 404 });
+        }
+        return NextResponse.json({
+            success: true,
+            data: updated,
+        });
+    }
+    catch (error) {
+        return NextResponse.json({
+            success: false,
+            error: error instanceof Error ? error.message : "Internal server error",
+        }, { status: 500 });
+    }
+}
+export async function DELETE(request, { params }) {
+    try {
+        const { id } = await params;
+        if (!id) {
+            return NextResponse.json({ success: false, error: "Section ID required" }, { status: 400 });
+        }
+        const { db } = getProviders();
+        if (!db)
+            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+        const repo = db.getRepository("homepage_sections");
+        await repo.delete(id);
+        return NextResponse.json({
+            success: true,
+            data: { id },
+        });
+    }
+    catch (error) {
+        return NextResponse.json({
+            success: false,
+            error: error instanceof Error ? error.message : "Internal server error",
+        }, { status: 500 });
+    }
+}

package/dist/features/homepage/api/sections/route.d.ts

@@ -0,0 +1,13 @@
+/**
+ * feat-homepage — GET/POST /api/homepage/sections
+ *
+ * Homepage sections list with Sieve filtering and creation.
+ *
+ * Consumer stub:
+ * ```ts
+ * export { sectionsListGET as GET, sectionsListPOST as POST } from "@mohasinac/feat-homepage";
+ * ```
+ */
+import { NextResponse } from "next/server.js";
+export declare function GET(request: Request): Promise<NextResponse>;
+export declare function POST(request: Request): Promise<NextResponse>;

package/dist/features/homepage/api/sections/route.js

@@ -0,0 +1,79 @@
+/**
+ * feat-homepage — GET/POST /api/homepage/sections
+ *
+ * Homepage sections list with Sieve filtering and creation.
+ *
+ * Consumer stub:
+ * ```ts
+ * export { sectionsListGET as GET, sectionsListPOST as POST } from "@mohasinac/feat-homepage";
+ * ```
+ */
+import { NextResponse } from "next/server.js";
+import { getProviders } from "../../../../contracts";
+function numParam(url, key, fallback) {
+    const v = url.searchParams.get(key);
+    const n = v !== null ? Number(v) : NaN;
+    return Number.isFinite(n) ? n : fallback;
+}
+export async function GET(request) {
+    try {
+        const url = new URL(request.url);
+        const page = Math.max(1, numParam(url, "page", 1));
+        const pageSize = Math.min(100, Math.max(1, numParam(url, "pageSize", 20)));
+        const filters = url.searchParams.get("filters") ?? undefined;
+        const sort = url.searchParams.get("sorts") ??
+            url.searchParams.get("sort") ??
+            "-createdAt";
+        const { db } = getProviders();
+        if (!db)
+            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+        const repo = db.getRepository("homepage_sections");
+        const result = await repo.findAll({
+            filters,
+            sort,
+            page,
+            perPage: pageSize,
+        });
+        const totalPages = Math.max(1, Math.ceil(result.total / pageSize));
+        return NextResponse.json({
+            success: true,
+            data: {
+                items: result.data,
+                total: result.total,
+                page,
+                pageSize,
+                totalPages,
+                hasMore: page < totalPages,
+            },
+        });
+    }
+    catch (error) {
+        return NextResponse.json({
+            success: false,
+            error: error instanceof Error ? error.message : "Internal server error",
+        }, { status: 500 });
+    }
+}
+export async function POST(request) {
+    try {
+        const body = await request.json();
+        const { db } = getProviders();
+        if (!db)
+            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+        const repo = db.getRepository("homepage_sections");
+        const created = await repo.create({
+            ...body,
+            createdAt: new Date(),
+        });
+        return NextResponse.json({
+            success: true,
+            data: created,
+        }, { status: 201 });
+    }
+    catch (error) {
+        return NextResponse.json({
+            success: false,
+            error: error instanceof Error ? error.message : "Internal server error",
+        }, { status: 500 });
+    }
+}

package/dist/features/homepage/components/AdSlot.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { AdSlotId } from "../ad-registry";
+export interface AdSlotProps {
+    /** The registered slot id to render. */
+    id: AdSlotId;
+    /**
+     * Manual ad content — rendered only when the slot's provider is `"manual"`.
+     * Pass any ReactNode: an image, a promotional banner, etc.
+     */
+    manualContent?: React.ReactNode;
+    className?: string;
+}
+/**
+ * `<AdSlot>` renders an ad based on the registered configuration for `id`.
+ *
+ * Renders nothing (zero height) when:
+ * - The slot id is not registered
+ * - `enabled: false` in config
+ * - `requiresConsent: true` and consent has not been granted
+ *
+ * When `reservedHeight` is set in the config, the container always reserves
+ * that height to prevent CLS — even before the ad loads.
+ *
+ * @example
+ * <AdSlot id="homepage-hero-banner" />
+ * <AdSlot id="listing-between-rows" manualContent={<PromoBanner />} />
+ */
+export declare function AdSlot({ id, manualContent, className }: AdSlotProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/AdSlot.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { getAdSlot, isAdSlotRenderable } from "../ad-registry";
+// ---------------------------------------------------------------------------
+// Sub-renderers
+// ---------------------------------------------------------------------------
+function AdsenseAd({ config }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (window.adsbygoogle = window.adsbygoogle || []).push({});
+        }
+        catch {
+            // AdSense not loaded yet — no-op
+        }
+    }, []);
+    return (_jsx("div", { ref: ref, "data-section": "adslot-div-296", children: _jsx("ins", { className: "adsbygoogle", style: { display: "block" }, "data-ad-client": config.adsenseClient ?? "", "data-ad-slot": config.adsenseSlot ?? "", "data-ad-format": config.adsenseFormat ?? "auto", "data-full-width-responsive": "true" }) }));
+}
+function ThirdPartyAd({ config }) {
+    if (config.thirdPartyUrl) {
+        return (_jsx("iframe", { src: config.thirdPartyUrl, width: config.thirdPartyWidth ?? "100%", height: config.thirdPartyHeight ?? "90", scrolling: "no", frameBorder: "0", title: "Advertisement", style: { border: 0, overflow: "hidden" }, loading: "lazy" }));
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// Primary component
+// ---------------------------------------------------------------------------
+/**
+ * `<AdSlot>` renders an ad based on the registered configuration for `id`.
+ *
+ * Renders nothing (zero height) when:
+ * - The slot id is not registered
+ * - `enabled: false` in config
+ * - `requiresConsent: true` and consent has not been granted
+ *
+ * When `reservedHeight` is set in the config, the container always reserves
+ * that height to prevent CLS — even before the ad loads.
+ *
+ * @example
+ * <AdSlot id="homepage-hero-banner" />
+ * <AdSlot id="listing-between-rows" manualContent={<PromoBanner />} />
+ */
+export function AdSlot({ id, manualContent, className = "" }) {
+    const [hydrated, setHydrated] = useState(false);
+    useEffect(() => {
+        setHydrated(true);
+    }, []);
+    if (!hydrated) {
+        return null;
+    }
+    const config = getAdSlot(id);
+    const renderable = isAdSlotRenderable(id);
+    const reservedStyle = config?.reservedHeight
+        ? { minHeight: config.reservedHeight }
+        : undefined;
+    if (!config || !renderable) {
+        // Preserve reserved space even when ad is not shown (avoids layout jumps
+        // when ads are re-enabled after consent grant in the same session).
+        if (config?.reservedHeight && config?.enabled !== false) {
+            return (_jsx("div", { className: className, style: reservedStyle, "aria-hidden": "true", "data-ad-slot-id": id, "data-ad-slot-state": "awaiting-consent" }));
+        }
+        return null;
+    }
+    const content = renderProvider(config.provider, config, manualContent);
+    return (_jsx("div", { className: className, style: reservedStyle, "data-ad-slot-id": id, "aria-label": "Advertisement", children: content }));
+}
+// ---------------------------------------------------------------------------
+// Provider dispatch
+// ---------------------------------------------------------------------------
+function renderProvider(provider, config, manualContent) {
+    switch (provider) {
+        case "manual":
+            return manualContent ?? null;
+        case "adsense":
+            return _jsx(AdsenseAd, { config: config });
+        case "thirdParty":
+            return _jsx(ThirdPartyAd, { config: config });
+        default:
+            return null;
+    }
+}

package/dist/features/homepage/components/AdvertisementBanner.d.ts

@@ -0,0 +1,13 @@
+export interface AdvertisementBannerProps {
+    title: string;
+    subtitle?: string;
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+    backgroundImage?: string;
+    backgroundColor?: string;
+    tagLabel?: string;
+    isLoading?: boolean;
+    compact?: boolean;
+    className?: string;
+}
+export declare function AdvertisementBanner({ title, subtitle, ctaLabel, onCtaClick, backgroundImage, backgroundColor, tagLabel, isLoading, compact, className, }: AdvertisementBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/AdvertisementBanner.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Button, Heading, Row, Section, Span, Text } from "../../../ui";
+import { MediaImage } from "../../media/MediaImage";
+import { ArrowRight, Sparkles } from "lucide-react";
+// --- Component ---------------------------------------------------------------
+export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", onCtaClick, backgroundImage, backgroundColor, tagLabel, isLoading = false, compact = false, className = "", }) {
+    const wrapClass = "bg-gradient-to-br from-amber-50/40 to-orange-50/20 dark:from-amber-950/10 dark:to-orange-950/5";
+    if (isLoading) {
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-297", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
+    }
+    // -- Split layout: when a backgroundImage is provided --
+    if (backgroundImage) {
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-298", children: _jsx("div", { className: "relative overflow-hidden rounded-2xl bg-zinc-900 shadow-xl", "data-section": "advertisementbanner-div-299", children: _jsxs("div", { className: `${THEME_CONSTANTS.grid.cols2Md} min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-300", children: [_jsxs("div", { className: `relative ${THEME_CONSTANTS.card.aspectBanner} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-301", children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx("div", { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs("div", { className: "relative flex flex-col justify-center px-8 py-10 md:px-12 md:py-14", "data-section": "advertisementbanner-div-302", children: [_jsx("div", { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", "data-section": "advertisementbanner-div-303", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
+    }
+    // -- Full-width gradient layout --
+    return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-304", children: _jsxs("div", { className: [
+                    "relative overflow-hidden rounded-2xl flex items-center",
+                    compact
+                        ? "h-[clamp(112px,16vh,160px)]"
+                        : "min-h-[clamp(240px,34vh,360px)]",
+                ].join(" "), style: backgroundColor ? { backgroundColor } : undefined, "data-section": "advertisementbanner-div-305", children: [!backgroundColor && (_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600", "aria-hidden": true })), _jsxs("div", { className: "absolute inset-0 overflow-hidden", "aria-hidden": true, "data-section": "advertisementbanner-div-306", children: [_jsx("div", { className: "absolute -top-16 -left-16 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse" }), _jsx("div", { className: "absolute -bottom-16 right-0 w-80 h-80 rounded-full bg-cobalt/20 blur-3xl animate-pulse" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full px-6 py-4 gap-4 flex-wrap", children: [_jsxs("div", { className: "inline-flex items-center gap-2", "data-section": "advertisementbanner-div-307", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { className: "text-white font-semibold text-sm", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: "bg-white text-indigo-700 hover:bg-zinc-50 font-semibold gap-1.5 flex-shrink-0", children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs("div", { className: "relative z-10 w-full max-w-4xl mx-auto px-6 py-12 md:py-16 text-center", "data-section": "advertisementbanner-div-308", children: [tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 bg-white/15 text-white/90 text-xs font-semibold uppercase tracking-widest px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm shadow-sm", "data-section": "advertisementbanner-div-309", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-5xl lg:text-6xl font-extrabold text-white mb-4 drop-shadow-lg leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white text-base md:text-xl mb-10 max-w-2xl mx-auto", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "bg-white text-indigo-700 hover:bg-zinc-50 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
+}

package/dist/features/homepage/components/AnnouncementBar.d.ts

@@ -0,0 +1,5 @@
+export interface AnnouncementBarProps {
+    message: string;
+    className?: string;
+}
+export declare function AnnouncementBar({ message, className }: AnnouncementBarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/AnnouncementBar.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { X } from "lucide-react";
+export function AnnouncementBar({ message, className = "" }) {
+    const [dismissed, setDismissed] = useState(false);
+    if (dismissed)
+        return null;
+    return (_jsx("div", { className: `relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-primary-700 ${className}`, role: "banner", "data-section": "announcementbar-div-310", children: _jsx("div", { className: "container mx-auto max-w-[1920px] px-4 sm:px-6 lg:px-8", "data-section": "announcementbar-div-311", children: _jsxs("div", { className: "relative flex items-center justify-center py-2 text-center text-sm font-medium text-white", "data-section": "announcementbar-div-312", children: [_jsx("span", { children: message }), _jsx("button", { type: "button", onClick: () => setDismissed(true), className: "absolute right-0 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white", "aria-label": "Dismiss announcement", children: _jsx(X, { className: "h-4 w-4" }) })] }) }) }));
+}

package/dist/features/homepage/components/BeforeAfterCard.d.ts

@@ -0,0 +1,9 @@
+import type { BeforeAfterItem } from "../types";
+export interface BeforeAfterCardProps {
+    item: BeforeAfterItem;
+    /** Label shown on the left (before) side. Default: "Before". */
+    beforeLabel?: string;
+    /** Label shown on the right (after) side. Default: "After". */
+    afterLabel?: string;
+}
+export declare function BeforeAfterCard({ item, beforeLabel, afterLabel, }: BeforeAfterCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/BeforeAfterCard.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import Image from "next/image";
+import { Div, Span, Text } from "../../../ui";
+export function BeforeAfterCard({ item, beforeLabel = "Before", afterLabel = "After", }) {
+    const containerRef = useRef(null);
+    const [position, setPosition] = useState(50);
+    const [dragging, setDragging] = useState(false);
+    const updatePosition = useCallback((clientX) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const pct = Math.max(0, Math.min(100, (x / rect.width) * 100));
+        setPosition(pct);
+    }, []);
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const onMove = (e) => {
+            e.preventDefault();
+            const clientX = "touches" in e
+                ? e.touches[0].clientX
+                : e.clientX;
+            updatePosition(clientX);
+        };
+        const onUp = () => setDragging(false);
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+        window.addEventListener("touchmove", onMove, { passive: false });
+        window.addEventListener("touchend", onUp);
+        return () => {
+            window.removeEventListener("mousemove", onMove);
+            window.removeEventListener("mouseup", onUp);
+            window.removeEventListener("touchmove", onMove);
+            window.removeEventListener("touchend", onUp);
+        };
+    }, [dragging, updatePosition]);
+    return (_jsxs(Div, { className: "border-border overflow-hidden rounded-2xl border bg-card shadow-sm", children: [_jsxs(Div, { ref: containerRef, className: "relative aspect-[4/3] cursor-col-resize overflow-hidden select-none", onMouseDown: (e) => {
+                    setDragging(true);
+                    updatePosition(e.clientX);
+                }, onTouchStart: (e) => {
+                    setDragging(true);
+                    updatePosition(e.touches[0].clientX);
+                }, role: "slider", "aria-label": `Before and after comparison: ${item.caption}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(position), tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === "ArrowLeft")
+                        setPosition((p) => Math.max(0, p - 2));
+                    if (e.key === "ArrowRight")
+                        setPosition((p) => Math.min(100, p + 2));
+                }, children: [_jsx(Image, { src: item.afterImage, alt: afterLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }), _jsx(Div, { className: "absolute inset-0 overflow-hidden", style: { width: `${position}%` }, children: _jsx(Image, { src: item.beforeImage, alt: beforeLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }) }), _jsx(Div, { className: "absolute top-0 bottom-0 z-10 w-0.5 bg-card shadow-md", style: { left: `${position}%` }, children: _jsx(Div, { className: "absolute top-1/2 left-1/2 flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-card shadow-lg", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8L1 5M4 8L1 11M4 8H12M12 8L15 5M12 8L15 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), _jsx(Span, { className: "absolute top-3 left-3 z-10 rounded-full bg-black/50 px-2.5 py-0.5 text-xs font-medium text-white", children: beforeLabel }), _jsx(Span, { className: "absolute top-3 right-3 z-10 rounded-full bg-black/50 px-2.5 py-0.5 text-xs font-medium text-white", children: afterLabel })] }), _jsx(Div, { className: "p-4", children: _jsx(Text, { className: "text-foreground text-sm font-medium", children: item.caption }) })] }));
+}

package/dist/features/homepage/components/BlogArticlesSection.d.ts

@@ -0,0 +1,8 @@
+export interface BlogArticlesSectionProps {
+    title?: string;
+    description?: string;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    className?: string;
+}
+export declare function BlogArticlesSection({ title, description, viewMoreHref, viewMoreLabel, className, }: BlogArticlesSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/BlogArticlesSection.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useBlogArticles } from "../hooks/useBlogArticles";
+import { BlogFeaturedCard } from "../../blog/components/BlogFeaturedCard";
+import { ROUTES } from "../../../next";
+export function BlogArticlesSection({ title = "From Our Blog", description, viewMoreHref, viewMoreLabel = "View all posts →", className = "", }) {
+    const { data, isLoading } = useBlogArticles();
+    const items = data?.posts ?? [];
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "From Our Blog", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
+}

package/dist/features/homepage/components/BrandsSection.d.ts

@@ -0,0 +1,9 @@
+export interface BrandsSectionProps {
+    title?: string;
+    subtitle?: string;
+    limit?: number;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    className?: string;
+}
+export declare function BrandsSection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, }: BrandsSectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/BrandsSection.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, HorizontalScroller, Section, Text } from "../../../ui";
+import { ROUTES } from "../../../next";
+import { useTopBrands } from "../hooks/useTopBrands";
+function BrandLogo({ brand }) {
+    const iconSrc = brand.display?.icon;
+    const coverImage = brand.display?.coverImage;
+    const initial = brand.name[0]?.toUpperCase() ?? "?";
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900", children: [iconSrc || coverImage ? (_jsx("img", { src: iconSrc ?? coverImage, alt: brand.name, className: "h-10 w-10 rounded object-contain" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
+}
+export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", }) {
+    const { themed } = THEME_CONSTANTS;
+    const { data: brands = [], isLoading } = useTopBrands(limit);
+    if (!isLoading && brands.length === 0)
+        return null;
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:underline", children: viewMoreLabel }))] }), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-24 w-28 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false }))] }) }));
+}