@btst/stack 2.0.1 → 2.1.0

package/dist/packages/ui/src/components/ui-builder/internal/components/layer-context-menu.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useCallback, useMemo } from 'react';
+import { useGlobalLayerActions } from '../../../../lib/ui-builder/hooks/use-layer-actions.mjs';
+import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mjs';
+import { useKeyboardShortcuts } from '../../../../hooks/use-keyboard-shortcuts.mjs';
+import { SHORTCUTS } from '../../../../lib/ui-builder/shortcuts/shortcut-registry.mjs';
+
+const LayerContextMenu = ({
+  layerId,
+  isSelected,
+  onSelect,
+  children,
+  className,
+  style
+}) => {
+  const openContextMenu = useEditorStore((state) => state.openContextMenu);
+  const {
+    handleCopy,
+    handleCut,
+    handlePaste,
+    handleDelete,
+    handleDuplicate,
+    getCanPaste
+  } = useGlobalLayerActions(layerId);
+  const handleContextMenu = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!isSelected) {
+        onSelect(layerId);
+      }
+      openContextMenu(e.clientX, e.clientY, layerId);
+    },
+    [isSelected, layerId, onSelect, openContextMenu]
+  );
+  const isInputFocused = useCallback(() => {
+    const activeElement = document.activeElement;
+    if (!activeElement) return false;
+    const tagName = activeElement.tagName.toLowerCase();
+    const isContentEditable = activeElement.isContentEditable;
+    return tagName === "input" || tagName === "textarea" || isContentEditable;
+  }, []);
+  const keyCombinations = useMemo(() => {
+    if (!isSelected) return [];
+    return [
+      {
+        keys: SHORTCUTS.copy.keys,
+        key: SHORTCUTS.copy.key,
+        preventDefault: false,
+        handler: (e) => {
+          if (isInputFocused()) return;
+          e.preventDefault();
+          handleCopy();
+        }
+      },
+      {
+        keys: SHORTCUTS.cut.keys,
+        key: SHORTCUTS.cut.key,
+        preventDefault: false,
+        handler: (e) => {
+          if (isInputFocused()) return;
+          e.preventDefault();
+          handleCut();
+        }
+      },
+      {
+        keys: SHORTCUTS.paste.keys,
+        key: SHORTCUTS.paste.key,
+        preventDefault: false,
+        handler: (e) => {
+          if (isInputFocused()) return;
+          if (!getCanPaste()) return;
+          e.preventDefault();
+          handlePaste();
+        }
+      },
+      {
+        keys: SHORTCUTS.duplicate.keys,
+        key: SHORTCUTS.duplicate.key,
+        preventDefault: false,
+        handler: (e) => {
+          if (isInputFocused()) return;
+          e.preventDefault();
+          handleDuplicate();
+        }
+      },
+      {
+        keys: SHORTCUTS.delete.keys,
+        key: SHORTCUTS.delete.key,
+        preventDefault: false,
+        handler: (e) => {
+          if (isInputFocused()) return;
+          e.preventDefault();
+          handleDelete();
+        }
+      }
+    ];
+  }, [isSelected, handleCopy, handleCut, handlePaste, handleDuplicate, handleDelete, getCanPaste, isInputFocused]);
+  useKeyboardShortcuts(keyCombinations);
+  if (React__default.isValidElement(children)) {
+    return React__default.cloneElement(children, {
+      onContextMenu: handleContextMenu,
+      className: className ? `${children.props.className || ""} ${className}`.trim() : children.props.className,
+      style: style ? { ...children.props.style, ...style } : children.props.style
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      onContextMenu: handleContextMenu,
+      className,
+      style,
+      children
+    }
+  );
+};
+
+export { LayerContextMenu };

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

@@ -9,24 +9,14 @@ const editorStore = require('../../../../lib/ui-builder/store/editor-store.cjs')
 const addComponentPopover = require('./add-component-popover.cjs');
 const utils = require('../../../../lib/utils.cjs');
 const schemaUtils = require('../../../../lib/ui-builder/store/schema-utils.cjs');
+const useLayerActions = require('../../../../lib/ui-builder/hooks/use-layer-actions.cjs');
 
-const LayerMenu = ({
-  layerId,
-  handleDuplicateComponent,
-  handleDeleteComponent
-}) => {
+const LayerMenu = ({ layerId }) => {
   const selectedLayer = layerStore.useLayerStore((state) => state.findLayerById(layerId));
   const isLayerAPage = layerStore.useLayerStore((state) => state.isLayerAPage(layerId));
   const [popoverOpen, setPopoverOpen] = React.useState(false);
   const componentRegistry = editorStore.useEditorStore((state) => state.registry);
-  const allowPagesCreation = editorStore.useEditorStore(
-    (state) => state.allowPagesCreation
-  );
-  const allowPagesDeletion = editorStore.useEditorStore(
-    (state) => state.allowPagesDeletion
-  );
-  const canDuplicate = !isLayerAPage || allowPagesCreation;
-  const canDelete = !isLayerAPage || allowPagesDeletion;
+  const { canDuplicate, canDelete, handleDuplicate, handleDelete } = useLayerActions.useGlobalLayerActions(layerId);
   const buttonVariantsValues = React.useMemo(() => {
     return button.buttonVariants({ variant: "ghost", size: "sm" });
   }, []);
@@ -35,8 +25,7 @@ const LayerMenu = ({
     if (!selectedLayer) return false;
     const componentDef = componentRegistry[selectedLayer.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);
   }, [selectedLayer, componentRegistry]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -61,7 +50,7 @@ const LayerMenu = ({
           "div",
           {
             className: utils.cn(buttonVariantsValues, buttonClass),
-            onClick: handleDuplicateComponent,
+            onClick: handleDuplicate,
             "data-testid": "duplicate-button",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
@@ -76,7 +65,7 @@ const LayerMenu = ({
           "div",
           {
             className: utils.cn(buttonVariantsValues, buttonClass),
-            onClick: handleDeleteComponent,
+            onClick: handleDelete,
             "data-testid": "delete-button",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [

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

@@ -6,25 +6,15 @@ import { useLayerStore } from '../../../../lib/ui-builder/store/layer-store.mjs'
 import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mjs';
 import { AddComponentsPopover } from './add-component-popover.mjs';
 import { cn } from '../../../../lib/utils.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';
 
-const LayerMenu = ({
-  layerId,
-  handleDuplicateComponent,
-  handleDeleteComponent
-}) => {
+const LayerMenu = ({ layerId }) => {
   const selectedLayer = useLayerStore((state) => state.findLayerById(layerId));
   const isLayerAPage = useLayerStore((state) => state.isLayerAPage(layerId));
   const [popoverOpen, setPopoverOpen] = useState(false);
   const componentRegistry = useEditorStore((state) => state.registry);
-  const allowPagesCreation = useEditorStore(
-    (state) => state.allowPagesCreation
-  );
-  const allowPagesDeletion = useEditorStore(
-    (state) => state.allowPagesDeletion
-  );
-  const canDuplicate = !isLayerAPage || allowPagesCreation;
-  const canDelete = !isLayerAPage || allowPagesDeletion;
+  const { canDuplicate, canDelete, handleDuplicate, handleDelete } = useGlobalLayerActions(layerId);
   const buttonVariantsValues = useMemo(() => {
     return buttonVariants({ variant: "ghost", size: "sm" });
   }, []);
@@ -33,8 +23,7 @@ const LayerMenu = ({
     if (!selectedLayer) return false;
     const componentDef = componentRegistry[selectedLayer.type];
     if (!componentDef) return false;
-    const canAddChildren = "shape" in componentDef.schema && hasAnyChildrenField(componentDef.schema) && !hasChildrenFieldOfTypeString(componentDef.schema);
-    return canAddChildren;
+    return canComponentAcceptChildren(componentDef.schema);
   }, [selectedLayer, componentRegistry]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
@@ -59,7 +48,7 @@ const LayerMenu = ({
           "div",
           {
             className: cn(buttonVariantsValues, buttonClass),
-            onClick: handleDuplicateComponent,
+            onClick: handleDuplicate,
             "data-testid": "duplicate-button",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
@@ -74,7 +63,7 @@ const LayerMenu = ({
           "div",
           {
             className: cn(buttonVariantsValues, buttonClass),
-            onClick: handleDeleteComponent,
+            onClick: handleDelete,
             "data-testid": "delete-button",
             children: [
               /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [

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";