@orion-studios/payload-studio 0.6.0-beta.113 → 0.6.0-beta.115

package/dist/builder-v2/client.js

@@ -695,6 +695,51 @@ var syncModelBackgroundToBlock = (model) => {
     })
   });
 };
+var spacingLonghands = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var hoistPreviewSpacingToModel = (view) => {
+  const element = view.el;
+  const preview = element?.querySelector?.(".xo-builder-preview");
+  if (!preview) {
+    return;
+  }
+  const model = view.model;
+  const style = model.getStyle?.() || {};
+  const computed = window.getComputedStyle(preview);
+  const nextStyle = {};
+  spacingLonghands.forEach((property) => {
+    const isPadding = property.startsWith("padding-");
+    if (hasSpacingStyle(style, property) || hasSpacingStyle(style, isPadding ? "padding" : "margin")) {
+      return;
+    }
+    const value = computed.getPropertyValue(property).trim();
+    if (value && (isPadding || value !== "0px")) {
+      nextStyle[property] = value;
+    }
+  });
+  if (Object.keys(nextStyle).length > 0) {
+    model.addStyle?.(nextStyle);
+  }
+  preview.style.margin = "0";
+  preview.style.marginTop = "0";
+  preview.style.marginRight = "0";
+  preview.style.marginBottom = "0";
+  preview.style.marginLeft = "0";
+  preview.style.padding = "0";
+  preview.style.paddingTop = "0";
+  preview.style.paddingRight = "0";
+  preview.style.paddingBottom = "0";
+  preview.style.paddingLeft = "0";
+};
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
   const normalizedType = type.replace(/[^a-z0-9-]/gi, "-");
@@ -1032,6 +1077,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
             this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
           }
           this.model.components(previewForDefinition(definition, props));
+          hoistPreviewSpacingToModel(this);
           lockPreviewChildren(this.model);
           queueMicrotask(() => bindEditablePreview(this, editor));
         }
@@ -1201,6 +1247,53 @@ var decorateBuilderColorEyeDroppers = (root = document) => {
     swatch.insertAdjacentElement("afterend", button);
   });
 };
+var decorateBuilderNumericSteppers = (root = document) => {
+  const panel = document.getElementById("orion-builder-v2-styles");
+  if (!panel || !("querySelector" in root)) {
+    return;
+  }
+  stepperProperties.forEach((property) => {
+    const control = panel.querySelector(`.gjs-sm-property__${CSS.escape(property)}`);
+    const field = control?.querySelector(".gjs-field");
+    const input = field?.querySelector("input");
+    if (!field || !input || field.querySelector(".orion-builder-v2-stepper")) {
+      return;
+    }
+    field.classList.add("has-orion-builder-stepper");
+    const stepper = document.createElement("span");
+    stepper.className = "orion-builder-v2-stepper";
+    const updateValue = (direction) => {
+      const current = Number.parseFloat(input.value || "0");
+      const next = Number.isFinite(current) ? current + direction : direction;
+      input.value = Number.isInteger(next) ? String(next) : String(Number(next.toFixed(2)));
+      input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    [
+      { className: "is-up", direction: 1, label: "Increase", text: "\u25B2" },
+      { className: "is-down", direction: -1, label: "Decrease", text: "\u25BC" }
+    ].forEach((step) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = `orion-builder-v2-stepper-button ${step.className}`;
+      button.setAttribute("aria-label", `${step.label} ${property.replace(/-/g, " ")}`);
+      button.textContent = step.text;
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        updateValue(step.direction);
+        input.focus();
+      });
+      stepper.appendChild(button);
+    });
+    field.appendChild(stepper);
+  });
+};
+var decorateBuilderControls = (root = document) => {
+  decorateBuilderSettingHelp(root);
+  decorateBuilderColorEyeDroppers(root);
+  decorateBuilderNumericSteppers(root);
+};
 var closeBuilderHelpPopovers = (except) => {
   document.querySelectorAll(".is-builder-help-open").forEach((element) => {
     if (element !== except) {
@@ -1511,6 +1604,11 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
+var propertyNameFromStyleControl = (element) => {
+  const property = element?.closest(".gjs-sm-property");
+  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
+  return className?.replace(/^gjs-sm-property__/, "") || "";
+};
 var writeStylePanelLength = (property, value) => {
   const control = readStylePanelValue(property);
   const input = control?.querySelector("input");
@@ -1540,8 +1638,58 @@ var spacingProperties = [
 ];
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
-  return element?.querySelector?.(".xo-builder-preview") || element || null;
-};
+  return element || null;
+};
+var liveStyleProperties = /* @__PURE__ */ new Set([
+  "align-items",
+  "bottom",
+  "flex-direction",
+  "flex-wrap",
+  "font-size",
+  "font-weight",
+  "gap",
+  "height",
+  "justify-content",
+  "left",
+  "letter-spacing",
+  "line-height",
+  "margin",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "min-height",
+  "opacity",
+  "padding",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "right",
+  "top",
+  "width"
+]);
+var stepperProperties = /* @__PURE__ */ new Set([
+  "bottom",
+  "font-size",
+  "gap",
+  "height",
+  "left",
+  "letter-spacing",
+  "line-height",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "min-height",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "right",
+  "top",
+  "width"
+]);
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");
   const typography = readNestedRecord(settings, "typography");
@@ -1984,7 +2132,7 @@ function GrapesPageEditor({
     setSelectionSummary(summarizeSelectedComponent(component));
     setQuickLayoutState(readQuickLayoutState(component));
     setDetailedLayoutControlState(readDetailedLayoutControlState(component));
-    window.requestAnimationFrame(() => decorateBuilderSettingHelp());
+    window.requestAnimationFrame(() => decorateBuilderControls());
   };
   const applySelectedStyle = (style) => {
     const component = selectedComponentRef.current;
@@ -2005,6 +2153,21 @@ function GrapesPageEditor({
     rememberComponentSnapshot(component);
     refreshSelectedState(component);
   };
+  const applyLiveStylePanelValue = (target) => {
+    const property = propertyNameFromStyleControl(target);
+    if (!property || !liveStyleProperties.has(property)) {
+      return;
+    }
+    const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
+    if (!selected) {
+      return;
+    }
+    const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
+    selectedComponentRef.current = selected;
+    lastSelectedComponentRef.current = selected;
+    selected.addStyle?.({ [property]: value });
+    editorRef.current?.select?.(selected);
+  };
   const updateSelectedOrionBlock = (updates) => {
     const component = selectedComponentRef.current;
     if (!component) {
@@ -2495,6 +2658,7 @@ function GrapesPageEditor({
     if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
       return;
     }
+    applyLiveStylePanelValue(target);
     stylePanelEditActiveRef.current = true;
     if (!stylePanelHistoryBeforeRef.current) {
       stylePanelHistoryBeforeRef.current = snapshotComponent(getCurrentOrionBlockTarget(getCurrentStyleTarget()));
@@ -2790,7 +2954,7 @@ function GrapesPageEditor({
         setSelectedDevice(editor.getDevice() || "desktop");
         runValidation(editor);
         updateHistoryState(editor);
-        decorateBuilderSettingHelp();
+        decorateBuilderControls();
         setLoading(false);
       } catch (initError) {
         setError(initError instanceof Error ? initError.message : "Could not load the website builder.");
@@ -2900,8 +3064,7 @@ function GrapesPageEditor({
     saveRef.current = save;
   }, [saving]);
   (0, import_react.useEffect)(() => {
-    decorateBuilderSettingHelp();
-    decorateBuilderColorEyeDroppers();
+    decorateBuilderControls();
     const refreshControls = () => refreshSelectedState(selectedComponentRef.current);
     const onStylePanelInput = (event) => {
       const target = event.target;
@@ -2910,6 +3073,7 @@ function GrapesPageEditor({
         if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
           return;
         }
+        applyLiveStylePanelValue(target);
         syncStylePanelChange();
       }
     };
@@ -2960,8 +3124,7 @@ function GrapesPageEditor({
       openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
     };
     const observer = new MutationObserver(() => {
-      decorateBuilderSettingHelp();
-      decorateBuilderColorEyeDroppers();
+      decorateBuilderControls();
     });
     observer.observe(document.body, {
       childList: true,

package/dist/builder-v2/client.mjs

@@ -571,6 +571,51 @@ var syncModelBackgroundToBlock = (model) => {
     })
   });
 };
+var spacingLonghands = [
+  "margin-top",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "padding-top",
+  "padding-bottom",
+  "padding-left",
+  "padding-right"
+];
+var hasSpacingStyle = (style, property) => Boolean(style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]);
+var hoistPreviewSpacingToModel = (view) => {
+  const element = view.el;
+  const preview = element?.querySelector?.(".xo-builder-preview");
+  if (!preview) {
+    return;
+  }
+  const model = view.model;
+  const style = model.getStyle?.() || {};
+  const computed = window.getComputedStyle(preview);
+  const nextStyle = {};
+  spacingLonghands.forEach((property) => {
+    const isPadding = property.startsWith("padding-");
+    if (hasSpacingStyle(style, property) || hasSpacingStyle(style, isPadding ? "padding" : "margin")) {
+      return;
+    }
+    const value = computed.getPropertyValue(property).trim();
+    if (value && (isPadding || value !== "0px")) {
+      nextStyle[property] = value;
+    }
+  });
+  if (Object.keys(nextStyle).length > 0) {
+    model.addStyle?.(nextStyle);
+  }
+  preview.style.margin = "0";
+  preview.style.marginTop = "0";
+  preview.style.marginRight = "0";
+  preview.style.marginBottom = "0";
+  preview.style.marginLeft = "0";
+  preview.style.padding = "0";
+  preview.style.paddingTop = "0";
+  preview.style.paddingRight = "0";
+  preview.style.paddingBottom = "0";
+  preview.style.paddingLeft = "0";
+};
 var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
 var blockPreviewForDefinition = (type) => {
   const normalizedType = type.replace(/[^a-z0-9-]/gi, "-");
@@ -908,6 +953,7 @@ var registerProjectDynamicComponents = (editor, adapter) => {
             this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
           }
           this.model.components(previewForDefinition(definition, props));
+          hoistPreviewSpacingToModel(this);
           lockPreviewChildren(this.model);
           queueMicrotask(() => bindEditablePreview(this, editor));
         }
@@ -1077,6 +1123,53 @@ var decorateBuilderColorEyeDroppers = (root = document) => {
     swatch.insertAdjacentElement("afterend", button);
   });
 };
+var decorateBuilderNumericSteppers = (root = document) => {
+  const panel = document.getElementById("orion-builder-v2-styles");
+  if (!panel || !("querySelector" in root)) {
+    return;
+  }
+  stepperProperties.forEach((property) => {
+    const control = panel.querySelector(`.gjs-sm-property__${CSS.escape(property)}`);
+    const field = control?.querySelector(".gjs-field");
+    const input = field?.querySelector("input");
+    if (!field || !input || field.querySelector(".orion-builder-v2-stepper")) {
+      return;
+    }
+    field.classList.add("has-orion-builder-stepper");
+    const stepper = document.createElement("span");
+    stepper.className = "orion-builder-v2-stepper";
+    const updateValue = (direction) => {
+      const current = Number.parseFloat(input.value || "0");
+      const next = Number.isFinite(current) ? current + direction : direction;
+      input.value = Number.isInteger(next) ? String(next) : String(Number(next.toFixed(2)));
+      input.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText" }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    [
+      { className: "is-up", direction: 1, label: "Increase", text: "\u25B2" },
+      { className: "is-down", direction: -1, label: "Decrease", text: "\u25BC" }
+    ].forEach((step) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = `orion-builder-v2-stepper-button ${step.className}`;
+      button.setAttribute("aria-label", `${step.label} ${property.replace(/-/g, " ")}`);
+      button.textContent = step.text;
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        updateValue(step.direction);
+        input.focus();
+      });
+      stepper.appendChild(button);
+    });
+    field.appendChild(stepper);
+  });
+};
+var decorateBuilderControls = (root = document) => {
+  decorateBuilderSettingHelp(root);
+  decorateBuilderColorEyeDroppers(root);
+  decorateBuilderNumericSteppers(root);
+};
 var closeBuilderHelpPopovers = (except) => {
   document.querySelectorAll(".is-builder-help-open").forEach((element) => {
     if (element !== except) {
@@ -1387,6 +1480,11 @@ var readStylePanelColor = (property) => {
   return swatchColor;
 };
 var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
+var propertyNameFromStyleControl = (element) => {
+  const property = element?.closest(".gjs-sm-property");
+  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
+  return className?.replace(/^gjs-sm-property__/, "") || "";
+};
 var writeStylePanelLength = (property, value) => {
   const control = readStylePanelValue(property);
   const input = control?.querySelector("input");
@@ -1416,8 +1514,58 @@ var spacingProperties = [
 ];
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
-  return element?.querySelector?.(".xo-builder-preview") || element || null;
-};
+  return element || null;
+};
+var liveStyleProperties = /* @__PURE__ */ new Set([
+  "align-items",
+  "bottom",
+  "flex-direction",
+  "flex-wrap",
+  "font-size",
+  "font-weight",
+  "gap",
+  "height",
+  "justify-content",
+  "left",
+  "letter-spacing",
+  "line-height",
+  "margin",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "min-height",
+  "opacity",
+  "padding",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "right",
+  "top",
+  "width"
+]);
+var stepperProperties = /* @__PURE__ */ new Set([
+  "bottom",
+  "font-size",
+  "gap",
+  "height",
+  "left",
+  "letter-spacing",
+  "line-height",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "min-height",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "right",
+  "top",
+  "width"
+]);
 var hasExplicitHorizontalAlign = (block) => {
   const settings = readNestedRecord(block, "settings");
   const typography = readNestedRecord(settings, "typography");
@@ -1860,7 +2008,7 @@ function GrapesPageEditor({
     setSelectionSummary(summarizeSelectedComponent(component));
     setQuickLayoutState(readQuickLayoutState(component));
     setDetailedLayoutControlState(readDetailedLayoutControlState(component));
-    window.requestAnimationFrame(() => decorateBuilderSettingHelp());
+    window.requestAnimationFrame(() => decorateBuilderControls());
   };
   const applySelectedStyle = (style) => {
     const component = selectedComponentRef.current;
@@ -1881,6 +2029,21 @@ function GrapesPageEditor({
     rememberComponentSnapshot(component);
     refreshSelectedState(component);
   };
+  const applyLiveStylePanelValue = (target) => {
+    const property = propertyNameFromStyleControl(target);
+    if (!property || !liveStyleProperties.has(property)) {
+      return;
+    }
+    const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
+    if (!selected) {
+      return;
+    }
+    const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
+    selectedComponentRef.current = selected;
+    lastSelectedComponentRef.current = selected;
+    selected.addStyle?.({ [property]: value });
+    editorRef.current?.select?.(selected);
+  };
   const updateSelectedOrionBlock = (updates) => {
     const component = selectedComponentRef.current;
     if (!component) {
@@ -2371,6 +2534,7 @@ function GrapesPageEditor({
     if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
       return;
     }
+    applyLiveStylePanelValue(target);
     stylePanelEditActiveRef.current = true;
     if (!stylePanelHistoryBeforeRef.current) {
       stylePanelHistoryBeforeRef.current = snapshotComponent(getCurrentOrionBlockTarget(getCurrentStyleTarget()));
@@ -2666,7 +2830,7 @@ function GrapesPageEditor({
         setSelectedDevice(editor.getDevice() || "desktop");
         runValidation(editor);
         updateHistoryState(editor);
-        decorateBuilderSettingHelp();
+        decorateBuilderControls();
         setLoading(false);
       } catch (initError) {
         setError(initError instanceof Error ? initError.message : "Could not load the website builder.");
@@ -2776,8 +2940,7 @@ function GrapesPageEditor({
     saveRef.current = save;
   }, [saving]);
   useEffect(() => {
-    decorateBuilderSettingHelp();
-    decorateBuilderColorEyeDroppers();
+    decorateBuilderControls();
     const refreshControls = () => refreshSelectedState(selectedComponentRef.current);
     const onStylePanelInput = (event) => {
       const target = event.target;
@@ -2786,6 +2949,7 @@ function GrapesPageEditor({
         if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
           return;
         }
+        applyLiveStylePanelValue(target);
         syncStylePanelChange();
       }
     };
@@ -2836,8 +3000,7 @@ function GrapesPageEditor({
       openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
     };
     const observer = new MutationObserver(() => {
-      decorateBuilderSettingHelp();
-      decorateBuilderColorEyeDroppers();
+      decorateBuilderControls();
     });
     observer.observe(document.body, {
       childList: true,

package/dist/builder-v2/styles.css

@@ -1365,6 +1365,48 @@
   padding-right: 8px;
 }
 
+.orion-builder-v2-editor .gjs-field.has-orion-builder-stepper {
+  align-items: stretch;
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+}
+
+.orion-builder-v2-editor .gjs-field.has-orion-builder-stepper input {
+  min-width: 0;
+}
+
+.orion-builder-v2-stepper {
+  align-self: stretch;
+  border-left: 1px solid rgba(214, 183, 161, 0.72);
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  min-height: 34px;
+  width: 24px;
+}
+
+.orion-builder-v2-stepper-button {
+  align-items: center;
+  appearance: none;
+  background: #fff6ec;
+  border: 0;
+  color: #7a543e;
+  cursor: pointer;
+  display: inline-flex;
+  font: 800 8px/1 var(--font-xo-sans, ui-sans-serif, system-ui, sans-serif);
+  justify-content: center;
+  min-height: 0;
+  padding: 0;
+}
+
+.orion-builder-v2-stepper-button + .orion-builder-v2-stepper-button {
+  border-top: 1px solid rgba(214, 183, 161, 0.72);
+}
+
+.orion-builder-v2-stepper-button:hover {
+  background: #f4e2d3;
+  color: #1f2d4d;
+}
+
 .orion-builder-v2-editor .gjs-field-color {
   cursor: pointer;
   display: grid !important;

package/package.json

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