@orion-studios/payload-studio 0.5.0-beta.106 → 0.5.0-beta.107

package/dist/studio-pages/client.js

@@ -2114,6 +2114,7 @@ function BlockFrame({
 }) {
   const [dropPosition, setDropPosition] = (0, import_react5.useState)(null);
   const [dropHovered, setDropHovered] = (0, import_react5.useState)(false);
+  const frameRef = (0, import_react5.useRef)(null);
   const isDragging = dragIndex === index;
   const isAnyDragging = dragIndex !== null;
   const isDropTarget = dragIndex !== null && dragIndex !== index && dropPosition !== null;
@@ -2128,6 +2129,7 @@ function BlockFrame({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
+      ref: frameRef,
       onClick: onSelect,
       onDragEnter: (event) => {
         if (dragIndex === null || dragIndex === index) {
@@ -2160,7 +2162,6 @@ function BlockFrame({
           setDropPosition(position);
         }
       },
-      onDragStart: () => setDragIndex(index),
       onDrop: (event) => {
         event.preventDefault();
         if (dragIndex === null) {
@@ -2270,6 +2271,14 @@ function BlockFrame({
             },
             onDragStart: (event) => {
               event.stopPropagation();
+              if (event.dataTransfer && frameRef.current) {
+                const rect = frameRef.current.getBoundingClientRect();
+                const offsetX = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+                const offsetY = Math.max(0, Math.min(rect.height, event.clientY - rect.top));
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", label);
+                event.dataTransfer.setDragImage(frameRef.current, offsetX, offsetY);
+              }
               onSelect();
               setDragIndex(index);
             },

package/dist/studio-pages/client.mjs

@@ -6,7 +6,7 @@ import {
 } from "../chunk-ROTPP5CU.mjs";
 
 // src/studio-pages/builder/BuilderPageEditor.tsx
-import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
 
 // src/blocks/blocks/sectionStyleFields.ts
 var sectionStyleDefaults = {
@@ -1980,7 +1980,7 @@ function UploadOverlay({ label = "Uploading image..." }) {
 }
 
 // src/studio-pages/builder/ui/BlockFrame.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function BlockFrame({
   children,
@@ -1994,6 +1994,7 @@ function BlockFrame({
 }) {
   const [dropPosition, setDropPosition] = useState5(null);
   const [dropHovered, setDropHovered] = useState5(false);
+  const frameRef = useRef2(null);
   const isDragging = dragIndex === index;
   const isAnyDragging = dragIndex !== null;
   const isDropTarget = dragIndex !== null && dragIndex !== index && dropPosition !== null;
@@ -2008,6 +2009,7 @@ function BlockFrame({
   return /* @__PURE__ */ jsxs6(
     "div",
     {
+      ref: frameRef,
       onClick: onSelect,
       onDragEnter: (event) => {
         if (dragIndex === null || dragIndex === index) {
@@ -2040,7 +2042,6 @@ function BlockFrame({
           setDropPosition(position);
         }
       },
-      onDragStart: () => setDragIndex(index),
       onDrop: (event) => {
         event.preventDefault();
         if (dragIndex === null) {
@@ -2150,6 +2151,14 @@ function BlockFrame({
             },
             onDragStart: (event) => {
               event.stopPropagation();
+              if (event.dataTransfer && frameRef.current) {
+                const rect = frameRef.current.getBoundingClientRect();
+                const offsetX = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+                const offsetY = Math.max(0, Math.min(rect.height, event.clientY - rect.top));
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", label);
+                event.dataTransfer.setDragImage(frameRef.current, offsetX, offsetY);
+              }
               onSelect();
               setDragIndex(index);
             },
@@ -3991,7 +4000,7 @@ function BuilderPageEditor({
   renderBlockPreview,
   siteThemeTokens
 }) {
-  const editorRootRef = useRef2(null);
+  const editorRootRef = useRef3(null);
   const doc = initialDoc ?? {};
   const sourceStudioDocument = doc.studioDocument && typeof doc.studioDocument === "object" ? doc.studioDocument : {};
   const sourceMetadata = sourceStudioDocument.metadata && typeof sourceStudioDocument.metadata === "object" ? sourceStudioDocument.metadata : {};
@@ -4029,12 +4038,12 @@ function BuilderPageEditor({
   const [settingsPanelMode, setSettingsPanelMode] = useState6("basic");
   const [settingsSearchQuery, setSettingsSearchQuery] = useState6("");
   const { activeSidebarPanel, setActiveSidebarPanel } = usePersistentSidebarPanel(pageID);
-  const historyBypassRef = useRef2(true);
-  const previousSnapshotRef = useRef2({
+  const historyBypassRef = useRef3(true);
+  const previousSnapshotRef = useRef3({
     layout: migrateLayoutToSettingsV2(cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block))),
     pageDefaults: clonePageDefaults(initialPageDefaults)
   });
-  const lastSavedRef = useRef2(cloneSnapshot(previousSnapshotRef.current));
+  const lastSavedRef = useRef3(cloneSnapshot(previousSnapshotRef.current));
   const selectedBlock = useMemo2(
     () => selectedIndex !== null ? layout[selectedIndex] : null,
     [layout, selectedIndex]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.5.0-beta.106",
+  "version": "0.5.0-beta.107",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",