@mohasinac/appkit 2.7.58 → 2.8.0

package/dist/features/seller/components/SellerProductsView.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback } from "react";
+import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
 import { useActionDispatch } from "../../../react/hooks/use-action-dispatch";
 import { Eye, EyeOff, Pencil, Trash2, Printer, MapPin } from "lucide-react";
 import { PhysicalLocationModal } from "./PhysicalLocationModal";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { Alert, Badge, BulkActionBar, Button, Div, ListingToolbar, ListingViewShell, Pagination, Row, Span, Text, useToast } from "../../../ui";
+import { Alert, Badge, BulkActionBar, Button, Div, ListingToolbar, ListingLayout, Pagination, Row, Span, Text, useToast } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { SELLER_PRODUCT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { ROUTES } from "../../../constants";
@@ -14,6 +15,8 @@ import { normalizeListingType } from "../../products/utils/listing-type";
 import { toRecordArray, toRelativeDate, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
 import { DataTable } from "../../admin/components/DataTable";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
+import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
 import { SellerProductsCards } from "./SellerProductsCards";
 import { SellerProductsFilterDrawer } from "./SellerProductsFilterDrawer";
 import { KIND_BADGE_VARIANT } from "./seller-products-styles";
@@ -42,17 +45,21 @@ const STATUS_OPTIONS = SELLER_PRODUCT_STATUS_TABS;
 // S-STORE-2-A — `<TypeDropdown>` replaces the legacy chip strip. Same width on
 // mobile, narrower on desktop. Drives the `?listingType=` query param.
 function TypeDropdown({ active, onChange, }) {
+    const flags = useListingTypeFlags();
+    // W1-43 — hide disabled types so the seller can't filter for an
+    // inactive listing surface. Bundle is a categoryType (not a listingType)
+    // and stays unconditionally available.
     const options = [
         { value: "all", label: "All listings" },
-        { value: "standard", label: "Standard" },
-        { value: "auction", label: "Auction" },
-        { value: "pre-order", label: "Pre-order" },
-        { value: "prize-draw", label: "Prize Draw" },
+        flags.standard && { value: "standard", label: "Standard" },
+        flags.auction && { value: "auction", label: "Auction" },
+        flags["pre-order"] && { value: "pre-order", label: "Pre-order" },
+        flags["prize-draw"] && { value: "prize-draw", label: "Prize Draw" },
         { value: "bundle", label: "Bundle" },
-        { value: "classified", label: "Classified" },
-        { value: "digital-code", label: "Digital Code" },
-        { value: "live", label: "Live" },
-    ];
+        flags.classified && { value: "classified", label: "Classified" },
+        flags["digital-code"] && { value: "digital-code", label: "Digital Code" },
+        flags.live && { value: "live", label: "Live" },
+    ].filter(Boolean);
     return (_jsxs(Row, { className: "gap-2 px-3 lg:px-4 py-2 border-b border-[var(--appkit-color-border)]", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: "Listing type" }), _jsx("select", { value: active, onChange: (e) => onChange(e.target.value), className: "rounded border border-[var(--appkit-color-border)] bg-transparent px-2 py-1 text-sm sm:max-w-xs", "aria-label": "Filter by listing type", children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }));
 }
 const PRODUCT_COLUMNS = [
@@ -111,7 +118,10 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
     const [filterOpen, setFilterOpen] = useState(false);
     // listingKind is URL-driven so it survives navigation and back/forward
     const listingKind = (table.get("listingType") || "all");
-    const [deletingId, setDeletingId] = useState(null);
+    const { deletingId, handleDelete: performDelete } = useEntityDelete({
+        deleteFn: onDeleteProduct,
+        onSuccess: (id) => { setDeletedIds((prev) => new Set([...prev, id])); },
+    });
     const [deletedIds, setDeletedIds] = useState(new Set());
     const [publishingId, setPublishingId] = useState(null);
     const [statusOverrides, setStatusOverrides] = useState(new Map());
@@ -202,7 +212,7 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
         .map((r) => statusOverrides.has(r.id) ? { ...r, status: statusOverrides.get(r.id) } : r);
     const selection = useBulkSelection({ items: visibleRows, keyExtractor: (r) => r.id });
     if (hasChildren) {
-        return (_jsx(ListingViewShell, { portal: "seller", ...props, children: children }));
+        return (_jsx(ListingLayout, { portal: "seller", ...props, children: children }));
     }
     const handleEdit = (row) => {
         const href = row.listingKind === "auction"
@@ -217,15 +227,7 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
     const handleDelete = async (row) => {
         if (!onDeleteProduct)
             return;
-        setDeletingId(row.id);
-        try {
-            await onDeleteProduct(row.id);
-            // Optimistically remove from list — avoids a full refetch
-            setDeletedIds((prev) => new Set([...prev, row.id]));
-        }
-        finally {
-            setDeletingId(null);
-        }
+        await performDelete(row.id);
     };
     // S-STORE-2-C — Duplicate verb. Server-side endpoint is /api/store/products/[id]/duplicate.
     const handleDuplicate = async (row) => {
@@ -283,18 +285,8 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, children, .
         }
     }, [selection.selectedIds, showToast]);
     const bulkActions = [
-        {
-            id: ACTIONS.STORE["print-labels"].id,
-            label: ACTIONS.STORE["print-labels"].label,
-            icon: _jsx(Printer, { className: "w-4 h-4" }),
-            onClick: handleBulkPrintLabels,
-        },
-        {
-            id: ACTIONS.STORE["set-location"].id,
-            label: ACTIONS.STORE["set-location"].label,
-            icon: _jsx(MapPin, { className: "w-4 h-4" }),
-            onClick: () => setSetLocationOpen(true),
-        },
+        buildBulkAction(ACTIONS.STORE["print-labels"], handleBulkPrintLabels, { icon: _jsx(Printer, { className: "w-4 h-4" }) }),
+        buildBulkAction(ACTIONS.STORE["set-location"], () => setSetLocationOpen(true), { icon: _jsx(MapPin, { className: "w-4 h-4" }) }),
     ];
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
     return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search products by name\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [

package/dist/features/seller/components/SellerShippingConfigsView.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
+import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
 import { Plus } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { Button, ConfirmDeleteModal, DataTable, Div, ListingToolbar, RowActionMenu, Text, useToast, } from "../../../ui";
@@ -44,7 +45,13 @@ export function SellerShippingConfigsView({ onCreateClick, onEditClick, onDelete
     const table = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [deleteTargetId, setDeleteTargetId] = useState(null);
-    const [deletingId, setDeletingId] = useState(null);
+    const { deletingId, handleDelete: performDelete } = useEntityDelete({
+        endpoint: SELLER_ENDPOINTS.SHIPPING_CONFIG_BY_ID,
+        deleteFn: onDelete,
+        successMessage: "Shipping config deleted.",
+        onSuccess: () => { refetch?.(); },
+        fetchOptions: { credentials: "include" },
+    });
     const [settingDefaultId, setSettingDefaultId] = useState(null);
     const { showToast } = useToast();
     const commitSearch = useCallback(() => {
@@ -73,28 +80,9 @@ export function SellerShippingConfigsView({ onCreateClick, onEditClick, onDelete
         })),
     });
     const handleDelete = useCallback(async (id) => {
-        setDeletingId(id);
-        try {
-            if (onDelete) {
-                await onDelete(id);
-            }
-            else {
-                await fetch(SELLER_ENDPOINTS.SHIPPING_CONFIG_BY_ID(id), {
-                    method: "DELETE",
-                    credentials: "include",
-                });
-            }
-            refetch?.();
-            showToast("Shipping config deleted.", "success");
-        }
-        catch (err) {
-            showToast(err instanceof Error ? err.message : "Failed to delete config.", "error");
-        }
-        finally {
-            setDeletingId(null);
-            setDeleteTargetId(null);
-        }
-    }, [onDelete, refetch, showToast]);
+        await performDelete(id);
+        setDeleteTargetId(null);
+    }, [performDelete]);
     const handleSetDefault = useCallback(async (id) => {
         setSettingDefaultId(id);
         try {
@@ -135,7 +123,7 @@ export function SellerShippingConfigsView({ onCreateClick, onEditClick, onDelete
             window.location.href = String(ROUTES.STORE.SHIPPING_CONFIGS_EDIT(id));
         }
     }, [onEditClick]);
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search shipping configs...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleCreate, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Config" })] }) }), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-error-surface dark:border-red-900/60 px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "py-16 text-center", children: [_jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No shipping configs yet \u2014 define your first shipping rule" }), _jsx("div", { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add shipping config" }) })] })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, actions: (row) => (_jsx(RowActionMenu, { actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search shipping configs...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleCreate, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Config" })] }) }), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsxs(Div, { className: "py-16 text-center", children: [_jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No shipping configs yet \u2014 define your first shipping rule" }), _jsx("div", { className: "mt-4", children: _jsx(Button, { size: "sm", onClick: handleCreate, children: "Add shipping config" }) })] })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, actions: (row) => (_jsx(RowActionMenu, { actions: [
                                 {
                                     label: ACTIONS.STORE["edit-listing"].label,
                                     onClick: () => handleEdit(row.id),

package/dist/features/seller/components/SellerSidebar.d.ts

@@ -25,8 +25,4 @@ interface StoreSidebarProps {
     className?: string;
 }
 export declare function StoreSidebar({ items, groups, activeHref, storeName, storeLogoURL, mobileOpen, desktopOpen, variant, onCloseMobile, onToggle, }: StoreSidebarProps): import("react/jsx-runtime").JSX.Element;
-/** @deprecated Use StoreSidebar */
-export declare const SellerSidebar: typeof StoreSidebar;
-/** @deprecated Use StoreNavItem */
-export type SellerNavItem = StoreNavItem;
 export {};

package/dist/features/seller/components/SellerSidebar.js

@@ -62,5 +62,3 @@ export function StoreSidebar({ items, groups, activeHref, storeName, storeLogoUR
     return (_jsxs(_Fragment, { children: [mounted && mobileOpen &&
                 createPortal(_jsx(DrawerPanel, { title: panelTitle, onClose: close, children: navContent }), document.body), _jsx("div", { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: panelTitle, children: groups ? (_jsx(GroupsContent, { groups: groups, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) : (_jsx(FlatContent, { items: items, activeHref: activeHref, storeName: storeName, storeLogoURL: storeLogoURL, onItemClick: close })) }) })] }));
 }
-/** @deprecated Use StoreSidebar */
-export const SellerSidebar = StoreSidebar;

package/dist/features/seller/components/SellerStoreCategoriesView.js

@@ -1,13 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
+import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
 import { Plus } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, Button, ConfirmDeleteModal, DataTable, Div, ListingToolbar, Pagination, RowActionMenu, Text, useToast, } from "../../../ui";
+import { BulkActionBar, Button, ConfirmDeleteModal, DataTable, Div, ListingToolbar, Pagination, RowActionMenu, Text, } from "../../../ui";
 import { useBottomActions } from "../../layout";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { ROUTES } from "../../../next";
 import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
 import { TABLE_KEYS } from "../../../constants/table-keys";
@@ -42,8 +44,11 @@ export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [deleteTargetId, setDeleteTargetId] = useState(null);
-    const [deletingId, setDeletingId] = useState(null);
-    const { showToast } = useToast();
+    const { deletingId, handleDelete: performDelete } = useEntityDelete({
+        deleteFn: onDelete,
+        successMessage: "Category deleted.",
+        onSuccess: () => { refetch?.(); },
+    });
     const commitSearch = useCallback(() => { table.set(TABLE_KEYS.QUERY, searchInput.trim()); }, [searchInput, table]);
     const resetAll = useCallback(() => {
         table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
@@ -73,37 +78,13 @@ export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete
     const handleDelete = useCallback(async (id) => {
         if (!onDelete)
             return;
-        setDeletingId(id);
-        try {
-            await onDelete(id);
-            refetch?.();
-            showToast("Category deleted.", "success");
-        }
-        catch (err) {
-            showToast(err instanceof Error ? err.message : "Failed to delete category.", "error");
-        }
-        finally {
-            setDeletingId(null);
-            setDeleteTargetId(null);
-        }
-    }, [onDelete, refetch, showToast]);
+        await performDelete(id);
+        setDeleteTargetId(null);
+    }, [onDelete, performDelete]);
     const bulkActions = [
-        ...(onBulkDelete ? [{
-                id: "bulk-delete",
-                label: ACTIONS.STORE["delete-listing"].label,
-                variant: "danger",
-                onClick: async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); refetch?.(); },
-            }] : []),
-        ...(onBulkActivate ? [{
-                id: "bulk-activate",
-                label: ACTIONS.ADMIN["activate-bundle"].label,
-                onClick: async () => { await onBulkActivate(selection.selectedIds); selection.clearSelection(); refetch?.(); },
-            }] : []),
-        ...(onBulkDeactivate ? [{
-                id: "bulk-deactivate",
-                label: ACTIONS.ADMIN["deactivate-bundle"].label,
-                onClick: async () => { await onBulkDeactivate(selection.selectedIds); selection.clearSelection(); refetch?.(); },
-            }] : []),
+        ...(onBulkDelete ? [buildBulkAction(ACTIONS.STORE["delete-listing"], async () => { await onBulkDelete(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
+        ...(onBulkActivate ? [buildBulkAction(ACTIONS.ADMIN["activate-bundle"], async () => { await onBulkActivate(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
+        ...(onBulkDeactivate ? [buildBulkAction(ACTIONS.ADMIN["deactivate-bundle"], async () => { await onBulkDeactivate(selection.selectedIds); selection.clearSelection(); refetch?.(); })] : []),
     ];
     const handleNavigateNew = () => {
         if (onCreateClick) {
@@ -113,7 +94,7 @@ export function SellerStoreCategoriesView({ onCreateClick, onEditClick, onDelete
         window.location.href = String(ROUTES.STORE.STORE_CATEGORIES_NEW);
     };
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search categories by label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleNavigateNew, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Category" })] }) }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-error-surface dark:border-red-900/60 px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No categories yet \u2014 add your first storefront category" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search categories by label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: handleNavigateNew, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Category" })] }) }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : rows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: "No categories yet \u2014 add your first storefront category" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: rows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
                                 {
                                     label: ACTIONS.STORE["edit-listing"].label,
                                     onClick: () => onEditClick

package/dist/features/seller/components/SellerTemplatesView.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
+import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
 import { Plus } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
@@ -8,6 +9,7 @@ import { BulkActionBar, Button, ConfirmDeleteModal, DataTable, Div, FilterDrawer
 import { useBottomActions } from "../../layout";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
 import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
 import { TABLE_KEYS } from "../../../constants/table-keys";
 const PAGE_SIZE = 25;
@@ -68,7 +70,13 @@ export function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }) {
     const [savingError, setSavingError] = useState(null);
     // Delete state
     const [deleteTargetId, setDeleteTargetId] = useState(null);
-    const [deletingId, setDeletingId] = useState(null);
+    const { deletingId, handleDelete: performDelete } = useEntityDelete({
+        endpoint: SELLER_ENDPOINTS.TEMPLATE_BY_ID,
+        deleteFn: onDelete,
+        successMessage: "Template deleted.",
+        onSuccess: () => { refetch?.(); },
+        fetchOptions: { credentials: "include" },
+    });
     const [duplicatingId, setDuplicatingId] = useState(null);
     const { showToast } = useToast();
     const commitSearch = useCallback(() => {
@@ -184,28 +192,9 @@ export function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }) {
         }
     }, [draft, drawerMode, editingId, closeDrawer, refetch, showToast]);
     const handleDelete = useCallback(async (id) => {
-        setDeletingId(id);
-        try {
-            if (onDelete) {
-                await onDelete(id);
-            }
-            else {
-                await fetch(SELLER_ENDPOINTS.TEMPLATE_BY_ID(id), {
-                    method: "DELETE",
-                    credentials: "include",
-                });
-            }
-            refetch?.();
-            showToast("Template deleted.", "success");
-        }
-        catch (err) {
-            showToast(err instanceof Error ? err.message : "Failed to delete template.", "error");
-        }
-        finally {
-            setDeletingId(null);
-            setDeleteTargetId(null);
-        }
-    }, [onDelete, refetch, showToast]);
+        await performDelete(id);
+        setDeleteTargetId(null);
+    }, [performDelete]);
     const handleDuplicate = useCallback(async (row) => {
         setDuplicatingId(row.id);
         try {
@@ -237,27 +226,22 @@ export function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }) {
         }
     }, [onDuplicate, refetch, showToast]);
     const bulkActions = [
-        {
-            id: "bulk-delete",
-            label: ACTIONS.STORE["delete-template"].label,
-            variant: "danger",
-            onClick: async () => {
-                if (onBulkDelete) {
-                    await onBulkDelete(selection.selectedIds);
-                }
-                else {
-                    await Promise.all(selection.selectedIds.map((id) => fetch(SELLER_ENDPOINTS.TEMPLATE_BY_ID(id), {
-                        method: "DELETE",
-                        credentials: "include",
-                    })));
-                }
-                selection.clearSelection();
-                refetch?.();
-            },
-        },
+        buildBulkAction(ACTIONS.STORE["delete-template"], async () => {
+            if (onBulkDelete) {
+                await onBulkDelete(selection.selectedIds);
+            }
+            else {
+                await Promise.all(selection.selectedIds.map((id) => fetch(SELLER_ENDPOINTS.TEMPLATE_BY_ID(id), {
+                    method: "DELETE",
+                    credentials: "include",
+                })));
+            }
+            selection.clearSelection();
+            refetch?.();
+        }),
     ];
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search templates by name...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreate, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Template" })] }) }), 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: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-error-surface dark:border-red-900/60 px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : pageRows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: q || conditionFilter
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search templates by name...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreate, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "New Template" })] }) }), 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: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), isLoading ? (_jsx(Div, { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse rounded-xl border border-zinc-100 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800" }, i))) })) : pageRows.length === 0 ? (_jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-400", children: q || conditionFilter
                                 ? "No templates match your search or filters"
                                 : "No templates yet — add your first product template" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: pageRows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
                                 {
@@ -275,5 +259,5 @@ export function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }) {
                                     onClick: () => setDeleteTargetId(row.id),
                                     disabled: deletingId === row.id,
                                 },
-                            ] })) }))] }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingCondition(""), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Div, { className: "space-y-4 p-4", children: _jsxs(Div, { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Condition" }), _jsx(Select, { value: pendingCondition, onValueChange: setPendingCondition, options: CONDITION_OPTIONS })] }) }) }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: drawerMode === "create" ? "New Template" : "Edit Template", mode: drawerMode, isDirty: draft.name !== "" || draft.category !== "" || draft.brand !== "", footer: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: closeDrawer, disabled: saving, children: "Cancel" }), _jsx(Button, { size: "sm", isLoading: saving, onClick: handleSave, children: drawerMode === "create" ? "Create Template" : "Save Changes" })] }), children: _jsxs(Stack, { gap: "md", children: [savingError && (_jsx(Div, { className: "rounded-lg border border-red-200 bg-error-surface dark:border-red-900/60 px-3 py-2 text-sm text-error", children: savingError })), _jsx(Input, { id: "tpl-name", label: "Template Name", value: draft.name, onChange: (e) => setDraft((d) => ({ ...d, name: e.target.value })), placeholder: "e.g. Pok\u00E9mon Card Standard", required: true, autoComplete: "off" }), _jsx(Input, { id: "tpl-description", label: "Description (optional)", value: draft.description, onChange: (e) => setDraft((d) => ({ ...d, description: e.target.value })), placeholder: "Short note about when to use this template", autoComplete: "off" }), _jsx(Input, { id: "tpl-category", label: "Category (optional)", value: draft.category, onChange: (e) => setDraft((d) => ({ ...d, category: e.target.value })), placeholder: "e.g. trading-cards", autoComplete: "off" }), _jsx(Input, { id: "tpl-brand", label: "Brand (optional)", value: draft.brand, onChange: (e) => setDraft((d) => ({ ...d, brand: e.target.value })), placeholder: "e.g. Pok\u00E9mon Company", autoComplete: "off" }), _jsx(Select, { label: "Condition (optional)", name: "tpl-condition", value: draft.condition, onValueChange: (v) => setDraft((d) => ({ ...d, condition: v })), options: CONDITION_OPTIONS })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Template", message: "Are you sure you want to delete this template? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
+                            ] })) }))] }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingCondition(""), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Div, { className: "space-y-4 p-4", children: _jsxs(Div, { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Condition" }), _jsx(Select, { value: pendingCondition, onValueChange: setPendingCondition, options: CONDITION_OPTIONS })] }) }) }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: drawerMode === "create" ? "New Template" : "Edit Template", mode: drawerMode, isDirty: draft.name !== "" || draft.category !== "" || draft.brand !== "", footer: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: closeDrawer, disabled: saving, children: "Cancel" }), _jsx(Button, { size: "sm", isLoading: saving, onClick: handleSave, children: drawerMode === "create" ? "Create Template" : "Save Changes" })] }), children: _jsxs(Stack, { gap: "md", children: [savingError && (_jsx(Div, { className: "rounded-lg border border-error/20 bg-error-surface px-3 py-2 text-sm text-error", children: savingError })), _jsx(Input, { id: "tpl-name", label: "Template Name", value: draft.name, onChange: (e) => setDraft((d) => ({ ...d, name: e.target.value })), placeholder: "e.g. Pok\u00E9mon Card Standard", required: true, autoComplete: "off" }), _jsx(Input, { id: "tpl-description", label: "Description (optional)", value: draft.description, onChange: (e) => setDraft((d) => ({ ...d, description: e.target.value })), placeholder: "Short note about when to use this template", autoComplete: "off" }), _jsx(Input, { id: "tpl-category", label: "Category (optional)", value: draft.category, onChange: (e) => setDraft((d) => ({ ...d, category: e.target.value })), placeholder: "e.g. trading-cards", autoComplete: "off" }), _jsx(Input, { id: "tpl-brand", label: "Brand (optional)", value: draft.brand, onChange: (e) => setDraft((d) => ({ ...d, brand: e.target.value })), placeholder: "e.g. Pok\u00E9mon Company", autoComplete: "off" }), _jsx(Select, { label: "Condition (optional)", name: "tpl-condition", value: draft.condition, onValueChange: (v) => setDraft((d) => ({ ...d, condition: v })), options: CONDITION_OPTIONS })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Template", message: "Are you sure you want to delete this template? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
 }

package/dist/features/seller/components/SellersListView.d.ts

@@ -1,4 +1,3 @@
 import type { SlottedListingViewProps } from "../../../ui";
-export interface SellersListViewProps extends SlottedListingViewProps {
-}
+export type SellersListViewProps = SlottedListingViewProps;
 export declare function SellersListView(props: SellersListViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/seller/components/analytics/SellerAnalyticsStats.d.ts

@@ -1,4 +1,9 @@
 import type { SellerAnalyticsSummary } from "../../types";
+/**
+ * W1-32 — SellerAnalyticsStats now composes AdminStatCard (the only live
+ * stat-card primitive after W1-30) instead of redefining its own inline
+ * StatCard. Same gradient presets, same visual identity.
+ */
 export interface SellerAnalyticsStatsLabels {
     totalRevenue?: string;
     totalOrders?: string;

package/dist/features/seller/components/analytics/SellerAnalyticsStats.js

@@ -2,13 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrendingUp, ShoppingBag, Package, CheckCircle } from "lucide-react";
 import { Div } from "../../../../ui";
-const GREEN_GRAD = "linear-gradient(135deg,var(--appkit-color-cobalt,#3570fc) 0%,var(--appkit-color-secondary-400,#84e122) 100%)";
-const BRAND_GRAD = "linear-gradient(135deg,var(--appkit-color-primary-700,#1343de) 0%,var(--appkit-color-cobalt,#3570fc) 55%,var(--appkit-color-secondary-400,#84e122) 100%)";
-const AMBER_GRAD = "linear-gradient(135deg,var(--appkit-color-amber-500,#f59e0b) 0%,var(--appkit-color-amber-600,#d97706) 100%)";
-const BLUE_GRAD = "linear-gradient(135deg,var(--appkit-color-primary-700,#1343de) 0%,var(--appkit-color-cobalt,#3570fc) 100%)";
-function StatCard({ label, value, gradient, Icon }) {
-    return (_jsxs(Div, { className: "relative rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden shadow-sm hover:shadow-md transition-shadow", children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-[3px]", style: { background: gradient }, "aria-hidden": "true" }), _jsxs(Div, { className: "px-5 pb-5 pt-6 flex items-start justify-between gap-3", children: [_jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[11px] font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]", children: label }), _jsx("div", { className: "mt-2 text-2xl font-bold text-[var(--appkit-color-text)] tabular-nums leading-none", children: value })] }), _jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center", style: { background: gradient }, children: _jsx(Icon, { className: "w-5 h-5 text-white" }) })] })] }));
-}
+import { AdminStatCard } from "../../../admin/components/analytics/AdminStatCard";
 export function SellerAnalyticsStats({ summary, labels = {}, formatRevenue = (amount) => String(amount), className = "", }) {
-    return (_jsxs(Div, { className: `grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 ${className}`, children: [_jsx(StatCard, { label: labels.totalRevenue ?? "Total Revenue", value: formatRevenue(summary.totalRevenue), gradient: GREEN_GRAD, Icon: TrendingUp }), _jsx(StatCard, { label: labels.totalOrders ?? "Total Orders", value: String(summary.totalOrders), gradient: BRAND_GRAD, Icon: ShoppingBag }), _jsx(StatCard, { label: labels.totalProducts ?? "Total Products", value: String(summary.totalProducts), gradient: AMBER_GRAD, Icon: Package }), _jsx(StatCard, { label: labels.publishedProducts ?? "Published", value: String(summary.publishedProducts), gradient: BLUE_GRAD, Icon: CheckCircle })] }));
+    return (_jsxs(Div, { className: `grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 ${className}`, children: [_jsx(AdminStatCard, { label: labels.totalRevenue ?? "Total Revenue", value: formatRevenue(summary.totalRevenue), gradient: "green", icon: _jsx(TrendingUp, { className: "w-5 h-5 text-white" }) }), _jsx(AdminStatCard, { label: labels.totalOrders ?? "Total Orders", value: String(summary.totalOrders), gradient: "brand", icon: _jsx(ShoppingBag, { className: "w-5 h-5 text-white" }) }), _jsx(AdminStatCard, { label: labels.totalProducts ?? "Total Products", value: String(summary.totalProducts), gradient: "amber", icon: _jsx(Package, { className: "w-5 h-5 text-white" }) }), _jsx(AdminStatCard, { label: labels.publishedProducts ?? "Published", value: String(summary.publishedProducts), gradient: "blue", icon: _jsx(CheckCircle, { className: "w-5 h-5 text-white" }) })] }));
 }

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

@@ -1,6 +1,3 @@
-export { SellerStatCard } from "./SellerStatCard";
-export { SellerSidebar } from "./SellerSidebar";
-export type { SellerNavItem } from "./SellerSidebar";
 export { SellerDashboardView } from "./SellerDashboardView";
 export type { SellerDashboardViewProps } from "./SellerDashboardView";
 export { SellerProductsView } from "./SellerProductsView";

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

@@ -1,5 +1,3 @@
-export { SellerStatCard } from "./SellerStatCard";
-export { SellerSidebar } from "./SellerSidebar";
 export { SellerDashboardView } from "./SellerDashboardView";
 export { SellerProductsView } from "./SellerProductsView";
 export { SellerAuctionsView } from "./SellerAuctionsView";

package/dist/features/seller/server.d.ts

@@ -4,7 +4,6 @@
  * Server-only entry point for seller repositories and API route handlers.
  */
 export * from "./actions";
-export { SellerRepository, PayoutsRepository, } from "./repository/seller.repository";
 export { OfferRepository, offerRepository, } from "./repository/offer.repository";
 export { GET as sellerProductsGET } from "./api/products/route";
 export { GET as sellerStoreGET } from "./api/store/route";

package/dist/features/seller/server.js

@@ -4,7 +4,6 @@
  * Server-only entry point for seller repositories and API route handlers.
  */
 export * from "./actions";
-export { SellerRepository, PayoutsRepository, } from "./repository/seller.repository";
 export { OfferRepository, offerRepository, } from "./repository/offer.repository";
 export { GET as sellerProductsGET } from "./api/products/route";
 export { GET as sellerStoreGET } from "./api/store/route";

package/dist/features/shell/FormShell.d.ts

@@ -40,4 +40,4 @@ export interface UseFormShellResult {
     markClean: () => void;
 }
 export declare function useFormShell(): UseFormShellResult;
-export declare function FormShell({ isOpen, onClose, title, breadcrumb, isDirty, isLoading, sections, onSaveDraft, onPublish, saveLabel, publishLabel, renderBottomBar, previewSlot, splitPreview, children, }: FormShellProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function FormShell({ isOpen, onClose, title, breadcrumb, isDirty, isLoading, sections, onSaveDraft, onPublish, saveLabel, publishLabel, renderBottomBar, previewSlot, splitPreview: splitPreviewProp, children, }: FormShellProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/shell/FormShell.js

@@ -15,7 +15,10 @@ export function useFormShell() {
     };
 }
 const FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
-export function FormShell({ isOpen, onClose, title, breadcrumb, isDirty = false, isLoading = false, sections, onSaveDraft, onPublish, saveLabel = FORM_ACTION_META[FORM_ACTION_ID.SAVE_DRAFT].label, publishLabel = FORM_ACTION_META[FORM_ACTION_ID.PUBLISH].label, renderBottomBar, previewSlot, splitPreview = false, children, }) {
+export function FormShell({ isOpen, onClose, title, breadcrumb, isDirty = false, isLoading = false, sections, onSaveDraft, onPublish, saveLabel = FORM_ACTION_META[FORM_ACTION_ID.SAVE_DRAFT].label, publishLabel = FORM_ACTION_META[FORM_ACTION_ID.PUBLISH].label, renderBottomBar, previewSlot, splitPreview: splitPreviewProp, children, }) {
+    // W1-37: auto-enable splitPreview when a previewSlot is provided. Callers
+    // can still pass splitPreview={false} explicitly to opt out.
+    const splitPreview = splitPreviewProp ?? Boolean(previewSlot);
     const panelRef = useRef(null);
     const bodyRef = useRef(null);
     const [showUnsaved, setShowUnsaved] = useState(false);

package/dist/features/shell/field-groups/ImageFieldGroup.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface ImageFieldGroupProps {
+    /** Slot for the hero / cover image input — wire your own ImageUpload here. */
+    heroSlot?: ReactNode;
+    /** Slot for an additional gallery input (e.g. MediaUploadField with multi-image). */
+    gallerySlot?: ReactNode;
+    /** Optional section label override. */
+    sectionTitle?: ReactNode;
+    sectionDescription?: ReactNode;
+}
+/**
+ * `ImageFieldGroup` — wraps hero + gallery image slots in a `SettingsSection`.
+ * The actual `<ImageUpload>` / `<MediaUploadField>` instances stay with the
+ * consumer because their `onUpload` / context wiring is form-specific.
+ *
+ * W1-15 — extracted 2026-05-23.
+ */
+export declare function ImageFieldGroup({ heroSlot, gallerySlot, sectionTitle, sectionDescription, }: ImageFieldGroupProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/shell/field-groups/ImageFieldGroup.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { SettingsSection } from "../../../ui/components/SettingsSection";
+/**
+ * `ImageFieldGroup` — wraps hero + gallery image slots in a `SettingsSection`.
+ * The actual `<ImageUpload>` / `<MediaUploadField>` instances stay with the
+ * consumer because their `onUpload` / context wiring is form-specific.
+ *
+ * W1-15 — extracted 2026-05-23.
+ */
+export function ImageFieldGroup({ heroSlot, gallerySlot, sectionTitle = "Images", sectionDescription, }) {
+    if (!heroSlot && !gallerySlot)
+        return null;
+    return (_jsxs(SettingsSection, { title: sectionTitle, description: sectionDescription, children: [heroSlot, gallerySlot] }));
+}

package/dist/features/shell/field-groups/SeoFieldGroup.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export interface SeoFieldGroupProps {
+    seoTitle: string;
+    seoDescription: string;
+    slug: string;
+    onSeoTitleChange: (next: string) => void;
+    onSeoDescriptionChange: (next: string) => void;
+    onSlugChange?: (next: string) => void;
+    /** Read-only computed canonical URL preview (e.g. `https://letitrip.in/products/<slug>`). */
+    canonicalPreview?: string;
+    /** Optional section label override. */
+    sectionTitle?: ReactNode;
+    sectionDescription?: ReactNode;
+    disabled?: boolean;
+}
+/**
+ * `SeoFieldGroup` — shared SEO inputs (title / description / slug) used across
+ * Product, Blog, Category, FAQ editors.
+ *
+ * W1-15 — extracted 2026-05-23.
+ */
+export declare function SeoFieldGroup({ seoTitle, seoDescription, slug, onSeoTitleChange, onSeoDescriptionChange, onSlugChange, canonicalPreview, sectionTitle, sectionDescription, disabled, }: SeoFieldGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/shell/field-groups/SeoFieldGroup.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../../../ui/components/Input";
+import { Textarea } from "../../../ui/components/Textarea";
+import { SettingsSection } from "../../../ui/components/SettingsSection";
+const SEO_TITLE_MAX = 60;
+const SEO_DESC_MAX = 160;
+/**
+ * `SeoFieldGroup` — shared SEO inputs (title / description / slug) used across
+ * Product, Blog, Category, FAQ editors.
+ *
+ * W1-15 — extracted 2026-05-23.
+ */
+export function SeoFieldGroup({ seoTitle, seoDescription, slug, onSeoTitleChange, onSeoDescriptionChange, onSlugChange, canonicalPreview, sectionTitle = "SEO", sectionDescription = "Override the auto-generated metadata if needed. Leave blank to use defaults.", disabled = false, }) {
+    return (_jsxs(SettingsSection, { title: sectionTitle, description: sectionDescription, children: [_jsx(Input, { label: "SEO title", value: seoTitle, onChange: (e) => onSeoTitleChange(e.target.value), placeholder: "Falls back to the page title", maxLength: SEO_TITLE_MAX, helperText: `Max ${SEO_TITLE_MAX} characters.`, disabled: disabled }), _jsx(Textarea, { label: "SEO description", value: seoDescription, onChange: (e) => onSeoDescriptionChange(e.target.value), placeholder: "Falls back to the page description", maxLength: SEO_DESC_MAX, helperText: `Max ${SEO_DESC_MAX} characters.`, rows: 3, disabled: disabled }), onSlugChange ? (_jsx(Input, { label: "URL slug", value: slug, onChange: (e) => onSlugChange(e.target.value), disabled: disabled, helperText: canonicalPreview ? `Canonical: ${canonicalPreview}` : undefined })) : null] }));
+}