@mohasinac/appkit 2.7.49 → 2.7.52

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

@@ -0,0 +1,265 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { Plus } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+import { BulkActionBar, Button, ConfirmDeleteModal, DataTable, Div, FilterDrawer, Input, ListingToolbar, Pagination, RowActionMenu, Select, SideDrawer, Stack, Text, } from "../../../ui";
+import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
+import { TABLE_KEYS } from "../../../constants/table-keys";
+const PAGE_SIZE = 25;
+const DEFAULT_SORT = "name";
+const SORT_OPTIONS = [
+    { value: "name", label: "Name A–Z" },
+    { value: "-name", label: "Name Z–A" },
+    { value: "-createdAt", label: "Newest" },
+];
+const CONDITION_OPTIONS = [
+    { value: "", label: "Any condition" },
+    { value: "new", label: "New" },
+    { value: "like_new", label: "Like New" },
+    { value: "good", label: "Good" },
+    { value: "fair", label: "Fair" },
+    { value: "used", label: "Used" },
+];
+const EMPTY_DRAFT = {
+    name: "",
+    description: "",
+    category: "",
+    brand: "",
+    condition: "",
+};
+const COLUMNS = [
+    {
+        key: "name",
+        header: "Name",
+        render: (row) => _jsx(Text, { className: "text-sm font-medium", children: row.name }),
+    },
+    {
+        key: "category",
+        header: "Category",
+        render: (row) => (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: row.category || "—" })),
+    },
+    {
+        key: "brand",
+        header: "Brand",
+        render: (row) => (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: row.brand || "—" })),
+    },
+    {
+        key: "condition",
+        header: "Condition",
+        render: (row) => row.condition ? (_jsx("span", { className: "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-100 text-zinc-600 dark:bg-slate-800 dark:text-slate-400 capitalize", children: row.condition.replace(/_/g, " ") })) : (_jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: "\u2014" })),
+    },
+];
+export function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }) {
+    const table = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [pendingCondition, setPendingCondition] = useState(table.get(TABLE_KEYS.CONDITION) || "");
+    // Drawer state
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [drawerMode, setDrawerMode] = useState("create");
+    const [editingId, setEditingId] = useState(null);
+    const [draft, setDraft] = useState(EMPTY_DRAFT);
+    const [saving, setSaving] = useState(false);
+    const [savingError, setSavingError] = useState(null);
+    // Delete state
+    const [deleteTargetId, setDeleteTargetId] = useState(null);
+    const [deletingId, setDeletingId] = useState(null);
+    const [duplicatingId, setDuplicatingId] = useState(null);
+    const commitSearch = useCallback(() => {
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
+    }, [searchInput, table]);
+    const openFilters = useCallback(() => {
+        setPendingCondition(table.get(TABLE_KEYS.CONDITION) || "");
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        table.setMany({ [TABLE_KEYS.CONDITION]: pendingCondition });
+        setFilterOpen(false);
+    }, [pendingCondition, table]);
+    const resetAll = useCallback(() => {
+        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.CONDITION]: "" });
+        setSearchInput("");
+    }, [table]);
+    const q = table.get(TABLE_KEYS.QUERY) || "";
+    const conditionFilter = table.get(TABLE_KEYS.CONDITION) || "";
+    const sort = table.get(TABLE_KEYS.SORT) || DEFAULT_SORT;
+    const currentPage = table.getNumber(TABLE_KEYS.PAGE, 1);
+    const hasActiveState = !!q || sort !== DEFAULT_SORT || !!conditionFilter;
+    const filterActiveCount = conditionFilter ? 1 : 0;
+    // Fetch all templates (server doesn't paginate this endpoint)
+    const { rows: allRows, isLoading, errorMessage, refetch } = useSellerListingData({
+        queryKey: ["seller", "templates"],
+        endpoint: SELLER_ENDPOINTS.TEMPLATES,
+        page: 1,
+        pageSize: 1000,
+        mapRows: (response) => toRecordArray(response.templates).map((item, index) => ({
+            id: toStringValue(item.id, `tpl-${index}`),
+            raw: item,
+            name: String(item.name ?? ""),
+            category: String(item.category ?? ""),
+            brand: String(item.brand ?? ""),
+            condition: String(item.condition ?? ""),
+        })),
+    });
+    // Client-side filter + sort
+    const filteredRows = useMemo(() => {
+        let result = allRows;
+        if (q)
+            result = result.filter((r) => r.name.toLowerCase().includes(q.toLowerCase()));
+        if (conditionFilter)
+            result = result.filter((r) => r.condition === conditionFilter);
+        return [...result].sort((a, b) => sort === "-name" ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name));
+    }, [allRows, q, conditionFilter, sort]);
+    const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE));
+    const safePage = Math.min(Math.max(1, currentPage), totalPages);
+    const pageRows = filteredRows.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
+    const selection = useBulkSelection({ items: filteredRows, keyExtractor: (r) => r.id });
+    // Drawer helpers
+    const openCreate = useCallback(() => {
+        setDraft(EMPTY_DRAFT);
+        setEditingId(null);
+        setDrawerMode("create");
+        setSavingError(null);
+        setDrawerOpen(true);
+    }, []);
+    const openEdit = useCallback((row) => {
+        setDraft({
+            name: row.name,
+            description: String(row.raw.description ?? ""),
+            category: row.category,
+            brand: row.brand,
+            condition: row.condition,
+        });
+        setEditingId(row.id);
+        setDrawerMode("edit");
+        setSavingError(null);
+        setDrawerOpen(true);
+    }, []);
+    const closeDrawer = useCallback(() => {
+        setDrawerOpen(false);
+        setEditingId(null);
+        setSavingError(null);
+    }, []);
+    const handleSave = useCallback(async () => {
+        if (!draft.name.trim()) {
+            setSavingError("Template name is required.");
+            return;
+        }
+        setSaving(true);
+        setSavingError(null);
+        try {
+            const body = {
+                name: draft.name.trim(),
+                description: draft.description.trim() || undefined,
+                category: draft.category.trim() || undefined,
+                brand: draft.brand.trim() || undefined,
+                condition: draft.condition || undefined,
+            };
+            const url = drawerMode === "edit" && editingId
+                ? SELLER_ENDPOINTS.TEMPLATE_BY_ID(editingId)
+                : SELLER_ENDPOINTS.TEMPLATES;
+            const method = drawerMode === "edit" ? "PUT" : "POST";
+            await fetch(url, {
+                method,
+                headers: { "Content-Type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify(body),
+            });
+            closeDrawer();
+            refetch?.();
+        }
+        catch {
+            setSavingError("Failed to save template. Please try again.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [draft, drawerMode, editingId, closeDrawer, refetch]);
+    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?.();
+        }
+        finally {
+            setDeletingId(null);
+            setDeleteTargetId(null);
+        }
+    }, [onDelete, refetch]);
+    const handleDuplicate = useCallback(async (row) => {
+        setDuplicatingId(row.id);
+        try {
+            if (onDuplicate) {
+                await onDuplicate(row);
+            }
+            else {
+                await fetch(SELLER_ENDPOINTS.TEMPLATES, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    credentials: "include",
+                    body: JSON.stringify({
+                        name: `Copy of ${row.name}`,
+                        description: String(row.raw.description ?? "") || undefined,
+                        category: row.category || undefined,
+                        brand: row.brand || undefined,
+                        condition: row.condition || undefined,
+                    }),
+                });
+            }
+            refetch?.();
+        }
+        finally {
+            setDuplicatingId(null);
+        }
+    }, [onDuplicate, refetch]);
+    const bulkActions = [
+        {
+            id: "bulk-delete",
+            label: "Delete selected",
+            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?.();
+            },
+        },
+    ];
+    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-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-4 py-3 text-sm text-red-700 dark:text-red-200", 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-500", 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: [
+                                {
+                                    label: "Edit",
+                                    onClick: () => openEdit(row),
+                                },
+                                {
+                                    label: "Clone",
+                                    disabled: duplicatingId === row.id,
+                                    onClick: () => handleDuplicate(row),
+                                },
+                                {
+                                    label: "Delete",
+                                    destructive: true,
+                                    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-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-3 py-2 text-sm text-red-700 dark:text-red-200", 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/index.d.ts

@@ -97,3 +97,29 @@ export { CategoryInlineSelect } from "./CategoryInlineSelect";
 export type { CategoryInlineSelectProps } from "./CategoryInlineSelect";
 export { BrandInlineSelect } from "./BrandInlineSelect";
 export type { BrandInlineSelectProps } from "./BrandInlineSelect";
+export { SellerGroupedListingsView } from "./SellerGroupedListingsView";
+export type { SellerGroupedListingsViewProps } from "./SellerGroupedListingsView";
+export { SellerGroupedListingsView as StoreGroupedListingsView } from "./SellerGroupedListingsView";
+export type { SellerGroupedListingsViewProps as StoreGroupedListingsViewProps } from "./SellerGroupedListingsView";
+export { SellerAnalyticsAlertsView } from "./SellerAnalyticsAlertsView";
+export type { SellerAnalyticsAlertsViewProps } from "./SellerAnalyticsAlertsView";
+export { SellerAnalyticsAlertsView as StoreAnalyticsAlertsView } from "./SellerAnalyticsAlertsView";
+export type { SellerAnalyticsAlertsViewProps as StoreAnalyticsAlertsViewProps } from "./SellerAnalyticsAlertsView";
+export { SellerStoreCategoriesView } from "./SellerStoreCategoriesView";
+export type { SellerStoreCategoriesViewProps } from "./SellerStoreCategoriesView";
+export { SellerTemplatesView } from "./SellerTemplatesView";
+export type { SellerTemplatesViewProps } from "./SellerTemplatesView";
+export { SellerPayoutMethodsView } from "./SellerPayoutMethodsView";
+export type { SellerPayoutMethodsViewProps } from "./SellerPayoutMethodsView";
+export { SellerShippingConfigsView } from "./SellerShippingConfigsView";
+export type { SellerShippingConfigsViewProps } from "./SellerShippingConfigsView";
+export { SellerGoogleReviewsView } from "./SellerGoogleReviewsView";
+export type { SellerGoogleReviewsViewProps } from "./SellerGoogleReviewsView";
+export { SellerBundlesView } from "./SellerBundlesView";
+export type { SellerBundlesViewProps } from "./SellerBundlesView";
+export { SellerClassifiedView } from "./SellerClassifiedView";
+export type { SellerClassifiedViewProps } from "./SellerClassifiedView";
+export { SellerDigitalCodesView } from "./SellerDigitalCodesView";
+export type { SellerDigitalCodesViewProps } from "./SellerDigitalCodesView";
+export { SellerLiveView } from "./SellerLiveView";
+export type { SellerLiveViewProps } from "./SellerLiveView";

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

@@ -52,3 +52,16 @@ export { SellerAddressesView as StoreAddressesView } from "./SellerAddressesView
 export { SellerBidsView as StoreBidsView } from "./SellerBidsView";
 export { CategoryInlineSelect } from "./CategoryInlineSelect";
 export { BrandInlineSelect } from "./BrandInlineSelect";
+export { SellerGroupedListingsView } from "./SellerGroupedListingsView";
+export { SellerGroupedListingsView as StoreGroupedListingsView } from "./SellerGroupedListingsView";
+export { SellerAnalyticsAlertsView } from "./SellerAnalyticsAlertsView";
+export { SellerAnalyticsAlertsView as StoreAnalyticsAlertsView } from "./SellerAnalyticsAlertsView";
+export { SellerStoreCategoriesView } from "./SellerStoreCategoriesView";
+export { SellerTemplatesView } from "./SellerTemplatesView";
+export { SellerPayoutMethodsView } from "./SellerPayoutMethodsView";
+export { SellerShippingConfigsView } from "./SellerShippingConfigsView";
+export { SellerGoogleReviewsView } from "./SellerGoogleReviewsView";
+export { SellerBundlesView } from "./SellerBundlesView";
+export { SellerClassifiedView } from "./SellerClassifiedView";
+export { SellerDigitalCodesView } from "./SellerDigitalCodesView";
+export { SellerLiveView } from "./SellerLiveView";

package/dist/features/seller/components/seller-products-styles.d.ts

@@ -0,0 +1,7 @@
+export declare const INPUT_CLS = "w-full rounded border border-[var(--appkit-color-border)] bg-transparent px-2 py-1.5 text-sm";
+export declare const FILTER_LABEL_CLS = "text-xs font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-wide";
+export declare const CARD_BORDER = "border-[var(--appkit-color-border)]";
+export declare const CARD_BORDER_ACTIVE = "border-[var(--appkit-color-primary)]";
+export declare const CARD_GRID_CLS = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3";
+export declare const CARD_LIST_CLS = "flex flex-col gap-2";
+export declare const KIND_BADGE_VARIANT: Record<string, "default" | "primary" | "secondary" | "success" | "warning" | "danger">;

package/dist/features/seller/components/seller-products-styles.js

@@ -0,0 +1,14 @@
+// S-STORE — shared style constants for SellerProductsView and its sub-components.
+// Token-based — no raw hex / breakpoint literals.
+export const INPUT_CLS = "w-full rounded border border-[var(--appkit-color-border)] bg-transparent px-2 py-1.5 text-sm";
+export const FILTER_LABEL_CLS = "text-xs font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-wide";
+export const CARD_BORDER = "border-[var(--appkit-color-border)]";
+export const CARD_BORDER_ACTIVE = "border-[var(--appkit-color-primary)]";
+export const CARD_GRID_CLS = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3";
+export const CARD_LIST_CLS = "flex flex-col gap-2";
+export const KIND_BADGE_VARIANT = {
+    auction: "warning",
+    "pre-order": "secondary",
+    "prize-draw": "primary",
+    standard: "default",
+};

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

@@ -26,6 +26,12 @@ export interface FormShellProps {
      * A draft banner and "← Back to Edit" button are injected automatically.
      */
     previewSlot?: () => ReactNode;
+    /**
+     * S-STORE-3-D — when true AND previewSlot is provided, desktop renders a
+     * 60/40 split with form on the left and live preview on the right.
+     * On mobile the preview reverts to a toggleable modal-style view.
+     */
+    splitPreview?: boolean;
     children: ReactNode;
 }
 export interface UseFormShellResult {
@@ -34,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, 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, children, }: FormShellProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/shell/FormShell.js

@@ -15,7 +15,7 @@ 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, 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 = false, children, }) {
     const panelRef = useRef(null);
     const bodyRef = useRef(null);
     const [showUnsaved, setShowUnsaved] = useState(false);
@@ -102,5 +102,8 @@ export function FormShell({ isOpen, onClose, title, breadcrumb, isDirty = false,
     };
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs("div", { className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3 flex items-center gap-3", children: [previewMode ? (_jsxs("button", { type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0 flex items-center gap-1.5 text-sm", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx("span", { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx("button", { type: "button", onClick: attemptClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] truncate mb-0.5", children: breadcrumb })), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] truncate", children: previewMode ? `Preview — ${title}` : title })] }), _jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs("button", { type: "button", onClick: () => setPreviewMode(true), className: "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors border border-[var(--appkit-color-border)]", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx("span", { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-4 px-3 gap-1 overflow-y-auto", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "text-left text-sm px-3 py-2 rounded-lg text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx("div", { className: "lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 flex overflow-x-auto gap-1 px-5 py-2 bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "flex-shrink-0 text-xs px-3 py-1.5 rounded-full border border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] transition-colors whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx("div", { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-0 lg:pt-0" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-2 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] px-4 py-2 text-sm text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx("span", { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx("div", { className: "py-4", children: previewSlot() })] })) : (_jsx("div", { className: "max-w-3xl mx-auto px-5 py-6 sm:px-6", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs("div", { className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3 flex items-center justify-between", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs("div", { className: "flex items-center gap-2", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/60", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, onClick: () => setShowUnsaved(false) }), _jsxs("div", { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)] rounded-xl shadow-2xl p-6", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, children: [_jsxs("div", { className: "flex gap-3 mb-4", children: [_jsx("span", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--appkit-color-warning-surface)] flex items-center justify-center", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)]", children: "Unsaved changes" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] mt-1", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs("div", { className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3 flex items-center gap-3", children: [previewMode ? (_jsxs("button", { type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0 flex items-center gap-1.5 text-sm", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx("span", { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx("button", { type: "button", onClick: attemptClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] truncate mb-0.5", children: breadcrumb })), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] truncate", children: previewMode ? `Preview — ${title}` : title })] }), _jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs("button", { type: "button", onClick: () => setPreviewMode(true), className: "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors border border-[var(--appkit-color-border)]", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx("span", { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-4 px-3 gap-1 overflow-y-auto", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "text-left text-sm px-3 py-2 rounded-lg text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx("div", { className: "lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 flex overflow-x-auto gap-1 px-5 py-2 bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "flex-shrink-0 text-xs px-3 py-1.5 rounded-full border border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] transition-colors whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx("div", { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-0 lg:pt-0" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-2 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] px-4 py-2 text-sm text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx("span", { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx("div", { className: "py-4", children: previewSlot() })] })) : splitPreview && previewSlot ? (
+                                // S-STORE-3-D — desktop 60/40 split: form left, preview right.
+                                // Below `lg`, falls back to single-column form (preview-as-modal via existing toggle).
+                                _jsxs("div", { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-6 lg:px-6 lg:py-6 lg:max-w-[1400px] lg:mx-auto", children: [_jsx("div", { className: "max-w-3xl mx-auto px-5 py-6 sm:px-6 lg:max-w-none lg:px-0 lg:py-0", children: children }), _jsxs("div", { className: "hidden lg:block sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-6rem)] overflow-y-auto border border-[var(--appkit-color-border)] rounded-lg bg-[var(--appkit-color-surface-raised)] p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3 text-xs font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: [_jsx(Eye, { className: "w-3.5 h-3.5" }), _jsx("span", { children: "Live preview" })] }), previewSlot()] })] })) : (_jsx("div", { className: "max-w-3xl mx-auto px-5 py-6 sm:px-6", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs("div", { className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-5 py-3 flex items-center justify-between", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs("div", { className: "flex items-center gap-2", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/60", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, onClick: () => setShowUnsaved(false) }), _jsxs("div", { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)] rounded-xl shadow-2xl p-6", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, children: [_jsxs("div", { className: "flex gap-3 mb-4", children: [_jsx("span", { className: "flex-shrink-0 w-10 h-10 rounded-full bg-[var(--appkit-color-warning-surface)] flex items-center justify-center", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)]", children: "Unsaved changes" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] mt-1", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
 }

package/dist/features/store-extensions/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./schemas/firestore";
+export * from "./schemas/rbac";
+export * from "./repository/store-extensions.repositories";
+export * from "./repository/rbac.repositories";

package/dist/features/store-extensions/index.js

@@ -0,0 +1,4 @@
+export * from "./schemas/firestore";
+export * from "./schemas/rbac";
+export * from "./repository/store-extensions.repositories";
+export * from "./repository/rbac.repositories";

package/dist/features/store-extensions/repository/rbac.repositories.d.ts

@@ -0,0 +1,23 @@
+import { BaseRepository } from "../../../providers/db-firebase";
+import { type AdminNotificationDocument, type CustomRoleDocument, type RoleOverrideDocument } from "../schemas/rbac";
+export declare class RoleOverridesRepository extends BaseRepository<RoleOverrideDocument> {
+    constructor();
+    listForUser(userId: string): Promise<{
+        items: RoleOverrideDocument[];
+    }>;
+}
+export declare class CustomRolesRepository extends BaseRepository<CustomRoleDocument> {
+    constructor();
+    listActive(): Promise<{
+        items: CustomRoleDocument[];
+    }>;
+}
+export declare class AdminNotificationsRepository extends BaseRepository<AdminNotificationDocument> {
+    constructor();
+    listUnread(): Promise<{
+        items: AdminNotificationDocument[];
+    }>;
+}
+export declare const roleOverridesRepository: RoleOverridesRepository;
+export declare const customRolesRepository: CustomRolesRepository;
+export declare const adminNotificationsRepository: AdminNotificationsRepository;

package/dist/features/store-extensions/repository/rbac.repositories.js

@@ -0,0 +1,32 @@
+import { BaseRepository } from "../../../providers/db-firebase";
+import { ADMIN_NOTIFICATIONS_COLLECTION, CUSTOM_ROLES_COLLECTION, ROLE_OVERRIDES_COLLECTION, } from "../schemas/rbac";
+export class RoleOverridesRepository extends BaseRepository {
+    constructor() {
+        super(ROLE_OVERRIDES_COLLECTION);
+    }
+    async listForUser(userId) {
+        const items = await this.findBy("userId", userId);
+        return { items };
+    }
+}
+export class CustomRolesRepository extends BaseRepository {
+    constructor() {
+        super(CUSTOM_ROLES_COLLECTION);
+    }
+    async listActive() {
+        const all = await this.findAll(50);
+        return { items: all.filter((d) => d.isActive !== false) };
+    }
+}
+export class AdminNotificationsRepository extends BaseRepository {
+    constructor() {
+        super(ADMIN_NOTIFICATIONS_COLLECTION);
+    }
+    async listUnread() {
+        const items = await this.findBy("isRead", false);
+        return { items };
+    }
+}
+export const roleOverridesRepository = new RoleOverridesRepository();
+export const customRolesRepository = new CustomRolesRepository();
+export const adminNotificationsRepository = new AdminNotificationsRepository();

package/dist/features/store-extensions/repository/store-extensions.repositories.d.ts

@@ -0,0 +1,91 @@
+/**
+ * S-STORE Extension Repositories
+ *
+ * 11 lightweight BaseRepository subclasses. None of these collections store
+ * PII directly so no `createWithId` override is required (Pattern #9). Uses
+ * the BaseRepository public API only: `findById`, `findBy`, `findAll`,
+ * `create`, `update`, `delete`.
+ */
+import { BaseRepository } from "../../../providers/db-firebase";
+import { type AnalyticsAlertDocument, type AnalyticsCardDocument, type ItemRequestDocument, type ListingTemplateDocument, type ModerationQueueDocument, type PayoutMethodDocument, type ReportDocument, type ShippingConfigDocument, type StoreCategoryDocument, type StoreGoogleConfigDocument, type StoreWhatsAppConfigDocument } from "../schemas/firestore";
+export declare class PayoutMethodsRepository extends BaseRepository<PayoutMethodDocument> {
+    constructor();
+    listByStore(storeId: string): Promise<{
+        items: PayoutMethodDocument[];
+    }>;
+}
+export declare class ShippingConfigsRepository extends BaseRepository<ShippingConfigDocument> {
+    constructor();
+    listByStore(storeId: string): Promise<{
+        items: ShippingConfigDocument[];
+    }>;
+}
+export declare class AnalyticsCardsRepository extends BaseRepository<AnalyticsCardDocument> {
+    constructor();
+    listForOwner(scope: "seller" | "admin", ownerId: string): Promise<{
+        items: AnalyticsCardDocument[];
+    }>;
+}
+export declare class AnalyticsAlertsRepository extends BaseRepository<AnalyticsAlertDocument> {
+    constructor();
+    listForOwner(scope: "seller" | "admin", ownerId: string): Promise<{
+        items: AnalyticsAlertDocument[];
+    }>;
+}
+export declare class StoreCategoriesRepository extends BaseRepository<StoreCategoryDocument> {
+    constructor();
+    listByStore(storeId: string): Promise<{
+        items: StoreCategoryDocument[];
+    }>;
+}
+export declare class ListingTemplatesRepository extends BaseRepository<ListingTemplateDocument> {
+    constructor();
+    listByStore(storeId: string): Promise<{
+        items: ListingTemplateDocument[];
+    }>;
+}
+export declare class ModerationQueueRepository extends BaseRepository<ModerationQueueDocument> {
+    constructor();
+    listPending(): Promise<{
+        items: ModerationQueueDocument[];
+    }>;
+}
+export declare class ReportsRepository extends BaseRepository<ReportDocument> {
+    constructor();
+    listForEntity(entityType: string, entityId: string): Promise<{
+        items: ReportDocument[];
+    }>;
+    listPending(): Promise<{
+        items: ReportDocument[];
+    }>;
+}
+export declare class ItemRequestsRepository extends BaseRepository<ItemRequestDocument> {
+    constructor();
+    listOpen(opts?: {
+        limit?: number;
+    }): Promise<{
+        items: ItemRequestDocument[];
+    }>;
+    listByOwner(opUserId: string): Promise<{
+        items: ItemRequestDocument[];
+    }>;
+}
+export declare class StoreWhatsAppConfigRepository extends BaseRepository<StoreWhatsAppConfigDocument> {
+    constructor();
+    getByStore(storeId: string): Promise<StoreWhatsAppConfigDocument | null>;
+}
+export declare class StoreGoogleConfigRepository extends BaseRepository<StoreGoogleConfigDocument> {
+    constructor();
+    getByStore(storeId: string): Promise<StoreGoogleConfigDocument | null>;
+}
+export declare const payoutMethodsRepository: PayoutMethodsRepository;
+export declare const shippingConfigsRepository: ShippingConfigsRepository;
+export declare const analyticsCardsRepository: AnalyticsCardsRepository;
+export declare const analyticsAlertsRepository: AnalyticsAlertsRepository;
+export declare const storeCategoriesRepository: StoreCategoriesRepository;
+export declare const listingTemplatesRepository: ListingTemplatesRepository;
+export declare const moderationQueueRepository: ModerationQueueRepository;
+export declare const reportsRepository: ReportsRepository;
+export declare const itemRequestsRepository: ItemRequestsRepository;
+export declare const storeWhatsAppConfigRepository: StoreWhatsAppConfigRepository;
+export declare const storeGoogleConfigRepository: StoreGoogleConfigRepository;