@btst/stack 2.0.1 → 2.2.0

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

@@ -19,6 +19,7 @@ const editorStore = require('../../../../lib/ui-builder/store/editor-store.cjs')
 const tooltip = require('../../../tooltip.cjs');
 const useKeyboardShortcuts = require('../../../../hooks/use-keyboard-shortcuts.cjs');
 const index = require('../../../../../../../node_modules/.pnpm/zustand@4.5.5_@types_react@19.2.6_immer@11.1.3_react@19.2.0/node_modules/zustand/esm/index.cjs');
+const shortcutRegistry = require('../../../../lib/ui-builder/shortcuts/shortcut-registry.cjs');
 
 const Z_INDEX = 1e3;
 function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
@@ -54,20 +55,21 @@ function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
   }, [redo, incrementRevision]);
   const keyCombinations = React.useMemo(
     () => [
-      {
-        keys: { metaKey: true, shiftKey: false },
-        key: "z",
-        handler: handleUndo
-      },
-      {
-        keys: { metaKey: true, shiftKey: true },
-        key: "z",
-        handler: handleRedo
-      },
+      // Use shortcut registry for undo/redo
+      shortcutRegistry.toKeyboardShortcut("undo", (e) => {
+        e.preventDefault();
+        handleUndo();
+      }),
+      shortcutRegistry.toKeyboardShortcut("redo", (e) => {
+        e.preventDefault();
+        handleRedo();
+      }),
+      // Debug shortcuts (not in registry)
       {
         keys: { metaKey: true, shiftKey: true },
         key: "9",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           const elements = document.querySelectorAll("*");
           elements.forEach((element) => {
             element.classList.add("animate-spin", "origin-center");
@@ -77,7 +79,8 @@ function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
       {
         keys: { metaKey: true, shiftKey: true },
         key: "0",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           const elements = document.querySelectorAll("*");
           elements.forEach((element) => {
             element.classList.remove("animate-spin", "origin-center");
@@ -239,7 +242,7 @@ const ActionButtons = ({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "flex items-center gap-2", children: [
         "Undo",
-        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318Z" })
+        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: shortcutRegistry.SHORTCUTS.undo.shortcutDisplay })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
@@ -259,7 +262,7 @@ const ActionButtons = ({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipContent, { className: "flex items-center gap-2", children: [
         "Redo",
-        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318+\u21E7+Z" })
+        /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { className: "ml-0 text-sm leading-3", children: shortcutRegistry.SHORTCUTS.redo.shortcutDisplay })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
@@ -328,7 +331,7 @@ const ResponsiveDropdown = ({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Undo, { className: "w-4 h-4" }),
             "Undo",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318Z" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: shortcutRegistry.SHORTCUTS.undo.shortcutDisplay })
           ]
         }
       ),
@@ -341,7 +344,7 @@ const ResponsiveDropdown = ({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Redo, { className: "w-4 h-4" }),
             "Redo",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318+\u21E7+Z" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: shortcutRegistry.SHORTCUTS.redo.shortcutDisplay })
           ]
         }
       ),
@@ -375,7 +378,8 @@ const PreviewDialog = ({
       {
         keys: { metaKey: true, shiftKey: true },
         key: "p",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           onOpenChange(true);
         }
       }
@@ -412,7 +416,8 @@ const CodeDialog = ({ isOpen, onOpenChange }) => {
       {
         keys: { metaKey: true, shiftKey: true },
         key: "e",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           onOpenChange(true);
         }
       }

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

@@ -17,6 +17,7 @@ import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mj
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../../tooltip.mjs';
 import { useKeyboardShortcuts } from '../../../../hooks/use-keyboard-shortcuts.mjs';
 import { useStore } from '../../../../../../../node_modules/.pnpm/zustand@4.5.5_@types_react@19.2.6_immer@11.1.3_react@19.2.0/node_modules/zustand/esm/index.mjs';
+import { toKeyboardShortcut, SHORTCUTS } from '../../../../lib/ui-builder/shortcuts/shortcut-registry.mjs';
 
 const Z_INDEX = 1e3;
 function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
@@ -52,20 +53,21 @@ function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
   }, [redo, incrementRevision]);
   const keyCombinations = useMemo(
     () => [
-      {
-        keys: { metaKey: true, shiftKey: false },
-        key: "z",
-        handler: handleUndo
-      },
-      {
-        keys: { metaKey: true, shiftKey: true },
-        key: "z",
-        handler: handleRedo
-      },
+      // Use shortcut registry for undo/redo
+      toKeyboardShortcut("undo", (e) => {
+        e.preventDefault();
+        handleUndo();
+      }),
+      toKeyboardShortcut("redo", (e) => {
+        e.preventDefault();
+        handleRedo();
+      }),
+      // Debug shortcuts (not in registry)
       {
         keys: { metaKey: true, shiftKey: true },
         key: "9",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           const elements = document.querySelectorAll("*");
           elements.forEach((element) => {
             element.classList.add("animate-spin", "origin-center");
@@ -75,7 +77,8 @@ function NavBar({ leftChildren, rightChildren, showExport = true } = {}) {
       {
         keys: { metaKey: true, shiftKey: true },
         key: "0",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           const elements = document.querySelectorAll("*");
           elements.forEach((element) => {
             element.classList.remove("animate-spin", "origin-center");
@@ -237,7 +240,7 @@ const ActionButtons = ({
       ) }),
       /* @__PURE__ */ jsxs(TooltipContent, { className: "flex items-center gap-2", children: [
         "Undo",
-        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318Z" })
+        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: SHORTCUTS.undo.shortcutDisplay })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -257,7 +260,7 @@ const ActionButtons = ({
       ) }),
       /* @__PURE__ */ jsxs(TooltipContent, { className: "flex items-center gap-2", children: [
         "Redo",
-        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: "\u2318+\u21E7+Z" })
+        /* @__PURE__ */ jsx(CommandShortcut, { className: "ml-0 text-sm leading-3", children: SHORTCUTS.redo.shortcutDisplay })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -326,7 +329,7 @@ const ResponsiveDropdown = ({
           children: [
             /* @__PURE__ */ jsx(Undo, { className: "w-4 h-4" }),
             "Undo",
-            /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318Z" })
+            /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: SHORTCUTS.undo.shortcutDisplay })
           ]
         }
       ),
@@ -339,7 +342,7 @@ const ResponsiveDropdown = ({
           children: [
             /* @__PURE__ */ jsx(Redo, { className: "w-4 h-4" }),
             "Redo",
-            /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "\u2318+\u21E7+Z" })
+            /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: SHORTCUTS.redo.shortcutDisplay })
           ]
         }
       ),
@@ -373,7 +376,8 @@ const PreviewDialog = ({
       {
         keys: { metaKey: true, shiftKey: true },
         key: "p",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           onOpenChange(true);
         }
       }
@@ -410,7 +414,8 @@ const CodeDialog = ({ isOpen, onOpenChange }) => {
       {
         keys: { metaKey: true, shiftKey: true },
         key: "e",
-        handler: () => {
+        handler: (e) => {
+          e.preventDefault();
           onOpenChange(true);
         }
       }

package/dist/packages/ui/src/components/ui-builder/internal/components/tree-row-node.cjs

@@ -12,6 +12,8 @@ const addComponentPopover = require('./add-component-popover.cjs');
 const nameEdit = require('./name-edit.cjs');
 const editorStore = require('../../../../lib/ui-builder/store/editor-store.cjs');
 const schemaUtils = require('../../../../lib/ui-builder/store/schema-utils.cjs');
+const useLayerActions = require('../../../../lib/ui-builder/hooks/use-layer-actions.cjs');
+const layerStore = require('../../../../lib/ui-builder/store/layer-store.cjs');
 
 const TreeRowNode = React.memo(({
   node,
@@ -22,32 +24,19 @@ const TreeRowNode = React.memo(({
   onToggle,
   nodeAttributes,
   selectedLayerId,
-  selectLayer,
-  removeLayer,
-  duplicateLayer,
-  updateLayer
+  selectLayer
 }) => {
   const componentRegistry = editorStore.useEditorStore((state) => state.registry);
+  const updateLayer = layerStore.useLayerStore((state) => state.updateLayer);
+  const { handleDelete, handleDuplicate, canDuplicate, canDelete } = useLayerActions.useGlobalLayerActions(node.id);
   const [isRenaming, setIsRenaming] = React.useState(false);
   const [popoverOrMenuOpen, setPopoverOrMenuOpen] = React.useState(false);
-  const allowPagesCreation = editorStore.useEditorStore(
-    (state) => state.allowPagesCreation
-  );
-  const allowPagesDeletion = editorStore.useEditorStore(
-    (state) => state.allowPagesDeletion
-  );
   const handleOpen = React.useCallback(() => {
     onToggle(id, !open);
   }, [id, open, onToggle]);
   const handleSelect = React.useCallback(() => {
     selectLayer(node.id);
   }, [node.id, selectLayer]);
-  const handleRemove = React.useCallback(() => {
-    removeLayer(node.id);
-  }, [node.id, removeLayer]);
-  const handleDuplicate = React.useCallback(() => {
-    duplicateLayer(node.id);
-  }, [node.id, duplicateLayer]);
   const handleRenameClick = React.useCallback(() => {
     setIsRenaming(true);
   }, []);
@@ -64,8 +53,7 @@ const TreeRowNode = React.memo(({
   const canRenderAddChild = React.useMemo(() => {
     const componentDef = componentRegistry[node.type];
     if (!componentDef) return false;
-    const canAddChildren = "shape" in componentDef.schema && schemaUtils.hasAnyChildrenField(componentDef.schema) && !schemaUtils.hasChildrenFieldOfTypeString(componentDef.schema);
-    return canAddChildren;
+    return schemaUtils.canComponentAcceptChildren(componentDef.schema);
   }, [node, componentRegistry]);
   const { key, ...rest } = nodeAttributes;
   if (!node) {
@@ -154,8 +142,8 @@ const TreeRowNode = React.memo(({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleRenameClick, children: "Rename" }),
-        allowPagesCreation && /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleDuplicate, children: "Duplicate" }),
-        allowPagesDeletion && /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleRemove, children: "Remove" })
+        canDuplicate && /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleDuplicate, children: "Duplicate" }),
+        canDelete && /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: handleDelete, children: "Remove" })
       ] })
     ] })
   ] }, key);
@@ -170,9 +158,6 @@ const TreeRowNode = React.memo(({
   if (!index(prevProps.nodeAttributes, nextProps.nodeAttributes)) return false;
   if (prevProps.onToggle !== nextProps.onToggle) return false;
   if (prevProps.selectLayer !== nextProps.selectLayer) return false;
-  if (prevProps.removeLayer !== nextProps.removeLayer) return false;
-  if (prevProps.duplicateLayer !== nextProps.duplicateLayer) return false;
-  if (prevProps.updateLayer !== nextProps.updateLayer) return false;
   return true;
 });
 TreeRowNode.displayName = "TreeRowNode";

package/dist/packages/ui/src/components/ui-builder/internal/components/tree-row-node.mjs

@@ -9,7 +9,9 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { AddComponentsPopover } from './add-component-popover.mjs';
 import { NameEdit } from './name-edit.mjs';
 import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mjs';
-import { hasAnyChildrenField, hasChildrenFieldOfTypeString } from '../../../../lib/ui-builder/store/schema-utils.mjs';
+import { canComponentAcceptChildren } from '../../../../lib/ui-builder/store/schema-utils.mjs';
+import { useGlobalLayerActions } from '../../../../lib/ui-builder/hooks/use-layer-actions.mjs';
+import { useLayerStore } from '../../../../lib/ui-builder/store/layer-store.mjs';
 
 const TreeRowNode = memo(({
   node,
@@ -20,32 +22,19 @@ const TreeRowNode = memo(({
   onToggle,
   nodeAttributes,
   selectedLayerId,
-  selectLayer,
-  removeLayer,
-  duplicateLayer,
-  updateLayer
+  selectLayer
 }) => {
   const componentRegistry = useEditorStore((state) => state.registry);
+  const updateLayer = useLayerStore((state) => state.updateLayer);
+  const { handleDelete, handleDuplicate, canDuplicate, canDelete } = useGlobalLayerActions(node.id);
   const [isRenaming, setIsRenaming] = useState(false);
   const [popoverOrMenuOpen, setPopoverOrMenuOpen] = useState(false);
-  const allowPagesCreation = useEditorStore(
-    (state) => state.allowPagesCreation
-  );
-  const allowPagesDeletion = useEditorStore(
-    (state) => state.allowPagesDeletion
-  );
   const handleOpen = useCallback(() => {
     onToggle(id, !open);
   }, [id, open, onToggle]);
   const handleSelect = useCallback(() => {
     selectLayer(node.id);
   }, [node.id, selectLayer]);
-  const handleRemove = useCallback(() => {
-    removeLayer(node.id);
-  }, [node.id, removeLayer]);
-  const handleDuplicate = useCallback(() => {
-    duplicateLayer(node.id);
-  }, [node.id, duplicateLayer]);
   const handleRenameClick = useCallback(() => {
     setIsRenaming(true);
   }, []);
@@ -62,8 +51,7 @@ const TreeRowNode = memo(({
   const canRenderAddChild = useMemo(() => {
     const componentDef = componentRegistry[node.type];
     if (!componentDef) return false;
-    const canAddChildren = "shape" in componentDef.schema && hasAnyChildrenField(componentDef.schema) && !hasChildrenFieldOfTypeString(componentDef.schema);
-    return canAddChildren;
+    return canComponentAcceptChildren(componentDef.schema);
   }, [node, componentRegistry]);
   const { key, ...rest } = nodeAttributes;
   if (!node) {
@@ -152,8 +140,8 @@ const TreeRowNode = memo(({
       ) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
         /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleRenameClick, children: "Rename" }),
-        allowPagesCreation && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleDuplicate, children: "Duplicate" }),
-        allowPagesDeletion && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleRemove, children: "Remove" })
+        canDuplicate && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleDuplicate, children: "Duplicate" }),
+        canDelete && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleDelete, children: "Remove" })
       ] })
     ] })
   ] }, key);
@@ -168,9 +156,6 @@ const TreeRowNode = memo(({
   if (!isDeepEqual(prevProps.nodeAttributes, nextProps.nodeAttributes)) return false;
   if (prevProps.onToggle !== nextProps.onToggle) return false;
   if (prevProps.selectLayer !== nextProps.selectLayer) return false;
-  if (prevProps.removeLayer !== nextProps.removeLayer) return false;
-  if (prevProps.duplicateLayer !== nextProps.duplicateLayer) return false;
-  if (prevProps.updateLayer !== nextProps.updateLayer) return false;
   return true;
 });
 TreeRowNode.displayName = "TreeRowNode";

package/dist/packages/ui/src/components/ui-builder/internal/editor-panel.cjs

@@ -15,6 +15,7 @@ const button = require('../../button.cjs');
 const resizableWrapper = require('./canvas/resizable-wrapper.cjs');
 const autoFrame = require('./canvas/auto-frame.cjs');
 const tooltip = require('../../tooltip.cjs');
+const layerContextMenuPortal = require('./components/layer-context-menu-portal.cjs');
 const dndContexts = require('../../../lib/ui-builder/context/dnd-contexts.cjs');
 const layerUtils = require('../../../lib/ui-builder/store/layer-utils.cjs');
 
@@ -115,39 +116,18 @@ const EditorPanel = ({ className }) => {
     selectLayer,
     selectedLayerId,
     findLayerById,
-    duplicateLayer,
-    removeLayer,
     selectedPageId
   } = layerStore.useLayerStore();
   const previewMode = editorStore.useEditorStore((state) => state.previewMode);
   const componentRegistry = editorStore.useEditorStore((state) => state.registry);
   const selectedLayer = findLayerById(selectedLayerId);
   const selectedPage = findLayerById(selectedPageId);
-  const isLayerAPage = layerStore.useLayerStore(
-    (state) => state.isLayerAPage(selectedLayerId || "")
-  );
-  const allowPagesCreation = editorStore.useEditorStore(
-    (state) => state.allowPagesCreation
-  );
-  const allowPagesDeletion = editorStore.useEditorStore(
-    (state) => state.allowPagesDeletion
-  );
   const onSelectElement = React.useCallback(
     (layerId) => {
       selectLayer(layerId);
     },
     [selectLayer]
   );
-  const handleDeleteLayer = React.useCallback(() => {
-    if (selectedLayer && !isLayerAPage) {
-      removeLayer(selectedLayer.id);
-    }
-  }, [selectedLayer, removeLayer, isLayerAPage]);
-  const handleDuplicateLayer = React.useCallback(() => {
-    if (selectedLayer && !isLayerAPage) {
-      duplicateLayer(selectedLayer.id);
-    }
-  }, [selectedLayer, duplicateLayer, isLayerAPage]);
   return /* @__PURE__ */ jsxRuntime.jsx(dndContext.DndContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     EditorPanelContent,
     {
@@ -156,15 +136,10 @@ const EditorPanel = ({ className }) => {
       selectedPageId,
       selectedLayer,
       selectedPage,
-      isLayerAPage,
-      allowPagesCreation,
-      allowPagesDeletion,
       previewMode,
       componentRegistry,
       autoZoomToSelected: false,
-      onSelectElement,
-      handleDeleteLayer,
-      handleDuplicateLayer
+      onSelectElement
     }
   ) });
 };
@@ -174,14 +149,10 @@ const EditorPanelContent = ({
   selectedLayerId,
   selectedLayer,
   selectedPage,
-  allowPagesCreation,
-  allowPagesDeletion,
   previewMode,
   componentRegistry,
   autoZoomToSelected,
-  onSelectElement,
-  handleDeleteLayer,
-  handleDuplicateLayer
+  onSelectElement
 }) => {
   const { isDragging: isComponentDragging } = dndContexts.useComponentDragContext();
   const [resizing, setResizing] = React.useState(false);
@@ -207,18 +178,12 @@ const EditorPanelContent = ({
       zIndex: 1,
       totalLayers,
       selectedLayer,
-      onSelectElement,
-      handleDuplicateLayer: allowPagesCreation ? handleDuplicateLayer : void 0,
-      handleDeleteLayer: allowPagesDeletion ? handleDeleteLayer : void 0
+      onSelectElement
     }),
     [
       totalLayers,
       selectedLayer,
-      onSelectElement,
-      handleDuplicateLayer,
-      handleDeleteLayer,
-      allowPagesCreation,
-      allowPagesDeletion
+      onSelectElement
     ]
   );
   const widthClass = React.useMemo(() => {
@@ -269,7 +234,10 @@ const EditorPanelContent = ({
       {
         id: "editor-panel-content",
         className: utils.cn("overflow-visible ", widthClass),
-        children: /* @__PURE__ */ jsxRuntime.jsx(autoFrame.default, { ...autoFrameProps, ref: frameRef, children: /* @__PURE__ */ jsxRuntime.jsx(layerRenderer, { ...layerRendererProps }) })
+        children: /* @__PURE__ */ jsxRuntime.jsxs(autoFrame.default, { ...autoFrameProps, ref: frameRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(layerRenderer, { ...layerRendererProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(layerContextMenuPortal.LayerContextMenuPortal, {})
+        ] })
       }
     ) }),
     [resizableProps, widthClass, autoFrameProps, layerRendererProps]

package/dist/packages/ui/src/components/ui-builder/internal/editor-panel.mjs

@@ -13,6 +13,7 @@ import { Button } from '../../button.mjs';
 import { ResizableWrapper } from './canvas/resizable-wrapper.mjs';
 import AutoFrame from './canvas/auto-frame.mjs';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../../tooltip.mjs';
+import { LayerContextMenuPortal } from './components/layer-context-menu-portal.mjs';
 import { useComponentDragContext } from '../../../lib/ui-builder/context/dnd-contexts.mjs';
 import { countLayers } from '../../../lib/ui-builder/store/layer-utils.mjs';
 
@@ -113,39 +114,18 @@ const EditorPanel = ({ className }) => {
     selectLayer,
     selectedLayerId,
     findLayerById,
-    duplicateLayer,
-    removeLayer,
     selectedPageId
   } = useLayerStore();
   const previewMode = useEditorStore((state) => state.previewMode);
   const componentRegistry = useEditorStore((state) => state.registry);
   const selectedLayer = findLayerById(selectedLayerId);
   const selectedPage = findLayerById(selectedPageId);
-  const isLayerAPage = useLayerStore(
-    (state) => state.isLayerAPage(selectedLayerId || "")
-  );
-  const allowPagesCreation = useEditorStore(
-    (state) => state.allowPagesCreation
-  );
-  const allowPagesDeletion = useEditorStore(
-    (state) => state.allowPagesDeletion
-  );
   const onSelectElement = useCallback(
     (layerId) => {
       selectLayer(layerId);
     },
     [selectLayer]
   );
-  const handleDeleteLayer = useCallback(() => {
-    if (selectedLayer && !isLayerAPage) {
-      removeLayer(selectedLayer.id);
-    }
-  }, [selectedLayer, removeLayer, isLayerAPage]);
-  const handleDuplicateLayer = useCallback(() => {
-    if (selectedLayer && !isLayerAPage) {
-      duplicateLayer(selectedLayer.id);
-    }
-  }, [selectedLayer, duplicateLayer, isLayerAPage]);
   return /* @__PURE__ */ jsx(DndContextProvider, { children: /* @__PURE__ */ jsx(
     EditorPanelContent,
     {
@@ -154,15 +134,10 @@ const EditorPanel = ({ className }) => {
       selectedPageId,
       selectedLayer,
       selectedPage,
-      isLayerAPage,
-      allowPagesCreation,
-      allowPagesDeletion,
       previewMode,
       componentRegistry,
       autoZoomToSelected: false,
-      onSelectElement,
-      handleDeleteLayer,
-      handleDuplicateLayer
+      onSelectElement
     }
   ) });
 };
@@ -172,14 +147,10 @@ const EditorPanelContent = ({
   selectedLayerId,
   selectedLayer,
   selectedPage,
-  allowPagesCreation,
-  allowPagesDeletion,
   previewMode,
   componentRegistry,
   autoZoomToSelected,
-  onSelectElement,
-  handleDeleteLayer,
-  handleDuplicateLayer
+  onSelectElement
 }) => {
   const { isDragging: isComponentDragging } = useComponentDragContext();
   const [resizing, setResizing] = useState(false);
@@ -205,18 +176,12 @@ const EditorPanelContent = ({
       zIndex: 1,
       totalLayers,
       selectedLayer,
-      onSelectElement,
-      handleDuplicateLayer: allowPagesCreation ? handleDuplicateLayer : void 0,
-      handleDeleteLayer: allowPagesDeletion ? handleDeleteLayer : void 0
+      onSelectElement
     }),
     [
       totalLayers,
       selectedLayer,
-      onSelectElement,
-      handleDuplicateLayer,
-      handleDeleteLayer,
-      allowPagesCreation,
-      allowPagesDeletion
+      onSelectElement
     ]
   );
   const widthClass = useMemo(() => {
@@ -267,7 +232,10 @@ const EditorPanelContent = ({
       {
         id: "editor-panel-content",
         className: cn("overflow-visible ", widthClass),
-        children: /* @__PURE__ */ jsx(AutoFrame, { ...autoFrameProps, ref: frameRef, children: /* @__PURE__ */ jsx(LayerRenderer, { ...layerRendererProps }) })
+        children: /* @__PURE__ */ jsxs(AutoFrame, { ...autoFrameProps, ref: frameRef, children: [
+          /* @__PURE__ */ jsx(LayerRenderer, { ...layerRendererProps }),
+          /* @__PURE__ */ jsx(LayerContextMenuPortal, {})
+        ] })
       }
     ) }),
     [resizableProps, widthClass, autoFrameProps, layerRendererProps]

package/dist/packages/ui/src/components/ui-builder/internal/layers-panel.cjs

@@ -6,6 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const index = require('../../../../../../_virtual/index.cjs');
 const layerStore = require('../../../lib/ui-builder/store/layer-store.cjs');
+const types = require('../types.cjs');
 const utils = require('../../../lib/utils.cjs');
 const layerUtils = require('../../../lib/ui-builder/store/layer-utils.cjs');
 const LucideIcons = require('lucide-react');
@@ -26,9 +27,7 @@ const LayersPanel = ({ className }) => {
     selectedLayerId,
     findLayerById,
     updateLayer,
-    selectLayer,
-    removeLayer,
-    duplicateLayer
+    selectLayer
   } = layerStore.useLayerStore();
   const pageLayer = findLayerById(selectedPageId);
   const layers = React.useMemo(() => [pageLayer], [pageLayer]);
@@ -43,9 +42,7 @@ const LayersPanel = ({ className }) => {
       selectedPageId,
       selectedLayerId,
       updateLayer,
-      selectLayer,
-      removeLayer,
-      duplicateLayer
+      selectLayer
     }
   );
 };
@@ -56,9 +53,7 @@ const LayersTree = React__default.memo(
     selectedPageId,
     selectedLayerId,
     updateLayer,
-    selectLayer,
-    removeLayer,
-    duplicateLayer
+    selectLayer
   }) => {
     const [openIdsArray, setOpenIdsArray] = React.useState([]);
     const prevSelectedLayerId = React.useRef(selectedLayerId);
@@ -143,10 +138,7 @@ const LayersTree = React__default.memo(
             onToggle: handleNodeToggle,
             level: stat.level,
             selectedLayerId,
-            selectLayer,
-            removeLayer,
-            duplicateLayer,
-            updateLayer
+            selectLayer
           },
           stableKey
         );
@@ -155,9 +147,6 @@ const LayersTree = React__default.memo(
         handleNodeToggle,
         selectedLayerId,
         selectLayer,
-        removeLayer,
-        duplicateLayer,
-        updateLayer,
         layers
       ]
     );
@@ -168,6 +157,8 @@ const LayersTree = React__default.memo(
           processed.children = layer.children.map(processLayer);
         } else if (typeof layer.children === "string") {
           processed.children = [];
+        } else if (types.isVariableReference(layer.children)) {
+          processed.children = [];
         } else if (!layer.children) {
           processed.children = [];
         }