@hectasquare/medusa-plugin-category-tree 1.0.6 → 1.0.8

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

@@ -6,6 +6,7 @@ export interface CanvasDockProps {
     onSelectStorefront: (val: string) => void;
     direction: "TB" | "LR";
     onToggleDirection: () => void;
+    onSelectDirection?: (val: "TB" | "LR") => void;
     searchQuery: string;
     onSearchChange: (q: string) => void;
     onExpandAll: () => void;

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

@@ -4,9 +4,13 @@ exports.CanvasDock = void 0;
 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, searchQuery, onSearchChange, onExpandAll, onCollapseAll, onFocusRoot, selectedCount = 0, onExpandSelected, onCollapseSelected, isBoxSelect = false, onToggleBoxSelect, 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.jsx)("button", { type: "button", title: direction === "TB" ? "Switch to Mind Map (Left-to-Right)" : "Switch to Vertical Tree (Top-to-Bottom)", onClick: onToggleDirection, className: "flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base transition-colors", children: (0, jsx_runtime_1.jsx)("span", { children: direction === "TB" ? "⬇ Vertical" : "➡ 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
+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"
+                                        ? "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"
+                                        ? "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
                                 ? "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.jsx)("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: "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" })] })] }))] }));
+                                : "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" })] })] }))] }));
 };
 exports.CanvasDock = CanvasDock;

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

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CategoryProductsManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const ui_1 = require("@medusajs/ui");
 const icons_1 = require("@medusajs/icons");
 const sdk_1 = require("../../lib/sdk");
@@ -26,6 +59,10 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
     const [catalogSelectedIds, setCatalogSelectedIds] = (0, react_1.useState)(new Set());
     const [isAdding, setIsAdding] = (0, react_1.useState)(false);
     const PAGE_SIZE = 50;
+    const orderedProductIdsRef = react_1.default.useRef(orderedProductIds);
+    (0, react_1.useEffect)(() => {
+        orderedProductIdsRef.current = orderedProductIds;
+    }, [orderedProductIds]);
     // Initialize ranking and top sellers from category metadata
     (0, react_1.useEffect)(() => {
         if (initialMetadata) {
@@ -45,8 +82,8 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
             const fetched = res.products || [];
             setTotalCount(res.count ?? fetched.length);
             // Sort products according to orderedProductIds if available
-            setProducts((prev) => {
-                const orderMap = new Map(orderedProductIds.map((id, index) => [id, index]));
+            setProducts(() => {
+                const orderMap = new Map((orderedProductIdsRef.current || []).map((id, index) => [id, index]));
                 return [...fetched].sort((a, b) => {
                     const indexA = orderMap.has(a.id) ? orderMap.get(a.id) : 9999;
                     const indexB = orderMap.has(b.id) ? orderMap.get(b.id) : 9999;
@@ -60,7 +97,7 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
         finally {
             setIsLoading(false);
         }
-    }, [categoryId, orderedProductIds]);
+    }, [categoryId]);
     (0, react_1.useEffect)(() => {
         loadAssignedProducts();
     }, [loadAssignedProducts]);
@@ -234,13 +271,29 @@ const CategoryProductsManager = ({ categoryId, categoryName, initialMetadata, on
                                                             next.add(p.id);
                                                         return next;
                                                     });
-                                                }, className: "rounded border-ui-border-base cursor-pointer" }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 font-mono", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-bold text-ui-fg-subtle px-1.5 py-0.5 rounded bg-ui-bg-subtle border border-ui-border-base", children: ["#", index + 1] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", title: "Move Up", disabled: index === 0, onClick: () => handleMoveProduct(index, "up"), className: "text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none", children: "\u25B2" }), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Move Down", disabled: index === displayedProducts.length - 1, onClick: () => handleMoveProduct(index, "down"), className: "text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none", children: "\u25BC" })] })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-md border border-ui-border-base overflow-hidden bg-ui-bg-subtle flex-shrink-0 flex items-center justify-center", children: p.thumbnail ? ((0, jsx_runtime_1.jsx)("img", { src: p.thumbnail, alt: p.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[9px] text-ui-fg-muted", children: "IMG" })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col min-w-0", children: (0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-ui-fg-base truncate leading-snug", title: p.title, children: p.title }) })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handleToggleTopSeller(p.id, p.title), className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border transition-all ${isTopSeller
+                                                }, className: "rounded border-ui-border-base cursor-pointer" }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 font-mono", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-bold text-ui-fg-subtle px-1.5 py-0.5 rounded bg-ui-bg-subtle border border-ui-border-base", children: ["#", index + 1] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", title: "Move Up", disabled: index === 0, onClick: (e) => {
+                                                                    e.preventDefault();
+                                                                    e.stopPropagation();
+                                                                    handleMoveProduct(index, "up");
+                                                                }, className: "text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none cursor-pointer", children: "\u25B2" }), (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Move Down", disabled: index === displayedProducts.length - 1, onClick: (e) => {
+                                                                    e.preventDefault();
+                                                                    e.stopPropagation();
+                                                                    handleMoveProduct(index, "down");
+                                                                }, className: "text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none cursor-pointer", children: "\u25BC" })] })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-md border border-ui-border-base overflow-hidden bg-ui-bg-subtle flex-shrink-0 flex items-center justify-center", children: p.thumbnail ? ((0, jsx_runtime_1.jsx)("img", { src: p.thumbnail, alt: p.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[9px] text-ui-fg-muted", children: "IMG" })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col min-w-0", children: (0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-ui-fg-base truncate leading-snug", title: p.title, children: p.title }) })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    handleToggleTopSeller(p.id, p.title);
+                                                }, className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border transition-all ${isTopSeller
                                                     ? "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-300 dark:border-amber-700 shadow-2xs"
                                                     : "bg-ui-bg-subtle text-ui-fg-muted border-ui-border-base hover:text-amber-600 hover:border-amber-300"}`, title: isTopSeller
                                                     ? "Click to remove from Top Commercial Sellers"
                                                     : "Click to mark as Top Commercial Seller (Reflected in Storefront 2)", children: [(0, jsx_runtime_1.jsx)("span", { children: isTopSeller ? "★" : "☆" }), (0, jsx_runtime_1.jsx)("span", { children: isTopSeller ? "Top Seller" : "Normal" })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3 text-ui-fg-muted", children: p.collection?.title || "-" }), (0, jsx_runtime_1.jsxs)("td", { className: "py-2.5 px-3 text-ui-fg-subtle", children: [p.variants?.length || 0, " variant(s)"] }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3", children: (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${p.status === "published"
                                                     ? "bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300"
-                                                    : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"}`, children: p.status }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3 text-right", children: (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Remove from category", onClick: () => handleRemoveProducts([p.id]), className: "p-1 text-ui-fg-muted hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 rounded transition-colors", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }) }) })] }, p.id));
+                                                    : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"}`, children: p.status }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-2.5 px-3 text-right", children: (0, jsx_runtime_1.jsx)("button", { type: "button", title: "Remove from category", onClick: (e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    handleRemoveProducts([p.id]);
+                                                }, className: "p-1 text-ui-fg-muted hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 rounded transition-colors", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }) }) })] }, p.id));
                             }) })] })) }), focusModalOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-50 flex flex-col bg-white dark:bg-neutral-950 animate-in fade-in-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-6 py-3 border-b border-ui-border-base bg-ui-bg-base flex-shrink-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setFocusModalOpen(false), className: "p-1.5 rounded-lg text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle transition-colors", title: "Close (ESC)", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-bold", children: "\u2715" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-mono font-medium text-ui-fg-muted px-1.5 py-0.5 rounded bg-ui-bg-subtle border border-ui-border-base", children: "ESC" }), (0, jsx_runtime_1.jsxs)("h2", { className: "text-sm font-semibold text-ui-fg-base", children: ["Add Products to Category: ", categoryName] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-64", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search products\u2026", value: searchQuery, onChange: (e) => {
                                                 setSearchQuery(e.target.value);
                                                 setCatalogPage(0);

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

@@ -265,12 +265,12 @@ const CanvasInner = () => {
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]", children: [(0, jsx_runtime_1.jsx)("div", { className: `absolute top-4 left-1/2 -translate-x-1/2 z-10 transition-all duration-200 pointer-events-none ${editDrawerOpen || createDrawerOpen
                     ? "opacity-0 -translate-y-6 scale-95 pointer-events-none"
-                    : "opacity-100"}`, children: (0, jsx_runtime_1.jsx)(canvas_dock_1.CanvasDock, { salesChannels: salesChannels, selectedStorefront: selectedStorefront, onSelectStorefront: setSelectedStorefront, direction: direction, onToggleDirection: () => setDirection((d) => (d === "TB" ? "LR" : "TB")), searchQuery: searchQuery, onSearchChange: setSearchQuery, onExpandAll: handleExpandAll, onCollapseAll: handleCollapseAll, onFocusRoot: handleFocusRoot, selectedCount: selectedNodeIds.length, onExpandSelected: handleExpandSelected, onCollapseSelected: handleCollapseSelected, isBoxSelect: isBoxSelect, onToggleBoxSelect: () => setIsBoxSelect((prev) => !prev), onZoomIn: () => zoomIn({ duration: 300 }), onZoomOut: () => zoomOut({ duration: 300 }), onFitView: () => fitView({ padding: 0.25, duration: 400 }), onOpenCreateRoot: () => {
+                    : "opacity-100"}`, children: (0, jsx_runtime_1.jsx)(canvas_dock_1.CanvasDock, { salesChannels: salesChannels, selectedStorefront: selectedStorefront, onSelectStorefront: setSelectedStorefront, direction: direction, onToggleDirection: () => setDirection((d) => (d === "TB" ? "LR" : "TB")), onSelectDirection: (dir) => setDirection(dir), searchQuery: searchQuery, onSearchChange: setSearchQuery, onExpandAll: handleExpandAll, onCollapseAll: handleCollapseAll, onFocusRoot: handleFocusRoot, selectedCount: selectedNodeIds.length, onExpandSelected: handleExpandSelected, onCollapseSelected: handleCollapseSelected, isBoxSelect: isBoxSelect, onToggleBoxSelect: () => setIsBoxSelect((prev) => !prev), onZoomIn: () => zoomIn({ duration: 300 }), onZoomOut: () => zoomOut({ duration: 300 }), onFitView: () => fitView({ padding: 0.25, duration: 400 }), onOpenCreateRoot: () => {
                         setCreateParentCategory(null);
                         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-white/90 dark:!bg-neutral-900/90 !backdrop-blur-md !border !border-ui-border-base !rounded-xl !shadow-md !overflow-hidden" }), (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: () => "var(--bg-interactive, #3b82f6)", maskColor: "rgba(0, 0, 0, 0.08)", className: "!bottom-4 !right-4 !bg-white/90 dark:!bg-neutral-900/90 !backdrop-blur-md !border !border-ui-border-base !rounded-xl !shadow-md !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 !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) => {
                     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/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.6",
+  "version": "1.0.8",
   "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

@@ -14,6 +14,7 @@ export interface CanvasDockProps {
 
   direction: "TB" | "LR"
   onToggleDirection: () => void
+  onSelectDirection?: (val: "TB" | "LR") => void
 
   searchQuery: string
   onSearchChange: (q: string) => void
@@ -47,6 +48,7 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
   onSelectStorefront,
   direction,
   onToggleDirection,
+  onSelectDirection,
   searchQuery,
   onSearchChange,
   onExpandAll,
@@ -57,6 +59,8 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
   onCollapseSelected,
   isBoxSelect = false,
   onToggleBoxSelect,
+  onZoomIn,
+  onZoomOut,
   onFitView,
   onOpenCreateRoot,
   dirtyCount,
@@ -86,14 +90,32 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
         </div>
 
         <div className="flex items-center border-r border-ui-border-base pr-2.5">
-          <button
-            type="button"
-            title={direction === "TB" ? "Switch to Mind Map (Left-to-Right)" : "Switch to Vertical Tree (Top-to-Bottom)"}
-            onClick={onToggleDirection}
-            className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base transition-colors"
-          >
-            <span>{direction === "TB" ? "⬇ Vertical" : "➡ Mind Map"}</span>
-          </button>
+          <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())}
+              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="Vertical Tree Layout (Default)"
+            >
+              ⬇ Vertical
+            </button>
+            <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="Mind Map Layout (Horizontal)"
+            >
+              ➡ Mind Map
+            </button>
+          </div>
         </div>
 
         <div className="relative w-36 sm:w-44">
@@ -178,6 +200,22 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
         )}
 
         <div className="flex items-center gap-1 border-l border-ui-border-base pl-2.5">
+          <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"
+          >
+            +
+          </button>
+          <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"
+          >
+            −
+          </button>
           <button
             type="button"
             title="Fit View (Center)"

package/src/admin/components/category-tree/category-products-manager.tsx

@@ -59,6 +59,11 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
 
   const PAGE_SIZE = 50
 
+  const orderedProductIdsRef = React.useRef<string[]>(orderedProductIds)
+  useEffect(() => {
+    orderedProductIdsRef.current = orderedProductIds
+  }, [orderedProductIds])
+
   // Initialize ranking and top sellers from category metadata
   useEffect(() => {
     if (initialMetadata) {
@@ -82,8 +87,8 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
       setTotalCount(res.count ?? fetched.length)
 
       // Sort products according to orderedProductIds if available
-      setProducts((prev) => {
-        const orderMap = new Map(orderedProductIds.map((id, index) => [id, index]))
+      setProducts(() => {
+        const orderMap = new Map((orderedProductIdsRef.current || []).map((id, index) => [id, index]))
         return [...fetched].sort((a, b) => {
           const indexA = orderMap.has(a.id) ? orderMap.get(a.id)! : 9999
           const indexB = orderMap.has(b.id) ? orderMap.get(b.id)! : 9999
@@ -95,7 +100,7 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
     } finally {
       setIsLoading(false)
     }
-  }, [categoryId, orderedProductIds])
+  }, [categoryId])
 
   useEffect(() => {
     loadAssignedProducts()
@@ -404,8 +409,12 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                             type="button"
                             title="Move Up"
                             disabled={index === 0}
-                            onClick={() => handleMoveProduct(index, "up")}
-                            className="text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              handleMoveProduct(index, "up")
+                            }}
+                            className="text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none cursor-pointer"
                           >
                             ▲
                           </button>
@@ -413,8 +422,12 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                             type="button"
                             title="Move Down"
                             disabled={index === displayedProducts.length - 1}
-                            onClick={() => handleMoveProduct(index, "down")}
-                            className="text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              handleMoveProduct(index, "down")
+                            }}
+                            className="text-[9px] text-ui-fg-muted hover:text-ui-fg-base disabled:opacity-20 px-0.5 leading-none cursor-pointer"
                           >
                             ▼
                           </button>
@@ -444,7 +457,11 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                     <td className="py-2.5 px-3">
                       <button
                         type="button"
-                        onClick={() => handleToggleTopSeller(p.id, p.title)}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          handleToggleTopSeller(p.id, p.title)
+                        }}
                         className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border transition-all ${
                           isTopSeller
                             ? "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-300 dark:border-amber-700 shadow-2xs"
@@ -485,7 +502,11 @@ export const CategoryProductsManager: React.FC<CategoryProductsManagerProps> = (
                       <button
                         type="button"
                         title="Remove from category"
-                        onClick={() => handleRemoveProducts([p.id])}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          handleRemoveProducts([p.id])
+                        }}
                         className="p-1 text-ui-fg-muted hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 rounded transition-colors"
                       >
                         <Trash className="w-3.5 h-3.5" />

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

@@ -357,6 +357,7 @@ const CanvasInner: React.FC = () => {
           onSelectStorefront={setSelectedStorefront}
           direction={direction}
           onToggleDirection={() => setDirection((d) => (d === "TB" ? "LR" : "TB"))}
+          onSelectDirection={(dir) => setDirection(dir)}
           searchQuery={searchQuery}
           onSearchChange={setSearchQuery}
           onExpandAll={handleExpandAll}
@@ -407,12 +408,12 @@ const CanvasInner: React.FC = () => {
         <Background color="#cbd5e1" gap={20} size={1.25} />
         <Controls
           showInteractive={false}
-          className="!bottom-4 !left-4 !bg-white/90 dark:!bg-neutral-900/90 !backdrop-blur-md !border !border-ui-border-base !rounded-xl !shadow-md !overflow-hidden"
+          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"
         />
         <MiniMap
           nodeColor={() => "var(--bg-interactive, #3b82f6)"}
-          maskColor="rgba(0, 0, 0, 0.08)"
-          className="!bottom-4 !right-4 !bg-white/90 dark:!bg-neutral-900/90 !backdrop-blur-md !border !border-ui-border-base !rounded-xl !shadow-md !overflow-hidden"
+          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
           pannable
         />

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>
             )}