@orion-studios/payload-studio 0.6.0-beta.44 → 0.6.0-beta.46

package/dist/builder-v2/index.mjs

@@ -30,6 +30,13 @@ var createBuilderV2PageFields = (options = {}) => {
       },
       hidden
     ),
+    withHiddenAdmin(
+      {
+        name: "builderAutosaveProjectData",
+        type: "json"
+      },
+      hidden
+    ),
     withHiddenAdmin(
       {
         name: "builderPublishedProjectData",
@@ -64,6 +71,62 @@ var createBuilderV2PageFields = (options = {}) => {
         type: "json"
       },
       hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderVersions",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderPublishedSnapshot",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderReusableSections",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderThemeTokens",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderLockedAreas",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderSeo",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderLastSavedAt",
+        type: "date"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderLastPublishedAt",
+        type: "date"
+      },
+      hidden
     )
   ];
 };
@@ -208,15 +271,119 @@ var sanitizeBuilderCss = (value) => {
   }
   return value.replace(/@import\s+[^;]+;/gi, "").replace(/expression\s*\(/gi, "").replace(/javascript\s*:/gi, "");
 };
+var scopeSelector = (selector, scope) => selector.split(",").map((part) => {
+  const trimmed = part.trim();
+  if (!trimmed || trimmed.startsWith(scope) || trimmed.startsWith("@")) {
+    return trimmed;
+  }
+  if (/^(html|body|:root)\b/i.test(trimmed)) {
+    return trimmed.replace(/^(html|body|:root)\b/i, scope);
+  }
+  return `${scope} ${trimmed}`;
+}).filter(Boolean).join(", ");
+var scopeBuilderCss = (value, scope = ".orion-builder-v2-runtime") => {
+  const css = sanitizeBuilderCss(value);
+  if (!css) {
+    return "";
+  }
+  let output = "";
+  let cursor = 0;
+  const rulePattern = /([^{}]+)\{/g;
+  let match;
+  while ((match = rulePattern.exec(css)) !== null) {
+    const selectorStart = match.index;
+    const selector = match[1];
+    output += css.slice(cursor, selectorStart);
+    const trimmedSelector = selector.trim();
+    if (trimmedSelector.startsWith("@keyframes") || trimmedSelector.startsWith("@font-face") || trimmedSelector.startsWith("@page")) {
+      output += `${selector}{`;
+    } else if (trimmedSelector.startsWith("@media") || trimmedSelector.startsWith("@supports")) {
+      output += `${selector}{`;
+    } else {
+      output += `${scopeSelector(selector, scope)} {`;
+    }
+    cursor = rulePattern.lastIndex;
+  }
+  output += css.slice(cursor);
+  return output;
+};
+
+// src/builder-v2/validation.ts
+var hasMatch = (value, pattern) => pattern.test(value);
+var validateBuilderV2Output = (input) => {
+  const html = typeof input.html === "string" ? input.html : "";
+  const css = typeof input.css === "string" ? input.css : "";
+  const issues = [];
+  if (!html.trim()) {
+    issues.push({
+      code: "empty-page",
+      message: "This page has no rendered content.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (!hasMatch(html, /<h1\b/i)) {
+    issues.push({
+      code: "missing-h1",
+      message: "Add one H1 so the published page has a clear primary heading.",
+      path: "compiledHtml",
+      severity: "warning"
+    });
+  }
+  if (hasMatch(html, /\son[a-z]+\s*=/i)) {
+    issues.push({
+      code: "inline-event-handler",
+      message: "Inline event handlers are not allowed in published builder HTML.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (hasMatch(html, /<(script|object|embed)\b/i)) {
+    issues.push({
+      code: "unsafe-element",
+      message: "Script, object, and embed tags are not allowed in builder content.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (hasMatch(html, /\b(?:href|src)=["']\s*javascript:/i)) {
+    issues.push({
+      code: "unsafe-url",
+      message: "Links and media cannot use javascript URLs.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (hasMatch(css, /@import\s/i)) {
+    issues.push({
+      code: "css-import",
+      message: "CSS imports are removed at publish time. Use the site font and theme managers instead.",
+      path: "compiledCss",
+      severity: "warning"
+    });
+  }
+  if (hasMatch(css, /position\s*:\s*fixed/i)) {
+    issues.push({
+      code: "fixed-position",
+      message: "Fixed positioning can cover site navigation or dialogs. Review this before publishing.",
+      path: "compiledCss",
+      severity: "warning"
+    });
+  }
+  return issues;
+};
+var hasBlockingBuilderV2Issues = (issues) => issues.some((issue) => issue.severity === "error");
 
 // src/builder-v2/payload/compile.ts
 var compileBuilderV2Output = (input) => {
   const html = sanitizeBuilderHtml(input.html);
-  const css = sanitizeBuilderCss(input.css);
+  const css = scopeBuilderCss(input.css);
+  const validationIssues = validateBuilderV2Output({ css: input.css, html: input.html });
   return {
     css,
     dynamicComponents: parseBuilderV2DynamicComponents(html),
-    html
+    html,
+    validationIssues
   };
 };
 
@@ -264,6 +431,25 @@ var normalizeBuilderV2ProjectData = (value, fallbackTitle = "Untitled Page") =>
 
 // src/builder-v2/payload/pageService.ts
 var pageTitle = (page) => typeof page.title === "string" && page.title.trim().length > 0 ? page.title : "Untitled Page";
+var normalizeVersions = (value) => Array.isArray(value) ? value.filter((item) => Boolean(item && typeof item === "object")) : [];
+var createVersionSnapshot = ({
+  compiled,
+  label,
+  projectData,
+  published = false
+}) => {
+  const createdAt = (/* @__PURE__ */ new Date()).toISOString();
+  return {
+    compiledCss: compiled.css,
+    compiledHtml: compiled.html,
+    createdAt,
+    id: `builder-v2-${createdAt.replace(/[^0-9]/g, "")}`,
+    label,
+    projectData,
+    published
+  };
+};
+var appendVersionSnapshot = (current, snapshot) => [snapshot, ...normalizeVersions(current)].slice(0, 50);
 var toBuilderV2EditorInitialData = (page) => ({
   projectData: normalizeBuilderV2ProjectData(
     page.builderProjectData || page.builderPublishedProjectData,
@@ -293,14 +479,33 @@ var createBuilderV2PageService = ({
   },
   saveDraft: async (pageID, input) => {
     const compiled = compileBuilderV2Output(input.compiled);
+    const existing = await payload.findByID({
+      collection: collectionSlug,
+      depth: 0,
+      draft: true,
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    const validationIssues = input.validationIssues || compiled.validationIssues || [];
     await payload.update({
       collection: collectionSlug,
       data: {
         _status: "draft",
+        builderAutosaveProjectData: null,
         builderDynamicComponents: compiled.dynamicComponents,
+        builderLastSavedAt: (/* @__PURE__ */ new Date()).toISOString(),
         builderMode: "grapes-v2",
         builderProjectData: input.projectData,
-        builderValidationIssues: input.validationIssues || [],
+        builderValidationIssues: validationIssues,
+        builderVersions: appendVersionSnapshot(
+          existing.builderVersions,
+          createVersionSnapshot({
+            compiled,
+            label: "Draft saved",
+            projectData: input.projectData
+          })
+        ),
         compiledCss: compiled.css,
         compiledHtml: compiled.html,
         ...input.title ? { title: input.title } : {}
@@ -317,15 +522,35 @@ var createBuilderV2PageService = ({
   },
   publish: async (pageID, input) => {
     const compiled = compileBuilderV2Output(input.compiled);
+    const existing = await payload.findByID({
+      collection: collectionSlug,
+      depth: 0,
+      draft: true,
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    const validationIssues = input.validationIssues || compiled.validationIssues || [];
+    const snapshot = createVersionSnapshot({
+      compiled,
+      label: "Published",
+      projectData: input.projectData,
+      published: true
+    });
     await payload.update({
       collection: collectionSlug,
       data: {
         _status: "published",
+        builderAutosaveProjectData: null,
         builderDynamicComponents: compiled.dynamicComponents,
+        builderLastPublishedAt: snapshot.createdAt,
+        builderLastSavedAt: snapshot.createdAt,
         builderMode: "grapes-v2",
         builderProjectData: input.projectData,
         builderPublishedProjectData: input.projectData,
-        builderValidationIssues: input.validationIssues || [],
+        builderPublishedSnapshot: snapshot,
+        builderValidationIssues: validationIssues,
+        builderVersions: appendVersionSnapshot(existing.builderVersions, snapshot),
         compiledCss: compiled.css,
         compiledHtml: compiled.html,
         ...input.title ? { title: input.title } : {}
@@ -342,6 +567,46 @@ var createBuilderV2PageService = ({
   }
 });
 
+// src/builder-v2/pageTree.ts
+var relationId = (value) => {
+  if (typeof value === "number" || typeof value === "string") {
+    return value;
+  }
+  if (value && typeof value === "object") {
+    const id = value.id;
+    return typeof id === "number" || typeof id === "string" ? id : null;
+  }
+  return null;
+};
+var buildBuilderV2PageTree = (pages) => {
+  const nodes = /* @__PURE__ */ new Map();
+  const roots = [];
+  pages.forEach((page) => {
+    nodes.set(page.id, {
+      children: [],
+      id: page.id,
+      parentId: page.parentId ?? relationId(page.parent),
+      path: page.path || (page.slug ? `/${page.slug}` : "/"),
+      slug: page.slug || "",
+      status: page._status,
+      title: page.title || "Untitled page"
+    });
+  });
+  nodes.forEach((node) => {
+    if (node.parentId && nodes.has(node.parentId)) {
+      nodes.get(node.parentId)?.children?.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+  const sortNodes = (items) => {
+    items.sort((a, b) => a.path.localeCompare(b.path));
+    items.forEach((item) => sortNodes(item.children || []));
+  };
+  sortNodes(roots);
+  return roots;
+};
+
 // src/builder-v2/runtime/BuilderPageRuntime.tsx
 import { createElement, Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -357,7 +622,7 @@ var resolveRuntimeComponent = (adapter, type) => {
 };
 function BuilderPageRuntime({ adapter, className, page }) {
   const html = sanitizeBuilderHtml(page.compiledHtml);
-  const css = sanitizeBuilderCss(page.compiledCss);
+  const css = scopeBuilderCss(page.compiledCss);
   const chunks = splitBuilderV2HtmlIntoChunks(html);
   return /* @__PURE__ */ jsxs("div", { className: ["orion-builder-v2-runtime", className].filter(Boolean).join(" "), children: [
     css ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } }) : null,
@@ -390,14 +655,18 @@ function BuilderPageRuntime({ adapter, className, page }) {
 export {
   BuilderPageRuntime,
   appendBuilderV2PageFields,
+  buildBuilderV2PageTree,
   compileBuilderV2Output,
   createBuilderV2PageFields,
   createBuilderV2PageService,
   createEmptyBuilderV2ProjectData,
+  hasBlockingBuilderV2Issues,
   normalizeBuilderV2ProjectData,
   parseBuilderV2DynamicComponents,
   sanitizeBuilderCss,
   sanitizeBuilderHtml,
+  scopeBuilderCss,
   splitBuilderV2HtmlIntoChunks,
-  toBuilderV2EditorInitialData
+  toBuilderV2EditorInitialData,
+  validateBuilderV2Output
 };

package/dist/builder-v2/styles.css

@@ -1,14 +1,86 @@
 @import 'grapesjs/dist/css/grapes.min.css';
 
 .orion-builder-v2-editor {
-  background: #f4f6f8;
+  background: #eef1f4;
   color: #172033;
   display: grid;
   grid-template-columns: minmax(260px, 310px) 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
   height: 100dvh;
   min-height: 640px;
 }
 
+.orion-builder-v2-topbar {
+  align-items: center;
+  background: #101827;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+  display: flex;
+  gap: 20px;
+  grid-column: 1 / -1;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 12px 16px;
+}
+
+.orion-builder-v2-topbar h1 {
+  font-size: 1.05rem;
+  line-height: 1.2;
+  margin: 2px 0 0;
+}
+
+.orion-builder-v2-eyebrow {
+  color: #9fb1c8;
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.orion-builder-v2-toolbar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.orion-builder-v2-tool {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 7px;
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 800;
+  padding: 8px 10px;
+  text-transform: capitalize;
+}
+
+.orion-builder-v2-tool[aria-pressed='true'],
+.orion-builder-v2-tool:hover {
+  background: #ffffff;
+  color: #101827;
+}
+
+.orion-builder-v2-tool:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.orion-builder-v2-tool.is-primary {
+  background: #e8eef7;
+  color: #101827;
+}
+
+.orion-builder-v2-tool.is-publish {
+  background: #c35f36;
+  border-color: #c35f36;
+  color: #ffffff;
+}
+
 .orion-builder-v2-sidebar {
   background: #ffffff;
   border-right: 1px solid rgba(23, 32, 51, 0.12);
@@ -23,6 +95,13 @@
   gap: 10px;
 }
 
+.orion-builder-v2-panel p {
+  color: #526074;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  margin: 0;
+}
+
 .orion-builder-v2-panel h2 {
   font-size: 0.8rem;
   letter-spacing: 0;
@@ -40,7 +119,8 @@
 }
 
 .orion-builder-v2-status,
-.orion-builder-v2-error {
+.orion-builder-v2-error,
+.orion-builder-v2-save-status {
   border-radius: 8px;
   font-weight: 800;
   left: 16px;
@@ -61,6 +141,55 @@
   color: #9f1239;
 }
 
+.orion-builder-v2-save-status {
+  background: #ffffff;
+  border: 1px solid rgba(23, 32, 51, 0.12);
+  box-shadow: 0 14px 40px rgba(23, 32, 51, 0.12);
+  display: grid;
+  gap: 2px;
+  left: auto;
+  right: 16px;
+}
+
+.orion-builder-v2-save-status span {
+  color: #526074;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.orion-builder-v2-validation-list {
+  display: grid;
+  gap: 8px;
+}
+
+.orion-builder-v2-validation {
+  border-radius: 8px;
+  display: grid;
+  gap: 4px;
+  padding: 9px;
+}
+
+.orion-builder-v2-validation strong {
+  font-size: 0.78rem;
+  line-height: 1.3;
+}
+
+.orion-builder-v2-validation span {
+  font-size: 0.68rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.orion-builder-v2-validation.is-warning {
+  background: #fff7ed;
+  color: #9a3412;
+}
+
+.orion-builder-v2-validation.is-error {
+  background: #fff1f2;
+  color: #9f1239;
+}
+
 .orion-builder-v2-runtime {
   width: 100%;
 }
@@ -78,6 +207,10 @@
   padding: 64px 24px;
 }
 
+.orion-builder-v2-section.is-muted {
+  background: #f4f6f8;
+}
+
 .orion-builder-v2-hero {
   background: #172033;
   color: #ffffff;
@@ -88,6 +221,10 @@
   max-width: 1120px;
 }
 
+.orion-builder-v2-container.is-narrow {
+  max-width: 760px;
+}
+
 .orion-builder-v2-grid {
   display: grid;
   gap: 20px;
@@ -105,6 +242,11 @@
   padding: 20px;
 }
 
+.orion-builder-v2-card.is-featured {
+  border-color: #c35f36;
+  box-shadow: 0 20px 50px rgba(195, 95, 54, 0.16);
+}
+
 .orion-builder-v2-button {
   background: #172033;
   border-radius: 8px;
@@ -132,6 +274,52 @@
   max-width: 100%;
 }
 
+.orion-builder-v2-nav,
+.orion-builder-v2-footer {
+  align-items: center;
+  display: flex;
+  gap: 20px;
+  justify-content: space-between;
+  padding: 20px 24px;
+}
+
+.orion-builder-v2-nav nav,
+.orion-builder-v2-footer nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+
+.orion-builder-v2-logo {
+  color: inherit;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+.orion-builder-v2-footer {
+  background: #101827;
+  color: #ffffff;
+}
+
+.orion-builder-v2-gallery {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.orion-builder-v2-gallery img {
+  aspect-ratio: 1;
+  border-radius: 8px;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.orion-builder-v2-price {
+  font-size: 2rem;
+  font-weight: 900;
+}
+
 .orion-builder-v2-dynamic-placeholder {
   align-items: center;
   background: repeating-linear-gradient(
@@ -152,7 +340,12 @@
 @media (max-width: 800px) {
   .orion-builder-v2-editor {
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto 1fr;
+  }
+
+  .orion-builder-v2-topbar {
+    align-items: flex-start;
+    flex-direction: column;
   }
 
   .orion-builder-v2-sidebar {
@@ -162,4 +355,14 @@
   .orion-builder-v2-grid.is-3 {
     grid-template-columns: 1fr;
   }
+
+  .orion-builder-v2-gallery {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .orion-builder-v2-nav,
+  .orion-builder-v2-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }