@hectasquare/medusa-plugin-category-tree 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { SalesChannelInfo } from "./types";
+export interface CanvasDockProps {
+    salesChannels: SalesChannelInfo[];
+    selectedStorefront: string;
+    onSelectStorefront: (val: string) => void;
+    direction: "TB" | "LR";
+    onToggleDirection: () => void;
+    searchQuery: string;
+    onSearchChange: (q: string) => void;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+    onFocusRoot: () => void;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onFitView: () => void;
+    onOpenCreateRoot: () => void;
+    dirtyCount: number;
+    isSaving: boolean;
+    onSave: () => void;
+    onReset: () => void;
+}
+export declare const CanvasDock: React.FC<CanvasDockProps>;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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, 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)(ui_1.Tooltip, { content: direction === "TB" ? "Switch to Mind Map (Left-to-Right)" : "Switch to Vertical Tree (Top-to-Bottom)", children: (0, jsx_runtime_1.jsx)("button", { type: "button", 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-40 sm:w-48", 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: [(0, jsx_runtime_1.jsx)(ui_1.Tooltip, { content: "Expand All Categories", children: (0, jsx_runtime_1.jsx)("button", { type: "button", 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" }) }), (0, jsx_runtime_1.jsx)(ui_1.Tooltip, { content: "Collapse All Subcategories", children: (0, jsx_runtime_1.jsx)("button", { type: "button", 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" }) }), (0, jsx_runtime_1.jsx)(ui_1.Tooltip, { content: "Focus on Root Categories", children: (0, jsx_runtime_1.jsx)("button", { type: "button", 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" }) })] }), (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)(ui_1.Tooltip, { content: "Fit View (Center)", children: (0, jsx_runtime_1.jsx)("button", { type: "button", 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-node.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CategoryNodeData } from "./types";
+interface CategoryNodeProps {
+    id: string;
+    data: CategoryNodeData;
+    selected?: boolean;
+}
+export declare const CategoryNode: React.MemoExoticComponent<({ id, data, selected }: CategoryNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoryNode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@xyflow/react");
+const ui_1 = require("@medusajs/ui");
+const icons_1 = require("@medusajs/icons");
+const tier_bars_1 = require("./tier-bars");
+exports.CategoryNode = (0, react_1.memo)(({ id, data, selected }) => {
+    const { category, tier, superscriptRank, salesChannels, isCollapsed, hiddenDescendantCount, direction, isDimmed, onToggleCollapse, onAddChild, onEdit, onDetach, } = data;
+    const isTB = direction === "TB";
+    const hasChildren = category.has_children || category.children_count > 0;
+    const assignedStorefrontNames = (category.sales_channels || []).map((scId) => {
+        const sc = salesChannels.find((s) => s.id === scId);
+        return sc?.name || scId;
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `group relative flex items-stretch w-[270px] h-[86px] rounded-xl border bg-ui-bg-base transition-all duration-150 select-none ${selected
+            ? "ring-2 ring-ui-border-interactive border-transparent shadow-lg"
+            : "border-ui-border-base shadow-sm hover:shadow-md hover:border-ui-border-strong"} ${isDimmed ? "opacity-35 grayscale" : "opacity-100"}`, children: [(0, jsx_runtime_1.jsx)(react_2.Handle, { type: "target", position: isTB ? react_2.Position.Top : react_2.Position.Left, className: "!w-2.5 !h-2.5 !bg-ui-border-interactive !border-2 !border-white dark:!border-neutral-900 transition-transform group-hover:scale-125" }), (0, jsx_runtime_1.jsx)(tier_bars_1.TierBars, { tier: tier }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center gap-2.5 px-2.5 py-2 min-w-0 overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-11 h-11 rounded-lg overflow-hidden flex-shrink-0 border border-ui-border-base bg-ui-bg-subtle flex items-center justify-center shadow-2xs", children: [category.image_url ? ((0, jsx_runtime_1.jsx)("img", { src: category.image_url, alt: category.name, className: "w-full h-full object-cover", loading: "lazy" })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-full flex items-center justify-center bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-900 text-ui-fg-muted", children: (0, jsx_runtime_1.jsx)(icons_1.Folder, { className: "w-5 h-5 opacity-70" }) })), (0, jsx_runtime_1.jsx)("span", { className: `absolute bottom-0.5 right-0.5 w-2 h-2 rounded-full border border-white dark:border-neutral-900 ${category.is_active ? "bg-emerald-500" : "bg-neutral-400"}`, title: category.is_active ? "Active" : "Inactive" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col min-w-0 flex-1 justify-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-ui-fg-base truncate leading-snug", title: category.name, children: category.name }), superscriptRank && ((0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-bold font-mono text-ui-fg-subtle px-1 py-0.5 rounded bg-ui-bg-subtle/80 flex-shrink-0", title: `Rank #${data.siblingRank} among siblings`, children: superscriptRank }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-ui-fg-muted truncate leading-tight mt-0.5", children: ["/", category.handle] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 mt-1 flex-wrap", children: [assignedStorefrontNames.slice(0, 2).map((name) => {
+                                        const isSuperpunch = name.toLowerCase().includes("superpunch");
+                                        const isMonfil = name.toLowerCase().includes("monfil");
+                                        const badgeText = isSuperpunch ? "SP" : isMonfil ? "M" : name.slice(0, 2).toUpperCase();
+                                        return ((0, jsx_runtime_1.jsx)("span", { className: "px-1 py-[1px] text-[9px] font-semibold rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 border border-neutral-200/60 dark:border-neutral-700/60", title: `Storefront: ${name}`, children: badgeText }, name));
+                                    }), hasChildren && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onToggleCollapse(id);
+                                        }, className: `ml-auto px-1.5 py-0.5 rounded text-[10px] font-medium flex items-center gap-0.5 transition-colors ${isCollapsed
+                                            ? "bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800"
+                                            : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300"}`, title: isCollapsed ? "Click to expand subcategories" : "Click to collapse subcategories", children: [(0, jsx_runtime_1.jsx)("span", { children: isCollapsed ? "▸" : "▾" }), (0, jsx_runtime_1.jsx)("span", { children: isCollapsed ? `+${hiddenDescendantCount || category.children_count}` : category.children_count || "sub" })] }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute -top-3 right-2 hidden group-hover:flex items-center gap-1 px-1.5 py-0.5 bg-ui-bg-base/95 backdrop-blur-sm border border-ui-border-base rounded-full shadow-md z-20", children: [(0, jsx_runtime_1.jsx)(ui_1.Tooltip, { content: "Add Subcategory", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                e.stopPropagation();
+                                onAddChild(category);
+                            }, className: "p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-full transition-colors", children: (0, jsx_runtime_1.jsx)(icons_1.Plus, { className: "w-3.5 h-3.5" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.Tooltip, { content: "Edit Category", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                e.stopPropagation();
+                                onEdit(category);
+                            }, className: "p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-full transition-colors", children: (0, jsx_runtime_1.jsx)(icons_1.PencilSquare, { className: "w-3.5 h-3.5" }) }) }), category.parent_category_id && ((0, jsx_runtime_1.jsx)(ui_1.Tooltip, { content: "Promote to Root (Detach)", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                                e.stopPropagation();
+                                onDetach(id);
+                            }, className: "p-1 text-ui-fg-subtle hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-950/50 rounded-full transition-colors", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowUturnLeft, { className: "w-3.5 h-3.5" }) }) }))] }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: isTB ? react_2.Position.Bottom : react_2.Position.Right, className: "!w-2.5 !h-2.5 !bg-ui-border-interactive !border-2 !border-white dark:!border-neutral-900 transition-transform group-hover:scale-125" })] }));
+});
+exports.CategoryNode.displayName = "CategoryNode";

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

@@ -0,0 +1,3 @@
+import React from "react";
+import "@xyflow/react/dist/style.css";
+export declare const CategoryTreeCanvas: React.FC;

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

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoryTreeCanvas = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@xyflow/react");
+require("@xyflow/react/dist/style.css");
+const ui_1 = require("@medusajs/ui");
+const category_node_1 = require("./category-node");
+const custom_edge_1 = require("./custom-edge");
+const canvas_dock_1 = require("./canvas-dock");
+const create_category_drawer_1 = require("./create-category-drawer");
+const edit_category_drawer_1 = require("./edit-category-drawer");
+const tree_state_1 = require("./lib/tree-state");
+const layout_engine_1 = require("./lib/layout-engine");
+const sdk_1 = require("../../lib/sdk");
+const nodeTypes = {
+    categoryNode: category_node_1.CategoryNode,
+};
+const edgeTypes = {
+    smoothstep: custom_edge_1.CustomSmoothStepEdge,
+};
+const CanvasInner = () => {
+    const { fitView, zoomIn, zoomOut } = (0, react_2.useReactFlow)();
+    const [originalCategories, setOriginalCategories] = (0, react_1.useState)([]);
+    const [categories, setCategories] = (0, react_1.useState)([]);
+    const [salesChannels, setSalesChannels] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isSaving, setIsSaving] = (0, react_1.useState)(false);
+    const [direction, setDirection] = (0, react_1.useState)("TB");
+    const [selectedStorefront, setSelectedStorefront] = (0, react_1.useState)("all");
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
+    const [collapsedIds, setCollapsedIds] = (0, react_1.useState)(new Set());
+    const [createDrawerOpen, setCreateDrawerOpen] = (0, react_1.useState)(false);
+    const [createParentCategory, setCreateParentCategory] = (0, react_1.useState)(null);
+    const [editDrawerOpen, setEditDrawerOpen] = (0, react_1.useState)(false);
+    const [editingCategory, setEditingCategory] = (0, react_1.useState)(null);
+    const [nodes, setNodes, onNodesChange] = (0, react_2.useNodesState)([]);
+    const [edges, setEdges, onEdgesChange] = (0, react_2.useEdgesState)([]);
+    const loadCategories = (0, react_1.useCallback)(async () => {
+        setIsLoading(true);
+        try {
+            const res = await sdk_1.sdk.client.fetch("/admin/category-tree");
+            setOriginalCategories(res.categories || []);
+            setCategories(res.categories || []);
+            setSalesChannels(res.sales_channels || []);
+        }
+        catch (err) {
+            ui_1.toast.error(err?.message || "Failed to load category tree");
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        loadCategories();
+    }, [loadCategories]);
+    const { childrenMap, enrichedCategories } = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        for (const c of categories) {
+            if (c.parent_category_id) {
+                const list = map.get(c.parent_category_id) || [];
+                list.push(c.id);
+                map.set(c.parent_category_id, list);
+            }
+        }
+        const tiers = (0, tree_state_1.computeTiers)(categories);
+        const siblingRanks = (0, tree_state_1.computeSiblingRanks)(categories);
+        const enriched = categories.map((cat) => {
+            const kids = map.get(cat.id) || [];
+            const rankInfo = siblingRanks.get(cat.id);
+            return {
+                ...cat,
+                tier: tiers.get(cat.id) || 1,
+                sibling_rank: rankInfo?.rankNum || 1,
+                children_count: kids.length,
+                has_children: kids.length > 0,
+            };
+        });
+        return { childrenMap: map, enrichedCategories: enriched };
+    }, [categories]);
+    const handleToggleCollapse = (0, react_1.useCallback)((id) => {
+        setCollapsedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const handleAddChild = (0, react_1.useCallback)((parent) => {
+        setCreateParentCategory(parent);
+        setCreateDrawerOpen(true);
+    }, []);
+    const handleEdit = (0, react_1.useCallback)((category) => {
+        setEditingCategory(category);
+        setEditDrawerOpen(true);
+    }, []);
+    const handleDetach = (0, react_1.useCallback)((id) => {
+        setCategories((prev) => prev.map((c) => (c.id === id ? { ...c, parent_category_id: null } : c)));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (enrichedCategories.length === 0) {
+            setNodes([]);
+            setEdges([]);
+            return;
+        }
+        const siblingRankMap = (0, tree_state_1.computeSiblingRanks)(enrichedCategories);
+        const query = searchQuery.trim().toLowerCase();
+        const rawNodes = enrichedCategories.map((cat) => {
+            const rankInfo = siblingRankMap.get(cat.id);
+            const matchesSearch = !query ||
+                cat.name.toLowerCase().includes(query) ||
+                cat.handle.toLowerCase().includes(query);
+            const matchesStorefront = selectedStorefront === "all" ||
+                (cat.sales_channels || []).includes(selectedStorefront);
+            const isDimmed = !matchesSearch || !matchesStorefront;
+            return {
+                id: cat.id,
+                type: "categoryNode",
+                position: { x: 0, y: 0 },
+                data: {
+                    category: cat,
+                    tier: cat.tier,
+                    siblingRank: rankInfo?.rankNum || 1,
+                    superscriptRank: rankInfo?.superscript || "¹",
+                    salesChannels,
+                    isCollapsed: collapsedIds.has(cat.id),
+                    hiddenDescendantCount: cat.children_count,
+                    direction,
+                    isDimmed,
+                    onToggleCollapse: handleToggleCollapse,
+                    onAddChild: handleAddChild,
+                    onEdit: handleEdit,
+                    onDetach: handleDetach,
+                },
+            };
+        });
+        const rawEdges = [];
+        for (const cat of enrichedCategories) {
+            if (cat.parent_category_id) {
+                rawEdges.push({
+                    id: `e-${cat.parent_category_id}-${cat.id}`,
+                    source: cat.parent_category_id,
+                    target: cat.id,
+                    type: "smoothstep",
+                });
+            }
+        }
+        const { visibleNodes, visibleEdges } = (0, tree_state_1.getVisibleTree)(rawNodes, rawEdges, collapsedIds, childrenMap);
+        const { nodes: layoutedNodes, edges: layoutedEdges } = (0, layout_engine_1.computeDagreLayout)(visibleNodes, visibleEdges, { direction });
+        setNodes(layoutedNodes);
+        setEdges(layoutedEdges);
+    }, [
+        enrichedCategories,
+        collapsedIds,
+        childrenMap,
+        direction,
+        searchQuery,
+        selectedStorefront,
+        salesChannels,
+        handleToggleCollapse,
+        handleAddChild,
+        handleEdit,
+        handleDetach,
+        setNodes,
+        setEdges,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const timer = setTimeout(() => {
+            fitView({ padding: 0.2, duration: 400 });
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [fitView, direction]);
+    const onConnect = (0, react_1.useCallback)((params) => {
+        if (!params.source || !params.target || params.source === params.target)
+            return;
+        if ((0, tree_state_1.wouldCreateCycle)(categories, params.target, params.source)) {
+            ui_1.toast.error("Cannot connect: would create a circular loop in the hierarchy!");
+            return;
+        }
+        setCategories((prev) => prev.map((c) => c.id === params.target ? { ...c, parent_category_id: params.source } : c));
+    }, [categories]);
+    const onEdgesDelete = (0, react_1.useCallback)((deletedEdges) => {
+        const targetIds = new Set(deletedEdges.map((e) => e.target));
+        setCategories((prev) => prev.map((c) => (targetIds.has(c.id) ? { ...c, parent_category_id: null } : c)));
+    }, []);
+    const handleExpandAll = () => setCollapsedIds(new Set());
+    const handleCollapseAll = () => {
+        const parents = new Set(categories.filter((c) => (childrenMap.get(c.id) || []).length > 0).map((c) => c.id));
+        setCollapsedIds(parents);
+    };
+    const handleFocusRoot = () => {
+        const rootIds = new Set(categories.filter((c) => !c.parent_category_id).map((c) => c.id));
+        setCollapsedIds(rootIds);
+    };
+    const dirtyMoves = (0, react_1.useMemo)(() => {
+        return (0, tree_state_1.computeMoves)(originalCategories, categories);
+    }, [originalCategories, categories]);
+    const handleSave = async () => {
+        if (dirtyMoves.length === 0)
+            return;
+        setIsSaving(true);
+        try {
+            await sdk_1.sdk.client.fetch("/admin/category-tree/reorder", {
+                method: "POST",
+                body: { moves: dirtyMoves },
+            });
+            ui_1.toast.success("Category hierarchy successfully saved");
+            setOriginalCategories([...categories]);
+        }
+        catch (err) {
+            ui_1.toast.error(err?.message || "Failed to save category order");
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleReset = () => {
+        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, 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, 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) => {
+                    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) => {
+                    setCategories((prev) => prev.map((c) => (c.id === updatedCat.id ? updatedCat : c)));
+                    setOriginalCategories((prev) => prev.map((c) => (c.id === updatedCat.id ? updatedCat : c)));
+                }, onDeleteSuccess: (deletedId) => {
+                    setCategories((prev) => prev.filter((c) => c.id !== deletedId));
+                    setOriginalCategories((prev) => prev.filter((c) => c.id !== deletedId));
+                } })] }));
+};
+const CategoryTreeCanvas = () => {
+    return ((0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(CanvasInner, {}) }));
+};
+exports.CategoryTreeCanvas = CategoryTreeCanvas;

package/.medusa/server/src/admin/components/category-tree/create-category-drawer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { CategoryTreeNode, SalesChannelInfo } from "./types";
+export interface CreateCategoryDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    parentCategory: CategoryTreeNode | null;
+    salesChannels: SalesChannelInfo[];
+    onSuccess: (newCat: CategoryTreeNode) => void;
+}
+export declare const CreateCategoryDrawer: React.FC<CreateCategoryDrawerProps>;

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateCategoryDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@medusajs/ui");
+const sdk_1 = require("../../lib/sdk");
+const CreateCategoryDrawer = ({ open, onOpenChange, parentCategory, salesChannels, onSuccess, }) => {
+    const [name, setName] = (0, react_1.useState)("");
+    const [handle, setHandle] = (0, react_1.useState)("");
+    const [description, setDescription] = (0, react_1.useState)("");
+    const [imageUrl, setImageUrl] = (0, react_1.useState)("");
+    const [isActive, setIsActive] = (0, react_1.useState)(true);
+    const [isInternal, setIsInternal] = (0, react_1.useState)(false);
+    const [selectedChannels, setSelectedChannels] = (0, react_1.useState)([]);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setName("");
+            setHandle("");
+            setDescription("");
+            setImageUrl("");
+            setIsActive(true);
+            setIsInternal(false);
+            if (parentCategory?.sales_channels) {
+                setSelectedChannels(parentCategory.sales_channels);
+            }
+            else {
+                setSelectedChannels(salesChannels.map((sc) => sc.id));
+            }
+        }
+    }, [open, parentCategory, salesChannels]);
+    const handleNameChange = (val) => {
+        setName(val);
+        if (!handle || handle === name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")) {
+            setHandle(val
+                .toLowerCase()
+                .replace(/[^a-z0-9]+/g, "-")
+                .replace(/^-|-$/g, ""));
+        }
+    };
+    const toggleChannel = (channelId) => {
+        setSelectedChannels((prev) => prev.includes(channelId)
+            ? prev.filter((id) => id !== channelId)
+            : [...prev, channelId]);
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!name.trim()) {
+            ui_1.toast.error("Category name is required");
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const res = await sdk_1.sdk.client.fetch("/admin/category-tree/create", {
+                method: "POST",
+                body: {
+                    name: name.trim(),
+                    handle: handle.trim() || undefined,
+                    description: description.trim() || undefined,
+                    parent_category_id: parentCategory ? parentCategory.id : null,
+                    image_url: imageUrl.trim() || undefined,
+                    sales_channels: selectedChannels,
+                    is_active: isActive,
+                    is_internal: isInternal,
+                },
+            });
+            ui_1.toast.success(`Category "${name}" created successfully`);
+            onSuccess(res.category);
+            onOpenChange(false);
+        }
+        catch (err) {
+            ui_1.toast.error(err?.message || "Failed to create category");
+        }
+        finally {
+            setIsSubmitting(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-md", 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, { children: [(0, jsx_runtime_1.jsx)(ui_1.Drawer.Title, { children: parentCategory ? `New Subcategory under "${parentCategory.name}"` : "New Root Category" }), (0, jsx_runtime_1.jsx)(ui_1.Drawer.Description, { children: parentCategory
+                                    ? `Will be created at Tier ${(parentCategory.tier || 1) + 1} and linked in the hierarchy.`
+                                    : "Creates a top-level Tier 1 main category in the store." })] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Body, { className: "flex flex-col gap-4 overflow-y-auto px-6 py-4 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "cat-name", className: "text-xs font-semibold", children: "Category Name *" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "cat-name", size: "small", placeholder: "e.g. Embroidery Thread", value: name, onChange: (e) => handleNameChange(e.target.value), autoFocus: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "cat-handle", className: "text-xs font-semibold", children: "Handle (URL slug)" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "cat-handle", size: "small", placeholder: "e.g. embroidery-thread", value: handle, onChange: (e) => setHandle(e.target.value) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "cat-image", className: "text-xs font-semibold", children: "Category Image URL" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "cat-image", size: "small", placeholder: "https://... or /images/...", value: imageUrl, onChange: (e) => setImageUrl(e.target.value) }), imageUrl && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1 w-16 h-16 rounded-lg overflow-hidden border border-ui-border-base bg-ui-bg-subtle", children: (0, jsx_runtime_1.jsx)("img", { src: imageUrl, alt: "Preview", className: "w-full h-full object-cover", onError: (e) => {
+                                                ;
+                                                e.target.style.display = "none";
+                                            } }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "cat-desc", className: "text-xs font-semibold", children: "Description" }), (0, jsx_runtime_1.jsx)(ui_1.Textarea, { id: "cat-desc", placeholder: "Brief summary of this category...", value: description, onChange: (e) => setDescription(e.target.value), rows: 2 })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 pt-2 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Storefront Visibility" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Designate which storefronts can display this category." }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: salesChannels.map((channel) => {
+                                            const isChecked = selectedChannels.includes(channel.id);
+                                            return ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2.5 text-xs text-ui-fg-base cursor-pointer select-none", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isChecked, onChange: () => toggleChannel(channel.id), className: "rounded border-ui-border-base text-blue-600 focus:ring-blue-500 cursor-pointer" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: channel.name })] }, channel.id));
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Active Status" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Visible to shoppers on enabled storefronts" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isActive, onCheckedChange: setIsActive })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Internal Only" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Hidden from public storefront navigation" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isInternal, onCheckedChange: setIsInternal })] })] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Footer, { className: "flex justify-end gap-2 px-6 py-4 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", variant: "secondary", size: "small", onClick: () => onOpenChange(false), disabled: isSubmitting, children: "Cancel" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "submit", size: "small", isLoading: isSubmitting, disabled: isSubmitting || !name.trim(), children: "Create Category" })] })] }) }) }));
+};
+exports.CreateCategoryDrawer = CreateCategoryDrawer;

package/.medusa/server/src/admin/components/category-tree/custom-edge.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { EdgeProps } from "@xyflow/react";
+export declare const CustomSmoothStepEdge: React.MemoExoticComponent<(props: EdgeProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSmoothStepEdge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@xyflow/react");
+exports.CustomSmoothStepEdge = (0, react_1.memo)((props) => {
+    const { id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, markerEnd, selected, } = props;
+    const [edgePath] = (0, react_2.getSmoothStepPath)({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: 16,
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: edgePath, fill: "none", strokeOpacity: 0, strokeWidth: 20, className: "react-flow__edge-interaction cursor-pointer" }), (0, jsx_runtime_1.jsx)(react_2.BaseEdge, { id: id, path: edgePath, markerEnd: markerEnd, style: {
+                    ...style,
+                    stroke: selected ? "var(--bg-interactive, #3b82f6)" : "var(--border-strong, #cbd5e1)",
+                    strokeWidth: selected ? 2.5 : 1.75,
+                    transition: "stroke 0.2s, stroke-width 0.2s",
+                } })] }));
+});
+exports.CustomSmoothStepEdge.displayName = "CustomSmoothStepEdge";

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { CategoryTreeNode, SalesChannelInfo } from "./types";
+export interface EditCategoryDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    category: CategoryTreeNode | null;
+    salesChannels: SalesChannelInfo[];
+    onSuccess: (updatedCat: CategoryTreeNode) => void;
+    onDeleteSuccess: (deletedId: string) => void;
+}
+export declare const EditCategoryDrawer: React.FC<EditCategoryDrawerProps>;

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

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditCategoryDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@medusajs/ui");
+const icons_1 = require("@medusajs/icons");
+const sdk_1 = require("../../lib/sdk");
+const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuccess, onDeleteSuccess, }) => {
+    const [name, setName] = (0, react_1.useState)("");
+    const [handle, setHandle] = (0, react_1.useState)("");
+    const [description, setDescription] = (0, react_1.useState)("");
+    const [imageUrl, setImageUrl] = (0, react_1.useState)("");
+    const [isActive, setIsActive] = (0, react_1.useState)(true);
+    const [isInternal, setIsInternal] = (0, react_1.useState)(false);
+    const [selectedChannels, setSelectedChannels] = (0, react_1.useState)([]);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (category) {
+            setName(category.name || "");
+            setHandle(category.handle || "");
+            setDescription(category.description || "");
+            setImageUrl(category.image_url || "");
+            setIsActive(Boolean(category.is_active));
+            setIsInternal(Boolean(category.is_internal));
+            setSelectedChannels(category.sales_channels || salesChannels.map((s) => s.id));
+        }
+    }, [category, salesChannels]);
+    if (!category)
+        return null;
+    const toggleChannel = (channelId) => {
+        setSelectedChannels((prev) => prev.includes(channelId)
+            ? prev.filter((id) => id !== channelId)
+            : [...prev, channelId]);
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!name.trim()) {
+            ui_1.toast.error("Category name is required");
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const updatedMetadata = {
+                ...(category.metadata || {}),
+                sales_channels: selectedChannels,
+            };
+            if (imageUrl.trim()) {
+                updatedMetadata.thumbnail = imageUrl.trim();
+                updatedMetadata.image = imageUrl.trim();
+            }
+            await sdk_1.sdk.admin.productCategory.update(category.id, {
+                name: name.trim(),
+                handle: handle.trim() || undefined,
+                description: description.trim() || undefined,
+                is_active: isActive,
+                is_internal: isInternal,
+                metadata: updatedMetadata,
+            });
+            const updated = {
+                ...category,
+                name: name.trim(),
+                handle: handle.trim(),
+                description: description.trim() || null,
+                image_url: imageUrl.trim() || category.image_url,
+                sales_channels: selectedChannels,
+                is_active: isActive,
+                is_internal: isInternal,
+                metadata: updatedMetadata,
+            };
+            ui_1.toast.success("Category updated successfully");
+            onSuccess(updated);
+            onOpenChange(false);
+        }
+        catch (err) {
+            ui_1.toast.error(err?.message || "Failed to update category");
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleDelete = async () => {
+        if (!confirm(`Are you sure you want to delete category "${category.name}"? Subcategories will be promoted.`)) {
+            return;
+        }
+        setIsDeleting(true);
+        try {
+            await sdk_1.sdk.admin.productCategory.delete(category.id);
+            ui_1.toast.success(`Category "${category.name}" deleted`);
+            onDeleteSuccess(category.id);
+            onOpenChange(false);
+        }
+        catch (err) {
+            ui_1.toast.error(err?.message || "Failed to delete category");
+        }
+        finally {
+            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-md", 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, { children: [(0, jsx_runtime_1.jsxs)(ui_1.Drawer.Title, { children: ["Edit Category: ", category.name] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Description, { children: ["Tier ", category.tier, " \u2022 ID: ", category.id] })] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Body, { className: "flex flex-col gap-4 overflow-y-auto px-6 py-4 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-name", className: "text-xs font-semibold", children: "Category Name *" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-name", size: "small", value: name, onChange: (e) => setName(e.target.value) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-handle", className: "text-xs font-semibold", children: "Handle (URL slug)" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-handle", size: "small", value: handle, onChange: (e) => setHandle(e.target.value) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-image", className: "text-xs font-semibold", children: "Category Image URL" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-image", size: "small", value: imageUrl, onChange: (e) => setImageUrl(e.target.value) }), imageUrl && ((0, jsx_runtime_1.jsx)("div", { className: "mt-1 w-16 h-16 rounded-lg overflow-hidden border border-ui-border-base bg-ui-bg-subtle", children: (0, jsx_runtime_1.jsx)("img", { src: imageUrl, alt: "Category", className: "w-full h-full object-cover", onError: (e) => {
+                                                ;
+                                                e.target.style.display = "none";
+                                            } }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-desc", className: "text-xs font-semibold", children: "Description" }), (0, jsx_runtime_1.jsx)(ui_1.Textarea, { id: "edit-desc", value: description, onChange: (e) => setDescription(e.target.value), rows: 2 })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 pt-2 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Storefront Visibility" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Designate which storefronts can display this category." }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: salesChannels.map((channel) => {
+                                            const isChecked = selectedChannels.includes(channel.id);
+                                            return ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2.5 text-xs text-ui-fg-base cursor-pointer select-none", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isChecked, onChange: () => toggleChannel(channel.id), className: "rounded border-ui-border-base text-blue-600 focus:ring-blue-500 cursor-pointer" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: channel.name })] }, channel.id));
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Active Status" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Visible to shoppers on enabled storefronts" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isActive, onCheckedChange: setIsActive })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Internal Only" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Hidden from public storefront navigation" })] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: isInternal, onCheckedChange: setIsInternal })] }), (0, jsx_runtime_1.jsx)("div", { className: "pt-3 border-t border-ui-border-base", children: (0, jsx_runtime_1.jsxs)(ui_1.Button, { type: "button", variant: "danger", size: "small", onClick: handleDelete, isLoading: isDeleting, className: "w-full flex items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Delete Category" })] }) })] }), (0, jsx_runtime_1.jsxs)(ui_1.Drawer.Footer, { className: "flex justify-end gap-2 px-6 py-4 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { type: "button", variant: "secondary", size: "small", onClick: () => onOpenChange(false), disabled: isSubmitting || isDeleting, children: "Cancel" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "submit", size: "small", isLoading: isSubmitting, disabled: isSubmitting || !name.trim() || isDeleting, children: "Save Changes" })] })] }) }) }));
+};
+exports.EditCategoryDrawer = EditCategoryDrawer;

package/.medusa/server/src/admin/components/category-tree/lib/layout-engine.d.ts

@@ -0,0 +1,12 @@
+import { Node, Edge } from "@xyflow/react";
+export declare const CARD_WIDTH = 270;
+export declare const CARD_HEIGHT = 86;
+export interface LayoutOptions {
+    direction?: "TB" | "LR";
+    nodeSep?: number;
+    rankSep?: number;
+}
+export declare function computeDagreLayout(nodes: Node[], edges: Edge[], options?: LayoutOptions): {
+    nodes: Node[];
+    edges: Edge[];
+};