@btst/stack 1.10.0 → 1.11.0

package/dist/packages/ui/src/components/ui-builder/internal/components/add-component-popover.mjs

@@ -8,25 +8,48 @@ import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mj
 import { cn } from '../../../../lib/utils.mjs';
 import LayerRenderer from '../../layer-renderer.mjs';
 import { createComponentLayer } from '../../../../lib/ui-builder/store/layer-utils.mjs';
+import { DraggableNewComponent } from '../dnd/draggable-new-component.mjs';
 
 const fallback = /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-muted rounded border animate-pulse" });
 const previewLayerCache = /* @__PURE__ */ new Map();
+function isValidChildOfParent(componentRegistry, componentType, parentType) {
+  const def = componentRegistry[componentType];
+  if (!def?.childOf) {
+    return true;
+  }
+  if (!parentType) {
+    return false;
+  }
+  return def.childOf.includes(parentType);
+}
+function isChildOnlyComponent(componentRegistry, componentType) {
+  const def = componentRegistry[componentType];
+  return Boolean(def?.childOf);
+}
 function AddComponentsPopover({
   className,
   children,
   addPosition,
   parentLayerId,
   onOpenChange,
+  enableDragToCanvas = false,
   onChange
 }) {
   const [open, setOpen] = React__default.useState(false);
+  const [activeView, setActiveView] = React__default.useState("components");
   const componentRegistry = useEditorStore((state) => state.registry);
+  const blocks = useEditorStore((state) => state.blocks);
+  const findLayerById = useLayerStore((state) => state.findLayerById);
+  const parentLayerType = useMemo(() => {
+    const parentLayer = findLayerById(parentLayerId);
+    return parentLayer?.type;
+  }, [findLayerById, parentLayerId]);
   const groupedOptions = useMemo(() => {
-    const componentOptions = Object.keys(componentRegistry).map((name) => ({
+    const componentOptions = Object.keys(componentRegistry).filter((name) => isValidChildOfParent(componentRegistry, name, parentLayerType)).map((name) => ({
       value: name,
       label: name,
       type: "component",
-      from: componentRegistry[name].from
+      from: componentRegistry[name]?.from
     }));
     return componentOptions.reduce(
       (acc, option) => {
@@ -35,16 +58,34 @@ function AddComponentsPopover({
         if (!acc[group]) {
           acc[group] = [];
         }
-        acc[group].push(option);
+        acc[group]?.push(option);
         return acc;
       },
       {}
     );
-  }, [componentRegistry]);
+  }, [componentRegistry, parentLayerType]);
   const categories = useMemo(() => {
     return Object.keys(groupedOptions);
   }, [groupedOptions]);
+  const groupedBlocks = useMemo(() => {
+    if (!blocks) return {};
+    return Object.values(blocks).reduce(
+      (acc, block) => {
+        if (!acc[block.category]) {
+          acc[block.category] = [];
+        }
+        acc[block.category]?.push(block);
+        return acc;
+      },
+      {}
+    );
+  }, [blocks]);
+  const blockCategories = useMemo(() => {
+    return Object.keys(groupedBlocks);
+  }, [groupedBlocks]);
+  const hasBlocks = blocks && Object.keys(blocks).length > 0;
   const addComponentLayer = useLayerStore((state) => state.addComponentLayer);
+  const addLayerDirect = useLayerStore((state) => state.addLayerDirect);
   const handleSelect = React__default.useCallback(
     (currentValue) => {
       if (onChange) {
@@ -69,6 +110,15 @@ function AddComponentsPopover({
       onChange
     ]
   );
+  const handleBlockSelect = React__default.useCallback(
+    (block) => {
+      const clonedTemplate = cloneLayerWithNewIds(block.template);
+      addLayerDirect(clonedTemplate, parentLayerId, addPosition);
+      setOpen(false);
+      onOpenChange?.(false);
+    },
+    [addLayerDirect, parentLayerId, addPosition, onOpenChange]
+  );
   const handleOpenChange = useCallback(
     (open2) => {
       setOpen(open2);
@@ -76,63 +126,180 @@ function AddComponentsPopover({
     },
     [onOpenChange]
   );
+  const handleDragStart = useCallback(() => {
+    setOpen(false);
+    onOpenChange?.(false);
+  }, [onOpenChange]);
   const defaultTab = categories[0] || "";
+  const defaultBlockCategory = blockCategories[0] || "";
   return /* @__PURE__ */ jsx("div", { className: cn("relative flex justify-center", className), children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[280px] p-0", align: "start", children: categories.length > 0 ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTab, className: "w-full", children: [
-      /* @__PURE__ */ jsx(TabsList, { className: cn(categories.length > 1 ? "h-14 w-full rounded-none border-b flex flex-row overflow-x-scroll justify-start" : "hidden"), children: categories.map((category) => /* @__PURE__ */ jsxs(TabsTrigger, { value: category, className: "flex flex-col justify-start items-start overflow-hidden px-2 py-1 min-w-24 min-h-11 flex-shrink-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm", children: formatCategoryName(category) }),
-        /* @__PURE__ */ jsx("div", { className: "w-full min-h-[12px] text-[8px] leading-[9px] text-left text-muted-foreground text-wrap", children: category })
-      ] }, category)) }),
-      categories.map((category) => /* @__PURE__ */ jsx(TabsContent, { value: category, className: "m-0", children: /* @__PURE__ */ jsxs(Command, { className: "border-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 w-full [&>div:first-child]:w-full", children: /* @__PURE__ */ jsx(
-          CommandInput,
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-[320px] p-0", align: "start", children: [
+      hasBlocks && /* @__PURE__ */ jsxs("div", { className: "flex border-b", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "flex-1 px-4 py-2 text-sm font-medium transition-colors",
+              activeView === "components" ? "bg-background border-b-2 border-primary" : "bg-muted/50 text-muted-foreground hover:text-foreground"
+            ),
+            onClick: () => setActiveView("components"),
+            children: "Components"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
           {
-            placeholder: "Find components",
-            className: "border-0 focus:ring-0 w-full"
+            className: cn(
+              "flex-1 px-4 py-2 text-sm font-medium transition-colors",
+              activeView === "blocks" ? "bg-background border-b-2 border-primary" : "bg-muted/50 text-muted-foreground hover:text-foreground"
+            ),
+            onClick: () => setActiveView("blocks"),
+            children: "Blocks"
           }
-        ) }),
-        /* @__PURE__ */ jsxs(CommandList, { className: "max-h-[250px]", children: [
-          /* @__PURE__ */ jsx(CommandEmpty, { children: "No components found" }),
-          /* @__PURE__ */ jsx(CommandGroup, { children: groupedOptions[category].map((component) => /* @__PURE__ */ jsx(
-            GroupedComponentItem,
+        )
+      ] }),
+      activeView === "components" && categories.length > 0 ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTab, className: "w-full", children: [
+        /* @__PURE__ */ jsx(TabsList, { className: cn(categories.length > 1 ? "h-14 w-full rounded-none border-b flex flex-row overflow-x-scroll justify-start" : "hidden"), children: categories.map((category) => /* @__PURE__ */ jsxs(TabsTrigger, { value: category, className: "flex flex-col justify-start items-start overflow-hidden px-2 py-1 min-w-24 min-h-11 shrink-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm", children: formatCategoryName(category) }),
+          /* @__PURE__ */ jsx("div", { className: "w-full min-h-[12px] text-[8px] leading-[9px] text-left text-muted-foreground text-wrap", children: category })
+        ] }, category)) }),
+        categories.map((category) => /* @__PURE__ */ jsx(TabsContent, { value: category, className: "m-0", children: /* @__PURE__ */ jsxs(Command, { className: "border-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 w-full [&>div:first-child]:w-full", children: /* @__PURE__ */ jsx(
+            CommandInput,
             {
-              component,
-              onClick: handleSelect
-            },
-            component.value
-          )) })
-        ] })
-      ] }) }, category))
-    ] }) : /* @__PURE__ */ jsxs(Command, { children: [
-      /* @__PURE__ */ jsx(CommandInput, { placeholder: "Add component" }),
-      /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandEmpty, { children: "No components found" }) })
-    ] }) })
+              placeholder: "Find components",
+              className: "border-0 focus:ring-0 w-full"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(CommandList, { className: "max-h-[250px]", children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: "No components found" }),
+            /* @__PURE__ */ jsx(CommandGroup, { children: groupedOptions[category]?.map((component) => /* @__PURE__ */ jsx(
+              GroupedComponentItem,
+              {
+                component,
+                onClick: handleSelect,
+                onDragStart: handleDragStart,
+                enableDrag: enableDragToCanvas
+              },
+              component.value
+            )) })
+          ] })
+        ] }) }, category))
+      ] }) : activeView === "components" ? /* @__PURE__ */ jsxs(Command, { children: [
+        /* @__PURE__ */ jsx(CommandInput, { placeholder: "Add component" }),
+        /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandEmpty, { children: "No components found" }) })
+      ] }) : null,
+      activeView === "blocks" && hasBlocks && /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultBlockCategory, className: "w-full", children: [
+        /* @__PURE__ */ jsx(TabsList, { className: "h-14 w-full rounded-none border-b flex flex-row overflow-x-scroll justify-start", children: blockCategories.map((category) => /* @__PURE__ */ jsxs(TabsTrigger, { value: category, className: "flex flex-col justify-start items-start overflow-hidden px-2 py-1 min-w-24 min-h-11 shrink-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm", children: formatCategoryName(category) }),
+          /* @__PURE__ */ jsxs("div", { className: "w-full min-h-[12px] text-[8px] leading-[9px] text-left text-muted-foreground", children: [
+            groupedBlocks[category]?.length,
+            " blocks"
+          ] })
+        ] }, category)) }),
+        blockCategories.map((category) => /* @__PURE__ */ jsx(TabsContent, { value: category, className: "m-0", children: /* @__PURE__ */ jsxs(Command, { className: "border-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 w-full [&>div:first-child]:w-full", children: /* @__PURE__ */ jsx(
+            CommandInput,
+            {
+              placeholder: "Find blocks",
+              className: "border-0 focus:ring-0 w-full"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(CommandList, { className: "max-h-[250px]", children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: "No blocks found" }),
+            /* @__PURE__ */ jsx(CommandGroup, { children: groupedBlocks[category]?.map((block) => /* @__PURE__ */ jsx(
+              BlockItem,
+              {
+                block,
+                onClick: handleBlockSelect
+              },
+              block.name
+            )) })
+          ] })
+        ] }) }, category))
+      ] })
+    ] })
   ] }) });
 }
+function cloneLayerWithNewIds(layer) {
+  const newId = generateUniqueId();
+  let newChildren;
+  if (Array.isArray(layer.children)) {
+    newChildren = layer.children.map((child) => cloneLayerWithNewIds(child));
+  } else if (typeof layer.children === "string") {
+    newChildren = layer.children;
+  } else if (layer.children && typeof layer.children === "object" && "__variableRef" in layer.children) {
+    newChildren = layer.children;
+  } else {
+    newChildren = layer.children;
+  }
+  return {
+    ...layer,
+    id: newId,
+    children: newChildren
+  };
+}
+function generateUniqueId() {
+  return Math.random().toString(36).substring(2, 9);
+}
+const BlockItem = memo(({
+  block,
+  onClick
+}) => {
+  const handleSelect = useCallback(() => {
+    onClick(block);
+  }, [onClick, block]);
+  return /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      onSelect: handleSelect,
+      className: "cursor-pointer flex flex-col items-start gap-1 py-3",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium", children: formatBlockName(block.name) }),
+        block.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground line-clamp-2", children: block.description })
+      ]
+    }
+  );
+});
+BlockItem.displayName = "BlockItem";
+function formatBlockName(name) {
+  return name.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
 const GroupedComponentItem = memo(({
   component,
-  onClick
+  onClick,
+  onDragStart,
+  enableDrag = false
 }) => {
   const handleSelect = useCallback(() => {
     onClick(component.value);
   }, [onClick, component.value]);
   const componentRegistry = useEditorStore((state) => state.registry);
-  return /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 w-10 h-6 overflow-hidden", children: /* @__PURE__ */ jsx(
+      LazyComponentPreview,
+      {
+        componentType: component.value,
+        componentRegistry
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center flex-1 min-w-0", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: component.label }) })
+  ] });
+  return /* @__PURE__ */ jsx(
     CommandItem,
     {
       onSelect: handleSelect,
-      className: "cursor-pointer flex items-center gap-3 py-3",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-8 overflow-hidden", children: /* @__PURE__ */ jsx(
-          LazyComponentPreview,
-          {
-            componentType: component.value,
-            componentRegistry
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center flex-1 min-w-0", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: component.label }) })
-      ]
+      className: "cursor-pointer flex items-center gap-2 py-2",
+      children: enableDrag ? /* @__PURE__ */ jsx(
+        DraggableNewComponent,
+        {
+          componentType: component.value,
+          onDragStart,
+          className: "flex-1",
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex-1", children: content })
     },
     component.value
   );
@@ -150,7 +317,7 @@ const LazyComponentPreview = memo(({
     let timeoutId = null;
     const observer = new IntersectionObserver(
       ([entry]) => {
-        if (entry.isIntersecting) {
+        if (entry?.isIntersecting) {
           timeoutId = setTimeout(() => setShouldLoad(true), 50);
         }
       },
@@ -173,12 +340,20 @@ const LazyComponentPreview = memo(({
   ) }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-muted rounded border" }) });
 });
 LazyComponentPreview.displayName = "LazyComponentPreview";
+const ChildOnlyPlaceholder = memo(({ componentType }) => {
+  const initials = componentType.replace(/([A-Z])/g, " $1").trim().split(" ").map((word) => word[0]).slice(0, 2).join("");
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-muted/50 rounded border border-dashed flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-[8px] font-medium text-muted-foreground", children: initials }) });
+});
+ChildOnlyPlaceholder.displayName = "ChildOnlyPlaceholder";
 const ComponentPreview = memo(({
   componentType,
   componentRegistry
 }) => {
-  const style = { width: "200%", height: "200%" };
+  const isChildOnly = isChildOnlyComponent(componentRegistry, componentType);
   const previewLayer = useMemo(() => {
+    if (isChildOnly) {
+      return null;
+    }
     const cacheKey = `${componentType}-${JSON.stringify(componentRegistry[componentType]?.schema)}`;
     if (previewLayerCache.has(cacheKey)) {
       return previewLayerCache.get(cacheKey);
@@ -194,15 +369,20 @@ const ComponentPreview = memo(({
       console.warn(`Failed to create preview for component ${componentType}:`, error);
       return null;
     }
-  }, [componentType, componentRegistry]);
+  }, [componentType, componentRegistry, isChildOnly]);
+  if (isChildOnly) {
+    return /* @__PURE__ */ jsx(ChildOnlyPlaceholder, { componentType });
+  }
   if (!previewLayer) {
     return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-muted rounded border" });
   }
+  const style = { width: "200%", height: "200%" };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "w-full h-full bg-background rounded border overflow-hidden transform scale-50 origin-top-left",
+      className: "w-full h-full bg-background rounded border overflow-hidden transform scale-50 origin-top-left pointer-events-none",
       style,
+      inert: true,
       children: /* @__PURE__ */ jsx(
         LayerRenderer,
         {
@@ -218,7 +398,7 @@ ComponentPreview.displayName = "ComponentPreview";
 function formatCategoryName(name) {
   const words = name.split("/");
   const lastWord = words[words.length - 1];
-  return lastWord.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+  return lastWord?.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()) ?? "";
 }
 
 export { AddComponentsPopover };

package/dist/packages/ui/src/components/ui-builder/internal/components/element-selector.cjs

@@ -96,7 +96,7 @@ const ElementSelector = ({
         ref: refs.setReference,
         className: utils.cn(
           "fixed box-border hover:border-blue-300 hover:border-2 hover:bg-blue-300/20 hover:shadow-md hover:shadow-blue-500/20 cursor-default",
-          isBeingDragged ? "border-2 border-orange-500 border-dashed shadow-lg shadow-orange-500/30 opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
+          isBeingDragged ? "border-2 border-green-500 border-dashed shadow-lg opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
         ),
         style: overlayStyle
       }

package/dist/packages/ui/src/components/ui-builder/internal/components/element-selector.mjs

@@ -94,7 +94,7 @@ const ElementSelector = ({
         ref: refs.setReference,
         className: cn(
           "fixed box-border hover:border-blue-300 hover:border-2 hover:bg-blue-300/20 hover:shadow-md hover:shadow-blue-500/20 cursor-default",
-          isBeingDragged ? "border-2 border-orange-500 border-dashed shadow-lg shadow-orange-500/30 opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
+          isBeingDragged ? "border-2 border-green-500 border-dashed shadow-lg opacity-70 bg-orange-50/20" : isSelected ? "border-2 border-blue-500 hover:border-blue-500 hover:bg-transparent  hover:shadow-none" : ""
         ),
         style: overlayStyle
       }

package/dist/packages/ui/src/components/ui-builder/internal/components/error-fallback.cjs

@@ -3,15 +3,17 @@
 const jsxRuntime = require('react/jsx-runtime');
 
 function ErrorFallback({ error }) {
+  const errorMessage = error == null ? void 0 : error instanceof Error ? error.message : String(error);
+  const errorStack = error instanceof Error ? error.stack : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border border-red-500 bg-red-100 text-red-700 rounded flex-grow w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold mb-2", children: "Component Error" }),
     /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
       "Error: ",
-      error?.message || "Unknown error"
+      errorMessage || "Unknown error"
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer", children: "Stack trace" }),
-      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 text-xs whitespace-pre-wrap", children: error?.stack })
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 text-xs whitespace-pre-wrap", children: errorStack })
     ] })
   ] });
 }

package/dist/packages/ui/src/components/ui-builder/internal/components/error-fallback.mjs

@@ -1,15 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ErrorFallback({ error }) {
+  const errorMessage = error == null ? void 0 : error instanceof Error ? error.message : String(error);
+  const errorStack = error instanceof Error ? error.stack : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "p-4 border border-red-500 bg-red-100 text-red-700 rounded flex-grow w-full", children: [
     /* @__PURE__ */ jsx("h3", { className: "font-bold mb-2", children: "Component Error" }),
     /* @__PURE__ */ jsxs("p", { children: [
       "Error: ",
-      error?.message || "Unknown error"
+      errorMessage || "Unknown error"
     ] }),
     /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
       /* @__PURE__ */ jsx("summary", { className: "cursor-pointer", children: "Stack trace" }),
-      /* @__PURE__ */ jsx("pre", { className: "mt-2 text-xs whitespace-pre-wrap", children: error?.stack })
+      /* @__PURE__ */ jsx("pre", { className: "mt-2 text-xs whitespace-pre-wrap", children: errorStack })
     ] })
   ] });
 }

package/dist/packages/ui/src/components/ui-builder/internal/components/multi-select.cjs

@@ -40,7 +40,10 @@ function transToGroupOption(options, groupBy) {
     if (!groupOption[key]) {
       groupOption[key] = [];
     }
-    groupOption[key].push(option);
+    const group = groupOption[key];
+    if (group) {
+      group.push(option);
+    }
   });
   return groupOption;
 }
@@ -145,8 +148,8 @@ const MultipleSelector = React__namespace.forwardRef(
           if (e.key === "Delete" || e.key === "Backspace") {
             if (input.value === "" && selected.length > 0) {
               const lastSelectOption = selected[selected.length - 1];
-              if (!lastSelectOption.fixed) {
-                handleUnselect(selected[selected.length - 1]);
+              if (lastSelectOption && !lastSelectOption.fixed) {
+                handleUnselect(lastSelectOption);
               }
             }
           }

package/dist/packages/ui/src/components/ui-builder/internal/components/multi-select.mjs

@@ -25,7 +25,10 @@ function transToGroupOption(options, groupBy) {
     if (!groupOption[key]) {
       groupOption[key] = [];
     }
-    groupOption[key].push(option);
+    const group = groupOption[key];
+    if (group) {
+      group.push(option);
+    }
   });
   return groupOption;
 }
@@ -130,8 +133,8 @@ const MultipleSelector = React.forwardRef(
           if (e.key === "Delete" || e.key === "Backspace") {
             if (input.value === "" && selected.length > 0) {
               const lastSelectOption = selected[selected.length - 1];
-              if (!lastSelectOption.fixed) {
-                handleUnselect(selected[selected.length - 1]);
+              if (lastSelectOption && !lastSelectOption.fixed) {
+                handleUnselect(lastSelectOption);
               }
             }
           }

package/dist/packages/ui/src/components/ui-builder/internal/dnd/draggable-new-component.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const core_esm = require('../../../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.cjs');
+const LucideIcons = require('lucide-react');
+const utils = require('../../../../lib/utils.cjs');
+
+const DraggableNewComponent = ({
+  componentType,
+  children,
+  onDragStart,
+  className
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    isDragging
+  } = core_esm.useDraggable({
+    id: `new-component-${componentType}`,
+    data: {
+      type: "new-component",
+      componentType
+    }
+  });
+  React.useEffect(() => {
+    if (isDragging && onDragStart) {
+      onDragStart();
+    }
+  }, [isDragging, onDragStart]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: utils.cn(
+        "flex items-center gap-1",
+        isDragging && "opacity-50",
+        className
+      ),
+      ...attributes,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            ...listeners,
+            className: utils.cn(
+              "flex-shrink-0 cursor-grab active:cursor-grabbing p-1 -ml-1",
+              "text-muted-foreground hover:text-foreground transition-colors",
+              "rounded hover:bg-muted/50"
+            ),
+            "aria-label": `Drag ${componentType} to canvas`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.GripVertical, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children })
+      ]
+    }
+  );
+};
+
+exports.DraggableNewComponent = DraggableNewComponent;
+exports.default = DraggableNewComponent;

package/dist/packages/ui/src/components/ui-builder/internal/dnd/draggable-new-component.mjs

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useDraggable } from '../../../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.mjs';
+import { GripVertical } from 'lucide-react';
+import { cn } from '../../../../lib/utils.mjs';
+
+const DraggableNewComponent = ({
+  componentType,
+  children,
+  onDragStart,
+  className
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    isDragging
+  } = useDraggable({
+    id: `new-component-${componentType}`,
+    data: {
+      type: "new-component",
+      componentType
+    }
+  });
+  useEffect(() => {
+    if (isDragging && onDragStart) {
+      onDragStart();
+    }
+  }, [isDragging, onDragStart]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "flex items-center gap-1",
+        isDragging && "opacity-50",
+        className
+      ),
+      ...attributes,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            ...listeners,
+            className: cn(
+              "flex-shrink-0 cursor-grab active:cursor-grabbing p-1 -ml-1",
+              "text-muted-foreground hover:text-foreground transition-colors",
+              "rounded hover:bg-muted/50"
+            ),
+            "aria-label": `Drag ${componentType} to canvas`,
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children })
+      ]
+    }
+  );
+};
+
+export { DraggableNewComponent, DraggableNewComponent as default };