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

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.
Files changed (4) hide show
  1. package/dist/builder-v2/client.js +29 -54
  2. package/dist/builder-v2/client.mjs +29 -54
  3. package/dist/builder-v2/styles.css +0 -8
  4. package/package.json +1 -1
package/dist/builder-v2/client.js CHANGED
@@ -1400,15 +1400,13 @@ var decorateBuilderNumericSteppers = (root = document) => {
1400
1400
  input.inputMode = "decimal";
1401
1401
  field.querySelector("select")?.setAttribute("tabindex", "-1");
1402
1402
  if (property.startsWith("padding-")) {
1403
- const keepNegativePaddingValue = (event) => {
1404
- if (!input.value.trim().startsWith("-")) {
1405
- delete input.dataset.orionRawValue;
1403
+ input.addEventListener("input", () => {
1404
+ if (input.value.trim().startsWith("-")) {
1406
1405
  return;
1407
1406
  }
1408
- input.dataset.orionRawValue = input.value.trim();
1409
- };
1410
- input.addEventListener("input", keepNegativePaddingValue, true);
1411
- input.addEventListener("change", keepNegativePaddingValue, true);
1407
+ delete input.dataset.orionPaddingBase;
1408
+ delete input.dataset.orionPaddingDraft;
1409
+ });
1412
1410
  }
1413
1411
  input.addEventListener(
1414
1412
  "keydown",
@@ -1416,25 +1414,25 @@ var decorateBuilderNumericSteppers = (root = document) => {
1416
1414
  if (property.startsWith("padding-")) {
1417
1415
  const selectionStart2 = input.selectionStart ?? 0;
1418
1416
  const selectionEnd2 = input.selectionEnd ?? selectionStart2;
1419
- const value2 = input.dataset.orionRawValue || input.value || "";
1417
+ const value2 = input.dataset.orionPaddingDraft || input.value || "";
1420
1418
  const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
1421
- const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionRawValue?.startsWith("-")) || event.key === "-";
1419
+ const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
1422
1420
  if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
1423
1421
  event.preventDefault();
1424
1422
  event.stopImmediatePropagation();
1425
- if (!input.dataset.orionRawValue) {
1423
+ if (!input.dataset.orionPaddingDraft) {
1426
1424
  input.dataset.orionPaddingBase = input.value || "0";
1427
1425
  }
1428
1426
  const inserted = event.key === "-" ? "-" : event.key;
1429
1427
  const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
1430
1428
  const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
1431
1429
  input.value = nextValue2;
1432
- input.dataset.orionRawValue = nextValue2;
1430
+ input.dataset.orionPaddingDraft = nextValue2;
1433
1431
  const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
1434
1432
  input.setSelectionRange(nextCursor2, nextCursor2);
1435
1433
  window.dispatchEvent(
1436
1434
  new CustomEvent("orion-builder-v2-negative-padding-input", {
1437
- detail: { property, value: nextValue2 }
1435
+ detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1438
1436
  })
1439
1437
  );
1440
1438
  return;
@@ -1786,14 +1784,6 @@ var canvasSelectionCss = `
1786
1784
  position: relative;
1787
1785
  }
1788
1786
 
1789
- .orion-builder-v2-has-negative-padding > .xo-builder-preview,
1790
- .orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
1791
- margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
1792
- margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
1793
- margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
1794
- margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
1795
- }
1796
-
1797
1787
  .xo-builder-preview-grid {
1798
1788
  display: grid;
1799
1789
  gap: 22px;
@@ -1922,7 +1912,7 @@ var readStylePanelValue = (property) => {
1922
1912
  var readStylePanelLength = (property) => {
1923
1913
  const control = readStylePanelValue(property);
1924
1914
  const input = control?.querySelector("input");
1925
- const value = (input?.dataset.orionRawValue || input?.value || "").trim();
1915
+ const value = (input?.value || "").trim();
1926
1916
  const unit = control?.querySelector("select")?.value.trim() || "";
1927
1917
  if (!value) {
1928
1918
  return "";
@@ -1944,13 +1934,14 @@ var readStylePanelColor = (property) => {
1944
1934
  return swatchColor;
1945
1935
  };
1946
1936
  var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
1947
- var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
1948
- var negativePaddingVariables = [
1949
- "--orion-builder-negative-padding-top",
1950
- "--orion-builder-negative-padding-right",
1951
- "--orion-builder-negative-padding-bottom",
1952
- "--orion-builder-negative-padding-left"
1953
- ];
1937
+ var cssPixelValue = (value) => {
1938
+ const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
1939
+ if (!match) {
1940
+ return null;
1941
+ }
1942
+ const parsed = Number.parseFloat(match[1]);
1943
+ return Number.isFinite(parsed) ? parsed : null;
1944
+ };
1954
1945
  var propertyNameFromStyleControl = (element) => {
1955
1946
  const property = element?.closest(".gjs-sm-property");
1956
1947
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2566,41 +2557,25 @@ function GrapesPageEditor({
2566
2557
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2567
2558
  selectedComponentRef.current = selected;
2568
2559
  lastSelectedComponentRef.current = selected;
2569
- if (property.startsWith("padding-") && !value.startsWith("-")) {
2570
- clearNegativePaddingForProperty(selected, property);
2571
- }
2572
2560
  selected.addStyle?.({ [property]: value });
2573
2561
  editorRef.current?.select?.(selected);
2574
2562
  };
2575
- const clearNegativePaddingForProperty = (component, property) => {
2576
- const variable = negativePaddingVariableForProperty(property);
2577
- if (!variable) {
2578
- return;
2579
- }
2580
- component.removeStyle?.(variable);
2581
- const style = component.getStyle?.() || {};
2582
- const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
2583
- if (!hasNegativePadding) {
2584
- component.removeClass?.("orion-builder-v2-has-negative-padding");
2585
- }
2586
- };
2587
- const applyNegativePaddingInput = (property, value) => {
2563
+ const applyNegativePaddingInput = (property, value, baseValue) => {
2588
2564
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2589
- const variable = negativePaddingVariableForProperty(property);
2590
- if (!selected || !variable || !value.startsWith("-")) {
2565
+ if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2591
2566
  return;
2592
2567
  }
2593
2568
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2594
- const amount = Math.abs(Number.parseFloat(value));
2595
- if (!Number.isFinite(amount) || amount <= 0) {
2596
- clearNegativePaddingForProperty(selected, property);
2569
+ const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
2570
+ const adjustment = Number.parseFloat(value);
2571
+ if (!Number.isFinite(adjustment)) {
2597
2572
  return;
2598
2573
  }
2599
- const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
2574
+ const next = Math.max(0, base + adjustment);
2575
+ const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
2600
2576
  selectedComponentRef.current = selected;
2601
2577
  lastSelectedComponentRef.current = selected;
2602
- selected.addClass?.("orion-builder-v2-has-negative-padding");
2603
- selected.addStyle?.({ [variable]: styleValue });
2578
+ selected.addStyle?.({ [property]: styleValue });
2604
2579
  editorRef.current?.select?.(selected);
2605
2580
  };
2606
2581
  const updateSelectedOrionBlock = (updates) => {
@@ -3681,7 +3656,7 @@ function GrapesPageEditor({
3681
3656
  const onStylePanelInput = (event) => {
3682
3657
  const target = event.target;
3683
3658
  if (target?.closest("#orion-builder-v2-styles")) {
3684
- if (target?.dataset?.orionRawValue?.startsWith("-")) {
3659
+ if (target?.dataset?.orionPaddingDraft?.startsWith("-")) {
3685
3660
  return;
3686
3661
  }
3687
3662
  const activeElement = document.activeElement;
@@ -3743,7 +3718,7 @@ function GrapesPageEditor({
3743
3718
  if (!detail.property || !detail.value) {
3744
3719
  return;
3745
3720
  }
3746
- applyNegativePaddingInput(detail.property, detail.value);
3721
+ applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3747
3722
  };
3748
3723
  const observer = new MutationObserver(() => {
3749
3724
  decorateBuilderControls();
package/dist/builder-v2/client.mjs CHANGED
@@ -1276,15 +1276,13 @@ var decorateBuilderNumericSteppers = (root = document) => {
1276
1276
  input.inputMode = "decimal";
1277
1277
  field.querySelector("select")?.setAttribute("tabindex", "-1");
1278
1278
  if (property.startsWith("padding-")) {
1279
- const keepNegativePaddingValue = (event) => {
1280
- if (!input.value.trim().startsWith("-")) {
1281
- delete input.dataset.orionRawValue;
1279
+ input.addEventListener("input", () => {
1280
+ if (input.value.trim().startsWith("-")) {
1282
1281
  return;
1283
1282
  }
1284
- input.dataset.orionRawValue = input.value.trim();
1285
- };
1286
- input.addEventListener("input", keepNegativePaddingValue, true);
1287
- input.addEventListener("change", keepNegativePaddingValue, true);
1283
+ delete input.dataset.orionPaddingBase;
1284
+ delete input.dataset.orionPaddingDraft;
1285
+ });
1288
1286
  }
1289
1287
  input.addEventListener(
1290
1288
  "keydown",
@@ -1292,25 +1290,25 @@ var decorateBuilderNumericSteppers = (root = document) => {
1292
1290
  if (property.startsWith("padding-")) {
1293
1291
  const selectionStart2 = input.selectionStart ?? 0;
1294
1292
  const selectionEnd2 = input.selectionEnd ?? selectionStart2;
1295
- const value2 = input.dataset.orionRawValue || input.value || "";
1293
+ const value2 = input.dataset.orionPaddingDraft || input.value || "";
1296
1294
  const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
1297
- const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionRawValue?.startsWith("-")) || event.key === "-";
1295
+ const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
1298
1296
  if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
1299
1297
  event.preventDefault();
1300
1298
  event.stopImmediatePropagation();
1301
- if (!input.dataset.orionRawValue) {
1299
+ if (!input.dataset.orionPaddingDraft) {
1302
1300
  input.dataset.orionPaddingBase = input.value || "0";
1303
1301
  }
1304
1302
  const inserted = event.key === "-" ? "-" : event.key;
1305
1303
  const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
1306
1304
  const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
1307
1305
  input.value = nextValue2;
1308
- input.dataset.orionRawValue = nextValue2;
1306
+ input.dataset.orionPaddingDraft = nextValue2;
1309
1307
  const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
1310
1308
  input.setSelectionRange(nextCursor2, nextCursor2);
1311
1309
  window.dispatchEvent(
1312
1310
  new CustomEvent("orion-builder-v2-negative-padding-input", {
1313
- detail: { property, value: nextValue2 }
1311
+ detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
1314
1312
  })
1315
1313
  );
1316
1314
  return;
@@ -1662,14 +1660,6 @@ var canvasSelectionCss = `
1662
1660
  position: relative;
1663
1661
  }
1664
1662
 
1665
- .orion-builder-v2-has-negative-padding > .xo-builder-preview,
1666
- .orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
1667
- margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
1668
- margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
1669
- margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
1670
- margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
1671
- }
1672
-
1673
1663
  .xo-builder-preview-grid {
1674
1664
  display: grid;
1675
1665
  gap: 22px;
@@ -1798,7 +1788,7 @@ var readStylePanelValue = (property) => {
1798
1788
  var readStylePanelLength = (property) => {
1799
1789
  const control = readStylePanelValue(property);
1800
1790
  const input = control?.querySelector("input");
1801
- const value = (input?.dataset.orionRawValue || input?.value || "").trim();
1791
+ const value = (input?.value || "").trim();
1802
1792
  const unit = control?.querySelector("select")?.value.trim() || "";
1803
1793
  if (!value) {
1804
1794
  return "";
@@ -1820,13 +1810,14 @@ var readStylePanelColor = (property) => {
1820
1810
  return swatchColor;
1821
1811
  };
1822
1812
  var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
1823
- var negativePaddingVariableForProperty = (property) => property === "padding-top" ? "--orion-builder-negative-padding-top" : property === "padding-right" ? "--orion-builder-negative-padding-right" : property === "padding-bottom" ? "--orion-builder-negative-padding-bottom" : property === "padding-left" ? "--orion-builder-negative-padding-left" : "";
1824
- var negativePaddingVariables = [
1825
- "--orion-builder-negative-padding-top",
1826
- "--orion-builder-negative-padding-right",
1827
- "--orion-builder-negative-padding-bottom",
1828
- "--orion-builder-negative-padding-left"
1829
- ];
1813
+ var cssPixelValue = (value) => {
1814
+ const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
1815
+ if (!match) {
1816
+ return null;
1817
+ }
1818
+ const parsed = Number.parseFloat(match[1]);
1819
+ return Number.isFinite(parsed) ? parsed : null;
1820
+ };
1830
1821
  var propertyNameFromStyleControl = (element) => {
1831
1822
  const property = element?.closest(".gjs-sm-property");
1832
1823
  const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
@@ -2442,41 +2433,25 @@ function GrapesPageEditor({
2442
2433
  const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
2443
2434
  selectedComponentRef.current = selected;
2444
2435
  lastSelectedComponentRef.current = selected;
2445
- if (property.startsWith("padding-") && !value.startsWith("-")) {
2446
- clearNegativePaddingForProperty(selected, property);
2447
- }
2448
2436
  selected.addStyle?.({ [property]: value });
2449
2437
  editorRef.current?.select?.(selected);
2450
2438
  };
2451
- const clearNegativePaddingForProperty = (component, property) => {
2452
- const variable = negativePaddingVariableForProperty(property);
2453
- if (!variable) {
2454
- return;
2455
- }
2456
- component.removeStyle?.(variable);
2457
- const style = component.getStyle?.() || {};
2458
- const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
2459
- if (!hasNegativePadding) {
2460
- component.removeClass?.("orion-builder-v2-has-negative-padding");
2461
- }
2462
- };
2463
- const applyNegativePaddingInput = (property, value) => {
2439
+ const applyNegativePaddingInput = (property, value, baseValue) => {
2464
2440
  const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
2465
- const variable = negativePaddingVariableForProperty(property);
2466
- if (!selected || !variable || !value.startsWith("-")) {
2441
+ if (!selected || !property.startsWith("padding-") || !value.startsWith("-")) {
2467
2442
  return;
2468
2443
  }
2469
2444
  const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
2470
- const amount = Math.abs(Number.parseFloat(value));
2471
- if (!Number.isFinite(amount) || amount <= 0) {
2472
- clearNegativePaddingForProperty(selected, property);
2445
+ const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
2446
+ const adjustment = Number.parseFloat(value);
2447
+ if (!Number.isFinite(adjustment)) {
2473
2448
  return;
2474
2449
  }
2475
- const styleValue = `${Number.isInteger(amount) ? amount : Number(amount.toFixed(2))}${unit}`;
2450
+ const next = Math.max(0, base + adjustment);
2451
+ const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
2476
2452
  selectedComponentRef.current = selected;
2477
2453
  lastSelectedComponentRef.current = selected;
2478
- selected.addClass?.("orion-builder-v2-has-negative-padding");
2479
- selected.addStyle?.({ [variable]: styleValue });
2454
+ selected.addStyle?.({ [property]: styleValue });
2480
2455
  editorRef.current?.select?.(selected);
2481
2456
  };
2482
2457
  const updateSelectedOrionBlock = (updates) => {
@@ -3557,7 +3532,7 @@ function GrapesPageEditor({
3557
3532
  const onStylePanelInput = (event) => {
3558
3533
  const target = event.target;
3559
3534
  if (target?.closest("#orion-builder-v2-styles")) {
3560
- if (target?.dataset?.orionRawValue?.startsWith("-")) {
3535
+ if (target?.dataset?.orionPaddingDraft?.startsWith("-")) {
3561
3536
  return;
3562
3537
  }
3563
3538
  const activeElement = document.activeElement;
@@ -3619,7 +3594,7 @@ function GrapesPageEditor({
3619
3594
  if (!detail.property || !detail.value) {
3620
3595
  return;
3621
3596
  }
3622
- applyNegativePaddingInput(detail.property, detail.value);
3597
+ applyNegativePaddingInput(detail.property, detail.value, detail.baseValue || "0");
3623
3598
  };
3624
3599
  const observer = new MutationObserver(() => {
3625
3600
  decorateBuilderControls();
package/dist/builder-v2/styles.css CHANGED
@@ -2385,14 +2385,6 @@
2385
2385
  letter-spacing: 0;
2386
2386
  }
2387
2387
 
2388
- .orion-builder-v2-has-negative-padding > .xo-builder-preview,
2389
- .orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
2390
- margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
2391
- margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
2392
- margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
2393
- margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
2394
- }
2395
-
2396
2388
  .xo-builder-preview *,
2397
2389
  .xo-builder-preview *::before,
2398
2390
  .xo-builder-preview *::after {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.6.0-beta.164",
3
+ "version": "0.6.0-beta.165",
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",