@burdenoff/fluidgrids-fe-sdk 2026.616.1 → 2026.616.2

package/dist/{chunk-XVHQN2UK.js → chunk-TYOU6RYA.js}

@@ -1,7 +1,7 @@
-import { registerWorkflowNodeTypes, ensureNodeConfigsLoaded, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useNodeExecution, AVAILABLE_NODES, createNodeWithDefaultData, NODES_METADATA, HeaderWithIcon, isNodeConfigsInitialized, useInstalledNodes, getNodeDetail, NODES, NodePropertyPanel, useInstallNode, useRefreshAvailableNodes, NODE_CONFIGS, ConnectionSelector } from './chunk-6FP5I5EG.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Input as Input$1 } from './chunk-NDJSUC4W.js';
+import { registerWorkflowNodeTypes, ensureNodeConfigsLoaded, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, useNodeExecution, AVAILABLE_NODES, createNodeWithDefaultData, NODES_METADATA, isNodeConfigsInitialized, HeaderWithIcon, useInstalledNodes, useInstallNode, useRefreshAvailableNodes, getNodeDetail, NODES, NodePropertyPanel, NODE_CONFIGS, ConnectionSelector } from './chunk-C5VIFUNU.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Input as Input$1 } from './chunk-7VEOUEIN.js';
 import { cn, Badge as Badge$1, Button } from './chunk-Z54K22LP.js';
-import { useFlowStore } from './chunk-CGKBAJMM.js';
+import { useFlowStore } from './chunk-Z2ZEVYDE.js';
 import { useLazyWorkflowDefinition, useCreateWorkflow, useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeactivateWorkflow } from './chunk-4FFPGQD3.js';
 import { NodeSchemaIntrospectionDocument, UpdateWorkflowDefinitionDocument, CreateWorkflowDefinitionDocument, CreateWorkflowVersionDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-FGYVIXQ7.js';
 import { BrowseWorkflowTemplatesDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument } from './chunk-LUGJJ7LL.js';
@@ -15,15 +15,15 @@ import { useShallow, shallow } from 'zustand/shallow';
 import * as React3 from 'react';
 import React3__default, { forwardRef, lazy, memo, createContext, useContext, useMemo, useState, useRef, useEffect, useLayoutEffect, useCallback, Suspense, useDeferredValue } from 'react';
 import { Handle, Position, getBezierPath, MarkerType, ReactFlowProvider, useReactFlow, ReactFlow, Background, useOnSelectionChange, useStore, MiniMap, getSmoothStepPath, EdgeLabelRenderer, getOutgoers, getConnectedEdges, useNodes, useNodesState, useEdgesState, addEdge, Controls, Panel } from '@xyflow/react';
-import { cn as cn$1 } from '@burdenoff/fe-libs/utils';
-import { Icon } from '@iconify/react';
 import { produce } from 'immer';
+import { cn as cn$1 } from '@burdenoff/fe-libs/utils';
 import { Card as Card$1, Badge, CardContent as CardContent$1, Button as Button$1, Input, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Popover, PopoverTrigger, PopoverContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Label, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@burdenoff/fe-libs/ui';
 import { isEmpty } from 'radash';
+import { Icon } from '@iconify/react';
 import { gql } from '@apollo/client';
-import { Sparkles, Star, Download, Eye, History, Loader2, RotateCcw, Maximize2, LayoutGrid, Plus, Trash2, GitBranch, Store, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, List, CheckCircle, XCircle, ArrowUpCircle, PlusCircle, ChevronDown, Type, Code, Hash, Braces, Workflow, ChevronRight, Layers, Check, DollarSign, X, AlertTriangle } from 'lucide-react';
 import { useQuery, useMutation } from '@apollo/client/react';
 import { gql as gql$1 } from '@apollo/client/core';
+import { Sparkles, Star, Download, Eye, History, Loader2, RotateCcw, Maximize2, LayoutGrid, Plus, Trash2, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, PlusCircle, ChevronDown, Type, Code, Hash, List, Braces, Workflow, ChevronRight, Layers, X, AlertTriangle } from 'lucide-react';
 import { toast } from 'sonner';
 import { animate, easeOut } from 'popmotion';
 import { createPortal } from 'react-dom';
@@ -36,28 +36,19 @@ import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsx(ThemeProvider$1, { children });
 }
-function useInsertNode() {
-  const { addNodes, screenToFlowPosition, getNodes, updateNode } = useReactFlow();
-  return useCallback(
-    (type, pos) => {
-      const _pos = pos || screenToFlowPosition({
-        x: window.innerWidth / 2,
-        y: window.innerHeight / 2
-      });
-      getNodes().forEach((node) => {
-        if (node.selected) {
-          updateNode(node.id, { selected: false });
-        }
-      });
-      const newNode = createNodeWithDefaultData(type, {
-        position: _pos,
-        selected: true
-      });
-      addNodes(newNode);
-      return newNode;
-    },
-    [screenToFlowPosition, getNodes, addNodes, updateNode]
-  );
+function useNodeList(nodes) {
+  return useMemo(() => {
+    return nodes.slice().sort((a, b) => {
+      if (a.type === "trigger:api" /* TRIGGER */) return -1;
+      if (b.type === "trigger:api" /* TRIGGER */) return 1;
+      if (a.type === "end" /* END */) return 1;
+      if (b.type === "end" /* END */) return -1;
+      return 0;
+    }).map((n) => ({
+      ...n,
+      detail: getNodeDetail(n.type)
+    }));
+  }, [nodes]);
 }
 function SidebarPanelWrapper({
   children,
@@ -73,244 +64,6 @@ function SidebarPanelWrapper({
     }
   );
 }
-
-// src/builder/contants/symbols.ts
-var NODE_TYPE_DRAG_DATA_FORMAT = "application/flow-builder.node-type";
-function NodePreviewDraggable({
-  icon,
-  title,
-  description,
-  type,
-  setActivePanel,
-  insertNode
-}) {
-  const onDragStart = useCallback((e, type2) => {
-    e.dataTransfer.setData(NODE_TYPE_DRAG_DATA_FORMAT, type2);
-    e.dataTransfer.effectAllowed = "move";
-  }, []);
-  const onClick = useCallback(() => {
-    insertNode(type);
-    setActivePanel("none");
-  }, [insertNode, setActivePanel, type]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex cursor-grab select-none gap-2 border border-card-foreground/10 rounded-xl bg-card p-2.5 shadow-sm transition hover:ring-2 hover:ring-primary/50",
-      onClick,
-      onDragStart: (e) => onDragStart(e, type),
-      draggable: true,
-      "data-vaul-no-drag": true,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx("div", { className: "size-10 flex items-center justify-center border border-card-foreground/10 rounded-xl bg-card", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { icon, className: "size-6 text-card-foreground/80" }) : icon }) }),
-        /* @__PURE__ */ jsxs("div", { className: "ml-1 flex grow flex-col", children: [
-          /* @__PURE__ */ jsx("div", { className: "mt-px text-sm font-medium leading-normal", children: title }),
-          /* @__PURE__ */ jsx("div", { className: "line-clamp-3 mt-1 text-xs text-card-foreground/60 leading-normal", children: description })
-        ] })
-      ]
-    }
-  );
-}
-function AvailableNodesPanel() {
-  const [setActivePanel] = useFlowStore(
-    useShallow((s) => [s.actions.sidebar.setActivePanel])
-  );
-  const [triggersExpanded, setTriggersExpanded] = useState(true);
-  const [builtInExpanded, setBuiltInExpanded] = useState(true);
-  const [storeExpanded, setStoreExpanded] = useState(true);
-  const [nodesLoaded, setNodesLoaded] = useState(isNodeConfigsInitialized());
-  const insertNode = useInsertNode();
-  useEffect(() => {
-    if (!nodesLoaded) {
-      ensureNodeConfigsLoaded().then(() => {
-        setNodesLoaded(true);
-      });
-    }
-  }, [nodesLoaded]);
-  const isTriggerType = (type) => {
-    return type === "trigger" || type === "trigger:api" || type.startsWith("trigger:") || type.startsWith("internal:schedule") || type.startsWith("internal:webhook") || type.startsWith("internal:api") || type.startsWith("internal:form") || type.startsWith("internal:mcp") || type.endsWith("_trigger") || type.endsWith("Trigger") || type.endsWith("-trigger") || type === "integration/channel";
-  };
-  const triggerNodes = AVAILABLE_NODES.filter((node) => {
-    return isTriggerType(node.type) && (node.publishType === "BUILTIN" || node.publishType === void 0 || node.publishType === null);
-  });
-  const builtInNodes = AVAILABLE_NODES.filter((node) => {
-    return !isTriggerType(node.type) && (node.publishType === "BUILTIN" || node.publishType === void 0 || node.publishType === null);
-  });
-  const storeNodes = AVAILABLE_NODES.filter((node) => {
-    return node.publishType === "STORE";
-  });
-  const storeTriggerNodes = storeNodes.filter(
-    (node) => isTriggerType(node.type)
-  );
-  const storeActionNodes = storeNodes.filter(
-    (node) => !isTriggerType(node.type)
-  );
-  return /* @__PURE__ */ jsxs(SidebarPanelWrapper, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col items-center p-4 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "size-12 flex items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:grid", className: "size-6 text-white" }) }),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 text-balance font-medium", children: "Available Nodes" }),
-      /* @__PURE__ */ jsx("div", { className: "mt-1 w-2/3 text-xs text-light-50/40 font-medium leading-normal", children: "Drag and drop nodes to build your workflow" })
-    ] }),
-    !nodesLoaded && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Icon,
-        {
-          icon: "mynaui:spinner",
-          className: "size-6 text-primary animate-spin"
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground/60", children: "Loading nodes..." })
-    ] }) }),
-    nodesLoaded && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 overflow-y-auto max-h-[calc(100vh-200px)] scrollbar-thin scrollbar-track-transparent hover:scrollbar-thumb-gray-300/50 scrollbar-thumb-gray-300/30 scrollbar-w-[3px]", children: [
-      (triggerNodes.length > 0 || storeTriggerNodes.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setTriggersExpanded(!triggersExpanded),
-            className: "flex items-center justify-between px-2 py-1.5 text-sm font-medium text-foreground/80 hover:text-foreground transition-colors",
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: triggersExpanded ? "mynaui:chevron-down" : "mynaui:chevron-right",
-                    className: "size-4"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: "solar:play-bold",
-                    className: "size-3.5 text-primary"
-                  }
-                ),
-                "Triggers"
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/50", children: triggerNodes.length + storeTriggerNodes.length })
-            ]
-          }
-        ),
-        triggersExpanded && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 pl-2", children: [
-          triggerNodes.map((node) => /* @__PURE__ */ jsx(
-            NodePreviewDraggable,
-            {
-              type: node.type,
-              icon: node.icon,
-              title: node.title,
-              description: node.description ?? "",
-              setActivePanel,
-              insertNode
-            },
-            node.type
-          )),
-          storeTriggerNodes.map((node) => /* @__PURE__ */ jsx(
-            NodePreviewDraggable,
-            {
-              type: node.type,
-              icon: node.icon,
-              title: node.title,
-              description: node.description ?? "",
-              setActivePanel,
-              insertNode
-            },
-            node.type
-          ))
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setBuiltInExpanded(!builtInExpanded),
-            className: "flex items-center justify-between px-2 py-1.5 text-sm font-medium text-foreground/80 hover:text-foreground transition-colors",
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: builtInExpanded ? "mynaui:chevron-down" : "mynaui:chevron-right",
-                    className: "size-4"
-                  }
-                ),
-                "Built-in Nodes"
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground/50", children: builtInNodes.length })
-            ]
-          }
-        ),
-        builtInExpanded && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 pl-2", children: builtInNodes.map((node) => /* @__PURE__ */ jsx(
-          NodePreviewDraggable,
-          {
-            type: node.type,
-            icon: node.icon,
-            title: node.title,
-            description: node.description ?? "",
-            setActivePanel,
-            insertNode
-          },
-          node.type
-        )) })
-      ] }),
-      storeActionNodes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setStoreExpanded(!storeExpanded),
-            className: "flex items-center justify-between px-2 py-1.5 text-sm font-medium text-foreground/80 hover:text-foreground transition-colors",
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: storeExpanded ? "mynaui:chevron-down" : "mynaui:chevron-right",
-                    className: "size-4"
-                  }
-                ),
-                "Store Nodes",
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: "mynaui:shopping-bag",
-                    className: "size-3.5 text-primary"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground/50", children: [
-                storeActionNodes.length,
-                " installed"
-              ] })
-            ]
-          }
-        ),
-        storeExpanded && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 pl-2", children: storeActionNodes.map((node) => /* @__PURE__ */ jsx(
-          NodePreviewDraggable,
-          {
-            type: node.type,
-            icon: node.icon,
-            title: node.title,
-            description: node.description ?? "",
-            setActivePanel,
-            insertNode
-          },
-          node.type
-        )) })
-      ] })
-    ] })
-  ] });
-}
-function useNodeList(nodes) {
-  return useMemo(() => {
-    return nodes.slice().sort((a, b) => {
-      if (a.type === "trigger:api" /* TRIGGER */) return -1;
-      if (b.type === "trigger:api" /* TRIGGER */) return 1;
-      if (a.type === "end" /* END */) return 1;
-      if (b.type === "end" /* END */) return -1;
-      return 0;
-    }).map((n) => ({
-      ...n,
-      detail: getNodeDetail(n.type)
-    }));
-  }, [nodes]);
-}
 function SidebarPanelHeading({
   children,
   className,
@@ -1309,37 +1062,51 @@ function NodePropertiesPanel() {
   ] });
 }
 
-// src/builder/components/flow-builder/components/blocks/sidebar/constants/panels.tsx
-var PANEL_COMPONENTS = {
-  "available-nodes": AvailableNodesPanel,
-  "node-properties": NodePropertiesPanel,
-  none: () => null
-};
-function SwitchSidebarPanel({ active }) {
-  const PanelComponent = PANEL_COMPONENTS[active];
-  return PanelComponent ? /* @__PURE__ */ jsx(PanelComponent, {}) : null;
-}
-function SidebarButtonItem({
-  children,
-  className,
-  active,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      size: "icon",
-      type: "button",
-      variant: active ? "default" : "ghost",
-      className: cn$1(
-        "size-8 flex items-center justify-center",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
+// src/builder/components/flow-builder/components/blocks/sidebar/panels/store-browse/store-categories.ts
+var STORE_CATEGORIES = [
+  {
+    key: "ai",
+    label: "AI & Automation",
+    description: "AI models, agents, and intelligent automation",
+    icon: "mynaui:brain"
+  },
+  {
+    key: "integration",
+    label: "Action in an App",
+    description: "Connect with apps like Slack, Notion, Google Sheets",
+    icon: "mynaui:puzzle"
+  },
+  {
+    key: "data",
+    label: "Data & Transform",
+    description: "Manipulate, filter, or convert data",
+    icon: "mynaui:database"
+  },
+  {
+    key: "flow",
+    label: "Flow & Logic",
+    description: "Branch, merge, or loop the flow",
+    icon: "mynaui:git-branch"
+  },
+  {
+    key: "core",
+    label: "Core",
+    description: "HTTP requests, code, webhooks, and more",
+    icon: "mynaui:cog"
+  },
+  {
+    key: "communication",
+    label: "Communication",
+    description: "Email, messaging, and notifications",
+    icon: "mynaui:message-dots"
+  },
+  {
+    key: "trigger",
+    label: "Triggers",
+    description: "Start your workflow automatically",
+    icon: "mynaui:bolt"
+  }
+];
 function useStoreNodes(options = {}) {
   const client = useGlobalStoreClient();
   const context = useContext(FluidGridsContext);
@@ -1720,159 +1487,318 @@ gql$1`
     }
   }
 `;
-function TabButton({
-  icon: Icon19,
-  label,
-  count: count2,
-  active,
+
+// src/builder/contants/symbols.ts
+var NODE_TYPE_DRAG_DATA_FORMAT = "application/flow-builder.node-type";
+function StoreNodeListItem({
+  name,
+  description,
+  icon,
+  isInstalled,
+  hasUpdate,
+  nodeType,
+  isDraggable,
   onClick
 }) {
+  const handleDragStart = useCallback(
+    (e) => {
+      if (!isDraggable || !nodeType) return;
+      e.dataTransfer.setData(NODE_TYPE_DRAG_DATA_FORMAT, nodeType);
+      e.dataTransfer.effectAllowed = "move";
+    },
+    [isDraggable, nodeType]
+  );
   return /* @__PURE__ */ jsxs(
-    Button,
+    "button",
     {
-      variant: "ghost",
-      size: "sm",
-      className: cn(
-        "w-full justify-start gap-2 px-3",
-        active && "bg-accent text-accent-foreground"
-      ),
       onClick,
+      draggable: isDraggable && !!nodeType,
+      onDragStart: handleDragStart,
+      title: isDraggable ? `${name} \u2014 drag to add to canvas` : name,
+      className: "w-full flex items-center gap-3 px-2 py-2.5 rounded-md hover:bg-muted/60 transition-colors text-left group",
+      style: isDraggable ? { cursor: "grab" } : void 0,
       children: [
-        /* @__PURE__ */ jsx(Icon19, { className: "size-4 shrink-0" }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left text-sm", children: label }),
-        count2 !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: count2 })
-      ]
-    }
-  );
-}
-function StoreNodesSidebar({
-  activeTab,
-  onTabChange,
-  searchTerm,
-  onSearchChange
-}) {
-  const { totalCount: installedCount } = useInstalledNodes();
-  return /* @__PURE__ */ jsxs("div", { className: "w-64 shrink-0 border-r bg-muted/30 p-4 space-y-3 overflow-y-auto", children: [
-    /* @__PURE__ */ jsx(
-      Input$1,
-      {
-        placeholder: "Search nodes...",
-        value: searchTerm,
-        onChange: (e) => onSearchChange(e.target.value),
-        className: "h-9"
-      }
-    ),
-    /* @__PURE__ */ jsxs("nav", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx(
-        TabButton,
-        {
-          icon: List,
-          label: "All",
-          active: activeTab === "all",
-          onClick: () => onTabChange("all")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TabButton,
-        {
-          icon: CheckCircle,
-          label: "Installed",
-          count: installedCount,
-          active: activeTab === "installed",
-          onClick: () => onTabChange("installed")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TabButton,
-        {
-          icon: AlertCircle,
-          label: "In Workflow",
-          active: activeTab === "in-workflow",
-          onClick: () => onTabChange("in-workflow")
-        }
-      ),
+        /* @__PURE__ */ jsx("div", { className: "size-9 shrink-0 rounded-lg bg-muted flex items-center justify-center overflow-hidden", children: icon ? /* @__PURE__ */ jsx("img", { src: icon, alt: name, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-muted-foreground", children: name.charAt(0).toUpperCase() }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors truncate", children: name }),
+            hasUpdate && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold",
+                style: {
+                  background: "var(--color-status-warning-bgSubtle)",
+                  color: "var(--color-status-warning-text)"
+                },
+                children: "Update"
+              }
+            ),
+            isInstalled && !hasUpdate && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "shrink-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-semibold",
+                style: {
+                  background: "var(--color-status-success-bgSubtle)",
+                  color: "var(--color-status-success-text)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "size-1.5 rounded-full inline-block",
+                      style: { background: "var(--color-status-success-bg)" }
+                    }
+                  ),
+                  "Installed"
+                ]
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate mt-0.5 leading-snug", children: description })
+        ] }),
+        isDraggable ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mynaui:drag-dots-vertical",
+            className: "size-4 shrink-0 text-foreground/40 group-hover:text-primary transition-colors"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mynaui:chevron-right",
+            className: "size-4 shrink-0 text-foreground/40"
+          }
+        )
+      ]
+    }
+  );
+}
+function StoreCategoryList({
+  searchTerm,
+  onSearchChange,
+  onSelectCategory,
+  onSelectNode
+}) {
+  const isSearching = searchTerm.trim().length > 0;
+  const { products, loading, hasMore, fetchMore } = useStoreNodes({
+    filter: {
+      type: "NODE",
+      compatibleWith: "fluidgrids",
+      search: isSearching ? searchTerm.trim() : void 0
+    }
+  });
+  const { installedAppIds, installationsMap } = useInstalledNodes();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-2 shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(
-        TabButton,
+        Icon,
         {
-          icon: XCircle,
-          label: "Missing",
-          active: activeTab === "missing",
-          onClick: () => onTabChange("missing")
+          icon: "mynaui:search",
+          className: "absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none"
         }
       ),
       /* @__PURE__ */ jsx(
-        TabButton,
+        Input$1,
+        {
+          value: searchTerm,
+          onChange: (e) => onSearchChange(e.target.value),
+          placeholder: "Search nodes...",
+          className: "pl-8 text-sm h-9"
+        }
+      ),
+      searchTerm && /* @__PURE__ */ jsx(
+        "button",
         {
-          icon: ArrowUpCircle,
-          label: "Update Available",
-          active: activeTab === "update-available",
-          onClick: () => onTabChange("update-available")
+          onClick: () => onSearchChange(""),
+          className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:x", className: "size-3.5" })
         }
       )
-    ] })
+    ] }) }),
+    isSearching ? (
+      /* Search results */
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-2 pb-2", children: loading && products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-10", children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: "mynaui:spinner",
+          className: "size-5 text-primary animate-spin"
+        }
+      ) }) : products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-10 px-4", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "No nodes found for \u201C",
+        searchTerm,
+        "\u201D"
+      ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("p", { className: "px-2 py-1.5 text-xs text-muted-foreground font-medium", children: [
+          products.length,
+          " result",
+          products.length !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: products.map((node) => {
+          const installation = installationsMap.get(node.id);
+          const isInstalled = installedAppIds.has(node.id);
+          const hasUpdate = isInstalled && !!installation?.installedVersion && !!node.manifestVersion && installation.installedVersion !== node.manifestVersion;
+          const manifestNodeType = node.manifest?.nodeType;
+          const nodeType = manifestNodeType ?? (isInstalled ? `store/${node.slug}` : void 0);
+          const isDraggable = !!nodeType && (isInstalled || AVAILABLE_NODES.some((n) => n.type === nodeType));
+          return /* @__PURE__ */ jsx(
+            StoreNodeListItem,
+            {
+              name: node.name,
+              description: node.description,
+              icon: node.icon,
+              isInstalled,
+              hasUpdate,
+              nodeType,
+              isDraggable,
+              onClick: () => onSelectNode(node)
+            },
+            node.id
+          );
+        }) }),
+        hasMore && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: fetchMore,
+            className: "w-full mt-2 py-2 text-xs text-primary hover:text-primary/80 font-medium transition-colors",
+            children: "Load more"
+          }
+        )
+      ] }) })
+    ) : (
+      /* Category list */
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-2 pb-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 pt-1", children: STORE_CATEGORIES.map((cat) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onSelectCategory(cat),
+          className: "w-full flex items-center gap-3 px-2 py-3 rounded-md hover:bg-muted/60 transition-colors text-left group",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "size-9 shrink-0 rounded-lg bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { icon: cat.icon, className: "size-5 text-primary" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: cat.label }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate mt-0.5", children: cat.description })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mynaui:chevron-right",
+                className: "size-4 shrink-0 text-foreground/40"
+              }
+            )
+          ]
+        },
+        cat.key
+      )) }) })
+    )
   ] });
 }
-var Card = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200 ease-out hover:shadow-md",
-        className
-      ),
-      ...props
-    }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("flex flex-col space-y-1.5 p-6", className),
-      ...props
-    }
-  )
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    ref,
-    className: cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-CardTitle.displayName = "CardTitle";
-var CardDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var CardContent = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
-);
-CardContent.displayName = "CardContent";
-var CardFooter = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("flex items-center p-6 pt-0", className),
-      ...props
+function StoreCategoryNodes({
+  category,
+  onBack,
+  onSelectNode
+}) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const { products, loading, hasMore, fetchMore } = useStoreNodes({
+    filter: {
+      type: "NODE",
+      compatibleWith: "fluidgrids",
+      category: category.key || void 0,
+      search: searchTerm.trim() || void 0
     }
-  )
-);
-CardFooter.displayName = "CardFooter";
+  });
+  const { installedAppIds, installationsMap } = useInstalledNodes();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-3 pt-3 pb-2 shrink-0", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onBack,
+          className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground mb-3 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "mynaui:chevron-left", className: "size-3.5" }),
+            "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 mb-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 rounded-lg bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { icon: category.icon, className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground leading-tight", children: category.label }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: category.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mynaui:search",
+            className: "absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            placeholder: `Search in ${category.label}...`,
+            className: "pl-8 text-sm h-9"
+          }
+        ),
+        searchTerm && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setSearchTerm(""),
+            className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+            children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:x", className: "size-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-2 pb-2", children: loading && products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-10", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: "mynaui:spinner",
+        className: "size-5 text-primary animate-spin"
+      }
+    ) }) : products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-10 px-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: searchTerm ? `No nodes found for "${searchTerm}"` : "No nodes in this category yet" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs("p", { className: "px-2 py-1.5 text-xs text-muted-foreground font-medium", children: [
+        products.length,
+        " node",
+        products.length !== 1 ? "s" : "",
+        searchTerm ? ` matching "${searchTerm}"` : ""
+      ] }),
+      products.map((node) => {
+        const installation = installationsMap.get(node.id);
+        const isInstalled = installedAppIds.has(node.id);
+        const hasUpdate = isInstalled && !!installation?.installedVersion && !!node.manifestVersion && installation.installedVersion !== node.manifestVersion;
+        const manifestNodeType = node.manifest?.nodeType;
+        const nodeType = manifestNodeType ?? (isInstalled ? `store/${node.slug}` : void 0);
+        const isDraggable = !!nodeType && (isInstalled || AVAILABLE_NODES.some((n) => n.type === nodeType));
+        return /* @__PURE__ */ jsx(
+          StoreNodeListItem,
+          {
+            name: node.name,
+            description: node.description,
+            icon: node.icon,
+            isInstalled,
+            hasUpdate,
+            nodeType,
+            isDraggable,
+            onClick: () => onSelectNode(node)
+          },
+          node.id
+        );
+      }),
+      hasMore && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: fetchMore,
+          className: "w-full mt-2 py-2 text-xs text-primary hover:text-primary/80 font-medium transition-colors",
+          children: "Load more"
+        }
+      )
+    ] }) })
+  ] });
+}
 var UninstallNodeDialog = ({
   nodeName,
   nodeType,
@@ -1964,28 +1890,22 @@ var UninstallNodeDialog = ({
   ] }) });
 };
 function formatDownloads(count2) {
-  if (count2 >= 1e6) {
-    return `${(count2 / 1e6).toFixed(1)}M`;
-  }
-  if (count2 >= 1e3) {
-    return `${(count2 / 1e3).toFixed(1)}k`;
-  }
+  if (count2 >= 1e6) return `${(count2 / 1e6).toFixed(1)}M`;
+  if (count2 >= 1e3) return `${(count2 / 1e3).toFixed(1)}k`;
   return count2.toString();
 }
-function StoreNodeCard({
-  node,
-  isInstalled,
-  installedVersion,
-  installationId,
-  onClick
-}) {
+function StoreNodeDetail({ node, onBack }) {
   const { installNode, installing } = useInstallNode();
   const { updateNode, updating } = useUpdateNode();
   const { uninstallNode, loading: uninstalling } = useUninstallNode();
-  const { checkNodeUsage} = useNodeUsageInWorkflows();
+  const { checkNodeUsage } = useNodeUsageInWorkflows();
   const { removeNodeFromWorkflows } = useRemoveNodeFromWorkflows();
   const { createOrder, creating: creatingOrder } = useCreateOrder();
-  const { refetch: refetchInstalledNodes } = useInstalledNodes();
+  const {
+    installedAppIds,
+    installationsMap,
+    refetch: refetchInstalledNodes
+  } = useInstalledNodes();
   const { refreshAvailableNodes } = useRefreshAvailableNodes();
   const [showUninstallDialog, setShowUninstallDialog] = useState(false);
   const [checkingNodeUsage, setCheckingNodeUsage] = useState(false);
@@ -1993,490 +1913,474 @@ function StoreNodeCard({
   const [nodeUsage, setNodeUsage] = useState({ isUsed: false, workflows: [] });
   const context = useContext(FluidGridsContext);
   const workspaceId = context?.workspaceId ?? getFluidGridsConfig().workspaceId;
-  context?.organizationId;
+  const isInstalled = installedAppIds.has(node.id);
+  const installation = installationsMap.get(node.id);
+  const installedVersion = installation?.installedVersion;
+  const installationId = installation?.installationId;
   const latestVersion = node.manifestVersion;
-  const hasUpdate = isInstalled && installedVersion && latestVersion && installedVersion !== latestVersion;
-  const handleInstall = async (e) => {
-    e.stopPropagation();
+  const hasUpdate = isInstalled && !!installedVersion && !!latestVersion && installedVersion !== latestVersion;
+  const isFree = node.pricingModel === "FREE";
+  const isPurchased = node.isPurchased === true;
+  const canInstall = isFree || isPurchased;
+  const isInstalling = installing === node.id;
+  const isUpdating = updating === node.id;
+  const handleInstall = async () => {
     const result = await installNode(node);
     if (result.success) {
-      toast.success("Node installed successfully!", {
+      toast.success("Node installed!", {
         description: `${node.name} is now available in your workflow builder.`
       });
-      console.log(
-        "[StoreNodeCard] Refreshing available nodes after install..."
-      );
       await refreshAvailableNodes();
-      console.log("[StoreNodeCard] Refetching installed nodes list...");
       await refetchInstalledNodes();
-      console.log("[StoreNodeCard] Refresh complete!");
     } else {
       toast.error("Installation failed", {
-        description: result.error || "Failed to install node. Please try again."
+        description: result.error || "Please try again."
       });
     }
   };
-  const handleUpdate = async (e) => {
-    e.stopPropagation();
+  const handleUpdate = async () => {
     if (!installationId) {
       toast.error("Cannot update node", {
-        description: "Installation ID not found. Please reinstall the node."
+        description: "Installation ID not found. Please reinstall."
       });
       return;
     }
     const result = await updateNode(node, installationId);
     if (result.success) {
-      toast.success("Node updated successfully!", {
-        description: `${node.name} has been updated to v${latestVersion}.`
+      toast.success("Node updated!", {
+        description: `${node.name} updated to v${latestVersion}.`
       });
-      console.log("[StoreNodeCard] Refreshing available nodes after update...");
       await refreshAvailableNodes();
-      console.log("[StoreNodeCard] Refetching installed nodes list...");
       await refetchInstalledNodes();
-      console.log("[StoreNodeCard] Refresh complete!");
     } else {
       toast.error("Update failed", {
-        description: result.error || "Failed to update node. Please try again."
-      });
-    }
-  };
-  const handlePurchase = async (e) => {
-    e.stopPropagation();
-    try {
-      toast.info("Creating order", {
-        description: `Preparing checkout for ${node.name}...`
-      });
-      const unitPrice = node.price || 0;
-      const quantity = 1;
-      const subtotal = unitPrice * quantity;
-      const lineItem = {
-        productId: node.id,
-        name: node.name,
-        // Required: product name at time of purchase
-        quantity,
-        unitPrice,
-        // Required: unit price for one item
-        subtotal,
-        // Required: subtotal (unitPrice * quantity)
-        itemType: "DIGITAL",
-        // Optional: type of item
-        pricingModel: node.pricingModel || "PAID_ONETIME",
-        // Optional: pricing model
-        version: node.manifestVersion || void 0
-        // Optional: product version
-      };
-      const orderInput = {
-        total: subtotal,
-        lineItems: [lineItem],
-        billingAccountId: ""
-        // Will be set on billing page
-      };
-      const result = await createOrder(orderInput);
-      if (result.success && result.order?.id) {
-        console.log("[StoreNodeCard] Order created:", result.order.id);
-        const checkoutUrl = `/billing/checkout/store/${result.order.id}`;
-        console.log("[StoreNodeCard] Navigating to checkout:", checkoutUrl);
-        window.location.href = checkoutUrl;
-      } else {
-        throw new Error(result.error || "Failed to create order");
-      }
-    } catch (error) {
-      console.error("[StoreNodeCard] Purchase flow error:", error);
-      toast.error("Failed to start checkout", {
-        description: error instanceof Error ? error.message : "Please try again."
+        description: result.error || "Please try again."
       });
     }
   };
-  const handleUninstallClick = async (e) => {
-    e.stopPropagation();
-    if (!installationId) {
-      toast.error("Cannot uninstall node", {
-        description: "Installation ID not found."
-      });
-      return;
-    }
-    if (!workspaceId) {
-      toast.error("Workspace not found", {
-        description: "Unable to check node usage without workspace context."
-      });
-      return;
-    }
+  const handleUninstallClick = async () => {
+    if (!installationId || !workspaceId) return;
     try {
       setCheckingNodeUsage(true);
-      const nodeVersion = installedVersion || latestVersion || "1.0.0";
       const usage = await checkNodeUsage(
         workspaceId,
         node.name,
-        // Use node name as identifier
-        nodeVersion
+        installedVersion || latestVersion || "1.0.0"
       );
       setNodeUsage(usage);
       setShowUninstallDialog(true);
-    } catch (error) {
-      console.error("[StoreNodeCard] Failed to check node usage:", error);
-      toast.error("Failed to check node usage", {
-        description: "Please try again."
-      });
+    } catch {
+      toast.error("Failed to check node usage. Please try again.");
     } finally {
       setCheckingNodeUsage(false);
     }
   };
   const handleConfirmUninstall = async () => {
-    if (!workspaceId) {
-      toast.error("Workspace not found", {
-        description: "Unable to uninstall without workspace context."
-      });
-      return;
-    }
+    if (!workspaceId) return;
     try {
       if (nodeUsage.isUsed && nodeUsage.workflows.length > 0) {
         setRemovingFromWorkflows(true);
-        const nodeVersion = installedVersion || latestVersion || "1.0.0";
-        const workflowIds = nodeUsage.workflows.map((wf) => wf.id);
-        console.log(
-          `[StoreNodeCard] Removing node ${node.name} (v${nodeVersion}) from ${workflowIds.length} workflows...`
-        );
         const removeResult = await removeNodeFromWorkflows(
           node.name,
-          nodeVersion,
-          workflowIds
+          installedVersion || latestVersion || "1.0.0",
+          nodeUsage.workflows.map((wf) => wf.id)
         );
         if (!removeResult.success) {
           throw new Error("Failed to remove node from workflows");
         }
-        console.log(
-          `[StoreNodeCard] Node removed from ${removeResult.removedFromWorkflows.length} workflows, ${removeResult.deactivatedWorkflows.length} workflows deactivated`
-        );
-        toast.info("Node removed from workflows", {
-          description: `Removed from ${removeResult.removedFromWorkflows.length} workflow(s) and deactivated ${removeResult.deactivatedWorkflows.length} workflow(s).`
-        });
         setRemovingFromWorkflows(false);
       }
-      const result = await uninstallNode({
-        productId: node.id,
-        workspaceId
-      });
+      const result = await uninstallNode({ productId: node.id, workspaceId });
       if (result) {
-        toast.success("Node uninstalled successfully!", {
+        toast.success("Node uninstalled", {
           description: `${node.name} has been removed from your workspace.`
         });
         setShowUninstallDialog(false);
-        console.log(
-          "[StoreNodeCard] Refreshing available nodes after uninstall..."
-        );
         await refreshAvailableNodes();
-        console.log("[StoreNodeCard] Refetching installed nodes list...");
         await refetchInstalledNodes();
-        console.log("[StoreNodeCard] Refresh complete!");
       } else {
         throw new Error("Uninstall failed");
       }
-    } catch (error) {
+    } catch (err) {
       toast.error("Uninstall failed", {
-        description: error instanceof Error ? error.message : "Failed to uninstall node."
+        description: err instanceof Error ? err.message : "Please try again."
       });
     } finally {
       setRemovingFromWorkflows(false);
     }
   };
-  const handleCancelUninstall = () => {
-    setShowUninstallDialog(false);
+  const handlePurchase = async () => {
+    try {
+      toast.info("Creating order", {
+        description: `Preparing checkout for ${node.name}...`
+      });
+      const unitPrice = node.price || 0;
+      const result = await createOrder({
+        total: unitPrice,
+        lineItems: [
+          {
+            productId: node.id,
+            name: node.name,
+            quantity: 1,
+            unitPrice,
+            subtotal: unitPrice,
+            itemType: "DIGITAL",
+            pricingModel: node.pricingModel || "PAID_ONETIME",
+            version: node.manifestVersion || void 0
+          }
+        ],
+        billingAccountId: ""
+      });
+      if (result.success && result.order?.id) {
+        window.location.href = `/billing/checkout/store/${result.order.id}`;
+      } else {
+        throw new Error(result.error || "Failed to create order");
+      }
+    } catch (err) {
+      toast.error("Failed to start checkout", {
+        description: err instanceof Error ? err.message : "Please try again."
+      });
+    }
   };
-  const isFree = node.pricingModel === "FREE";
-  const isPurchased = node.isPurchased === true;
-  const isInstalling = installing === node.id;
-  const isUpdating = updating === node.id;
-  const canInstall = isFree || isPurchased;
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      className: cn(
-        "p-4 hover:shadow-lg transition-all cursor-pointer group",
-        "border-2 hover:border-primary/50"
-      ),
-      onClick,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center space-y-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-20 h-20 rounded-lg bg-muted flex items-center justify-center overflow-hidden", children: node.icon ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: node.icon,
-              alt: node.name,
-              className: "w-full h-full object-cover"
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-muted-foreground", children: node.name.charAt(0).toUpperCase() }) }),
-          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm truncate w-full group-hover:text-primary transition-colors", children: node.name }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground truncate w-full", children: [
-            "by ",
-            node.authorName || node.publisher?.name || "Unknown"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
-            /* @__PURE__ */ jsx(Star, { className: "size-3 fill-yellow-400 text-yellow-400" }),
-            /* @__PURE__ */ jsx("span", { children: node.rating?.toFixed(1) || "N/A" }),
-            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-              "(",
-              node.reviewCount || 0,
-              ")"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-            formatDownloads(node.downloads || 0),
-            " downloads"
-          ] }),
-          node.featured && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: "Featured" }),
-          /* @__PURE__ */ jsxs("div", { className: "w-full pt-2 space-y-2", children: [
-            hasUpdate && /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "sm",
-                variant: "outline",
-                className: "w-full",
-                onClick: handleUpdate,
-                disabled: isUpdating,
-                children: isUpdating ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Loader2, { className: "size-3 mr-1 animate-spin" }),
-                  "Updating..."
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(RefreshCw, { className: "size-3 mr-1" }),
-                  "Update to v",
-                  latestVersion
-                ] })
-              }
-            ),
-            isInstalled ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(Badge$1, { variant: "secondary", className: "w-full justify-center py-2", children: [
-                /* @__PURE__ */ jsx(Check, { className: "size-3 mr-1" }),
-                "Installed ",
-                installedVersion && `(v${installedVersion})`
-              ] }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-1 shrink-0", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onBack,
+        className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "mynaui:chevron-left", className: "size-3.5" }),
+          "Back"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-3 pb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center py-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-16 rounded-xl bg-muted flex items-center justify-center overflow-hidden mb-3", children: node.icon ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: node.icon,
+            alt: node.name,
+            className: "w-full h-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold text-muted-foreground", children: node.name.charAt(0).toUpperCase() }) }),
+        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground leading-tight", children: node.name }),
+        (node.authorName || node.publisher?.name) && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1 flex items-center gap-1", children: [
+          "by ",
+          node.authorName || node.publisher?.name,
+          node.publisher?.isVerified && /* @__PURE__ */ jsx(BadgeCheck, { className: "size-3.5 text-primary" })
+        ] })
+      ] }),
+      (isInstalled || hasUpdate || node.featured) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 mb-4 flex-wrap", children: [
+        hasUpdate && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold",
+            style: {
+              background: "var(--color-status-warning-bgSubtle)",
+              color: "var(--color-status-warning-text)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "mynaui:refresh", className: "size-3" }),
+              "Update available \u2014 v",
+              latestVersion
+            ]
+          }
+        ),
+        isInstalled && !hasUpdate && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold",
+            style: {
+              background: "var(--color-status-success-bgSubtle)",
+              color: "var(--color-status-success-text)"
+            },
+            children: [
               /* @__PURE__ */ jsx(
-                Button,
+                "span",
                 {
-                  size: "sm",
-                  variant: "destructive",
-                  className: "w-full",
-                  onClick: handleUninstallClick,
-                  disabled: uninstalling || checkingNodeUsage || removingFromWorkflows,
-                  children: uninstalling ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(Loader2, { className: "size-3 mr-1 animate-spin" }),
-                    "Uninstalling..."
-                  ] }) : checkingNodeUsage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(Loader2, { className: "size-3 mr-1 animate-spin" }),
-                    "Checking..."
-                  ] }) : removingFromWorkflows ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(Loader2, { className: "size-3 mr-1 animate-spin" }),
-                    "Removing..."
-                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(Trash2, { className: "size-3 mr-1" }),
-                    "Uninstall"
-                  ] })
+                  className: "size-1.5 rounded-full",
+                  style: { background: "var(--color-status-success-bg)" }
                 }
-              )
-            ] }) : canInstall ? /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "sm",
-                className: "w-full",
-                onClick: handleInstall,
-                disabled: isInstalling,
-                children: isInstalling ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Loader2, { className: "size-3 mr-1 animate-spin" }),
-                  "Installing..."
-                ] }) : "Install"
-              }
-            ) : /* @__PURE__ */ jsx(
-              Badge$1,
-              {
-                className: "w-full justify-center py-2 cursor-pointer hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-                onClick: handlePurchase,
-                children: creatingOrder ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Loader2, { className: "size-3 mr-1 animate-spin" }),
-                  "Creating order..."
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(DollarSign, { className: "size-3 mr-1" }),
-                  "$",
-                  node.price?.toFixed(2) || "0.00"
-                ] })
-              }
-            )
+              ),
+              "Installed",
+              installedVersion ? ` v${installedVersion}` : ""
+            ]
+          }
+        ),
+        node.featured && !isInstalled && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary", children: "Featured" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 text-xs text-muted-foreground mb-4", children: [
+        node.rating != null && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Star, { className: "size-3 fill-yellow-400 text-yellow-400" }),
+          node.rating.toFixed(1),
+          /* @__PURE__ */ jsxs("span", { className: "opacity-60", children: [
+            "(",
+            node.reviewCount ?? 0,
+            ")"
           ] })
         ] }),
-        showUninstallDialog && /* @__PURE__ */ jsx(
-          UninstallNodeDialog,
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Download, { className: "size-3" }),
+          formatDownloads(node.downloads ?? 0)
+        ] }),
+        latestVersion && /* @__PURE__ */ jsxs("span", { className: "opacity-80", children: [
+          "v",
+          latestVersion
+        ] })
+      ] }),
+      node.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/80 leading-relaxed mb-4", children: node.description }),
+      node.publisher && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-2.5 rounded-lg bg-muted/50 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-muted flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-muted-foreground", children: node.publisher.name.charAt(0) }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground font-medium flex-1 min-w-0 truncate", children: node.publisher.name }),
+        node.publisher.isVerified && /* @__PURE__ */ jsx(BadgeCheck, { className: "size-4 text-primary shrink-0" })
+      ] }),
+      node.license && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mb-4", children: [
+        "License:",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/70", children: node.license })
+      ] }),
+      node.compatibleProducts && node.compatibleProducts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-1.5", children: "Compatible with" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: node.compatibleProducts.map((p) => /* @__PURE__ */ jsx(
+          "span",
           {
-            nodeName: node.name,
-            nodeType: node.name,
-            isUsed: nodeUsage.isUsed,
-            workflows: nodeUsage.workflows,
-            loading: uninstalling || removingFromWorkflows,
-            onConfirm: handleConfirmUninstall,
-            onCancel: handleCancelUninstall
-          }
-        )
-      ]
-    }
-  );
-}
-function StoreNodesGrid({
-  filterTab,
-  searchTerm,
-  onNodeClick
-}) {
-  const { products, loading, hasMore, fetchMore, error } = useStoreNodes({
-    filter: {
-      search: searchTerm || void 0,
-      type: "NODE",
-      compatibleWith: "fluidgrids"
-    },
-    sortBy: "DOWNLOADS",
-    limit: 20
-  });
-  const { installedAppIds, installationsMap } = useInstalledNodes();
-  console.log("[StoreNodesGrid] Debug:", {
-    products,
-    productsLength: products?.length,
-    loading,
-    error,
-    filterTab,
-    searchTerm
-  });
-  const filteredProducts = useMemo(() => {
-    if (!products) return [];
-    switch (filterTab) {
-      case "installed":
-        return products.filter((p) => installedAppIds.has(p.id));
-      case "all":
-      default:
-        return products;
-    }
-  }, [products, filterTab, installedAppIds]);
-  if (loading && filteredProducts.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center p-8 text-center", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-destructive", children: "Error loading nodes" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: error.message || "Failed to fetch nodes from store" }),
-      /* @__PURE__ */ jsx(
+            className: "px-2 py-0.5 rounded-full text-xs bg-muted text-muted-foreground",
+            children: p
+          },
+          p
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-3 pb-3 pt-2 border-t border-border/50 flex flex-col gap-2", children: [
+      hasUpdate && /* @__PURE__ */ jsx(
         Button,
         {
+          size: "sm",
           variant: "outline",
-          className: "mt-4",
-          onClick: () => window.location.reload(),
-          children: "Retry"
+          className: "w-full",
+          onClick: handleUpdate,
+          disabled: isUpdating,
+          children: isUpdating ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 mr-1.5 animate-spin" }),
+            "Updating..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5 mr-1.5" }),
+            "Update to v",
+            latestVersion
+          ] })
         }
-      )
-    ] });
-  }
-  if (!loading && filteredProducts.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center p-8 text-center space-y-4", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-muted-foreground", children: "No nodes found" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Try adjusting your search or filters" }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-4 p-4 bg-muted rounded-lg text-left text-xs font-mono max-w-md", children: [
-        /* @__PURE__ */ jsx("div", { className: "font-bold mb-2", children: "Debug Info:" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Total products: ",
-          products?.length || 0
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Filter tab: ",
-          filterTab
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          'Search term: "',
-          searchTerm,
-          '"'
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Loading: ",
-          loading ? "yes" : "no"
-        ] }),
-        /* @__PURE__ */ jsx("div", { children: "Error: none" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Installed count: ",
-          installedAppIds.size
-        ] })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto bg-background", children: [
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6", children: filteredProducts.map((node) => {
-      const installation = installationsMap.get(node.id);
-      return /* @__PURE__ */ jsx(
-        StoreNodeCard,
+      ),
+      isInstalled ? /* @__PURE__ */ jsx(
+        Button,
         {
-          node,
-          isInstalled: installedAppIds.has(node.id),
-          installedVersion: installation?.installedVersion,
-          installationId: installation?.installationId,
-          onClick: () => onNodeClick(node)
-        },
-        node.id
-      );
-    }) }),
-    hasMore && /* @__PURE__ */ jsx("div", { className: "p-4 flex justify-center", children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: fetchMore, disabled: loading, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "size-4 mr-2 animate-spin" }),
-      "Loading..."
-    ] }) : "Load More" }) })
+          size: "sm",
+          variant: "destructive",
+          className: "w-full",
+          onClick: handleUninstallClick,
+          disabled: uninstalling || checkingNodeUsage || removingFromWorkflows,
+          children: uninstalling || removingFromWorkflows ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 mr-1.5 animate-spin" }),
+            "Uninstalling..."
+          ] }) : checkingNodeUsage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 mr-1.5 animate-spin" }),
+            "Checking usage..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "size-3.5 mr-1.5" }),
+            "Uninstall"
+          ] })
+        }
+      ) : canInstall ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          className: "w-full",
+          onClick: handleInstall,
+          disabled: isInstalling,
+          children: isInstalling ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 mr-1.5 animate-spin" }),
+            "Installing..."
+          ] }) : "Install"
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          className: "w-full",
+          onClick: handlePurchase,
+          disabled: creatingOrder,
+          children: creatingOrder ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 mr-1.5 animate-spin" }),
+            "Creating order..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DollarSign, { className: "size-3.5 mr-1.5" }),
+            "$",
+            node.price?.toFixed(2) ?? "0.00"
+          ] })
+        }
+      )
+    ] }),
+    showUninstallDialog && /* @__PURE__ */ jsx(
+      UninstallNodeDialog,
+      {
+        nodeName: node.name,
+        nodeType: node.name,
+        isUsed: nodeUsage.isUsed,
+        workflows: nodeUsage.workflows,
+        loading: uninstalling || removingFromWorkflows,
+        onConfirm: handleConfirmUninstall,
+        onCancel: () => setShowUninstallDialog(false)
+      }
+    )
   ] });
 }
-function StoreNodesContent() {
-  const [activeTab, setActiveTab] = useState("all");
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedNode, setSelectedNode] = useState(
-    null
-  );
-  const { refetch: refetchStoreNodes } = useStoreNodes({
-    filter: {
-      type: "NODE",
-      compatibleWith: "fluidgrids"
-    }
-  });
-  const { refetch: refetchInstalledNodes } = useInstalledNodes();
+function StoreBrowsePanel() {
+  const [view, setView] = useState({ type: "categories" });
+  const [globalSearch, setGlobalSearch] = useState("");
+  const [, setNodesReady] = useState(isNodeConfigsInitialized);
   useEffect(() => {
-    console.log("[StoreNodesContent] Modal opened, refetching data...");
-    Promise.all([refetchStoreNodes(), refetchInstalledNodes()]).then(() => {
-      console.log("[StoreNodesContent] Data refreshed successfully");
-    }).catch((error) => {
-      console.error("[StoreNodesContent] Failed to refresh data:", error);
+    void ensureNodeConfigsLoaded().then(() => setNodesReady(true));
+  }, []);
+  const openCategory = useCallback((category) => {
+    setView({ type: "category-nodes", category });
+    setGlobalSearch("");
+  }, []);
+  const openNodeDetail = useCallback((node) => {
+    setView((prev) => ({
+      type: "node-detail",
+      node,
+      from: prev.type === "node-detail" ? prev.from : prev
+    }));
+  }, []);
+  const goBack = useCallback(() => {
+    setView((prev) => {
+      if (prev.type === "node-detail") return prev.from;
+      return { type: "categories" };
     });
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-1 overflow-hidden", children: [
-    /* @__PURE__ */ jsx(
-      StoreNodesSidebar,
-      {
-        activeTab,
-        onTabChange: setActiveTab,
-        searchTerm,
-        onSearchChange: setSearchTerm
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      StoreNodesGrid,
-      {
-        filterTab: activeTab,
-        searchTerm,
-        onNodeClick: setSelectedNode
-      }
-    )
+  return /* @__PURE__ */ jsxs(SidebarPanelWrapper, { children: [
+    view.type === "categories" && /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-2 shrink-0 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center rounded-lg bg-primary", children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:store", className: "size-4 text-white" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground leading-tight", children: "Node Store" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Browse & install workflow nodes" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
+      view.type === "categories" && /* @__PURE__ */ jsx(
+        StoreCategoryList,
+        {
+          searchTerm: globalSearch,
+          onSearchChange: setGlobalSearch,
+          onSelectCategory: openCategory,
+          onSelectNode: openNodeDetail
+        }
+      ),
+      view.type === "category-nodes" && /* @__PURE__ */ jsx(
+        StoreCategoryNodes,
+        {
+          category: view.category,
+          onBack: goBack,
+          onSelectNode: openNodeDetail
+        }
+      ),
+      view.type === "node-detail" && /* @__PURE__ */ jsx(StoreNodeDetail, { node: view.node, onBack: goBack })
+    ] })
   ] });
 }
-function StoreNodesModal({ open, onOpenChange }) {
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
+
+// src/builder/components/flow-builder/components/blocks/sidebar/constants/panels.tsx
+var PANEL_COMPONENTS = {
+  "node-properties": NodePropertiesPanel,
+  "store-browse": StoreBrowsePanel,
+  none: () => null
+};
+function SwitchSidebarPanel({ active }) {
+  const PanelComponent = PANEL_COMPONENTS[active];
+  return PanelComponent ? /* @__PURE__ */ jsx(PanelComponent, {}) : null;
+}
+function SidebarButtonItem({
+  children,
+  className,
+  active,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
     {
-      size: "xl",
-      className: "!flex !flex-col !h-[75vh] !max-h-[75vh] min-h-[500px] p-0 gap-0 overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { className: "px-6 pt-6 pb-4 border-b shrink-0", children: [
-          /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl font-semibold", children: "Discover Custom Workflow Nodes" }),
-          /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm", children: "Browse and install community-made nodes, integrations, and extensions for your workflows" })
-        ] }),
-        open && /* @__PURE__ */ jsx(StoreNodesContent, {})
-      ]
+      size: "icon",
+      type: "button",
+      variant: active ? "default" : "ghost",
+      className: cn$1(
+        "size-8 flex items-center justify-center",
+        className
+      ),
+      ...props,
+      children
     }
-  ) });
+  );
 }
+var Card = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200 ease-out hover:shadow-md",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-6", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center p-6 pt-0", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
 function formatNumber(count2) {
   if (count2 >= 1e6) {
     return `${(count2 / 1e6).toFixed(1)}M`;
@@ -2768,7 +2672,7 @@ function TemplatesModal({
   ) });
 }
 var LazyTemplateConfigurationModal = lazy(
-  () => import('./TemplateConfigurationModal-UJAGRE7X.js').then((m) => ({
+  () => import('./TemplateConfigurationModal-FPQR7W4M.js').then((m) => ({
     default: m.TemplateConfigurationModal
   }))
 );
@@ -2776,7 +2680,6 @@ function DesktopSidebarFragment({
   activePanel,
   setActivePanel
 }) {
-  const [storeModalOpen, setStoreModalOpen] = useState(false);
   const [templatesModalOpen, setTemplatesModalOpen] = useState(false);
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [configTemplate, setConfigTemplate] = useState(
@@ -2789,7 +2692,7 @@ function DesktopSidebarFragment({
   const handleUseTemplate = useCallback(
     async (template) => {
       try {
-        const { useImportWorkflowTemplate: useImportWorkflowTemplate2 } = await import('./useImportWorkflowTemplate-RCPS4OTA.js');
+        const { useImportWorkflowTemplate: useImportWorkflowTemplate2 } = await import('./useImportWorkflowTemplate-P62I2ADG.js');
         const { useTemplateDetail: useTemplateDetail2 } = await import('./useTemplateDetail-NK63V3PC.js');
         toast.loading("Loading template...", { id: "template-load" });
         const { getGlobalStoreClient } = await import('./global-client-OW43ZRDR.js');
@@ -3011,18 +2914,6 @@ function DesktopSidebarFragment({
   return /* @__PURE__ */ jsxs("div", { className: "relative  max-w-sm w-fit flex shrink-0 divide-x divide-card-foreground/10", children: [
     activePanel !== "none" && /* @__PURE__ */ jsx("div", { className: "min-w-xs grow bg-card", children: /* @__PURE__ */ jsx(SwitchSidebarPanel, { active: activePanel }) }),
     /* @__PURE__ */ jsx("div", { className: "shrink-0 bg-card p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(
-        SidebarButtonItem,
-        {
-          active: activePanel === "available-nodes",
-          onClick: () => setActivePanel(
-            activePanel === "available-nodes" ? "none" : "available-nodes"
-          ),
-          title: "Available Nodes",
-          children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:grid", className: "size-5" })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "mx-auto h-px w-4 bg-card-foreground/10" }),
       /* @__PURE__ */ jsx(
         SidebarButtonItem,
         {
@@ -3038,10 +2929,12 @@ function DesktopSidebarFragment({
       /* @__PURE__ */ jsx(
         SidebarButtonItem,
         {
-          active: storeModalOpen,
-          onClick: () => setStoreModalOpen(true),
+          active: activePanel === "store-browse",
+          onClick: () => setActivePanel(
+            activePanel === "store-browse" ? "none" : "store-browse"
+          ),
           title: "Browse custom nodes from the store",
-          children: /* @__PURE__ */ jsx(Store, { className: "size-5" })
+          children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:store", className: "size-5" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3054,7 +2947,6 @@ function DesktopSidebarFragment({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx(StoreNodesModal, { open: storeModalOpen, onOpenChange: setStoreModalOpen }),
     /* @__PURE__ */ jsx(
       TemplatesModal,
       {
@@ -9215,6 +9107,29 @@ var useAddNodeOnEdgeDropStore = create()(
     }
   })
 );
+function useInsertNode() {
+  const { addNodes, screenToFlowPosition, getNodes, updateNode } = useReactFlow();
+  return useCallback(
+    (type, pos) => {
+      const _pos = pos || screenToFlowPosition({
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2
+      });
+      getNodes().forEach((node) => {
+        if (node.selected) {
+          updateNode(node.id, { selected: false });
+        }
+      });
+      const newNode = createNodeWithDefaultData(type, {
+        position: _pos,
+        selected: true
+      });
+      addNodes(newNode);
+      return newNode;
+    },
+    [screenToFlowPosition, getNodes, addNodes, updateNode]
+  );
+}
 function useAddNodeOnEdgeDrop() {
   const [
     dropPosition,
@@ -11344,7 +11259,7 @@ function WorkflowItem({
       edges: [],
       nodes: [],
       sidebar: {
-        active: "available-nodes",
+        active: "store-browse",
         panels: {
           nodeProperties: {
             selectedNode: null
@@ -11490,5 +11405,5 @@ function WorkflowBuilder() {
 }
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, TemplateCard, WorkflowBuilder, useWorkflowTemplates };
-//# sourceMappingURL=chunk-XVHQN2UK.js.map
-//# sourceMappingURL=chunk-XVHQN2UK.js.map
+//# sourceMappingURL=chunk-TYOU6RYA.js.map
+//# sourceMappingURL=chunk-TYOU6RYA.js.map