@mohasinac/appkit 2.7.27 → 2.7.31

package/dist/features/layout/BottomActions.js

@@ -37,6 +37,47 @@ const BOTTOM_NAV_BG = "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-
 const Z_BOTTOM_ACTIONS = "z-40";
 const BOTTOM_NAV_HEIGHT = "h-14";
 const FLEX_CENTER = "flex items-center justify-center";
+// ─── Sub-components ───────────────────────────────────────────────────────────
+function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect, }) {
+    return (_jsx("div", { role: "listbox", "aria-label": "Bulk actions", className: [
+            "absolute bottom-full left-0 right-0 overflow-hidden",
+            BOTTOM_NAV_BG,
+            "border-t border-zinc-200/80 dark:border-slate-700/80",
+            "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
+            "transition-[max-height,opacity] duration-200 ease-out",
+            pickerOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0 pointer-events-none",
+        ]
+            .filter(Boolean)
+            .join(" "), children: bulkActions.map((action, i) => {
+            const isSelected = action.id === selectedActionId;
+            return (_jsxs(Button, { role: "option", "aria-selected": isSelected, type: "button", variant: "ghost", disabled: action.disabled || action.loading, onClick: () => onSelect(action.id), className: [
+                    "w-full flex items-center gap-3 px-5 py-3.5 text-left text-sm font-medium transition-colors rounded-none",
+                    i > 0 ? "border-t border-zinc-100/80 dark:border-slate-800/80" : "",
+                    isSelected ? "bg-zinc-50 dark:bg-slate-800/60" : "",
+                    action.variant === "danger"
+                        ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30"
+                        : "text-zinc-800 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-slate-800/60",
+                    action.disabled || action.loading ? "opacity-50 cursor-not-allowed" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" "), children: [action.icon && (_jsx(Span, { className: `flex-shrink-0 w-5 h-5 ${FLEX_CENTER}`, "aria-hidden": "true", children: action.icon })), _jsx(Span, { className: "flex-1 truncate", children: action.label }), isSelected && (_jsx(Check, { className: "w-4 h-4 flex-shrink-0 text-primary-600 dark:text-primary-400", "aria-hidden": "true" }))] }, action.id));
+        }) }));
+}
+function PageActionsRow({ pageActions, dispatchAction, }) {
+    return (_jsx(_Fragment, { children: pageActions.map((action) => {
+            const isIconOnly = !action.label;
+            const growClass = isIconOnly || action.grow === false
+                ? "flex-shrink-0 w-11"
+                : "flex-1 min-w-0";
+            return (_jsxs(Button, { type: "button", variant: action.variant ?? "primary", size: "sm", isLoading: action.loading, disabled: action.disabled, onClick: () => dispatchAction(action.id), className: [
+                    "h-10 relative",
+                    growClass,
+                    isIconOnly ? "px-0 justify-center" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" "), children: [action.icon && (_jsx(Span, { className: ["flex-shrink-0", action.label ? "mr-1.5" : ""].join(" "), "aria-hidden": "true", children: action.icon })), action.label && _jsx(Span, { className: "truncate leading-none", children: action.label }), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] bg-red-500 text-white text-[10px] font-bold rounded-full ${FLEX_CENTER} px-1 pointer-events-none select-none`, "aria-hidden": "true", children: action.badge }))] }, action.id));
+        }) }));
+}
 export default function BottomActions() {
     const { state, actionCallbacksRef, bulkCallbacksRef, bulkClearRef } = useBottomActionsContext();
     const [pickerOpen, setPickerOpen] = useState(false);
@@ -85,38 +126,7 @@ export default function BottomActions() {
             isVisible ? "translate-y-0" : "translate-y-full pointer-events-none",
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx("div", { role: "listbox", "aria-label": "Bulk actions", className: [
-                    "absolute bottom-full left-0 right-0 overflow-hidden",
-                    BOTTOM_NAV_BG,
-                    "border-t border-zinc-200/80 dark:border-slate-700/80",
-                    "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
-                    "transition-[max-height,opacity] duration-200 ease-out",
-                    pickerOpen
-                        ? "max-h-64 opacity-100"
-                        : "max-h-0 opacity-0 pointer-events-none",
-                ]
-                    .filter(Boolean)
-                    .join(" "), "data-section": "bottomactions-div-402", children: bulkActions.map((action, i) => {
-                    const isSelected = action.id === selectedActionId;
-                    return (_jsxs(Button, { role: "option", "aria-selected": isSelected, type: "button", variant: "ghost", disabled: action.disabled || action.loading, onClick: () => {
-                            setSelectedActionId(action.id);
-                            setPickerOpen(false);
-                        }, className: [
-                            "w-full flex items-center gap-3 px-5 py-3.5 text-left text-sm font-medium transition-colors rounded-none",
-                            i > 0
-                                ? "border-t border-zinc-100/80 dark:border-slate-800/80"
-                                : "",
-                            isSelected ? "bg-zinc-50 dark:bg-slate-800/60" : "",
-                            action.variant === "danger"
-                                ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30"
-                                : "text-zinc-800 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-slate-800/60",
-                            action.disabled || action.loading
-                                ? "opacity-50 cursor-not-allowed"
-                                : "",
-                        ]
-                            .filter(Boolean)
-                            .join(" "), children: [action.icon && (_jsx(Span, { className: `flex-shrink-0 w-5 h-5 ${FLEX_CENTER}`, "aria-hidden": "true", children: action.icon })), _jsx(Span, { className: "flex-1 truncate", children: action.label }), isSelected && (_jsx(Check, { className: "w-4 h-4 flex-shrink-0 text-primary-600 dark:text-primary-400", "aria-hidden": "true" }))] }, action.id));
-                }) })), isBulkMode && (_jsx("div", { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-secondary-400 to-primary-600 dark:from-primary-600 dark:via-primary-400 dark:to-primary-600" })), infoLabel && !isBulkMode && (_jsx("div", { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", "data-section": "bottomactions-div-403", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { className: "text-xs font-semibold tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), isBulkMode && (_jsx("div", { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-secondary-400 to-primary-600 dark:from-primary-600 dark:via-primary-400 dark:to-primary-600" })), infoLabel && !isBulkMode && (_jsx("div", { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", "data-section": "bottomactions-div-403", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { className: "text-xs font-semibold tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                 "flex-1 min-w-0 h-10 flex items-center gap-2 px-3 rounded-lg border text-sm font-medium transition-colors",
@@ -131,20 +141,5 @@ export default function BottomActions() {
                                 selectedAction?.disabled ||
                                 selectedAction?.loading, onClick: handleApply, className: "h-10 flex-shrink-0", children: _jsx(Span, { className: "leading-none", children: "Apply" }) }))] })) : (
                 /* Page mode — action buttons inline ------------------------------ */
-                pageActions.map((action) => {
-                    const isIconOnly = !action.label;
-                    const growClass = isIconOnly || action.grow === false
-                        ? "flex-shrink-0 w-11"
-                        : "flex-1 min-w-0";
-                    return (_jsxs(Button, { type: "button", variant: action.variant ?? "primary", size: "sm", isLoading: action.loading, disabled: action.disabled, onClick: () => dispatchAction(action.id), className: [
-                            "h-10 relative",
-                            growClass,
-                            isIconOnly ? "px-0 justify-center" : "",
-                        ]
-                            .filter(Boolean)
-                            .join(" "), children: [action.icon && (_jsx(Span, { className: [
-                                    "flex-shrink-0",
-                                    action.label ? "mr-1.5" : "",
-                                ].join(" "), "aria-hidden": "true", children: action.icon })), action.label && (_jsx(Span, { className: "truncate leading-none", children: action.label })), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] bg-red-500 text-white text-[10px] font-bold rounded-full ${FLEX_CENTER} px-1 pointer-events-none select-none`, "aria-hidden": "true", children: action.badge }))] }, action.id));
-                })) })] }));
+                _jsx(PageActionsRow, { pageActions: pageActions, dispatchAction: dispatchAction })) })] }));
 }

package/dist/features/live/components/LiveItemFilters.d.ts

@@ -0,0 +1,12 @@
+import type { FacetOption } from "../../filters/FilterFacetSection";
+import type { UrlTable } from "../../filters/FilterPanel";
+import type { AsyncFacetSectionProps } from "../../filters/AsyncFacetSection";
+type LoadOptionsFn = AsyncFacetSectionProps["loadOptions"];
+export interface LiveItemFiltersProps {
+    table: UrlTable;
+    categoryOptions?: FacetOption[];
+    loadCategoryOptions?: LoadOptionsFn;
+    currencyPrefix?: string;
+}
+export declare function LiveItemFilters({ table, categoryOptions, loadCategoryOptions, currencyPrefix, }: LiveItemFiltersProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/live/components/LiveItemFilters.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { AsyncFacetSection } from "../../filters/AsyncFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
+import { Div } from "../../../ui";
+const SEX_OPTIONS = [
+    { value: "male", label: "Male" },
+    { value: "female", label: "Female" },
+    { value: "unknown", label: "Unknown" },
+];
+const TRANSPORT_OPTIONS = [
+    { value: "in-person", label: "In-Person only" },
+    { value: "courier", label: "Live-animal courier" },
+    { value: "specialist", label: "Specialist transport" },
+];
+export function LiveItemFilters({ table, categoryOptions = [], loadCategoryOptions, currencyPrefix = "₹", }) {
+    const selectedCategories = table.get("category")
+        ? table.get("category").split("|").filter(Boolean)
+        : [];
+    const selectedSex = table.get("liveSex") ? [table.get("liveSex")] : [];
+    const selectedTransport = table.get("liveTransportMethod") ? [table.get("liveTransportMethod")] : [];
+    return (_jsxs(Div, { children: [loadCategoryOptions ? (_jsx(AsyncFacetSection, { title: "Category", loadOptions: loadCategoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), defaultCollapsed: false })) : categoryOptions.length > 0 ? (_jsx(FilterFacetSection, { title: "Category", options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })) : null, _jsxs("div", { className: "border-t border-[var(--appkit-color-border)] pt-4 mt-4", children: [_jsx("label", { className: "block text-sm font-medium text-[var(--appkit-color-text)] mb-2", children: "Species / Animal" }), _jsx("input", { type: "text", value: table.get("species") || "", onChange: (e) => table.set("species", e.target.value), placeholder: "e.g. Axolotl, Parrot", className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-[var(--appkit-color-text-faint)] focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]" })] }), _jsxs("div", { className: "border-t border-[var(--appkit-color-border)] pt-4 mt-4", children: [_jsx("label", { className: "block text-sm font-medium text-[var(--appkit-color-text)] mb-2", children: "Jurisdiction (state/UT)" }), _jsx("input", { type: "text", value: table.get("jurisdiction") || "", onChange: (e) => table.set("jurisdiction", e.target.value), placeholder: "e.g. Maharashtra", className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-[var(--appkit-color-text-faint)] focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]" })] }), _jsx(FilterFacetSection, { title: "Sex", options: SEX_OPTIONS, selected: selectedSex, onChange: (vals) => table.set("liveSex", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(FilterFacetSection, { title: "Transport Method", options: TRANSPORT_OPTIONS, selected: selectedTransport, onChange: (vals) => table.set("liveTransportMethod", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(RangeFilter, { title: "Price", 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: 200000, step: 100, minPlaceholder: "Min price", maxPlaceholder: "Max price", defaultCollapsed: false })] }));
+}

package/dist/features/live/components/LiveItemsIndexListing.d.ts

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

package/dist/features/live/components/LiveItemsIndexListing.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useProducts } from "../../products/hooks/useProducts";
+import { BulkActionBar, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Text, useToast } from "../../../ui";
+import { usePendingTable } from "../../../react/hooks/usePendingTable";
+import { useAuthGate } from "../../../react/hooks/useAuthGate";
+import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
+import { pushWishlistOp } from "../../cart/utils/pending-ops";
+import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
+import { ROUTES } from "../../../next";
+import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
+import { LiveItemFilters } from "./LiveItemFilters";
+import { ACTION_ID } from "../../products/constants/action-defs";
+const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
+const SORT_OPTIONS = [
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT), label: "Newest First" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE, "ASC"), label: "Price: Low to High" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE), label: "Price: High to Low" },
+];
+const FILTER_KEYS = [
+    TABLE_KEYS.CATEGORY,
+    TABLE_KEYS.SPECIES,
+    TABLE_KEYS.JURISDICTION,
+    TABLE_KEYS.MIN_PRICE,
+    TABLE_KEYS.MAX_PRICE,
+];
+export function LiveItemsIndexListing({ initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
+    const { showToast } = useToast();
+    const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
+    const localWishlist = useGuestWishlist();
+    const { categories } = useCategoryTree();
+    const categoryOptions = categoriesToFacetOptions(categories);
+    const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "live").map((i) => i.itemId));
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const openFilters = useCallback(() => {
+        onFilterReset();
+        setFilterOpen(true);
+    }, [onFilterReset]);
+    const applyFilters = useCallback(() => {
+        onFilterApply();
+        setFilterOpen(false);
+    }, [onFilterApply]);
+    const resetAll = useCallback(() => {
+        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
+        onFilterClear();
+        setSearchInput("");
+    }, [table, onFilterClear]);
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
+        table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
+        filterActiveCount > 0;
+    const params = {
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        category: table.get(TABLE_KEYS.CATEGORY) || undefined,
+        minPrice: table.get(TABLE_KEYS.MIN_PRICE) ? Number(table.get(TABLE_KEYS.MIN_PRICE)) : undefined,
+        maxPrice: table.get(TABLE_KEYS.MAX_PRICE) ? Number(table.get(TABLE_KEYS.MAX_PRICE)) : undefined,
+        sort: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
+        page: table.getNumber(TABLE_KEYS.PAGE, 1),
+        perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, 24),
+        listingType: "live",
+    };
+    const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const commitSearch = useCallback(() => {
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
+    }, [searchInput, table]);
+    const selection = useBulkSelection({ items: products, keyExtractor: (p) => p.id });
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    const wishlistActions = {
+        addToWishlist: (productId) => {
+            requireAuth(ACTION_ID.ADD_TO_WISHLIST, () => {
+                localWishlist.add(productId, "live");
+                pushWishlistOp({ op: "add", itemId: productId, type: "live" });
+                showToast("Added to wishlist", "success");
+            });
+            return Promise.resolve();
+        },
+        removeFromWishlist: (productId) => {
+            requireAuth(ACTION_ID.REMOVE_FROM_WISHLIST, () => {
+                localWishlist.remove(productId, "live");
+                pushWishlistOp({ op: "remove", itemId: productId, type: "live" });
+                showToast("Removed from wishlist", "info");
+            });
+            return Promise.resolve();
+        },
+        isWishlisted: (productId) => wishlistedIds.has(productId),
+    };
+    function handleToggleWishlist(id) {
+        if (wishlistActions.isWishlisted(id)) {
+            wishlistActions.removeFromWishlist(id);
+        }
+        else {
+            wishlistActions.addToWishlist(id);
+        }
+    }
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search live items\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
+                    commitSearch(); }, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: (v) => { if (v !== "table")
+                    setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] }), 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: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : products.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No live item listings found." })) : (_jsx("div", { className: view === "list" ? "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800" : gridClass, children: products.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.LIVE_DETAIL(product.id)), variant: view === "list" ? "list" : "grid", isWishlisted: wishlistActions.isWishlisted(product.id), onToggleWishlist: handleToggleWishlist, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(LiveItemFilters, { table: pendingTable, categoryOptions: categoryOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+}

package/dist/features/live/components/LiveItemsListView.d.ts

@@ -0,0 +1,6 @@
+type SearchParams = Record<string, string | string[]>;
+export interface LiveItemsListViewProps {
+    searchParams?: SearchParams;
+}
+export declare function LiveItemsListView({ searchParams }: LiveItemsListViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/features/live/components/LiveItemsListView.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { productRepository } from "../../../repositories";
+import { Container, Heading, Main, Section } from "../../../ui";
+import { AdSlot } from "../../homepage/components/AdSlot";
+import { parseListingSearchParams } from "../../../utils/listing-params";
+import { LiveItemsIndexListing } from "./LiveItemsIndexListing";
+const DEFAULT_PAGE = 1;
+const DEFAULT_PAGE_SIZE = 24;
+const DEFAULT_SORT = "-createdAt";
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildLiveFilters(params) {
+    const parts = ["status==published", "listingType==live"];
+    const minPrice = sp(params, "minPrice");
+    const maxPrice = sp(params, "maxPrice");
+    if (minPrice)
+        parts.push(`price>=${minPrice}`);
+    if (maxPrice)
+        parts.push(`price<=${maxPrice}`);
+    const species = sp(params, "species");
+    if (species)
+        parts.push(`liveSpecies==${species}`);
+    const liveSex = sp(params, "liveSex");
+    if (liveSex)
+        parts.push(`liveSex==${liveSex}`);
+    const transport = sp(params, "liveTransportMethod");
+    if (transport)
+        parts.push(`liveTransportMethod==${transport}`);
+    return parts.join(",");
+}
+export async function LiveItemsListView({ searchParams = {} }) {
+    const std = parseListingSearchParams(searchParams);
+    const sort = std.sorts ?? DEFAULT_SORT;
+    const page = std.page ?? DEFAULT_PAGE;
+    const pageSize = std.pageSize ?? DEFAULT_PAGE_SIZE;
+    const filters = buildLiveFilters(searchParams);
+    const result = await productRepository
+        .list({ filters, sorts: sort, page, pageSize })
+        .catch(() => null);
+    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900", children: "Live Items" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(LiveItemsIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+}

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

@@ -0,0 +1,6 @@
+export { LiveItemsListView } from "./LiveItemsListView";
+export type { LiveItemsListViewProps } from "./LiveItemsListView";
+export { LiveItemsIndexListing } from "./LiveItemsIndexListing";
+export type { LiveItemsIndexListingProps } from "./LiveItemsIndexListing";
+export { LiveItemFilters } from "./LiveItemFilters";
+export type { LiveItemFiltersProps } from "./LiveItemFilters";

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

@@ -0,0 +1,3 @@
+export { LiveItemsListView } from "./LiveItemsListView";
+export { LiveItemsIndexListing } from "./LiveItemsIndexListing";
+export { LiveItemFilters } from "./LiveItemFilters";

package/dist/features/media/MediaLightbox.js

@@ -25,6 +25,13 @@ function cn(...classes) {
 function IconBtn({ onClick, disabled, ariaLabel, ariaCurrent, className, children, }) {
     return (_jsx(Button, { type: "button", onClick: onClick, disabled: disabled, "aria-label": ariaLabel, "aria-current": ariaCurrent, className: cn("inline-flex items-center justify-center w-12 h-12 rounded-full bg-white/15 hover:bg-white/30 text-white border-0 active:scale-95 transition-colors disabled:opacity-30 disabled:cursor-not-allowed", className), children: children }));
 }
+// --- Controls bar sub-components ---------------------------------------------
+function LightboxControlsBar({ items, index, zoom, isFullscreen, L, goPrev, goNext, zoomIn, zoomOut, resetZoom, toggleFullscreen, onClose, }) {
+    return (_jsxs(Div, { className: "flex items-center justify-center gap-1.5 px-4 py-3 bg-black/85 backdrop-blur-sm shrink-0 border-t border-white/10 flex-wrap", children: [items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goPrev(); }, ariaLabel: L.prevImage, children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx(IconBtn, { onClick: zoomOut, disabled: zoom <= MIN_ZOOM, ariaLabel: L.zoomOut, children: _jsx(ZoomOut, { className: "w-7 h-7" }) }), _jsxs(Span, { className: "text-white/70 w-14 text-center tabular-nums text-xs", children: [Math.round(zoom * 100), "%"] }), _jsx(IconBtn, { onClick: zoomIn, disabled: zoom >= MAX_ZOOM, ariaLabel: L.zoomIn, children: _jsx(ZoomIn, { className: "w-7 h-7" }) }), zoom > 1 && (_jsx(IconBtn, { onClick: resetZoom, ariaLabel: L.resetZoom, children: _jsx(RotateCcw, { className: "w-7 h-7" }) })), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsxs(Span, { className: "text-white/60 w-12 text-center tabular-nums text-xs", children: [index + 1, " / ", items.length] }), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsx(IconBtn, { onClick: toggleFullscreen, ariaLabel: isFullscreen ? L.exitFullscreen : L.enterFullscreen, children: isFullscreen ? _jsx(Minimize, { className: "w-6 h-6" }) : _jsx(Maximize, { className: "w-6 h-6" }) }), _jsx(IconBtn, { onClick: onClose, ariaLabel: L.close, className: "hover:!bg-red-500/50", children: _jsx(X, { className: "w-7 h-7" }) }), items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goNext(); }, ariaLabel: L.nextImage, children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }));
+}
+function LightboxThumbnailStrip({ items, index, onSelect, resetZoom, L, }) {
+    return (_jsx(Div, { className: "flex gap-2 px-4 py-3 bg-black/70 backdrop-blur-sm overflow-x-auto shrink-0 justify-center", style: { paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom, 0px))" }, children: items.map((item, i) => (_jsx(Button, { type: "button", onClick: () => { onSelect(i); resetZoom(); }, "aria-label": L.imageThumbnail(i + 1), "aria-current": i === index ? "true" : undefined, className: cn("relative shrink-0 w-14 h-14 p-0 overflow-hidden rounded-lg border-2 transition-all active:scale-95", i === index ? "border-white opacity-100" : "border-transparent opacity-40 hover:opacity-75"), children: _jsx(MediaImage, { src: item.src, alt: item.alt, size: "thumbnail" }) }, i))) }));
+}
 // --- MediaLightbox ------------------------------------------------------------
 export function MediaLightbox({ items, initialIndex = 0, isOpen, onClose, labels, }) {
     const L = { ...DEFAULT_LABELS, ...labels };
@@ -226,19 +233,6 @@ export function MediaLightbox({ items, initialIndex = 0, isOpen, onClose, labels
                         transformOrigin: "center center",
                         transition: isDragging ? "none" : "transform 0.2s ease",
                         pointerEvents: "none",
-                    }, children: _jsx(MediaImage, { src: current.src, alt: current.alt, size: "hero", objectFit: "contain" }) }) }), _jsxs(Div, { className: "flex items-center justify-center gap-1.5 px-4 py-3 bg-black/85 backdrop-blur-sm shrink-0 border-t border-white/10 flex-wrap", children: [items.length > 1 && (_jsx(IconBtn, { onClick: (e) => {
-                            e.stopPropagation();
-                            goPrev();
-                        }, ariaLabel: L.prevImage, children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx(IconBtn, { onClick: zoomOut, disabled: zoom <= MIN_ZOOM, ariaLabel: L.zoomOut, children: _jsx(ZoomOut, { className: "w-7 h-7" }) }), _jsxs(Span, { className: "text-white/70 w-14 text-center tabular-nums text-xs", children: [Math.round(zoom * 100), "%"] }), _jsx(IconBtn, { onClick: zoomIn, disabled: zoom >= MAX_ZOOM, ariaLabel: L.zoomIn, children: _jsx(ZoomIn, { className: "w-7 h-7" }) }), zoom > 1 && (_jsx(IconBtn, { onClick: resetZoom, ariaLabel: L.resetZoom, children: _jsx(RotateCcw, { className: "w-7 h-7" }) })), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsxs(Span, { className: "text-white/60 w-12 text-center tabular-nums text-xs", children: [index + 1, " / ", items.length] }), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsx(IconBtn, { onClick: toggleFullscreen, ariaLabel: isFullscreen ? L.exitFullscreen : L.enterFullscreen, children: isFullscreen ? (_jsx(Minimize, { className: "w-6 h-6" })) : (_jsx(Maximize, { className: "w-6 h-6" })) }), _jsx(IconBtn, { onClick: onClose, ariaLabel: L.close, className: "hover:!bg-red-500/50", children: _jsx(X, { className: "w-7 h-7" }) }), items.length > 1 && (_jsx(IconBtn, { onClick: (e) => {
-                            e.stopPropagation();
-                            goNext();
-                        }, ariaLabel: L.nextImage, children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }), items.length > 1 && (_jsx(Div, { className: "flex gap-2 px-4 py-3 bg-black/70 backdrop-blur-sm overflow-x-auto shrink-0 justify-center", style: {
-                    paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom, 0px))",
-                }, children: items.map((item, i) => (_jsx(Button, { type: "button", onClick: () => {
-                        setIndex(i);
-                        resetZoom();
-                    }, "aria-label": L.imageThumbnail(i + 1), "aria-current": i === index ? "true" : undefined, className: cn("relative shrink-0 w-14 h-14 p-0 overflow-hidden rounded-lg border-2 transition-all active:scale-95", i === index
-                        ? "border-white opacity-100"
-                        : "border-transparent opacity-40 hover:opacity-75"), children: _jsx(MediaImage, { src: item.src, alt: item.alt, size: "thumbnail" }) }, i))) }))] }));
+                    }, children: _jsx(MediaImage, { src: current.src, alt: current.alt, size: "hero", objectFit: "contain" }) }) }), _jsx(LightboxControlsBar, { items: items, index: index, zoom: zoom, isFullscreen: isFullscreen, L: L, goPrev: goPrev, goNext: goNext, zoomIn: zoomIn, zoomOut: zoomOut, resetZoom: resetZoom, toggleFullscreen: toggleFullscreen, onClose: onClose }), items.length > 1 && (_jsx(LightboxThumbnailStrip, { items: items, index: index, onSelect: setIndex, resetZoom: resetZoom, L: L }))] }));
 }
 export default MediaLightbox;

package/dist/features/media/types/index.d.ts

@@ -23,14 +23,14 @@ export declare const mediaFieldSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "video" | "image" | "file";
     url: string;
-    source?: "external" | "upload" | "youtube" | undefined;
+    source?: "upload" | "youtube" | "external" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
     youtubeId?: string | undefined;
 }, {
     type: "video" | "image" | "file";
     url: string;
-    source?: "external" | "upload" | "youtube" | undefined;
+    source?: "upload" | "youtube" | "external" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
     youtubeId?: string | undefined;

package/dist/features/media/upload/CameraCapture.js

@@ -42,8 +42,8 @@ export default function CameraCapture({ mode, facingMode = "environment", onCapt
         if (camera.error && onError)
             onError(camera.error);
     }, [camera.error, onError]);
-    const handleTakePhoto = () => {
-        const blob = camera.takePhoto();
+    const handleTakePhoto = async () => {
+        const blob = await camera.takePhoto();
         if (blob)
             onCapture(blob, "photo");
     };

package/dist/features/media/upload/ImageUpload.js

@@ -90,8 +90,10 @@ export function ImageUpload({ currentImage, onUpload, onChange, accept = "image/
         }
     };
     const handleCameraCapture = (blob) => {
+        // blob.type can be empty from some camera implementations; hard-coded
+        // image/webp is always correct here since ImageUpload is photo-only.
         const file = new File([blob], "camera-capture.webp", {
-            type: "image/webp",
+            type: blob.type || "image/webp",
         });
         setError("");
         setProgress(0);
@@ -128,5 +130,5 @@ export function ImageUpload({ currentImage, onUpload, onChange, accept = "image/
                                     }, variant: "secondary", size: "sm", children: tMediaEditor("editImage") })), _jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "outline", size: "sm", children: tUpload("change") }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })) : (_jsxs(_Fragment, { children: [captureSource === "both" && isCameraSupported && (_jsxs(Row, { justify: "center", className: "gap-2 mb-3", children: [_jsx(Button, { type: "button", variant: captureMode === "file" ? "primary" : "outline", size: "sm", onClick: () => setCaptureMode("file"), children: t("switchToUpload") }), _jsx(Button, { type: "button", variant: captureMode === "camera" ? "primary" : "outline", size: "sm", onClick: () => setCaptureMode("camera"), children: t("switchToCamera") })] })), showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: "photo", facingMode: "environment", onCapture: handleCameraCapture, onError: setError })), showCamera && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), disabled: uploading, variant: "ghost", className: "w-full aspect-[16/9] border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl flex items-center justify-center flex-col text-zinc-500 dark:text-zinc-400", children: _jsx(Span, { className: "text-sm font-medium", children: t("switchToCamera") }) })), showFileInput && (_jsxs(Button, { type: "button", onClick: () => fileInputRef.current?.click(), disabled: uploading, variant: "ghost", className: "w-full aspect-[16/9] border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl flex items-center justify-center flex-col text-zinc-500 dark:text-zinc-400", children: [_jsx("svg", { className: "w-12 h-12 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx(Span, { className: "text-sm font-medium", children: uploading ? tUpload("uploading") : tUpload("clickToUpload") }), _jsxs(Span, { className: "text-xs mt-1", children: [accept
                                             .split(",")
                                             .map((t) => t.split("/")[1]?.toUpperCase() ?? t)
-                                            .join(", "), " ", "(max ", maxSizeMB, "MB)"] })] }))] })) }), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: "image/*", capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), uploading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploadingProgress", { progress }) })] })), cropPreviewUrl && (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: cropPreviewUrl, onClose: handleCropClose, onSave: handleCropSave }))] }));
+                                            .join(", "), " ", "(max ", maxSizeMB, "MB)"] })] }))] })) }), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-input" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: "image/*", capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-capture-input" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), uploading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploadingProgress", { progress }) })] })), cropPreviewUrl && (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: cropPreviewUrl, onClose: handleCropClose, onSave: handleCropSave }))] }));
 }

package/dist/features/media/upload/MediaUploadField.js

@@ -64,6 +64,16 @@ function extractYouTubeId(input) {
         return null;
     }
 }
+// ─── Sub-components ───────────────────────────────────────────────────────────
+function YoutubeTabPanel({ ytInput, setYtInput, ytError, setYtError, onApply, value, }) {
+    return (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "text", value: ytInput, onChange: (e) => { setYtInput(e.target.value); setYtError(""); }, placeholder: "YouTube video ID or URL", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: "Apply" })] }), ytError && _jsx(Alert, { variant: "error", children: ytError }), value?.includes("youtube.com") && (_jsxs(Text, { size: "xs", variant: "secondary", children: ["YouTube embed: ", value] }))] }));
+}
+function ExternalUrlTabPanel({ extInput, setExtInput, extError, setExtError, onApply, }) {
+    return (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "url", value: extInput, onChange: (e) => { setExtInput(e.target.value); setExtError(""); }, placeholder: "https://example.com/image.jpg", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: "Apply" })] }), extError && _jsx(Alert, { variant: "error", children: extError }), _jsx(Text, { size: "xs", variant: "secondary", children: "External URLs are stored as-is and are not watermarked." })] }));
+}
+function MediaPreviewPanel({ value, label, disabled, enableTrim, enableThumbnail, onEditVideo, onRemove, tUpload, tMediaEditor, }) {
+    return (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 p-3", children: [isVideo(value) ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaVideo, { src: value, alt: label, controls: true, objectFit: "contain" }) })) : isImage(value) ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaImage, { src: value, alt: label, size: "card", objectFit: "contain" }) })) : isPdf(value) ? (_jsxs(Row, { gap: "md", align: "center", children: [_jsx(Div, { "aria-hidden": true, className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300", children: _jsx("span", { className: "text-xs font-bold", children: "PDF" }) }), _jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: "text-sm font-medium text-blue-600 underline break-all dark:text-blue-400", children: filenameFromUrl(value) })] })) : (_jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: "text-sm underline break-all text-blue-600 dark:text-blue-400", children: filenameFromUrl(value) })), !disabled && (_jsxs(Row, { wrap: true, gap: "sm", className: "mt-2", children: [isVideo(value) && (enableTrim || enableThumbnail) && (_jsx(Button, { type: "button", onClick: () => onEditVideo(value), variant: "secondary", size: "sm", children: tMediaEditor("editVideo") })), _jsx(Button, { type: "button", onClick: onRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] }));
+}
 export function MediaUploadField({ label, value, onChange, onChangeField, onUpload, 
 // SB-UNI-Z5 2026-05-13 — `kind` derives accept/maxSizeMB when not set
 // explicitly; explicit props still win. "*" + 50 stay as the floor for
@@ -255,6 +265,15 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
                 fileInputRef.current.value = "";
         }
     };
+    const handleEditVideo = (videoUrl) => {
+        setPendingVideoUrl(videoUrl);
+        if (enableTrim) {
+            setShowTrimModal(true);
+        }
+        else {
+            setShowThumbnailModal(true);
+        }
+    };
     const handleRemove = () => {
         if (value && stagedUrlsRef.current.includes(value)) {
             onAbortRef.current?.([value]);
@@ -266,7 +285,10 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
     };
     const handleCameraCapture = async (blob, type) => {
         const ext = type === "video" ? "webm" : "webp";
-        const file = new File([blob], `camera-capture.${ext}`, { type: blob.type });
+        // blob.type can be empty with some MediaRecorder implementations; fall back
+        // to the canonical MIME for the capture type so the server MIME check passes.
+        const mimeType = blob.type || (type === "video" ? "video/webm" : "image/webp");
+        const file = new File([blob], `camera-capture.${ext}`, { type: mimeType });
         setError(null);
         setIsLoading(true);
         try {
@@ -284,11 +306,5 @@ kind, accept: acceptProp, maxSizeMB: maxSizeMBProp, disabled = false, helperText
     return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label }), hasAlternateSources && !disabled && (_jsx(Row, { gap: "none", className: "appkit-media-upload__source-tabs", children: ["upload", ...(showYoutube ? ["youtube"] : []), ...(showExternal ? ["external"] : [])].map((tab) => (_jsx("button", { type: "button", onClick: () => setSourceTab(tab), className: [
                         "appkit-media-upload__source-tab",
                         sourceTab === tab ? "appkit-media-upload__source-tab--active" : "",
-                    ].filter(Boolean).join(" "), children: tab === "upload" ? "Upload" : tab === "youtube" ? "YouTube" : "External URL" }, tab))) })), hasAlternateSources && sourceTab === "youtube" && !disabled && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "text", value: ytInput, onChange: (e) => { setYtInput(e.target.value); setYtError(""); }, placeholder: "YouTube video ID or URL", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleYtApply, children: "Apply" })] }), ytError && _jsx(Alert, { variant: "error", children: ytError }), value?.includes("youtube.com") && (_jsxs(Text, { size: "xs", variant: "secondary", children: ["YouTube embed: ", value] }))] })), hasAlternateSources && sourceTab === "external" && !disabled && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", children: [_jsx("input", { type: "url", value: extInput, onChange: (e) => { setExtInput(e.target.value); setExtError(""); }, placeholder: "https://example.com/image.jpg", className: "appkit-input flex-1" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleExtApply, children: "Apply" })] }), extError && _jsx(Alert, { variant: "error", children: extError }), _jsx(Text, { size: "xs", variant: "secondary", children: "External URLs are stored as-is and are not watermarked." })] })), (!hasAlternateSources || sourceTab === "upload") && value && !isLoading && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 p-3", children: [isVideo(value) ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaVideo, { src: value, alt: label, controls: true, objectFit: "contain" }) })) : isImage(value) ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaImage, { src: value, alt: label, size: "card", objectFit: "contain" }) })) : isPdf(value) ? (_jsxs(Row, { gap: "md", align: "center", children: [_jsx(Div, { "aria-hidden": true, className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300", children: _jsx("span", { className: "text-xs font-bold", children: "PDF" }) }), _jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: "text-sm font-medium text-blue-600 underline break-all dark:text-blue-400", children: filenameFromUrl(value) })] })) : (_jsx("a", { href: value, target: "_blank", rel: "noopener noreferrer", className: "text-sm underline break-all text-blue-600 dark:text-blue-400", children: filenameFromUrl(value) })), !disabled && (_jsxs(Row, { wrap: true, gap: "sm", className: "mt-2", children: [isVideo(value) && (enableTrim || enableThumbnail) && (_jsx(Button, { type: "button", onClick: () => {
-                                    setPendingVideoUrl(value);
-                                    if (enableTrim)
-                                        setShowTrimModal(true);
-                                    else
-                                        setShowThumbnailModal(true);
-                                }, variant: "secondary", size: "sm", children: tMediaEditor("editVideo") })), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })), !disabled && !isLoading && (!hasAlternateSources || sourceTab === "upload") && (_jsxs(_Fragment, { children: [captureSource === "both" && isCameraSupported && (_jsxs(Row, { className: "gap-2", children: [_jsx(Button, { type: "button", variant: inputMode === "file" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("file"), children: t("switchToUpload") }), _jsx(Button, { type: "button", variant: inputMode === "camera" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("camera"), children: t("switchToCamera") })] })), showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: captureMode, facingMode: "environment", onCapture: handleCameraCapture, onError: (msg) => setError(msg) })), showCamera && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: t("switchToCamera") })), showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: value ? tUpload("replaceFile") : tUpload("chooseFile") }))] })), isLoading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploading") })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: captureModeAccept, capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), pendingVideoUrl && (_jsx(VideoTrimModal, { isOpen: showTrimModal, videoUrl: pendingVideoUrl, onClose: handleTrimClose, onSave: handleTrimSave })), pendingVideoUrl && (_jsx(VideoThumbnailSelector, { isOpen: showThumbnailModal, videoUrl: pendingVideoUrl, onClose: handleThumbnailClose, onSelect: handleThumbnailSelect, onUpload: onUpload }))] }));
+                    ].filter(Boolean).join(" "), children: tab === "upload" ? "Upload" : tab === "youtube" ? "YouTube" : "External URL" }, tab))) })), hasAlternateSources && sourceTab === "youtube" && !disabled && (_jsx(YoutubeTabPanel, { ytInput: ytInput, setYtInput: setYtInput, ytError: ytError, setYtError: setYtError, onApply: handleYtApply, value: value })), hasAlternateSources && sourceTab === "external" && !disabled && (_jsx(ExternalUrlTabPanel, { extInput: extInput, setExtInput: setExtInput, extError: extError, setExtError: setExtError, onApply: handleExtApply })), (!hasAlternateSources || sourceTab === "upload") && value && !isLoading && (_jsx(MediaPreviewPanel, { value: value, label: label, disabled: disabled, enableTrim: enableTrim, enableThumbnail: enableThumbnail, onEditVideo: handleEditVideo, onRemove: handleRemove, tUpload: tUpload, tMediaEditor: tMediaEditor })), !disabled && !isLoading && (!hasAlternateSources || sourceTab === "upload") && (_jsxs(_Fragment, { children: [captureSource === "both" && isCameraSupported && (_jsxs(Row, { className: "gap-2", children: [_jsx(Button, { type: "button", variant: inputMode === "file" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("file"), children: t("switchToUpload") }), _jsx(Button, { type: "button", variant: inputMode === "camera" ? "primary" : "outline", size: "sm", onClick: () => setInputMode("camera"), children: t("switchToCamera") })] })), showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: captureMode, facingMode: "environment", onCapture: handleCameraCapture, onError: (msg) => setError(msg) })), showCamera && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: t("switchToCamera") })), showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", children: value ? tUpload("replaceFile") : tUpload("chooseFile") }))] })), isLoading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploading") })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-input" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: captureModeAccept, capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-capture-input" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), pendingVideoUrl && (_jsx(VideoTrimModal, { isOpen: showTrimModal, videoUrl: pendingVideoUrl, onClose: handleTrimClose, onSave: handleTrimSave })), pendingVideoUrl && (_jsx(VideoThumbnailSelector, { isOpen: showThumbnailModal, videoUrl: pendingVideoUrl, onClose: handleThumbnailClose, onSelect: handleThumbnailSelect, onUpload: onUpload }))] }));
 }

package/dist/features/media/upload/MediaUploadList.js

@@ -100,5 +100,5 @@ export function MediaUploadList({ label, value, onChange, onUpload, accept = "im
             unstageUrl(target.url);
         }
     };
-    return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label }), value.length > 0 && (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: value.map((item, index) => (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 p-3", children: [item.type === "video" ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaVideo, { src: item.url, alt: item.alt || `Media ${index + 1}`, controls: true }) })) : item.type === "image" ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaImage, { src: item.url, alt: item.alt || `Media ${index + 1}`, size: "card", objectFit: "contain" }) })) : (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: "text-sm underline break-all text-blue-600 dark:text-blue-400", children: fileNameFromUrl(item.url) })), !disabled && (_jsx(Div, { className: "mt-2", children: _jsx(Button, { type: "button", size: "sm", variant: "danger", onClick: () => removeAt(index), children: "Remove" }) }))] }, `${item.url}-${index}`))) })), !disabled && value.length < maxItems && (_jsx(Button, { type: "button", variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", onClick: () => inputRef.current?.click(), disabled: isLoading, children: isLoading ? "Uploading..." : "Add media" })), isLoading && (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: "Uploading" })] })), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true" }), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error })] }));
+    return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label }), value.length > 0 && (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: value.map((item, index) => (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900 p-3", children: [item.type === "video" ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaVideo, { src: item.url, alt: item.alt || `Media ${index + 1}`, controls: true }) })) : item.type === "image" ? (_jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg", children: _jsx(MediaImage, { src: item.url, alt: item.alt || `Media ${index + 1}`, size: "card", objectFit: "contain" }) })) : (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: "text-sm underline break-all text-blue-600 dark:text-blue-400", children: fileNameFromUrl(item.url) })), !disabled && (_jsx(Div, { className: "mt-2", children: _jsx(Button, { type: "button", size: "sm", variant: "danger", onClick: () => removeAt(index), children: "Remove" }) }))] }, `${item.url}-${index}`))) })), !disabled && value.length < maxItems && (_jsx(Button, { type: "button", variant: "ghost", className: "w-full py-3 border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-xl text-sm text-zinc-500 dark:text-zinc-400", onClick: () => inputRef.current?.click(), disabled: isLoading, children: isLoading ? "Uploading..." : "Add media" })), isLoading && (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: "Uploading" })] })), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-list-input" }), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error })] }));
 }

package/dist/features/orders/actions/order-actions.js

@@ -8,11 +8,12 @@ import { NotFoundError, AuthorizationError, ValidationError, } from "../../../er
 import { serverLogger } from "../../../monitoring";
 import { getProviders } from "../../../contracts";
 import { orderRepository } from "../repository/orders.repository";
+const ERR_ORDER_NOT_FOUND = "Order not found";
 const CANCELLABLE_STATUSES = ["pending", "confirmed"];
 export async function cancelOrderForUser(userId, orderId, reason) {
     const order = await orderRepository.findById(orderId);
     if (!order)
-        throw new NotFoundError("Order not found");
+        throw new NotFoundError(ERR_ORDER_NOT_FOUND);
     if (order.userId !== userId)
         throw new AuthorizationError("You are not authorised to cancel this order");
     if (!CANCELLABLE_STATUSES.includes(order.status)) {
@@ -27,9 +28,9 @@ export async function listOrdersForUser(userId) {
 export async function getOrderByIdForUser(userId, orderId) {
     const order = await orderRepository.findById(orderId);
     if (!order)
-        throw new NotFoundError("Order not found");
+        throw new NotFoundError(ERR_ORDER_NOT_FOUND);
     if (order.userId !== userId)
-        throw new NotFoundError("Order not found");
+        throw new NotFoundError(ERR_ORDER_NOT_FOUND);
     return order;
 }
 /**