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

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

@@ -5,15 +5,40 @@ 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 category_products_manager_1 = require("./category-products-manager");
 const sdk_1 = require("../../lib/sdk");
+function extractYouTubeVideoId(url) {
+    if (!url || typeof url !== "string")
+        return null;
+    const trimmed = url.trim();
+    const patterns = [
+        /(?:youtube\.com\/shorts\/)([^?&\s]+)/i,
+        /(?:youtube\.com\/watch\?.*v=)([^?&\s]+)/i,
+        /(?:youtu\.be\/)([^?&\s]+)/i,
+        /(?:youtube\.com\/embed\/)([^?&\s]+)/i,
+    ];
+    for (const pattern of patterns) {
+        const match = trimmed.match(pattern);
+        if (match && match[1])
+            return match[1];
+    }
+    if (/^[a-zA-Z0-9_-]{11}$/.test(trimmed))
+        return trimmed;
+    return null;
+}
 const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuccess, onDeleteSuccess, }) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)("general");
     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 [rank, setRank] = (0, react_1.useState)(0);
     const [isActive, setIsActive] = (0, react_1.useState)(true);
     const [isInternal, setIsInternal] = (0, react_1.useState)(false);
     const [selectedChannels, setSelectedChannels] = (0, react_1.useState)([]);
+    const [youtubeUrls, setYoutubeUrls] = (0, react_1.useState)([]);
+    const [newYoutubeInput, setNewYoutubeInput] = (0, react_1.useState)("");
+    const [currentMetadata, setCurrentMetadata] = (0, react_1.useState)({});
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -22,9 +47,22 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
             setHandle(category.handle || "");
             setDescription(category.description || "");
             setImageUrl(category.image_url || "");
+            setRank(category.rank ?? 0);
             setIsActive(Boolean(category.is_active));
             setIsInternal(Boolean(category.is_internal));
             setSelectedChannels(category.sales_channels || salesChannels.map((s) => s.id));
+            setCurrentMetadata(category.metadata || {});
+            // Parse YouTube URLs from metadata
+            const meta = category.metadata;
+            const urls = [];
+            if (meta?.youtube_urls && Array.isArray(meta.youtube_urls)) {
+                meta.youtube_urls.forEach((u) => typeof u === "string" && u.trim() && urls.push(u.trim()));
+            }
+            else if (meta?.youtube_url && typeof meta.youtube_url === "string") {
+                urls.push(meta.youtube_url.trim());
+            }
+            setYoutubeUrls(urls);
+            setActiveTab("general");
         }
     }, [category, salesChannels]);
     if (!category)
@@ -34,6 +72,27 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
             ? prev.filter((id) => id !== channelId)
             : [...prev, channelId]);
     };
+    const handleAddYoutube = () => {
+        const raw = newYoutubeInput.trim();
+        if (!raw)
+            return;
+        const id = extractYouTubeVideoId(raw);
+        if (!id) {
+            ui_1.toast.error("Please enter a valid YouTube URL or video ID");
+            return;
+        }
+        const cleanUrl = `https://www.youtube.com/watch?v=${id}`;
+        if (youtubeUrls.includes(cleanUrl)) {
+            ui_1.toast.error("Video already added");
+            return;
+        }
+        setYoutubeUrls((prev) => [...prev, cleanUrl]);
+        setNewYoutubeInput("");
+        ui_1.toast.success("YouTube video added");
+    };
+    const handleRemoveYoutube = (urlToRemove) => {
+        setYoutubeUrls((prev) => prev.filter((u) => u !== urlToRemove));
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!name.trim()) {
@@ -43,8 +102,9 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
         setIsSubmitting(true);
         try {
             const updatedMetadata = {
-                ...(category.metadata || {}),
+                ...(currentMetadata || {}),
                 sales_channels: selectedChannels,
+                youtube_urls: youtubeUrls,
             };
             if (imageUrl.trim()) {
                 updatedMetadata.thumbnail = imageUrl.trim();
@@ -54,6 +114,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
                 name: name.trim(),
                 handle: handle.trim() || undefined,
                 description: description.trim() || undefined,
+                rank: Number(rank) || 0,
                 is_active: isActive,
                 is_internal: isInternal,
                 metadata: updatedMetadata,
@@ -64,6 +125,7 @@ const EditCategoryDrawer = ({ open, onOpenChange, category, salesChannels, onSuc
                 handle: handle.trim(),
                 description: description.trim() || null,
                 image_url: imageUrl.trim() || category.image_url,
+                rank: Number(rank) || 0,
                 sales_channels: selectedChannels,
                 is_active: isActive,
                 is_internal: isInternal,
@@ -98,12 +160,31 @@ 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-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" })] })] }) }) }));
+    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"
+                                            ? "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"
+                                            : "border-transparent text-ui-fg-muted hover:text-ui-fg-base"}`, children: "Products Management" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab("channels"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "channels"
+                                            ? "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: "Storefronts & Media" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setActiveTab("youtube"), className: `px-3 py-1.5 text-xs font-medium rounded-t-lg transition-colors border-b-2 -mb-[5px] ${activeTab === "youtube"
+                                            ? "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: ["YouTube Videos (", youtubeUrls.length, ")"] })] })] }), (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: [activeTab === "general" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", 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 p-3 rounded-lg bg-ui-bg-subtle border border-ui-border-base", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-rank", className: "text-xs font-semibold", children: "Storefront Ranking (Sort Order)" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-mono text-ui-fg-muted", children: "Controls Storefront 2 & Monfil" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-rank", type: "number", size: "small", value: rank, onChange: (e) => setRank(Number(e.target.value)), className: "w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank((r) => Math.max(0, r - 1)), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors", title: "Move Earlier in Storefront", children: "\u2191 Earlier" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank((r) => r + 1), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors", title: "Move Later in Storefront", children: "\u2193 Later" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setRank(0), className: "px-2 py-1 text-xs font-medium rounded border border-ui-border-base bg-ui-bg-base hover:bg-ui-bg-subtle transition-colors", title: "Set as First Category", children: "Top (#0)" })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-ui-fg-muted leading-relaxed", children: "Categories are sorted by rank ASC (0, 1, 2...). Lower numbers appear first on your storefront navigation menu." })] }), (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: 3 })] }), (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" })] }) })] })), activeTab === "products" && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: (0, jsx_runtime_1.jsx)(category_products_manager_1.CategoryProductsManager, { categoryId: category.id, categoryName: category.name, initialMetadata: currentMetadata, onMetadataUpdate: (meta) => {
+                                        setCurrentMetadata(meta);
+                                    } }) })), activeTab === "channels" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { className: "text-xs font-semibold", children: "Storefront Visibility" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Designate which storefront sales channels display this category." }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 mt-1", children: salesChannels.map((channel) => {
+                                                    const isChecked = selectedChannels.includes(channel.id);
+                                                    return ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2.5 text-xs text-ui-fg-base cursor-pointer select-none p-2 rounded-lg border border-ui-border-base bg-ui-bg-subtle/40 hover:bg-ui-bg-subtle", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isChecked, onChange: () => toggleChannel(channel.id), className: "rounded border-ui-border-base text-blue-600 focus:ring-blue-500 cursor-pointer" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: channel.name })] }, channel.id));
+                                                }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 pt-3 border-t border-ui-border-base", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "edit-image", className: "text-xs font-semibold", children: "Category Thumbnail / Image URL" }), (0, jsx_runtime_1.jsx)(ui_1.Input, { id: "edit-image", size: "small", value: imageUrl, onChange: (e) => setImageUrl(e.target.value), placeholder: "https://example.com/category-image.jpg" }), imageUrl && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 w-24 h-24 rounded-xl overflow-hidden border border-ui-border-base bg-ui-bg-subtle shadow-xs", children: (0, jsx_runtime_1.jsx)("img", { src: imageUrl, alt: "Category Preview", className: "w-full h-full object-cover", onError: (e) => {
+                                                        ;
+                                                        e.target.style.display = "none";
+                                                    } }) }))] })] })), activeTab === "youtube" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-xs font-semibold text-ui-fg-base", children: "Category Demonstration Videos (YouTube)" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-ui-fg-muted mt-0.5", children: "Attach YouTube video demonstration links to show interactive video carousels on the storefront category page." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Input, { size: "small", placeholder: "Paste YouTube watch URL, shorts, or video ID\u2026", value: newYoutubeInput, onChange: (e) => setNewYoutubeInput(e.target.value), className: "flex-1 text-xs", onKeyDown: (e) => {
+                                                    if (e.key === "Enter") {
+                                                        e.preventDefault();
+                                                        handleAddYoutube();
+                                                    }
+                                                } }), (0, jsx_runtime_1.jsxs)(ui_1.Button, { size: "small", type: "button", variant: "secondary", onClick: handleAddYoutube, className: "flex items-center gap-1 text-xs flex-shrink-0", children: [(0, jsx_runtime_1.jsx)(icons_1.Plus, { className: "w-3.5 h-3.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Add Video" })] })] }), youtubeUrls.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "p-8 text-center text-xs text-ui-fg-muted border border-dashed border-ui-border-base rounded-xl", children: "No demonstration videos attached yet." })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3", children: youtubeUrls.map((url) => {
+                                            const id = extractYouTubeVideoId(url);
+                                            const thumb = id ? `https://img.youtube.com/vi/${id}/hqdefault.jpg` : null;
+                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col border border-ui-border-base rounded-xl overflow-hidden bg-ui-bg-subtle/40 shadow-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative aspect-video bg-black/80 overflow-hidden flex items-center justify-center", children: [thumb ? ((0, jsx_runtime_1.jsx)("img", { src: thumb, alt: "YouTube Preview", className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-white", children: "Video" })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleRemoveYoutube(url), className: "absolute top-1.5 right-1.5 p-1 bg-black/70 hover:bg-rose-600 text-white rounded-full transition-colors", title: "Remove video", children: (0, jsx_runtime_1.jsx)(icons_1.Trash, { className: "w-3 h-3" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-ui-fg-muted truncate block font-mono", title: url, children: url }) })] }, url));
+                                        }) }))] }))] }), (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: "Close" }), (0, jsx_runtime_1.jsx)(ui_1.Button, { type: "submit", size: "small", isLoading: isSubmitting, disabled: isSubmitting || !name.trim() || isDeleting, children: "Save Category" })] })] }) }) }));
 };
 exports.EditCategoryDrawer = EditCategoryDrawer;

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

@@ -6,7 +6,15 @@ export interface LayoutOptions {
     nodeSep?: number;
     rankSep?: number;
 }
-export declare function computeDagreLayout(nodes: Node[], edges: Edge[], options?: LayoutOptions): {
+/**
+ * AAA Clustered Hierarchical Tree Layout (Buchheim/Walker style)
+ * - Guarantees each parent is positioned at the exact midpoint/center of its children
+ * - Guarantees subtrees never overlap and stay tightly clustered
+ * - Completely eliminates long spanning cross-canvas threads
+ * - Sibling order is preserved strictly according to category rank
+ */
+export declare function computeTreeLayout(nodes: Node[], edges: Edge[], options?: LayoutOptions): {
     nodes: Node[];
     edges: Edge[];
 };
+export declare const computeDagreLayout: typeof computeTreeLayout;

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

@@ -1,44 +1,138 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CARD_HEIGHT = exports.CARD_WIDTH = void 0;
-exports.computeDagreLayout = computeDagreLayout;
-const dagre_1 = __importDefault(require("@dagrejs/dagre"));
+exports.computeDagreLayout = exports.CARD_HEIGHT = exports.CARD_WIDTH = void 0;
+exports.computeTreeLayout = computeTreeLayout;
 const react_1 = require("@xyflow/react");
 exports.CARD_WIDTH = 270;
 exports.CARD_HEIGHT = 86;
-function computeDagreLayout(nodes, edges, options = {}) {
+/**
+ * AAA Clustered Hierarchical Tree Layout (Buchheim/Walker style)
+ * - Guarantees each parent is positioned at the exact midpoint/center of its children
+ * - Guarantees subtrees never overlap and stay tightly clustered
+ * - Completely eliminates long spanning cross-canvas threads
+ * - Sibling order is preserved strictly according to category rank
+ */
+function computeTreeLayout(nodes, edges, options = {}) {
+    if (nodes.length === 0)
+        return { nodes: [], edges: [] };
     const direction = options.direction || "TB";
     const isTB = direction === "TB";
-    const g = new dagre_1.default.graphlib.Graph();
-    g.setDefaultEdgeLabel(() => ({}));
-    g.setGraph({
-        rankdir: direction,
-        nodesep: options.nodeSep ?? (isTB ? 45 : 32),
-        ranksep: options.rankSep ?? (isTB ? 65 : 75),
-        align: "UL",
-        ranker: "network-simplex",
-    });
-    nodes.forEach((node) => {
-        g.setNode(node.id, { width: exports.CARD_WIDTH, height: exports.CARD_HEIGHT });
-    });
+    const nodeSep = options.nodeSep ?? (isTB ? 40 : 28);
+    const rankSep = options.rankSep ?? (isTB ? 70 : 80);
+    const treeGap = isTB ? 80 : 64;
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const childrenMap = new Map();
+    const parentMap = new Map();
     edges.forEach((edge) => {
-        g.setEdge(edge.source, edge.target);
+        if (nodeMap.has(edge.source) && nodeMap.has(edge.target)) {
+            const list = childrenMap.get(edge.source) || [];
+            list.push(edge.target);
+            childrenMap.set(edge.source, list);
+            parentMap.set(edge.target, edge.source);
+        }
+    });
+    // Identify roots (nodes with no incoming edge in the visible graph)
+    const rootNodes = nodes.filter((n) => !parentMap.has(n.id));
+    // Sort children by their category rank
+    const getRank = (id) => {
+        const raw = nodeMap.get(id)?.data?.category?.rank;
+        return typeof raw === "number" ? raw : 0;
+    };
+    function buildTree(id, depth) {
+        const rawNode = nodeMap.get(id);
+        const childIds = (childrenMap.get(id) || []).sort((a, b) => getRank(a) - getRank(b) || a.localeCompare(b));
+        const children = childIds.map((childId) => buildTree(childId, depth + 1));
+        return {
+            id,
+            node: rawNode,
+            children,
+            depth,
+            span: 0,
+            primaryCoord: 0,
+            secondaryCoord: 0,
+        };
+    }
+    // 1. Post-order pass: Compute subtree span (width in TB, height in LR)
+    function computeSpan(treeNode) {
+        const baseSpan = isTB ? exports.CARD_WIDTH : exports.CARD_HEIGHT;
+        if (treeNode.children.length === 0) {
+            treeNode.span = baseSpan;
+            return baseSpan;
+        }
+        let childrenSpanTotal = 0;
+        treeNode.children.forEach((child, index) => {
+            const childSpan = computeSpan(child);
+            childrenSpanTotal += childSpan + (index > 0 ? nodeSep : 0);
+        });
+        treeNode.span = Math.max(baseSpan, childrenSpanTotal);
+        return treeNode.span;
+    }
+    // 2. Pre-order pass: Position nodes
+    function assignPositions(treeNode, startOffset, depth) {
+        const baseSpan = isTB ? exports.CARD_WIDTH : exports.CARD_HEIGHT;
+        const baseSecondary = isTB ? exports.CARD_HEIGHT : exports.CARD_WIDTH;
+        treeNode.secondaryCoord = depth * (baseSecondary + rankSep);
+        if (treeNode.children.length === 0) {
+            treeNode.primaryCoord = startOffset + (treeNode.span - baseSpan) / 2;
+            return;
+        }
+        let currentOffset = startOffset;
+        treeNode.children.forEach((child) => {
+            assignPositions(child, currentOffset, depth + 1);
+            currentOffset += child.span + nodeSep;
+        });
+        // Center parent directly between first and last child
+        const firstChild = treeNode.children[0];
+        const lastChild = treeNode.children[treeNode.children.length - 1];
+        const centerOfChildren = (firstChild.primaryCoord + lastChild.primaryCoord) / 2;
+        treeNode.primaryCoord = centerOfChildren;
+    }
+    // Sort roots by their rank
+    rootNodes.sort((a, b) => getRank(a.id) - getRank(b.id) || a.id.localeCompare(b.id));
+    const positionedNodes = [];
+    let globalOffset = 0;
+    rootNodes.forEach((root) => {
+        const tree = buildTree(root.id, 0);
+        computeSpan(tree);
+        assignPositions(tree, globalOffset, 0);
+        globalOffset += tree.span + treeGap;
+        // Flatten tree
+        function collect(node) {
+            const x = isTB ? node.primaryCoord : node.secondaryCoord;
+            const y = isTB ? node.secondaryCoord : node.primaryCoord;
+            positionedNodes.push({
+                ...node.node,
+                targetPosition: isTB ? react_1.Position.Top : react_1.Position.Left,
+                sourcePosition: isTB ? react_1.Position.Bottom : react_1.Position.Right,
+                position: { x, y },
+            });
+            node.children.forEach(collect);
+        }
+        collect(tree);
     });
-    dagre_1.default.layout(g);
-    const layoutedNodes = nodes.map((node) => {
-        const pos = g.node(node.id);
+    // Style edges to match branch color
+    const styledEdges = edges.map((e) => {
+        const sourceNode = nodeMap.get(e.source);
+        const targetNode = nodeMap.get(e.target);
+        const branchColor = e.data?.branchColor ||
+            targetNode?.data?.branchColor ||
+            sourceNode?.data?.branchColor ||
+            "#64748b";
         return {
-            ...node,
-            targetPosition: isTB ? react_1.Position.Top : react_1.Position.Left,
-            sourcePosition: isTB ? react_1.Position.Bottom : react_1.Position.Right,
-            position: {
-                x: pos.x - exports.CARD_WIDTH / 2,
-                y: pos.y - exports.CARD_HEIGHT / 2,
+            ...e,
+            data: {
+                ...e.data,
+                branchColor,
+            },
+            style: {
+                ...e.style,
+                stroke: branchColor,
+                strokeWidth: 2,
+                opacity: 0.95,
             },
         };
     });
-    return { nodes: layoutedNodes, edges };
+    return { nodes: positionedNodes, edges: styledEdges };
 }
+// Keep computeDagreLayout as alias to guarantee backwards compatibility
+exports.computeDagreLayout = computeTreeLayout;

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

@@ -13,3 +13,17 @@ export declare function getVisibleTree(allNodes: Node[], allEdges: Edge[], colla
     visibleEdges: Edge[];
 };
 export declare function computeMoves(original: CategoryTreeNode[], current: CategoryTreeNode[]): CategoryMoveItem[];
+export declare const BRANCH_PALETTE: {
+    name: string;
+    hex: string;
+}[];
+/**
+ * Assigns a deterministic branch color to each category based on its top-level root ancestor.
+ * All descendants in a root branch share the exact same branch color.
+ */
+export declare function computeBranchColors(categories: CategoryTreeNode[]): Map<string, string>;
+/**
+ * Swaps sibling ranking (up or down). Modifies rank property among siblings
+ * and returns a new categories array ready for preview and commit.
+ */
+export declare function moveSiblingRank(categories: CategoryTreeNode[], targetId: string, direction: "up" | "down"): CategoryTreeNode[];

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BRANCH_PALETTE = void 0;
 exports.toSuperscript = toSuperscript;
 exports.computeTiers = computeTiers;
 exports.computeSiblingRanks = computeSiblingRanks;
@@ -7,6 +8,8 @@ exports.wouldCreateCycle = wouldCreateCycle;
 exports.computeSubtreeIds = computeSubtreeIds;
 exports.getVisibleTree = getVisibleTree;
 exports.computeMoves = computeMoves;
+exports.computeBranchColors = computeBranchColors;
+exports.moveSiblingRank = moveSiblingRank;
 const SUPERSCRIPT_MAP = {
     "0": "⁰",
     "1": "¹",
@@ -127,3 +130,95 @@ function computeMoves(original, current) {
     }
     return moves;
 }
+exports.BRANCH_PALETTE = [
+    { name: "Emerald", hex: "#10b981" },
+    { name: "Indigo", hex: "#6366f1" },
+    { name: "Amber", hex: "#f59e0b" },
+    { name: "Rose", hex: "#f43f5e" },
+    { name: "Cyan", hex: "#06b6d4" },
+    { name: "Violet", hex: "#8b5cf6" },
+    { name: "Pink", hex: "#ec4899" },
+    { name: "Lime", hex: "#84cc16" },
+    { name: "Sky", hex: "#0ea5e9" },
+    { name: "Orange", hex: "#f97316" },
+    { name: "Teal", hex: "#14b8a6" },
+    { name: "Purple", hex: "#a855f7" },
+];
+/**
+ * Assigns a deterministic branch color to each category based on its top-level root ancestor.
+ * All descendants in a root branch share the exact same branch color.
+ */
+function computeBranchColors(categories) {
+    const catMap = new Map(categories.map((c) => [c.id, c]));
+    const rootMap = new Map();
+    function findRootId(id, visited) {
+        if (rootMap.has(id))
+            return rootMap.get(id);
+        if (visited.has(id))
+            return id;
+        visited.add(id);
+        const cat = catMap.get(id);
+        if (!cat || !cat.parent_category_id || !catMap.has(cat.parent_category_id)) {
+            rootMap.set(id, id);
+            return id;
+        }
+        const root = findRootId(cat.parent_category_id, visited);
+        rootMap.set(id, root);
+        return root;
+    }
+    for (const c of categories) {
+        findRootId(c.id, new Set());
+    }
+    const rootIds = Array.from(new Set(categories.filter((c) => !c.parent_category_id).map((c) => c.id))).sort((a, b) => {
+        const catA = catMap.get(a);
+        const catB = catMap.get(b);
+        return (catA?.rank ?? 0) - (catB?.rank ?? 0) || a.localeCompare(b);
+    });
+    const rootColorMap = new Map();
+    rootIds.forEach((id, index) => {
+        rootColorMap.set(id, exports.BRANCH_PALETTE[index % exports.BRANCH_PALETTE.length].hex);
+    });
+    const result = new Map();
+    for (const c of categories) {
+        const rootId = rootMap.get(c.id) || c.id;
+        const color = rootColorMap.get(rootId) || exports.BRANCH_PALETTE[0].hex;
+        result.set(c.id, color);
+    }
+    return result;
+}
+/**
+ * Swaps sibling ranking (up or down). Modifies rank property among siblings
+ * and returns a new categories array ready for preview and commit.
+ */
+function moveSiblingRank(categories, targetId, direction) {
+    const target = categories.find((c) => c.id === targetId);
+    if (!target)
+        return categories;
+    const parentId = target.parent_category_id || null;
+    const siblings = categories
+        .filter((c) => (c.parent_category_id || null) === parentId)
+        .sort((a, b) => a.rank - b.rank);
+    const currentIndex = siblings.findIndex((s) => s.id === targetId);
+    if (currentIndex === -1)
+        return categories;
+    const targetIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+    if (targetIndex < 0 || targetIndex >= siblings.length)
+        return categories;
+    const adjacent = siblings[targetIndex];
+    // Normalize ranks if they are identical or uninitialized
+    const updatedRanks = new Map();
+    siblings.forEach((s, idx) => {
+        updatedRanks.set(s.id, idx * 10);
+    });
+    // Swap target and adjacent
+    const targetNewRank = targetIndex * 10;
+    const adjacentNewRank = currentIndex * 10;
+    updatedRanks.set(target.id, targetNewRank);
+    updatedRanks.set(adjacent.id, adjacentNewRank);
+    return categories.map((c) => {
+        if (updatedRanks.has(c.id)) {
+            return { ...c, rank: updatedRanks.get(c.id) };
+        }
+        return c;
+    });
+}

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

@@ -1,13 +1,15 @@
 import React from "react";
 export interface TierBarsProps {
     tier: number;
+    color?: string;
 }
 /**
- * Renders N vertical black bars on the left edge of each category card,
- * separated by crisp white spacing, providing an immediate tactile hierarchy indicator:
+ * Renders N vertical colored bars on the left edge of each category card,
+ * providing an immediate tactile hierarchy indicator:
  * Tier 1 = 1 bar (Root/Main)
  * Tier 2 = 2 bars (Sub)
  * Tier 3 = 3 bars (Sub-Sub)
  * Tier N = N bars
+ * Bar color matches the branch lineage for instant visual identification.
  */
 export declare const TierBars: React.FC<TierBarsProps>;

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

@@ -3,15 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TierBars = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Renders N vertical black bars on the left edge of each category card,
- * separated by crisp white spacing, providing an immediate tactile hierarchy indicator:
+ * Renders N vertical colored bars on the left edge of each category card,
+ * providing an immediate tactile hierarchy indicator:
  * Tier 1 = 1 bar (Root/Main)
  * Tier 2 = 2 bars (Sub)
  * Tier 3 = 3 bars (Sub-Sub)
  * Tier N = N bars
+ * Bar color matches the branch lineage for instant visual identification.
  */
-const TierBars = ({ tier }) => {
+const TierBars = ({ tier, color }) => {
     const count = Math.max(1, tier);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full py-2 pl-2 pr-1.5 gap-[2.5px] items-stretch flex-shrink-0 select-none bg-neutral-50 dark:bg-neutral-900/60 rounded-l-xl border-r border-ui-border-base/50", title: `Tier ${tier} (${tier === 1 ? "Main Root Category" : tier === 2 ? "Subcategory" : "Sub-subcategory"})`, children: Array.from({ length: count }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: "w-[3px] bg-neutral-950 dark:bg-neutral-100 rounded-full shadow-sm" }, index))) }));
+    const barColor = color || "var(--fg-interactive, #3b82f6)";
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full py-2 pl-2 pr-1.5 gap-[2.5px] items-stretch flex-shrink-0 select-none bg-neutral-50 dark:bg-neutral-900/60 rounded-l-xl border-r border-ui-border-base/50", title: `Tier ${tier} (${tier === 1 ? "Main Root Category" : tier === 2 ? "Subcategory" : "Sub-subcategory"}) - Branch Color: ${barColor}`, children: Array.from({ length: count }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: "w-[3.5px] rounded-full shadow-xs transition-colors", style: {
+                backgroundColor: barColor,
+                boxShadow: `0 0 4px ${barColor}40`,
+            } }, index))) }));
 };
 exports.TierBars = TierBars;

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

@@ -19,6 +19,7 @@ export type CategoryTreeNode = {
     sibling_rank: number;
     children_count: number;
     has_children: boolean;
+    branch_color?: string;
 };
 export type CategoryTreeResponse = {
     categories: CategoryTreeNode[];
@@ -35,6 +36,7 @@ export type CategoryNodeData = {
     tier: number;
     siblingRank: number;
     superscriptRank: string;
+    branchColor?: string;
     salesChannels: SalesChannelInfo[];
     isCollapsed: boolean;
     hiddenDescendantCount: number;
@@ -44,4 +46,6 @@ export type CategoryNodeData = {
     onAddChild: (parent: CategoryTreeNode) => void;
     onEdit: (category: CategoryTreeNode) => void;
     onDetach: (id: string) => void;
+    onMoveSiblingUp?: (id: string) => void;
+    onMoveSiblingDown?: (id: string) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hectasquare/medusa-plugin-category-tree",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "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",