@orion-studios/payload-studio 0.6.0-beta.126 → 0.6.0-beta.128

package/dist/builder-v2/client.js

@@ -685,9 +685,6 @@ var defaultBackgroundForComponent = (type, props) => {
   if (explicit) {
     return explicit;
   }
-  if (type === "xoCta") {
-    return typeof block.style === "string" && block.style.toLowerCase() === "dark" ? "#243654" : "#304b70";
-  }
   if (type === "xoFeatureGrid" || type === "xoRichText") {
     return "#fbfaf7";
   }
@@ -1117,6 +1114,9 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           },
           components: "",
           droppable: false,
+          highlightable: true,
+          hoverable: true,
+          selectable: true,
           tagName: "div",
           traits: [
             ...(definition.traits || []).map((trait) => ({
@@ -1524,6 +1524,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 +2114,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 +2122,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 +2140,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 +2173,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 +2187,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 +2554,7 @@ function GrapesPageEditor({
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
     rememberComponentSnapshot(component);
+    markSelectedCanvasBlock(component);
     refreshSelectedState(component);
     window.requestAnimationFrame(() => {
       const element = spacingTargetForComponent(component);
@@ -2692,6 +2708,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) => {
@@ -2748,6 +2765,7 @@ function GrapesPageEditor({
           selectedComponentRef.current = selected;
           lastSelectedComponentRef.current = selected;
           selectStyleManagerTarget(selected);
+          markSelectedCanvasBlock(selected);
           refreshSelectedState(selected);
         }
         updateHistoryState(editor);
@@ -3057,9 +3075,11 @@ function GrapesPageEditor({
             editor.select?.(target);
           }
           selectStyleManagerTarget(target);
+          markSelectedCanvasBlock(target);
           rehydrateSelectedComponentControls(target);
           window.setTimeout(() => {
             selectStyleManagerTarget(target);
+            markSelectedCanvasBlock(target);
             rehydrateSelectedComponentControls(target);
           }, 120);
         });
@@ -3082,6 +3102,7 @@ function GrapesPageEditor({
             return;
           }
           selectedComponentRef.current = null;
+          markSelectedCanvasBlock(null);
           refreshSelectedState(null);
         });
         const bindCanvasSelectionTracking = () => {
@@ -3097,6 +3118,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

@@ -561,9 +561,6 @@ var defaultBackgroundForComponent = (type, props) => {
   if (explicit) {
     return explicit;
   }
-  if (type === "xoCta") {
-    return typeof block.style === "string" && block.style.toLowerCase() === "dark" ? "#243654" : "#304b70";
-  }
   if (type === "xoFeatureGrid" || type === "xoRichText") {
     return "#fbfaf7";
   }
@@ -993,6 +990,9 @@ var registerProjectDynamicComponents = (editor, adapter) => {
           },
           components: "",
           droppable: false,
+          highlightable: true,
+          hoverable: true,
+          selectable: true,
           tagName: "div",
           traits: [
             ...(definition.traits || []).map((trait) => ({
@@ -1400,6 +1400,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 +1990,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 +1998,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 +2016,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 +2049,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 +2063,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 +2430,7 @@ function GrapesPageEditor({
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
     rememberComponentSnapshot(component);
+    markSelectedCanvasBlock(component);
     refreshSelectedState(component);
     window.requestAnimationFrame(() => {
       const element = spacingTargetForComponent(component);
@@ -2568,6 +2584,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) => {
@@ -2624,6 +2641,7 @@ function GrapesPageEditor({
           selectedComponentRef.current = selected;
           lastSelectedComponentRef.current = selected;
           selectStyleManagerTarget(selected);
+          markSelectedCanvasBlock(selected);
           refreshSelectedState(selected);
         }
         updateHistoryState(editor);
@@ -2933,9 +2951,11 @@ function GrapesPageEditor({
             editor.select?.(target);
           }
           selectStyleManagerTarget(target);
+          markSelectedCanvasBlock(target);
           rehydrateSelectedComponentControls(target);
           window.setTimeout(() => {
             selectStyleManagerTarget(target);
+            markSelectedCanvasBlock(target);
             rehydrateSelectedComponentControls(target);
           }, 120);
         });
@@ -2958,6 +2978,7 @@ function GrapesPageEditor({
             return;
           }
           selectedComponentRef.current = null;
+          markSelectedCanvasBlock(null);
           refreshSelectedState(null);
         });
         const bindCanvasSelectionTracking = () => {
@@ -2973,6 +2994,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/styles.css

@@ -864,7 +864,6 @@
 
 .orion-builder-v2-block-preview.is-xoCta,
 .orion-builder-v2-block-preview.is-cta {
-  background: #243654;
   align-content: center;
 }
 
@@ -881,13 +880,13 @@
 
 .orion-builder-v2-block-preview.is-xoCta .wire-title,
 .orion-builder-v2-block-preview.is-cta .wire-title {
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(31, 45, 77, 0.38);
   grid-column: 2 / 12;
 }
 
 .orion-builder-v2-block-preview.is-xoCta .wire-button,
 .orion-builder-v2-block-preview.is-cta .wire-button {
-  background: #f6cd80;
+  background: rgba(199, 100, 61, 0.5);
   grid-column: 5 / 9;
 }
 

package/package.json

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