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

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.2",
   "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",

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

@@ -22,6 +22,13 @@ export interface CanvasDockProps {
   onCollapseAll: () => void
   onFocusRoot: () => void
 
+  selectedCount?: number
+  onExpandSelected?: () => void
+  onCollapseSelected?: () => void
+
+  isBoxSelect?: boolean
+  onToggleBoxSelect?: () => void
+
   onZoomIn: () => void
   onZoomOut: () => void
   onFitView: () => void
@@ -45,6 +52,11 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
   onExpandAll,
   onCollapseAll,
   onFocusRoot,
+  selectedCount = 0,
+  onExpandSelected,
+  onCollapseSelected,
+  isBoxSelect = false,
+  onToggleBoxSelect,
   onFitView,
   onOpenCreateRoot,
   dirtyCount,
@@ -84,7 +96,7 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
           </button>
         </div>
 
-        <div className="relative w-40 sm:w-48">
+        <div className="relative w-36 sm:w-44">
           <input
             type="text"
             placeholder="Search categories…"
@@ -95,24 +107,47 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
           <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" />
         </div>
 
+        {/* Expand / Collapse Section with Selective awareness */}
         <div className="flex items-center gap-1 border-l border-ui-border-base pl-2.5">
-          <button
-            type="button"
-            title="Expand All Categories"
-            onClick={onExpandAll}
-            className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
-          >
-            Expand
-          </button>
-
-          <button
-            type="button"
-            title="Collapse All Subcategories"
-            onClick={onCollapseAll}
-            className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
-          >
-            Collapse
-          </button>
+          {selectedCount > 0 ? (
+            <>
+              <button
+                type="button"
+                title={`Expand selected category (${selectedCount} selected)`}
+                onClick={onExpandSelected || onExpandAll}
+                className="px-2 py-1 text-xs font-medium bg-ui-bg-interactive text-ui-fg-on-color rounded-md transition-colors"
+              >
+                Expand ({selectedCount})
+              </button>
+              <button
+                type="button"
+                title={`Collapse selected category (${selectedCount} selected)`}
+                onClick={onCollapseSelected || onCollapseAll}
+                className="px-2 py-1 text-xs font-medium bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base rounded-md transition-colors"
+              >
+                Collapse ({selectedCount})
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                title="Expand All Categories"
+                onClick={onExpandAll}
+                className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
+              >
+                Expand All
+              </button>
+              <button
+                type="button"
+                title="Collapse All Subcategories"
+                onClick={onCollapseAll}
+                className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
+              >
+                Collapse All
+              </button>
+            </>
+          )}
 
           <button
             type="button"
@@ -124,6 +159,24 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
           </button>
         </div>
 
+        {/* Box Selection / Marquee mode toggle */}
+        {onToggleBoxSelect && (
+          <div className="flex items-center border-l border-ui-border-base pl-2.5">
+            <button
+              type="button"
+              title={isBoxSelect ? "Box Selection Active (Drag to outline cards). Click to switch to Pan" : "Click to enable Box Select marquee (Outline cards to move together)"}
+              onClick={onToggleBoxSelect}
+              className={`px-2 py-1 text-xs font-medium rounded-md transition-colors ${
+                isBoxSelect
+                  ? "bg-blue-600 text-white shadow-xs"
+                  : "text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle"
+              }`}
+            >
+              ⛶ Box Select
+            </button>
+          </div>
+        )}
+
         <div className="flex items-center gap-1 border-l border-ui-border-base pl-2.5">
           <button
             type="button"

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

@@ -15,7 +15,9 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
   const {
     category,
     tier,
+    siblingRank,
     superscriptRank,
+    branchColor,
     salesChannels,
     isCollapsed,
     hiddenDescendantCount,
@@ -25,6 +27,8 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
     onAddChild,
     onEdit,
     onDetach,
+    onMoveSiblingUp,
+    onMoveSiblingDown,
   } = data
 
   const isTB = direction === "TB"
@@ -42,6 +46,13 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
           ? "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"}`}
+      style={
+        selected && branchColor
+          ? {
+              boxShadow: `0 0 0 2px ${branchColor}, 0 10px 15px -3px rgba(0, 0, 0, 0.1)`,
+            }
+          : undefined
+      }
     >
       <Handle
         type="target"
@@ -49,7 +60,7 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
         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"
       />
 
-      <TierBars tier={tier} />
+      <TierBars tier={tier} color={branchColor} />
 
       <div className="flex flex-1 items-center gap-2.5 px-2.5 py-2 min-w-0 overflow-hidden">
         <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">
@@ -74,20 +85,48 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
         </div>
 
         <div className="flex flex-col min-w-0 flex-1 justify-center">
-          <div className="flex items-center gap-1.5 min-w-0">
+          <div className="flex items-center gap-1 min-w-0">
             <span
-              className="text-xs font-semibold text-ui-fg-base truncate leading-snug"
+              className="text-xs font-semibold text-ui-fg-base truncate leading-snug flex-1 min-w-0"
               title={category.name}
             >
               {category.name}
             </span>
             {superscriptRank && (
-              <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`}
-              >
-                {superscriptRank}
-              </span>
+              <div className="flex items-center gap-0.5 flex-shrink-0">
+                <span
+                  className="text-[11px] font-bold font-mono text-ui-fg-subtle px-1 py-0.5 rounded bg-ui-bg-subtle/80"
+                  title={`Rank #${siblingRank} among siblings (Storefront sort order)`}
+                >
+                  {superscriptRank}
+                </span>
+                {onMoveSiblingUp && (
+                  <button
+                    type="button"
+                    title="Move Up in Storefront Order (↑)"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onMoveSiblingUp(id)
+                    }}
+                    className="w-3.5 h-3.5 flex items-center justify-center text-[10px] font-bold text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded transition-colors"
+                  >
+                    ↑
+                  </button>
+                )}
+                {onMoveSiblingDown && (
+                  <button
+                    type="button"
+                    title="Move Down in Storefront Order (↓)"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onMoveSiblingDown(id)
+                    }}
+                    className="w-3.5 h-3.5 flex items-center justify-center text-[10px] font-bold text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded transition-colors"
+                  >
+                    ↓
+                  </button>
+                )}
+              </div>
             )}
           </div>
 

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

@@ -11,6 +11,7 @@ import {
   Node,
   useReactFlow,
   ReactFlowProvider,
+  SelectionMode,
 } from "@xyflow/react"
 import "@xyflow/react/dist/style.css"
 import { toast, TooltipProvider } from "@medusajs/ui"
@@ -24,11 +25,13 @@ import { CategoryTreeNode, SalesChannelInfo } from "./types"
 import {
   computeTiers,
   computeSiblingRanks,
+  computeBranchColors,
+  moveSiblingRank,
   wouldCreateCycle,
   getVisibleTree,
   computeMoves,
 } from "./lib/tree-state"
-import { computeDagreLayout } from "./lib/layout-engine"
+import { computeTreeLayout } from "./lib/layout-engine"
 import { sdk } from "../../lib/sdk"
 
 const nodeTypes = {
@@ -52,6 +55,8 @@ const CanvasInner: React.FC = () => {
   const [selectedStorefront, setSelectedStorefront] = useState<string>("all")
   const [searchQuery, setSearchQuery] = useState("")
   const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set())
+  const [isBoxSelect, setIsBoxSelect] = useState(false)
+  const [selectedNodeIds, setSelectedNodeIds] = useState<string[]>([])
 
   const [createDrawerOpen, setCreateDrawerOpen] = useState(false)
   const [createParentCategory, setCreateParentCategory] = useState<CategoryTreeNode | null>(null)
@@ -95,6 +100,7 @@ const CanvasInner: React.FC = () => {
 
     const tiers = computeTiers(categories)
     const siblingRanks = computeSiblingRanks(categories)
+    const branchColors = computeBranchColors(categories)
 
     const enriched: CategoryTreeNode[] = categories.map((cat) => {
       const kids = map.get(cat.id) || []
@@ -105,6 +111,7 @@ const CanvasInner: React.FC = () => {
         sibling_rank: rankInfo?.rankNum || 1,
         children_count: kids.length,
         has_children: kids.length > 0,
+        branch_color: branchColors.get(cat.id),
       }
     })
 
@@ -123,6 +130,32 @@ const CanvasInner: React.FC = () => {
     })
   }, [])
 
+  const handleExpandSelected = useCallback(() => {
+    if (selectedNodeIds.length === 0) return
+    setCollapsedIds((prev) => {
+      const next = new Set(prev)
+      selectedNodeIds.forEach((id) => next.delete(id))
+      return next
+    })
+  }, [selectedNodeIds])
+
+  const handleCollapseSelected = useCallback(() => {
+    if (selectedNodeIds.length === 0) return
+    setCollapsedIds((prev) => {
+      const next = new Set(prev)
+      selectedNodeIds.forEach((id) => next.add(id))
+      return next
+    })
+  }, [selectedNodeIds])
+
+  const handleMoveSiblingUp = useCallback((id: string) => {
+    setCategories((prev) => moveSiblingRank(prev, id, "up"))
+  }, [])
+
+  const handleMoveSiblingDown = useCallback((id: string) => {
+    setCategories((prev) => moveSiblingRank(prev, id, "down"))
+  }, [])
+
   const handleAddChild = useCallback((parent: CategoryTreeNode) => {
     setCreateParentCategory(parent)
     setCreateDrawerOpen(true)
@@ -171,6 +204,7 @@ const CanvasInner: React.FC = () => {
           tier: cat.tier,
           siblingRank: rankInfo?.rankNum || 1,
           superscriptRank: rankInfo?.superscript || "¹",
+          branchColor: cat.branch_color,
           salesChannels,
           isCollapsed: collapsedIds.has(cat.id),
           hiddenDescendantCount: cat.children_count,
@@ -180,6 +214,8 @@ const CanvasInner: React.FC = () => {
           onAddChild: handleAddChild,
           onEdit: handleEdit,
           onDetach: handleDetach,
+          onMoveSiblingUp: handleMoveSiblingUp,
+          onMoveSiblingDown: handleMoveSiblingDown,
         },
       }
     })
@@ -192,6 +228,10 @@ const CanvasInner: React.FC = () => {
           source: cat.parent_category_id,
           target: cat.id,
           type: "smoothstep",
+          style: {
+            stroke: cat.branch_color || "#64748b",
+            strokeWidth: 2,
+          },
         })
       }
     }
@@ -203,7 +243,7 @@ const CanvasInner: React.FC = () => {
       childrenMap
     )
 
-    const { nodes: layoutedNodes, edges: layoutedEdges } = computeDagreLayout(
+    const { nodes: layoutedNodes, edges: layoutedEdges } = computeTreeLayout(
       visibleNodes,
       visibleEdges,
       { direction }
@@ -223,6 +263,8 @@ const CanvasInner: React.FC = () => {
     handleAddChild,
     handleEdit,
     handleDetach,
+    handleMoveSiblingUp,
+    handleMoveSiblingDown,
     setNodes,
     setEdges,
   ])
@@ -311,6 +353,11 @@ const CanvasInner: React.FC = () => {
           onExpandAll={handleExpandAll}
           onCollapseAll={handleCollapseAll}
           onFocusRoot={handleFocusRoot}
+          selectedCount={selectedNodeIds.length}
+          onExpandSelected={handleExpandSelected}
+          onCollapseSelected={handleCollapseSelected}
+          isBoxSelect={isBoxSelect}
+          onToggleBoxSelect={() => setIsBoxSelect((prev) => !prev)}
           onZoomIn={() => zoomIn({ duration: 300 })}
           onZoomOut={() => zoomOut({ duration: 300 })}
           onFitView={() => fitView({ padding: 0.25, duration: 400 })}
@@ -332,6 +379,13 @@ const CanvasInner: React.FC = () => {
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         onEdgesDelete={onEdgesDelete}
+        onSelectionChange={useCallback(({ nodes }: { nodes: Node[] }) => {
+          setSelectedNodeIds(nodes.map((n) => n.id))
+        }, [])}
+        selectionMode={SelectionMode.Partial}
+        selectionOnDrag={isBoxSelect}
+        panOnDrag={isBoxSelect ? [1, 2] : true}
+        elementsSelectable={true}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         minZoom={0.2}

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

@@ -25,6 +25,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
   const [handle, setHandle] = useState("")
   const [description, setDescription] = useState("")
   const [imageUrl, setImageUrl] = useState("")
+  const [rank, setRank] = useState(0)
   const [isActive, setIsActive] = useState(true)
   const [isInternal, setIsInternal] = useState(false)
   const [selectedChannels, setSelectedChannels] = useState<string[]>([])
@@ -37,6 +38,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
       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))
@@ -75,6 +77,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
         name: name.trim(),
         handle: handle.trim() || undefined,
         description: description.trim() || undefined,
+        rank: Number(rank) || 0,
         is_active: isActive,
         is_internal: isInternal,
         metadata: updatedMetadata,
@@ -86,6 +89,7 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
         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,
@@ -156,6 +160,56 @@ export const EditCategoryDrawer: React.FC<EditCategoryDrawerProps> = ({
               />
             </div>
 
+            <div className="flex flex-col gap-1.5 p-3 rounded-lg bg-ui-bg-subtle border border-ui-border-base">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="edit-rank" className="text-xs font-semibold">
+                  Storefront Ranking (Sort Order)
+                </Label>
+                <span className="text-[10px] font-mono text-ui-fg-muted">
+                  Controls Storefront 2 & Monfil
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Input
+                  id="edit-rank"
+                  type="number"
+                  size="small"
+                  value={rank}
+                  onChange={(e) => setRank(Number(e.target.value))}
+                  className="w-24"
+                />
+                <div className="flex items-center gap-1">
+                  <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"
+                  >
+                    ↑ Earlier
+                  </button>
+                  <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"
+                  >
+                    ↓ Later
+                  </button>
+                  <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"
+                  >
+                    Top (#0)
+                  </button>
+                </div>
+              </div>
+              <p className="text-[11px] text-ui-fg-muted leading-relaxed">
+                Categories are sorted by rank ASC (0, 1, 2...). Lower numbers appear first in your storefront navigation.
+              </p>
+            </div>
+
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="edit-image" className="text-xs font-semibold">
                 Category Image URL