@orion-studios/payload-studio 0.6.0-beta.165 → 0.6.0-beta.166

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1399,7 +1399,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1399
1399
  input.type = "text";
1400
1400
  input.inputMode = "decimal";
1401
1401
  field.querySelector("select")?.setAttribute("tabindex", "-1");
1402
- if (property.startsWith("padding-")) {
1402
+ if (property.startsWith("padding-") || property.startsWith("margin-")) {
1403
1403
  input.addEventListener("input", () => {
1404
1404
  if (input.value.trim().startsWith("-")) {
1405
1405
  return;
@@ -1411,7 +1411,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1411
1411
  input.addEventListener(
1412
1412
  "keydown",
1413
1413
  (event) => {
1414
- if (property.startsWith("padding-")) {
1414
+ if (property.startsWith("padding-") || property.startsWith("margin-")) {
1415
1415
  const selectionStart2 = input.selectionStart ?? 0;
1416
1416
  const selectionEnd2 = input.selectionEnd ?? selectionStart2;
1417
1417
  const value2 = input.dataset.orionPaddingDraft || input.value || "";
@@ -1431,7 +1431,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1431
1431
  const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
1432
1432
  input.setSelectionRange(nextCursor2, nextCursor2);
1433
1433
  window.dispatchEvent(
1434
- new CustomEvent("orion-builder-v2-negative-padding-input", {
1434
+ new CustomEvent("orion-builder-v2-negative-spacing-input", {
1435
1435
  detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1436
1436
  })
1437
1437
  );
@@ -2560,18 +2560,20 @@ function GrapesPageEditor({
2560
2560
  selected.addStyle?.({ [property]: value });
2561
2561
  editorRef.current?.select?.(selected);
2562
2562
  };
2563
- const applyNegativePaddingInput = (property, value, baseValue) => {
2563
+ const applyNegativeSpacingInput = (property, value, baseValue) => {
2564
2564
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2565
- if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2565
+ const isPadding = property.startsWith("padding-");
2566
+ const isMargin = property.startsWith("margin-");
2567
+ if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
2566
2568
  return;
2567
2569
  }
2568
2570
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2569
- const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
2570
2571
  const adjustment = Number.parseFloat(value);
2571
2572
  if (!Number.isFinite(adjustment)) {
2572
2573
  return;
2573
2574
  }
2574
- const next = Math.max(0, base + adjustment);
2575
+ const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
2576
+ const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
2575
2577
  const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
2576
2578
  selectedComponentRef.current = selected;
2577
2579
  lastSelectedComponentRef.current = selected;
@@ -3713,12 +3715,12 @@ function GrapesPageEditor({
3713
3715
  closeBuilderHelpPopovers(wrapper);
3714
3716
  openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
3715
3717
  };
3716
- const onNegativePaddingInput = (event) => {
3718
+ const onNegativeSpacingInput = (event) => {
3717
3719
  const detail = event.detail || {};
3718
3720
  if (!detail.property || !detail.value) {
3719
3721
  return;
3720
3722
  }
3721
- applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3723
+ applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
3722
3724
  };
3723
3725
  const observer = new MutationObserver(() => {
3724
3726
  decorateBuilderControls();
@@ -3733,7 +3735,7 @@ function GrapesPageEditor({
3733
3735
  document.addEventListener("input", refreshControls);
3734
3736
  document.addEventListener("input", onStylePanelInput, true);
3735
3737
  document.addEventListener("keydown", onDocumentKeydown, true);
3736
- window.addEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
3738
+ window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
3737
3739
  return () => {
3738
3740
  observer.disconnect();
3739
3741
  document.removeEventListener("change", refreshControls);
@@ -3742,7 +3744,7 @@ function GrapesPageEditor({
3742
3744
  document.removeEventListener("input", refreshControls);
3743
3745
  document.removeEventListener("input", onStylePanelInput, true);
3744
3746
  document.removeEventListener("keydown", onDocumentKeydown, true);
3745
- window.removeEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
3747
+ window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
3746
3748
  };
3747
3749
  }, []);
3748
3750
  (0, import_react.useEffect)(() => {
@@ -1275,7 +1275,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1275
1275
  input.type = "text";
1276
1276
  input.inputMode = "decimal";
1277
1277
  field.querySelector("select")?.setAttribute("tabindex", "-1");
1278
- if (property.startsWith("padding-")) {
1278
+ if (property.startsWith("padding-") || property.startsWith("margin-")) {
1279
1279
  input.addEventListener("input", () => {
1280
1280
  if (input.value.trim().startsWith("-")) {
1281
1281
  return;
@@ -1287,7 +1287,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1287
1287
  input.addEventListener(
1288
1288
  "keydown",
1289
1289
  (event) => {
1290
- if (property.startsWith("padding-")) {
1290
+ if (property.startsWith("padding-") || property.startsWith("margin-")) {
1291
1291
  const selectionStart2 = input.selectionStart ?? 0;
1292
1292
  const selectionEnd2 = input.selectionEnd ?? selectionStart2;
1293
1293
  const value2 = input.dataset.orionPaddingDraft || input.value || "";
@@ -1307,7 +1307,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
1307
1307
  const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
1308
1308
  input.setSelectionRange(nextCursor2, nextCursor2);
1309
1309
  window.dispatchEvent(
1310
- new CustomEvent("orion-builder-v2-negative-padding-input", {
1310
+ new CustomEvent("orion-builder-v2-negative-spacing-input", {
1311
1311
  detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1312
1312
  })
1313
1313
  );
@@ -2436,18 +2436,20 @@ function GrapesPageEditor({
2436
2436
  selected.addStyle?.({ [property]: value });
2437
2437
  editorRef.current?.select?.(selected);
2438
2438
  };
2439
- const applyNegativePaddingInput = (property, value, baseValue) => {
2439
+ const applyNegativeSpacingInput = (property, value, baseValue) => {
2440
2440
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2441
- if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2441
+ const isPadding = property.startsWith("padding-");
2442
+ const isMargin = property.startsWith("margin-");
2443
+ if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
2442
2444
  return;
2443
2445
  }
2444
2446
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2445
- const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
2446
2447
  const adjustment = Number.parseFloat(value);
2447
2448
  if (!Number.isFinite(adjustment)) {
2448
2449
  return;
2449
2450
  }
2450
- const next = Math.max(0, base + adjustment);
2451
+ const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
2452
+ const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
2451
2453
  const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
2452
2454
  selectedComponentRef.current = selected;
2453
2455
  lastSelectedComponentRef.current = selected;
@@ -3589,12 +3591,12 @@ function GrapesPageEditor({
3589
3591
  closeBuilderHelpPopovers(wrapper);
3590
3592
  openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
3591
3593
  };
3592
- const onNegativePaddingInput = (event) => {
3594
+ const onNegativeSpacingInput = (event) => {
3593
3595
  const detail = event.detail || {};
3594
3596
  if (!detail.property || !detail.value) {
3595
3597
  return;
3596
3598
  }
3597
- applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3599
+ applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
3598
3600
  };
3599
3601
  const observer = new MutationObserver(() => {
3600
3602
  decorateBuilderControls();
@@ -3609,7 +3611,7 @@ function GrapesPageEditor({
3609
3611
  document.addEventListener("input", refreshControls);
3610
3612
  document.addEventListener("input", onStylePanelInput, true);
3611
3613
  document.addEventListener("keydown", onDocumentKeydown, true);
3612
- window.addEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
3614
+ window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
3613
3615
  return () => {
3614
3616
  observer.disconnect();
3615
3617
  document.removeEventListener("change", refreshControls);
@@ -3618,7 +3620,7 @@ function GrapesPageEditor({
3618
3620
  document.removeEventListener("input", refreshControls);
3619
3621
  document.removeEventListener("input", onStylePanelInput, true);
3620
3622
  document.removeEventListener("keydown", onDocumentKeydown, true);
3621
- window.removeEventListener("orion-builder-v2-negative-padding-input", onNegativePaddingInput);
3623
+ window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
3622
3624
  };
3623
3625
  }, []);
3624
3626
  useEffect(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.6.0-beta.165",
3
+ "version": "0.6.0-beta.166",
4
4
  "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
5
5
  "types": "./dist/index.d.ts",
6
6
  "main": "./dist/index.js",