@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.
@@ -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 value = element.innerText.trim();
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.jsx)("div", { className: "orion-builder-v2-canvas", ref: containerRef })
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 value = element.innerText.trim();
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__ */ jsx("div", { className: "orion-builder-v2-canvas", ref: containerRef })
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
- right: 16px;
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
@@ -1,9 +1,9 @@
1
- import {
2
- admin_app_exports
3
- } from "./chunk-RKTIFEUY.mjs";
4
1
  import {
5
2
  admin_exports
6
3
  } from "./chunk-JC3UV74N.mjs";
4
+ import {
5
+ admin_app_exports
6
+ } from "./chunk-RKTIFEUY.mjs";
7
7
  import "./chunk-W2UOCJDX.mjs";
8
8
  import {
9
9
  blocks_exports
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orion-studios/payload-studio",
3
- "version": "0.6.0-beta.55",
3
+ "version": "0.6.0-beta.57",
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",