@mohasinac/appkit 2.4.11 → 2.5.0

package/dist/features/admin/components/AdminFeatureEditorView.d.ts

@@ -0,0 +1,19 @@
+import type { StackedViewShellProps } from "../../../ui";
+import type { ProductFeatureScope } from "../../products/schemas/product-features";
+export interface AdminFeatureEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
+    featureId?: string;
+    /** Force a fixed scope (store editor uses scope=store + readonly storeId). */
+    fixedScope?: ProductFeatureScope;
+    /** Force a fixed storeId (store editor passes the seller's store). */
+    fixedStoreId?: string;
+    /** When true, omit StackedViewShell wrapper (SideDrawer body). */
+    embedded?: boolean;
+    /** Override the create/update endpoint set (used by store API path). */
+    endpointOverride?: {
+        create: string;
+        byId: (id: string) => string;
+    };
+    onSaved?: (id: string) => void;
+    onDeleted?: () => void;
+}
+export declare function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, embedded, endpointOverride, onSaved, onDeleted, ...rest }: AdminFeatureEditorViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/admin/components/AdminFeatureEditorView.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Button, Div, Form, Grid, Input, Select, Stack, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ERROR_MESSAGES } from "../../../errors/messages";
+import { PRODUCT_FEATURE_CATEGORY_OPTIONS, PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER, PRODUCT_FEATURE_ICON_COLOR_OPTIONS, PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS, PRODUCT_FEATURE_SCOPE_OPTIONS, } from "../../products/constants/product-features.constants";
+const PILL_BASE_CLASS = "inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium cursor-pointer transition-colors";
+const PILL_CHECKED_CLASS = "bg-primary text-white border-primary";
+const PILL_UNCHECKED_CLASS = "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800";
+const FIELD_LABEL_CLASS = "text-sm font-medium text-zinc-700 dark:text-zinc-300";
+const DELETE_CONFIRM_TEXT = "Delete this feature? It will fail if any product still references it.";
+const TOAST = {
+    CREATED: "Feature created.",
+    UPDATED: "Feature updated.",
+    DELETED: "Feature deleted.",
+};
+export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, embedded, endpointOverride, onSaved, onDeleted, ...rest }) {
+    const isEdit = Boolean(featureId);
+    const { showToast } = useToast();
+    const [label, setLabel] = React.useState("");
+    const [description, setDescription] = React.useState("");
+    const [icon, setIcon] = React.useState("");
+    const [iconColor, setIconColor] = React.useState("");
+    const [category, setCategory] = React.useState("platform");
+    const [scope, setScope] = React.useState(fixedScope ?? "platform");
+    const [productTypes, setProductTypes] = React.useState(["all"]);
+    const [storeId, setStoreId] = React.useState(fixedStoreId ?? "");
+    const [isActive, setIsActive] = React.useState(true);
+    const [displayOrder, setDisplayOrder] = React.useState(String(PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER));
+    const createEndpoint = endpointOverride?.create ?? ADMIN_ENDPOINTS.PRODUCT_FEATURES;
+    const byIdEndpoint = endpointOverride?.byId ?? ADMIN_ENDPOINTS.PRODUCT_FEATURE_BY_ID;
+    const featureQuery = useQuery({
+        queryKey: ["admin", "feature", featureId],
+        queryFn: async () => {
+            const res = await apiClient.get(byIdEndpoint(featureId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    const storesQuery = useQuery({
+        queryKey: ["admin", "feature-editor", "stores"],
+        queryFn: async () => {
+            const res = await apiClient.get(`${ADMIN_ENDPOINTS.STORES}?pageSize=200&sorts=storeName`);
+            const body = res?.data ?? res;
+            return body?.items ?? [];
+        },
+        enabled: scope === "store" && !fixedStoreId,
+    });
+    React.useEffect(() => {
+        const f = featureQuery.data;
+        if (!f)
+            return;
+        setLabel(f.label ?? "");
+        setDescription(f.description ?? "");
+        setIcon(f.icon ?? "");
+        setIconColor(f.iconColor ?? "");
+        setCategory(f.category ?? "platform");
+        if (!fixedScope)
+            setScope(f.scope ?? "platform");
+        setProductTypes(f.productTypes ?? ["all"]);
+        if (!fixedStoreId)
+            setStoreId(f.storeId ?? "");
+        setIsActive(f.isActive ?? true);
+        setDisplayOrder(f.displayOrder !== undefined
+            ? String(f.displayOrder)
+            : String(PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER));
+    }, [featureQuery.data, fixedScope, fixedStoreId]);
+    const toggleProductType = (value) => {
+        setProductTypes((prev) => {
+            if (value === "all")
+                return ["all"];
+            const next = prev.filter((v) => v !== "all");
+            return next.includes(value)
+                ? next.filter((v) => v !== value)
+                : [...next, value];
+        });
+    };
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                label,
+                description: description || undefined,
+                icon,
+                iconColor: iconColor || undefined,
+                category,
+                scope,
+                productTypes: productTypes.length === 0 ? ["all"] : productTypes,
+                storeId: scope === "store" ? storeId || undefined : undefined,
+                isActive,
+                displayOrder: Number(displayOrder) || PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER,
+            };
+            if (isEdit) {
+                return apiClient.put(byIdEndpoint(featureId), payload);
+            }
+            return apiClient.post(createEndpoint, payload);
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ??
+                res?.id ??
+                featureId;
+            showToast(isEdit ? TOAST.UPDATED : TOAST.CREATED, "success");
+            if (onSaved && id)
+                onSaved(String(id));
+        },
+        onError: (err) => {
+            showToast(err?.message ??
+                (isEdit
+                    ? ERROR_MESSAGES.PRODUCT_FEATURES.UPDATE_FAILED
+                    : ERROR_MESSAGES.PRODUCT_FEATURES.CREATE_FAILED), "error");
+        },
+    });
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(byIdEndpoint(featureId)),
+        onSuccess: () => {
+            showToast(TOAST.DELETED, "success");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => showToast(err?.message ??
+            ERROR_MESSAGES.PRODUCT_FEATURES.DELETE_FAILED, "error"),
+    });
+    const isSubmitting = saveMutation.isPending || featureQuery.isLoading;
+    const storeOptions = React.useMemo(() => [
+        { value: "", label: "Select a store…" },
+        ...(storesQuery.data ?? []).map((s) => ({
+            value: s.id,
+            label: s.storeName ?? s.id,
+        })),
+    ], [storesQuery.data]);
+    const isDisabled = !label || !icon || (scope === "store" && !storeId) || isSubmitting;
+    const formSection = (_jsx(Form, { onSubmit: (e) => {
+            e.preventDefault();
+            saveMutation.mutate();
+        }, children: _jsxs(Stack, { gap: "md", children: [_jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Free Shipping", helperText: "Shown on product cards and detail pages." }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Optional \u2014 shown as a tooltip on the badge." }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Input, { label: "Icon", value: icon, onChange: (e) => setIcon(e.target.value), required: true, placeholder: "truck", helperText: "Icon-set name key (e.g. truck, star, trophy) OR an SVG path starting with M." }), _jsx(Select, { label: "Icon colour", value: iconColor, onChange: (e) => setIconColor(e.target.value), options: PRODUCT_FEATURE_ICON_COLOR_OPTIONS })] }), _jsxs(Grid, { cols: "halves", gap: "md", children: [_jsx(Select, { label: "Category", value: category, onChange: (e) => setCategory(e.target.value), options: PRODUCT_FEATURE_CATEGORY_OPTIONS, required: true }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0 })] }), _jsxs(Div, { children: [_jsx(Text, { className: FIELD_LABEL_CLASS, children: "Applies to" }), _jsx(Div, { className: "flex flex-wrap gap-2 mt-2", children: PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS.map((opt) => {
+                                const checked = productTypes.includes(opt.value);
+                                const pillClass = `${PILL_BASE_CLASS} ${checked ? PILL_CHECKED_CLASS : PILL_UNCHECKED_CLASS}`;
+                                return (_jsxs("label", { className: pillClass, children: [_jsx("input", { type: "checkbox", className: "sr-only", checked: checked, onChange: () => toggleProductType(opt.value) }), opt.label] }, opt.value));
+                            }) })] }), !fixedScope && (_jsx(Select, { label: "Scope", value: scope, onChange: (e) => setScope(e.target.value), options: PRODUCT_FEATURE_SCOPE_OPTIONS })), scope === "store" && !fixedStoreId && (_jsx(Select, { label: "Store", value: storeId, onChange: (e) => setStoreId(e.target.value), options: storeOptions, required: true, helperText: "Store-scope features are visible only on this store's listings." })), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Div, { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: isDisabled, children: isEdit ? "Save changes" : "Create feature" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                if (confirm(DELETE_CONFIRM_TEXT)) {
+                                    deleteMutation.mutate();
+                                }
+                            }, children: "Delete" }))] })] }) }, "feature-form"));
+    if (embedded) {
+        return _jsx(Div, { className: "overflow-y-auto p-4", children: formSection });
+    }
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Feature" : "New Feature", sections: [formSection] }));
+}

package/dist/features/admin/components/AdminFeaturesView.d.ts

@@ -0,0 +1,4 @@
+import type { ListingViewShellProps } from "../../../ui";
+export interface AdminFeaturesViewProps extends ListingViewShellProps {
+}
+export declare function AdminFeaturesView({ children, ...props }: AdminFeaturesViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/admin/components/AdminFeaturesView.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Plus } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
+import { Button, Div, ListingToolbar, ListingViewShell, Pagination, Row, SideDrawer, Text, } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { DataTable } from "./DataTable";
+import { AdminFeatureEditorView } from "./AdminFeatureEditorView";
+import { PRODUCT_FEATURE_SCOPE_TABS } from "../../products/constants/product-features.constants";
+const PAGE_SIZE = 50;
+const DEFAULT_SORT = "displayOrder";
+const DEFAULT_SCOPE = "platform";
+const SORT_OPTIONS = [
+    { value: "displayOrder", label: "Display order" },
+    { value: "label", label: "Label A–Z" },
+    { value: "-label", label: "Label Z–A" },
+    { value: "-createdAt", label: "Newest" },
+];
+const STICKY_TABS_CLASS = "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex gap-2 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-2";
+const TAB_BASE_CLASS = "rounded-full px-3 py-1 text-xs font-medium border transition-colors";
+const TAB_ACTIVE_CLASS = "bg-primary text-white border-primary";
+const TAB_INACTIVE_CLASS = "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800";
+const PAGINATION_BAR_CLASS = "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";
+const ERROR_BANNER_CLASS = "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200";
+function mapFeatureRow(item, index) {
+    const productTypes = Array.isArray(item.productTypes)
+        ? item.productTypes
+        : [];
+    const isActive = typeof item.isActive === "boolean" ? item.isActive : true;
+    return {
+        id: toStringValue(item.id, `feature-${index}`),
+        primary: toStringValue(item.label, "Untitled feature"),
+        secondary: [
+            toStringValue(item.category, ""),
+            productTypes.join(" · "),
+            item.scope === "store" && item.storeId
+                ? `store: ${item.storeId}`
+                : "",
+        ]
+            .filter(Boolean)
+            .join(" — "),
+        status: isActive ? "Active" : "Inactive",
+        updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+    };
+}
+export function AdminFeaturesView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const table = useUrlTable({
+        defaults: {
+            pageSize: String(PAGE_SIZE),
+            sort: DEFAULT_SORT,
+            scope: DEFAULT_SCOPE,
+        },
+    });
+    const { openCreatePanel, openEditPanel, closePanel, isCreateOpen, isEditOpen, editId, } = usePanelUrlSync();
+    const [searchInput, setSearchInput] = React.useState(table.get("q") || "");
+    const commitSearch = React.useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const resetAll = React.useCallback(() => {
+        table.setMany({ q: "", sort: "", scope: DEFAULT_SCOPE });
+        setSearchInput("");
+    }, [table]);
+    const scopeFilter = table.get("scope") || DEFAULT_SCOPE;
+    const hasActiveState = !!table.get("q") ||
+        table.get("sort") !== DEFAULT_SORT ||
+        scopeFilter !== DEFAULT_SCOPE;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "features", "listing", scopeFilter],
+        endpoint: `${ADMIN_ENDPOINTS.PRODUCT_FEATURES}?scope=${scopeFilter}`,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        q: table.get("q") || undefined,
+        mapRows: (response) => toRecordArray(response.items).map(mapFeatureRow),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+    if (hasChildren) {
+        return (_jsx(ListingViewShell, { portal: "admin", ...props, children: children }));
+    }
+    const tabClass = (value) => `${TAB_BASE_CLASS} ${scopeFilter === value ? TAB_ACTIVE_CLASS : TAB_INACTIVE_CLASS}`;
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { searchValue: searchInput, searchPlaceholder: "Search features by label", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => {
+                    table.set("sort", v);
+                    table.setPage(1);
+                }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Feature"] }) }), _jsx(Row, { className: STICKY_TABS_CLASS, gap: "xs", children: PRODUCT_FEATURE_SCOPE_TABS.map((tab) => (_jsx("button", { type: "button", onClick: () => {
+                        table.set("scope", tab.value);
+                        table.setPage(1);
+                    }, className: tabClass(tab.value), children: tab.label }, tab.value))) }), totalPages > 1 && (_jsx(Div, { className: PAGINATION_BAR_CLASS, children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs(Div, { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Text, { as: "div", className: ERROR_BANNER_CLASS, children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No features found", onRowClick: (row) => openEditPanel(row.id) })] }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Feature" : "Edit Feature", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminFeatureEditorView, { featureId: editId ?? undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })) })] }));
+}

package/dist/features/admin/components/AdminHistoryView.d.ts

@@ -0,0 +1,4 @@
+import type { ListingViewShellProps } from "../../../ui";
+export interface AdminHistoryViewProps extends ListingViewShellProps {
+}
+export declare function AdminHistoryView({ children, ...props }: AdminHistoryViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/admin/components/AdminHistoryView.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AdminHistoryView — read-only admin insights for the top-level `history` collection.
+ * One row per user with item count + last visit. Mirrors AdminWishlistsView.
+ */
+import React, { useState, useCallback } from "react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { DataTable } from "./DataTable";
+const PAGE_SIZE = 25;
+const DEFAULT_SORT = "-updatedAt";
+const SORT_OPTIONS = [
+    { value: "-updatedAt", label: "Recently active" },
+    { value: "-itemCount", label: "Largest first" },
+];
+export function AdminHistoryView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const resetAll = useCallback(() => {
+        table.setMany({ q: "", sort: "" });
+        setSearchInput("");
+    }, [table]);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+    }, [searchInput, table]);
+    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "history", "listing"],
+        endpoint: ADMIN_ENDPOINTS.ADMIN_HISTORY,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        q: table.get("q") || undefined,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+            const itemCount = typeof item.itemCount === "number" ? item.itemCount : 0;
+            const limit = typeof item.limit === "number" ? item.limit : 50;
+            return {
+                id: toStringValue(item.id, `hist-${index}`),
+                primary: toStringValue(item.userId, "Unknown user"),
+                secondary: `${itemCount} of ${limit} items`,
+                status: itemCount >= limit ? "At cap" : itemCount >= limit - 5 ? "Near cap" : "OK",
+                updatedAt: toRelativeDate(item.updatedAt),
+            };
+        }),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+    if (hasChildren) {
+        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    }
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: 0, searchValue: searchInput, searchPlaceholder: "Search by user ID", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), 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) }) })), _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 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No user history records found" })] })] }));
+}

package/dist/features/admin/components/AdminMediaView.js

@@ -1,8 +1,69 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Alert, Button, Div, StackedViewShell, Text, } from "../../../ui";
+import { Alert, Button, Div, Input, Select, StackedViewShell, Text, } from "../../../ui";
 import { MediaUploadField, MediaUploadList, useMediaCleanup, useMediaUpload, } from "../../media";
+const PREFIX_OPTIONS = [
+    { value: "", label: "All" },
+    { value: "products/", label: "Products" },
+    { value: "auctions/", label: "Auctions" },
+    { value: "preorders/", label: "Pre-orders" },
+    { value: "stores/", label: "Stores" },
+    { value: "blog/", label: "Blog" },
+    { value: "events/", label: "Events" },
+    { value: "carousel/", label: "Carousel" },
+    { value: "users/", label: "Users" },
+    { value: "admin/", label: "Admin sandbox" },
+];
+function MediaBrowser({ onCopy }) {
+    const [prefix, setPrefix] = React.useState("");
+    const [search, setSearch] = React.useState("");
+    const [files, setFiles] = React.useState([]);
+    const [nextPageToken, setNextPageToken] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const load = React.useCallback(async (token) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const params = new URLSearchParams();
+            if (prefix)
+                params.set("prefix", prefix);
+            if (token)
+                params.set("pageToken", token);
+            const res = await fetch(`/api/admin/media?${params.toString()}`, {
+                credentials: "include",
+            });
+            if (!res.ok)
+                throw new Error("Failed to list media");
+            const data = (await res.json());
+            setFiles((prev) => (token ? [...prev, ...data.data.files] : data.data.files));
+            setNextPageToken(data.data.nextPageToken ?? null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load");
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [prefix]);
+    React.useEffect(() => {
+        void load(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [prefix]);
+    const filtered = React.useMemo(() => {
+        const q = search.trim().toLowerCase();
+        if (!q)
+            return files;
+        return files.filter((f) => f.name.toLowerCase().includes(q));
+    }, [files, search]);
+    return (_jsxs(Div, { className: "space-y-3 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Browse existing media" }), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", className: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
+                        const isImage = (f.contentType ?? "").startsWith("image/");
+                        return (_jsxs(Div, { className: "group rounded-lg border border-zinc-200 dark:border-slate-700 overflow-hidden bg-zinc-50 dark:bg-slate-800", children: [_jsx(Div, { className: "aspect-square flex items-center justify-center bg-zinc-100 dark:bg-slate-700 text-xs text-zinc-500 dark:text-zinc-400", children: isImage ? (
+                                    // eslint-disable-next-line @next/next/no-img-element
+                                    _jsx("img", { src: f.downloadURL, alt: f.name, className: "h-full w-full object-cover", loading: "lazy" })) : (_jsx(Text, { className: "px-2 text-center break-all", children: f.contentType ?? "file" })) }), _jsxs(Div, { className: "p-1.5", children: [_jsx(Text, { className: "truncate text-[10px] text-zinc-600 dark:text-zinc-400 font-mono", children: f.name.split("/").pop() }), _jsx(Button, { type: "button", variant: "ghost", className: "mt-1 w-full text-xs", onClick: () => onCopy(f.downloadURL), children: "Copy URL" })] })] }, f.name));
+                    }), filtered.length === 0 && !isLoading && (_jsx(Text, { className: "col-span-full py-6 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No files found." }))] }), _jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [filtered.length, " file(s)", nextPageToken ? " · more available" : ""] }), nextPageToken && (_jsx(Button, { type: "button", variant: "outline", onClick: () => void load(nextPageToken), disabled: isLoading, children: isLoading ? "Loading…" : "Load more" }))] })] }));
+}
 export function AdminMediaView({ labels = {}, children, ...rest }) {
     const hasChildren = React.Children.count(children) > 0;
     const { upload, isPending: isUploadPending } = useMediaUpload();
@@ -49,7 +110,8 @@ export function AdminMediaView({ labels = {}, children, ...rest }) {
         return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Media Library", sections: [children] }));
     }
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Media Library", sections: [
-            _jsx(Alert, { variant: "info", title: "Upload sandbox", children: "Upload files and copy the resulting URL for use in forms. Browsing all stored media files requires the I4 media library infrastructure (deferred)." }, "media-info"),
+            _jsx(Alert, { variant: "info", title: "Media Library", children: "Upload new files in the sandbox below, or browse the existing Storage bucket via the grid." }, "media-info"),
+            _jsx(MediaBrowser, { onCopy: copyToClipboard }, "media-browser"),
             operationMessage ? (_jsx(Alert, { variant: operationMessage.startsWith("Failed") || operationMessage.startsWith("Some") || operationMessage.startsWith("Could") ? "error" : "success", title: "Media", children: operationMessage }, "media-op-message")) : null,
             _jsxs(Div, { className: "space-y-5 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Upload & Copy URL" }), _jsx(MediaUploadField, { label: "Primary media asset", value: heroAssetUrl, onChange: setHeroAssetUrl, onUpload: onUpload, helperText: "Uploads to /api/media/upload and previews the returned URL.", onAbort: handleAbort, onStagedUrlsChange: setStagedUrls }), heroAssetUrl && (_jsxs(Div, { className: "flex items-center gap-2 rounded-lg bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 px-3 py-2", children: [_jsx(Text, { className: "flex-1 truncate text-xs text-zinc-600 dark:text-zinc-400 font-mono", children: heroAssetUrl }), _jsx(Button, { type: "button", variant: "outline", onClick: () => copyToClipboard(heroAssetUrl), children: copiedUrl === heroAssetUrl ? "Copied!" : "Copy URL" })] })), _jsx(MediaUploadList, { label: "Gallery assets", value: galleryAssets, onChange: setGalleryAssets, onUpload: onUpload, helperText: "Attach multiple images or videos for batch checks.", onAbort: handleAbort, onStagedUrlsChange: setStagedUrls, maxItems: 12 }), galleryAssets.length > 0 && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 font-medium", children: "Gallery URLs" }), galleryAssets.map((asset, i) => (_jsxs(Div, { className: "flex items-center gap-2 rounded bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 px-2 py-1", children: [_jsx(Text, { className: "flex-1 truncate text-xs text-zinc-600 dark:text-zinc-400 font-mono", children: asset.url }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => copyToClipboard(asset.url), children: copiedUrl === asset.url ? "Copied!" : "Copy" })] }, i)))] })), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                     setHeroAssetUrl("");

package/dist/features/admin/components/AdminOrdersView.js

@@ -3,7 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState, useCallback } from "react";
 import { X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { ListingToolbar, Pagination, ListingViewShell, RowActionMenu } from "../../../ui";
+import { ListingToolbar, Pagination, ListingViewShell, useToast } from "../../../ui";
+import { apiClient } from "../../../http";
+import { QuickEditMenu } from "./QuickEditMenu";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
 import { DataTable } from "./DataTable";
@@ -18,6 +20,7 @@ const SORT_OPTIONS = [
 const STATUS_OPTIONS = ["All", "PENDING", "PROCESSING", "SHIPPED", "DELIVERED", "CANCELLED", "REFUNDED", "RETURN_REQUESTED"];
 export function AdminOrdersView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    const { showToast } = useToast();
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get("q") || "");
     const [filterOpen, setFilterOpen] = useState(false);
@@ -73,15 +76,39 @@ export function AdminOrdersView({ children, ...props }) {
         })),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
     });
+    const handleQuickStatus = useCallback(async (id, status) => {
+        try {
+            await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(id), { status });
+            showToast("Order status updated.", "success");
+        }
+        catch (err) {
+            showToast(err?.message ?? "Failed to update order.", "error");
+            throw err;
+        }
+    }, [showToast]);
     const currentPage = table.getNumber("page", 1);
     const totalPages = Math.ceil(total / PAGE_SIZE);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search orders, buyers, or tracking IDs", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), 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) }) })), _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 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No orders found", renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [{
-                                            label: "Update order",
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search orders, buyers, or tracking IDs", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), 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) }) })), _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 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No orders found", renderRowActions: (row) => (_jsx(QuickEditMenu, { actions: [
+                                        {
+                                            label: "View full details",
                                             onClick: () => { setSelectedRow(row); setDrawerOpen(true); },
-                                        }] })) })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt
+                                        },
+                                        {
+                                            label: "Update status",
+                                            separator: true,
+                                            formTitle: "Update Order Status",
+                                            fields: [
+                                                { name: "status", label: "Status", type: "select", required: true,
+                                                    options: STATUS_OPTIONS.filter((o) => o !== "All").map((o) => ({ value: o, label: o })) },
+                                            ],
+                                            defaultValues: { status: row.status },
+                                            onSubmit: (vals) => handleQuickStatus(row.id, String(vals.status ?? "")),
+                                            submitLabel: "Update",
+                                        },
+                                    ] })) })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt
                                                             ? "bg-primary text-white border-primary"
                                                             : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }), _jsx(AdminOrderEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), orderId: selectedRow?.id, orderLabel: selectedRow?.primary, currentStatus: selectedRow?.status })] }));
 }

package/dist/features/admin/components/AdminProductEditorView.d.ts

@@ -3,5 +3,6 @@ export interface AdminProductEditorViewProps extends Omit<StackedViewShellProps,
     productId?: string;
     onSaved?: (id: string) => void;
     onDeleted?: () => void;
+    embedded?: boolean;
 }
-export declare function AdminProductEditorView({ productId, onSaved, onDeleted, ...rest }: AdminProductEditorViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminProductEditorView({ productId, onSaved, onDeleted, embedded, ...rest }: AdminProductEditorViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/admin/components/AdminProductEditorView.js

@@ -6,21 +6,30 @@ import { Button, DynamicSelect, InlineCreateSelect, Form, Stack, StackedViewShel
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ProductForm } from "../../products/components/ProductForm";
+import { normalizeListingType } from "../../products/utils/listing-type";
 import { GroupSettingsPanel } from "../../products/components/GroupSettingsPanel";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
 import { BrandQuickCreateForm } from "./BrandQuickCreateForm";
 function modeFromProduct(product) {
-    if (product.isAuction)
+    const lt = normalizeListingType(product);
+    if (lt === "auction")
         return "auction";
-    if (product.isPreOrder)
+    if (lt === "pre-order")
         return "preorder";
     return "standard";
 }
+/**
+ * SB1-G Phase 4 — applies the selected mode by writing the canonical
+ * `listingType` discriminator. Nothing else needs to be written for the mode flip.
+ */
 function applyMode(product, mode) {
     return {
         ...product,
-        isAuction: mode === "auction",
-        isPreOrder: mode === "preorder",
+        listingType: mode === "auction"
+            ? "auction"
+            : mode === "preorder"
+                ? "pre-order"
+                : "standard",
     };
 }
 async function loadStoreOptions(query, page) {
@@ -64,10 +73,10 @@ async function loadBrandOptions(query, page) {
 const EMPTY_PRODUCT = {
     title: "",
     status: "draft",
-    isAuction: false,
-    isPreOrder: false,
+    // SB1-G Phase 4 — listingType is the only listing-kind field on the schema.
+    listingType: "standard",
 };
-export function AdminProductEditorView({ productId, onSaved, onDeleted, ...rest }) {
+export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(productId);
     const [product, setProduct] = React.useState(EMPTY_PRODUCT);
     const [mode, setMode] = React.useState("standard");
@@ -131,16 +140,18 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, ...rest
         },
     });
     const isSubmitting = saveMutation.isPending || productQuery.isLoading;
-    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Product" : "Create Product", sections: [
-            _jsxs(Form, { onSubmit: (e) => {
-                    e.preventDefault();
-                    saveMutation.mutate();
-                }, className: "space-y-6", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Listing type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "standard", children: "Standard" }), _jsx(TabsTrigger, { value: "auction", children: "Auction" }), _jsx(TabsTrigger, { value: "preorder", children: "Pre-order" })] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(DynamicSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
-                            ? (p) => (_jsx(GroupSettingsPanel, { productId: productId, productSlug: p.slug ?? productId, groupId: p.groupId, isGroupParent: p.isGroupParent, groupParentSlug: p.groupParentSlug, groupChildSlugs: p.groupChildSlugs, groupTitle: p.groupTitle, isAuction: !!p.isAuction, storeProductsEndpoint: "/api/admin/products", onGroupChanged: () => productQuery.refetch() }))
-                            : undefined, renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(InlineCreateSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(InlineCreateSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
-                                    if (confirm("Delete this product? This cannot be undone.")) {
-                                        deleteMutation.mutate();
-                                    }
-                                }, children: "Delete product" }))] })] }, "product-form"),
-        ] }));
+    const formSection = (_jsxs(Form, { onSubmit: (e) => {
+            e.preventDefault();
+            saveMutation.mutate();
+        }, className: "space-y-6", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Listing type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "standard", children: "Standard" }), _jsx(TabsTrigger, { value: "auction", children: "Auction" }), _jsx(TabsTrigger, { value: "preorder", children: "Pre-order" })] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(DynamicSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
+                    ? (p) => (_jsx(GroupSettingsPanel, { productId: productId, productSlug: p.slug ?? productId, groupId: p.groupId, isGroupParent: p.isGroupParent, groupParentSlug: p.groupParentSlug, groupChildSlugs: p.groupChildSlugs, groupTitle: p.groupTitle, isAuction: modeFromProduct(p) === "auction", storeProductsEndpoint: "/api/admin/products", onGroupChanged: () => productQuery.refetch() }))
+                    : undefined, renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(InlineCreateSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(InlineCreateSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                            if (confirm("Delete this product? This cannot be undone.")) {
+                                deleteMutation.mutate();
+                            }
+                        }, children: "Delete product" }))] })] }, "product-form"));
+    if (embedded) {
+        return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
+    }
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Product" : "Create Product", sections: [formSection] }));
 }