@orion-studios/payload-studio 0.6.0-beta.16 → 0.6.0-beta.161

package/dist/builder-v2/index.mjs

@@ -0,0 +1,755 @@
+import "../chunk-6BWS3CLP.mjs";
+
+// src/builder-v2/payload/builderFields.ts
+var withHiddenAdmin = (field, hidden) => ({
+  ...field,
+  admin: {
+    ...field.admin || {},
+    hidden
+  }
+});
+var createBuilderV2PageFields = (options = {}) => {
+  const hidden = options.hidden ?? true;
+  return [
+    withHiddenAdmin(
+      {
+        name: "builderMode",
+        type: "select",
+        defaultValue: "studio-v1",
+        options: [
+          { label: "Classic Studio Builder", value: "studio-v1" },
+          { label: "Website Builder V2", value: "grapes-v2" }
+        ]
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderProjectData",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderAutosaveProjectData",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderPublishedProjectData",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "compiledHtml",
+        type: "textarea"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "compiledCss",
+        type: "textarea"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderDynamicComponents",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderValidationIssues",
+        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
+    )
+  ];
+};
+var appendBuilderV2PageFields = (fields, options) => [
+  ...fields,
+  ...createBuilderV2PageFields(options)
+];
+
+// src/builder-v2/runtime/placeholders.ts
+var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>/gis;
+var attrPattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)=(?:"([^"]*)"|'([^']*)')/g;
+var decodeHtmlAttribute = (value) => value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+var parseAttributes = (value) => {
+  const props = {};
+  let match;
+  while ((match = attrPattern.exec(value)) !== null) {
+    const name = match[1];
+    const rawValue = match[2] ?? match[3] ?? "";
+    if (!name.startsWith("data-")) {
+      continue;
+    }
+    if (name === "data-orion-component" || name === "data-orion-id") {
+      continue;
+    }
+    if (name === "data-orion-props") {
+      const decoded = decodeHtmlAttribute(rawValue);
+      try {
+        const parsed = JSON.parse(decoded);
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+          Object.assign(props, parsed);
+        }
+      } catch {
+        props.propsJson = decoded;
+      }
+      continue;
+    }
+    const propName = name.replace(/^data-orion-/, "").replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    props[propName] = decodeHtmlAttribute(rawValue);
+  }
+  return props;
+};
+var extractAttribute = (attrs, name) => {
+  attrPattern.lastIndex = 0;
+  let match;
+  while ((match = attrPattern.exec(attrs)) !== null) {
+    if (match[1] === name) {
+      return decodeHtmlAttribute(match[2] ?? match[3] ?? "");
+    }
+  }
+  return null;
+};
+var extractWrapperAttributes = (attrs) => {
+  const id = extractAttribute(attrs, "id") || void 0;
+  const className = extractAttribute(attrs, "class") || void 0;
+  const style = extractAttribute(attrs, "style") || void 0;
+  return id || className || style ? { className, id, style } : void 0;
+};
+var findPlaceholderEnd = (html, tag, startIndex) => {
+  const tagPattern = new RegExp(`<\\/?${tag}\\b[^>]*>`, "gi");
+  tagPattern.lastIndex = startIndex;
+  let depth = 1;
+  let match;
+  while ((match = tagPattern.exec(html)) !== null) {
+    const token = match[0];
+    const isClosing = token.startsWith("</");
+    const isSelfClosing = /\/\s*>$/.test(token);
+    if (isClosing) {
+      depth -= 1;
+    } else if (!isSelfClosing) {
+      depth += 1;
+    }
+    if (depth === 0) {
+      return tagPattern.lastIndex;
+    }
+  }
+  return startIndex;
+};
+var parseBuilderV2DynamicComponents = (html) => {
+  const instances = [];
+  let match;
+  while ((match = placeholderPattern.exec(html)) !== null) {
+    const attrs = `${match.groups?.attrs ?? ""} ${match.groups?.rest ?? ""}`;
+    const component = match.groups?.component ?? "";
+    if (!component) {
+      continue;
+    }
+    instances.push({
+      component,
+      id: extractAttribute(attrs, "data-orion-id") || `component-${instances.length + 1}`,
+      props: parseAttributes(attrs),
+      wrapperAttributes: extractWrapperAttributes(attrs)
+    });
+  }
+  return instances;
+};
+var splitBuilderV2HtmlIntoChunks = (html) => {
+  const chunks = [];
+  let lastIndex = 0;
+  let componentIndex = 0;
+  let match;
+  while ((match = placeholderPattern.exec(html)) !== null) {
+    const before = html.slice(lastIndex, match.index);
+    if (before.length > 0) {
+      chunks.push({ html: before, kind: "html" });
+    }
+    const attrs = `${match.groups?.attrs ?? ""} ${match.groups?.rest ?? ""}`;
+    const component = match.groups?.component ?? "";
+    const tag = match.groups?.tag ?? "";
+    const placeholderEnd = tag ? findPlaceholderEnd(html, tag, placeholderPattern.lastIndex) : placeholderPattern.lastIndex;
+    chunks.push({
+      instance: {
+        component,
+        id: extractAttribute(attrs, "data-orion-id") || `component-${componentIndex + 1}`,
+        props: parseAttributes(attrs),
+        wrapperAttributes: extractWrapperAttributes(attrs)
+      },
+      kind: "component"
+    });
+    componentIndex += 1;
+    lastIndex = placeholderEnd;
+    placeholderPattern.lastIndex = placeholderEnd;
+  }
+  const after = html.slice(lastIndex);
+  if (after.length > 0) {
+    chunks.push({ html: after, kind: "html" });
+  }
+  return chunks;
+};
+
+// src/builder-v2/sanitize.ts
+import sanitizeHtml from "sanitize-html";
+var allowedTags = sanitizeHtml.defaults.allowedTags.concat([
+  "article",
+  "aside",
+  "button",
+  "figure",
+  "figcaption",
+  "footer",
+  "header",
+  "main",
+  "nav",
+  "section",
+  "source",
+  "video"
+]);
+var allowedAttributes = {
+  ...sanitizeHtml.defaults.allowedAttributes,
+  "*": [
+    "aria-*",
+    "class",
+    "data-*",
+    "id",
+    "role",
+    "style",
+    "title"
+  ],
+  a: ["aria-*", "class", "data-*", "href", "id", "name", "rel", "style", "target", "title"],
+  button: ["aria-*", "class", "data-*", "disabled", "id", "style", "title", "type"],
+  iframe: ["allow", "allowfullscreen", "class", "data-*", "height", "loading", "src", "style", "title", "width"],
+  img: ["alt", "class", "data-*", "height", "id", "loading", "sizes", "src", "srcset", "style", "title", "width"],
+  source: ["media", "src", "srcset", "type"],
+  video: ["autoplay", "class", "controls", "height", "loop", "muted", "playsinline", "poster", "preload", "src", "style", "width"]
+};
+var allowedIframeHosts = [
+  "calendar.google.com",
+  "calendly.com",
+  "player.vimeo.com",
+  "www.google.com",
+  "www.youtube.com",
+  "youtube.com"
+];
+var sanitizeBuilderHtml = (value) => {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    return "";
+  }
+  return sanitizeHtml(value, {
+    allowedAttributes,
+    allowedIframeHostnames: allowedIframeHosts,
+    allowedSchemes: ["http", "https", "mailto", "tel"],
+    allowedSchemesByTag: {
+      img: ["http", "https", "data"]
+    },
+    allowedTags,
+    allowProtocolRelative: false,
+    parseStyleAttributes: false
+  });
+};
+var sanitizeBuilderCss = (value) => {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    return "";
+  }
+  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 = scopeBuilderCss(input.css);
+  const validationIssues = validateBuilderV2Output({ css: input.css, html: input.html });
+  return {
+    css,
+    dynamicComponents: parseBuilderV2DynamicComponents(html),
+    html,
+    validationIssues
+  };
+};
+
+// src/builder-v2/projectData.ts
+var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var createEmptyBuilderV2ProjectData = (title = "Untitled Page") => ({
+  assets: [],
+  pages: [
+    {
+      component: {
+        components: [
+          {
+            attributes: {
+              class: "orion-builder-v2-section"
+            },
+            components: [
+              {
+                content: title,
+                tagName: "h1",
+                type: "text"
+              },
+              {
+                content: "Start building this page by dragging blocks from the panel.",
+                tagName: "p",
+                type: "text"
+              }
+            ],
+            tagName: "section"
+          }
+        ],
+        type: "wrapper"
+      },
+      id: "page",
+      name: title
+    }
+  ],
+  styles: []
+});
+var normalizeBuilderV2ProjectData = (value, fallbackTitle = "Untitled Page") => {
+  if (!isRecord(value)) {
+    return createEmptyBuilderV2ProjectData(fallbackTitle);
+  }
+  return value;
+};
+
+// 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,
+    pageTitle(page)
+  ),
+  title: pageTitle(page)
+});
+var createBuilderV2PageService = ({
+  collectionSlug = "pages",
+  payload,
+  user
+}) => ({
+  getPageForBuilder: async (pageID) => {
+    const page = await payload.findByID({
+      collection: collectionSlug,
+      depth: 2,
+      draft: true,
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    return {
+      id: String(page.id),
+      initialData: toBuilderV2EditorInitialData(page),
+      page
+    };
+  },
+  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: validationIssues,
+        builderVersions: appendVersionSnapshot(
+          existing.builderVersions,
+          createVersionSnapshot({
+            compiled,
+            label: "Draft saved",
+            projectData: input.projectData
+          })
+        ),
+        compiledCss: compiled.css,
+        compiledHtml: compiled.html,
+        ...input.title ? { title: input.title } : {}
+      },
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    return {
+      compiled,
+      id: pageID,
+      status: "draft"
+    };
+  },
+  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,
+        builderPublishedSnapshot: snapshot,
+        builderValidationIssues: validationIssues,
+        builderVersions: appendVersionSnapshot(existing.builderVersions, snapshot),
+        compiledCss: compiled.css,
+        compiledHtml: compiled.html,
+        ...input.title ? { title: input.title } : {}
+      },
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    return {
+      compiled,
+      id: pageID,
+      status: "published"
+    };
+  }
+});
+
+// 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";
+var resolveRuntimeComponent = (adapter, type) => {
+  const definition = adapter?.components?.[type];
+  if (!definition) {
+    return null;
+  }
+  if (typeof definition === "function") {
+    return definition;
+  }
+  return definition.render;
+};
+var styleStringToReactStyle = (value) => {
+  if (!value) {
+    return void 0;
+  }
+  const style = value.split(";").map((declaration) => declaration.trim()).filter(Boolean).reduce((result, declaration) => {
+    const separatorIndex = declaration.indexOf(":");
+    if (separatorIndex <= 0) {
+      return result;
+    }
+    const property = declaration.slice(0, separatorIndex).trim();
+    const propertyValue = declaration.slice(separatorIndex + 1).trim();
+    if (!property || !propertyValue) {
+      return result;
+    }
+    const reactProperty = property.startsWith("--") ? property : property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    result[reactProperty] = propertyValue;
+    return result;
+  }, {});
+  return Object.keys(style).length > 0 ? style : void 0;
+};
+function BuilderPageRuntime({ adapter, className, page }) {
+  const html = sanitizeBuilderHtml(page.compiledHtml);
+  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,
+    chunks.map((chunk, index) => {
+      if (chunk.kind === "html") {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "orion-builder-v2-html-chunk",
+            dangerouslySetInnerHTML: { __html: chunk.html }
+          },
+          `html-${index}`
+        );
+      }
+      const Component = resolveRuntimeComponent(adapter, chunk.instance.component);
+      if (!Component) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "orion-builder-v2-missing-component",
+            "data-orion-missing-component": chunk.instance.component
+          },
+          `component-${chunk.instance.id}-${index}`
+        );
+      }
+      const renderedComponent = /* @__PURE__ */ jsx(Component, { instance: chunk.instance, page });
+      const wrapperAttributes = chunk.instance.wrapperAttributes;
+      if (wrapperAttributes?.id || wrapperAttributes?.className || wrapperAttributes?.style) {
+        return createElement(
+          "div",
+          {
+            className: wrapperAttributes.className,
+            id: wrapperAttributes.id,
+            key: `component-${chunk.instance.id}-${index}`,
+            style: styleStringToReactStyle(wrapperAttributes.style)
+          },
+          renderedComponent
+        );
+      }
+      return createElement(Fragment, { key: `component-${chunk.instance.id}-${index}` }, renderedComponent);
+    })
+  ] });
+}
+export {
+  BuilderPageRuntime,
+  appendBuilderV2PageFields,
+  buildBuilderV2PageTree,
+  compileBuilderV2Output,
+  createBuilderV2PageFields,
+  createBuilderV2PageService,
+  createEmptyBuilderV2ProjectData,
+  hasBlockingBuilderV2Issues,
+  normalizeBuilderV2ProjectData,
+  parseBuilderV2DynamicComponents,
+  sanitizeBuilderCss,
+  sanitizeBuilderHtml,
+  scopeBuilderCss,
+  splitBuilderV2HtmlIntoChunks,
+  toBuilderV2EditorInitialData,
+  validateBuilderV2Output
+};