@btst/stack 1.10.0 → 1.11.0

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/classname-control/classname-item-control.mjs

@@ -32,7 +32,9 @@ function ClassNameItemControl({ value, onChange }) {
             }
           }
         });
-        if (!found) initialSelected[group.label] = group.keys[0];
+        if (!found && group.keys[0]) {
+          initialSelected[group.label] = group.keys[0];
+        }
       });
       const handledTokens = new Set(
         Object.values(parsedState).flatMap(
@@ -50,7 +52,9 @@ function ClassNameItemControl({ value, onChange }) {
     } else {
       const initialSelected = {};
       LAYOUT_GROUPS.forEach((group) => {
-        initialSelected[group.label] = group.keys[0];
+        if (group.keys[0]) {
+          initialSelected[group.label] = group.keys[0];
+        }
       });
       return {
         parsedState: {},
@@ -172,7 +176,9 @@ function ClassNameItemControl({ value, onChange }) {
       const keys = group.keys.map(String);
       const selectedKey = selectedKeys[group.label] || keys[0];
       if (entry.isVisible && !entry.isVisible(state)) return null;
+      if (!selectedKey) return null;
       const groupConfig = CONFIG[selectedKey];
+      if (!groupConfig) return null;
       return /* @__PURE__ */ jsx("div", { className: cn("w-full", entry.className), "data-testid": `group-${group.label.toLowerCase().replace(/\s+/g, "-")}`, children: /* @__PURE__ */ jsx(
         ClassNameGroupControl,
         {
@@ -188,6 +194,7 @@ function ClassNameItemControl({ value, onChange }) {
       if (entry.isVisible && !entry.isVisible(state)) return null;
       const configKey = entry.key;
       const ungroupedConfig = CONFIG[configKey];
+      if (!ungroupedConfig) return null;
       return /* @__PURE__ */ jsx("div", { className: cn("w-full", entry.className), "data-testid": `item-${configKey}`, children: /* @__PURE__ */ jsx(
         ungroupedConfig.component,
         {

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/iconname-field.cjs

@@ -29,8 +29,9 @@ const IconNameField = ({
   }, []);
   const handleChange = React.useCallback(
     (values) => {
-      if (values.length > 0) {
-        onChange(values[0].value);
+      const firstValue = values[0];
+      if (firstValue) {
+        onChange(firstValue.value);
       }
     },
     [onChange]

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/iconname-field.mjs

@@ -27,8 +27,9 @@ const IconNameField = ({
   }, []);
   const handleChange = useCallback(
     (values) => {
-      if (values.length > 0) {
-        onChange(values[0].value);
+      const firstValue = values[0];
+      if (firstValue) {
+        onChange(firstValue.value);
       }
     },
     [onChange]

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

@@ -84,7 +84,7 @@ const LayersTree = React__default.memo(
           }
           const updatedChildren = layerUtils.hasLayerChildren(updatedPageLayer) ? updatedPageLayer.children || [] : [];
           const currentLayer = layers[0];
-          const currentChildren = layerUtils.hasLayerChildren(currentLayer) ? currentLayer.children || [] : [];
+          const currentChildren = currentLayer && layerUtils.hasLayerChildren(currentLayer) ? currentLayer.children || [] : [];
           if (!index(currentChildren, updatedChildren)) {
             updateLayer(selectedPageId, {}, { children: updatedChildren });
           }

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

@@ -76,7 +76,7 @@ const LayersTree = React__default.memo(
           }
           const updatedChildren = hasLayerChildren(updatedPageLayer) ? updatedPageLayer.children || [] : [];
           const currentLayer = layers[0];
-          const currentChildren = hasLayerChildren(currentLayer) ? currentLayer.children || [] : [];
+          const currentChildren = currentLayer && hasLayerChildren(currentLayer) ? currentLayer.children || [] : [];
           if (!isDeepEqual(currentChildren, updatedChildren)) {
             updateLayer(selectedPageId, {}, { children: updatedChildren });
           }

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

@@ -101,7 +101,10 @@ const ComponentPropsAutoForm = ({
   );
   const { schema } = React.useMemo(() => {
     if (selectedLayer && componentRegistry[selectedLayer.type]) {
-      return componentRegistry[selectedLayer.type];
+      const registryEntry = componentRegistry[selectedLayer.type];
+      if (registryEntry) {
+        return registryEntry;
+      }
     }
     return { schema: EMPTY_ZOD_SCHEMA };
   }, [selectedLayer, componentRegistry]);
@@ -111,6 +114,7 @@ const ComponentPropsAutoForm = ({
   const handleDuplicateLayer = React.useCallback(() => {
     duplicateLayer(selectedLayerId);
   }, [duplicateLayer, selectedLayerId]);
+  const variables = layerStore.useLayerStore((state) => state.variables);
   const onParsedValuesChange = React.useCallback(
     (parsedValues) => {
       const { children, ...dataProps } = parsedValues;
@@ -123,7 +127,12 @@ const ComponentPropsAutoForm = ({
           const fieldDef = "shape" in schema && schema.shape ? schema.shape[key] : void 0;
           const baseType = fieldDef ? helpers.getBaseType(fieldDef) : void 0;
           if (types.isVariableReference(originalValue)) {
-            preservedProps[key] = originalValue;
+            const variableExists = variables.some((v) => v.id === originalValue.__variableRef);
+            if (variableExists) {
+              preservedProps[key] = originalValue;
+            } else {
+              preservedProps[key] = newValue;
+            }
           } else {
             if (baseType === "ZodDate" && newValue instanceof Date) {
               preservedProps[key] = newValue.toISOString();
@@ -133,7 +142,11 @@ const ComponentPropsAutoForm = ({
           }
         });
       }
-      if (typeof children === "string") {
+      const originalChildren = selectedLayer?.children;
+      const shouldPreserveChildrenBinding = types.isVariableReference(originalChildren) && variables.some((v) => v.id === originalChildren.__variableRef);
+      if (shouldPreserveChildrenBinding) {
+        updateLayer(selectedLayerId, preservedProps);
+      } else if (typeof children === "string") {
         updateLayer(selectedLayerId, preservedProps, { children });
       } else if (children && children.layerType) {
         updateLayer(selectedLayerId, preservedProps, {
@@ -148,9 +161,8 @@ const ComponentPropsAutoForm = ({
         updateLayer(selectedLayerId, preservedProps);
       }
     },
-    [updateLayer, selectedLayerId, selectedLayer, addComponentLayer, schema]
+    [updateLayer, selectedLayerId, selectedLayer, addComponentLayer, schema, variables]
   );
-  const variables = layerStore.useLayerStore((state) => state.variables);
   const formValues = React.useMemo(() => {
     if (!selectedLayer) return EMPTY_FORM_VALUES;
     const resolvedProps = variableResolver.resolveVariableReferences(

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

@@ -95,7 +95,10 @@ const ComponentPropsAutoForm = ({
   );
   const { schema } = useMemo(() => {
     if (selectedLayer && componentRegistry[selectedLayer.type]) {
-      return componentRegistry[selectedLayer.type];
+      const registryEntry = componentRegistry[selectedLayer.type];
+      if (registryEntry) {
+        return registryEntry;
+      }
     }
     return { schema: EMPTY_ZOD_SCHEMA };
   }, [selectedLayer, componentRegistry]);
@@ -105,6 +108,7 @@ const ComponentPropsAutoForm = ({
   const handleDuplicateLayer = useCallback(() => {
     duplicateLayer(selectedLayerId);
   }, [duplicateLayer, selectedLayerId]);
+  const variables = useLayerStore((state) => state.variables);
   const onParsedValuesChange = useCallback(
     (parsedValues) => {
       const { children, ...dataProps } = parsedValues;
@@ -117,7 +121,12 @@ const ComponentPropsAutoForm = ({
           const fieldDef = "shape" in schema && schema.shape ? schema.shape[key] : void 0;
           const baseType = fieldDef ? getBaseType(fieldDef) : void 0;
           if (isVariableReference(originalValue)) {
-            preservedProps[key] = originalValue;
+            const variableExists = variables.some((v) => v.id === originalValue.__variableRef);
+            if (variableExists) {
+              preservedProps[key] = originalValue;
+            } else {
+              preservedProps[key] = newValue;
+            }
           } else {
             if (baseType === "ZodDate" && newValue instanceof Date) {
               preservedProps[key] = newValue.toISOString();
@@ -127,7 +136,11 @@ const ComponentPropsAutoForm = ({
           }
         });
       }
-      if (typeof children === "string") {
+      const originalChildren = selectedLayer?.children;
+      const shouldPreserveChildrenBinding = isVariableReference(originalChildren) && variables.some((v) => v.id === originalChildren.__variableRef);
+      if (shouldPreserveChildrenBinding) {
+        updateLayer(selectedLayerId, preservedProps);
+      } else if (typeof children === "string") {
         updateLayer(selectedLayerId, preservedProps, { children });
       } else if (children && children.layerType) {
         updateLayer(selectedLayerId, preservedProps, {
@@ -142,9 +155,8 @@ const ComponentPropsAutoForm = ({
         updateLayer(selectedLayerId, preservedProps);
       }
     },
-    [updateLayer, selectedLayerId, selectedLayer, addComponentLayer, schema]
+    [updateLayer, selectedLayerId, selectedLayer, addComponentLayer, schema, variables]
   );
-  const variables = useLayerStore((state) => state.variables);
   const formValues = useMemo(() => {
     if (!selectedLayer) return EMPTY_FORM_VALUES;
     const resolvedProps = resolveVariableReferences(

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

@@ -16,11 +16,30 @@ const reactErrorBoundary = require('react-error-boundary');
 const errorFallback = require('../components/error-fallback.cjs');
 const editorUtils = require('../../../../lib/ui-builder/store/editor-utils.cjs');
 const devProfiler = require('../components/dev-profiler.cjs');
+const types = require('../../types.cjs');
 const variableResolver = require('../../../../lib/ui-builder/utils/variable-resolver.cjs');
 
+const POSITION_CLASSES = ["static", "fixed", "absolute", "relative", "sticky"];
+function hasPositionClass(className) {
+  const classes = className.split(/\s+/);
+  return POSITION_CLASSES.some((posClass) => classes.includes(posClass));
+}
+function isLayerBeingDraggedOrDescendant(layerId, activeLayerId, pages) {
+  if (!activeLayerId) return false;
+  if (layerId === activeLayerId) return true;
+  if (!pages || !Array.isArray(pages) || pages.length === 0) return false;
+  const draggedLayer = layerUtils.findLayerRecursive(pages, activeLayerId);
+  if (!draggedLayer) return false;
+  if (layerUtils.hasLayerChildren(draggedLayer)) {
+    const foundInDragged = layerUtils.findLayerRecursive([draggedLayer], layerId);
+    return !!foundInDragged;
+  }
+  return false;
+}
 const RenderLayer = React.memo(
   ({ layer, componentRegistry, editorConfig, variables, variableValues }) => {
     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 dndContext = dndContexts.useDndContext();
@@ -38,15 +57,29 @@ const RenderLayer = React.memo(
       () => variableResolver.resolveVariableReferences(layer.props, effectiveVariables, variableValues),
       [layer.props, effectiveVariables, variableValues]
     );
-    const childProps = React.useMemo(() => ({ ...resolvedProps }), [resolvedProps]);
     const childEditorConfig = React.useMemo(() => {
       return editorConfig ? { ...editorConfig, zIndex: editorConfig.zIndex + 1, parentUpdated: editorConfig.parentUpdated || !index(prevLayer.current, layer) } : void 0;
     }, [editorConfig, layer]);
+    const isBeingDragged = React.useMemo(
+      () => isLayerBeingDraggedOrDescendant(layer.id, dndContext.activeLayerId, pages),
+      [layer.id, dndContext.activeLayerId, pages]
+    );
+    const isRootDraggedLayer = layer.id === dndContext.activeLayerId;
     const canAcceptChildren = React.useMemo(() => layerUtils.canLayerAcceptChildren(layer, registry), [layer, registry]);
     const showDropZones = React.useMemo(
-      () => editorConfig && dndContext.isDragging && canAcceptChildren,
-      [editorConfig, dndContext.isDragging, canAcceptChildren]
+      () => editorConfig && dndContext.isDragging && canAcceptChildren && !isBeingDragged,
+      [editorConfig, dndContext.isDragging, canAcceptChildren, isBeingDragged]
     );
+    const childProps = React.useMemo(() => {
+      const props = { ...resolvedProps };
+      if (showDropZones && layerUtils.hasLayerChildren(layer)) {
+        const existingClassName = props.className || "";
+        if (!hasPositionClass(existingClassName)) {
+          props.className = existingClassName ? `${existingClassName} relative` : "relative";
+        }
+      }
+      return props;
+    }, [resolvedProps, showDropZones, layer]);
     if (!componentDefinition) {
       console.error(
         `[UIBuilder] Component definition not found in registry:`,
@@ -75,7 +108,7 @@ const RenderLayer = React.memo(
           child.id
         );
         if (showDropZones) {
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               dropZone.DropPlaceholder,
               {
@@ -90,21 +123,30 @@ const RenderLayer = React.memo(
         return childElement;
       });
       if (showDropZones) {
-        const lastDropZone = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-          dropZone.DropPlaceholder,
-          {
-            parentId: layer.id,
-            position: layer.children.length,
-            isActive: true
-          }
-        ) }, `drop-${layer.id}-${layer.children.length}`);
-        childElements.push(lastDropZone);
+        childElements.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dropZone.DropPlaceholder,
+            {
+              parentId: layer.id,
+              position: layer.children.length,
+              isActive: true
+            },
+            `drop-${layer.id}-${layer.children.length}`
+          )
+        );
       }
       childProps.children = childElements;
+    } else if (types.isVariableReference(layer.children)) {
+      const resolvedChildren = variableResolver.resolveChildrenVariableReference(
+        layer.children,
+        effectiveVariables,
+        variableValues
+      );
+      childProps.children = resolvedChildren;
     } else if (typeof layer.children === "string") {
       childProps.children = layer.children;
     } else if (showDropZones && layerUtils.hasLayerChildren(layer)) {
-      childProps.children = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-[2rem]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      childProps.children = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[2rem] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
         dropZone.DropPlaceholder,
         {
           parentId: layer.id,
@@ -114,8 +156,19 @@ const RenderLayer = React.memo(
       ) });
     }
     const WrappedComponent = isPrimitive ? /* @__PURE__ */ jsxRuntime.jsx(Component, { id: layer.id, "data-testid": layer.id, "data-layer-id": layer.id, ...childProps }) : /* @__PURE__ */ jsxRuntime.jsx(ErrorSuspenseWrapper, { id: layer.id, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { "data-testid": layer.id, "data-layer-id": layer.id, ...childProps }) }, layer.id);
+    const DragFeedbackWrapper = isRootDraggedLayer ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "relative opacity-50 pointer-events-none",
+        "data-dragging": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-primary/20 rounded pointer-events-none z-10" }),
+          WrappedComponent
+        ]
+      }
+    ) : WrappedComponent;
     if (!editorConfig) {
-      return WrappedComponent;
+      return DragFeedbackWrapper;
     } else {
       const {
         zIndex,
@@ -141,7 +194,7 @@ const RenderLayer = React.memo(
               totalLayers,
               onDuplicateLayer: handleDuplicateLayer,
               onDeleteLayer: handleDeleteLayer,
-              children: WrappedComponent
+              children: DragFeedbackWrapper
             },
             layer.id
           )
@@ -171,3 +224,4 @@ const ErrorSuspenseWrapper = ({ children }) => {
 const LoadingComponent = () => /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." });
 
 exports.RenderLayer = RenderLayer;
+exports.hasPositionClass = hasPositionClass;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useRef, useMemo, Suspense } from 'react';
+import { memo, useRef, useMemo, Fragment, Suspense } from 'react';
 import isDeepEqual from '../../../../../../../_virtual/index.mjs';
 import { ElementSelector } from '../components/element-selector.mjs';
 import { DropPlaceholder } from '../dnd/drop-zone.mjs';
@@ -8,17 +8,36 @@ import '../../../../lib/ui-builder/context/dnd-context-colission-utils.mjs';
 import { useDndContext } from '../../../../lib/ui-builder/context/dnd-contexts.mjs';
 import 'react-dom';
 import { useLayerStore } from '../../../../lib/ui-builder/store/layer-store.mjs';
-import { canLayerAcceptChildren, hasLayerChildren } from '../../../../lib/ui-builder/store/layer-utils.mjs';
+import { canLayerAcceptChildren, hasLayerChildren, findLayerRecursive } from '../../../../lib/ui-builder/store/layer-utils.mjs';
 import { useEditorStore } from '../../../../lib/ui-builder/store/editor-store.mjs';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '../components/error-fallback.mjs';
 import { isPrimitiveComponent } from '../../../../lib/ui-builder/store/editor-utils.mjs';
 import { DevProfiler } from '../components/dev-profiler.mjs';
-import { resolveVariableReferences } from '../../../../lib/ui-builder/utils/variable-resolver.mjs';
+import { isVariableReference } from '../../types.mjs';
+import { resolveVariableReferences, resolveChildrenVariableReference } from '../../../../lib/ui-builder/utils/variable-resolver.mjs';
 
+const POSITION_CLASSES = ["static", "fixed", "absolute", "relative", "sticky"];
+function hasPositionClass(className) {
+  const classes = className.split(/\s+/);
+  return POSITION_CLASSES.some((posClass) => classes.includes(posClass));
+}
+function isLayerBeingDraggedOrDescendant(layerId, activeLayerId, pages) {
+  if (!activeLayerId) return false;
+  if (layerId === activeLayerId) return true;
+  if (!pages || !Array.isArray(pages) || pages.length === 0) return false;
+  const draggedLayer = findLayerRecursive(pages, activeLayerId);
+  if (!draggedLayer) return false;
+  if (hasLayerChildren(draggedLayer)) {
+    const foundInDragged = findLayerRecursive([draggedLayer], layerId);
+    return !!foundInDragged;
+  }
+  return false;
+}
 const RenderLayer = memo(
   ({ layer, componentRegistry, editorConfig, variables, variableValues }) => {
     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 dndContext = useDndContext();
@@ -36,15 +55,29 @@ const RenderLayer = memo(
       () => resolveVariableReferences(layer.props, effectiveVariables, variableValues),
       [layer.props, effectiveVariables, variableValues]
     );
-    const childProps = useMemo(() => ({ ...resolvedProps }), [resolvedProps]);
     const childEditorConfig = useMemo(() => {
       return editorConfig ? { ...editorConfig, zIndex: editorConfig.zIndex + 1, parentUpdated: editorConfig.parentUpdated || !isDeepEqual(prevLayer.current, layer) } : void 0;
     }, [editorConfig, layer]);
+    const isBeingDragged = useMemo(
+      () => isLayerBeingDraggedOrDescendant(layer.id, dndContext.activeLayerId, pages),
+      [layer.id, dndContext.activeLayerId, pages]
+    );
+    const isRootDraggedLayer = layer.id === dndContext.activeLayerId;
     const canAcceptChildren = useMemo(() => canLayerAcceptChildren(layer, registry), [layer, registry]);
     const showDropZones = useMemo(
-      () => editorConfig && dndContext.isDragging && canAcceptChildren,
-      [editorConfig, dndContext.isDragging, canAcceptChildren]
+      () => editorConfig && dndContext.isDragging && canAcceptChildren && !isBeingDragged,
+      [editorConfig, dndContext.isDragging, canAcceptChildren, isBeingDragged]
     );
+    const childProps = useMemo(() => {
+      const props = { ...resolvedProps };
+      if (showDropZones && hasLayerChildren(layer)) {
+        const existingClassName = props.className || "";
+        if (!hasPositionClass(existingClassName)) {
+          props.className = existingClassName ? `${existingClassName} relative` : "relative";
+        }
+      }
+      return props;
+    }, [resolvedProps, showDropZones, layer]);
     if (!componentDefinition) {
       console.error(
         `[UIBuilder] Component definition not found in registry:`,
@@ -73,7 +106,7 @@ const RenderLayer = memo(
           child.id
         );
         if (showDropZones) {
-          return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               DropPlaceholder,
               {
@@ -88,21 +121,30 @@ const RenderLayer = memo(
         return childElement;
       });
       if (showDropZones) {
-        const lastDropZone = /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
-          DropPlaceholder,
-          {
-            parentId: layer.id,
-            position: layer.children.length,
-            isActive: true
-          }
-        ) }, `drop-${layer.id}-${layer.children.length}`);
-        childElements.push(lastDropZone);
+        childElements.push(
+          /* @__PURE__ */ jsx(
+            DropPlaceholder,
+            {
+              parentId: layer.id,
+              position: layer.children.length,
+              isActive: true
+            },
+            `drop-${layer.id}-${layer.children.length}`
+          )
+        );
       }
       childProps.children = childElements;
+    } else if (isVariableReference(layer.children)) {
+      const resolvedChildren = resolveChildrenVariableReference(
+        layer.children,
+        effectiveVariables,
+        variableValues
+      );
+      childProps.children = resolvedChildren;
     } else if (typeof layer.children === "string") {
       childProps.children = layer.children;
     } else if (showDropZones && hasLayerChildren(layer)) {
-      childProps.children = /* @__PURE__ */ jsx("div", { className: "relative min-h-[2rem]", children: /* @__PURE__ */ jsx(
+      childProps.children = /* @__PURE__ */ jsx("div", { className: "min-h-[2rem] w-full", children: /* @__PURE__ */ jsx(
         DropPlaceholder,
         {
           parentId: layer.id,
@@ -112,8 +154,19 @@ const RenderLayer = memo(
       ) });
     }
     const WrappedComponent = isPrimitive ? /* @__PURE__ */ jsx(Component, { id: layer.id, "data-testid": layer.id, "data-layer-id": layer.id, ...childProps }) : /* @__PURE__ */ jsx(ErrorSuspenseWrapper, { id: layer.id, children: /* @__PURE__ */ jsx(Component, { "data-testid": layer.id, "data-layer-id": layer.id, ...childProps }) }, layer.id);
+    const DragFeedbackWrapper = isRootDraggedLayer ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative opacity-50 pointer-events-none",
+        "data-dragging": "true",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-primary/20 rounded pointer-events-none z-10" }),
+          WrappedComponent
+        ]
+      }
+    ) : WrappedComponent;
     if (!editorConfig) {
-      return WrappedComponent;
+      return DragFeedbackWrapper;
     } else {
       const {
         zIndex,
@@ -139,7 +192,7 @@ const RenderLayer = memo(
               totalLayers,
               onDuplicateLayer: handleDuplicateLayer,
               onDeleteLayer: handleDeleteLayer,
-              children: WrappedComponent
+              children: DragFeedbackWrapper
             },
             layer.id
           )
@@ -168,4 +221,4 @@ const ErrorSuspenseWrapper = ({ children }) => {
 };
 const LoadingComponent = () => /* @__PURE__ */ jsx("div", { children: "Loading..." });
 
-export { RenderLayer };
+export { RenderLayer, hasPositionClass };

package/dist/packages/ui/src/lib/ui-builder/context/dnd-context-colission-utils.cjs

@@ -138,17 +138,22 @@ const getTransformState = () => {
     const transform = computedStyle.transform;
     if (transform && transform !== "none") {
       const matrixMatch = transform.match(/matrix\(([^)]*)\)/);
-      if (matrixMatch) {
+      if (matrixMatch && matrixMatch[1]) {
         const values = matrixMatch[1].split(",").map((v) => parseFloat(v.trim()));
         if (values.length >= 6) {
-          transformState = {
-            scale: values[0],
-            // scaleX
-            positionX: values[4],
-            // translateX
-            positionY: values[5]
-            // translateY
-          };
+          const scale = values[0];
+          const positionX = values[4];
+          const positionY = values[5];
+          if (scale !== void 0 && positionX !== void 0 && positionY !== void 0) {
+            transformState = {
+              scale,
+              // scaleX
+              positionX,
+              // translateX
+              positionY
+              // translateY
+            };
+          }
         }
       }
     }

package/dist/packages/ui/src/lib/ui-builder/context/dnd-context-colission-utils.mjs

@@ -136,17 +136,22 @@ const getTransformState = () => {
     const transform = computedStyle.transform;
     if (transform && transform !== "none") {
       const matrixMatch = transform.match(/matrix\(([^)]*)\)/);
-      if (matrixMatch) {
+      if (matrixMatch && matrixMatch[1]) {
         const values = matrixMatch[1].split(",").map((v) => parseFloat(v.trim()));
         if (values.length >= 6) {
-          transformState = {
-            scale: values[0],
-            // scaleX
-            positionX: values[4],
-            // translateX
-            positionY: values[5]
-            // translateY
-          };
+          const scale = values[0];
+          const positionX = values[4];
+          const positionY = values[5];
+          if (scale !== void 0 && positionX !== void 0 && positionY !== void 0) {
+            transformState = {
+              scale,
+              // scaleX
+              positionX,
+              // translateX
+              positionY
+              // translateY
+            };
+          }
         }
       }
     }