@orion-studios/payload-studio 0.6.0-beta.125 → 0.6.0-beta.127

package/dist/builder-v2/client.js

@@ -1117,6 +1117,9 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           },
           components: "",
           droppable: false,
+          highlightable: true,
+          hoverable: true,
+          selectable: true,
           tagName: "div",
           traits: [
             ...(definition.traits || []).map((trait) => ({
@@ -1524,6 +1527,12 @@ var canvasSelectionCss = `
     outline-color: #c7643d !important;
   }
 
+  .orion-builder-v2-selected-block {
+    outline: 2px solid #c7643d !important;
+    outline-offset: -2px !important;
+    position: relative;
+  }
+
   .xo-builder-preview-grid {
     display: grid;
     gap: 22px;
@@ -2108,7 +2117,7 @@ function GrapesPageEditor({
   };
   const getCurrentStyleTarget = () => selectedComponentRef.current || lastSelectedComponentRef.current || (editorRef.current?.getSelected?.() || null);
   const findOrionBlockByElement = (element) => {
-    const target = element?.closest("[data-orion-block]");
+    const target = element?.closest("[data-orion-block], [data-orion-component]");
     const targetID = target?.id || "";
     if (!targetID) {
       return null;
@@ -2116,14 +2125,14 @@ function GrapesPageEditor({
     const editor = editorRef.current;
     const wrapper = editor?.DomComponents?.getWrapper?.() || null;
     const component = wrapper?.find?.(`#${CSS.escape(targetID)}`)?.[0] || null;
-    return Object.keys(parseOrionBlockAttribute(component?.getAttributes?.()?.["data-orion-block"])).length > 0 ? component : null;
+    return isOrionBlockComponent(component) ? component : null;
   };
   const findOrionBlockAncestor = (component) => {
     let current = component;
     const visited = /* @__PURE__ */ new Set();
     while (current && !visited.has(current)) {
       visited.add(current);
-      if (Object.keys(parseOrionBlockAttribute(current.getAttributes?.()?.["data-orion-block"])).length > 0) {
+      if (isOrionBlockComponent(current)) {
         return current;
       }
       current = current.parent?.() || null;
@@ -2134,7 +2143,10 @@ function GrapesPageEditor({
   const findSelectedCanvasOrionBlock = () => {
     const editor = editorRef.current;
     const wrapper = editor?.DomComponents?.getWrapper?.() || null;
-    const candidates = wrapper?.find?.("[data-orion-block]") || [];
+    const candidates = [
+      ...wrapper?.find?.("[data-orion-block]") || [],
+      ...wrapper?.find?.("[data-orion-component]") || []
+    ];
     return candidates.find((candidate) => {
       const element = candidate.getEl?.();
       return Boolean(
@@ -2164,10 +2176,11 @@ function GrapesPageEditor({
     }
     const candidates = [
       ...selectedID ? wrapper.find?.(`#${selectedID}`) || [] : [],
-      ...wrapper.find?.("[data-orion-block]") || []
+      ...wrapper.find?.("[data-orion-block]") || [],
+      ...wrapper.find?.("[data-orion-component]") || []
     ];
     return candidates.find(
-      (candidate) => Object.keys(parseOrionBlockAttribute(candidate.getAttributes?.()?.["data-orion-block"])).length > 0
+      (candidate) => isOrionBlockComponent(candidate)
     ) || component || selected || null;
   };
   const selectStyleManagerTarget = (component) => {
@@ -2177,6 +2190,11 @@ function GrapesPageEditor({
     const editor = editorRef.current;
     editor?.StyleManager?.select?.(component);
   };
+  const markSelectedCanvasBlock = (component) => {
+    const canvasDocument = editorRef.current?.Canvas?.getDocument?.();
+    canvasDocument?.querySelectorAll(".orion-builder-v2-selected-block").forEach((element) => element.classList.remove("orion-builder-v2-selected-block"));
+    component?.getEl?.()?.classList.add("orion-builder-v2-selected-block");
+  };
   const updateSelectedItems = (updater) => {
     const component = getCurrentOrionBlockTarget();
     if (!component) {
@@ -2539,6 +2557,7 @@ function GrapesPageEditor({
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
     rememberComponentSnapshot(component);
+    markSelectedCanvasBlock(component);
     refreshSelectedState(component);
     window.requestAnimationFrame(() => {
       const element = spacingTargetForComponent(component);
@@ -2692,6 +2711,7 @@ function GrapesPageEditor({
     editorRef.current?.select?.(snapshot.component);
     selectStyleManagerTarget(snapshot.component);
     lastComponentSnapshotRef.current.set(snapshot.component, snapshot);
+    markSelectedCanvasBlock(snapshot.component);
     refreshSelectedState(snapshot.component);
   };
   const restoreCustomHistoryEntry = (entry, target) => {
@@ -2706,6 +2726,17 @@ function GrapesPageEditor({
     }
     restoreComponentSnapshot(snapshot);
   };
+  const equivalentHistoryAttributes = (before, after) => {
+    const beforeBlock = parseOrionBlockAttribute(before["data-orion-block"]);
+    const afterBlock = parseOrionBlockAttribute(after["data-orion-block"]);
+    const beforeComparable = { ...before };
+    const afterComparable = { ...after };
+    if (Object.keys(beforeBlock).length > 0 && Object.keys(afterBlock).length > 0 && JSON.stringify(beforeBlock.items || []) === JSON.stringify(afterBlock.items || [])) {
+      beforeComparable["data-orion-block"] = "";
+      afterComparable["data-orion-block"] = "";
+    }
+    return JSON.stringify(beforeComparable) === JSON.stringify(afterComparable);
+  };
   const pushCustomHistoryEntry = (before, after) => {
     if (!before && !after) {
       return;
@@ -2713,7 +2744,7 @@ function GrapesPageEditor({
     if (before && after && before.component !== after.component) {
       return;
     }
-    if (before && after && JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
+    if (before && after && JSON.stringify(before.style) === JSON.stringify(after.style) && equivalentHistoryAttributes(before.attributes, after.attributes)) {
       return;
     }
     customUndoStackRef.current.push({ after, before });
@@ -2737,6 +2768,7 @@ function GrapesPageEditor({
           selectedComponentRef.current = selected;
           lastSelectedComponentRef.current = selected;
           selectStyleManagerTarget(selected);
+          markSelectedCanvasBlock(selected);
           refreshSelectedState(selected);
         }
         updateHistoryState(editor);
@@ -3046,9 +3078,11 @@ function GrapesPageEditor({
             editor.select?.(target);
           }
           selectStyleManagerTarget(target);
+          markSelectedCanvasBlock(target);
           rehydrateSelectedComponentControls(target);
           window.setTimeout(() => {
             selectStyleManagerTarget(target);
+            markSelectedCanvasBlock(target);
             rehydrateSelectedComponentControls(target);
           }, 120);
         });
@@ -3071,6 +3105,7 @@ function GrapesPageEditor({
             return;
           }
           selectedComponentRef.current = null;
+          markSelectedCanvasBlock(null);
           refreshSelectedState(null);
         });
         const bindCanvasSelectionTracking = () => {
@@ -3086,6 +3121,9 @@ function GrapesPageEditor({
             selectedComponentRef.current = target;
             lastSelectedComponentRef.current = target;
             rememberComponentSnapshot(target);
+            editor.select?.(target);
+            selectStyleManagerTarget(target);
+            markSelectedCanvasBlock(target);
             refreshSelectedState(target);
           };
           canvasDocument.addEventListener("pointerdown", trackCanvasSelection, true);

package/dist/builder-v2/client.mjs

@@ -993,6 +993,9 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           },
           components: "",
           droppable: false,
+          highlightable: true,
+          hoverable: true,
+          selectable: true,
           tagName: "div",
           traits: [
             ...(definition.traits || []).map((trait) => ({
@@ -1400,6 +1403,12 @@ var canvasSelectionCss = `
     outline-color: #c7643d !important;
   }
 
+  .orion-builder-v2-selected-block {
+    outline: 2px solid #c7643d !important;
+    outline-offset: -2px !important;
+    position: relative;
+  }
+
   .xo-builder-preview-grid {
     display: grid;
     gap: 22px;
@@ -1984,7 +1993,7 @@ function GrapesPageEditor({
   };
   const getCurrentStyleTarget = () => selectedComponentRef.current || lastSelectedComponentRef.current || (editorRef.current?.getSelected?.() || null);
   const findOrionBlockByElement = (element) => {
-    const target = element?.closest("[data-orion-block]");
+    const target = element?.closest("[data-orion-block], [data-orion-component]");
     const targetID = target?.id || "";
     if (!targetID) {
       return null;
@@ -1992,14 +2001,14 @@ function GrapesPageEditor({
     const editor = editorRef.current;
     const wrapper = editor?.DomComponents?.getWrapper?.() || null;
     const component = wrapper?.find?.(`#${CSS.escape(targetID)}`)?.[0] || null;
-    return Object.keys(parseOrionBlockAttribute(component?.getAttributes?.()?.["data-orion-block"])).length > 0 ? component : null;
+    return isOrionBlockComponent(component) ? component : null;
   };
   const findOrionBlockAncestor = (component) => {
     let current = component;
     const visited = /* @__PURE__ */ new Set();
     while (current && !visited.has(current)) {
       visited.add(current);
-      if (Object.keys(parseOrionBlockAttribute(current.getAttributes?.()?.["data-orion-block"])).length > 0) {
+      if (isOrionBlockComponent(current)) {
         return current;
       }
       current = current.parent?.() || null;
@@ -2010,7 +2019,10 @@ function GrapesPageEditor({
   const findSelectedCanvasOrionBlock = () => {
     const editor = editorRef.current;
     const wrapper = editor?.DomComponents?.getWrapper?.() || null;
-    const candidates = wrapper?.find?.("[data-orion-block]") || [];
+    const candidates = [
+      ...wrapper?.find?.("[data-orion-block]") || [],
+      ...wrapper?.find?.("[data-orion-component]") || []
+    ];
     return candidates.find((candidate) => {
       const element = candidate.getEl?.();
       return Boolean(
@@ -2040,10 +2052,11 @@ function GrapesPageEditor({
     }
     const candidates = [
       ...selectedID ? wrapper.find?.(`#${selectedID}`) || [] : [],
-      ...wrapper.find?.("[data-orion-block]") || []
+      ...wrapper.find?.("[data-orion-block]") || [],
+      ...wrapper.find?.("[data-orion-component]") || []
     ];
     return candidates.find(
-      (candidate) => Object.keys(parseOrionBlockAttribute(candidate.getAttributes?.()?.["data-orion-block"])).length > 0
+      (candidate) => isOrionBlockComponent(candidate)
     ) || component || selected || null;
   };
   const selectStyleManagerTarget = (component) => {
@@ -2053,6 +2066,11 @@ function GrapesPageEditor({
     const editor = editorRef.current;
     editor?.StyleManager?.select?.(component);
   };
+  const markSelectedCanvasBlock = (component) => {
+    const canvasDocument = editorRef.current?.Canvas?.getDocument?.();
+    canvasDocument?.querySelectorAll(".orion-builder-v2-selected-block").forEach((element) => element.classList.remove("orion-builder-v2-selected-block"));
+    component?.getEl?.()?.classList.add("orion-builder-v2-selected-block");
+  };
   const updateSelectedItems = (updater) => {
     const component = getCurrentOrionBlockTarget();
     if (!component) {
@@ -2415,6 +2433,7 @@ function GrapesPageEditor({
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
     rememberComponentSnapshot(component);
+    markSelectedCanvasBlock(component);
     refreshSelectedState(component);
     window.requestAnimationFrame(() => {
       const element = spacingTargetForComponent(component);
@@ -2568,6 +2587,7 @@ function GrapesPageEditor({
     editorRef.current?.select?.(snapshot.component);
     selectStyleManagerTarget(snapshot.component);
     lastComponentSnapshotRef.current.set(snapshot.component, snapshot);
+    markSelectedCanvasBlock(snapshot.component);
     refreshSelectedState(snapshot.component);
   };
   const restoreCustomHistoryEntry = (entry, target) => {
@@ -2582,6 +2602,17 @@ function GrapesPageEditor({
     }
     restoreComponentSnapshot(snapshot);
   };
+  const equivalentHistoryAttributes = (before, after) => {
+    const beforeBlock = parseOrionBlockAttribute(before["data-orion-block"]);
+    const afterBlock = parseOrionBlockAttribute(after["data-orion-block"]);
+    const beforeComparable = { ...before };
+    const afterComparable = { ...after };
+    if (Object.keys(beforeBlock).length > 0 && Object.keys(afterBlock).length > 0 && JSON.stringify(beforeBlock.items || []) === JSON.stringify(afterBlock.items || [])) {
+      beforeComparable["data-orion-block"] = "";
+      afterComparable["data-orion-block"] = "";
+    }
+    return JSON.stringify(beforeComparable) === JSON.stringify(afterComparable);
+  };
   const pushCustomHistoryEntry = (before, after) => {
     if (!before && !after) {
       return;
@@ -2589,7 +2620,7 @@ function GrapesPageEditor({
     if (before && after && before.component !== after.component) {
       return;
     }
-    if (before && after && JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
+    if (before && after && JSON.stringify(before.style) === JSON.stringify(after.style) && equivalentHistoryAttributes(before.attributes, after.attributes)) {
       return;
     }
     customUndoStackRef.current.push({ after, before });
@@ -2613,6 +2644,7 @@ function GrapesPageEditor({
           selectedComponentRef.current = selected;
           lastSelectedComponentRef.current = selected;
           selectStyleManagerTarget(selected);
+          markSelectedCanvasBlock(selected);
           refreshSelectedState(selected);
         }
         updateHistoryState(editor);
@@ -2922,9 +2954,11 @@ function GrapesPageEditor({
             editor.select?.(target);
           }
           selectStyleManagerTarget(target);
+          markSelectedCanvasBlock(target);
           rehydrateSelectedComponentControls(target);
           window.setTimeout(() => {
             selectStyleManagerTarget(target);
+            markSelectedCanvasBlock(target);
             rehydrateSelectedComponentControls(target);
           }, 120);
         });
@@ -2947,6 +2981,7 @@ function GrapesPageEditor({
             return;
           }
           selectedComponentRef.current = null;
+          markSelectedCanvasBlock(null);
           refreshSelectedState(null);
         });
         const bindCanvasSelectionTracking = () => {
@@ -2962,6 +2997,9 @@ function GrapesPageEditor({
             selectedComponentRef.current = target;
             lastSelectedComponentRef.current = target;
             rememberComponentSnapshot(target);
+            editor.select?.(target);
+            selectStyleManagerTarget(target);
+            markSelectedCanvasBlock(target);
             refreshSelectedState(target);
           };
           canvasDocument.addEventListener("pointerdown", trackCanvasSelection, true);

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import {
-  admin_exports
-} from "./chunk-JC3UV74N.mjs";
 import {
   admin_app_exports
 } from "./chunk-RKTIFEUY.mjs";
+import {
+  admin_exports
+} from "./chunk-JC3UV74N.mjs";
 import "./chunk-W2UOCJDX.mjs";
 import {
   blocks_exports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.125",
+  "version": "0.6.0-beta.127",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",