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

package/dist/builder-v2/index.mjs

@@ -0,0 +1,403 @@
+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: "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
+    )
+  ];
+};
+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>[^>]*)>(?<content>.*?)<\/\k<tag>>/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;
+    }
+    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) => {
+  const pattern = new RegExp(`${name}=["']([^"']+)["']`, "i");
+  const match = attrs.match(pattern);
+  return match ? decodeHtmlAttribute(match[1]) : null;
+};
+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)
+    });
+  }
+  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 ?? "";
+    chunks.push({
+      instance: {
+        component,
+        id: extractAttribute(attrs, "data-orion-id") || `component-${componentIndex + 1}`,
+        props: parseAttributes(attrs)
+      },
+      kind: "component"
+    });
+    componentIndex += 1;
+    lastIndex = match.index + match[0].length;
+  }
+  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.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, "");
+};
+
+// src/builder-v2/payload/compile.ts
+var compileBuilderV2Output = (input) => {
+  const html = sanitizeBuilderHtml(input.html);
+  const css = sanitizeBuilderCss(input.css);
+  return {
+    css,
+    dynamicComponents: parseBuilderV2DynamicComponents(html),
+    html
+  };
+};
+
+// 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 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);
+    await payload.update({
+      collection: collectionSlug,
+      data: {
+        _status: "draft",
+        builderDynamicComponents: compiled.dynamicComponents,
+        builderMode: "grapes-v2",
+        builderProjectData: input.projectData,
+        builderValidationIssues: input.validationIssues || [],
+        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);
+    await payload.update({
+      collection: collectionSlug,
+      data: {
+        _status: "published",
+        builderDynamicComponents: compiled.dynamicComponents,
+        builderMode: "grapes-v2",
+        builderProjectData: input.projectData,
+        builderPublishedProjectData: input.projectData,
+        builderValidationIssues: input.validationIssues || [],
+        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/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;
+};
+function BuilderPageRuntime({ adapter, className, page }) {
+  const html = sanitizeBuilderHtml(page.compiledHtml);
+  const css = sanitizeBuilderCss(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}`
+        );
+      }
+      return createElement(Fragment, { key: `component-${chunk.instance.id}-${index}` }, /* @__PURE__ */ jsx(Component, { instance: chunk.instance, page }));
+    })
+  ] });
+}
+export {
+  BuilderPageRuntime,
+  appendBuilderV2PageFields,
+  compileBuilderV2Output,
+  createBuilderV2PageFields,
+  createBuilderV2PageService,
+  createEmptyBuilderV2ProjectData,
+  normalizeBuilderV2ProjectData,
+  parseBuilderV2DynamicComponents,
+  sanitizeBuilderCss,
+  sanitizeBuilderHtml,
+  splitBuilderV2HtmlIntoChunks,
+  toBuilderV2EditorInitialData
+};

package/dist/builder-v2/styles.css

@@ -0,0 +1,165 @@
+@import 'grapesjs/dist/css/grapes.min.css';
+
+.orion-builder-v2-editor {
+  background: #f4f6f8;
+  color: #172033;
+  display: grid;
+  grid-template-columns: minmax(260px, 310px) 1fr;
+  height: 100dvh;
+  min-height: 640px;
+}
+
+.orion-builder-v2-sidebar {
+  background: #ffffff;
+  border-right: 1px solid rgba(23, 32, 51, 0.12);
+  display: grid;
+  gap: 12px;
+  overflow: auto;
+  padding: 12px;
+}
+
+.orion-builder-v2-panel {
+  display: grid;
+  gap: 10px;
+}
+
+.orion-builder-v2-panel h2 {
+  font-size: 0.8rem;
+  letter-spacing: 0;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.orion-builder-v2-main {
+  min-width: 0;
+  position: relative;
+}
+
+.orion-builder-v2-canvas {
+  height: 100%;
+}
+
+.orion-builder-v2-status,
+.orion-builder-v2-error {
+  border-radius: 8px;
+  font-weight: 800;
+  left: 16px;
+  padding: 10px 12px;
+  position: absolute;
+  top: 16px;
+  z-index: 10;
+}
+
+.orion-builder-v2-status {
+  background: #ffffff;
+  border: 1px solid rgba(23, 32, 51, 0.12);
+}
+
+.orion-builder-v2-error {
+  background: #fff1f2;
+  border: 1px solid #fecdd3;
+  color: #9f1239;
+}
+
+.orion-builder-v2-runtime {
+  width: 100%;
+}
+
+.orion-builder-v2-html-chunk {
+  display: contents;
+}
+
+.orion-builder-v2-missing-component {
+  display: none;
+}
+
+.orion-builder-v2-section,
+.orion-builder-v2-hero {
+  padding: 64px 24px;
+}
+
+.orion-builder-v2-hero {
+  background: #172033;
+  color: #ffffff;
+}
+
+.orion-builder-v2-container {
+  margin: 0 auto;
+  max-width: 1120px;
+}
+
+.orion-builder-v2-grid {
+  display: grid;
+  gap: 20px;
+}
+
+.orion-builder-v2-grid.is-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.orion-builder-v2-card {
+  background: #ffffff;
+  border: 1px solid rgba(23, 32, 51, 0.12);
+  border-radius: 8px;
+  color: #172033;
+  padding: 20px;
+}
+
+.orion-builder-v2-button {
+  background: #172033;
+  border-radius: 8px;
+  color: #ffffff;
+  display: inline-flex;
+  font-weight: 800;
+  padding: 10px 16px;
+  text-decoration: none;
+}
+
+.orion-builder-v2-hero .orion-builder-v2-button {
+  background: #ffffff;
+  color: #172033;
+}
+
+.orion-builder-v2-kicker {
+  font-size: 0.85rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.orion-builder-v2-image {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+.orion-builder-v2-dynamic-placeholder {
+  align-items: center;
+  background: repeating-linear-gradient(
+    45deg,
+    rgba(23, 32, 51, 0.06),
+    rgba(23, 32, 51, 0.06) 8px,
+    rgba(23, 32, 51, 0.11) 8px,
+    rgba(23, 32, 51, 0.11) 16px
+  );
+  border: 1px dashed rgba(23, 32, 51, 0.35);
+  border-radius: 8px;
+  display: flex;
+  gap: 8px;
+  min-height: 96px;
+  padding: 20px;
+}
+
+@media (max-width: 800px) {
+  .orion-builder-v2-editor {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .orion-builder-v2-sidebar {
+    max-height: 260px;
+  }
+
+  .orion-builder-v2-grid.is-3 {
+    grid-template-columns: 1fr;
+  }
+}