@btst/stack 2.0.1 → 2.2.0

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

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo } from 'react';
 import { Button } from '../../button.mjs';
 import { Input } from '../../input.mjs';
 import { Label } from '../../label.mjs';
@@ -20,6 +20,7 @@ const VariablesPanel = ({
   const [editingId, setEditingId] = useState(null);
   const incrementRevision = useEditorStore((state) => state.incrementRevision);
   const allowVariableEditing = useEditorStore((state) => state.allowVariableEditing);
+  const functionRegistry = useEditorStore((state) => state.functionRegistry);
   const handleAddVariable = useCallback(
     (name, type, defaultValue) => {
       addVariable(name, type, defaultValue);
@@ -62,7 +63,8 @@ const VariablesPanel = ({
       AddVariableForm,
       {
         onSave: handleAddVariable,
-        onCancel: handleSetIsNotAdding
+        onCancel: handleSetIsNotAdding,
+        functionRegistry
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "space-y-2", children: variables.map((variable) => /* @__PURE__ */ jsx(
@@ -74,7 +76,8 @@ const VariablesPanel = ({
         onSave: handleOnSave,
         onCancel: handleOnCancel,
         onDelete: handleOnDelete,
-        editVariables: allowVariableEditing
+        editVariables: allowVariableEditing,
+        functionRegistry
       },
       variable.id
     )) }),
@@ -83,23 +86,37 @@ const VariablesPanel = ({
 };
 const AddVariableForm = ({
   onSave,
-  onCancel
+  onCancel,
+  functionRegistry
 }) => {
   const [name, setName] = useState("");
   const [type, setType] = useState("string");
   const [defaultValue, setDefaultValue] = useState("");
   const [errors, setErrors] = useState(EMPTY_OBJECT);
+  const functionOptions = useMemo(() => {
+    if (!functionRegistry) return [];
+    return Object.entries(functionRegistry).map(([id, def]) => ({
+      id,
+      name: def.name,
+      description: def.description
+    }));
+  }, [functionRegistry]);
+  const hasFunctions = functionOptions.length > 0;
   const validateForm = useCallback(() => {
     const newErrors = {};
     if (!name.trim()) {
       newErrors.name = "Name is required";
     }
-    if (!defaultValue.trim()) {
+    if (type === "function") {
+      if (!defaultValue) {
+        newErrors.defaultValue = "Please select a function";
+      }
+    } else if (!defaultValue.trim()) {
       newErrors.defaultValue = "Preview value is required";
     }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
-  }, [name, defaultValue]);
+  }, [name, defaultValue, type]);
   const handleSave = useCallback(() => {
     if (!validateForm()) return;
     let parsedValue = defaultValue;
@@ -122,7 +139,10 @@ const AddVariableForm = ({
     [errors.name]
   );
   const handleTypeChange = useCallback(
-    (value) => setType(value),
+    (value) => {
+      setType(value);
+      setDefaultValue("");
+    },
     []
   );
   const handleDefaultValueChange = useCallback(
@@ -133,6 +153,14 @@ const AddVariableForm = ({
     },
     [errors.defaultValue]
   );
+  const handleFunctionSelect = useCallback(
+    (value) => {
+      setDefaultValue(value);
+      if (errors.defaultValue)
+        setErrors((prev) => ({ ...prev, defaultValue: void 0 }));
+    },
+    [errors.defaultValue]
+  );
   return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm", children: "Add New Variable" }) }),
     /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
@@ -160,11 +188,25 @@ const AddVariableForm = ({
           /* @__PURE__ */ jsxs(SelectContent, { children: [
             /* @__PURE__ */ jsx(SelectItem, { value: "string", children: "String" }),
             /* @__PURE__ */ jsx(SelectItem, { value: "number", children: "Number" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "boolean", children: "Boolean" })
+            /* @__PURE__ */ jsx(SelectItem, { value: "boolean", children: "Boolean" }),
+            hasFunctions && /* @__PURE__ */ jsx(SelectItem, { value: "function", children: "Function" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { children: type === "function" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "var-function", children: [
+          "Function ",
+          /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(Select, { value: defaultValue, onValueChange: handleFunctionSelect, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: errors.defaultValue ? "border-red-500" : "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a function..." }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: functionOptions.map((fn) => /* @__PURE__ */ jsx(SelectItem, { value: fn.id, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { children: fn.name }),
+            fn.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: fn.description })
+          ] }) }, fn.id)) })
+        ] }),
+        errors.defaultValue && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(Label, { htmlFor: "var-default", children: [
           "Preview Value ",
           /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
@@ -180,7 +222,7 @@ const AddVariableForm = ({
           }
         ),
         errors.defaultValue && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleSave, children: [
           /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-2" }),
@@ -201,7 +243,8 @@ const VariableCard = ({
   onSave,
   onCancel,
   onDelete,
-  editVariables
+  editVariables,
+  functionRegistry
 }) => {
   const [name, setName] = useState(variable.name);
   const [type, setType] = useState(variable.type);
@@ -209,17 +252,35 @@ const VariableCard = ({
     String(variable.defaultValue)
   );
   const [errors, setErrors] = useState(EMPTY_OBJECT);
+  const functionOptions = useMemo(() => {
+    if (!functionRegistry) return [];
+    return Object.entries(functionRegistry).map(([id, def]) => ({
+      id,
+      name: def.name,
+      description: def.description
+    }));
+  }, [functionRegistry]);
+  const hasFunctions = functionOptions.length > 0;
+  const getFunctionDisplayName = useCallback((funcId) => {
+    if (!functionRegistry) return funcId;
+    const fn = functionRegistry[funcId];
+    return fn ? fn.name : funcId;
+  }, [functionRegistry]);
   const validateForm = useCallback(() => {
     const newErrors = {};
     if (!name.trim()) {
       newErrors.name = "Name is required";
     }
-    if (!defaultValue.trim()) {
+    if (type === "function") {
+      if (!defaultValue) {
+        newErrors.defaultValue = "Please select a function";
+      }
+    } else if (!defaultValue.trim()) {
       newErrors.defaultValue = "Preview value is required";
     }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
-  }, [name, defaultValue]);
+  }, [name, defaultValue, type]);
   const handleSave = useCallback(() => {
     if (!validateForm()) return;
     let parsedValue = defaultValue;
@@ -242,7 +303,10 @@ const VariableCard = ({
     [errors.name]
   );
   const handleTypeChange = useCallback(
-    (value) => setType(value),
+    (value) => {
+      setType(value);
+      setDefaultValue("");
+    },
     []
   );
   const handleDefaultValueChange = useCallback(
@@ -253,6 +317,14 @@ const VariableCard = ({
     },
     [errors.defaultValue]
   );
+  const handleFunctionSelect = useCallback(
+    (value) => {
+      setDefaultValue(value);
+      if (errors.defaultValue)
+        setErrors((prev) => ({ ...prev, defaultValue: void 0 }));
+    },
+    [errors.defaultValue]
+  );
   const handleOnEdit = useCallback(() => {
     onEdit(variable.id);
   }, [onEdit, variable.id]);
@@ -284,11 +356,25 @@ const VariableCard = ({
           /* @__PURE__ */ jsxs(SelectContent, { children: [
             /* @__PURE__ */ jsx(SelectItem, { value: "string", children: "String" }),
             /* @__PURE__ */ jsx(SelectItem, { value: "number", children: "Number" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "boolean", children: "Boolean" })
+            /* @__PURE__ */ jsx(SelectItem, { value: "boolean", children: "Boolean" }),
+            hasFunctions && /* @__PURE__ */ jsx(SelectItem, { value: "function", children: "Function" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { children: type === "function" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: `edit-function-${variable.id}`, children: [
+          "Function ",
+          /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(Select, { value: defaultValue, onValueChange: handleFunctionSelect, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: errors.defaultValue ? "border-red-500" : "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a function..." }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: functionOptions.map((fn) => /* @__PURE__ */ jsx(SelectItem, { value: fn.id, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { children: fn.name }),
+            fn.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: fn.description })
+          ] }) }, fn.id)) })
+        ] }),
+        errors.defaultValue && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(Label, { htmlFor: `edit-default-${variable.id}`, children: [
           "Preview Value ",
           /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
@@ -304,7 +390,7 @@ const VariableCard = ({
           }
         ),
         errors.defaultValue && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 mt-1", children: errors.defaultValue })
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleSave, children: [
           /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-2" }),
@@ -323,7 +409,7 @@ const VariableCard = ({
         /* @__PURE__ */ jsx("span", { className: "font-medium", children: variable.name }),
         /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted px-2 py-1 rounded", children: variable.type })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: String(variable.defaultValue) })
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: variable.type === "function" ? getFunctionDisplayName(String(variable.defaultValue)) : String(variable.defaultValue) })
     ] }),
     editVariables && /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
       /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: handleOnEdit, children: /* @__PURE__ */ jsx(Edit2, { className: "h-4 w-4" }) }),
@@ -339,6 +425,8 @@ function getPlaceholderForType(type) {
       return "0";
     case "boolean":
       return "true";
+    case "function":
+      return "Select a function...";
     default:
       return "";
   }

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

@@ -15,7 +15,8 @@ const LayerRenderer = React__default.memo(function LayerRenderer2({
   editorConfig,
   componentRegistry,
   variables,
-  variableValues
+  variableValues,
+  functionRegistry
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(devProfiler.DevProfiler, { id: "LayerRenderer", threshold: 30, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
     renderUtils.RenderLayer,
@@ -24,7 +25,8 @@ const LayerRenderer = React__default.memo(function LayerRenderer2({
       editorConfig,
       componentRegistry,
       variables,
-      variableValues
+      variableValues,
+      functionRegistry
     }
   ) }) });
 });

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

@@ -9,7 +9,8 @@ const LayerRenderer = React__default.memo(function LayerRenderer2({
   editorConfig,
   componentRegistry,
   variables,
-  variableValues
+  variableValues,
+  functionRegistry
 }) {
   return /* @__PURE__ */ jsx(DevProfiler, { id: "LayerRenderer", threshold: 30, children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
     RenderLayer,
@@ -18,7 +19,8 @@ const LayerRenderer = React__default.memo(function LayerRenderer2({
       editorConfig,
       componentRegistry,
       variables,
-      variableValues
+      variableValues,
+      functionRegistry
     }
   ) }) });
 });

package/dist/packages/ui/src/hooks/use-keyboard-shortcuts.cjs

@@ -9,7 +9,9 @@ function useKeyboardShortcuts(combinations) {
         const { keys: { ctrlKey, metaKey, shiftKey, altKey }, key, handler } = combo;
         const isMatch = (ctrlKey === void 0 || event.ctrlKey === ctrlKey) && (metaKey === void 0 || event.metaKey === metaKey) && (shiftKey === void 0 || event.shiftKey === shiftKey) && (altKey === void 0 || event.altKey === altKey) && event.key.toLowerCase() === key.toLowerCase();
         if (isMatch) {
-          event.preventDefault();
+          if (combo.preventDefault !== false) {
+            event.preventDefault();
+          }
           handler(event);
         }
       });

package/dist/packages/ui/src/hooks/use-keyboard-shortcuts.mjs

@@ -7,7 +7,9 @@ function useKeyboardShortcuts(combinations) {
         const { keys: { ctrlKey, metaKey, shiftKey, altKey }, key, handler } = combo;
         const isMatch = (ctrlKey === void 0 || event.ctrlKey === ctrlKey) && (metaKey === void 0 || event.metaKey === metaKey) && (shiftKey === void 0 || event.shiftKey === shiftKey) && (altKey === void 0 || event.altKey === altKey) && event.key.toLowerCase() === key.toLowerCase();
         if (isMatch) {
-          event.preventDefault();
+          if (combo.preventDefault !== false) {
+            event.preventDefault();
+          }
           handler(event);
         }
       });

package/dist/packages/ui/src/lib/ui-builder/hooks/use-layer-actions.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+const React = require('react');
+const layerStore = require('../store/layer-store.cjs');
+const editorStore = require('../store/editor-store.cjs');
+const layerUtils = require('../store/layer-utils.cjs');
+const pasteValidation = require('../utils/paste-validation.cjs');
+
+function useGlobalLayerActions(layerId) {
+  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
+  const removeLayer = layerStore.useLayerStore((state) => state.removeLayer);
+  const duplicateLayer = layerStore.useLayerStore((state) => state.duplicateLayer);
+  const addLayerDirect = layerStore.useLayerStore((state) => state.addLayerDirect);
+  const isLayerAPage = layerStore.useLayerStore((state) => state.isLayerAPage);
+  const componentRegistry = editorStore.useEditorStore((state) => state.registry);
+  const allowPagesCreation = editorStore.useEditorStore((state) => state.allowPagesCreation);
+  const allowPagesDeletion = editorStore.useEditorStore((state) => state.allowPagesDeletion);
+  const setClipboard = editorStore.useEditorStore((state) => state.setClipboard);
+  const clearClipboard = editorStore.useEditorStore((state) => state.clearClipboard);
+  const getEffectiveLayerId = React.useCallback(
+    () => layerId ?? layerStore.useLayerStore.getState().selectedLayerId,
+    [layerId]
+  );
+  const handleCopy = React.useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const layer = findLayerById(effectiveLayerId);
+    if (!layer) return;
+    const clonedLayer = layerUtils.duplicateWithNewIdsAndName(layer, false);
+    setClipboard({
+      layer: clonedLayer,
+      isCut: false,
+      sourceLayerId: effectiveLayerId
+    });
+  }, [getEffectiveLayerId, findLayerById, setClipboard]);
+  const handleCut = React.useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const layer = findLayerById(effectiveLayerId);
+    if (!layer) return;
+    const isPage2 = isLayerAPage(effectiveLayerId);
+    if (isPage2 && !allowPagesDeletion) return;
+    const clonedLayer = layerUtils.duplicateWithNewIdsAndName(layer, false);
+    setClipboard({
+      layer: clonedLayer,
+      isCut: true,
+      sourceLayerId: effectiveLayerId
+    });
+    removeLayer(effectiveLayerId);
+  }, [getEffectiveLayerId, findLayerById, isLayerAPage, allowPagesDeletion, removeLayer, setClipboard]);
+  const handlePaste = React.useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const currentClipboard = editorStore.useEditorStore.getState().clipboard;
+    if (!currentClipboard.layer) return;
+    if (!pasteValidation.canPasteLayer(currentClipboard.layer, effectiveLayerId, componentRegistry, findLayerById)) {
+      return;
+    }
+    const layerToAdd = layerUtils.duplicateWithNewIdsAndName(currentClipboard.layer, false);
+    addLayerDirect(layerToAdd, effectiveLayerId);
+    if (currentClipboard.isCut) {
+      clearClipboard();
+    }
+  }, [getEffectiveLayerId, componentRegistry, findLayerById, addLayerDirect, clearClipboard]);
+  const handleDelete = React.useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const isPage2 = isLayerAPage(effectiveLayerId);
+    if (isPage2 && !allowPagesDeletion) return;
+    removeLayer(effectiveLayerId);
+  }, [getEffectiveLayerId, isLayerAPage, allowPagesDeletion, removeLayer]);
+  const handleDuplicate = React.useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const isPage2 = isLayerAPage(effectiveLayerId);
+    if (isPage2 && !allowPagesCreation) return;
+    duplicateLayer(effectiveLayerId);
+  }, [getEffectiveLayerId, isLayerAPage, allowPagesCreation, duplicateLayer]);
+  const getCanPaste = React.useCallback(
+    () => {
+      const effectiveLayerId = getEffectiveLayerId();
+      if (!effectiveLayerId) return false;
+      const { clipboard } = editorStore.useEditorStore.getState();
+      if (!clipboard.layer) return false;
+      return pasteValidation.canPasteLayer(clipboard.layer, effectiveLayerId, componentRegistry, findLayerById);
+    },
+    [getEffectiveLayerId, componentRegistry, findLayerById]
+  );
+  const effectiveLayerIdForPermissions = getEffectiveLayerId();
+  const isPage = effectiveLayerIdForPermissions ? isLayerAPage(effectiveLayerIdForPermissions) : false;
+  const canDuplicate = !isPage || allowPagesCreation;
+  const canDelete = !isPage || allowPagesDeletion;
+  const canCut = canDelete;
+  return {
+    getCanPaste,
+    canDuplicate,
+    canDelete,
+    canCut,
+    handleCopy,
+    handleCut,
+    handlePaste,
+    handleDelete,
+    handleDuplicate
+  };
+}
+
+exports.useGlobalLayerActions = useGlobalLayerActions;

package/dist/packages/ui/src/lib/ui-builder/hooks/use-layer-actions.mjs

@@ -0,0 +1,105 @@
+import { useCallback } from 'react';
+import { useLayerStore } from '../store/layer-store.mjs';
+import { useEditorStore } from '../store/editor-store.mjs';
+import { duplicateWithNewIdsAndName } from '../store/layer-utils.mjs';
+import { canPasteLayer } from '../utils/paste-validation.mjs';
+
+function useGlobalLayerActions(layerId) {
+  const findLayerById = useLayerStore((state) => state.findLayerById);
+  const removeLayer = useLayerStore((state) => state.removeLayer);
+  const duplicateLayer = useLayerStore((state) => state.duplicateLayer);
+  const addLayerDirect = useLayerStore((state) => state.addLayerDirect);
+  const isLayerAPage = useLayerStore((state) => state.isLayerAPage);
+  const componentRegistry = useEditorStore((state) => state.registry);
+  const allowPagesCreation = useEditorStore((state) => state.allowPagesCreation);
+  const allowPagesDeletion = useEditorStore((state) => state.allowPagesDeletion);
+  const setClipboard = useEditorStore((state) => state.setClipboard);
+  const clearClipboard = useEditorStore((state) => state.clearClipboard);
+  const getEffectiveLayerId = useCallback(
+    () => layerId ?? useLayerStore.getState().selectedLayerId,
+    [layerId]
+  );
+  const handleCopy = useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const layer = findLayerById(effectiveLayerId);
+    if (!layer) return;
+    const clonedLayer = duplicateWithNewIdsAndName(layer, false);
+    setClipboard({
+      layer: clonedLayer,
+      isCut: false,
+      sourceLayerId: effectiveLayerId
+    });
+  }, [getEffectiveLayerId, findLayerById, setClipboard]);
+  const handleCut = useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const layer = findLayerById(effectiveLayerId);
+    if (!layer) return;
+    const isPage2 = isLayerAPage(effectiveLayerId);
+    if (isPage2 && !allowPagesDeletion) return;
+    const clonedLayer = duplicateWithNewIdsAndName(layer, false);
+    setClipboard({
+      layer: clonedLayer,
+      isCut: true,
+      sourceLayerId: effectiveLayerId
+    });
+    removeLayer(effectiveLayerId);
+  }, [getEffectiveLayerId, findLayerById, isLayerAPage, allowPagesDeletion, removeLayer, setClipboard]);
+  const handlePaste = useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const currentClipboard = useEditorStore.getState().clipboard;
+    if (!currentClipboard.layer) return;
+    if (!canPasteLayer(currentClipboard.layer, effectiveLayerId, componentRegistry, findLayerById)) {
+      return;
+    }
+    const layerToAdd = duplicateWithNewIdsAndName(currentClipboard.layer, false);
+    addLayerDirect(layerToAdd, effectiveLayerId);
+    if (currentClipboard.isCut) {
+      clearClipboard();
+    }
+  }, [getEffectiveLayerId, componentRegistry, findLayerById, addLayerDirect, clearClipboard]);
+  const handleDelete = useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const isPage2 = isLayerAPage(effectiveLayerId);
+    if (isPage2 && !allowPagesDeletion) return;
+    removeLayer(effectiveLayerId);
+  }, [getEffectiveLayerId, isLayerAPage, allowPagesDeletion, removeLayer]);
+  const handleDuplicate = useCallback(() => {
+    const effectiveLayerId = getEffectiveLayerId();
+    if (!effectiveLayerId) return;
+    const isPage2 = isLayerAPage(effectiveLayerId);
+    if (isPage2 && !allowPagesCreation) return;
+    duplicateLayer(effectiveLayerId);
+  }, [getEffectiveLayerId, isLayerAPage, allowPagesCreation, duplicateLayer]);
+  const getCanPaste = useCallback(
+    () => {
+      const effectiveLayerId = getEffectiveLayerId();
+      if (!effectiveLayerId) return false;
+      const { clipboard } = useEditorStore.getState();
+      if (!clipboard.layer) return false;
+      return canPasteLayer(clipboard.layer, effectiveLayerId, componentRegistry, findLayerById);
+    },
+    [getEffectiveLayerId, componentRegistry, findLayerById]
+  );
+  const effectiveLayerIdForPermissions = getEffectiveLayerId();
+  const isPage = effectiveLayerIdForPermissions ? isLayerAPage(effectiveLayerIdForPermissions) : false;
+  const canDuplicate = !isPage || allowPagesCreation;
+  const canDelete = !isPage || allowPagesDeletion;
+  const canCut = canDelete;
+  return {
+    getCanPaste,
+    canDuplicate,
+    canDelete,
+    canCut,
+    handleCopy,
+    handleCut,
+    handlePaste,
+    handleDelete,
+    handleDuplicate
+  };
+}
+
+export { useGlobalLayerActions };

package/dist/packages/ui/src/lib/ui-builder/registry/form-field-overrides.cjs

@@ -45,8 +45,9 @@ const classNameFieldOverrides = (layer) => {
     )
   };
 };
-const childrenFieldOverrides = (layer) => {
+const childrenFieldOverrides = (layer, allowVariableBinding = true) => {
   return {
+    renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
     fieldType: ({
       label,
       isRequired,
@@ -90,7 +91,7 @@ const iconNameFieldOverrides = (layer) => {
     )
   };
 };
-const childrenAsTextareaFieldOverrides = (layer, allowVariableBinding = false) => {
+const childrenAsTextareaFieldOverrides = (layer, allowVariableBinding = true) => {
   return {
     renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
     fieldType: ({
@@ -117,7 +118,7 @@ const childrenAsTextareaFieldOverrides = (layer, allowVariableBinding = false) =
     )
   };
 };
-const childrenAsTipTapFieldOverrides = (layer, allowVariableBinding = false) => {
+const childrenAsTipTapFieldOverrides = (layer, allowVariableBinding = true) => {
   return {
     renderParent: allowVariableBinding ? ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ChildrenVariableBindingWrapper, { children }) : void 0,
     fieldType: ({
@@ -155,13 +156,13 @@ const childrenAsTipTapFieldOverrides = (layer, allowVariableBinding = false) =>
   };
 };
 const memoizedCommonFieldOverrides = /* @__PURE__ */ new Map();
-const commonFieldOverrides = (allowBinding = false) => {
+const commonFieldOverrides = (allowBinding = true) => {
   if (memoizedCommonFieldOverrides.has(allowBinding)) {
     return memoizedCommonFieldOverrides.get(allowBinding);
   }
   const overrides = {
     className: (layer) => classNameFieldOverrides(),
-    children: (layer) => childrenFieldOverrides(layer)
+    children: (layer) => childrenFieldOverrides(layer, allowBinding)
   };
   memoizedCommonFieldOverrides.set(allowBinding, overrides);
   return overrides;
@@ -214,7 +215,7 @@ function ChildrenVariableBindingWrapper({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(label.Label, { children: "Children" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2 w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { className: "py-1 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { className: "py-1 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 flex-shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
@@ -232,6 +233,7 @@ function ChildrenVariableBindingWrapper({
               variant: "outline",
               onClick: handleUnbind,
               className: "px-3 h-10",
+              "data-testid": "unbind-children-button",
               children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Unlink, { className: "h-4 w-4" })
             }
           ) }),
@@ -245,7 +247,7 @@ function ChildrenVariableBindingWrapper({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", className: "px-3 h-10", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 my-1" }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", className: "px-3 h-10", "data-testid": "bind-children-button", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "h-4 w-4 my-1" }) }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Bind Children to Variable" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56", children: [