@orion-studios/payload-studio 0.6.0-beta.129 → 0.6.0-beta.130

package/dist/builder-v2/client.js

@@ -1110,7 +1110,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
         defaults: {
           attributes: {
             "data-orion-component": type,
-            "data-orion-id": `${type}-${Date.now()}`
+            "data-orion-id": `${type}-${Date.now()}`,
+            ...definition.designControls ? { "data-orion-design-controls": JSON.stringify(definition.designControls) } : {}
           },
           components: "",
           droppable: false,
@@ -1174,6 +1175,49 @@ var quickLayoutOptions = [
   { description: "Center content in the section.", label: "Centered", value: "centered" },
   { description: "Prepare the section for layered content.", label: "Overlay", value: "overlay" }
 ];
+var defaultQuickDesignControls = {
+  alignment: true,
+  layout: quickLayoutOptions.map((option) => option.value),
+  spacing: true
+};
+var quickDesignControlsByComponentType = {
+  xoCta: {
+    alignment: true,
+    layout: ["centered", "natural"],
+    spacing: true
+  },
+  xoFaq: {
+    alignment: true,
+    layout: ["natural", "stacked"],
+    spacing: true
+  },
+  xoFeatureGrid: {
+    alignment: true,
+    layout: ["natural", "two-column", "three-column"],
+    spacing: true
+  },
+  xoForm: {
+    alignment: true,
+    layout: ["natural", "centered"],
+    spacing: true
+  },
+  xoHero: {
+    alignment: true,
+    layout: ["natural", "centered", "overlay"],
+    spacing: true
+  },
+  xoMarquee: {
+    alignment: false,
+    layout: [],
+    spacing: true
+  },
+  xoRichText: {
+    alignment: true,
+    layout: ["natural", "centered"],
+    spacing: true
+  },
+  xoSection: defaultQuickDesignControls
+};
 var quickSpacingOptions = [
   { label: "Compact", value: "compact" },
   { label: "Medium", value: "medium" },
@@ -1862,6 +1906,35 @@ var parseItemsJson = (value) => {
     return [];
   }
 };
+var parseQuickDesignControls = (value) => {
+  if (typeof value !== "string" || !value.trim()) {
+    return defaultQuickDesignControls;
+  }
+  try {
+    const parsed = JSON.parse(value);
+    const layout = Array.isArray(parsed.layout) ? parsed.layout.filter(
+      (item) => quickLayoutOptions.some((option) => option.value === item)
+    ) : defaultQuickDesignControls.layout;
+    return {
+      alignment: parsed.alignment !== false,
+      layout,
+      spacing: parsed.spacing !== false
+    };
+  } catch {
+    return defaultQuickDesignControls;
+  }
+};
+var quickDesignControlsForSelection = (selectionSummary, component) => {
+  if (!selectionSummary || !component) {
+    return defaultQuickDesignControls;
+  }
+  const attrs = component.getAttributes?.() || {};
+  const componentType = String(attrs["data-orion-component"] || selectionSummary.type || "");
+  if (!attrs["data-orion-design-controls"] && quickDesignControlsByComponentType[componentType]) {
+    return quickDesignControlsByComponentType[componentType];
+  }
+  return parseQuickDesignControls(attrs["data-orion-design-controls"]);
+};
 var postToParent = (payload) => {
   window.parent?.postMessage(
     {
@@ -2094,6 +2167,8 @@ function GrapesPageEditor({
   const pageTree = initialData?.meta?.pageTree || [];
   const role = initialData?.meta?.permissions?.role || "client";
   const canUseDeveloperControls = role === "developer";
+  const quickDesignControls = quickDesignControlsForSelection(selectionSummary, selectedComponentRef.current);
+  const availableQuickLayoutOptions = quickLayoutOptions.filter((option) => quickDesignControls.layout.includes(option.value));
   const summarizeSelectedComponent = (component) => {
     if (!component) {
       return null;
@@ -3623,12 +3698,12 @@ function GrapesPageEditor({
           renderInspectorPanel("design", "Design", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Use quick controls for common layout changes, then fine tune exact values in Detailed design below." }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-quick-layout", "aria-label": "Quick layout controls", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
+              availableQuickLayoutOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { children: [
                   "Layout",
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Choose a common arrangement for the selected section, such as stacked, row, columns, centered, or overlay.", label: "Layout" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-choice-grid", children: quickLayoutOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-choice-grid", children: availableQuickLayoutOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "button",
                   {
                     "aria-pressed": quickLayoutState.layout === option.value,
@@ -3646,8 +3721,8 @@ function GrapesPageEditor({
                   },
                   option.value
                 )) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
+              ] }) : null,
+              quickDesignControls.alignment ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { children: [
                   "Alignment",
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Control where content sits inside the selected section horizontally and vertically.", label: "Alignment" })
@@ -3680,8 +3755,8 @@ function GrapesPageEditor({
                   },
                   option.value
                 )) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
+              ] }) : null,
+              quickDesignControls.spacing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { children: [
                   "Spacing",
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Set a quick inside-padding preset for the selected section.", label: "Spacing" })
@@ -3700,7 +3775,7 @@ function GrapesPageEditor({
                   },
                   option.value
                 )) })
-              ] }),
+              ] }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-toggle-list", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "button",

package/dist/builder-v2/client.mjs

@@ -986,7 +986,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
         defaults: {
           attributes: {
             "data-orion-component": type,
-            "data-orion-id": `${type}-${Date.now()}`
+            "data-orion-id": `${type}-${Date.now()}`,
+            ...definition.designControls ? { "data-orion-design-controls": JSON.stringify(definition.designControls) } : {}
           },
           components: "",
           droppable: false,
@@ -1050,6 +1051,49 @@ var quickLayoutOptions = [
   { description: "Center content in the section.", label: "Centered", value: "centered" },
   { description: "Prepare the section for layered content.", label: "Overlay", value: "overlay" }
 ];
+var defaultQuickDesignControls = {
+  alignment: true,
+  layout: quickLayoutOptions.map((option) => option.value),
+  spacing: true
+};
+var quickDesignControlsByComponentType = {
+  xoCta: {
+    alignment: true,
+    layout: ["centered", "natural"],
+    spacing: true
+  },
+  xoFaq: {
+    alignment: true,
+    layout: ["natural", "stacked"],
+    spacing: true
+  },
+  xoFeatureGrid: {
+    alignment: true,
+    layout: ["natural", "two-column", "three-column"],
+    spacing: true
+  },
+  xoForm: {
+    alignment: true,
+    layout: ["natural", "centered"],
+    spacing: true
+  },
+  xoHero: {
+    alignment: true,
+    layout: ["natural", "centered", "overlay"],
+    spacing: true
+  },
+  xoMarquee: {
+    alignment: false,
+    layout: [],
+    spacing: true
+  },
+  xoRichText: {
+    alignment: true,
+    layout: ["natural", "centered"],
+    spacing: true
+  },
+  xoSection: defaultQuickDesignControls
+};
 var quickSpacingOptions = [
   { label: "Compact", value: "compact" },
   { label: "Medium", value: "medium" },
@@ -1738,6 +1782,35 @@ var parseItemsJson = (value) => {
     return [];
   }
 };
+var parseQuickDesignControls = (value) => {
+  if (typeof value !== "string" || !value.trim()) {
+    return defaultQuickDesignControls;
+  }
+  try {
+    const parsed = JSON.parse(value);
+    const layout = Array.isArray(parsed.layout) ? parsed.layout.filter(
+      (item) => quickLayoutOptions.some((option) => option.value === item)
+    ) : defaultQuickDesignControls.layout;
+    return {
+      alignment: parsed.alignment !== false,
+      layout,
+      spacing: parsed.spacing !== false
+    };
+  } catch {
+    return defaultQuickDesignControls;
+  }
+};
+var quickDesignControlsForSelection = (selectionSummary, component) => {
+  if (!selectionSummary || !component) {
+    return defaultQuickDesignControls;
+  }
+  const attrs = component.getAttributes?.() || {};
+  const componentType = String(attrs["data-orion-component"] || selectionSummary.type || "");
+  if (!attrs["data-orion-design-controls"] && quickDesignControlsByComponentType[componentType]) {
+    return quickDesignControlsByComponentType[componentType];
+  }
+  return parseQuickDesignControls(attrs["data-orion-design-controls"]);
+};
 var postToParent = (payload) => {
   window.parent?.postMessage(
     {
@@ -1970,6 +2043,8 @@ function GrapesPageEditor({
   const pageTree = initialData?.meta?.pageTree || [];
   const role = initialData?.meta?.permissions?.role || "client";
   const canUseDeveloperControls = role === "developer";
+  const quickDesignControls = quickDesignControlsForSelection(selectionSummary, selectedComponentRef.current);
+  const availableQuickLayoutOptions = quickLayoutOptions.filter((option) => quickDesignControls.layout.includes(option.value));
   const summarizeSelectedComponent = (component) => {
     if (!component) {
       return null;
@@ -3499,12 +3574,12 @@ function GrapesPageEditor({
           renderInspectorPanel("design", "Design", /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("p", { children: "Use quick controls for common layout changes, then fine tune exact values in Detailed design below." }),
             /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-quick-layout", "aria-label": "Quick layout controls", children: [
-              /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-control-group", children: [
+              availableQuickLayoutOptions.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-control-group", children: [
                 /* @__PURE__ */ jsxs("h3", { children: [
                   "Layout",
                   /* @__PURE__ */ jsx(HelpTrigger, { help: "Choose a common arrangement for the selected section, such as stacked, row, columns, centered, or overlay.", label: "Layout" })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-choice-grid", children: quickLayoutOptions.map((option) => /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-choice-grid", children: availableQuickLayoutOptions.map((option) => /* @__PURE__ */ jsxs(
                   "button",
                   {
                     "aria-pressed": quickLayoutState.layout === option.value,
@@ -3522,8 +3597,8 @@ function GrapesPageEditor({
                   },
                   option.value
                 )) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-control-group", children: [
+              ] }) : null,
+              quickDesignControls.alignment ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-control-group", children: [
                 /* @__PURE__ */ jsxs("h3", { children: [
                   "Alignment",
                   /* @__PURE__ */ jsx(HelpTrigger, { help: "Control where content sits inside the selected section horizontally and vertically.", label: "Alignment" })
@@ -3556,8 +3631,8 @@ function GrapesPageEditor({
                   },
                   option.value
                 )) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-control-group", children: [
+              ] }) : null,
+              quickDesignControls.spacing ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-control-group", children: [
                 /* @__PURE__ */ jsxs("h3", { children: [
                   "Spacing",
                   /* @__PURE__ */ jsx(HelpTrigger, { help: "Set a quick inside-padding preset for the selected section.", label: "Spacing" })
@@ -3576,7 +3651,7 @@ function GrapesPageEditor({
                   },
                   option.value
                 )) })
-              ] }),
+              ] }) : null,
               /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-toggle-list", children: [
                 /* @__PURE__ */ jsx(
                   "button",

package/dist/builder-v2/index.d.mts

@@ -115,12 +115,18 @@ type BuilderV2RuntimeComponentProps = {
 };
 type BuilderV2RuntimeComponent = ComponentType<BuilderV2RuntimeComponentProps>;
 type BuilderV2ProjectComponentDefinition = {
+    designControls?: BuilderV2ProjectComponentDesignControls;
     editorPreview?: (props: Record<string, unknown>) => string;
     label: string;
     render: BuilderV2RuntimeComponent;
     traits?: BuilderV2TraitDefinition[];
     type: string;
 };
+type BuilderV2ProjectComponentDesignControls = {
+    alignment?: boolean;
+    layout?: Array<'centered' | 'natural' | 'overlay' | 'row' | 'stacked' | 'three-column' | 'two-column'>;
+    spacing?: boolean;
+};
 type BuilderV2TraitDefinition = {
     label: string;
     name: string;

package/dist/builder-v2/index.d.ts

@@ -115,12 +115,18 @@ type BuilderV2RuntimeComponentProps = {
 };
 type BuilderV2RuntimeComponent = ComponentType<BuilderV2RuntimeComponentProps>;
 type BuilderV2ProjectComponentDefinition = {
+    designControls?: BuilderV2ProjectComponentDesignControls;
     editorPreview?: (props: Record<string, unknown>) => string;
     label: string;
     render: BuilderV2RuntimeComponent;
     traits?: BuilderV2TraitDefinition[];
     type: string;
 };
+type BuilderV2ProjectComponentDesignControls = {
+    alignment?: boolean;
+    layout?: Array<'centered' | 'natural' | 'overlay' | 'row' | 'stacked' | 'three-column' | 'two-column'>;
+    spacing?: boolean;
+};
 type BuilderV2TraitDefinition = {
     label: string;
     name: string;

package/dist/builder-v2/styles.css

@@ -923,6 +923,25 @@
   );
 }
 
+.orion-builder-v2-block-preview.is-xoSection,
+.orion-builder-v2-block-preview.is-section {
+  align-content: center;
+}
+
+.orion-builder-v2-block-preview.is-xoSection .wire-image,
+.orion-builder-v2-block-preview.is-xoSection .wire-card,
+.orion-builder-v2-block-preview.is-xoSection .wire-button {
+  display: none;
+}
+
+.orion-builder-v2-block-preview.is-xoSection .wire-title {
+  grid-column: 2 / 12;
+}
+
+.orion-builder-v2-block-preview.is-xoSection .wire-copy {
+  grid-column: 3 / 11;
+}
+
 .orion-builder-v2-block-preview.is-xoRichText,
 .orion-builder-v2-block-preview.is-richText,
 .orion-builder-v2-block-preview.is-testimonials {

package/package.json

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