@orion-studios/payload-studio 0.6.0-beta.55 → 0.6.0-beta.57
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.
- package/dist/builder-v2/client.js +148 -8
- package/dist/builder-v2/client.mjs +148 -8
- package/dist/builder-v2/styles.css +87 -6
- package/dist/index.mjs +3 -3
- package/package.json +1 -1
|
@@ -679,6 +679,76 @@ var updateJsonListAttribute = ({
|
|
|
679
679
|
[listAttr]: JSON.stringify(list)
|
|
680
680
|
});
|
|
681
681
|
};
|
|
682
|
+
var addJsonListItem = ({
|
|
683
|
+
listAttr,
|
|
684
|
+
model,
|
|
685
|
+
template
|
|
686
|
+
}) => {
|
|
687
|
+
const attrs = model.getAttributes?.() || {};
|
|
688
|
+
const list = parseJsonArray(attrs[listAttr]);
|
|
689
|
+
list.push(template);
|
|
690
|
+
model.addAttributes?.({
|
|
691
|
+
[listAttr]: JSON.stringify(list)
|
|
692
|
+
});
|
|
693
|
+
};
|
|
694
|
+
var duplicateJsonListItem = ({
|
|
695
|
+
index,
|
|
696
|
+
listAttr,
|
|
697
|
+
model
|
|
698
|
+
}) => {
|
|
699
|
+
const attrs = model.getAttributes?.() || {};
|
|
700
|
+
const list = parseJsonArray(attrs[listAttr]);
|
|
701
|
+
const item = list[index];
|
|
702
|
+
if (!item) {
|
|
703
|
+
return;
|
|
704
|
+
}
|
|
705
|
+
list.splice(index + 1, 0, {
|
|
706
|
+
...item,
|
|
707
|
+
title: typeof item.title === "string" ? `${item.title} copy` : item.title
|
|
708
|
+
});
|
|
709
|
+
model.addAttributes?.({
|
|
710
|
+
[listAttr]: JSON.stringify(list)
|
|
711
|
+
});
|
|
712
|
+
};
|
|
713
|
+
var removeJsonListItem = ({
|
|
714
|
+
index,
|
|
715
|
+
listAttr,
|
|
716
|
+
model
|
|
717
|
+
}) => {
|
|
718
|
+
const attrs = model.getAttributes?.() || {};
|
|
719
|
+
const list = parseJsonArray(attrs[listAttr]);
|
|
720
|
+
if (!list[index]) {
|
|
721
|
+
return;
|
|
722
|
+
}
|
|
723
|
+
list.splice(index, 1);
|
|
724
|
+
model.addAttributes?.({
|
|
725
|
+
[listAttr]: JSON.stringify(list)
|
|
726
|
+
});
|
|
727
|
+
};
|
|
728
|
+
var parseTemplateAttribute = (value) => {
|
|
729
|
+
const decoded = decodeHtmlAttribute2(value);
|
|
730
|
+
if (!decoded) {
|
|
731
|
+
return {
|
|
732
|
+
description: "Describe this item.",
|
|
733
|
+
imageURL: "",
|
|
734
|
+
title: "New item"
|
|
735
|
+
};
|
|
736
|
+
}
|
|
737
|
+
try {
|
|
738
|
+
const parsed = JSON.parse(decoded);
|
|
739
|
+
return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {
|
|
740
|
+
description: "Describe this item.",
|
|
741
|
+
imageURL: "",
|
|
742
|
+
title: "New item"
|
|
743
|
+
};
|
|
744
|
+
} catch {
|
|
745
|
+
return {
|
|
746
|
+
description: "Describe this item.",
|
|
747
|
+
imageURL: "",
|
|
748
|
+
title: "New item"
|
|
749
|
+
};
|
|
750
|
+
}
|
|
751
|
+
};
|
|
682
752
|
var chooseAsset = (editor, currentSrc, callback) => {
|
|
683
753
|
const assetManager = editor?.AssetManager;
|
|
684
754
|
if (!assetManager?.open) {
|
|
@@ -710,12 +780,63 @@ var bindEditablePreview = (view, editor) => {
|
|
|
710
780
|
if (!root) {
|
|
711
781
|
return;
|
|
712
782
|
}
|
|
783
|
+
root.querySelectorAll("[data-orion-action]").forEach((element) => {
|
|
784
|
+
const action = element.dataset.orionAction || "";
|
|
785
|
+
const listName = element.dataset.orionEditList || "";
|
|
786
|
+
const listIndex = Number(element.dataset.orionEditIndex);
|
|
787
|
+
const listAttr = listName ? propToAttrName(listName) : "";
|
|
788
|
+
element.setAttribute("title", element.getAttribute("aria-label") || element.textContent?.trim() || "Section action");
|
|
789
|
+
const runAction = (event) => {
|
|
790
|
+
event.preventDefault();
|
|
791
|
+
event.stopPropagation();
|
|
792
|
+
if (typeof event.stopImmediatePropagation === "function") {
|
|
793
|
+
event.stopImmediatePropagation();
|
|
794
|
+
}
|
|
795
|
+
editor.select?.(view.model);
|
|
796
|
+
if (!listAttr) {
|
|
797
|
+
return;
|
|
798
|
+
}
|
|
799
|
+
if (action === "add-list-item") {
|
|
800
|
+
addJsonListItem({
|
|
801
|
+
listAttr,
|
|
802
|
+
model: view.model,
|
|
803
|
+
template: parseTemplateAttribute(element.dataset.orionItemTemplate)
|
|
804
|
+
});
|
|
805
|
+
return;
|
|
806
|
+
}
|
|
807
|
+
if (!Number.isInteger(listIndex)) {
|
|
808
|
+
return;
|
|
809
|
+
}
|
|
810
|
+
if (action === "duplicate-list-item") {
|
|
811
|
+
duplicateJsonListItem({
|
|
812
|
+
index: listIndex,
|
|
813
|
+
listAttr,
|
|
814
|
+
model: view.model
|
|
815
|
+
});
|
|
816
|
+
return;
|
|
817
|
+
}
|
|
818
|
+
if (action === "remove-list-item") {
|
|
819
|
+
removeJsonListItem({
|
|
820
|
+
index: listIndex,
|
|
821
|
+
listAttr,
|
|
822
|
+
model: view.model
|
|
823
|
+
});
|
|
824
|
+
}
|
|
825
|
+
};
|
|
826
|
+
element.addEventListener("pointerdown", runAction, true);
|
|
827
|
+
element.addEventListener("keydown", (event) => {
|
|
828
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
829
|
+
runAction(event);
|
|
830
|
+
}
|
|
831
|
+
});
|
|
832
|
+
});
|
|
713
833
|
root.querySelectorAll("[data-orion-edit-field]").forEach((element) => {
|
|
714
834
|
const field = element.dataset.orionEditField || "";
|
|
715
835
|
const listName = element.dataset.orionEditList || "";
|
|
716
836
|
const listIndex = Number(element.dataset.orionEditIndex);
|
|
717
837
|
const attrName = listName ? propToAttrName(listName) : propToAttrName(field);
|
|
718
838
|
const isImage = element.dataset.orionEditKind === "image" || element instanceof HTMLImageElement;
|
|
839
|
+
const placeholder = element.dataset.orionPlaceholder || "";
|
|
719
840
|
element.setAttribute("title", isImage ? "Click to replace image" : "Click and type to edit");
|
|
720
841
|
element.style.cursor = "text";
|
|
721
842
|
element.addEventListener("click", (event) => {
|
|
@@ -748,7 +869,8 @@ var bindEditablePreview = (view, editor) => {
|
|
|
748
869
|
element.setAttribute("contenteditable", "true");
|
|
749
870
|
element.setAttribute("spellcheck", "true");
|
|
750
871
|
const commit = () => {
|
|
751
|
-
const
|
|
872
|
+
const typedValue = element.innerText.trim();
|
|
873
|
+
const value = placeholder && typedValue === placeholder ? "" : typedValue;
|
|
752
874
|
if (listName && Number.isInteger(listIndex)) {
|
|
753
875
|
updateJsonListAttribute({
|
|
754
876
|
field,
|
|
@@ -1038,6 +1160,7 @@ function GrapesPageEditor({
|
|
|
1038
1160
|
const [selectedDevice, setSelectedDevice] = (0, import_react.useState)("desktop");
|
|
1039
1161
|
const [saving, setSaving] = (0, import_react.useState)(null);
|
|
1040
1162
|
const [saveMessage, setSaveMessage] = (0, import_react.useState)("");
|
|
1163
|
+
const [selectionSummary, setSelectionSummary] = (0, import_react.useState)(null);
|
|
1041
1164
|
const [validationIssues, setValidationIssues] = (0, import_react.useState)([]);
|
|
1042
1165
|
const editorPageBasePath = initialData?.meta?.editorPageBasePath || "/admin/pages";
|
|
1043
1166
|
const pageTree = initialData?.meta?.pageTree || [];
|
|
@@ -1116,6 +1239,7 @@ function GrapesPageEditor({
|
|
|
1116
1239
|
},
|
|
1117
1240
|
storageManager: false,
|
|
1118
1241
|
styleManager: {
|
|
1242
|
+
appendTo: "#orion-builder-v2-styles",
|
|
1119
1243
|
sectors: [
|
|
1120
1244
|
{
|
|
1121
1245
|
name: "Layout",
|
|
@@ -1163,7 +1287,16 @@ function GrapesPageEditor({
|
|
|
1163
1287
|
}
|
|
1164
1288
|
}, autosaveIntervalMs);
|
|
1165
1289
|
});
|
|
1166
|
-
editor.on("component:selected", () => {
|
|
1290
|
+
editor.on("component:selected", (component) => {
|
|
1291
|
+
const typed = component;
|
|
1292
|
+
const attrs = typed?.getAttributes?.() || {};
|
|
1293
|
+
const componentType = String(attrs["data-orion-component"] || typed?.get?.("type") || "Section");
|
|
1294
|
+
const rawName = String(typed?.get?.("name") || componentType || "Section");
|
|
1295
|
+
const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
|
|
1296
|
+
setSelectionSummary({
|
|
1297
|
+
label: label || "Section",
|
|
1298
|
+
type: componentType
|
|
1299
|
+
});
|
|
1167
1300
|
setSaveMessage("Selection ready");
|
|
1168
1301
|
});
|
|
1169
1302
|
setSelectedDevice(editor.getDevice() || "desktop");
|
|
@@ -1381,11 +1514,6 @@ function GrapesPageEditor({
|
|
|
1381
1514
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Drag sections into the page. Dynamic blocks render through the project adapter." }),
|
|
1382
1515
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-blocks" })
|
|
1383
1516
|
] }),
|
|
1384
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
|
|
1385
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Inspector" }),
|
|
1386
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Selection settings, dynamic bindings, links, and labels." }),
|
|
1387
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-traits" })
|
|
1388
|
-
] }),
|
|
1389
1517
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
|
|
1390
1518
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Validation" }),
|
|
1391
1519
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-validation-list", children: validationIssues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No issues found." }) : validationIssues.map((issue) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `orion-builder-v2-validation is-${issue.severity}`, children: [
|
|
@@ -1397,6 +1525,9 @@ function GrapesPageEditor({
|
|
|
1397
1525
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "orion-builder-v2-main", children: [
|
|
1398
1526
|
loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
|
|
1399
1527
|
error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-error", children: error }) : null,
|
|
1528
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-canvas", ref: containerRef })
|
|
1529
|
+
] }),
|
|
1530
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "orion-builder-v2-inspector", "aria-label": "Selected section settings", children: [
|
|
1400
1531
|
saveMessage || lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-save-status", children: [
|
|
1401
1532
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: saveMessage || "Ready" }),
|
|
1402
1533
|
lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
|
|
@@ -1404,7 +1535,16 @@ function GrapesPageEditor({
|
|
|
1404
1535
|
lastSavedAt
|
|
1405
1536
|
] }) : null
|
|
1406
1537
|
] }) : null,
|
|
1407
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
|
|
1539
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: selectionSummary ? selectionSummary.label : "No section selected" }),
|
|
1540
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: selectionSummary ? "Edit this section content, images, links, layout, and spacing." : "Select a section or element on the canvas to edit its settings." }),
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-traits" })
|
|
1542
|
+
] }),
|
|
1543
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
|
|
1544
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Design" }),
|
|
1545
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Adjust spacing, layout, typography, color, borders, and shadows for the selected section." }),
|
|
1546
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-styles" })
|
|
1547
|
+
] })
|
|
1408
1548
|
] })
|
|
1409
1549
|
] });
|
|
1410
1550
|
}
|
|
@@ -555,6 +555,76 @@ var updateJsonListAttribute = ({
|
|
|
555
555
|
[listAttr]: JSON.stringify(list)
|
|
556
556
|
});
|
|
557
557
|
};
|
|
558
|
+
var addJsonListItem = ({
|
|
559
|
+
listAttr,
|
|
560
|
+
model,
|
|
561
|
+
template
|
|
562
|
+
}) => {
|
|
563
|
+
const attrs = model.getAttributes?.() || {};
|
|
564
|
+
const list = parseJsonArray(attrs[listAttr]);
|
|
565
|
+
list.push(template);
|
|
566
|
+
model.addAttributes?.({
|
|
567
|
+
[listAttr]: JSON.stringify(list)
|
|
568
|
+
});
|
|
569
|
+
};
|
|
570
|
+
var duplicateJsonListItem = ({
|
|
571
|
+
index,
|
|
572
|
+
listAttr,
|
|
573
|
+
model
|
|
574
|
+
}) => {
|
|
575
|
+
const attrs = model.getAttributes?.() || {};
|
|
576
|
+
const list = parseJsonArray(attrs[listAttr]);
|
|
577
|
+
const item = list[index];
|
|
578
|
+
if (!item) {
|
|
579
|
+
return;
|
|
580
|
+
}
|
|
581
|
+
list.splice(index + 1, 0, {
|
|
582
|
+
...item,
|
|
583
|
+
title: typeof item.title === "string" ? `${item.title} copy` : item.title
|
|
584
|
+
});
|
|
585
|
+
model.addAttributes?.({
|
|
586
|
+
[listAttr]: JSON.stringify(list)
|
|
587
|
+
});
|
|
588
|
+
};
|
|
589
|
+
var removeJsonListItem = ({
|
|
590
|
+
index,
|
|
591
|
+
listAttr,
|
|
592
|
+
model
|
|
593
|
+
}) => {
|
|
594
|
+
const attrs = model.getAttributes?.() || {};
|
|
595
|
+
const list = parseJsonArray(attrs[listAttr]);
|
|
596
|
+
if (!list[index]) {
|
|
597
|
+
return;
|
|
598
|
+
}
|
|
599
|
+
list.splice(index, 1);
|
|
600
|
+
model.addAttributes?.({
|
|
601
|
+
[listAttr]: JSON.stringify(list)
|
|
602
|
+
});
|
|
603
|
+
};
|
|
604
|
+
var parseTemplateAttribute = (value) => {
|
|
605
|
+
const decoded = decodeHtmlAttribute2(value);
|
|
606
|
+
if (!decoded) {
|
|
607
|
+
return {
|
|
608
|
+
description: "Describe this item.",
|
|
609
|
+
imageURL: "",
|
|
610
|
+
title: "New item"
|
|
611
|
+
};
|
|
612
|
+
}
|
|
613
|
+
try {
|
|
614
|
+
const parsed = JSON.parse(decoded);
|
|
615
|
+
return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {
|
|
616
|
+
description: "Describe this item.",
|
|
617
|
+
imageURL: "",
|
|
618
|
+
title: "New item"
|
|
619
|
+
};
|
|
620
|
+
} catch {
|
|
621
|
+
return {
|
|
622
|
+
description: "Describe this item.",
|
|
623
|
+
imageURL: "",
|
|
624
|
+
title: "New item"
|
|
625
|
+
};
|
|
626
|
+
}
|
|
627
|
+
};
|
|
558
628
|
var chooseAsset = (editor, currentSrc, callback) => {
|
|
559
629
|
const assetManager = editor?.AssetManager;
|
|
560
630
|
if (!assetManager?.open) {
|
|
@@ -586,12 +656,63 @@ var bindEditablePreview = (view, editor) => {
|
|
|
586
656
|
if (!root) {
|
|
587
657
|
return;
|
|
588
658
|
}
|
|
659
|
+
root.querySelectorAll("[data-orion-action]").forEach((element) => {
|
|
660
|
+
const action = element.dataset.orionAction || "";
|
|
661
|
+
const listName = element.dataset.orionEditList || "";
|
|
662
|
+
const listIndex = Number(element.dataset.orionEditIndex);
|
|
663
|
+
const listAttr = listName ? propToAttrName(listName) : "";
|
|
664
|
+
element.setAttribute("title", element.getAttribute("aria-label") || element.textContent?.trim() || "Section action");
|
|
665
|
+
const runAction = (event) => {
|
|
666
|
+
event.preventDefault();
|
|
667
|
+
event.stopPropagation();
|
|
668
|
+
if (typeof event.stopImmediatePropagation === "function") {
|
|
669
|
+
event.stopImmediatePropagation();
|
|
670
|
+
}
|
|
671
|
+
editor.select?.(view.model);
|
|
672
|
+
if (!listAttr) {
|
|
673
|
+
return;
|
|
674
|
+
}
|
|
675
|
+
if (action === "add-list-item") {
|
|
676
|
+
addJsonListItem({
|
|
677
|
+
listAttr,
|
|
678
|
+
model: view.model,
|
|
679
|
+
template: parseTemplateAttribute(element.dataset.orionItemTemplate)
|
|
680
|
+
});
|
|
681
|
+
return;
|
|
682
|
+
}
|
|
683
|
+
if (!Number.isInteger(listIndex)) {
|
|
684
|
+
return;
|
|
685
|
+
}
|
|
686
|
+
if (action === "duplicate-list-item") {
|
|
687
|
+
duplicateJsonListItem({
|
|
688
|
+
index: listIndex,
|
|
689
|
+
listAttr,
|
|
690
|
+
model: view.model
|
|
691
|
+
});
|
|
692
|
+
return;
|
|
693
|
+
}
|
|
694
|
+
if (action === "remove-list-item") {
|
|
695
|
+
removeJsonListItem({
|
|
696
|
+
index: listIndex,
|
|
697
|
+
listAttr,
|
|
698
|
+
model: view.model
|
|
699
|
+
});
|
|
700
|
+
}
|
|
701
|
+
};
|
|
702
|
+
element.addEventListener("pointerdown", runAction, true);
|
|
703
|
+
element.addEventListener("keydown", (event) => {
|
|
704
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
705
|
+
runAction(event);
|
|
706
|
+
}
|
|
707
|
+
});
|
|
708
|
+
});
|
|
589
709
|
root.querySelectorAll("[data-orion-edit-field]").forEach((element) => {
|
|
590
710
|
const field = element.dataset.orionEditField || "";
|
|
591
711
|
const listName = element.dataset.orionEditList || "";
|
|
592
712
|
const listIndex = Number(element.dataset.orionEditIndex);
|
|
593
713
|
const attrName = listName ? propToAttrName(listName) : propToAttrName(field);
|
|
594
714
|
const isImage = element.dataset.orionEditKind === "image" || element instanceof HTMLImageElement;
|
|
715
|
+
const placeholder = element.dataset.orionPlaceholder || "";
|
|
595
716
|
element.setAttribute("title", isImage ? "Click to replace image" : "Click and type to edit");
|
|
596
717
|
element.style.cursor = "text";
|
|
597
718
|
element.addEventListener("click", (event) => {
|
|
@@ -624,7 +745,8 @@ var bindEditablePreview = (view, editor) => {
|
|
|
624
745
|
element.setAttribute("contenteditable", "true");
|
|
625
746
|
element.setAttribute("spellcheck", "true");
|
|
626
747
|
const commit = () => {
|
|
627
|
-
const
|
|
748
|
+
const typedValue = element.innerText.trim();
|
|
749
|
+
const value = placeholder && typedValue === placeholder ? "" : typedValue;
|
|
628
750
|
if (listName && Number.isInteger(listIndex)) {
|
|
629
751
|
updateJsonListAttribute({
|
|
630
752
|
field,
|
|
@@ -914,6 +1036,7 @@ function GrapesPageEditor({
|
|
|
914
1036
|
const [selectedDevice, setSelectedDevice] = useState("desktop");
|
|
915
1037
|
const [saving, setSaving] = useState(null);
|
|
916
1038
|
const [saveMessage, setSaveMessage] = useState("");
|
|
1039
|
+
const [selectionSummary, setSelectionSummary] = useState(null);
|
|
917
1040
|
const [validationIssues, setValidationIssues] = useState([]);
|
|
918
1041
|
const editorPageBasePath = initialData?.meta?.editorPageBasePath || "/admin/pages";
|
|
919
1042
|
const pageTree = initialData?.meta?.pageTree || [];
|
|
@@ -992,6 +1115,7 @@ function GrapesPageEditor({
|
|
|
992
1115
|
},
|
|
993
1116
|
storageManager: false,
|
|
994
1117
|
styleManager: {
|
|
1118
|
+
appendTo: "#orion-builder-v2-styles",
|
|
995
1119
|
sectors: [
|
|
996
1120
|
{
|
|
997
1121
|
name: "Layout",
|
|
@@ -1039,7 +1163,16 @@ function GrapesPageEditor({
|
|
|
1039
1163
|
}
|
|
1040
1164
|
}, autosaveIntervalMs);
|
|
1041
1165
|
});
|
|
1042
|
-
editor.on("component:selected", () => {
|
|
1166
|
+
editor.on("component:selected", (component) => {
|
|
1167
|
+
const typed = component;
|
|
1168
|
+
const attrs = typed?.getAttributes?.() || {};
|
|
1169
|
+
const componentType = String(attrs["data-orion-component"] || typed?.get?.("type") || "Section");
|
|
1170
|
+
const rawName = String(typed?.get?.("name") || componentType || "Section");
|
|
1171
|
+
const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
|
|
1172
|
+
setSelectionSummary({
|
|
1173
|
+
label: label || "Section",
|
|
1174
|
+
type: componentType
|
|
1175
|
+
});
|
|
1043
1176
|
setSaveMessage("Selection ready");
|
|
1044
1177
|
});
|
|
1045
1178
|
setSelectedDevice(editor.getDevice() || "desktop");
|
|
@@ -1257,11 +1390,6 @@ function GrapesPageEditor({
|
|
|
1257
1390
|
/* @__PURE__ */ jsx("p", { children: "Drag sections into the page. Dynamic blocks render through the project adapter." }),
|
|
1258
1391
|
/* @__PURE__ */ jsx("div", { id: "orion-builder-v2-blocks" })
|
|
1259
1392
|
] }),
|
|
1260
|
-
/* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
|
|
1261
|
-
/* @__PURE__ */ jsx("h2", { children: "Inspector" }),
|
|
1262
|
-
/* @__PURE__ */ jsx("p", { children: "Selection settings, dynamic bindings, links, and labels." }),
|
|
1263
|
-
/* @__PURE__ */ jsx("div", { id: "orion-builder-v2-traits" })
|
|
1264
|
-
] }),
|
|
1265
1393
|
/* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
|
|
1266
1394
|
/* @__PURE__ */ jsx("h2", { children: "Validation" }),
|
|
1267
1395
|
/* @__PURE__ */ jsx("div", { className: "orion-builder-v2-validation-list", children: validationIssues.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No issues found." }) : validationIssues.map((issue) => /* @__PURE__ */ jsxs("div", { className: `orion-builder-v2-validation is-${issue.severity}`, children: [
|
|
@@ -1273,6 +1401,9 @@ function GrapesPageEditor({
|
|
|
1273
1401
|
/* @__PURE__ */ jsxs("main", { className: "orion-builder-v2-main", children: [
|
|
1274
1402
|
loading ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
|
|
1275
1403
|
error ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-error", children: error }) : null,
|
|
1404
|
+
/* @__PURE__ */ jsx("div", { className: "orion-builder-v2-canvas", ref: containerRef })
|
|
1405
|
+
] }),
|
|
1406
|
+
/* @__PURE__ */ jsxs("aside", { className: "orion-builder-v2-inspector", "aria-label": "Selected section settings", children: [
|
|
1276
1407
|
saveMessage || lastSavedAt ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-save-status", children: [
|
|
1277
1408
|
/* @__PURE__ */ jsx("strong", { children: saveMessage || "Ready" }),
|
|
1278
1409
|
lastSavedAt ? /* @__PURE__ */ jsxs("span", { children: [
|
|
@@ -1280,7 +1411,16 @@ function GrapesPageEditor({
|
|
|
1280
1411
|
lastSavedAt
|
|
1281
1412
|
] }) : null
|
|
1282
1413
|
] }) : null,
|
|
1283
|
-
/* @__PURE__ */
|
|
1414
|
+
/* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
|
|
1415
|
+
/* @__PURE__ */ jsx("h2", { children: selectionSummary ? selectionSummary.label : "No section selected" }),
|
|
1416
|
+
/* @__PURE__ */ jsx("p", { children: selectionSummary ? "Edit this section content, images, links, layout, and spacing." : "Select a section or element on the canvas to edit its settings." }),
|
|
1417
|
+
/* @__PURE__ */ jsx("div", { id: "orion-builder-v2-traits" })
|
|
1418
|
+
] }),
|
|
1419
|
+
/* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
|
|
1420
|
+
/* @__PURE__ */ jsx("h2", { children: "Design" }),
|
|
1421
|
+
/* @__PURE__ */ jsx("p", { children: "Adjust spacing, layout, typography, color, borders, and shadows for the selected section." }),
|
|
1422
|
+
/* @__PURE__ */ jsx("div", { id: "orion-builder-v2-styles" })
|
|
1423
|
+
] })
|
|
1284
1424
|
] })
|
|
1285
1425
|
] });
|
|
1286
1426
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
color: var(--builder-v2-ink);
|
|
13
13
|
display: grid;
|
|
14
14
|
font-family: var(--font-xo-sans, var(--font-body, ui-sans-serif, system-ui, sans-serif));
|
|
15
|
-
grid-template-columns: minmax(292px, 336px) 1fr;
|
|
15
|
+
grid-template-columns: minmax(292px, 336px) minmax(0, 1fr) minmax(300px, 360px);
|
|
16
16
|
grid-template-rows: auto minmax(0, 1fr);
|
|
17
17
|
height: 100dvh;
|
|
18
18
|
min-height: 640px;
|
|
@@ -94,9 +94,9 @@
|
|
|
94
94
|
color: #ffffff;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.orion-builder-v2-sidebar
|
|
97
|
+
.orion-builder-v2-sidebar,
|
|
98
|
+
.orion-builder-v2-inspector {
|
|
98
99
|
background: #fbf7f1;
|
|
99
|
-
border-right: 1px solid var(--builder-v2-border);
|
|
100
100
|
display: grid;
|
|
101
101
|
gap: 14px;
|
|
102
102
|
grid-auto-rows: max-content;
|
|
@@ -104,6 +104,14 @@
|
|
|
104
104
|
padding: 14px;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
+
.orion-builder-v2-sidebar {
|
|
108
|
+
border-right: 1px solid var(--builder-v2-border);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.orion-builder-v2-inspector {
|
|
112
|
+
border-left: 1px solid var(--builder-v2-border);
|
|
113
|
+
}
|
|
114
|
+
|
|
107
115
|
.orion-builder-v2-panel {
|
|
108
116
|
background: var(--builder-v2-panel);
|
|
109
117
|
border: 1px solid var(--builder-v2-border);
|
|
@@ -201,7 +209,8 @@
|
|
|
201
209
|
display: grid;
|
|
202
210
|
gap: 2px;
|
|
203
211
|
left: auto;
|
|
204
|
-
|
|
212
|
+
position: static;
|
|
213
|
+
right: auto;
|
|
205
214
|
}
|
|
206
215
|
|
|
207
216
|
.orion-builder-v2-save-status span {
|
|
@@ -330,6 +339,77 @@
|
|
|
330
339
|
font-weight: 800;
|
|
331
340
|
}
|
|
332
341
|
|
|
342
|
+
.orion-builder-v2-editor .gjs-traits-label {
|
|
343
|
+
display: none;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.orion-builder-v2-editor .gjs-trt-traits {
|
|
347
|
+
display: grid;
|
|
348
|
+
gap: 10px;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.orion-builder-v2-editor .gjs-trt-trait {
|
|
352
|
+
display: grid;
|
|
353
|
+
gap: 6px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.orion-builder-v2-editor .gjs-sm-sectors {
|
|
357
|
+
display: grid;
|
|
358
|
+
gap: 10px;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.orion-builder-v2-editor .gjs-sm-sector {
|
|
362
|
+
border: 1px solid var(--builder-v2-border);
|
|
363
|
+
border-radius: 12px;
|
|
364
|
+
overflow: hidden;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.orion-builder-v2-editor .gjs-sm-properties {
|
|
368
|
+
display: grid;
|
|
369
|
+
gap: 8px;
|
|
370
|
+
padding: 10px;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.orion-builder-v2-editor .gjs-sm-property {
|
|
374
|
+
float: none;
|
|
375
|
+
margin: 0;
|
|
376
|
+
width: 100%;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.orion-builder-v2-editor .gjs-field input,
|
|
380
|
+
.orion-builder-v2-editor .gjs-field select,
|
|
381
|
+
.orion-builder-v2-editor .gjs-field textarea {
|
|
382
|
+
min-height: 36px;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.orion-builder-v2-editor .gjs-field textarea {
|
|
386
|
+
min-height: 96px;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.orion-builder-v2-editor [data-orion-placeholder] {
|
|
390
|
+
outline: 1px dashed rgba(199, 100, 61, 0.45);
|
|
391
|
+
outline-offset: 4px;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.orion-builder-v2-editor [data-orion-action] {
|
|
395
|
+
background: #fffaf4;
|
|
396
|
+
border: 1px solid #e7cbb9;
|
|
397
|
+
border-radius: 999px;
|
|
398
|
+
color: var(--builder-v2-ink);
|
|
399
|
+
cursor: pointer;
|
|
400
|
+
font: inherit;
|
|
401
|
+
font-size: 0.76rem;
|
|
402
|
+
font-weight: 900;
|
|
403
|
+
min-height: 32px;
|
|
404
|
+
padding: 6px 10px;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.orion-builder-v2-editor [data-orion-action]:hover {
|
|
408
|
+
background: var(--builder-v2-ink);
|
|
409
|
+
border-color: var(--builder-v2-ink);
|
|
410
|
+
color: #ffffff;
|
|
411
|
+
}
|
|
412
|
+
|
|
333
413
|
.orion-builder-v2-html-chunk {
|
|
334
414
|
display: contents;
|
|
335
415
|
}
|
|
@@ -939,7 +1019,7 @@
|
|
|
939
1019
|
@media (max-width: 800px) {
|
|
940
1020
|
.orion-builder-v2-editor {
|
|
941
1021
|
grid-template-columns: 1fr;
|
|
942
|
-
grid-template-rows: auto auto 1fr;
|
|
1022
|
+
grid-template-rows: auto auto 1fr auto;
|
|
943
1023
|
}
|
|
944
1024
|
|
|
945
1025
|
.orion-builder-v2-topbar {
|
|
@@ -947,7 +1027,8 @@
|
|
|
947
1027
|
flex-direction: column;
|
|
948
1028
|
}
|
|
949
1029
|
|
|
950
|
-
.orion-builder-v2-sidebar
|
|
1030
|
+
.orion-builder-v2-sidebar,
|
|
1031
|
+
.orion-builder-v2-inspector {
|
|
951
1032
|
max-height: 260px;
|
|
952
1033
|
}
|
|
953
1034
|
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED