@mohasinac/appkit 2.3.0 → 2.3.1

package/dist/features/products/components/ProductFeatureBadges.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, Span } from "../../../ui";
+export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, condition, returnable, freeShipping, wishlistCount, categoryProductCount, categoryName, codAvailable, labels, formatCount, categoryBadgeClassName, }) {
+    const badges = [];
+    if (featured) {
+        badges.push({
+            key: "featured",
+            icon: _jsx(Span, { className: "text-xs", children: "\u2605" }),
+            label: labels.featured,
+            colorClass: "text-amber-700 dark:text-amber-300",
+            bgClass: "bg-amber-50 dark:bg-amber-900/30 border-amber-200 dark:border-amber-800",
+        });
+    }
+    if (fasterDelivery) {
+        badges.push({
+            key: "fasterDelivery",
+            icon: _jsx(Span, { className: "text-xs", children: "\u26A1" }),
+            label: labels.fasterDelivery,
+            colorClass: "text-orange-700 dark:text-orange-300",
+            bgClass: "bg-orange-50 dark:bg-orange-900/30 border-orange-200 dark:border-orange-800",
+        });
+    }
+    if (ratedSeller) {
+        badges.push({
+            key: "ratedSeller",
+            icon: _jsx(Span, { className: "text-xs", children: "\u2713" }),
+            label: labels.ratedSeller,
+            colorClass: "text-primary",
+            bgClass: "bg-primary/5 dark:bg-primary/10 border-primary/20",
+        });
+    }
+    if (condition) {
+        const conditionLabel = condition === "new"
+            ? labels.conditionNew
+            : condition === "used"
+                ? labels.conditionUsed
+                : condition === "broken"
+                    ? labels.conditionBroken
+                    : condition === "refurbished"
+                        ? labels.conditionRefurbished
+                        : labels.conditionNew;
+        badges.push({
+            key: "condition",
+            icon: _jsx(Span, { className: "text-xs", children: "\u25A3" }),
+            label: `${labels.condition}: ${conditionLabel}`,
+            colorClass: "text-primary",
+            bgClass: "bg-primary/5 dark:bg-primary/10 border-primary/20 dark:border-primary/30",
+        });
+    }
+    if (returnable && condition === "new") {
+        badges.push({
+            key: "returnable",
+            icon: _jsx(Span, { className: "text-xs", children: "\u21BA" }),
+            label: labels.returnable,
+            colorClass: "text-teal-700 dark:text-teal-300",
+            bgClass: "bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-800",
+        });
+    }
+    if (freeShipping) {
+        badges.push({
+            key: "freeShipping",
+            icon: _jsx(Span, { className: "text-xs", children: "\uD83D\uDE9A" }),
+            label: labels.freeShipping,
+            colorClass: "text-emerald-700 dark:text-emerald-300",
+            bgClass: "bg-emerald-50 dark:bg-emerald-900/30 border-emerald-200 dark:border-emerald-800",
+        });
+    }
+    if (codAvailable) {
+        badges.push({
+            key: "cod",
+            icon: _jsx(Span, { className: "text-xs", children: "\u20B9" }),
+            label: labels.codAvailable,
+            colorClass: "text-purple-700 dark:text-purple-300",
+            bgClass: "bg-purple-50 dark:bg-purple-900/30 border-purple-200 dark:border-purple-800",
+        });
+    }
+    if (wishlistCount && wishlistCount > 0) {
+        badges.push({
+            key: "wishlist",
+            icon: _jsx(Span, { className: "text-xs", children: "\u2665" }),
+            label: labels.wishlistCount(wishlistCount),
+            colorClass: "text-pink-700 dark:text-pink-300",
+            bgClass: "bg-pink-50 dark:bg-pink-900/30 border-pink-200 dark:border-pink-800",
+        });
+    }
+    if (categoryProductCount && categoryProductCount > 0 && categoryName) {
+        const formattedCount = formatCount
+            ? formatCount(categoryProductCount)
+            : String(categoryProductCount);
+        badges.push({
+            key: "categoryCount",
+            icon: _jsx(Span, { className: "text-xs", children: "\u25A6" }),
+            label: labels.categoryProductCount(formattedCount, categoryName),
+            colorClass: "text-zinc-700 dark:text-zinc-300",
+            bgClass: categoryBadgeClassName ??
+                "bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700",
+        });
+    }
+    if (badges.length === 0)
+        return null;
+    return (_jsx(Row, { wrap: true, gap: "sm", children: badges.map((badge) => (_jsxs(Span, { className: `inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium ${badge.bgClass} ${badge.colorClass}`, children: [_jsx(Span, { "aria-hidden": "true", children: badge.icon }), badge.label] }, badge.key))) }));
+}

package/dist/features/products/components/ProductFilters.d.ts

@@ -0,0 +1,90 @@
+import type { FacetOption } from "../../filters/FilterFacetSection";
+import type { UrlTable } from "../../filters/FilterPanel";
+export type { FacetOption, UrlTable };
+export type ProductFilterVariant = "admin" | "seller" | "public";
+export declare const PRODUCT_FILTER_KEYS: {
+    readonly admin: readonly ["category", "condition", "minPrice", "maxPrice", "brand", "seller", "tags", "status"];
+    readonly seller: readonly ["category", "condition", "minPrice", "maxPrice", "brand", "tags", "status"];
+    readonly public: readonly ["category", "condition", "minPrice", "maxPrice", "brand", "seller", "tags"];
+};
+export declare const PRODUCT_ADMIN_SORT_OPTIONS: readonly [{
+    readonly value: "-createdAt";
+    readonly label: "Newest First";
+}, {
+    readonly value: "createdAt";
+    readonly label: "Oldest First";
+}, {
+    readonly value: "-price";
+    readonly label: "Price: High to Low";
+}, {
+    readonly value: "price";
+    readonly label: "Price: Low to High";
+}, {
+    readonly value: "title";
+    readonly label: "Title A-Z";
+}, {
+    readonly value: "-title";
+    readonly label: "Title Z-A";
+}, {
+    readonly value: "-views";
+    readonly label: "Most Viewed";
+}];
+export declare const PRODUCT_SELLER_SORT_OPTIONS: readonly [{
+    readonly value: "-createdAt";
+    readonly label: "Newest First";
+}, {
+    readonly value: "createdAt";
+    readonly label: "Oldest First";
+}, {
+    readonly value: "-price";
+    readonly label: "Price: High to Low";
+}, {
+    readonly value: "price";
+    readonly label: "Price: Low to High";
+}, {
+    readonly value: "title";
+    readonly label: "Title A-Z";
+}];
+export declare const PRODUCT_PUBLIC_SORT_OPTIONS: readonly [{
+    readonly value: "-createdAt";
+    readonly label: "Newest First";
+}, {
+    readonly value: "-price";
+    readonly label: "Price: High to Low";
+}, {
+    readonly value: "price";
+    readonly label: "Price: Low to High";
+}, {
+    readonly value: "title";
+    readonly label: "Title A-Z";
+}, {
+    readonly value: "-views";
+    readonly label: "Most Viewed";
+}];
+export declare function getProductFilterKeys(variant: ProductFilterVariant): readonly string[];
+export declare function getProductSortOptions(variant: ProductFilterVariant): ReadonlyArray<{
+    value: string;
+    label: string;
+}>;
+export interface ProductFiltersProps {
+    table: UrlTable;
+    /** Pass category options loaded from the API */
+    categoryOptions?: FacetOption[];
+    /** Pass brand options loaded from the API */
+    brandOptions?: FacetOption[];
+    /** Pass seller name options */
+    sellerOptions?: FacetOption[];
+    /** Override defaults with dynamic tag options */
+    tagOptions?: FacetOption[];
+    /** Show status filter (admin / seller only) */
+    showStatus?: boolean;
+    /** Preferred variant contract (overrides showStatus defaults). */
+    variant?: ProductFilterVariant;
+    statusOptions?: FacetOption[];
+    /**
+     * Currency prefix shown in price range labels (e.g. "₹", "$", "€").
+     * Injected by the consumer app — never hard-coded in appkit.
+     */
+    currencyPrefix?: string;
+}
+export declare function ProductFilters({ table, categoryOptions, brandOptions, sellerOptions, tagOptions, showStatus, variant, statusOptions, currencyPrefix, }: ProductFiltersProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/products/components/ProductFilters.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
+import { Div } from "../../../ui";
+export const PRODUCT_FILTER_KEYS = {
+    admin: [
+        "category",
+        "condition",
+        "minPrice",
+        "maxPrice",
+        "brand",
+        "seller",
+        "tags",
+        "status",
+    ],
+    seller: [
+        "category",
+        "condition",
+        "minPrice",
+        "maxPrice",
+        "brand",
+        "tags",
+        "status",
+    ],
+    public: [
+        "category",
+        "condition",
+        "minPrice",
+        "maxPrice",
+        "brand",
+        "seller",
+        "tags",
+    ],
+};
+export const PRODUCT_ADMIN_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "createdAt", label: "Oldest First" },
+    { value: "-price", label: "Price: High to Low" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "title", label: "Title A-Z" },
+    { value: "-title", label: "Title Z-A" },
+    { value: "-views", label: "Most Viewed" },
+];
+export const PRODUCT_SELLER_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "createdAt", label: "Oldest First" },
+    { value: "-price", label: "Price: High to Low" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "title", label: "Title A-Z" },
+];
+export const PRODUCT_PUBLIC_SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest First" },
+    { value: "-price", label: "Price: High to Low" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "title", label: "Title A-Z" },
+    { value: "-views", label: "Most Viewed" },
+];
+export function getProductFilterKeys(variant) {
+    return PRODUCT_FILTER_KEYS[variant];
+}
+export function getProductSortOptions(variant) {
+    switch (variant) {
+        case "admin":
+            return PRODUCT_ADMIN_SORT_OPTIONS;
+        case "seller":
+            return PRODUCT_SELLER_SORT_OPTIONS;
+        case "public":
+            return PRODUCT_PUBLIC_SORT_OPTIONS;
+        default:
+            return PRODUCT_PUBLIC_SORT_OPTIONS;
+    }
+}
+export function ProductFilters({ table, categoryOptions = [], brandOptions = [], sellerOptions = [], tagOptions = [], showStatus = false, variant, statusOptions, currencyPrefix = "", }) {
+    const t = useTranslations("filters");
+    const conditionOptions = [
+        { value: "new", label: t("conditionNew") },
+        { value: "used", label: t("conditionUsed") },
+        { value: "refurbished", label: t("conditionRefurbished") },
+        { value: "broken", label: t("conditionBroken") },
+    ];
+    const defaultStatusOptions = [
+        { value: "published", label: t("statusPublished") },
+        { value: "draft", label: t("statusDraft") },
+        { value: "archived", label: t("statusArchived") },
+    ];
+    const selectedCategories = table.get("category")
+        ? table.get("category").split("|").filter(Boolean)
+        : [];
+    const selectedBrands = table.get("brand") ? [table.get("brand")] : [];
+    const selectedSellers = table.get("seller") ? [table.get("seller")] : [];
+    const selectedConditions = table.get("condition")
+        ? table.get("condition").split("|").filter(Boolean)
+        : [];
+    const selectedTags = table.get("tags")
+        ? table.get("tags").split("|").filter(Boolean)
+        : [];
+    const selectedStatuses = table.get("status")
+        ? table.get("status").split("|").filter(Boolean)
+        : [];
+    const resolvedVariant = variant ?? (showStatus ? "admin" : "public");
+    const shouldShowStatus = resolvedVariant !== "public" || showStatus;
+    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: categoryOptions.length > 6, defaultCollapsed: true })), _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set("condition", vals.join("|")), searchable: false, defaultCollapsed: true }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: true }), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, defaultCollapsed: true })), sellerOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("seller"), options: sellerOptions, selected: selectedSellers, onChange: (vals) => table.set("seller", vals[0] ?? ""), searchable: sellerOptions.length > 6, defaultCollapsed: true })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set("tags", vals.join("|")), searchable: tagOptions.length > 6, defaultCollapsed: true })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: true }))] }));
+}

package/dist/features/products/components/ProductForm.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import type { ProductItem, ProductStatus } from "../types";
+export declare const PRODUCT_STATUS_OPTIONS: {
+    value: ProductStatus;
+    label: string;
+}[];
+export type ProductFormValue = Partial<ProductItem>;
+interface CategorySelectorRenderArgs {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    disabled: boolean;
+}
+interface StoreAddressSelectorRenderArgs {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    disabled: boolean;
+}
+export interface ProductFormProps {
+    product: ProductFormValue;
+    onChange: (updated: ProductFormValue) => void;
+    isReadonly?: boolean;
+    /**
+     * Render a custom rich-text description editor.
+     * If omitted, a standard textarea field is used.
+     */
+    renderDescriptionEditor?: (args: {
+        label: string;
+        content: string;
+        onChange: (value: string) => void;
+        editable: boolean;
+    }) => React.ReactNode;
+    /** Render app-specific category selector. */
+    renderCategorySelector?: (args: CategorySelectorRenderArgs) => React.ReactNode;
+    /** Render app-specific pickup-address selector. */
+    renderStoreAddressSelector?: (args: StoreAddressSelectorRenderArgs) => React.ReactNode;
+    /**
+     * Called with staged URLs when form is cancelled/dismissed without save.
+     * Expected to clean up uploads in storage.
+     */
+    onMediaAbort?: (stagedUrls: string[]) => void | Promise<void>;
+    /** Currency prefix for numeric money inputs (e.g. "₹", "$", "€"). */
+    currencyPrefix?: string;
+}
+export declare function ProductForm({ product, onChange, isReadonly, renderDescriptionEditor, renderCategorySelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/products/components/ProductForm.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Alert, Checkbox, FormField, FormGroup, Heading, RichTextEditor, Stack, Text, } from "../../../ui";
+import { ImageUpload, MediaUploadField, MediaUploadList, } from "../../media";
+import { useMediaUpload } from "../../media";
+import { resolveDate } from "../../../utils/date.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+export const PRODUCT_STATUS_OPTIONS = [
+    { value: "draft", label: "Draft" },
+    { value: "published", label: "Published" },
+    { value: "out_of_stock", label: "Out of Stock" },
+    { value: "discontinued", label: "Discontinued" },
+    { value: "sold", label: "Sold" },
+];
+export function ProductForm({ product, onChange, isReadonly = false, renderDescriptionEditor, renderCategorySelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", }) {
+    const t = useTranslations("adminProducts");
+    const { upload } = useMediaUpload();
+    const galleryIndexRef = useRef(0);
+    const update = (partial) => {
+        onChange({ ...product, ...partial });
+    };
+    const galleryImages = (product.images ?? []).map((url) => ({
+        url,
+        type: "image",
+    }));
+    const handleGalleryUpload = async (file) => {
+        galleryIndexRef.current += 1;
+        return upload(file, "products", true, {
+            type: "product-image",
+            index: galleryIndexRef.current,
+            name: product.title || "product",
+            category: product.category || "uncategorized",
+            store: product.sellerName || "store",
+        });
+    };
+    const handleVideoUpload = async (file) => {
+        return upload(file, "products", true, {
+            type: "product-video",
+            index: 1,
+            name: product.title || "product",
+            category: product.category || "uncategorized",
+            store: product.sellerName || "store",
+        });
+    };
+    return (_jsxs(Stack, { children: [_jsx(FormField, { name: "title", label: t("formTitle"), type: "text", value: product.title || "", onChange: (value) => update({ title: value }), disabled: isReadonly, placeholder: "Enter product title" }), renderDescriptionEditor ? (_jsx(_Fragment, { children: renderDescriptionEditor({
+                    label: t("formDescription"),
+                    content: product.description || "",
+                    onChange: (value) => update({ description: value }),
+                    editable: !isReadonly,
+                }) })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: t("formDescription") }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(product.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, placeholder: "Enter product description" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rich text is supported for product descriptions." })] })), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsx(_Fragment, { children: renderCategorySelector({
+                            label: t("formCategory"),
+                            value: product.category || "",
+                            onChange: (value) => update({ category: value }),
+                            disabled: isReadonly,
+                        }) })) : (_jsx(FormField, { name: "category", label: t("formCategory"), type: "text", value: product.category || "", onChange: (value) => update({ category: value }), disabled: isReadonly })), _jsx(FormField, { name: "subcategory", label: t("formSubcategory"), type: "text", value: product.subcategory || "", onChange: (value) => update({ subcategory: value }), disabled: isReadonly, placeholder: "e.g. Smartphones" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "brand", label: t("formBrand"), type: "text", value: product.brand || "", onChange: (value) => update({ brand: value }), disabled: isReadonly, placeholder: "e.g. Apple" }), _jsx(FormField, { name: "status", label: t("formStatus"), type: "select", value: product.status || "draft", onChange: (value) => update({ status: value }), disabled: isReadonly, options: PRODUCT_STATUS_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: t("formPrice"), type: "number", value: String(product.price ?? ""), onChange: (value) => update({ price: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "stockQuantity", label: t("formStock"), type: "number", value: String(product.stockQuantity ?? ""), onChange: (value) => update({ stockQuantity: Number(value) }), disabled: isReadonly, placeholder: "0" })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: product.mainImage, onUpload: (file) => upload(file, "products", true, {
+                    type: "product-image",
+                    index: 1,
+                    name: product.title || "product",
+                    category: product.category || "uncategorized",
+                    store: product.sellerName || "store",
+                }), onChange: (url) => update({ mainImage: url }), label: t("formMainImage"), helperText: "Recommended: 800x800px (1:1)" })), isReadonly && product.mainImage && (_jsx(FormField, { name: "mainImage", label: t("formMainImage"), type: "text", value: product.mainImage, onChange: () => { }, disabled: true })), !isReadonly && (_jsx(MediaUploadList, { label: t("formGalleryImages"), value: galleryImages, onChange: (fields) => update({ images: fields.map((f) => f.url) }), onUpload: handleGalleryUpload, accept: "image/*", maxItems: 5, maxSizeMB: 10, helperText: t("formGalleryImagesHelper"), onAbort: onMediaAbort })), !isReadonly && (_jsx(MediaUploadField, { label: t("formVideo"), value: product.video?.url || "", onChange: (url) => update({
+                    video: url
+                        ? {
+                            url,
+                            thumbnailUrl: url,
+                        }
+                        : undefined,
+                }), onUpload: handleVideoUpload, accept: "video/*", maxSizeMB: 50, helperText: t("formVideoHelper"), onAbort: onMediaAbort })), _jsx(FormField, { name: "tags", label: t("formTags"), type: "text", value: (product.tags || []).join(", "), onChange: (value) => update({
+                    tags: value
+                        .split(",")
+                        .map((tag) => tag.trim())
+                        .filter(Boolean),
+                }), disabled: isReadonly, placeholder: t("formTagsPlaceholder") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Checkbox, { label: t("formFeatured"), checked: !!product.featured, onChange: (e) => update({ featured: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formIsPromoted"), checked: !!product.isPromoted, onChange: (e) => update({ isPromoted: e.target.checked }), disabled: isReadonly })] }), _jsx(Heading, { level: 4, className: "mt-4", children: t("sectionConditionShipping") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "condition", label: t("formCondition"), type: "select", value: product.condition || "new", onChange: (value) => update({
+                            condition: value,
+                        }), disabled: isReadonly, options: [
+                            { value: "new", label: t("formConditionNew") },
+                            { value: "used", label: t("formConditionUsed") },
+                            { value: "refurbished", label: t("formConditionRefurbished") },
+                            { value: "broken", label: t("formConditionBroken") },
+                        ] }), _jsx(FormField, { name: "shippingPaidBy", label: t("formShippingPaidBy"), type: "select", value: product.shippingPaidBy || "buyer", onChange: (value) => update({ shippingPaidBy: value }), disabled: isReadonly, options: [
+                            { value: "buyer", label: t("formShippingPaidByBuyer") },
+                            { value: "seller", label: t("formShippingPaidBySeller") },
+                        ] })] }), _jsx(Checkbox, { label: t("formInsurance"), checked: !!product.insurance, onChange: (e) => update({
+                    insurance: e.target.checked,
+                    insuranceCost: e.target.checked ? product.insuranceCost || 0 : undefined,
+                }), disabled: isReadonly }), product.insurance && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formInsuranceHelp"), children: t("formInsuranceHelp") }), _jsx(FormField, { name: "insuranceCost", label: t("formInsuranceCost"), type: "number", value: String(product.insuranceCost ?? ""), onChange: (value) => update({ insuranceCost: Number(value) }), disabled: isReadonly, placeholder: `${currencyPrefix}0` })] })), _jsx(Heading, { level: 4, className: "mt-4", children: t("sectionAuctionSettings") }), _jsx(Checkbox, { label: t("formIsAuction"), checked: !!product.isAuction, onChange: (e) => update({ isAuction: e.target.checked }), disabled: isReadonly }), product.isAuction && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: t("formStartingBid"), type: "number", value: String(product.startingBid ?? ""), onChange: (value) => update({ startingBid: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "auctionEndDate", label: t("formAuctionEndDate"), type: "datetime-local", value: (() => {
+                                    const d = resolveDate(product.auctionEndDate);
+                                    if (!d)
+                                        return "";
+                                    return d.toISOString().slice(0, 16);
+                                })(), onChange: (value) => update({ auctionEndDate: value }), disabled: isReadonly })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: t("formReservePrice"), type: "number", value: String(product.reservePrice ?? ""), onChange: (value) => update({ reservePrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formReservePriceHelp") }), _jsx(FormField, { name: "buyNowPrice", label: t("formBuyNowPrice"), type: "number", value: String(product.buyNowPrice ?? ""), onChange: (value) => update({ buyNowPrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formBuyNowPriceHelp") })] }), _jsx(FormField, { name: "minBidIncrement", label: t("formMinBidIncrement"), type: "number", value: String(product.minBidIncrement ?? ""), onChange: (value) => update({ minBidIncrement: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formMinBidIncrementHelp") }), _jsx(FormField, { name: "auctionShippingPaidBy", label: t("formAuctionShippingPaidBy"), type: "select", value: product.auctionShippingPaidBy || "winner", onChange: (value) => update({
+                            auctionShippingPaidBy: value,
+                        }), disabled: isReadonly, options: [
+                            { value: "winner", label: t("formAuctionShippingPaidByWinner") },
+                            { value: "seller", label: t("formAuctionShippingPaidBySeller") },
+                        ] }), _jsx(Text, { variant: "secondary", weight: "semibold", className: "mt-2", children: t("sectionAuctionAdvanced") }), _jsx(Checkbox, { label: t("formAutoExtendable"), checked: !!product.autoExtendable, onChange: (e) => update({ autoExtendable: e.target.checked }), disabled: isReadonly }), product.autoExtendable && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAutoExtendableHelp"), children: t("formAutoExtendableHelp") }), _jsx(FormField, { name: "auctionExtensionMinutes", label: t("formAuctionExtensionMinutes"), type: "number", value: String(product.auctionExtensionMinutes ?? 5), onChange: (value) => update({ auctionExtensionMinutes: Number(value) || 5 }), disabled: isReadonly, placeholder: "5", helpText: t("formAuctionExtensionMinutesHelp") })] }))] })), _jsx(Heading, { level: 4, className: "mt-4", children: t("sectionPreOrderSettings") }), _jsx(Checkbox, { label: t("formIsPreOrder"), checked: !!product.isPreOrder, onChange: (e) => update({ isPreOrder: e.target.checked }), disabled: isReadonly }), product.isPreOrder && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "preOrderDeliveryDate", label: t("formPreOrderDeliveryDate"), type: "datetime-local", value: (() => {
+                                    const d = resolveDate(product.preOrderDeliveryDate);
+                                    if (!d)
+                                        return "";
+                                    return d.toISOString().slice(0, 16);
+                                })(), onChange: (value) => update({ preOrderDeliveryDate: value }), disabled: isReadonly, helpText: t("formPreOrderDeliveryDateHelp") }), _jsx(FormField, { name: "preOrderDepositPercent", label: t("formPreOrderDepositPercent"), type: "number", value: String(product.preOrderDepositPercent ?? ""), onChange: (value) => update({ preOrderDepositPercent: Number(value) || undefined }), disabled: isReadonly, placeholder: "20", helpText: t("formPreOrderDepositPercentHelp") })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "preOrderMaxQuantity", label: t("formPreOrderMaxQuantity"), type: "number", value: String(product.preOrderMaxQuantity ?? ""), onChange: (value) => update({ preOrderMaxQuantity: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formPreOrderMaxQuantityHelp") }), _jsx(FormField, { name: "preOrderProductionStatus", label: t("formPreOrderProductionStatus"), type: "select", value: product.preOrderProductionStatus ?? "upcoming", onChange: (value) => update({
+                                    preOrderProductionStatus: value,
+                                }), disabled: isReadonly, options: [
+                                    { value: "upcoming", label: t("formPreOrderStatusUpcoming") },
+                                    {
+                                        value: "in_production",
+                                        label: t("formPreOrderStatusInProduction"),
+                                    },
+                                    {
+                                        value: "ready_to_ship",
+                                        label: t("formPreOrderStatusReadyToShip"),
+                                    },
+                                ] })] }), _jsx(Checkbox, { label: t("formPreOrderCancellable"), checked: !!product.preOrderCancellable, onChange: (e) => update({ preOrderCancellable: e.target.checked }), disabled: isReadonly })] })), renderStoreAddressSelector ? (_jsx(_Fragment, { children: renderStoreAddressSelector({
+                    label: t("formPickupAddress"),
+                    value: product.pickupAddressId || "",
+                    onChange: (value) => update({ pickupAddressId: value }),
+                    disabled: isReadonly,
+                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), product.sellerName && (_jsx(FormField, { name: "sellerName", label: t("formSeller"), type: "text", value: product.sellerName, onChange: () => { }, disabled: true }))] }));
+}

package/dist/features/products/components/ProductGalleryClient.d.ts

@@ -0,0 +1,5 @@
+export interface ProductGalleryClientProps {
+    images: string[];
+    productName?: string;
+}
+export declare function ProductGalleryClient({ images, productName }: ProductGalleryClientProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/products/components/ProductGalleryClient.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ImageLightbox } from "../../../ui/components/ImageLightbox";
+const PlaceholderSvg = () => (_jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }));
+export function ProductGalleryClient({ images, productName }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [lightboxIndex, setLightboxIndex] = useState(null);
+    const lightboxImages = images.map((src, i) => ({
+        src,
+        alt: productName ? `${productName} — image ${i + 1}` : `Product image ${i + 1}`,
+    }));
+    if (images.length === 0) {
+        return (_jsx("div", { className: "overflow-hidden rounded-xl border border-zinc-100 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900", children: _jsx("div", { className: "flex aspect-square items-center justify-center text-zinc-300 dark:text-zinc-700", children: _jsx(PlaceholderSvg, {}) }) }));
+    }
+    const mainImage = images[activeIndex] ?? images[0];
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "overflow-hidden rounded-xl border border-zinc-100 dark:border-zinc-800 cursor-zoom-in", onClick: () => setLightboxIndex(activeIndex), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ")
+                        setLightboxIndex(activeIndex);
+                }, "aria-label": `View ${productName ?? "product"} image in full screen`, children: _jsx("img", { src: mainImage, alt: productName ? `${productName} — image ${activeIndex + 1}` : `Product image ${activeIndex + 1}`, className: "aspect-square w-full object-cover transition-transform duration-300 hover:scale-105" }) }), images.length > 1 && (_jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: images.map((src, i) => (_jsx("button", { type: "button", onClick: () => setActiveIndex(i), className: `flex-shrink-0 h-16 w-16 overflow-hidden rounded-lg border-2 transition-all${i === activeIndex
+                        ? " border-primary-500"
+                        : " border-transparent opacity-60 hover:opacity-100"}`, "aria-label": `View image ${i + 1}`, "aria-current": i === activeIndex ? "true" : undefined, children: _jsx("img", { src: src, alt: "", className: "h-full w-full object-cover" }) }, i))) })), images.length > 1 && (_jsxs("p", { className: "text-center text-xs text-zinc-400 dark:text-zinc-500", children: [activeIndex + 1, " / ", images.length] })), _jsx(ImageLightbox, { images: lightboxImages, activeIndex: lightboxIndex, onClose: () => setLightboxIndex(null), onNavigate: (i) => setLightboxIndex(i) })] }));
+}

package/dist/features/products/components/ProductGrid.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import type { LayoutSlots } from "../../../contracts";
+import type { ViewMode } from "../../../ui";
+import type { ProductItem } from "../types";
+interface ProductCardProps<T extends ProductItem = ProductItem> {
+    product: T;
+    /** When provided, wraps the card in a Link for navigation. */
+    href?: string;
+    onClick?: (product: T) => void;
+    onAddToWishlist?: (productId: string) => void;
+    isWishlisted?: boolean;
+    className?: string;
+}
+export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, className, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface ProductCardContext<T extends ProductItem = ProductItem> {
+    onClick?: (product: T) => void;
+    onWishlistToggle?: (productId: string) => void;
+    isWishlisted: boolean;
+}
+interface ProductGridProps<T extends ProductItem = ProductItem> {
+    products: T[];
+    /**
+     * Custom card renderer. When provided, replaces the built-in `ProductCard`.
+     * Receives the item and a context object with click/wishlist handlers.
+     *
+     * @example
+     * <ProductGrid<ProductDocument>
+     *   products={docs}
+     *   renderCard={(p, ctx) => (
+     *     <MyRichCard product={p} onWishlist={ctx.onWishlistToggle} />
+     *   )}
+     * />
+     */
+    renderCard?: (product: T, ctx: ProductCardContext<T>) => React.ReactNode;
+    onProductClick?: (product: T) => void;
+    /** When provided, each card is wrapped in a Link using this href generator. */
+    getProductHref?: (product: T) => string;
+    onWishlistToggle?: (productId: string) => void;
+    wishlistedIds?: Set<string>;
+    /** Text shown when the list is empty and no `emptySlot` is provided. */
+    emptyLabel?: string;
+    /** Replaces the default empty-state paragraph. */
+    emptySlot?: React.ReactNode;
+    /** Rendered above the grid (e.g. filter bar, heading). */
+    headerSlot?: React.ReactNode;
+    /** Rendered below the grid (e.g. pagination). */
+    footerSlot?: React.ReactNode;
+    className?: string;
+    /**
+     * Render-prop slot overrides from a `FeatureExtension`.
+     * When both `slots` and the explicit `renderCard`/`headerSlot` props are
+     * provided, the explicit props take precedence.
+     *
+     * @example
+     * <ProductGrid products={products} {...extension.slots} />
+     * // or
+     * <ProductGrid products={products} slots={extension.slots} />
+     */
+    slots?: LayoutSlots<T>;
+    total?: number;
+    currentPage?: number;
+    totalPages?: number;
+    /**
+     * Layout mode for the product listing.
+     * - `"card"`  — fixed breakpoint columns (2→3→4→5) per Section 34 spec
+     * - `"fluid"` — CSS auto-fill columns, min 220 px each
+     * - `"list"`  — compact horizontal rows (thumbnail + title + price)
+     * @default "card"
+     */
+    view?: ViewMode;
+}
+export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};