@btst/stack 2.0.1 → 2.2.0

package/dist/packages/ui/src/components/ui-builder/index.cjs

@@ -20,6 +20,7 @@ const tailwindThemePanel = require('./internal/tailwind-theme-panel.cjs');
 const configPanel = require('./internal/config-panel.cjs');
 const variablesPanel = require('./internal/variables-panel.cjs');
 const tooltip = require('../tooltip.cjs');
+const sonner = require('../sonner.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -39,7 +40,8 @@ const UIBuilder = ({
   navLeftChildren,
   navRightChildren,
   showExport = true,
-  blocks
+  blocks,
+  functionRegistry
 }) => {
   const layerStore$1 = useStore.useStore(layerStore.useLayerStore, (state) => state);
   const editorStore$1 = useStore.useStore(editorStore.useEditorStore, (state) => state);
@@ -58,7 +60,7 @@ const UIBuilder = ({
   }, [userPanelConfig, memoizedDefaultTabsContent, navLeftChildren, navRightChildren, showExport]);
   React.useEffect(() => {
     if (editorStore$1 && componentRegistry && !editorStoreInitialized) {
-      editorStore$1.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks);
+      editorStore$1.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks, functionRegistry);
       setEditorStoreInitialized(true);
     }
   }, [
@@ -69,7 +71,8 @@ const UIBuilder = ({
     allowPagesCreation,
     allowPagesDeletion,
     allowVariableEditing,
-    blocks
+    blocks,
+    functionRegistry
   ]);
   React.useEffect(() => {
     if (layerStore$1 && editorStore$1) {
@@ -110,7 +113,10 @@ const UIBuilder = ({
       defaultTheme: "system",
       enableSystem: true,
       disableTransitionOnChange: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: layout })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipProvider, { children: [
+        layout,
+        /* @__PURE__ */ jsxRuntime.jsx(sonner.Toaster, { position: "bottom-right" })
+      ] })
     }
   );
 };

package/dist/packages/ui/src/components/ui-builder/index.mjs

@@ -16,6 +16,7 @@ import { TailwindThemePanel } from './internal/tailwind-theme-panel.mjs';
 import { ConfigPanel } from './internal/config-panel.mjs';
 import { VariablesPanel } from './internal/variables-panel.mjs';
 import { TooltipProvider } from '../tooltip.mjs';
+import { Toaster } from '../sonner.mjs';
 
 const UIBuilder = ({
   initialLayers,
@@ -31,7 +32,8 @@ const UIBuilder = ({
   navLeftChildren,
   navRightChildren,
   showExport = true,
-  blocks
+  blocks,
+  functionRegistry
 }) => {
   const layerStore = useStore(useLayerStore, (state) => state);
   const editorStore = useStore(useEditorStore, (state) => state);
@@ -50,7 +52,7 @@ const UIBuilder = ({
   }, [userPanelConfig, memoizedDefaultTabsContent, navLeftChildren, navRightChildren, showExport]);
   useEffect(() => {
     if (editorStore && componentRegistry && !editorStoreInitialized) {
-      editorStore.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks);
+      editorStore.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks, functionRegistry);
       setEditorStoreInitialized(true);
     }
   }, [
@@ -61,7 +63,8 @@ const UIBuilder = ({
     allowPagesCreation,
     allowPagesDeletion,
     allowVariableEditing,
-    blocks
+    blocks,
+    functionRegistry
   ]);
   useEffect(() => {
     if (layerStore && editorStore) {
@@ -102,7 +105,10 @@ const UIBuilder = ({
       defaultTheme: "system",
       enableSystem: true,
       disableTransitionOnChange: true,
-      children: /* @__PURE__ */ jsx(TooltipProvider, { children: layout })
+      children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+        layout,
+        /* @__PURE__ */ jsx(Toaster, { position: "bottom-right" })
+      ] })
     }
   );
 };

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

@@ -18,6 +18,7 @@ const utils = require('../../../../lib/utils.cjs');
 const floatingUi_react = require('../../../../../../../node_modules/.pnpm/@floating-ui_react@0.27.16_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.cjs');
 const getScrollParent = require('../../../../lib/ui-builder/utils/get-scroll-parent.cjs');
 const autoFrame = require('../canvas/auto-frame.cjs');
+const layerContextMenu = require('./layer-context-menu.cjs');
 const floatingUi_reactDom = require('../../../../../../../node_modules/.pnpm/@floating-ui_react-dom@2.1.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs');
 const floatingUi_dom = require('../../../../../../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.cjs');
 
@@ -29,8 +30,6 @@ const ElementSelector = ({
   isSelected,
   zIndex,
   onSelectElement,
-  onDuplicateLayer,
-  onDeleteLayer,
   children,
   isPageLayer = false
 }) => {
@@ -86,34 +85,34 @@ const ElementSelector = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(MeasureRange, { debug: false, onChange: handleBoundingRectChange, children }),
     boundingRect && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      layerContextMenu.LayerContextMenu,
       {
-        onClick: handleClick,
-        onMouseDown: handlePointerEvent,
-        onMouseUp: handlePointerEvent,
-        onDoubleClick: handlePointerEvent,
-        onContextMenu: handlePointerEvent,
-        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-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
+        layerId: layer.id,
+        isSelected,
+        onSelect: onSelectElement,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: handleClick,
+            onMouseDown: handlePointerEvent,
+            onMouseUp: handlePointerEvent,
+            onDoubleClick: handlePointerEvent,
+            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-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
+          }
+        )
       }
     ),
     isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-[9999]", ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-blue-500", children: [
       !isPageLayer && isSelected && /* @__PURE__ */ jsxRuntime.jsx(dragHandle.DragHandle, { layerId: layer.id, layerType: layer.type }),
       !isBeingDragged && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white  px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-white/20 ml-1" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          layerMenu.LayerMenu,
-          {
-            layerId: layer.id,
-            handleDuplicateComponent: onDuplicateLayer,
-            handleDeleteComponent: onDeleteLayer
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(layerMenu.LayerMenu, { layerId: layer.id })
       ] })
     ] }) })
   ] });

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

@@ -16,6 +16,7 @@ import { cn } from '../../../../lib/utils.mjs';
 import { useFloating } from '../../../../../../../node_modules/.pnpm/@floating-ui_react@0.27.16_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.mjs';
 import { getScrollParent } from '../../../../lib/ui-builder/utils/get-scroll-parent.mjs';
 import { useFrame } from '../canvas/auto-frame.mjs';
+import { LayerContextMenu } from './layer-context-menu.mjs';
 import { offset, shift, limitShift } from '../../../../../../../node_modules/.pnpm/@floating-ui_react-dom@2.1.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs';
 import { autoUpdate } from '../../../../../../../node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs';
 
@@ -27,8 +28,6 @@ const ElementSelector = ({
   isSelected,
   zIndex,
   onSelectElement,
-  onDuplicateLayer,
-  onDeleteLayer,
   children,
   isPageLayer = false
 }) => {
@@ -84,34 +83,34 @@ const ElementSelector = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(MeasureRange, { debug: false, onChange: handleBoundingRectChange, children }),
     boundingRect && /* @__PURE__ */ jsx(
-      "div",
+      LayerContextMenu,
       {
-        onClick: handleClick,
-        onMouseDown: handlePointerEvent,
-        onMouseUp: handlePointerEvent,
-        onDoubleClick: handlePointerEvent,
-        onContextMenu: handlePointerEvent,
-        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-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
+        layerId: layer.id,
+        isSelected,
+        onSelect: onSelectElement,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: handleClick,
+            onMouseDown: handlePointerEvent,
+            onMouseUp: handlePointerEvent,
+            onDoubleClick: handlePointerEvent,
+            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-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
+          }
+        )
       }
     ),
     isSelected && /* @__PURE__ */ jsx("div", { className: "z-[9999]", ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-blue-500", children: [
       !isPageLayer && isSelected && /* @__PURE__ */ jsx(DragHandle, { layerId: layer.id, layerType: layer.type }),
       !isBeingDragged && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-white  px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-white px-[1px] whitespace-nowrap cursor-default", children: layer.name?.toLowerCase().startsWith(layer.type.toLowerCase()) ? layer.type.replaceAll("_", "") : `${layer.name} (${layer.type.replaceAll("_", "")})` }),
         /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-white/20 ml-1" }),
-        /* @__PURE__ */ jsx(
-          LayerMenu,
-          {
-            layerId: layer.id,
-            handleDuplicateComponent: onDuplicateLayer,
-            handleDeleteComponent: onDeleteLayer
-          }
-        )
+        /* @__PURE__ */ jsx(LayerMenu, { layerId: layer.id })
       ] })
     ] }) })
   ] });

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

@@ -0,0 +1,261 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const LucideIcons = require('lucide-react');
+const editorStore = require('../../../../lib/ui-builder/store/editor-store.cjs');
+const layerStore = require('../../../../lib/ui-builder/store/layer-store.cjs');
+const schemaUtils = require('../../../../lib/ui-builder/store/schema-utils.cjs');
+const shortcutRegistry = require('../../../../lib/ui-builder/shortcuts/shortcut-registry.cjs');
+const useLayerActions = require('../../../../lib/ui-builder/hooks/use-layer-actions.cjs');
+const pasteValidation = require('../../../../lib/ui-builder/utils/paste-validation.cjs');
+const addComponentPopover = require('./add-component-popover.cjs');
+const utils = require('../../../../lib/utils.cjs');
+const autoFrame = require('../canvas/auto-frame.cjs');
+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');
+require('../../../../lib/ui-builder/context/dnd-context-colission-utils.cjs');
+const dndContexts = require('../../../../lib/ui-builder/context/dnd-contexts.cjs');
+const floatingUi_react = require('../../../../../../../node_modules/.pnpm/@floating-ui_react@0.27.16_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react/dist/floating-ui.react.cjs');
+const floatingUi_reactDom = require('../../../../../../../node_modules/.pnpm/@floating-ui_react-dom@2.1.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const LayerContextMenuPortal = () => {
+  const contextMenu = editorStore.useEditorStore((state) => state.contextMenu);
+  const closeContextMenu = editorStore.useEditorStore((state) => state.closeContextMenu);
+  const selectedLayerId = layerStore.useLayerStore((state) => state.selectedLayerId);
+  const { isDragging } = dndContexts.useDndContext();
+  const [mounted, setMounted] = React.useState(false);
+  const contextMenuLayerIdRef = React.useRef(null);
+  const frameContext = autoFrame.useFrame();
+  const { refs, floatingStyles } = floatingUi_react.useFloating({
+    placement: "bottom-start",
+    middleware: [
+      floatingUi_reactDom.offset(2),
+      // Small offset from cursor
+      floatingUi_reactDom.flip({
+        fallbackPlacements: ["top-start", "bottom-end", "top-end"],
+        padding: 8
+      }),
+      floatingUi_reactDom.shift({
+        crossAxis: true,
+        limiter: floatingUi_reactDom.limitShift(),
+        padding: 8
+      })
+    ]
+  });
+  React.useEffect(() => {
+    if (!contextMenu.open) return;
+    const virtualReference = {
+      getBoundingClientRect: () => ({
+        x: contextMenu.x,
+        y: contextMenu.y,
+        width: 0,
+        height: 0,
+        top: contextMenu.y,
+        left: contextMenu.x,
+        right: contextMenu.x,
+        bottom: contextMenu.y
+      })
+    };
+    refs.setPositionReference(virtualReference);
+  }, [contextMenu.open, contextMenu.x, contextMenu.y, refs]);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  React.useEffect(() => {
+    if (contextMenu.open && contextMenu.layerId) {
+      contextMenuLayerIdRef.current = contextMenu.layerId;
+    } else {
+      contextMenuLayerIdRef.current = null;
+    }
+  }, [contextMenu.open, contextMenu.layerId]);
+  React.useEffect(() => {
+    if (contextMenu.open && contextMenuLayerIdRef.current && selectedLayerId !== contextMenuLayerIdRef.current) {
+      closeContextMenu();
+    }
+  }, [selectedLayerId, contextMenu.open, closeContextMenu]);
+  React.useEffect(() => {
+    if (isDragging && contextMenu.open) {
+      closeContextMenu();
+    }
+  }, [isDragging, contextMenu.open, closeContextMenu]);
+  React.useEffect(() => {
+    if (!contextMenu.open) return;
+    const handleClickOutside = (e) => {
+      const floatingEl = refs.floating.current;
+      if (floatingEl && !floatingEl.contains(e.target)) {
+        closeContextMenu();
+      }
+    };
+    const handleContextMenuOutside = (e) => {
+      const floatingEl = refs.floating.current;
+      if (floatingEl && !floatingEl.contains(e.target)) {
+        closeContextMenu();
+      }
+    };
+    const targetDoc = frameContext.document ?? document;
+    targetDoc.addEventListener("mousedown", handleClickOutside);
+    targetDoc.addEventListener("contextmenu", handleContextMenuOutside);
+    return () => {
+      targetDoc.removeEventListener("mousedown", handleClickOutside);
+      targetDoc.removeEventListener("contextmenu", handleContextMenuOutside);
+    };
+  }, [contextMenu.open, closeContextMenu, refs.floating, frameContext.document]);
+  React.useEffect(() => {
+    if (!contextMenu.open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        closeContextMenu();
+      }
+    };
+    const targetDoc = frameContext.document ?? document;
+    targetDoc.addEventListener("keydown", handleKeyDown);
+    return () => targetDoc.removeEventListener("keydown", handleKeyDown);
+  }, [contextMenu.open, closeContextMenu, frameContext.document]);
+  if (!mounted || !contextMenu.open || !contextMenu.layerId) {
+    return null;
+  }
+  const portalTarget = frameContext.document?.body || document.body;
+  const menuContent = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: refs.setFloating,
+      "data-testid": "layer-context-menu-portal",
+      className: "z-[10000] min-w-[14rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+      style: floatingStyles,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuPortalItems,
+        {
+          layerId: contextMenu.layerId,
+          onAction: closeContextMenu
+        }
+      )
+    }
+  );
+  return ReactDOM.createPortal(menuContent, portalTarget);
+};
+const ContextMenuPortalItems = ({
+  layerId,
+  onAction
+}) => {
+  const selectedLayer = layerStore.useLayerStore((state) => state.findLayerById(layerId));
+  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
+  const componentRegistry = editorStore.useEditorStore((state) => state.registry);
+  const clipboardLayer = editorStore.useEditorStore((state) => state.clipboard.layer);
+  const {
+    canDuplicate,
+    canDelete,
+    canCut,
+    handleCopy,
+    handleCut,
+    handlePaste,
+    handleDelete,
+    handleDuplicate
+  } = useLayerActions.useGlobalLayerActions(layerId);
+  const canPaste = React__default.useMemo(() => {
+    if (!clipboardLayer || !selectedLayer) return false;
+    return pasteValidation.canPasteLayer(clipboardLayer, layerId, componentRegistry, findLayerById);
+  }, [clipboardLayer, layerId, componentRegistry, findLayerById, selectedLayer]);
+  const canRenderAddChild = React__default.useMemo(() => {
+    if (!selectedLayer) return false;
+    const componentDef = componentRegistry[selectedLayer.type];
+    if (!componentDef) return false;
+    return schemaUtils.canComponentAcceptChildren(componentDef.schema);
+  }, [selectedLayer, componentRegistry]);
+  const handleCopyClick = React.useCallback(() => {
+    handleCopy();
+    onAction();
+  }, [handleCopy, onAction]);
+  const handleCutClick = React.useCallback(() => {
+    handleCut();
+    onAction();
+  }, [handleCut, onAction]);
+  const handlePasteClick = React.useCallback(() => {
+    handlePaste();
+    onAction();
+  }, [handlePaste, onAction]);
+  const handleDuplicateClick = React.useCallback(() => {
+    handleDuplicate();
+    onAction();
+  }, [handleDuplicate, onAction]);
+  const handleDeleteClick = React.useCallback(() => {
+    handleDelete();
+    onAction();
+  }, [handleDelete, onAction]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    canRenderAddChild && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(addComponentPopover.AddComponentsPopover, { parentLayerId: layerId, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuItem, { onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
+        "Add Child"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(MenuSeparator, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(MenuItem, { onClick: handleCopyClick, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { className: "mr-2 h-4 w-4" }),
+      "Copy",
+      /* @__PURE__ */ jsxRuntime.jsx(MenuShortcut, { children: shortcutRegistry.SHORTCUTS.copy.shortcutDisplay })
+    ] }),
+    canCut && /* @__PURE__ */ jsxRuntime.jsxs(MenuItem, { onClick: handleCutClick, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Scissors, { className: "mr-2 h-4 w-4" }),
+      "Cut",
+      /* @__PURE__ */ jsxRuntime.jsx(MenuShortcut, { children: shortcutRegistry.SHORTCUTS.cut.shortcutDisplay })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(MenuItem, { onClick: handlePasteClick, disabled: !canPaste, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ClipboardPaste, { className: "mr-2 h-4 w-4" }),
+      "Paste",
+      /* @__PURE__ */ jsxRuntime.jsx(MenuShortcut, { children: shortcutRegistry.SHORTCUTS.paste.shortcutDisplay })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(MenuSeparator, {}),
+    canDuplicate && /* @__PURE__ */ jsxRuntime.jsxs(MenuItem, { onClick: handleDuplicateClick, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CopyPlus, { className: "mr-2 h-4 w-4" }),
+      "Duplicate",
+      /* @__PURE__ */ jsxRuntime.jsx(MenuShortcut, { children: shortcutRegistry.SHORTCUTS.duplicate.shortcutDisplay })
+    ] }),
+    canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+      MenuItem,
+      {
+        onClick: handleDeleteClick,
+        className: "text-destructive focus:text-destructive",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash, { className: "mr-2 h-4 w-4" }),
+          "Delete",
+          /* @__PURE__ */ jsxRuntime.jsx(MenuShortcut, { children: shortcutRegistry.SHORTCUTS.delete.shortcutDisplay })
+        ]
+      }
+    )
+  ] });
+};
+const MenuItem = ({
+  children,
+  onClick,
+  disabled,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "menuitem",
+      "data-testid": "menu-item",
+      onClick: disabled ? void 0 : onClick,
+      className: utils.cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children
+    }
+  );
+};
+const MenuSeparator = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-1 my-1 h-px bg-muted", "data-testid": "menu-separator" });
+};
+const MenuShortcut = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs tracking-widest opacity-60", "data-testid": "menu-shortcut", children });
+};
+
+exports.LayerContextMenuPortal = LayerContextMenuPortal;