@endora-commerce/mod-catalog 0.100.0

package/dist/admin/pages/ProductEditor.js

@@ -0,0 +1,1050 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Trash2, ChevronLeft, Copy, Eye, FileText as FileTextIcon, Globe, GripVertical, Image as ImageIcon, CircleDollarSign, Layers, Link as LinkIcon, Paperclip, Save, SlidersHorizontal, Store as StoreIcon, Warehouse as WarehouseIcon, } from 'lucide-react';
+import { ApiError, apiClient, useUnsavedChangesPrompt, toAbsoluteAssetUrl, cn } from '@endora-commerce/admin-kit/lib';
+import { Alert, AlertDescription, Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Select, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@endora-commerce/admin-kit/ui';
+import { AssetPicker, StickyFormActions, TouchReorderButtons, CategoryTreePicker, ProductPicker } from '@endora-commerce/admin-kit/components';
+import { useTranslation } from '@endora-commerce/admin-kit/i18n';
+import { AdminZone, useAdminZone } from '@endora-commerce/admin-kit/zones';
+import { ProductInventoryTab } from '../components/ProductInventoryTab.js';
+import { PackagingUnitsEditor } from '../components/PackagingUnitsEditor.js';
+import { ProductAttributesTab } from '../components/ProductAttributesTab.js';
+import { ProductScopeEditor, } from '../components/ProductScopeEditor.js';
+const LOCALES = ['en-US', 'pl-PL'];
+const PRODUCT_TYPES = [
+    'simple',
+    'configurable',
+    'grouped',
+    'bundle',
+    'virtual',
+];
+const VISIBILITIES = ['public', 'logged_in_only', 'organization_restricted'];
+const STATUSES = ['draft', 'active', 'inactive'];
+/**
+ * Order-insensitive JSON snapshot of the editable form fields, used to detect
+ * unsaved changes (object keys + array members are sorted so re-ordering alone
+ * never reads as a change).
+ */
+function stableSnapshot(values) {
+    return JSON.stringify(values, (_key, value) => {
+        if (Array.isArray(value))
+            return [...value].sort();
+        if (value && typeof value === 'object') {
+            return Object.fromEntries(Object.entries(value).sort(([a], [b]) => a.localeCompare(b)));
+        }
+        return value;
+    });
+}
+export function ProductEditor() {
+    const t = useTranslation('catalog');
+    const params = useParams();
+    const navigate = useNavigate();
+    const isNew = params.id === 'new';
+    const id = isNew ? null : params.id ?? null;
+    // Feature 091 / P7a, Z15 — the Channels tab's button is a count of its own
+    // body. Declared here rather than beside the tab table because the table is
+    // built below an early return and a hook may not be.
+    const channelContributions = useAdminZone('product.editor.channels', {
+        productId: id ?? '',
+    });
+    const [loading, setLoading] = useState(!isNew);
+    const [error, setError] = useState(null);
+    const [info, setInfo] = useState(null);
+    const [categories, setCategories] = useState([]);
+    const [sku, setSku] = useState('');
+    const [type, setType] = useState('simple');
+    const [status, setStatus] = useState('draft');
+    const [visibility, setVisibility] = useState('public');
+    const [name, setName] = useState({ 'en-US': '', 'pl-PL': '' });
+    const [description, setDescription] = useState({
+        'en-US': '',
+        'pl-PL': '',
+    });
+    const [defaultPrice, setDefaultPrice] = useState('');
+    const [categoryIds, setCategoryIds] = useState([]);
+    const [activeTab, setActiveTab] = useState('details');
+    // Feature 002 (T034) — Attribute Set selector
+    const [attributeSets, setAttributeSets] = useState([]);
+    const [attributeSetId, setAttributeSetId] = useState('');
+    // Editable attribute values keyed by attribute `key` (Attributes tab).
+    const [attrValues, setAttrValues] = useState({});
+    // Feature 023 — imperative handle on the scope-editor so the page Save
+    // can flush every pending channel-scoped override in a single PATCH.
+    const scopeEditorRef = useRef(null);
+    // Media tab — page-Save flushes staged gallery label/order edits via this
+    // imperative handle (mirrors the scope-editor pattern above).
+    const galleryRef = useRef(null);
+    // Unsaved-changes guard — a stable snapshot of the editable fields is taken
+    // on load (and re-taken after each save via refresh()); the form is "dirty"
+    // whenever the live values diverge from it.
+    const initialSnapshotRef = useRef('');
+    const currentSnapshot = stableSnapshot({
+        sku,
+        type,
+        status,
+        visibility,
+        name,
+        description,
+        defaultPrice,
+        categoryIds,
+        attributeSetId,
+        attrValues,
+    });
+    const dirty = !loading &&
+        initialSnapshotRef.current !== '' &&
+        currentSnapshot !== initialSnapshotRef.current;
+    useUnsavedChangesPrompt(dirty);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [cats, sets] = await Promise.all([
+                apiClient.get('/api/v1/admin/catalog/categories'),
+                apiClient.get('/api/v1/admin/catalog/attribute-sets'),
+            ]);
+            setCategories(cats.data);
+            setAttributeSets(sets.data);
+            // Pick the system Default as the initial selection for new Products.
+            const defaultSet = sets.data.find((s) => s.code === 'default');
+            if (isNew && defaultSet)
+                setAttributeSetId(defaultSet.id);
+            if (isNew) {
+                // Baseline for a brand-new product matches the useState defaults.
+                initialSnapshotRef.current = stableSnapshot({
+                    sku: '',
+                    type: 'simple',
+                    status: 'draft',
+                    visibility: 'public',
+                    name: { 'en-US': '', 'pl-PL': '' },
+                    description: { 'en-US': '', 'pl-PL': '' },
+                    defaultPrice: '',
+                    categoryIds: [],
+                    attributeSetId: defaultSet?.id ?? '',
+                    attrValues: {},
+                });
+            }
+            if (id) {
+                const res = await apiClient.get(`/api/v1/admin/catalog/products/${id}`);
+                const p = res.data;
+                setSku(p.sku);
+                setType(p.type);
+                setStatus(p.status);
+                setVisibility(p.visibility);
+                const loadedName = {
+                    'en-US': p.name['en-US'] ?? '',
+                    'pl-PL': p.name['pl-PL'] ?? '',
+                };
+                setName(loadedName);
+                const loadedDescription = {
+                    'en-US': p.description['en-US'] ?? '',
+                    'pl-PL': p.description['pl-PL'] ?? '',
+                };
+                setDescription(loadedDescription);
+                const price = p.attributeValues['defaultPrice'] ?? null;
+                const loadedPrice = price != null ? String(price) : '';
+                setDefaultPrice(loadedPrice);
+                setAttrValues(p.attributeValues ?? {});
+                setAttributeSetId(p.attributeSetId);
+                setCategoryIds(p.categoryIds ?? []);
+                // Capture the loaded state as the clean baseline for dirty-tracking.
+                initialSnapshotRef.current = stableSnapshot({
+                    sku: p.sku,
+                    type: p.type,
+                    status: p.status,
+                    visibility: p.visibility,
+                    name: loadedName,
+                    description: loadedDescription,
+                    defaultPrice: loadedPrice,
+                    categoryIds: p.categoryIds ?? [],
+                    attributeSetId: p.attributeSetId,
+                    attrValues: p.attributeValues ?? {},
+                });
+            }
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : 'Failed to load.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [id, isNew]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const handleSave = useCallback(async (e) => {
+        e.preventDefault();
+        setError(null);
+        setInfo(null);
+        const trimmedName = {};
+        const trimmedDescription = {};
+        for (const l of LOCALES) {
+            if (name[l])
+                trimmedName[l] = name[l];
+            if (description[l])
+                trimmedDescription[l] = description[l];
+        }
+        if (Object.keys(trimmedName).length === 0) {
+            setError('At least one locale name is required.');
+            return;
+        }
+        // Seed from the Attributes-tab edits; `defaultPrice` is a virtual
+        // attribute owned by the Details tab and re-applied just below.
+        const attributeValues = { ...attrValues };
+        delete attributeValues['defaultPrice'];
+        if (defaultPrice.trim()) {
+            const v = Number(defaultPrice);
+            if (!Number.isFinite(v) || v < 0) {
+                setError('Default price must be a number ≥ 0.');
+                return;
+            }
+            attributeValues['defaultPrice'] = v;
+        }
+        try {
+            if (isNew) {
+                const res = await apiClient.post('/api/v1/admin/catalog/products', {
+                    sku,
+                    type,
+                    name: trimmedName,
+                    description: trimmedDescription,
+                    categoryIds,
+                    attributeValues,
+                    visibility,
+                    ...(attributeSetId ? { attributeSetId } : {}),
+                });
+                navigate(`/catalog/products/${res.data.id}`);
+            }
+            else if (id) {
+                // Feature 023 — page-Save commits both the per-language baseline
+                // (carried by `trimmedName` / `trimmedDescription` via the existing
+                // PATCH) AND any pending channel-scoped override drafts held in
+                // the ProductScopeEditor panel. Run them in parallel; if the
+                // override flush rejects, the page PATCH still committed.
+                await Promise.all([
+                    apiClient.patch(`/api/v1/admin/catalog/products/${id}`, {
+                        sku: sku.trim(),
+                        status,
+                        name: trimmedName,
+                        description: trimmedDescription,
+                        categoryIds,
+                        attributeValues,
+                        visibility,
+                        ...(attributeSetId ? { attributeSetId } : {}),
+                    }),
+                    scopeEditorRef.current?.flushOverrides() ?? Promise.resolve(),
+                    galleryRef.current?.flushGallery() ?? Promise.resolve(),
+                ]);
+                setInfo('Saved.');
+                await refresh();
+            }
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : 'Save failed.');
+        }
+    }, [isNew, id, sku, status, type, name, description, categoryIds, defaultPrice, attrValues, attributeSetId, visibility, navigate, refresh]);
+    const handleAttrChange = useCallback((key, value) => {
+        setAttrValues((prev) => ({ ...prev, [key]: value }));
+    }, []);
+    // Swapping the Attribute Set drops the values whose keys are not in the
+    // newly-selected set, so the save payload doesn't carry orphan keys left
+    // over from the previous set. `defaultPrice` / `price` are virtual keys
+    // owned by the Details tab (not bound to any set) and are always kept.
+    const handleAttributeSetChange = useCallback(async (newSetId) => {
+        setAttributeSetId(newSetId);
+        if (!newSetId)
+            return;
+        try {
+            const res = await apiClient.get(`/api/v1/admin/catalog/attribute-sets/${newSetId}`);
+            const allowed = new Set(res.data.attributes.map((a) => a.key));
+            setAttrValues((prev) => {
+                const next = {};
+                for (const [k, v] of Object.entries(prev)) {
+                    if (allowed.has(k) || k === 'defaultPrice' || k === 'price') {
+                        next[k] = v;
+                    }
+                }
+                return next;
+            });
+        }
+        catch {
+            // Non-fatal — the backend tolerates round-tripped keys, so leaving
+            // the values untouched on a fetch failure still saves correctly.
+        }
+    }, []);
+    const handleDeleteProduct = useCallback(async () => {
+        if (!id)
+            return;
+        if (!confirm(t('productEditor.deleteConfirm')))
+            return;
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${id}`);
+            navigate('/catalog/products');
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : 'Delete failed.');
+        }
+    }, [id, navigate, t]);
+    const [duplicating, setDuplicating] = useState(false);
+    const handleDuplicate = useCallback(async () => {
+        if (!id || duplicating)
+            return;
+        if (!confirm('Duplicate this product? A draft copy will be created.'))
+            return;
+        setDuplicating(true);
+        setError(null);
+        try {
+            const res = await apiClient.post(`/api/v1/admin/catalog/products/${id}/duplicate`, {});
+            navigate(`/catalog/products/${res.data.id}`);
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : 'Duplicate failed.');
+        }
+        finally {
+            setDuplicating(false);
+        }
+    }, [id, duplicating, navigate]);
+    if (loading)
+        return (_jsx("div", { className: "b2b-page b2b-page--wide", children: _jsx("div", { style: { padding: 32, color: 'var(--fg-muted)', fontSize: 13 }, children: t('productEditor.loading') }) }));
+    const tabs = [
+        { id: 'details', label: 'Details', icon: _jsx(FileTextIcon, { size: 14 }), show: true },
+        { id: 'attributes', label: 'Attributes', icon: _jsx(SlidersHorizontal, { size: 14 }), show: !isNew },
+        { id: 'pricing', label: 'Pricing', icon: _jsx(CircleDollarSign, { size: 14 }), show: !isNew },
+        {
+            id: 'variants',
+            label: 'Variants',
+            icon: _jsx(Layers, { size: 14 }),
+            show: !isNew && type === 'configurable',
+        },
+        {
+            id: 'composite',
+            label: type === 'grouped' ? 'Grouped items' : 'Bundle slots',
+            icon: _jsx(Layers, { size: 14 }),
+            show: !isNew && (type === 'grouped' || type === 'bundle'),
+        },
+        { id: 'media', label: 'Media', icon: _jsx(ImageIcon, { size: 14 }), show: !isNew },
+        { id: 'inventory', label: 'Inventory', icon: _jsx(WarehouseIcon, { size: 14 }), show: !isNew },
+        { id: 'attachments', label: 'Attachments', icon: _jsx(Paperclip, { size: 14 }), show: !isNew },
+        { id: 'links', label: 'Related', icon: _jsx(LinkIcon, { size: 14 }), show: !isNew },
+        // Feature 091 / P7a, Z15 — the tab body is a zone, so the button is shown
+        // by counting it. `useAdminZone` has already applied both presence axes and
+        // each contributor's permission, so its length is the honest answer to "is
+        // there anything behind this tab" — and a tab that opens on an empty panel
+        // is worse than no tab. The label stays this screen's own word for the
+        // place (Z14); what it stops knowing is which module fills it.
+        {
+            id: 'channels',
+            label: 'Channels',
+            icon: _jsx(StoreIcon, { size: 14 }),
+            show: !isNew && channelContributions.length > 0,
+        },
+        { id: 'seo', label: 'SEO', icon: _jsx(Globe, { size: 14 }), show: !isNew },
+    ];
+    const visibleTabs = tabs.filter((t) => t.show);
+    return (_jsxs("div", { className: "b2b-page b2b-page--wide", children: [_jsxs("div", { className: "b2b-page-head", children: [_jsxs("div", { className: "b2b-grow", children: [_jsxs("button", { type: "button", className: "b2b-page-head__back", onClick: () => { navigate('/catalog/products'); }, children: [_jsx(ChevronLeft, { size: 14 }), " Products"] }), _jsxs("div", { className: "b2b-page-head__title", children: [_jsx("span", { children: isNew ? 'New product' : pickName(name) || sku }), !isNew ? _jsx(StatusPill, { status: status }) : null] }), !isNew ? (_jsxs("div", { className: "b2b-page-head__sub", children: [_jsx("span", { className: "b2b-mono", children: sku }), " \u00B7 ", _jsx("span", { style: { textTransform: 'capitalize' }, children: type })] })) : null] }), _jsxs(StickyFormActions, { className: "b2b-page-head__actions", children: [!isNew ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "b2b-btn b2b-btn--default b2b-btn--sm", children: [_jsx(Eye, { size: 13 }), " Preview"] }), _jsxs("button", { type: "button", className: "b2b-btn b2b-btn--default b2b-btn--sm", onClick: () => void handleDuplicate(), disabled: duplicating, children: [_jsx(Copy, { size: 13 }), " ", duplicating ? 'Duplicating…' : 'Duplicate'] }), _jsxs("button", { type: "button", className: "b2b-btn b2b-btn--danger b2b-btn--sm", onClick: () => void handleDeleteProduct(), children: [_jsx(Trash2, { size: 13 }), " ", t('productEditor.action.delete')] })] })) : null, _jsxs("button", { type: "button", className: "b2b-btn b2b-btn--primary", onClick: (e) => {
+                                    void handleSave(e);
+                                }, children: [_jsx(Save, { size: 14 }), " Save"] })] })] }), error ? (_jsx(Alert, { variant: "destructive", className: "mb-4", children: _jsx(AlertDescription, { children: error }) })) : null, info ? (_jsx(Alert, { variant: "success", className: "mb-4", children: _jsx(AlertDescription, { children: info }) })) : null, _jsxs("div", { className: "b2b-card", children: [_jsx("div", { style: { padding: '4px 4px 0', overflow: 'hidden' }, children: _jsx("div", { className: "b2b-tabs-scroll", children: _jsx("div", { className: "b2b-tabs", role: "tablist", children: visibleTabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": activeTab === t.id, className: cn('b2b-tab', activeTab === t.id && 'is-active'), onClick: () => setActiveTab(t.id), children: [t.icon, t.label] }, t.id))) }) }) }), _jsxs("div", { className: "b2b-card__body", children: [activeTab === 'details' ? (_jsx("form", { id: "product-details-form", onSubmit: handleSave, children: _jsxs("div", { className: "b2b-col", style: { gap: 18 }, children: [id ? (_jsx(AdminZone, { name: "product.editor.details.before", props: { productId: id } })) : null, id ? (_jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: [_jsx(AdminZone, { name: "product.editor.field.after", props: { productId: id, fieldPath: 'name', languageCodes: LOCALES } }), _jsx(AdminZone, { name: "product.editor.field.after", props: { productId: id, fieldPath: 'description', languageCodes: LOCALES } })] })) : null, id ? (_jsx(ProductScopeEditor, { ref: scopeEditorRef, productId: id, baselineName: name, baselineDescription: description, onBaselineNameChange: (next) => setName({
+                                                'en-US': next['en-US'] ?? '',
+                                                'pl-PL': next['pl-PL'] ?? '',
+                                            }), onBaselineDescriptionChange: (next) => setDescription({
+                                                'en-US': next['en-US'] ?? '',
+                                                'pl-PL': next['pl-PL'] ?? '',
+                                            }) })) : null, _jsxs("div", { children: [_jsx("div", { className: "b2b-label", children: t('productEditor.section.identity') }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }, children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "sku", children: t('productEditor.field.sku') }), _jsx(Input, { id: "sku", value: sku, onChange: (e) => setSku(e.target.value), required: true })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "ptype", children: t('productEditor.field.type') }), _jsx(Select, { id: "ptype", value: type, onChange: (e) => setType(e.target.value), disabled: !isNew, children: PRODUCT_TYPES.map((pt) => (_jsx("option", { value: pt, children: pt }, pt))) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "pvis", children: t('productEditor.field.visibility') }), _jsx(Select, { id: "pvis", value: visibility, onChange: (e) => setVisibility(e.target.value), children: VISIBILITIES.map((v) => (_jsx("option", { value: v, children: v }, v))) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "pattrset", children: t('productEditor.field.attributeSet') }), _jsx(Select, { id: "pattrset", value: attributeSetId, onChange: (e) => void handleAttributeSetChange(e.target.value), children: attributeSets.length === 0 ? (_jsx("option", { value: "", children: t('productEditor.attributeSet.loading') })) : (attributeSets.map((s) => (_jsxs("option", { value: s.id, children: [s.code, s.isSystem ? t('productEditor.attributeSet.systemSuffix') : ''] }, s.id)))) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "pstatus", children: t('productEditor.field.status') }), _jsx(Select, { id: "pstatus", value: status, onChange: (e) => setStatus(e.target.value), children: STATUSES.map((s) => (_jsx("option", { value: s, children: s }, s))) }), _jsx("p", { className: "b2b-help", children: t('productEditor.field.status.help') })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "dp", children: t('productEditor.field.defaultPrice') }), _jsx(Input, { id: "dp", type: "number", step: "0.01", min: "0", value: defaultPrice, onChange: (e) => setDefaultPrice(e.target.value) }), _jsx("p", { className: "b2b-help", children: t('productEditor.field.defaultPrice.help') })] })] })] }), isNew ? (_jsxs(_Fragment, { children: [_jsx("hr", { className: "b2b-hr" }), _jsxs("div", { children: [_jsx("div", { className: "b2b-label", children: t('productEditor.section.localizedContent') }), _jsx("p", { className: "b2b-help", style: { marginTop: 0, marginBottom: 12 }, children: t('productEditor.section.localizedContent.help') }), _jsx("div", { className: "b2b-col", style: { gap: 18 }, children: LOCALES.map((l) => (_jsxs("div", { className: "b2b-col", style: { gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: `name-${l}`, children: t('productEditor.field.localizedName', { locale: l }) }), _jsx(Input, { id: `name-${l}`, value: name[l], onChange: (e) => setName((prev) => ({ ...prev, [l]: e.target.value })) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `desc-${l}`, children: t('productEditor.field.localizedDescription', { locale: l }) }), _jsx("textarea", { id: `desc-${l}`, rows: 3, className: "b2b-field", value: description[l], onChange: (e) => setDescription((prev) => ({ ...prev, [l]: e.target.value })) })] })] }, l))) })] })] })) : null, _jsx("hr", { className: "b2b-hr" }), _jsxs("div", { children: [_jsxs("div", { className: "b2b-label", children: [t('productEditor.section.categories'), id ? (_jsx(AdminZone, { name: "product.editor.field.after", props: { productId: id, fieldPath: 'categories', languageCodes: null } })) : null] }), _jsx(CategoryTreePicker, { categories: categories, selectedIds: categoryIds, onChange: setCategoryIds, loading: loading }), _jsx("p", { className: "b2b-help", children: t('productEditor.section.categories.help') })] })] }) })) : null, activeTab === 'attributes' && id ? (_jsx(ProductAttributesTab, { productId: id, attributeSetId: attributeSetId, values: attrValues, onChange: handleAttrChange })) : null, activeTab === 'pricing' && id ? (_jsxs("div", { className: "b2b-col", style: { gap: 16 }, children: [_jsx(AdminZone, { name: "product.editor.pricing.before", props: { productId: id } }), _jsx(AdminZone, { name: "product.editor.pricing.after", props: { productId: id } })] })) : null, activeTab === 'variants' && id ? _jsx(VariantsSection, { productId: id }) : null, activeTab === 'composite' && id ? (type === 'grouped' ? (_jsx(GroupedItemsSection, { productId: id })) : (_jsx(BundleSlotsSection, { productId: id }))) : null, activeTab === 'media' && id ? (_jsxs(_Fragment, { children: [_jsx(AdminZone, { name: "product.editor.field.after", props: { productId: id, fieldPath: 'gallery', languageCodes: null } }), _jsx(GallerySection, { ref: galleryRef, productId: id })] })) : null, activeTab === 'inventory' && id ? (_jsxs("div", { className: "b2b-col", style: { gap: 16 }, children: [_jsx(ProductInventoryTab, { productId: id }), type === 'simple' || type === 'configurable' ? (_jsx(PackagingUnitsEditor, { productId: id })) : null] })) : null, activeTab === 'attachments' && id ? (_jsxs(_Fragment, { children: [_jsx(AdminZone, { name: "product.editor.field.after", props: { productId: id, fieldPath: 'attachments', languageCodes: null } }), _jsx(AttachmentsSection, { productId: id })] })) : null, activeTab === 'links' && id ? _jsx(ProductLinksSection, { productId: id }) : null, activeTab === 'channels' && id ? (_jsx(AdminZone, { name: "product.editor.channels", props: { productId: id } })) : null, activeTab === 'seo' ? _jsx(SeoStub, { name: name }) : null] })] })] }));
+}
+function StatusPill({ status }) {
+    const map = {
+        active: { cls: 'b2b-badge--success', label: 'Active' },
+        draft: { cls: 'b2b-badge--warn', label: 'Draft' },
+        inactive: { cls: '', label: 'Inactive' },
+    };
+    const v = map[status];
+    return _jsx("span", { className: cn('b2b-badge', 'b2b-badge--dot', v.cls), children: v.label });
+}
+function pickName(name) {
+    return name['en-US'] ?? Object.values(name)[0] ?? '';
+}
+function SeoStub({ name }) {
+    const t = useTranslation('catalog');
+    return (_jsxs("div", { className: "b2b-col", style: { gap: 12 }, children: [_jsx("div", { className: "b2b-label", children: t('productEditor.seo.title') }), _jsx("div", { className: "b2b-help", style: { marginTop: 0 }, children: t('productEditor.seo.description') }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "seo-title", children: t('productEditor.seo.pageTitlePreview') }), _jsx(Input, { id: "seo-title", defaultValue: pickName(name) })] })] }));
+}
+function VariantsSection({ productId }) {
+    const t = useTranslation('catalog');
+    const [variants, setVariants] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [info, setInfo] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            // The PDP returns variants nested in productDetail; admin needs a
+            // standalone read to keep the forms quick. Foundation didn't ship
+            // a GET /admin/.../variants, but the public productDetail under
+            // /api/v1/catalog/products/<idOrSlug> includes them — use that.
+            const res = await apiClient.get(`/api/v1/catalog/products/${productId}`);
+            setVariants(res.data.variants ?? []);
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.variants.error.load'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [productId, t]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const handleCreate = useCallback(async (input) => {
+        // attrs is a comma-separated list of `key=value` pairs.
+        const variantAttributeValues = {};
+        for (const pair of input.attrs.split(',')) {
+            const trimmed = pair.trim();
+            if (!trimmed)
+                continue;
+            const [k, v] = trimmed.split('=');
+            if (k && v !== undefined)
+                variantAttributeValues[k.trim()] = v.trim();
+        }
+        try {
+            const payload = {
+                sku: input.sku,
+                variantAttributeValues,
+            };
+            if (input.priceOverride.trim()) {
+                payload['priceOverride'] = Number(input.priceOverride);
+            }
+            if (input.stockLevel.trim()) {
+                payload['stockLevel'] = Number(input.stockLevel);
+            }
+            await apiClient.post(`/api/v1/admin/catalog/products/${productId}/variants`, payload);
+            setInfo(t('productEditor.variants.success.create', { sku: input.sku }));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.variants.error.create'));
+        }
+    }, [productId, refresh, t]);
+    const handleDelete = useCallback(async (variantId, sku) => {
+        if (!confirm(t('productEditor.variants.deleteConfirm', { sku })))
+            return;
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${productId}/variants/${variantId}`);
+            setInfo(t('productEditor.variants.success.delete', { sku }));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.variants.error.delete'));
+        }
+    }, [productId, refresh, t]);
+    return (_jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('productEditor.variants.title') }) }), _jsxs(CardContent, { className: "space-y-4", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, info ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: info }) })) : null, loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.loading') })) : variants.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.variants.empty') })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('productEditor.variants.column.sku') }), _jsx(TableHead, { children: t('productEditor.variants.column.attributes') }), _jsx(TableHead, { children: t('productEditor.variants.column.priceOverride') }), _jsx(TableHead, { children: t('productEditor.variants.column.stock') }), _jsx(TableHead, { className: "w-[1%] whitespace-nowrap", children: t('productEditor.variants.column.actions') })] }) }), _jsx(TableBody, { children: variants.map((v) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono", children: v.sku }), _jsx(TableCell, { children: Object.entries(v.variantAttributeValues)
+                                                .map(([k, val]) => `${k}=${String(val)}`)
+                                                .join(', ') || '—' }), _jsx(TableCell, { children: v.priceOverride ?? '—' }), _jsx(TableCell, { children: v.stockLevel ?? '—' }), _jsx(TableCell, { children: _jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: () => void handleDelete(v.id, v.sku), children: t('productEditor.variants.action.delete') }) })] }, v.id))) })] })), _jsx(CreateVariantInline, { onCreate: handleCreate })] })] }));
+}
+function CreateVariantInline({ onCreate, }) {
+    const t = useTranslation('catalog');
+    const [sku, setSku] = useState('');
+    const [attrs, setAttrs] = useState('');
+    const [priceOverride, setPriceOverride] = useState('');
+    const [stockLevel, setStockLevel] = useState('');
+    return (_jsxs("div", { className: "grid gap-3 md:grid-cols-5 border-t pt-4", role: "group", "aria-label": t('productEditor.variants.createTitle'), children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "vsku", children: t('productEditor.variants.field.sku') }), _jsx(Input, { id: "vsku", value: sku, onChange: (e) => setSku(e.target.value), required: true })] }), _jsxs("div", { className: "space-y-1 md:col-span-2", children: [_jsx(Label, { htmlFor: "vattrs", children: t('productEditor.variants.field.attributes') }), _jsx(Input, { id: "vattrs", value: attrs, onChange: (e) => setAttrs(e.target.value), placeholder: t('productEditor.variants.field.attributesPlaceholder') })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "vprice", children: t('productEditor.variants.field.priceOverride') }), _jsx(Input, { id: "vprice", type: "number", step: "0.01", min: "0", value: priceOverride, onChange: (e) => setPriceOverride(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "vstock", children: t('productEditor.variants.field.stock') }), _jsx(Input, { id: "vstock", type: "number", min: "0", value: stockLevel, onChange: (e) => setStockLevel(e.target.value) })] }), _jsx("div", { className: "md:col-span-5", children: _jsx(Button, { type: "button", onClick: () => {
+                        void onCreate({ sku, attrs, priceOverride, stockLevel }).then(() => {
+                            setSku('');
+                            setAttrs('');
+                            setPriceOverride('');
+                            setStockLevel('');
+                        });
+                    }, children: t('productEditor.variants.action.add') }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Gallery section (T085) — admin CRUD for the Product's gallery items.
+// Foundation lacks an admin Asset upload endpoint, so for now the form
+// accepts an existing assetId; future work adds drag-and-drop on top of
+// an Assets module admin upload route.
+// ---------------------------------------------------------------------------
+const GALLERY_LABELS = ['base_image', 'small_image', 'thumbnail'];
+/** Immutable array move used by drag-and-drop / arrow reordering. */
+function moveGalleryItem(items, from, to) {
+    if (to < 0 || to >= items.length || from === to)
+        return items;
+    const next = items.slice();
+    const [moved] = next.splice(from, 1);
+    if (moved === undefined)
+        return items;
+    next.splice(to, 0, moved);
+    return next;
+}
+const GallerySection = forwardRef(function GallerySection({ productId }, ref) {
+    const t = useTranslation('catalog');
+    const [items, setItems] = useState([]);
+    const [images, setImages] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [info, setInfo] = useState(null);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const dragIdRef = useRef(null);
+    // Server-truth snapshot (id order + labels) used to diff the staged edits
+    // that the page-Save button flushes.
+    const baselineRef = useRef('');
+    const snapshot = (list) => JSON.stringify(list.map((g) => ({ id: g.id, labels: [...g.labels].sort() })));
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            // Public PDP carries the resolved gallery (with asset urls) so
+            // admins see the same shape customers do; the admin GET returns
+            // bare ids without urls. The PDP also carries the product's flat
+            // `assets` (legacy product_assets) — the storefront renders those
+            // when the label-aware gallery is empty, so we surface them here
+            // too, otherwise a product whose images live on product_assets
+            // looks empty in the admin while showing fine on the storefront.
+            const res = await apiClient.get(`/api/v1/catalog/products/${productId}`);
+            const gallery = res.data.gallery ?? [];
+            const mapped = gallery
+                .slice()
+                .sort((a, b) => a.position - b.position)
+                .map((g) => ({
+                id: g.id,
+                productId,
+                assetId: g.asset.id,
+                position: g.position,
+                labels: g.labels,
+                asset: { url: g.asset.url, kind: g.asset.kind },
+            }));
+            setItems(mapped);
+            baselineRef.current = snapshot(mapped);
+            const assets = res.data.assets ?? [];
+            setImages(assets
+                .filter((a) => a.kind === 'image' || a.kind === 'video')
+                .map((a) => ({
+                id: a.id,
+                kind: a.kind,
+                url: a.url,
+                altText: a.altText ?? null,
+            })));
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.gallery.error.load'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [productId, t]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    // --- Staged label edits: each label lives on at most one item; assigning it
+    //     to one item strips it from every other (radio semantics). Persisted on
+    //     page Save, so no per-row Save button and no "already taken" error. ---
+    const assignLabel = useCallback((label, itemId) => {
+        setInfo(null);
+        setItems((prev) => prev.map((it) => {
+            const without = it.labels.filter((l) => l !== label);
+            return { ...it, labels: it.id === itemId ? [...without, label] : without };
+        }));
+    }, []);
+    const clearLabel = useCallback((label) => {
+        setInfo(null);
+        setItems((prev) => prev.map((it) => ({ ...it, labels: it.labels.filter((l) => l !== label) })));
+    }, []);
+    // --- Staged reorder (array order === display order). ---
+    const moveItem = useCallback((from, to) => {
+        setInfo(null);
+        setItems((prev) => moveGalleryItem(prev, from, to));
+    }, []);
+    const handleDrop = useCallback((index) => {
+        const draggedId = dragIdRef.current;
+        if (!draggedId)
+            return;
+        setItems((prev) => {
+            const from = prev.findIndex((it) => it.id === draggedId);
+            return from < 0 || from === index ? prev : moveGalleryItem(prev, from, index);
+        });
+    }, []);
+    // --- Immediate CRUD (add / remove) — these hit the server directly and
+    //     re-load, which also resets the staged baseline. ---
+    const handleCreate = useCallback(async (assetId) => {
+        setBusy(true);
+        try {
+            await apiClient.post(`/api/v1/admin/catalog/products/${productId}/gallery`, {
+                assetId,
+                labels: [],
+            });
+            setInfo(t('productEditor.gallery.success.add'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.gallery.error.add'));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [productId, refresh, t]);
+    const handleDelete = useCallback(async (itemId) => {
+        if (!confirm(t('productEditor.gallery.removeConfirm')))
+            return;
+        setBusy(true);
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${productId}/gallery/${itemId}`);
+            setInfo(t('productEditor.gallery.success.remove'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.gallery.error.delete'));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [productId, refresh, t]);
+    // --- Page-Save hook: flush staged label + order edits. Labels are patched
+    //     with `replace=true` so reassigning a label moves it atomically. ---
+    const flushGallery = useCallback(async () => {
+        const baseline = JSON.parse(baselineRef.current || '[]');
+        const baseLabels = new Map(baseline.map((b) => [b.id, [...b.labels].sort().join(',')]));
+        const changed = items.filter((it) => baseLabels.get(it.id) !== [...it.labels].sort().join(','));
+        for (const it of changed) {
+            await apiClient.patch(`/api/v1/admin/catalog/products/${productId}/gallery/${it.id}?replace=true`, { labels: it.labels });
+        }
+        const baseOrder = baseline.map((b) => b.id).join(',');
+        const curOrder = items.map((it) => it.id).join(',');
+        if (items.length > 0 && curOrder !== baseOrder) {
+            await apiClient.put(`/api/v1/admin/catalog/products/${productId}/gallery/order`, {
+                orderedGalleryItemIds: items.map((it) => it.id),
+            });
+        }
+        if (changed.length > 0 || curOrder !== baseOrder) {
+            await refresh();
+        }
+    }, [items, productId, refresh]);
+    useImperativeHandle(ref, () => ({ flushGallery }), [flushGallery]);
+    const disabled = busy || loading;
+    return (_jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('productEditor.gallery.title') }) }), _jsxs(CardContent, { className: "space-y-4", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, info ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: info }) })) : null, !loading && images.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: t('productEditor.gallery.productImages.title') }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('productEditor.gallery.productImages.hint') }), _jsx("div", { className: "flex flex-wrap gap-2", children: images.map((img) => img.kind === 'video' ? (_jsx("video", { src: toAbsoluteAssetUrl(img.url), className: "h-20 w-20 rounded border object-cover", muted: true }, img.id)) : (_jsx("img", { src: toAbsoluteAssetUrl(img.url), alt: img.altText ?? '', className: "h-20 w-20 rounded border object-cover" }, img.id))) })] })) : null, loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.loading') })) : items.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.gallery.empty') })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs text-muted-foreground", children: t('productEditor.gallery.dragHint') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-8" }), _jsx(TableHead, { children: t('productEditor.gallery.column.preview') }), GALLERY_LABELS.map((label) => (_jsx(TableHead, { className: "text-center", children: t(`productEditor.gallery.label.${label}`) }, label))), _jsx(TableHead, { children: t('productEditor.gallery.column.assetId') }), _jsx(TableHead, { className: "w-[1%] whitespace-nowrap text-right", children: t('productEditor.gallery.column.actions') })] }) }), _jsx(TableBody, { children: items.map((item, index) => (_jsx(GalleryRow, { item: item, index: index, total: items.length, disabled: disabled, onAssignLabel: assignLabel, onClearLabel: clearLabel, onMove: moveItem, onDragStart: (id) => {
+                                                dragIdRef.current = id;
+                                            }, onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, onDragEnd: () => {
+                                                dragIdRef.current = null;
+                                            }, onPreview: setPreviewUrl, onDelete: handleDelete }, item.id))) })] })] })), _jsx(CreateGalleryItemInline, { disabled: disabled, onCreate: handleCreate })] }), previewUrl ? (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6", role: "dialog", "aria-modal": "true", "aria-label": t('productEditor.gallery.preview.title'), onClick: () => setPreviewUrl(null), children: [_jsx("img", { src: previewUrl, alt: t('productEditor.gallery.preview.title'), className: "max-h-full max-w-full rounded shadow-lg", onClick: (e) => e.stopPropagation() }), _jsx("button", { type: "button", className: "b2b-btn b2b-btn--sm", style: { position: 'fixed', top: 16, right: 16 }, onClick: () => setPreviewUrl(null), children: t('productEditor.gallery.preview.close') })] })) : null] }));
+});
+function GalleryRow({ item, index, total, disabled, onAssignLabel, onClearLabel, onMove, onDragStart, onDragOver, onDrop, onDragEnd, onPreview, onDelete, }) {
+    const t = useTranslation('catalog');
+    const url = item.asset?.url ? toAbsoluteAssetUrl(item.asset.url) : null;
+    return (_jsxs(TableRow, { draggable: !disabled, onDragStart: () => onDragStart(item.id), onDragOver: onDragOver, onDrop: () => onDrop(index), onDragEnd: onDragEnd, children: [_jsx(TableCell, { className: "w-8", children: _jsx("span", { className: "inline-flex cursor-grab items-center text-muted-foreground", title: t('productEditor.gallery.dragHint'), "aria-hidden": true, children: _jsx(GripVertical, { className: "h-4 w-4" }) }) }), _jsx(TableCell, { children: url ? (item.asset?.kind === 'video' ? (_jsx("video", { src: url, className: "h-12 w-12 rounded border object-cover", muted: true })) : (_jsx("button", { type: "button", className: "block rounded border p-0", title: t('productEditor.gallery.preview.open'), onClick: () => onPreview(url), children: _jsx("img", { src: url, alt: "", className: "h-12 w-12 rounded object-cover" }) }))) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" })) }), GALLERY_LABELS.map((label) => {
+                const checked = item.labels.includes(label);
+                return (_jsx(TableCell, { className: "text-center", children: _jsx("input", { type: "radio", name: `gallery-label-${label}`, checked: checked, disabled: disabled, "aria-label": t(`productEditor.gallery.label.${label}`), onChange: () => { }, onClick: () => checked ? onClearLabel(label) : onAssignLabel(label, item.id) }) }, label));
+            }), _jsxs(TableCell, { className: "font-mono text-xs", children: [item.assetId.slice(0, 8), "\u2026"] }), _jsxs(TableCell, { className: "space-x-2 whitespace-nowrap text-right", children: [_jsx(TouchReorderButtons, { disabled: disabled, onMoveUp: () => onMove(index, index - 1), onMoveDown: () => onMove(index, index + 1), disableUp: index === 0, disableDown: index === total - 1 }), _jsx(Button, { type: "button", size: "sm", variant: "destructive", disabled: disabled, onClick: () => void onDelete(item.id), children: t('productEditor.gallery.action.remove') })] })] }));
+}
+function CreateGalleryItemInline({ disabled, onCreate, }) {
+    const t = useTranslation('catalog');
+    const [assetId, setAssetId] = useState('');
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [pickedFilename, setPickedFilename] = useState(null);
+    const onPick = (a) => {
+        setAssetId(a.id);
+        setPickedFilename(a.filename);
+        setPickerOpen(false);
+    };
+    return (_jsxs("div", { className: "space-y-3 border-t pt-4", role: "group", "aria-label": t('productEditor.gallery.addTitle'), children: [pickerOpen ? (_jsx(AssetPicker, { acceptMimePrefix: "image/", allowUpload: true, onSelect: onPick, onClose: () => setPickerOpen(false) })) : null, _jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [_jsxs("div", { className: "space-y-1 md:col-span-3", children: [_jsx(Label, { htmlFor: "gasset", children: t('productEditor.gallery.field.asset') }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: "gasset", value: pickedFilename ?? assetId, readOnly: true, placeholder: t('productEditor.gallery.field.noAsset') }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setPickerOpen(true), children: t('productEditor.gallery.action.pickOrUpload') })] })] }), _jsx("div", { className: "flex items-end", children: _jsx(Button, { type: "button", disabled: disabled || !assetId, onClick: () => {
+                                if (!assetId)
+                                    return;
+                                void onCreate(assetId).then(() => {
+                                    setAssetId('');
+                                    setPickedFilename(null);
+                                });
+                            }, children: t('productEditor.gallery.action.add') }) })] })] }));
+}
+function AttachmentsSection({ productId }) {
+    const t = useTranslation('catalog');
+    const [attachments, setAttachments] = useState([]);
+    const [types, setTypes] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [info, setInfo] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [detail, typesRes] = await Promise.all([
+                apiClient.get(`/api/v1/catalog/products/${productId}`),
+                apiClient.get('/api/v1/admin/catalog/attachment-types'),
+            ]);
+            const detailAttachments = detail.data.attachments ?? [];
+            setAttachments(detailAttachments.map((a) => ({
+                id: a.id,
+                productId,
+                assetId: a.asset.id,
+                attachmentTypeId: a.type.id,
+                name: a.name,
+                description: a.description,
+                position: a.position,
+                asset: {
+                    url: a.asset.url,
+                    filename: a.asset.filename,
+                    mimeType: a.asset.mimeType,
+                },
+                type: { code: a.type.code, name: a.type.name },
+            })));
+            setTypes(typesRes.data);
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.attachments.error.load'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [productId, t]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const handleCreate = useCallback(async (input) => {
+        try {
+            await apiClient.post(`/api/v1/admin/catalog/products/${productId}/attachments`, {
+                assetId: input.assetId,
+                attachmentTypeId: input.attachmentTypeId,
+                name: input.name,
+                ...(input.description ? { description: input.description } : {}),
+            });
+            setInfo(t('productEditor.attachments.success.add'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.attachments.error.add'));
+        }
+    }, [productId, refresh, t]);
+    const handleDelete = useCallback(async (attachmentId, name) => {
+        if (!confirm(t('productEditor.attachments.deleteConfirm', { name })))
+            return;
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${productId}/attachments/${attachmentId}`);
+            setInfo(t('productEditor.attachments.success.delete', { name }));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.attachments.error.delete'));
+        }
+    }, [productId, refresh, t]);
+    return (_jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('productEditor.attachments.title') }) }), _jsxs(CardContent, { className: "space-y-4", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, info ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: info }) })) : null, loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.loading') })) : attachments.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.attachments.empty') })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('productEditor.attachments.column.type') }), _jsx(TableHead, { children: t('productEditor.attachments.column.name') }), _jsx(TableHead, { children: t('productEditor.attachments.column.description') }), _jsx(TableHead, { children: t('productEditor.attachments.column.file') }), _jsx(TableHead, { className: "w-[1%] whitespace-nowrap", children: t('productEditor.attachments.column.actions') })] }) }), _jsx(TableBody, { children: attachments.map((att) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: att.type?.name['en-US'] ?? att.type?.code ?? '—' }), _jsx(TableCell, { className: "font-medium", children: att.name }), _jsx(TableCell, { className: "text-muted-foreground", children: att.description ?? '—' }), _jsx(TableCell, { children: att.asset?.url ? (_jsx("a", { href: att.asset.url, target: "_blank", rel: "noopener", className: "text-xs underline", children: att.asset.filename })) : ('—') }), _jsx(TableCell, { children: _jsx(Button, { type: "button", size: "sm", variant: "destructive", onClick: () => void handleDelete(att.id, att.name), children: t('productEditor.attachments.action.delete') }) })] }, att.id))) })] })), _jsx(CreateAttachmentInline, { types: types, onCreate: handleCreate })] })] }));
+}
+function CreateAttachmentInline({ types, onCreate, }) {
+    const [assetId, setAssetId] = useState('');
+    const [attachmentTypeId, setAttachmentTypeId] = useState('');
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [pickedFilename, setPickedFilename] = useState(null);
+    const t = useTranslation('catalog');
+    return (_jsxs("div", { className: "space-y-3 border-t pt-4", role: "group", "aria-label": t('productEditor.attachments.addTitle'), children: [pickerOpen ? (_jsx(AssetPicker, { allowUpload: true, onSelect: (a) => {
+                    setAssetId(a.id);
+                    setPickedFilename(a.filename);
+                    setPickerOpen(false);
+                }, onClose: () => setPickerOpen(false) })) : null, _jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "aasset", children: t('productEditor.attachments.field.asset') }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: "aasset", value: pickedFilename ?? assetId, readOnly: true, placeholder: t('productEditor.attachments.field.noAsset') }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setPickerOpen(true), children: t('productEditor.attachments.action.pickOrUpload') })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "atype", children: t('productEditor.attachments.field.type') }), _jsxs(Select, { id: "atype", value: attachmentTypeId, onChange: (e) => setAttachmentTypeId(e.target.value), children: [_jsx("option", { value: "", children: "\u2014" }), types.map((typ) => (_jsx("option", { value: typ.id, children: typ.name['en-US'] ?? typ.code }, typ.id)))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "aname", children: t('productEditor.attachments.field.name') }), _jsx(Input, { id: "aname", value: name, onChange: (e) => setName(e.target.value), placeholder: t('productEditor.attachments.field.namePlaceholder') })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "adesc", children: t('productEditor.attachments.field.description') }), _jsx(Input, { id: "adesc", value: description, onChange: (e) => setDescription(e.target.value), placeholder: t('productEditor.attachments.field.descriptionPlaceholder') })] }), _jsx("div", { className: "md:col-span-4", children: _jsx(Button, { type: "button", onClick: () => {
+                                if (!assetId || !attachmentTypeId || !name)
+                                    return;
+                                void onCreate({ assetId, attachmentTypeId, name, description }).then(() => {
+                                    setAssetId('');
+                                    setPickedFilename(null);
+                                    setAttachmentTypeId('');
+                                    setName('');
+                                    setDescription('');
+                                });
+                            }, children: t('productEditor.attachments.action.add') }) })] })] }));
+}
+// ---------------------------------------------------------------------------
+// Product Links section (T109, US4) — Related / Up-sell / Cross-sell.
+// Three sub-lists, one product picker (paste id) + kind selector +
+// "Add" button per kind. Backend bulkCreate is all-or-nothing and
+// surfaces SELF_LINK_NOT_ALLOWED / LINK_ALREADY_EXISTS / TARGET_NOT_FOUND.
+// ---------------------------------------------------------------------------
+const LINK_KINDS = ['related', 'up_sell', 'cross_sell'];
+function pickProductName(name, fallback) {
+    if (!name)
+        return fallback;
+    return name['en-US'] ?? Object.values(name)[0] ?? fallback;
+}
+const TARGETS_BATCH_PAGE_SIZE = 200;
+function ProductLinksSection({ productId }) {
+    const t = useTranslation('catalog');
+    const [links, setLinks] = useState([]);
+    const [targetsById, setTargetsById] = useState(() => new Map());
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [info, setInfo] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await apiClient.get(`/api/v1/admin/catalog/products/${productId}/links`);
+            setLinks(res.data);
+            // Fetch target product details across all three kinds in one shot.
+            // Paginates with TARGETS_BATCH_PAGE_SIZE so a product with hundreds
+            // of links streams across multiple requests without ballooning the
+            // body. In practice a single page is enough.
+            const uniqueTargetIds = Array.from(new Set(res.data.map((l) => l.targetProductId)));
+            const nextById = new Map();
+            if (uniqueTargetIds.length > 0) {
+                let page = 0;
+                // Bounded loop guards against an unexpected backend response that
+                // never sets `hasMore: false`.
+                for (;;) {
+                    const batch = await apiClient.post('/api/v1/admin/catalog/products/batch-by-id', {
+                        ids: uniqueTargetIds,
+                        page,
+                        pageSize: TARGETS_BATCH_PAGE_SIZE,
+                    });
+                    for (const p of batch.data)
+                        nextById.set(p.id, p);
+                    if (!batch.pagination.hasMore)
+                        break;
+                    page += 1;
+                    if (page > 50)
+                        break;
+                }
+            }
+            setTargetsById(nextById);
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.links.error.load'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [productId, t]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const handleCreate = useCallback(async (input) => {
+        try {
+            await apiClient.post(`/api/v1/admin/catalog/products/${productId}/links`, {
+                links: [{ targetProductId: input.targetProductId, kind: input.kind }],
+            });
+            setInfo(t('productEditor.links.success.add', { kind: input.kind }));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.links.error.add'));
+        }
+    }, [productId, refresh, t]);
+    const handleDelete = useCallback(async (linkId) => {
+        if (!confirm(t('productEditor.links.removeConfirm')))
+            return;
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${productId}/links/${linkId}`);
+            setInfo(t('productEditor.links.success.remove'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.links.error.delete'));
+        }
+    }, [productId, refresh, t]);
+    const byKind = useMemo(() => {
+        const result = {
+            related: [],
+            up_sell: [],
+            cross_sell: [],
+        };
+        for (const link of links)
+            result[link.kind].push(link);
+        for (const kind of LINK_KINDS) {
+            result[kind].sort((a, b) => a.position - b.position);
+        }
+        return result;
+    }, [links]);
+    return (_jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('productEditor.links.title') }) }), _jsxs(CardContent, { className: "space-y-4", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, info ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: info }) })) : null, loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.loading') })) : (_jsx("div", { className: "space-y-6", children: LINK_KINDS.map((kind) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("h3", { className: "text-sm font-medium uppercase tracking-wide", children: [t(`productEditor.links.kind.${kind}`), " (", byKind[kind].length, ")"] }), byKind[kind].length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: t('productEditor.links.empty') })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('productEditor.links.column.target') }), _jsx(TableHead, { children: t('productEditor.links.column.sku') }), _jsx(TableHead, { children: t('productEditor.links.column.position') }), _jsx(TableHead, { className: "w-[1%] whitespace-nowrap", children: t('productEditor.links.column.actions') })] }) }), _jsx(TableBody, { children: byKind[kind].map((link) => {
+                                                const target = targetsById.get(link.targetProductId);
+                                                const isMissing = !target;
+                                                const isInactive = target?.status === 'inactive';
+                                                return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: isMissing || isInactive ? 'text-muted-foreground' : '', children: target
+                                                                            ? pickProductName(target.name, target.slug)
+                                                                            : `${link.targetProductId.slice(0, 8)}…` }), isMissing ? (_jsx("span", { className: "rounded border px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground", children: t('productEditor.links.badge.missing') })) : null, isInactive ? (_jsx("span", { className: "rounded border px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground", children: t('productEditor.links.badge.inactive') })) : null] }) }), _jsx(TableCell, { className: "font-mono text-xs", children: target?.sku ?? '—' }), _jsx(TableCell, { children: link.position }), _jsx(TableCell, { children: _jsx(Button, { type: "button", size: "sm", variant: "destructive", onClick: () => void handleDelete(link.id), children: t('productEditor.links.action.remove') }) })] }, link.id));
+                                            }) })] }))] }, kind))) })), _jsx(CreateProductLinkInline, { onCreate: handleCreate, sourceProductId: productId })] })] }));
+}
+function CreateProductLinkInline({ onCreate, sourceProductId, }) {
+    const t = useTranslation('catalog');
+    const [targetProductId, setTargetProductId] = useState(null);
+    const [kind, setKind] = useState('related');
+    return (_jsxs("div", { className: "grid gap-3 md:grid-cols-3 border-t pt-4", role: "group", "aria-label": t('productEditor.links.addTitle'), children: [_jsxs("div", { className: "space-y-1 md:col-span-2", children: [_jsx(Label, { htmlFor: "ltarget", children: t('productEditor.links.column.target') }), _jsx(ProductPicker, { id: "ltarget", mode: "select", value: targetProductId, onChange: setTargetProductId, excludeIds: [sourceProductId], placeholder: t('productEditor.links.field.targetPlaceholder'), ariaLabel: t('productEditor.links.column.target') })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "lkind", children: t('productEditor.links.field.kind') }), _jsx(Select, { id: "lkind", value: kind, onChange: (e) => setKind(e.target.value), children: LINK_KINDS.map((k) => (_jsx("option", { value: k, children: t(`productEditor.links.kind.${k}`) }, k))) })] }), _jsx("div", { className: "md:col-span-3", children: _jsx(Button, { type: "button", disabled: targetProductId === null, onClick: () => {
+                        if (targetProductId === null)
+                            return;
+                        void onCreate({ targetProductId, kind }).then(() => {
+                            setTargetProductId(null);
+                        });
+                    }, children: t('productEditor.links.action.add') }) })] }));
+}
+function GroupedItemsSection({ productId }) {
+    const t = useTranslation('catalog');
+    const [items, setItems] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [info, setInfo] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await apiClient.get(`/api/v1/admin/catalog/products/${productId}/grouped-items`);
+            setItems(res.data);
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.grouped.error.load'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [productId, t]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const handleCreate = useCallback(async (input) => {
+        const qty = Number(input.quantity);
+        if (!Number.isFinite(qty) || qty <= 0) {
+            setError(t('productEditor.grouped.error.invalidQuantity'));
+            return;
+        }
+        try {
+            await apiClient.post(`/api/v1/admin/catalog/products/${productId}/grouped-items`, { childProductId: input.childProductId, quantity: qty });
+            setInfo(t('productEditor.grouped.success.add'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.grouped.error.add'));
+        }
+    }, [productId, refresh, t]);
+    const handleDelete = useCallback(async (itemId) => {
+        if (!confirm(t('productEditor.grouped.removeConfirm')))
+            return;
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${productId}/grouped-items/${itemId}`);
+            setInfo(t('productEditor.grouped.success.remove'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.grouped.error.delete'));
+        }
+    }, [productId, refresh, t]);
+    return (_jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('productEditor.grouped.title') }) }), _jsxs(CardContent, { className: "space-y-4", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, info ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: info }) })) : null, loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.loading') })) : items.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.grouped.empty') })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('productEditor.grouped.column.child') }), _jsx(TableHead, { children: t('productEditor.grouped.column.quantity') }), _jsx(TableHead, { children: t('productEditor.grouped.column.position') }), _jsx(TableHead, { className: "w-[1%] whitespace-nowrap", children: t('productEditor.grouped.column.actions') })] }) }), _jsx(TableBody, { children: items.map((item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono text-xs", children: item.childProductId }), _jsx(TableCell, { children: item.quantity }), _jsx(TableCell, { children: item.position }), _jsx(TableCell, { children: _jsx(Button, { type: "button", size: "sm", variant: "destructive", onClick: () => void handleDelete(item.id), children: t('productEditor.grouped.action.remove') }) })] }, item.id))) })] })), _jsx(CreateGroupedItemInline, { onCreate: handleCreate })] })] }));
+}
+function CreateGroupedItemInline({ onCreate, }) {
+    const t = useTranslation('catalog');
+    const [childProductId, setChildProductId] = useState('');
+    const [quantity, setQuantity] = useState('1');
+    return (_jsxs("div", { className: "grid gap-3 md:grid-cols-3 border-t pt-4", role: "group", "aria-label": t('productEditor.grouped.addTitle'), children: [_jsxs("div", { className: "space-y-1 md:col-span-2", children: [_jsx(Label, { htmlFor: "gchild", children: t('productEditor.grouped.column.child') }), _jsx(ProductPicker, { id: "gchild", mode: "select", value: childProductId || null, onChange: (v) => setChildProductId(v ?? '') })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "gquantity", children: t('productEditor.grouped.column.quantity') }), _jsx(Input, { id: "gquantity", type: "number", min: "1", value: quantity, onChange: (e) => setQuantity(e.target.value) })] }), _jsx("div", { className: "md:col-span-3", children: _jsx(Button, { type: "button", onClick: () => {
+                        if (!childProductId)
+                            return;
+                        void onCreate({ childProductId, quantity }).then(() => {
+                            setChildProductId('');
+                            setQuantity('1');
+                        });
+                    }, children: t('productEditor.grouped.action.add') }) })] }));
+}
+function BundleSlotsSection({ productId }) {
+    const t = useTranslation('catalog');
+    const [slots, setSlots] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [info, setInfo] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await apiClient.get(`/api/v1/admin/catalog/products/${productId}/bundle-slots`);
+            setSlots(res.data);
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.bundle.error.load'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [productId, t]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const handleCreateSlot = useCallback(async (input) => {
+        const min = Number(input.minQuantity);
+        const max = Number(input.maxQuantity);
+        if (!Number.isFinite(max) || max <= 0) {
+            setError(t('productEditor.bundle.error.invalidMax'));
+            return;
+        }
+        try {
+            await apiClient.post(`/api/v1/admin/catalog/products/${productId}/bundle-slots`, {
+                name: { 'en-US': input.name },
+                ...(Number.isFinite(min) ? { minQuantity: min } : {}),
+                maxQuantity: max,
+            });
+            setInfo(t('productEditor.bundle.success.addSlot', { name: input.name }));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.bundle.error.addSlot'));
+        }
+    }, [productId, refresh, t]);
+    const handleDeleteSlot = useCallback(async (slotId) => {
+        if (!confirm(t('productEditor.bundle.removeSlotConfirm')))
+            return;
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${productId}/bundle-slots/${slotId}`);
+            setInfo(t('productEditor.bundle.success.removeSlot'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.bundle.error.deleteSlot'));
+        }
+    }, [productId, refresh, t]);
+    const handleAddOption = useCallback(async (slotId, optionProductId) => {
+        if (!optionProductId)
+            return;
+        try {
+            await apiClient.post(`/api/v1/admin/catalog/products/${productId}/bundle-slots/${slotId}/options`, { optionProductId });
+            setInfo(t('productEditor.bundle.success.addOption'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.bundle.error.addOption'));
+        }
+    }, [productId, refresh, t]);
+    const handleRemoveOption = useCallback(async (slotId, optionId) => {
+        if (!confirm(t('productEditor.bundle.removeOptionConfirm')))
+            return;
+        try {
+            await apiClient.delete(`/api/v1/admin/catalog/products/${productId}/bundle-slots/${slotId}/options/${optionId}`);
+            setInfo(t('productEditor.bundle.success.removeOption'));
+            await refresh();
+        }
+        catch (err) {
+            setError(err instanceof ApiError ? err.envelope.error.message : t('productEditor.bundle.error.deleteOption'));
+        }
+    }, [productId, refresh, t]);
+    return (_jsxs(Card, { className: "mt-4", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('productEditor.bundle.title') }) }), _jsxs(CardContent, { className: "space-y-4", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, info ? (_jsx(Alert, { children: _jsx(AlertDescription, { children: info }) })) : null, loading ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.loading') })) : slots.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('productEditor.bundle.empty') })) : (_jsx("div", { className: "space-y-4", children: slots.map((slot) => (_jsx(BundleSlotCard, { slot: slot, onAddOption: handleAddOption, onRemoveOption: handleRemoveOption, onDeleteSlot: handleDeleteSlot }, slot.id))) })), _jsx(CreateBundleSlotInline, { onCreate: handleCreateSlot })] })] }));
+}
+function BundleSlotCard({ slot, onAddOption, onRemoveOption, onDeleteSlot, }) {
+    const t = useTranslation('catalog');
+    const [optionId, setOptionId] = useState('');
+    return (_jsxs("div", { className: "rounded border p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "font-medium", children: [slot.name['en-US'] ?? Object.values(slot.name)[0] ?? '—', ' ', _jsx("span", { className: "text-xs text-muted-foreground", children: t('productEditor.bundle.slotMeta', {
+                                    min: slot.minQuantity,
+                                    max: slot.maxQuantity,
+                                    position: slot.position,
+                                }) })] }), _jsx(Button, { type: "button", size: "sm", variant: "destructive", onClick: () => void onDeleteSlot(slot.id), children: t('productEditor.bundle.action.deleteSlot') })] }), _jsx("div", { className: "mt-2", children: slot.options.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: t('productEditor.bundle.optionsEmpty') })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('productEditor.bundle.column.optionProductId') }), _jsx(TableHead, { children: t('productEditor.bundle.column.defaultQuantity') }), _jsx(TableHead, { children: t('productEditor.bundle.column.position') }), _jsx(TableHead, { className: "w-[1%] whitespace-nowrap", children: t('productEditor.bundle.column.actions') })] }) }), _jsx(TableBody, { children: slot.options.map((opt) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono text-xs", children: opt.optionProductId }), _jsx(TableCell, { children: opt.defaultQuantity }), _jsx(TableCell, { children: opt.position }), _jsx(TableCell, { children: _jsx(Button, { type: "button", size: "sm", variant: "destructive", onClick: () => void onRemoveOption(slot.id, opt.id), children: t('productEditor.bundle.action.removeOption') }) })] }, opt.id))) })] })) }), _jsxs("div", { className: "mt-3 flex items-end gap-2", children: [_jsxs("div", { className: "flex-1 space-y-1", children: [_jsx(Label, { htmlFor: `opt-${slot.id}`, children: t('productEditor.bundle.column.optionProductId') }), _jsx(ProductPicker, { id: `opt-${slot.id}`, mode: "select", value: optionId || null, onChange: (v) => setOptionId(v ?? '') })] }), _jsx(Button, { type: "button", onClick: () => {
+                            void onAddOption(slot.id, optionId).then(() => {
+                                setOptionId('');
+                            });
+                        }, children: t('productEditor.bundle.action.addOption') })] })] }));
+}
+function CreateBundleSlotInline({ onCreate, }) {
+    const t = useTranslation('catalog');
+    const [name, setName] = useState('');
+    const [minQuantity, setMinQuantity] = useState('0');
+    const [maxQuantity, setMaxQuantity] = useState('1');
+    return (_jsxs("div", { className: "grid gap-3 md:grid-cols-4 border-t pt-4", role: "group", "aria-label": t('productEditor.bundle.addTitle'), children: [_jsxs("div", { className: "space-y-1 md:col-span-2", children: [_jsx(Label, { htmlFor: "bsname", children: t('productEditor.bundle.field.slotName') }), _jsx(Input, { id: "bsname", value: name, onChange: (e) => setName(e.target.value), placeholder: t('productEditor.bundle.field.slotNamePlaceholder') })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "bsmin", children: t('productEditor.bundle.field.min') }), _jsx(Input, { id: "bsmin", type: "number", min: "0", value: minQuantity, onChange: (e) => setMinQuantity(e.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "bsmax", children: t('productEditor.bundle.field.max') }), _jsx(Input, { id: "bsmax", type: "number", min: "1", value: maxQuantity, onChange: (e) => setMaxQuantity(e.target.value) })] }), _jsx("div", { className: "md:col-span-4", children: _jsx(Button, { type: "button", onClick: () => {
+                        if (!name)
+                            return;
+                        void onCreate({ name, minQuantity, maxQuantity }).then(() => {
+                            setName('');
+                            setMinQuantity('0');
+                            setMaxQuantity('1');
+                        });
+                    }, children: t('productEditor.bundle.action.add') }) })] }));
+}
+/**
+ * The default export a route declaration's dynamic-import factory resolves
+ * (feature 091, R6). The named export stays: it is the spelling this module's
+ * own siblings and tests use.
+ */
+export default ProductEditor;
+//# sourceMappingURL=ProductEditor.js.map