@hectasquare/medusa-plugin-category-tree 1.0.7 → 1.0.9

package/.medusa/server/src/admin/components/category-tree/canvas-dock.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@medusajs/ui");
 const icons_1 = require("@medusajs/icons");
 const CanvasDock = ({ salesChannels, selectedStorefront, onSelectStorefront, direction, onToggleDirection, onSelectDirection, searchQuery, onSearchChange, onExpandAll, onCollapseAll, onFocusRoot, selectedCount = 0, onExpandSelected, onCollapseSelected, isBoxSelect = false, onToggleBoxSelect, onZoomIn, onZoomOut, onFitView, onOpenCreateRoot, dirtyCount, isSaving, onSave, onReset, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 items-center pointer-events-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 px-3.5 py-2 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-md border border-ui-border-base rounded-2xl shadow-xl transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 border-r border-ui-border-base pr-2.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-semibold text-ui-fg-muted uppercase tracking-wider", children: "Store:" }), (0, jsx_runtime_1.jsxs)("select", { value: selectedStorefront, onChange: (e) => onSelectStorefront(e.target.value), className: "text-xs bg-ui-bg-subtle text-ui-fg-base border border-ui-border-base rounded-lg px-2 py-1 font-medium focus:outline-none cursor-pointer", children: [(0, jsx_runtime_1.jsx)("option", { value: "all", children: "All Storefronts" }), salesChannels.map((sc) => ((0, jsx_runtime_1.jsx)("option", { value: sc.id, children: sc.name }, sc.id)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center border-r border-ui-border-base pr-2.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-0.5 bg-ui-bg-subtle border border-ui-border-base rounded-lg gap-0.5", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => (onSelectDirection ? onSelectDirection("TB") : onToggleDirection()), className: `px-2 py-0.5 text-xs font-medium rounded-md transition-all ${direction === "TB"
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 items-center pointer-events-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 px-3.5 py-2 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-md border border-ui-border-base rounded-2xl shadow-xl transition-all", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 border-r border-ui-border-base pr-2.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-semibold text-ui-fg-muted uppercase tracking-wider", children: "Store:" }), (0, jsx_runtime_1.jsxs)("select", { value: selectedStorefront, onChange: (e) => onSelectStorefront(e.target.value), className: "text-xs bg-ui-bg-subtle text-ui-fg-base border border-ui-border-base rounded-lg px-2 py-1 font-medium focus:outline-none cursor-pointer", children: [(0, jsx_runtime_1.jsx)("option", { value: "all", children: "All Storefronts" }), salesChannels.map((sc) => ((0, jsx_runtime_1.jsx)("option", { value: sc.id, children: sc.name }, sc.id)))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center border-r border-ui-border-base pr-2.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center p-0.5 bg-ui-bg-subtle border border-ui-border-base rounded-lg gap-0.5", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => (onSelectDirection ? onSelectDirection("LR") : onToggleDirection()), className: `px-2 py-0.5 text-xs font-medium rounded-md transition-all ${direction === "LR"
                                         ? "bg-ui-bg-base text-ui-fg-base shadow-xs font-semibold"
-                                        : "text-ui-fg-muted hover:text-ui-fg-base"}`, title: "Vertical Tree Layout (Default)", children: "\u2B07 Vertical" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => (onSelectDirection ? onSelectDirection("LR") : onToggleDirection()), className: `px-2 py-0.5 text-xs font-medium rounded-md transition-all ${direction === "LR"
+                                        : "text-ui-fg-muted hover:text-ui-fg-base"}`, title: "Vertical Tree Layout", children: "\u2B07 Vertical" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => (onSelectDirection ? onSelectDirection("TB") : onToggleDirection()), className: `px-2 py-0.5 text-xs font-medium rounded-md transition-all ${direction === "TB"
                                         ? "bg-ui-bg-base text-ui-fg-base shadow-xs font-semibold"
-                                        : "text-ui-fg-muted hover:text-ui-fg-base"}`, title: "Mind Map Layout (Horizontal)", children: "\u27A1 Mind Map" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative w-36 sm:w-44", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search categories\u2026", value: searchQuery, onChange: (e) => onSearchChange(e.target.value), className: "w-full text-xs pl-7 pr-2.5 py-1 rounded-lg bg-ui-bg-subtle border border-ui-border-base text-ui-fg-base focus:bg-ui-bg-base focus:border-ui-border-interactive focus:outline-none transition-all placeholder:text-ui-fg-muted" }), (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlass, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-ui-fg-muted pointer-events-none" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 border-l border-ui-border-base pl-2.5", children: [selectedCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", title: `Expand selected category (${selectedCount} selected)`, onClick: onExpandSelected || onExpandAll, className: "px-2 py-1 text-xs font-medium bg-ui-bg-interactive text-ui-fg-on-color rounded-md transition-colors", children: ["Expand (", selectedCount, ")"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", title: `Collapse selected category (${selectedCount} selected)`, onClick: onCollapseSelected || onCollapseAll, className: "px-2 py-1 text-xs font-medium bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base rounded-md transition-colors", children: ["Collapse (", selectedCount, ")"] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", title: "Expand All Categories", onClick: onExpandAll, className: "px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors", children: "Expand All" }), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Collapse All Subcategories", onClick: onCollapseAll, className: "px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors", children: "Collapse All" })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Focus on Root Categories", onClick: onFocusRoot, className: "px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors", children: "Root" })] }), onToggleBoxSelect && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center border-l border-ui-border-base pl-2.5", children: (0, jsx_runtime_1.jsx)("button", { type: "button", title: isBoxSelect ? "Box Selection Active (Drag to outline cards). Click to switch to Pan" : "Click to enable Box Select marquee (Outline cards to move together)", onClick: onToggleBoxSelect, className: `px-2 py-1 text-xs font-medium rounded-md transition-colors ${isBoxSelect
+                                        : "text-ui-fg-muted hover:text-ui-fg-base"}`, title: "Mind Map Layout", children: "\u27A1 Mind Map" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative w-36 sm:w-44", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search categories\u2026", value: searchQuery, onChange: (e) => onSearchChange(e.target.value), className: "w-full text-xs pl-7 pr-2.5 py-1 rounded-lg bg-ui-bg-subtle border border-ui-border-base text-ui-fg-base focus:bg-ui-bg-base focus:border-ui-border-interactive focus:outline-none transition-all placeholder:text-ui-fg-muted" }), (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlass, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-ui-fg-muted pointer-events-none" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 border-l border-ui-border-base pl-2.5", children: [selectedCount > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", title: `Expand selected category (${selectedCount} selected)`, onClick: onExpandSelected || onExpandAll, className: "px-2 py-1 text-xs font-medium bg-ui-bg-interactive text-ui-fg-on-color rounded-md transition-colors", children: ["Expand (", selectedCount, ")"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", title: `Collapse selected category (${selectedCount} selected)`, onClick: onCollapseSelected || onCollapseAll, className: "px-2 py-1 text-xs font-medium bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base rounded-md transition-colors", children: ["Collapse (", selectedCount, ")"] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", title: "Expand All Categories", onClick: onExpandAll, className: "px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors", children: "Expand All" }), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Collapse All Subcategories", onClick: onCollapseAll, className: "px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors", children: "Collapse All" })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Focus on Root Categories", onClick: onFocusRoot, className: "px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors", children: "Root" })] }), onToggleBoxSelect && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center border-l border-ui-border-base pl-2.5", children: (0, jsx_runtime_1.jsx)("button", { type: "button", title: isBoxSelect ? "Box Selection Active (Drag to outline cards). Click to switch to Pan" : "Click to enable Box Select marquee (Outline cards to move together)", onClick: onToggleBoxSelect, className: `px-2 py-1 text-xs font-medium rounded-md transition-colors ${isBoxSelect
                                 ? "bg-blue-600 text-white shadow-xs"
                                 : "text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle"}`, children: "\u26F6 Box Select" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 border-l border-ui-border-base pl-2.5", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", title: "Zoom In", onClick: onZoomIn, className: "w-5 h-5 flex items-center justify-center text-xs font-bold text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded transition-colors", children: "+" }), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Zoom Out", onClick: onZoomOut, className: "w-5 h-5 flex items-center justify-center text-xs font-bold text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded transition-colors", children: "\u2212" }), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Fit View (Center)", onClick: onFitView, className: "p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowsPointingOut, { className: "w-3.5 h-3.5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-l border-ui-border-base pl-2.5", children: (0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "small", variant: "secondary", onClick: onOpenCreateRoot, className: "flex items-center gap-1 text-xs h-7", children: [(0, jsx_runtime_1.jsx)(icons_1.Plus, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "New Root" })] }) })] }), dirtyCount > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-4 py-1.5 bg-blue-600 text-white rounded-full shadow-lg text-xs font-medium animate-in fade-in slide-in-from-top-2 duration-200", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), (0, jsx_runtime_1.jsxs)("span", { children: [dirtyCount, " categor", dirtyCount === 1 ? "y" : "ies", " repositioned"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 border-l border-blue-400 pl-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onReset, disabled: isSaving, className: "px-2 py-0.5 rounded hover:bg-blue-700 transition-colors text-blue-100 hover:text-white", children: "Reset" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onSave, disabled: isSaving, className: "px-3 py-0.5 rounded-full bg-white text-blue-700 font-semibold hover:bg-blue-50 transition-colors shadow-xs", children: isSaving ? "Saving…" : "Save Hierarchy" })] })] }))] }));
 };

package/.medusa/server/src/admin/components/category-tree/category-tree-canvas.js

@@ -27,7 +27,7 @@ const CanvasInner = () => {
     const [salesChannels, setSalesChannels] = (0, react_1.useState)([]);
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [isSaving, setIsSaving] = (0, react_1.useState)(false);
-    const [direction, setDirection] = (0, react_1.useState)("TB");
+    const [direction, setDirection] = (0, react_1.useState)("LR");
     const [selectedStorefront, setSelectedStorefront] = (0, react_1.useState)("all");
     const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
     const [collapsedIds, setCollapsedIds] = (0, react_1.useState)(new Set());
@@ -270,7 +270,48 @@ const CanvasInner = () => {
                         setCreateDrawerOpen(true);
                     }, dirtyCount: dirtyMoves.length, isSaving: isSaving, onSave: handleSave, onReset: handleReset }) }), (0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onEdgesDelete: onEdgesDelete, onSelectionChange: (0, react_1.useCallback)(({ nodes }) => {
                     setSelectedNodeIds(nodes.map((n) => n.id));
-                }, []), selectionMode: react_2.SelectionMode.Partial, selectionOnDrag: isBoxSelect, panOnDrag: isBoxSelect ? [1, 2] : true, elementsSelectable: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.2, maxZoom: 2.0, defaultEdgeOptions: { type: "smoothstep" }, fitView: true, proOptions: { hideAttribution: true }, className: "touch-none", children: [(0, jsx_runtime_1.jsx)(react_2.Background, { color: "#cbd5e1", gap: 20, size: 1.25 }), (0, jsx_runtime_1.jsx)(react_2.Controls, { showInteractive: false, className: "!bottom-4 !left-4 !bg-[#18181b] !border !border-neutral-700 !rounded-xl !shadow-2xl !overflow-hidden [&_.react-flow\\_\\_controls-button]:!bg-[#18181b] [&_.react-flow\\_\\_controls-button]:!border-b [&_.react-flow\\_\\_controls-button]:!border-neutral-800 [&_.react-flow\\_\\_controls-button:hover]:!bg-[#27272a] [&_.react-flow\\_\\_controls-button_svg]:!fill-white [&_.react-flow\\_\\_controls-button_svg]:!stroke-white [&_.react-flow\\_\\_controls-button_path]:!fill-white" }), (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: () => "var(--bg-interactive, #3b82f6)", maskColor: "rgba(0, 0, 0, 0.25)", className: "!bottom-4 !right-4 !bg-[#18181b]/95 !backdrop-blur-md !border !border-neutral-700 !rounded-xl !shadow-xl !overflow-hidden", zoomable: true, pannable: true })] }), (0, jsx_runtime_1.jsx)(create_category_drawer_1.CreateCategoryDrawer, { open: createDrawerOpen, onOpenChange: setCreateDrawerOpen, parentCategory: createParentCategory, salesChannels: salesChannels, onSuccess: (newCat) => {
+                }, []), selectionMode: react_2.SelectionMode.Partial, selectionOnDrag: isBoxSelect, panOnDrag: isBoxSelect ? [1, 2] : true, elementsSelectable: true, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.2, maxZoom: 2.0, defaultEdgeOptions: { type: "smoothstep" }, fitView: true, proOptions: { hideAttribution: true }, className: "touch-none", children: [(0, jsx_runtime_1.jsx)(react_2.Background, { color: "#cbd5e1", gap: 20, size: 1.25 }), (0, jsx_runtime_1.jsx)(react_2.Controls, { showInteractive: false, className: "!bottom-4 !left-4" }), (0, jsx_runtime_1.jsx)("style", { children: `
+          .react-flow__controls {
+            background: #ffffff !important;
+            border: 1px solid #d1d5db !important;
+            border-radius: 9999px !important;
+            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
+            padding: 3px !important;
+            display: flex !important;
+            flex-direction: column !important;
+            gap: 2px !important;
+            overflow: hidden !important;
+          }
+          .react-flow__controls-button {
+            background: #ffffff !important;
+            border: none !important;
+            border-bottom: 1px solid #f1f5f9 !important;
+            border-radius: 9999px !important;
+            width: 28px !important;
+            height: 28px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            cursor: pointer !important;
+            transition: background 0.15s ease !important;
+          }
+          .react-flow__controls-button:last-child {
+            border-bottom: none !important;
+          }
+          .react-flow__controls-button:hover {
+            background: #f3f4f6 !important;
+          }
+          .react-flow__controls-button svg {
+            fill: #000000 !important;
+            stroke: #000000 !important;
+            color: #000000 !important;
+          }
+          .react-flow__controls-button svg path {
+            fill: #000000 !important;
+            stroke: #000000 !important;
+            color: #000000 !important;
+          }
+        ` }), (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: () => "var(--bg-interactive, #3b82f6)", maskColor: "rgba(0, 0, 0, 0.25)", className: "!bottom-4 !right-4 !bg-[#18181b]/95 !backdrop-blur-md !border !border-neutral-700 !rounded-xl !shadow-xl !overflow-hidden", zoomable: true, pannable: true })] }), (0, jsx_runtime_1.jsx)(create_category_drawer_1.CreateCategoryDrawer, { open: createDrawerOpen, onOpenChange: setCreateDrawerOpen, parentCategory: createParentCategory, salesChannels: salesChannels, onSuccess: (newCat) => {
                     setCategories((prev) => [...prev, newCat]);
                     setOriginalCategories((prev) => [...prev, newCat]);
                 } }), (0, jsx_runtime_1.jsx)(edit_category_drawer_1.EditCategoryDrawer, { open: editDrawerOpen, onOpenChange: setEditDrawerOpen, category: editingCategory, salesChannels: salesChannels, onSuccess: (updatedCat) => {

package/.medusa/server/src/admin/components/category-tree/edit-category-drawer.js

@@ -42,6 +42,10 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
     const [isFullScreen, setIsFullScreen] = (0, react_1.useState)(false);
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
+    // Media upload & gallery state
+    const fileInputRef = (0, react_1.useRef)(null);
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const [categoryImages, setCategoryImages] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         if (category) {
             setName(category.name || "");
@@ -64,8 +68,136 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
             }
             setYoutubeUrls(urls);
             setActiveTab("general");
+            // Load category media from backend
+            loadCategoryImages(category.id, category.image_url || meta?.thumbnail || meta?.image);
         }
     }, [category, salesChannels]);
+    // Load existing category media gallery
+    const loadCategoryImages = (0, react_1.useCallback)(async (catId, currentImageUrl) => {
+        try {
+            const res = await sdk_1.sdk.client.fetch(`/admin/categories/${catId}/images`);
+            if (res?.category_images && Array.isArray(res.category_images) && res.category_images.length > 0) {
+                setCategoryImages(res.category_images);
+                const thumb = res.category_images.find((img) => img.type === "thumbnail");
+                if (thumb?.url) {
+                    setImageUrl(thumb.url);
+                }
+                return;
+            }
+        }
+        catch {
+            // Endpoint fallback
+        }
+        if (currentImageUrl) {
+            setCategoryImages([{ url: currentImageUrl, type: "thumbnail" }]);
+        }
+        else {
+            setCategoryImages([]);
+        }
+    }, []);
+    // Universal S3/Storage Media Upload Handler (works with AWS S3, MinIO, Cloudflare R2, Local)
+    const handleFileUpload = async (files) => {
+        if (!files || files.length === 0)
+            return;
+        setIsUploading(true);
+        try {
+            const fileList = Array.from(files);
+            // Calls standard Medusa File Module API (delegates to configured S3 provider in medusa-config.js)
+            const res = await sdk_1.sdk.admin.upload.create({ files: fileList });
+            const uploadedFiles = res.files || [];
+            if (uploadedFiles.length === 0) {
+                throw new Error("No files returned from upload service");
+            }
+            const firstUrl = uploadedFiles[0].url;
+            if (!imageUrl) {
+                setImageUrl(firstUrl);
+            }
+            // If backend has custom category images endpoint, save them there too
+            try {
+                await sdk_1.sdk.client.fetch(`/admin/categories/${category.id}/images`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: {
+                        images: uploadedFiles.map((f, i) => ({
+                            url: f.url,
+                            type: i === 0 && !imageUrl ? "thumbnail" : "image",
+                        })),
+                    },
+                });
+                await loadCategoryImages(category.id, firstUrl);
+            }
+            catch {
+                // Fallback for standard stores: update local gallery state
+                setCategoryImages((prev) => [
+                    ...prev,
+                    ...uploadedFiles.map((f, i) => ({
+                        url: f.url,
+                        type: i === 0 && !imageUrl ? "thumbnail" : "image",
+                    })),
+                ]);
+            }
+            ui_1.toast.success(`${uploadedFiles.length} image(s) uploaded successfully`);
+        }
+        catch (err) {
+            ui_1.toast.error(err?.message || "Failed to upload image");
+        }
+        finally {
+            setIsUploading(false);
+            if (fileInputRef.current)
+                fileInputRef.current.value = "";
+        }
+    };
+    // Set selected image as Category Thumbnail
+    const handleSetThumbnail = async (img) => {
+        setImageUrl(img.url);
+        if (img.id) {
+            try {
+                await sdk_1.sdk.client.fetch(`/admin/categories/${category.id}/images/batch`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: {
+                        updates: [{ id: img.id, type: "thumbnail" }],
+                    },
+                });
+                await loadCategoryImages(category.id, img.url);
+            }
+            catch {
+                setCategoryImages((prev) => prev.map((item) => ({
+                    ...item,
+                    type: item.url === img.url ? "thumbnail" : "image",
+                })));
+            }
+        }
+        else {
+            setCategoryImages((prev) => prev.map((item) => ({
+                ...item,
+                type: item.url === img.url ? "thumbnail" : "image",
+            })));
+        }
+        ui_1.toast.success("Designated as category thumbnail");
+    };
+    // Delete category image
+    const handleDeleteImage = async (img) => {
+        if (img.id) {
+            try {
+                await sdk_1.sdk.client.fetch(`/admin/categories/${category.id}/images/batch`, {
+                    method: "DELETE",
+                    headers: { "Content-Type": "application/json" },
+                    body: {
+                        ids: [img.id],
+                    },
+                });
+            }
+            catch {
+                // Fallback
+            }
+        }
+        setCategoryImages((prev) => prev.filter((i) => i.url !== img.url));
+        if (imageUrl === img.url) {
+            setImageUrl("");
+        }
+        ui_1.toast.info("Image removed");
+    };
     if (!category)
         return null;
     const toggleChannel = (channelId) => {
@@ -176,10 +308,28 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
                                     } }) })), activeTab === "channels" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Storefront Visibility" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Designate which storefront sales channels display this category." }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: salesChannels.map((channel) => {
                                                     const isChecked = selectedChannels.includes(channel.id);
                                                     return ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2.5 text-xs text-ui-fg-base cursor-pointer select-none p-2 rounded-lg border border-ui-border-base bg-ui-bg-subtle/40 hover:bg-ui-bg-subtle", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isChecked, onChange: () => toggleChannel(channel.id), className: "rounded border-ui-border-base text-blue-600 focus:ring-blue-500 cursor-pointer" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: channel.name })] }, channel.id));
-                                                }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 pt-3 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-image", className: "text-xs font-semibold", children: "Category Thumbnail / Image URL" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-image", size: "small", value: imageUrl, onChange: (e) => setImageUrl(e.target.value), placeholder: "https://example.com/category-image.jpg" }), imageUrl && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 w-24 h-24 rounded-xl overflow-hidden border border-ui-border-base bg-ui-bg-subtle shadow-xs", children: (0, jsx_runtime_1.jsx)("img", { src: imageUrl, alt: "Category Preview", className: "w-full h-full object-cover", onError: (e) => {
-                                                        ;
-                                                        e.target.style.display = "none";
-                                                    } }) }))] })] })), activeTab === "youtube" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-xs font-semibold text-ui-fg-base", children: "Category Demonstration Videos (YouTube)" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-ui-fg-muted mt-0.5", children: "Attach YouTube video demonstration links to show interactive video carousels on the storefront category page." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { size: "small", placeholder: "Paste YouTube watch URL, shorts, or video ID\u2026", value: newYoutubeInput, onChange: (e) => setNewYoutubeInput(e.target.value), className: "flex-1 text-xs", onKeyDown: (e) => {
+                                                }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 pt-3 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Category Media" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Upload category thumbnails and banners. Automatically handled by your configured S3 or storage provider." })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isUploading, className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-ui-bg-base hover:bg-ui-bg-subtle text-ui-fg-base border border-ui-border-base rounded-lg shadow-2xs transition-colors cursor-pointer", children: [(0, jsx_runtime_1.jsx)(icons_1.ArrowDownTray, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: isUploading ? "Uploading…" : "Upload Media" })] })] }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: "image/jpeg,image/png,image/gif,image/webp,image/svg+xml", onChange: (e) => handleFileUpload(e.target.files), className: "hidden" }), (0, jsx_runtime_1.jsxs)("div", { onDragOver: (e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                }, onDrop: (e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    if (!isUploading)
+                                                        handleFileUpload(e.dataTransfer.files);
+                                                }, onClick: () => fileInputRef.current?.click(), className: "border-2 border-dashed border-ui-border-strong hover:border-ui-border-interactive rounded-xl p-6 flex flex-col items-center justify-center gap-2 bg-ui-bg-subtle/30 hover:bg-ui-bg-subtle/60 transition-colors cursor-pointer text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-ui-bg-base border border-ui-border-base flex items-center justify-center text-ui-fg-subtle shadow-2xs", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowDownTray, { className: "w-5 h-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-ui-fg-base", children: isUploading ? "Uploading to storage…" : "Click to upload or drag & drop images" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[11px] text-ui-fg-muted", children: "PNG, JPG, WEBP, GIF, SVG up to 10MB" })] })] }), categoryImages.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 mt-2", children: [(0, jsx_runtime_1.jsxs)(ui_1.Label, { className: "text-xs font-medium text-ui-fg-muted", children: ["Uploaded Images (", categoryImages.length, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3", children: categoryImages.map((img, idx) => {
+                                                            const isThumbnail = img.type === "thumbnail" || img.url === imageUrl;
+                                                            return ((0, jsx_runtime_1.jsxs)("div", { className: `group relative aspect-square rounded-xl overflow-hidden border bg-ui-bg-base transition-all shadow-xs ${isThumbnail
+                                                                    ? "ring-2 ring-blue-500 border-transparent"
+                                                                    : "border-ui-border-base hover:border-ui-border-strong"}`, children: [(0, jsx_runtime_1.jsx)("img", { src: img.url, alt: "Category Media", className: "w-full h-full object-cover" }), isThumbnail && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-1.5 left-1.5 bg-blue-600 text-white text-[9px] font-bold px-1.5 py-0.5 rounded shadow-xs", children: "\u2605 Thumbnail" })), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-1.5 p-1.5", children: [!isThumbnail && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                                                                    e.preventDefault();
+                                                                                    e.stopPropagation();
+                                                                                    handleSetThumbnail(img);
+                                                                                }, className: "px-2 py-0.5 bg-white text-neutral-900 rounded text-[10px] font-semibold hover:bg-neutral-100 transition-colors shadow-xs", children: "Set Thumbnail" })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                                                                    e.preventDefault();
+                                                                                    e.stopPropagation();
+                                                                                    handleDeleteImage(img);
+                                                                                }, className: "p-1 bg-rose-600 text-white rounded hover:bg-rose-700 transition-colors", title: "Remove image", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }) })] })] }, img.id || idx));
+                                                        }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 mt-1 pt-2 border-t border-ui-border-base/50", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-image", className: "text-[11px] text-ui-fg-muted", children: "Or paste an external image URL" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-image", size: "small", value: imageUrl, onChange: (e) => setImageUrl(e.target.value), placeholder: "https://example.com/category-image.jpg" })] })] })] })), activeTab === "youtube" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-xs font-semibold text-ui-fg-base", children: "Category Demonstration Videos (YouTube)" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-ui-fg-muted mt-0.5", children: "Attach YouTube video demonstration links to show interactive video carousels on the storefront category page." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { size: "small", placeholder: "Paste YouTube watch URL, shorts, or video ID\u2026", value: newYoutubeInput, onChange: (e) => setNewYoutubeInput(e.target.value), className: "flex-1 text-xs", onKeyDown: (e) => {
                                                     if (e.key === "Enter") {
                                                         e.preventDefault();
                                                         handleAddYoutube();

package/README.md

@@ -47,7 +47,9 @@ Clicking the edit pencil icon on any node opens a wide slide-over hub featuring
    - **Full-Screen FocusModal:** Direct parity with Medusa's legacy Add Products modal with full-width table, search (`Q Search`), pagination, and batch assignment.
 3. **Storefronts & Media:**
    - Multi-sales channel visibility checkboxes (`Monfil Store`, `Superpunch`, etc.).
-   - Category thumbnail and image URL editor with live preview.
+   - **Native Drag-and-Drop Media Upload:** Integrated with Medusa v2's native File Module (`sdk.admin.upload.create`).
+   - **Visual Gallery Manager:** Image preview cards, delete actions, and one-click `★ Thumbnail` designation.
+   - **Direct External URL Input:** Fallback support for external CDN, Cloudinary, or DAM image links.
 4. **YouTube Videos:**
    - Multi-video demonstration manager with real-time thumbnail preview cards and quick remove actions.
 
@@ -156,6 +158,114 @@ if (topSellerIds.length > 0) {
 
 ---
 
+## ☁️ Media Upload & Storage Provider Compatibility
+
+The plugin's Category Detail Hub features a unified media uploader and gallery manager. To ensure zero vendor lock-in, file handling is **100% storage-provider agnostic**:
+
+1. **Native Medusa File Module Pipeline:**
+   - Uploads execute via Medusa v2's native SDK (`sdk.admin.upload.create({ files })`), routing directly to `POST /admin/uploads`.
+   - Your backend delegates the upload to whichever File Module Provider is configured in `medusa-config.js` and returns the CDN URL.
+2. **Direct External URL / CDN Fallback:**
+   - If your assets are hosted on an external DAM, Cloudinary, Imgix, or third-party S3 bucket, you can simply paste the image URL directly into the uploader and click **Add**.
+
+### 💡 Category Media in Medusa v2: Native vs. Plugin Architecture
+
+In core Medusa v2, products have native media tables (`product_images`), but **`product_category` does not have a native images relationship out of the box**. 
+
+To solve this universally without imposing mandatory database migrations on standard Medusa stores, this plugin employs an **adaptive hybrid architecture**:
+
+- **Universal Metadata Mode (Zero Config / Out of the Box):**
+  - Stores all gallery assets and active thumbnail directly inside Medusa's native `category.metadata`:
+    ```json
+    {
+      "metadata": {
+        "image_url": "https://cdn.store.com/category-thumb.webp",
+        "images": [
+          { "id": "img_01", "url": "https://cdn.store.com/hero.webp", "type": "thumbnail" },
+          { "id": "img_02", "url": "https://cdn.store.com/banner.webp", "type": "image" }
+        ]
+      }
+    }
+    ```
+  - **Zero backend code or database migrations required.** Any standard Medusa v2 installation supports this immediately.
+
+- **Custom Backend Module Mode (Optional Extended Architecture):**
+  - If your backend has extended the Medusa framework with a custom Category Media module (e.g., custom DML model `product_category_image` exposing `/admin/categories/:category_id/images`), the plugin detects this endpoint and automatically synchronizes both the custom relation and metadata!
+
+### Configuring S3-Compatible Storage in Medusa v2
+
+Because Medusa abstracts storage through `@medusajs/medusa/file-s3`, you can seamlessly route category media to **AWS S3, Cloudflare R2, MinIO, or DigitalOcean Spaces** by adjusting `medusa-config.js`:
+
+#### AWS S3
+```javascript
+// medusa-config.js
+module.exports = defineConfig({
+  modules: [
+    {
+      resolve: "@medusajs/medusa/file",
+      options: {
+        providers: [
+          {
+            resolve: "@medusajs/medusa/file-s3",
+            id: "s3",
+            options: {
+              file_url: process.env.MEDUSA_FILE_URL, // CDN or bucket public URL
+              access_key_id: process.env.S3_ACCESS_KEY_ID,
+              secret_access_key: process.env.S3_SECRET_ACCESS_KEY,
+              region: process.env.S3_REGION,
+              bucket: process.env.S3_BUCKET,
+            },
+          },
+        ],
+      },
+    },
+  ],
+})
+```
+
+#### Cloudflare R2
+```javascript
+// medusa-config.js
+options: {
+  file_url: process.env.R2_PUBLIC_URL, // e.g. https://pub-xxxx.r2.dev or custom domain
+  access_key_id: process.env.R2_ACCESS_KEY_ID,
+  secret_access_key: process.env.R2_SECRET_ACCESS_KEY,
+  bucket: process.env.R2_BUCKET_NAME,
+  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  region: "auto",
+}
+```
+
+#### MinIO (Self-Hosted S3)
+```javascript
+// medusa-config.js
+options: {
+  file_url: process.env.MINIO_PUBLIC_URL, // e.g. http://localhost:9000/my-bucket
+  access_key_id: process.env.MINIO_ROOT_USER,
+  secret_access_key: process.env.MINIO_ROOT_PASSWORD,
+  bucket: process.env.MINIO_BUCKET,
+  endpoint: process.env.MINIO_ENDPOINT, // e.g. http://127.0.0.1:9000
+  additional_client_config: {
+    forcePathStyle: true, // Required for MinIO
+  },
+}
+```
+
+#### DigitalOcean Spaces
+```javascript
+// medusa-config.js
+options: {
+  file_url: `https://${process.env.DO_SPACES_BUCKET}.${process.env.DO_SPACES_REGION}.digitaloceanspaces.com`,
+  access_key_id: process.env.DO_SPACES_KEY,
+  secret_access_key: process.env.DO_SPACES_SECRET,
+  bucket: process.env.DO_SPACES_BUCKET,
+  endpoint: `https://${process.env.DO_SPACES_REGION}.digitaloceanspaces.com`,
+  region: process.env.DO_SPACES_REGION,
+}
+```
+
+---
+
 ## 🏗️ Architecture & Project Structure
 
 ```text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hectasquare/medusa-plugin-category-tree",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "AAA Interactive Category Tree & Mind Map for Medusa v2 Admin with drag-and-drop reparenting, tier indicators, superscript ranks, multi-storefront filtering, and NotebookLM-style subtree collapse.",
   "author": "HectaSquare Team",
   "license": "Apache-2.0",

package/src/admin/components/category-tree/canvas-dock.tsx

@@ -93,25 +93,25 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
           <div className="flex items-center p-0.5 bg-ui-bg-subtle border border-ui-border-base rounded-lg gap-0.5">
             <button
               type="button"
-              onClick={() => (onSelectDirection ? onSelectDirection("TB") : onToggleDirection())}
+              onClick={() => (onSelectDirection ? onSelectDirection("LR") : onToggleDirection())}
               className={`px-2 py-0.5 text-xs font-medium rounded-md transition-all ${
-                direction === "TB"
+                direction === "LR"
                   ? "bg-ui-bg-base text-ui-fg-base shadow-xs font-semibold"
                   : "text-ui-fg-muted hover:text-ui-fg-base"
               }`}
-              title="Vertical Tree Layout (Default)"
+              title="Vertical Tree Layout"
             >
               ⬇ Vertical
             </button>
             <button
               type="button"
-              onClick={() => (onSelectDirection ? onSelectDirection("LR") : onToggleDirection())}
+              onClick={() => (onSelectDirection ? onSelectDirection("TB") : onToggleDirection())}
               className={`px-2 py-0.5 text-xs font-medium rounded-md transition-all ${
-                direction === "LR"
+                direction === "TB"
                   ? "bg-ui-bg-base text-ui-fg-base shadow-xs font-semibold"
                   : "text-ui-fg-muted hover:text-ui-fg-base"
               }`}
-              title="Mind Map Layout (Horizontal)"
+              title="Mind Map Layout"
             >
               ➡ Mind Map
             </button>

package/src/admin/components/category-tree/category-tree-canvas.tsx

@@ -51,7 +51,7 @@ const CanvasInner: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [isSaving, setIsSaving] = useState(false)
 
-  const [direction, setDirection] = useState<"TB" | "LR">("TB")
+  const [direction, setDirection] = useState<"TB" | "LR">("LR")
   const [selectedStorefront, setSelectedStorefront] = useState<string>("all")
   const [searchQuery, setSearchQuery] = useState("")
   const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set())
@@ -408,8 +408,50 @@ const CanvasInner: React.FC = () => {
         <Background color="#cbd5e1" gap={20} size={1.25} />
         <Controls
           showInteractive={false}
-          className="!bottom-4 !left-4 !bg-[#18181b] !border !border-neutral-700 !rounded-xl !shadow-2xl !overflow-hidden [&_.react-flow\_\_controls-button]:!bg-[#18181b] [&_.react-flow\_\_controls-button]:!border-b [&_.react-flow\_\_controls-button]:!border-neutral-800 [&_.react-flow\_\_controls-button:hover]:!bg-[#27272a] [&_.react-flow\_\_controls-button_svg]:!fill-white [&_.react-flow\_\_controls-button_svg]:!stroke-white [&_.react-flow\_\_controls-button_path]:!fill-white"
+          className="!bottom-4 !left-4"
         />
+        <style>{`
+          .react-flow__controls {
+            background: #ffffff !important;
+            border: 1px solid #d1d5db !important;
+            border-radius: 9999px !important;
+            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
+            padding: 3px !important;
+            display: flex !important;
+            flex-direction: column !important;
+            gap: 2px !important;
+            overflow: hidden !important;
+          }
+          .react-flow__controls-button {
+            background: #ffffff !important;
+            border: none !important;
+            border-bottom: 1px solid #f1f5f9 !important;
+            border-radius: 9999px !important;
+            width: 28px !important;
+            height: 28px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            cursor: pointer !important;
+            transition: background 0.15s ease !important;
+          }
+          .react-flow__controls-button:last-child {
+            border-bottom: none !important;
+          }
+          .react-flow__controls-button:hover {
+            background: #f3f4f6 !important;
+          }
+          .react-flow__controls-button svg {
+            fill: #000000 !important;
+            stroke: #000000 !important;
+            color: #000000 !important;
+          }
+          .react-flow__controls-button svg path {
+            fill: #000000 !important;
+            stroke: #000000 !important;
+            color: #000000 !important;
+          }
+        `}</style>
         <MiniMap
           nodeColor={() => "var(--bg-interactive, #3b82f6)"}
           maskColor="rgba(0, 0, 0, 0.25)"

package/src/admin/components/category-tree/edit-category-drawer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useCallback, useRef } from "react"
 import {
   Button,
   Drawer,
@@ -9,7 +9,7 @@ import {
   Textarea,
   toast,
 } from "@medusajs/ui"
-import { Trash, Plus, ArrowUpRightMicro, ArrowsPointingOut } from "@medusajs/icons"
+import { Trash, Plus, ArrowUpRightMicro, ArrowsPointingOut, ArrowDownTray } from "@medusajs/icons"
 import { CategoryTreeNode, SalesChannelInfo } from "./types"
 import { CategoryProductsManager } from "./category-products-manager"
 import { sdk } from "../../lib/sdk"
@@ -66,6 +66,11 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
 
+  // Media upload & gallery state
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isUploading, setIsUploading] = useState(false)
+  const [categoryImages, setCategoryImages] = useState<Array<{ id?: string; url: string; type?: string }>>([])
+
   useEffect(() => {
     if (category) {
       setName(category.name || "")
@@ -88,9 +93,142 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
       }
       setYoutubeUrls(urls)
       setActiveTab("general")
+
+      // Load category media from backend
+      loadCategoryImages(category.id, category.image_url || meta?.thumbnail || meta?.image)
     }
   }, [category, salesChannels])
 
+  // Load existing category media gallery
+  const loadCategoryImages = useCallback(async (catId: string, currentImageUrl?: string) => {
+    try {
+      const res = await sdk.client.fetch<{ category_images?: any[] }>(
+        `/admin/categories/${catId}/images`
+      )
+      if (res?.category_images && Array.isArray(res.category_images) && res.category_images.length > 0) {
+        setCategoryImages(res.category_images)
+        const thumb = res.category_images.find((img) => img.type === "thumbnail")
+        if (thumb?.url) {
+          setImageUrl(thumb.url)
+        }
+        return
+      }
+    } catch {
+      // Endpoint fallback
+    }
+
+    if (currentImageUrl) {
+      setCategoryImages([{ url: currentImageUrl, type: "thumbnail" }])
+    } else {
+      setCategoryImages([])
+    }
+  }, [])
+
+  // Universal S3/Storage Media Upload Handler (works with AWS S3, MinIO, Cloudflare R2, Local)
+  const handleFileUpload = async (files: FileList | null) => {
+    if (!files || files.length === 0) return
+    setIsUploading(true)
+    try {
+      const fileList = Array.from(files)
+      // Calls standard Medusa File Module API (delegates to configured S3 provider in medusa-config.js)
+      const res = await sdk.admin.upload.create({ files: fileList })
+      const uploadedFiles = res.files || []
+      if (uploadedFiles.length === 0) {
+        throw new Error("No files returned from upload service")
+      }
+
+      const firstUrl = uploadedFiles[0].url
+      if (!imageUrl) {
+        setImageUrl(firstUrl)
+      }
+
+      // If backend has custom category images endpoint, save them there too
+      try {
+        await sdk.client.fetch(`/admin/categories/${category.id}/images`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: {
+            images: uploadedFiles.map((f, i) => ({
+              url: f.url,
+              type: i === 0 && !imageUrl ? "thumbnail" : "image",
+            })),
+          },
+        })
+        await loadCategoryImages(category.id, firstUrl)
+      } catch {
+        // Fallback for standard stores: update local gallery state
+        setCategoryImages((prev) => [
+          ...prev,
+          ...uploadedFiles.map((f, i) => ({
+            url: f.url,
+            type: i === 0 && !imageUrl ? "thumbnail" : "image",
+          })),
+        ])
+      }
+
+      toast.success(`${uploadedFiles.length} image(s) uploaded successfully`)
+    } catch (err: any) {
+      toast.error(err?.message || "Failed to upload image")
+    } finally {
+      setIsUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ""
+    }
+  }
+
+  // Set selected image as Category Thumbnail
+  const handleSetThumbnail = async (img: { id?: string; url: string }) => {
+    setImageUrl(img.url)
+    if (img.id) {
+      try {
+        await sdk.client.fetch(`/admin/categories/${category.id}/images/batch`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: {
+            updates: [{ id: img.id, type: "thumbnail" }],
+          },
+        })
+        await loadCategoryImages(category.id, img.url)
+      } catch {
+        setCategoryImages((prev) =>
+          prev.map((item) => ({
+            ...item,
+            type: item.url === img.url ? "thumbnail" : "image",
+          }))
+        )
+      }
+    } else {
+      setCategoryImages((prev) =>
+        prev.map((item) => ({
+          ...item,
+          type: item.url === img.url ? "thumbnail" : "image",
+        }))
+      )
+    }
+    toast.success("Designated as category thumbnail")
+  }
+
+  // Delete category image
+  const handleDeleteImage = async (img: { id?: string; url: string }) => {
+    if (img.id) {
+      try {
+        await sdk.client.fetch(`/admin/categories/${category.id}/images/batch`, {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: {
+            ids: [img.id],
+          },
+        })
+      } catch {
+        // Fallback
+      }
+    }
+    setCategoryImages((prev) => prev.filter((i) => i.url !== img.url))
+    if (imageUrl === img.url) {
+      setImageUrl("")
+    }
+    toast.info("Image removed")
+  }
+
   if (!category) return null
 
   const toggleChannel = (channelId: string) => {
@@ -460,29 +598,140 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                   </div>
                 </div>
 
-                <div className="flex flex-col gap-1.5 pt-3 border-t border-ui-border-base">
-                  <Label htmlFor="edit-image" className="text-xs font-semibold">
-                    Category Thumbnail / Image URL
-                  </Label>
-                  <Input
-                    id="edit-image"
-                    size="small"
-                    value={imageUrl}
-                    onChange={(e) => setImageUrl(e.target.value)}
-                    placeholder="https://example.com/category-image.jpg"
+                {/* Category Media / Images Upload & Gallery */}
+                <div className="flex flex-col gap-3 pt-3 border-t border-ui-border-base">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Label className="text-xs font-semibold">Category Media</Label>
+                      <Text size="xsmall" className="text-ui-fg-muted">
+                        Upload category thumbnails and banners. Automatically handled by your configured S3 or storage provider.
+                      </Text>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => fileInputRef.current?.click()}
+                      disabled={isUploading}
+                      className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-ui-bg-base hover:bg-ui-bg-subtle text-ui-fg-base border border-ui-border-base rounded-lg shadow-2xs transition-colors cursor-pointer"
+                    >
+                      <ArrowDownTray className="w-3.5 h-3.5" />
+                      <span>{isUploading ? "Uploading…" : "Upload Media"}</span>
+                    </button>
+                  </div>
+
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
+                    onChange={(e) => handleFileUpload(e.target.files)}
+                    className="hidden"
                   />
-                  {imageUrl && (
-                    <div className="mt-2 w-24 h-24 rounded-xl overflow-hidden border border-ui-border-base bg-ui-bg-subtle shadow-xs">
-                      <img
-                        src={imageUrl}
-                        alt="Category Preview"
-                        className="w-full h-full object-cover"
-                        onError={(e) => {
-                          ;(e.target as any).style.display = "none"
-                        }}
-                      />
+
+                  {/* Drag and Drop Upload Zone */}
+                  <div
+                    onDragOver={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                    }}
+                    onDrop={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      if (!isUploading) handleFileUpload(e.dataTransfer.files)
+                    }}
+                    onClick={() => fileInputRef.current?.click()}
+                    className="border-2 border-dashed border-ui-border-strong hover:border-ui-border-interactive rounded-xl p-6 flex flex-col items-center justify-center gap-2 bg-ui-bg-subtle/30 hover:bg-ui-bg-subtle/60 transition-colors cursor-pointer text-center"
+                  >
+                    <div className="w-10 h-10 rounded-full bg-ui-bg-base border border-ui-border-base flex items-center justify-center text-ui-fg-subtle shadow-2xs">
+                      <ArrowDownTray className="w-5 h-5" />
+                    </div>
+                    <div className="flex flex-col gap-0.5">
+                      <span className="text-xs font-semibold text-ui-fg-base">
+                        {isUploading ? "Uploading to storage…" : "Click to upload or drag & drop images"}
+                      </span>
+                      <span className="text-[11px] text-ui-fg-muted">
+                        PNG, JPG, WEBP, GIF, SVG up to 10MB
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Uploaded Images Gallery */}
+                  {categoryImages.length > 0 && (
+                    <div className="flex flex-col gap-2 mt-2">
+                      <Label className="text-xs font-medium text-ui-fg-muted">
+                        Uploaded Images ({categoryImages.length})
+                      </Label>
+                      <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
+                        {categoryImages.map((img, idx) => {
+                          const isThumbnail = img.type === "thumbnail" || img.url === imageUrl
+                          return (
+                            <div
+                              key={img.id || idx}
+                              className={`group relative aspect-square rounded-xl overflow-hidden border bg-ui-bg-base transition-all shadow-xs ${
+                                isThumbnail
+                                  ? "ring-2 ring-blue-500 border-transparent"
+                                  : "border-ui-border-base hover:border-ui-border-strong"
+                              }`}
+                            >
+                              <img
+                                src={img.url}
+                                alt="Category Media"
+                                className="w-full h-full object-cover"
+                              />
+
+                              {isThumbnail && (
+                                <div className="absolute top-1.5 left-1.5 bg-blue-600 text-white text-[9px] font-bold px-1.5 py-0.5 rounded shadow-xs">
+                                  ★ Thumbnail
+                                </div>
+                              )}
+
+                              {/* Hover Action Overlay */}
+                              <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-1.5 p-1.5">
+                                {!isThumbnail && (
+                                  <button
+                                    type="button"
+                                    onClick={(e) => {
+                                      e.preventDefault()
+                                      e.stopPropagation()
+                                      handleSetThumbnail(img)
+                                    }}
+                                    className="px-2 py-0.5 bg-white text-neutral-900 rounded text-[10px] font-semibold hover:bg-neutral-100 transition-colors shadow-xs"
+                                  >
+                                    Set Thumbnail
+                                  </button>
+                                )}
+                                <button
+                                  type="button"
+                                  onClick={(e) => {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                    handleDeleteImage(img)
+                                  }}
+                                  className="p-1 bg-rose-600 text-white rounded hover:bg-rose-700 transition-colors"
+                                  title="Remove image"
+                                >
+                                  <Trash className="w-3.5 h-3.5" />
+                                </button>
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
                     </div>
                   )}
+
+                  {/* Manual URL input fallback */}
+                  <div className="flex flex-col gap-1 mt-1 pt-2 border-t border-ui-border-base/50">
+                    <Label htmlFor="edit-image" className="text-[11px] text-ui-fg-muted">
+                      Or paste an external image URL
+                    </Label>
+                    <Input
+                      id="edit-image"
+                      size="small"
+                      value={imageUrl}
+                      onChange={(e) => setImageUrl(e.target.value)}
+                      placeholder="https://example.com/category-image.jpg"
+                    />
+                  </div>
                 </div>
               </div>
             )}