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

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

@@ -263,12 +263,14 @@ const CanvasInner = () => {
         setCategories([...originalCategories]);
         ui_1.toast.info("Changes reset to previous saved state");
     };
-    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-30 pointer-events-none", 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: () => {
+    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")), 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/.medusa/server/src/admin/components/category-tree/edit-category-drawer.js

@@ -39,6 +39,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
     const [youtubeUrls, setYoutubeUrls] = (0, react_1.useState)([]);
     const [newYoutubeInput, setNewYoutubeInput] = (0, react_1.useState)("");
     const [currentMetadata, setCurrentMetadata] = (0, react_1.useState)({});
+    const [isFullScreen, setIsFullScreen] = (0, react_1.useState)(false);
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -160,7 +161,9 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
             setIsDeleting(false);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(ui_1.Drawer, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(ui_1.Drawer.Content, { className: "max-w-3xl w-full", children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(ui_1.Drawer.Header, { className: "border-b border-ui-border-base pb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-full", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Drawer.Title, { className: "text-base font-semibold text-ui-fg-base", children: category.name }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Description, { className: "text-xs text-ui-fg-muted mt-0.5", children: ["Tier ", category.tier, " \u2022 ID: ", category.id] })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => window.open(`/app/categories/${category.id}`, "_blank"), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors", title: "Open full category details page in a new tab", children: [(0, jsx_runtime_1.jsx)("span", { children: "Open Full Page" }), (0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightMicro, { className: "w-3.5 h-3.5" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 mt-3 border-b border-ui-border-base/50 -mb-3 pb-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("general"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "general"
+    return ((0, jsx_runtime_1.jsx)(ui_1.Drawer, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(ui_1.Drawer.Content, { className: `transition-all duration-300 w-full z-50 ${isFullScreen
+                ? "!max-w-full !w-screen !h-screen !inset-0 !rounded-none"
+                : "max-w-5xl xl:max-w-6xl w-[92vw]"}`, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(ui_1.Drawer.Header, { className: "border-b border-ui-border-base pb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between w-full", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Drawer.Title, { className: "text-base font-semibold text-ui-fg-base", children: category.name }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Description, { className: "text-xs text-ui-fg-muted mt-0.5", children: ["Tier ", category.tier, " \u2022 ID: ", category.id] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setIsFullScreen((prev) => !prev), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors", title: isFullScreen ? "Exit Fullscreen" : "Expand to Full Page Modal", children: [(0, jsx_runtime_1.jsx)(icons_1.ArrowsPointingOut, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: isFullScreen ? "Exit Fullscreen" : "Full Page" })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => window.open(`/app/categories/${category.id}`, "_blank"), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors", title: "Open full category details page in a new tab", children: [(0, jsx_runtime_1.jsx)("span", { children: "Open Full Page" }), (0, jsx_runtime_1.jsx)(icons_1.ArrowUpRightMicro, { className: "w-3.5 h-3.5" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 mt-3 border-b border-ui-border-base/50 -mb-3 pb-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("general"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "general"
                                             ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"
                                             : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "General & Ranking" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("products"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "products"
                                             ? "border-ui-border-interactive text-ui-fg-base bg-ui-bg-subtle/50"

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2026 HectaSquare Team
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,13 +1,14 @@
 # @hectasquare/medusa-plugin-category-tree
 
-An enterprise-grade, **AAA interactive Category Tree & Mind Map** plugin for **Medusa v2 Admin**.
+An enterprise-grade, **AAA interactive Category Tree, Mind Map & Category Detail Hub** plugin for **Medusa v2 Admin**.
 
 [![npm version](https://img.shields.io/npm/v/@hectasquare/medusa-plugin-category-tree.svg)](https://www.npmjs.com/package/@hectasquare/medusa-plugin-category-tree)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![GitHub Repository](https://img.shields.io/badge/GitHub-Repository-181717.svg?logo=github)](https://github.com/HectaSquareUK/medusa-plugin-category-tree)
+[![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 [![Medusa v2 Ready](https://img.shields.io/badge/Medusa-v2.x-green.svg)](https://medusajs.com)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)
 
-Inspired by modern visual tools like **Figma, Miro, Linear, and NotebookLM**, this plugin transforms Medusa's standard nested category list into a fluid, 60fps pan/zoom node-canvas with orthogonal step branches, left-edge tier level indicators, sibling superscript rankings, and multi-storefront filtering.
+Inspired by modern visual and canvas tools like **Figma, Miro, Linear, and NotebookLM**, this plugin transforms Medusa's standard nested category list into a fluid, 60fps pan/zoom node canvas with branch-specific harmonic color coding, left-edge tier level indicators, sibling superscript rankings, and an all-in-one **Category Detail Hub** with product ranking and commercial top seller management.
 
 ---
 
@@ -15,13 +16,16 @@ Inspired by modern visual tools like **Figma, Miro, Linear, and NotebookLM**, th
 
 In high-volume e-commerce stores with hundreds or thousands of categories across multiple sales channels and brands:
 - Standard nested tables and indent lists quickly become unwieldy, difficult to scan, and prone to navigation fatigue.
-- Re-parenting or reordering categories through repeated modal dropdowns is slow, error-prone, and provides no immediate visual feedback of the resulting hierarchy.
-- Managing multi-storefront category visibility (e.g., Brand A vs. Brand B) requires opening each category individually.
+- Re-parenting or reordering categories through repeated modal dropdowns is slow, error-prone, and provides no immediate visual feedback.
+- Managing products, rankings, and commercial visibility required constantly hopping back and forth between administrative screens.
 
 **With this plugin:**
 - **Zero backend contamination:** Lives entirely inside an external npm plugin (`@hectasquare/medusa-plugin-category-tree`). Your backend core remains pristine.
-- **Bird’s-eye hierarchy visualization:** Instant visual comprehension of your entire category taxonomy with orthogonal connections (`smoothstep`).
+- **Bird’s-eye hierarchy visualization:** Instant visual comprehension of your entire category taxonomy with orthogonal connections (`smoothstep`) and branch-specific harmonic colors.
+- **Hierarchical Centered Layout:** Clean Buchheim/Walker-style tree geometry centering parents directly over children without cross-canvas wire tangle.
 - **Interactive drag-and-drop reparenting:** Connect and restructure categories directly on the canvas with real-time topological cycle protection.
+- **Category Detail Hub:** Complete 4-tab slide-over hub replacing the need to visit legacy pages—edit metadata, manage products, rank items, and configure storefronts in one place.
+- **Product Ranking & Top Commercial Sellers:** Reorder sibling products directly with interactive controls and star items with `⭐ Top Seller` status reflected in storefronts.
 - **Multi-storefront filtering:** Seamlessly filter the entire tree by Sales Channel (`All Storefronts`, `Monfil`, `Superpunch`, etc.).
 - **Atomic batch updates:** Stage moves visually on canvas and commit them in a single transactional request with automatic rollback.
 
@@ -29,42 +33,64 @@ In high-volume e-commerce stores with hundreds or thousands of categories across
 
 ## 🚀 Key Features
 
+### 🗂️ All-in-One Category Detail Hub
+Clicking the edit pencil icon on any node opens a wide slide-over hub featuring 4 dedicated workspaces:
+1. **General & Ranking:**
+   - Title, Handle, Description, and Active / Internal toggles.
+   - Sibling category rank ordering (`↑ Earlier`, `↓ Later`, `Top (#0)`).
+   - Direct `↗ Open Full Page` link opening `/app/categories/:id` in a separate tab when desired.
+2. **Products Management:**
+   - Full product listing with thumbnail, title, collection, variant count, and status badges.
+   - **Sibling Product Ranking:** Dynamic rank numbering (`#1`, `#2`, `#3`...) with interactive `▲` Move Up and `▼` Move Down buttons.
+   - **⭐ Top Commercial Seller:** One-click toggle marking priority commercial showcase products.
+   - **Remove Products:** Individual removal or multi-select bulk remove.
+   - **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.
+4. **YouTube Videos:**
+   - Multi-video demonstration manager with real-time thumbnail preview cards and quick remove actions.
+
+---
+
+### 🎨 Branch-Specific Harmonic Color Coding
+- Every major branch receives a distinct harmonic color (Emerald, Indigo, Amber, Rose, Cyan, Violet, Pink, Lime, Sky, Orange) assigned deterministically from its top-level root ancestor.
+- Vertical left-edge tier indicator bars and connecting orthogonal edge lines inherit the branch color, making complex multi-level trees effortless to scan visually.
+
+---
+
 ### 🌳 Dual-Mode Visual Layout Engine
-- **Vertical Tree (Top-to-Bottom):** Classic organizational hierarchy diagram ideal for deep category drill-downs.
-- **Horizontal Mind Map (Left-to-Right):** Lateral branching layout (Linear/Miro style) perfect for wide multi-root catalogs.
-- Powered by `@dagrejs/dagre` auto-layout with sub-millisecond recalculation.
+- **Vertical Tree (Top-to-Bottom):** Clustered hierarchical layout centering parents cleanly over children.
+- **Horizontal Mind Map (Left-to-Right):** Lateral branching layout (Linear/Miro style) ideal for wide root catalogs.
+- Recalculates dynamically with sub-millisecond responsiveness.
+
+---
 
-### 🏷️ Left-Edge Tier Level Indicators
-Immediate visual tier identification at every depth:
-- **Tier 1 (Root):** `|` Single vertical black bar (`#111827`).
-- **Tier 2 (Sub):** `||` Dual vertical bars with high-contrast 2px spacing.
-- **Tier 3 (Sub-Sub):** `|||` Triple vertical bars.
-- **Tier N:** Dynamically generated proportional bars.
+### ⛶ Box / Marquee Multi-Selection
+- Click and drag anywhere on the canvas to marquee-select multiple nodes at once (`⛶ Box Select`).
+- Move entire subtrees or selected clusters in unison.
 
-### ¹ Sibling Superscript Ordering
-- Subcategories display dynamic superscript numbering (`¹`, `²`, `³`, `⁴`, `ⁿ`) representing their exact display rank among siblings within their parent group.
+---
+
+### 🏷️ Left-Edge Tier Level Indicators & Superscript Ranks
+- **Tier 1 (Root):** Single vertical bar in branch accent.
+- **Tier 2 (Sub):** Dual vertical bars with high-contrast spacing.
+- **Tier 3 (Sub-Sub):** Triple vertical bars.
+- **Sibling Superscripts:** Numbers (`¹`, `²`, `³`, `⁴`, `ⁿ`) representing the category's display rank among siblings.
+
+---
 
 ### 📂 NotebookLM-Style Subtree Collapse
-- Expand and collapse entire category subtrees with a single click.
-- Collapsed parent nodes display a modern pill badge indicating hidden child count (e.g. `[ ▸ 4 sub ]`).
-- Global "Expand All" and "Collapse All" canvas dock controls.
+- Expand or collapse individual subtrees with a single click.
+- Collapsed nodes show an indicator badge (e.g., `[ ▸ 4 sub ]`).
+- Quick actions in the floating dock to expand or collapse all nodes or selective subtrees.
 
-### 🏪 Multi-Storefront & Sales Channel Filtering
-- In multi-brand setups, categories can be tagged with specific sales channels via `category.metadata.sales_channels`.
-- Filter canvas nodes dynamically between **"All Storefronts"** and dedicated brand channels with instant visual focus and dimmed state handling.
+---
 
 ### 🛡️ Topological Cycle Protection
 - Real-time client-side and server-side cycle detection.
 - Completely prevents accidental self-parenting (`A -> A`) or cyclic loops (`A -> B -> C -> A`).
 
-### 💾 Atomic Batch Reordering & Workflows SDK
-- Move categories freely on canvas; changes are buffered in local state and flagged with a floating **"Save Hierarchy"** pill.
-- Submits an atomic batch update via a dedicated Medusa Workflows SDK step (`reorderCategoriesWorkflow`) with rollback safety.
-
-### 🎛️ Integrated Slide-Over Drawers
-- **Create Subcategory Drawer:** Add children to any node directly from the canvas hover toolbar with automatic parent pre-selection.
-- **Edit Category Drawer:** Modify title, handle, description, thumbnail/image URL, active state, and storefront assignments without navigating away.
-
 ---
 
 ## 📦 Installation
@@ -96,106 +122,62 @@ module.exports = defineConfig({
 })
 ```
 
-That's it! When you build or start your Medusa backend (`npx medusa develop` or `pnpm dev`), the plugin automatically injects:
-1. **Admin UI Page & Sidebar Item:** Registered under the `/app/category-tree` route with a folder icon.
-2. **Admin API Endpoints:** Authenticated routes for category hierarchy resolution, atomic reordering, and category creation.
-
----
-
-## 🖥️ How It Works in Admin
-
-1. Open your Medusa Admin dashboard.
-2. Click **Category Tree** in the main sidebar.
-3. Use the floating **Canvas Dock** to:
-   - Switch between **Vertical Tree (TB)** and **Mind Map (LR)** modes.
-   - Filter by **Storefront / Sales Channel**.
-   - Search categories by name or handle with auto-pan and zoom.
-   - Expand or collapse subtrees to declutter large catalogs.
-4. Drag connecting edges between category handles to re-parent nodes.
-5. Click **"Save Hierarchy"** in the top dock to commit changes atomically.
+When you start your Medusa backend (`npx medusa develop` or `pnpm dev`), the plugin automatically injects:
+1. **Admin UI Page & Sidebar Item:** Registered under `/app/category-tree` with a folder tree icon.
+2. **Backend API Endpoints:** Under `/admin/category-tree` supporting atomic reorders, rank shifts, and category creations.
 
 ---
 
-## 📡 API Reference
-
-All endpoints are authenticated with Medusa Admin session / bearer tokens.
-
-### `GET /admin/category-tree`
-Fetches all product categories enriched with tier calculations, sibling ranks, resolved media thumbnails, and available sales channels.
-
-**Response:**
-```json
-{
-  "categories": [
-    {
-      "id": "pcat_01...",
-      "name": "Embroidery Threads",
-      "handle": "embroidery-threads",
-      "parent_category_id": null,
-      "rank": 0,
-      "is_active": true,
-      "image_url": "https://...",
-      "sales_channels": ["sc_01...", "sc_02..."]
-    }
-  ],
-  "sales_channels": [
-    { "id": "sc_01...", "name": "Monfil" },
-    { "id": "sc_02...", "name": "Superpunch" }
-  ],
-  "count": 1
-}
-```
-
-### `POST /admin/category-tree/reorder`
-Atomically applies batch move and reparenting operations.
-
-**Request Body:**
-```json
-{
-  "moves": [
-    {
-      "id": "pcat_01...",
-      "parent_category_id": "pcat_root_02...",
-      "rank": 1
-    }
-  ]
+## 🛒 Storefront Integration (Product Ranking & Top Sellers)
+
+The plugin persists category-scoped ranking and top seller configuration into `category.metadata`:
+- `category.metadata.ordered_product_ids: string[]`
+- `category.metadata.product_ranks: Record<string, number>`
+- `category.metadata.top_sellers: string[]`
+
+### Storefront 2 Priority Showcase Example
+In your storefront API or data layer (e.g. Next.js App Router):
+
+```typescript
+// Inspect category metadata for top commercial sellers
+const topSellerIds = category.metadata?.top_sellers || []
+
+if (topSellerIds.length > 0) {
+  // Fetch top seller products and place them first in designated order
+  const { products: topProducts } = await getProductsList({
+    queryParams: { id: topSellerIds },
+  })
+  topProducts.sort((a, b) => topSellerIds.indexOf(a.id) - topSellerIds.indexOf(b.id))
+  
+  // Fill remaining slots from the general category pool without duplicates
+  return [...topProducts, ...otherCategoryProducts]
 }
 ```
 
-### `POST /admin/category-tree/create`
-Creates a new product category directly with storefront assignment metadata and optional image URL.
-
 ---
 
-## 🏗️ Architecture & Extension Points
+## 🏗️ Architecture & Project Structure
 
-```
+```text
 medusa-plugin-category-tree/
-├── admin/                         # Root Admin module entry points (CommonJS & ESM)
-│   ├── index.js
-│   └── index.mjs
 ├── src/
-│   ├── index.ts                   # Plugin root exports (Workflows)
 │   ├── admin/
-│   │   ├── index.tsx              # Medusa v2 Admin SDK registration (routeModule & menuItemModule)
-│   │   ├── routes/category-tree/  # File-based admin route (/app/category-tree)
-│   │   ├── components/category-tree/
-│   │   │   ├── category-tree-canvas.tsx   # React Flow interactive canvas
-│   │   │   ├── category-node.tsx          # Custom node with tier bars & ranks
-│   │   │   ├── custom-edge.tsx            # Smoothstep orthogonal edge
-│   │   │   ├── canvas-dock.tsx            # Floating glassmorphic control dock
-│   │   │   ├── tier-bars.tsx              # Tier depth visual bars
-│   │   │   ├── create-category-drawer.tsx # Slide-over subcategory creator
-│   │   │   ├── edit-category-drawer.tsx   # Slide-over metadata editor
-│   │   │   └── lib/
-│   │   │       ├── layout-engine.ts       # Dagre LR / TB layout generator
-│   │   │       └── tree-state.ts          # Pure tree algorithms & cycle checks
-│   │   └── lib/sdk.ts             # Universal Medusa JS SDK client
-│   ├── api/
-│   │   ├── middlewares.ts         # Zod body validation middleware
-│   │   └── admin/category-tree/   # API route handlers
-│   └── workflows/
-│       └── reorder-categories.ts  # Medusa Workflows SDK atomic reorder step
+│   │   ├── index.tsx                         # Medusa Admin SDK registration
+│   │   ├── routes/category-tree/             # Route /app/category-tree
+│   │   └── components/category-tree/
+│   │       ├── category-tree-canvas.tsx      # Interactive canvas & marquee selection
+│   │       ├── category-node.tsx             # Node card with tier bars & ranks
+│   │       ├── custom-edge.tsx               # Orthogonal edge matching branch color
+│   │       ├── canvas-dock.tsx               # Floating glassmorphic dock
+│   │       ├── tier-bars.tsx                 # Branch-colored tier bars
+│   │       ├── edit-category-drawer.tsx      # 4-tab Category Detail Hub
+│   │       ├── category-products-manager.tsx # Products table, ranking & FocusModal
+│   │       ├── create-category-drawer.tsx    # Slide-over subcategory creator
+│   │       └── lib/
+│   │           ├── layout-engine.ts          # Buchheim/Walker centered tree engine
+│   │           └── tree-state.ts             # Palette, tiers, ranks, & cycle checks
+│   ├── api/admin/category-tree/              # Server route handlers
+│   └── workflows/                            # Atomic reorder workflows
 ├── package.json
 ├── tsconfig.json
 └── README.md
@@ -226,4 +208,4 @@ Contributions, issues, and feature requests are welcome! Feel free to open an is
 
 ## 📄 License
 
-MIT © [HectaSquare Team](https://github.com/HectaSquareUK)
+Apache License 2.0 © [HectaSquare Team](https://github.com/HectaSquareUK)

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@hectasquare/medusa-plugin-category-tree",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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": "MIT",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HectaSquareUK/medusa-plugin-category-tree.git"
+  },
+  "bugs": {
+    "url": "https://github.com/HectaSquareUK/medusa-plugin-category-tree/issues"
+  },
+  "homepage": "https://github.com/HectaSquareUK/medusa-plugin-category-tree#readme",
   "keywords": [
     "medusa",
     "medusa-v2",
@@ -43,7 +51,8 @@
     ".medusa/server",
     "src",
     "admin",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "build": "tsc"

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

@@ -343,14 +343,21 @@ const CanvasInner: React.FC = () => {
   }
 
   return (
-    <div className="relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]">
-      <div className="absolute top-4 left-1/2 -translate-x-1/2 z-30 pointer-events-none">
+      <div className="relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]">
+      <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"
+        }`}
+      >
         <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}
@@ -401,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

@@ -9,7 +9,7 @@ import {
   Textarea,
   toast,
 } from "@medusajs/ui"
-import { Trash, Plus, ArrowUpRightMicro } from "@medusajs/icons"
+import { Trash, Plus, ArrowUpRightMicro, ArrowsPointingOut } from "@medusajs/icons"
 import { CategoryTreeNode, SalesChannelInfo } from "./types"
 import { CategoryProductsManager } from "./category-products-manager"
 import { sdk } from "../../lib/sdk"
@@ -62,6 +62,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
   const [newYoutubeInput, setNewYoutubeInput] = useState("")
 
   const [currentMetadata, setCurrentMetadata] = useState<Record<string, any>>({})
+  const [isFullScreen, setIsFullScreen] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
 
@@ -194,7 +195,13 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
 
   return (
     <Drawer open={open} onOpenChange={onOpenChange}>
-      <Drawer.Content className="max-w-3xl w-full">
+      <Drawer.Content
+        className={`transition-all duration-300 w-full z-50 ${
+          isFullScreen
+            ? "!max-w-full !w-screen !h-screen !inset-0 !rounded-none"
+            : "max-w-5xl xl:max-w-6xl w-[92vw]"
+        }`}
+      >
         <form onSubmit={handleSubmit} className="flex flex-col h-full">
           <Drawer.Header className="border-b border-ui-border-base pb-3">
             <div className="flex items-center justify-between w-full">
@@ -207,16 +214,29 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
                 </Drawer.Description>
               </div>
 
-              {/* Direct Open Legacy Page Link */}
-              <button
-                type="button"
-                onClick={() => window.open(`/app/categories/${category.id}`, "_blank")}
-                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors"
-                title="Open full category details page in a new tab"
-              >
-                <span>Open Full Page</span>
-                <ArrowUpRightMicro className="w-3.5 h-3.5" />
-              </button>
+              <div className="flex items-center gap-2">
+                {/* Full Screen / Wide Mode Toggle */}
+                <button
+                  type="button"
+                  onClick={() => setIsFullScreen((prev) => !prev)}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors"
+                  title={isFullScreen ? "Exit Fullscreen" : "Expand to Full Page Modal"}
+                >
+                  <ArrowsPointingOut className="w-3.5 h-3.5" />
+                  <span>{isFullScreen ? "Exit Fullscreen" : "Full Page"}</span>
+                </button>
+
+                {/* Direct Open Legacy Page Link */}
+                <button
+                  type="button"
+                  onClick={() => window.open(`/app/categories/${category.id}`, "_blank")}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base rounded-lg border border-ui-border-base bg-ui-bg-subtle hover:bg-ui-bg-base shadow-2xs transition-colors"
+                  title="Open full category details page in a new tab"
+                >
+                  <span>Open Full Page</span>
+                  <ArrowUpRightMicro className="w-3.5 h-3.5" />
+                </button>
+              </div>
             </div>
 
             {/* Tab Navigation Bar */}