npm - @btst/stack - Versions diffs - 2.0.0 → 2.1.0 - Mend

@btst/stack 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 = [];
         }

package/dist/packages/ui/src/components/ui-builder/internal/layers-panel.mjs CHANGED Viewed

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo, useState, useRef, useCallback, useLayoutEffect } from 'react';
 import isDeepEqual from '../../../../../../_virtual/index.mjs';
 import { useLayerStore } from '../../../lib/ui-builder/store/layer-store.mjs';
+import { isVariableReference } from '../types.mjs';
 import { cn } from '../../../lib/utils.mjs';
 import { hasLayerChildren, findAllParentLayersRecursive } from '../../../lib/ui-builder/store/layer-utils.mjs';
 import { Plus } from 'lucide-react';
@@ -18,9 +19,7 @@ const LayersPanel = ({ className }) => {
     selectedLayerId,
     findLayerById,
     updateLayer,
-    selectLayer,
-    removeLayer,
-    duplicateLayer
+    selectLayer
   } = useLayerStore();
   const pageLayer = findLayerById(selectedPageId);
   const layers = useMemo(() => [pageLayer], [pageLayer]);
@@ -35,9 +34,7 @@ const LayersPanel = ({ className }) => {
       selectedPageId,
       selectedLayerId,
       updateLayer,
-      selectLayer,
-      removeLayer,
-      duplicateLayer
+      selectLayer
     }
   );
 };
@@ -48,9 +45,7 @@ const LayersTree = React__default.memo(
     selectedPageId,
     selectedLayerId,
     updateLayer,
-    selectLayer,
-    removeLayer,
-    duplicateLayer
+    selectLayer
   }) => {
     const [openIdsArray, setOpenIdsArray] = useState([]);
     const prevSelectedLayerId = useRef(selectedLayerId);
@@ -135,10 +130,7 @@ const LayersTree = React__default.memo(
             onToggle: handleNodeToggle,
             level: stat.level,
             selectedLayerId,
-            selectLayer,
-            removeLayer,
-            duplicateLayer,
-            updateLayer
+            selectLayer
           },
           stableKey
         );
@@ -147,9 +139,6 @@ const LayersTree = React__default.memo(
         handleNodeToggle,
         selectedLayerId,
         selectLayer,
-        removeLayer,
-        duplicateLayer,
-        updateLayer,
         layers
       ]
     );
@@ -160,6 +149,8 @@ const LayersTree = React__default.memo(
           processed.children = layer.children.map(processLayer);
         } else if (typeof layer.children === "string") {
           processed.children = [];
+        } else if (isVariableReference(layer.children)) {
+          processed.children = [];
         } else if (!layer.children) {
           processed.children = [];
         }

package/dist/packages/ui/src/components/ui-builder/internal/utils/render-utils.cjs CHANGED Viewed

@@ -37,12 +37,14 @@ function isLayerBeingDraggedOrDescendant(layerId, activeLayerId, pages) {
   return false;
 }
 const RenderLayer = React.memo(
-  ({ layer, componentRegistry, editorConfig, variables, variableValues }) => {
+  ({ layer, componentRegistry, editorConfig, variables, variableValues, functionRegistry }) => {
     const storeVariables = layerStore.useLayerStore((state) => state.variables);
     const pages = layerStore.useLayerStore((state) => state.pages);
     const isLayerAPage = layerStore.useLayerStore((state) => state.isLayerAPage(layer.id));
     const registry = editorStore.useEditorStore((state) => state.registry);
+    const storeFunctionRegistry = editorStore.useEditorStore((state) => state.functionRegistry);
     const dndContext = dndContexts.useDndContext();
+    const effectiveFunctionRegistry = functionRegistry ?? storeFunctionRegistry;
     const effectiveVariables = variables || storeVariables;
     const componentDefinition = componentRegistry[layer.type];
     const prevLayer = React.useRef(layer);
@@ -54,8 +56,8 @@ const RenderLayer = React.memo(
       layer
     }), [layer, componentRegistry]);
     const resolvedProps = React.useMemo(
-      () => variableResolver.resolveVariableReferences(layer.props, effectiveVariables, variableValues),
-      [layer.props, effectiveVariables, variableValues]
+      () => variableResolver.resolveVariableReferences(layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry),
+      [layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry]
     );
     const childEditorConfig = React.useMemo(() => {
       return editorConfig ? { ...editorConfig, zIndex: editorConfig.zIndex + 1, parentUpdated: editorConfig.parentUpdated || !index(prevLayer.current, layer) } : void 0;
@@ -71,7 +73,12 @@ const RenderLayer = React.memo(
       [editorConfig, dndContext.isDragging, canAcceptChildren, isBeingDragged]
     );
     const childProps = React.useMemo(() => {
-      const props = { ...resolvedProps };
+      const props = {};
+      for (const [key, value] of Object.entries(resolvedProps)) {
+        if (!key.startsWith("__function_")) {
+          props[key] = value;
+        }
+      }
       if (showDropZones && layerUtils.hasLayerChildren(layer)) {
         const existingClassName = props.className || "";
         if (!hasPositionClass(existingClassName)) {
@@ -103,7 +110,8 @@ const RenderLayer = React.memo(
             layer: child,
             variables,
             variableValues,
-            editorConfig: childEditorConfig
+            editorConfig: childEditorConfig,
+            functionRegistry
           },
           child.id
         );
@@ -174,9 +182,7 @@ const RenderLayer = React.memo(
         zIndex,
         totalLayers,
         selectedLayer,
-        onSelectElement,
-        handleDuplicateLayer,
-        handleDeleteLayer
+        onSelectElement
       } = editorConfig;
       return /* @__PURE__ */ jsxRuntime.jsx(
         devProfiler.DevProfiler,
@@ -192,8 +198,6 @@ const RenderLayer = React.memo(
               onSelectElement,
               isPageLayer: isLayerAPage,
               totalLayers,
-              onDuplicateLayer: handleDuplicateLayer,
-              onDeleteLayer: handleDeleteLayer,
               children: DragFeedbackWrapper
             },
             layer.id
@@ -213,7 +217,8 @@ const RenderLayer = React.memo(
     const layerEqual = index(prevProps.layer, nextProps.layer);
     const variablesEqual = index(prevProps.variables, nextProps.variables);
     const variableValuesEqual = index(prevProps.variableValues, nextProps.variableValues);
-    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual;
+    const functionRegistryEqual = prevProps.functionRegistry === nextProps.functionRegistry;
+    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual && functionRegistryEqual;
   }
 );
 RenderLayer.displayName = "RenderLayer";

package/dist/packages/ui/src/components/ui-builder/internal/utils/render-utils.mjs CHANGED Viewed

@@ -35,12 +35,14 @@ function isLayerBeingDraggedOrDescendant(layerId, activeLayerId, pages) {
   return false;
 }
 const RenderLayer = memo(
-  ({ layer, componentRegistry, editorConfig, variables, variableValues }) => {
+  ({ layer, componentRegistry, editorConfig, variables, variableValues, functionRegistry }) => {
     const storeVariables = useLayerStore((state) => state.variables);
     const pages = useLayerStore((state) => state.pages);
     const isLayerAPage = useLayerStore((state) => state.isLayerAPage(layer.id));
     const registry = useEditorStore((state) => state.registry);
+    const storeFunctionRegistry = useEditorStore((state) => state.functionRegistry);
     const dndContext = useDndContext();
+    const effectiveFunctionRegistry = functionRegistry ?? storeFunctionRegistry;
     const effectiveVariables = variables || storeVariables;
     const componentDefinition = componentRegistry[layer.type];
     const prevLayer = useRef(layer);
@@ -52,8 +54,8 @@ const RenderLayer = memo(
       layer
     }), [layer, componentRegistry]);
     const resolvedProps = useMemo(
-      () => resolveVariableReferences(layer.props, effectiveVariables, variableValues),
-      [layer.props, effectiveVariables, variableValues]
+      () => resolveVariableReferences(layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry),
+      [layer.props, effectiveVariables, variableValues, effectiveFunctionRegistry]
     );
     const childEditorConfig = useMemo(() => {
       return editorConfig ? { ...editorConfig, zIndex: editorConfig.zIndex + 1, parentUpdated: editorConfig.parentUpdated || !isDeepEqual(prevLayer.current, layer) } : void 0;
@@ -69,7 +71,12 @@ const RenderLayer = memo(
       [editorConfig, dndContext.isDragging, canAcceptChildren, isBeingDragged]
     );
     const childProps = useMemo(() => {
-      const props = { ...resolvedProps };
+      const props = {};
+      for (const [key, value] of Object.entries(resolvedProps)) {
+        if (!key.startsWith("__function_")) {
+          props[key] = value;
+        }
+      }
       if (showDropZones && hasLayerChildren(layer)) {
         const existingClassName = props.className || "";
         if (!hasPositionClass(existingClassName)) {
@@ -101,7 +108,8 @@ const RenderLayer = memo(
             layer: child,
             variables,
             variableValues,
-            editorConfig: childEditorConfig
+            editorConfig: childEditorConfig,
+            functionRegistry
           },
           child.id
         );
@@ -172,9 +180,7 @@ const RenderLayer = memo(
         zIndex,
         totalLayers,
         selectedLayer,
-        onSelectElement,
-        handleDuplicateLayer,
-        handleDeleteLayer
+        onSelectElement
       } = editorConfig;
       return /* @__PURE__ */ jsx(
         DevProfiler,
@@ -190,8 +196,6 @@ const RenderLayer = memo(
               onSelectElement,
               isPageLayer: isLayerAPage,
               totalLayers,
-              onDuplicateLayer: handleDuplicateLayer,
-              onDeleteLayer: handleDeleteLayer,
               children: DragFeedbackWrapper
             },
             layer.id
@@ -211,7 +215,8 @@ const RenderLayer = memo(
     const layerEqual = isDeepEqual(prevProps.layer, nextProps.layer);
     const variablesEqual = isDeepEqual(prevProps.variables, nextProps.variables);
     const variableValuesEqual = isDeepEqual(prevProps.variableValues, nextProps.variableValues);
-    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual;
+    const functionRegistryEqual = prevProps.functionRegistry === nextProps.functionRegistry;
+    return editorConfigEqual && layerEqual && variablesEqual && variableValuesEqual && functionRegistryEqual;
   }
 );
 RenderLayer.displayName = "RenderLayer";