@orion-studios/payload-studio 0.6.0-beta.57 → 0.6.0-beta.58

package/dist/builder-v2/client.js

@@ -953,6 +953,24 @@ var registerProjectDynamicComponents = (editor, adapter) => {
 
 // src/builder-v2/editor/GrapesPageEditor.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var decodeHtmlAttribute3 = (value) => {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+};
+var parseItemsJson = (value) => {
+  const decoded = decodeHtmlAttribute3(value);
+  if (!decoded) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return Array.isArray(parsed) ? parsed.filter((item) => Boolean(item && typeof item === "object" && !Array.isArray(item))) : [];
+  } catch {
+    return [];
+  }
+};
 var postToParent = (payload) => {
   window.parent?.postMessage(
     {
@@ -1153,6 +1171,7 @@ function GrapesPageEditor({
   const editorRef = (0, import_react.useRef)(null);
   const autosaveTimerRef = (0, import_react.useRef)(null);
   const saveRef = (0, import_react.useRef)(async () => void 0);
+  const selectedComponentRef = (0, import_react.useRef)(null);
   const [error, setError] = (0, import_react.useState)("");
   const [historyState, setHistoryState] = (0, import_react.useState)({ canRedo: false, canUndo: false });
   const [lastSavedAt, setLastSavedAt] = (0, import_react.useState)("");
@@ -1164,6 +1183,37 @@ function GrapesPageEditor({
   const [validationIssues, setValidationIssues] = (0, import_react.useState)([]);
   const editorPageBasePath = initialData?.meta?.editorPageBasePath || "/admin/pages";
   const pageTree = initialData?.meta?.pageTree || [];
+  const summarizeSelectedComponent = (component) => {
+    if (!component) {
+      return null;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const componentType = String(attrs["data-orion-component"] || component.get?.("type") || "Section");
+    const rawName = String(component.get?.("name") || componentType || "Section");
+    const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
+    const items = parseItemsJson(attrs["data-orion-items-json"]).map((item, index) => ({
+      index,
+      title: typeof item.title === "string" && item.title.trim() ? item.title.trim() : `Item ${index + 1}`
+    }));
+    return {
+      items: items.length > 0 ? items : void 0,
+      label: label || "Section",
+      type: componentType
+    };
+  };
+  const updateSelectedItems = (updater) => {
+    const component = selectedComponentRef.current;
+    if (!component) {
+      return;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const currentItems = parseItemsJson(attrs["data-orion-items-json"]);
+    const nextItems = updater(currentItems);
+    component.addAttributes?.({
+      "data-orion-items-json": JSON.stringify(nextItems)
+    });
+    setSelectionSummary(summarizeSelectedComponent(component));
+  };
   const updateHistoryState = (editor) => {
     const next = {
       canRedo: editor.UndoManager.hasRedo(),
@@ -1289,14 +1339,8 @@ function GrapesPageEditor({
         });
         editor.on("component:selected", (component) => {
           const typed = component;
-          const attrs = typed?.getAttributes?.() || {};
-          const componentType = String(attrs["data-orion-component"] || typed?.get?.("type") || "Section");
-          const rawName = String(typed?.get?.("name") || componentType || "Section");
-          const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
-          setSelectionSummary({
-            label: label || "Section",
-            type: componentType
-          });
+          selectedComponentRef.current = typed;
+          setSelectionSummary(summarizeSelectedComponent(typed));
           setSaveMessage("Selection ready");
         });
         setSelectedDevice(editor.getDevice() || "desktop");
@@ -1540,6 +1584,62 @@ function GrapesPageEditor({
         /* @__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." }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-traits" })
       ] }),
+      selectionSummary?.items ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Items" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Add, duplicate, remove, then click item text or images on the canvas to edit them." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-items", children: selectionSummary.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-item-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: () => {
+                updateSelectedItems((items) => {
+                  const source = items[item.index];
+                  if (!source) {
+                    return items;
+                  }
+                  const copy = [...items];
+                  copy.splice(item.index + 1, 0, {
+                    ...source,
+                    title: typeof source.title === "string" ? `${source.title} copy` : source.title
+                  });
+                  return copy;
+                });
+              },
+              type: "button",
+              children: "Duplicate"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: () => {
+                updateSelectedItems((items) => items.filter((_, index) => index !== item.index));
+              },
+              type: "button",
+              children: "Remove"
+            }
+          )
+        ] }, `${item.index}-${item.title}`)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "orion-builder-v2-wide-action",
+            onClick: () => {
+              updateSelectedItems((items) => [
+                ...items,
+                {
+                  description: "Describe this feature.",
+                  imageURL: "",
+                  title: "New feature"
+                }
+              ]);
+            },
+            type: "button",
+            children: "Add item"
+          }
+        )
+      ] }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Design" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Adjust spacing, layout, typography, color, borders, and shadows for the selected section." }),

package/dist/builder-v2/client.mjs

@@ -829,6 +829,24 @@ var registerProjectDynamicComponents = (editor, adapter) => {
 
 // src/builder-v2/editor/GrapesPageEditor.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var decodeHtmlAttribute3 = (value) => {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+};
+var parseItemsJson = (value) => {
+  const decoded = decodeHtmlAttribute3(value);
+  if (!decoded) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return Array.isArray(parsed) ? parsed.filter((item) => Boolean(item && typeof item === "object" && !Array.isArray(item))) : [];
+  } catch {
+    return [];
+  }
+};
 var postToParent = (payload) => {
   window.parent?.postMessage(
     {
@@ -1029,6 +1047,7 @@ function GrapesPageEditor({
   const editorRef = useRef(null);
   const autosaveTimerRef = useRef(null);
   const saveRef = useRef(async () => void 0);
+  const selectedComponentRef = useRef(null);
   const [error, setError] = useState("");
   const [historyState, setHistoryState] = useState({ canRedo: false, canUndo: false });
   const [lastSavedAt, setLastSavedAt] = useState("");
@@ -1040,6 +1059,37 @@ function GrapesPageEditor({
   const [validationIssues, setValidationIssues] = useState([]);
   const editorPageBasePath = initialData?.meta?.editorPageBasePath || "/admin/pages";
   const pageTree = initialData?.meta?.pageTree || [];
+  const summarizeSelectedComponent = (component) => {
+    if (!component) {
+      return null;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const componentType = String(attrs["data-orion-component"] || component.get?.("type") || "Section");
+    const rawName = String(component.get?.("name") || componentType || "Section");
+    const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
+    const items = parseItemsJson(attrs["data-orion-items-json"]).map((item, index) => ({
+      index,
+      title: typeof item.title === "string" && item.title.trim() ? item.title.trim() : `Item ${index + 1}`
+    }));
+    return {
+      items: items.length > 0 ? items : void 0,
+      label: label || "Section",
+      type: componentType
+    };
+  };
+  const updateSelectedItems = (updater) => {
+    const component = selectedComponentRef.current;
+    if (!component) {
+      return;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const currentItems = parseItemsJson(attrs["data-orion-items-json"]);
+    const nextItems = updater(currentItems);
+    component.addAttributes?.({
+      "data-orion-items-json": JSON.stringify(nextItems)
+    });
+    setSelectionSummary(summarizeSelectedComponent(component));
+  };
   const updateHistoryState = (editor) => {
     const next = {
       canRedo: editor.UndoManager.hasRedo(),
@@ -1165,14 +1215,8 @@ function GrapesPageEditor({
         });
         editor.on("component:selected", (component) => {
           const typed = component;
-          const attrs = typed?.getAttributes?.() || {};
-          const componentType = String(attrs["data-orion-component"] || typed?.get?.("type") || "Section");
-          const rawName = String(typed?.get?.("name") || componentType || "Section");
-          const label = rawName.replace(/^orion-/, "").replace(/^xo/, "XO ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/-/g, " ").trim();
-          setSelectionSummary({
-            label: label || "Section",
-            type: componentType
-          });
+          selectedComponentRef.current = typed;
+          setSelectionSummary(summarizeSelectedComponent(typed));
           setSaveMessage("Selection ready");
         });
         setSelectedDevice(editor.getDevice() || "desktop");
@@ -1416,6 +1460,62 @@ function GrapesPageEditor({
         /* @__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." }),
         /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-traits" })
       ] }),
+      selectionSummary?.items ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Items" }),
+        /* @__PURE__ */ jsx("p", { children: "Add, duplicate, remove, then click item text or images on the canvas to edit them." }),
+        /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-items", children: selectionSummary.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-item-row", children: [
+          /* @__PURE__ */ jsx("span", { children: item.title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                updateSelectedItems((items) => {
+                  const source = items[item.index];
+                  if (!source) {
+                    return items;
+                  }
+                  const copy = [...items];
+                  copy.splice(item.index + 1, 0, {
+                    ...source,
+                    title: typeof source.title === "string" ? `${source.title} copy` : source.title
+                  });
+                  return copy;
+                });
+              },
+              type: "button",
+              children: "Duplicate"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                updateSelectedItems((items) => items.filter((_, index) => index !== item.index));
+              },
+              type: "button",
+              children: "Remove"
+            }
+          )
+        ] }, `${item.index}-${item.title}`)) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "orion-builder-v2-wide-action",
+            onClick: () => {
+              updateSelectedItems((items) => [
+                ...items,
+                {
+                  description: "Describe this feature.",
+                  imageURL: "",
+                  title: "New feature"
+                }
+              ]);
+            },
+            type: "button",
+            children: "Add item"
+          }
+        )
+      ] }) : null,
       /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
         /* @__PURE__ */ jsx("h2", { children: "Design" }),
         /* @__PURE__ */ jsx("p", { children: "Adjust spacing, layout, typography, color, borders, and shadows for the selected section." }),

package/dist/builder-v2/styles.css

@@ -252,6 +252,52 @@
   color: #9f1239;
 }
 
+.orion-builder-v2-items {
+  display: grid;
+  gap: 8px;
+}
+
+.orion-builder-v2-item-row {
+  align-items: center;
+  background: #fff8ef;
+  border: 1px solid rgba(231, 203, 185, 0.9);
+  border-radius: 10px;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  padding: 8px;
+}
+
+.orion-builder-v2-item-row span {
+  color: var(--builder-v2-ink);
+  font-size: 0.8rem;
+  font-weight: 900;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.orion-builder-v2-item-row button,
+.orion-builder-v2-wide-action {
+  background: #ffffff;
+  border: 1px solid #e7cbb9;
+  border-radius: 999px;
+  color: var(--builder-v2-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 900;
+  min-height: 30px;
+  padding: 6px 9px;
+}
+
+.orion-builder-v2-wide-action {
+  background: var(--builder-v2-ink);
+  color: #ffffff;
+  margin-top: 2px;
+  width: 100%;
+}
+
 .orion-builder-v2-runtime {
   width: 100%;
 }

package/package.json

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