@orion-studios/payload-studio 0.6.0-beta.7 → 0.6.0-beta.71

package/dist/builder-v2/client.js

@@ -0,0 +1,1673 @@
+'use client';
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/builder-v2/client.ts
+var client_exports = {};
+__export(client_exports, {
+  GrapesPageEditor: () => GrapesPageEditor
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/builder-v2/editor/GrapesPageEditor.tsx
+var import_react = require("react");
+
+// src/shared/clientImageUploadOptimization.ts
+var MAX_DIRECT_UPLOAD_BYTES = 4e6;
+var extensionForMimeType = (mimeType) => {
+  switch (mimeType) {
+    case "image/webp":
+      return ".webp";
+    case "image/png":
+      return ".png";
+    default:
+      return ".jpg";
+  }
+};
+var detectCanvasTransparency = (context, width, height) => {
+  try {
+    const { data } = context.getImageData(0, 0, width, height);
+    for (let index = 3; index < data.length; index += 4) {
+      if (data[index] < 255) {
+        return true;
+      }
+    }
+  } catch {
+  }
+  return false;
+};
+var resolveOutputMimeTypes = (sourceMime, hasTransparency) => {
+  const candidates = [];
+  if (hasTransparency) {
+    candidates.push("image/webp", "image/png");
+  } else if (sourceMime === "image/webp") {
+    candidates.push("image/webp", "image/jpeg");
+  } else if (sourceMime === "image/png") {
+    candidates.push("image/webp", "image/jpeg", "image/png");
+  } else {
+    candidates.push("image/jpeg", "image/webp");
+  }
+  return [...new Set(candidates)];
+};
+async function optimizeImageForUpload(file) {
+  if (!file.type.startsWith("image/")) {
+    return file;
+  }
+  const objectURL = URL.createObjectURL(file);
+  try {
+    const image = await new Promise((resolve, reject) => {
+      const nextImage = new Image();
+      nextImage.onload = () => resolve(nextImage);
+      nextImage.onerror = () => reject(new Error("Could not read image for upload optimization."));
+      nextImage.src = objectURL;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, image.width);
+    canvas.height = Math.max(1, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return file;
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const sourceMime = file.type.toLowerCase();
+    const hasTransparency = detectCanvasTransparency(context, canvas.width, canvas.height);
+    const outputMimes = resolveOutputMimeTypes(sourceMime, hasTransparency);
+    const qualityPasses = [0.82, 0.74, 0.66, 0.58, 0.5, 0.42, 0.36, 0.3, 0.26];
+    let bestFile = null;
+    for (const outputMime of outputMimes) {
+      const passes = outputMime === "image/png" ? [void 0] : qualityPasses;
+      for (const quality of passes) {
+        const blob = await new Promise((resolve) => {
+          canvas.toBlob((value) => resolve(value), outputMime, quality);
+        });
+        if (!blob) {
+          continue;
+        }
+        const optimizedName = file.name.replace(/\.[^/.]+$/, extensionForMimeType(outputMime));
+        const optimized = new File([blob], optimizedName, {
+          lastModified: Date.now(),
+          type: outputMime
+        });
+        if (!bestFile || optimized.size < bestFile.size) {
+          bestFile = optimized;
+        }
+        if (optimized.size <= MAX_DIRECT_UPLOAD_BYTES) {
+          break;
+        }
+      }
+    }
+    if (!bestFile) {
+      return file;
+    }
+    return bestFile.size < file.size ? bestFile : file;
+  } finally {
+    URL.revokeObjectURL(objectURL);
+  }
+}
+
+// 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/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;
+    }
+    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;
+  return id || className ? { className, id } : void 0;
+};
+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;
+};
+
+// src/builder-v2/sanitize.ts
+var import_sanitize_html = __toESM(require("sanitize-html"));
+var allowedTags = import_sanitize_html.default.defaults.allowedTags.concat([
+  "article",
+  "aside",
+  "button",
+  "figure",
+  "figcaption",
+  "footer",
+  "header",
+  "main",
+  "nav",
+  "section",
+  "source",
+  "video"
+]);
+var allowedAttributes = {
+  ...import_sanitize_html.default.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 (0, import_sanitize_html.default)(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/editor/defaultBlocks.ts
+var registerOrionBuilderV2Blocks = (editor) => {
+  const blocks = editor.Blocks;
+  blocks.add("orion-nav", {
+    category: "Chrome",
+    content: `
+      <header class="orion-builder-v2-nav">
+        <a class="orion-builder-v2-logo" href="/">Brand</a>
+        <nav aria-label="Primary">
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+          <a href="/contact">Contact</a>
+        </nav>
+        <a class="orion-builder-v2-button" href="/contact">Start</a>
+      </header>
+    `,
+    label: "Nav"
+  });
+  blocks.add("orion-section", {
+    category: "Layout",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <h2>Section Heading</h2>
+          <p>Add supporting content here.</p>
+        </div>
+      </section>
+    `,
+    label: "Section"
+  });
+  blocks.add("orion-hero", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-hero">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Optional kicker</p>
+          <h1>Build a stronger website</h1>
+          <p>Use this area for a clear value proposition and call to action.</p>
+          <a class="orion-builder-v2-button" href="/contact">Get started</a>
+        </div>
+      </section>
+    `,
+    label: "Hero"
+  });
+  blocks.add("orion-columns", {
+    category: "Layout",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container orion-builder-v2-grid is-3">
+          <article class="orion-builder-v2-card"><h3>Column One</h3><p>Add content.</p></article>
+          <article class="orion-builder-v2-card"><h3>Column Two</h3><p>Add content.</p></article>
+          <article class="orion-builder-v2-card"><h3>Column Three</h3><p>Add content.</p></article>
+        </div>
+      </section>
+    `,
+    label: "Columns"
+  });
+  blocks.add("orion-card-grid", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Featured</p>
+          <h2>Cards that explain the offer</h2>
+          <div class="orion-builder-v2-grid is-3">
+            <article class="orion-builder-v2-card"><h3>Service One</h3><p>Describe the outcome clients care about.</p><a href="/contact">Learn more</a></article>
+            <article class="orion-builder-v2-card"><h3>Service Two</h3><p>Keep the card concise and scannable.</p><a href="/contact">Learn more</a></article>
+            <article class="orion-builder-v2-card"><h3>Service Three</h3><p>Use the same structure for visual rhythm.</p><a href="/contact">Learn more</a></article>
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Card grid"
+  });
+  blocks.add("orion-gallery", {
+    category: "Media",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <h2>Gallery</h2>
+          <div class="orion-builder-v2-gallery">
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Gallery"
+  });
+  blocks.add("orion-testimonials", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-section is-muted">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Testimonials</p>
+          <h2>What clients say</h2>
+          <div class="orion-builder-v2-grid is-3">
+            <blockquote class="orion-builder-v2-card"><p>"A clear, warm experience from start to finish."</p><cite>Client Name</cite></blockquote>
+            <blockquote class="orion-builder-v2-card"><p>"Exactly what we needed, without friction."</p><cite>Client Name</cite></blockquote>
+            <blockquote class="orion-builder-v2-card"><p>"The site made every next step obvious."</p><cite>Client Name</cite></blockquote>
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Testimonials"
+  });
+  blocks.add("orion-faq", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container is-narrow">
+          <p class="orion-builder-v2-kicker">FAQ</p>
+          <h2>Questions answered</h2>
+          <details open><summary>What should visitors know first?</summary><p>Give a short, useful answer that removes hesitation.</p></details>
+          <details><summary>How does the process work?</summary><p>Explain the next step clearly.</p></details>
+          <details><summary>How do we get started?</summary><p>Point people to the strongest call to action.</p></details>
+        </div>
+      </section>
+    `,
+    label: "FAQ"
+  });
+  blocks.add("orion-pricing", {
+    category: "Commerce",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Pricing</p>
+          <h2>Simple package options</h2>
+          <div class="orion-builder-v2-grid is-3">
+            <article class="orion-builder-v2-card"><h3>Starter</h3><p class="orion-builder-v2-price">$500</p><p>Best for focused launches.</p><a class="orion-builder-v2-button" href="/contact">Choose Starter</a></article>
+            <article class="orion-builder-v2-card is-featured"><h3>Growth</h3><p class="orion-builder-v2-price">$1,500</p><p>Best for expanding teams.</p><a class="orion-builder-v2-button" href="/contact">Choose Growth</a></article>
+            <article class="orion-builder-v2-card"><h3>Custom</h3><p class="orion-builder-v2-price">Quote</p><p>Best for complex builds.</p><a class="orion-builder-v2-button" href="/contact">Talk with us</a></article>
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Pricing"
+  });
+  blocks.add("orion-button", {
+    category: "Basic",
+    content: '<a class="orion-builder-v2-button" href="/contact">Button</a>',
+    label: "Button"
+  });
+  blocks.add("orion-image", {
+    category: "Basic",
+    content: '<img alt="Image" class="orion-builder-v2-image" src="https://placehold.co/1200x700" />',
+    label: "Image"
+  });
+  blocks.add("orion-form-embed", {
+    category: "Dynamic",
+    content: `
+      <div
+        class="orion-builder-v2-dynamic-placeholder"
+        data-orion-component="formEmbed"
+        data-orion-form-slug="contact"
+      >
+        <strong>Form Embed</strong>
+        <span>contact</span>
+      </div>
+    `,
+    label: "Form"
+  });
+  blocks.add("orion-footer", {
+    category: "Chrome",
+    content: `
+      <footer class="orion-builder-v2-footer">
+        <div>
+          <strong>Brand</strong>
+          <p>Short positioning line for the site footer.</p>
+        </div>
+        <nav aria-label="Footer">
+          <a href="/privacy">Privacy</a>
+          <a href="/contact">Contact</a>
+        </nav>
+      </footer>
+    `,
+    label: "Footer"
+  });
+};
+
+// src/builder-v2/editor/projectComponents.ts
+var normalizeDefinition = (type, value) => {
+  if (!value || typeof value === "function") {
+    return null;
+  }
+  return {
+    ...value,
+    type: value.type || type
+  };
+};
+var decodeHtmlAttribute2 = (value) => {
+  if (typeof value !== "string") {
+    return "";
+  }
+  let decoded = value;
+  for (let index = 0; index < 3; index += 1) {
+    const next = decoded.replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+    if (next === decoded) {
+      break;
+    }
+    decoded = next;
+  }
+  return decoded;
+};
+var attrToPropName = (name) => name.replace(/^data-orion-/, "").replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+var propToAttrName = (name) => `data-orion-${name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}`;
+var propsFromAttributes = (attributes = {}) => {
+  const props = {};
+  Object.keys(attributes).forEach((name) => {
+    if (!name.startsWith("data-") || name === "data-orion-component" || name === "data-orion-id") {
+      return;
+    }
+    const value = decodeHtmlAttribute2(attributes[name]);
+    if (name === "data-orion-props") {
+      try {
+        const parsed = JSON.parse(value);
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+          Object.assign(props, parsed);
+        }
+      } catch {
+        props.propsJson = value;
+      }
+      return;
+    }
+    props[attrToPropName(name)] = value;
+  });
+  return props;
+};
+var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
+var lockPreviewChildren = (component) => {
+  const children = typeof component.components === "function" ? component.components() : null;
+  const childList = children && typeof children === "object" && "forEach" in children ? children : null;
+  childList?.forEach((child) => {
+    if (typeof child.set === "function") {
+      child.set({
+        copyable: false,
+        draggable: false,
+        droppable: false,
+        editable: false,
+        highlightable: false,
+        hoverable: false,
+        removable: false,
+        selectable: false
+      });
+    }
+    lockPreviewChildren(child);
+  });
+};
+var parseJsonArray = (value) => {
+  const decoded = decodeHtmlAttribute2(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 updateJsonListAttribute = ({
+  field,
+  index,
+  listAttr,
+  model,
+  value
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  if (!list[index]) {
+    return;
+  }
+  list[index] = {
+    ...list[index],
+    [field]: value
+  };
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var addJsonListItem = ({
+  listAttr,
+  model,
+  template
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  list.push(template);
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var duplicateJsonListItem = ({
+  index,
+  listAttr,
+  model
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  const item = list[index];
+  if (!item) {
+    return;
+  }
+  list.splice(index + 1, 0, {
+    ...item,
+    title: typeof item.title === "string" ? `${item.title} copy` : item.title
+  });
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var removeJsonListItem = ({
+  index,
+  listAttr,
+  model
+}) => {
+  const attrs = model.getAttributes?.() || {};
+  const list = parseJsonArray(attrs[listAttr]);
+  if (!list[index]) {
+    return;
+  }
+  list.splice(index, 1);
+  model.addAttributes?.({
+    [listAttr]: JSON.stringify(list)
+  });
+};
+var parseTemplateAttribute = (value) => {
+  const decoded = decodeHtmlAttribute2(value);
+  if (!decoded) {
+    return {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  } catch {
+    return {
+      description: "Describe this item.",
+      imageURL: "",
+      title: "New item"
+    };
+  }
+};
+var chooseAsset = (editor, currentSrc, callback) => {
+  const assetManager = editor?.AssetManager;
+  if (!assetManager?.open) {
+    const src = window.prompt("Image URL");
+    if (src) {
+      callback(src);
+    }
+    return;
+  }
+  if (currentSrc) {
+    assetManager.add?.({
+      name: `Current image - ${currentSrc.split("/").pop() || currentSrc}`,
+      src: currentSrc,
+      type: "image"
+    });
+  }
+  assetManager.open({
+    select(asset) {
+      const src = typeof asset === "string" ? asset : asset && typeof asset === "object" && "get" in asset && typeof asset.get === "function" ? String(asset.get("src") || "") : asset && typeof asset === "object" && "src" in asset ? String(asset.src || "") : "";
+      if (src) {
+        callback(src);
+      }
+      assetManager.close?.();
+    }
+  });
+};
+var bindEditablePreview = (view, editor) => {
+  const root = view.el;
+  if (!root) {
+    return;
+  }
+  root.querySelectorAll("[data-orion-action]").forEach((element) => {
+    const action = element.dataset.orionAction || "";
+    const listName = element.dataset.orionEditList || "";
+    const listIndex = Number(element.dataset.orionEditIndex);
+    const listAttr = listName ? propToAttrName(listName) : "";
+    element.setAttribute("title", element.getAttribute("aria-label") || element.textContent?.trim() || "Section action");
+    const runAction = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (typeof event.stopImmediatePropagation === "function") {
+        event.stopImmediatePropagation();
+      }
+      editor.select?.(view.model);
+      if (!listAttr) {
+        return;
+      }
+      if (action === "add-list-item") {
+        addJsonListItem({
+          listAttr,
+          model: view.model,
+          template: parseTemplateAttribute(element.dataset.orionItemTemplate)
+        });
+        return;
+      }
+      if (!Number.isInteger(listIndex)) {
+        return;
+      }
+      if (action === "duplicate-list-item") {
+        duplicateJsonListItem({
+          index: listIndex,
+          listAttr,
+          model: view.model
+        });
+        return;
+      }
+      if (action === "remove-list-item") {
+        removeJsonListItem({
+          index: listIndex,
+          listAttr,
+          model: view.model
+        });
+      }
+    };
+    element.addEventListener("pointerdown", runAction, true);
+    element.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        runAction(event);
+      }
+    });
+  });
+  root.querySelectorAll("[data-orion-edit-field]").forEach((element) => {
+    const field = element.dataset.orionEditField || "";
+    const listName = element.dataset.orionEditList || "";
+    const listIndex = Number(element.dataset.orionEditIndex);
+    const attrName = listName ? propToAttrName(listName) : propToAttrName(field);
+    const isImage = element.dataset.orionEditKind === "image" || element instanceof HTMLImageElement;
+    const placeholder = element.dataset.orionPlaceholder || "";
+    element.setAttribute("title", isImage ? "Click to replace image" : "Click and type to edit");
+    element.style.cursor = "text";
+    element.addEventListener("pointerdown", (event) => {
+      event.stopPropagation();
+      if (typeof event.stopImmediatePropagation === "function") {
+        event.stopImmediatePropagation();
+      }
+      editor.select?.(view.model);
+    }, true);
+    element.addEventListener("click", (event) => {
+      event.stopPropagation();
+      editor.select?.(view.model);
+      if (!isImage) {
+        return;
+      }
+      element.style.cursor = "pointer";
+      const currentSrc = element instanceof HTMLImageElement ? element.currentSrc || element.src || "" : element.style.backgroundImage.replace(/^url\(["']?/, "").replace(/["']?\)$/, "");
+      chooseAsset(editor, currentSrc, (src) => {
+        if (listName && Number.isInteger(listIndex)) {
+          updateJsonListAttribute({
+            field,
+            index: listIndex,
+            listAttr: attrName,
+            model: view.model,
+            value: src
+          });
+          return;
+        }
+        view.model.addAttributes?.({
+          [attrName]: src
+        });
+      });
+    });
+    if (isImage) {
+      return;
+    }
+    element.setAttribute("contenteditable", "true");
+    element.setAttribute("spellcheck", "true");
+    const commit = () => {
+      const typedValue = element.innerText.trim();
+      const value = placeholder && typedValue === placeholder ? "" : typedValue;
+      if (listName && Number.isInteger(listIndex)) {
+        updateJsonListAttribute({
+          field,
+          index: listIndex,
+          listAttr: attrName,
+          model: view.model,
+          value
+        });
+        return;
+      }
+      view.model.addAttributes?.({
+        [attrName]: value
+      });
+    };
+    element.addEventListener("blur", commit);
+    element.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        element.blur();
+      }
+    });
+  });
+};
+var registerProjectDynamicComponents = (editor, adapter) => {
+  const components = adapter?.components || {};
+  Object.keys(components).forEach((type) => {
+    const definition = normalizeDefinition(type, components[type]);
+    if (!definition) {
+      return;
+    }
+    editor.DomComponents.addType(`orion-${type}`, {
+      model: {
+        defaults: {
+          attributes: {
+            "data-orion-component": type,
+            "data-orion-id": `${type}-${Date.now()}`
+          },
+          components: "",
+          droppable: false,
+          tagName: "div",
+          traits: [
+            ...(definition.traits || []).map((trait) => ({
+              label: trait.label,
+              name: `data-orion-${trait.name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}`,
+              options: trait.options,
+              placeholder: trait.placeholder,
+              type: trait.type
+            }))
+          ]
+        }
+      },
+      view: {
+        init() {
+          this.listenTo(this.model, "change:attributes", this.renderPreview);
+          this.renderPreview();
+        },
+        renderPreview() {
+          const attributes = this.model.getAttributes?.() || {};
+          const props = propsFromAttributes(attributes);
+          this.model.components(previewForDefinition(definition, props));
+          lockPreviewChildren(this.model);
+          queueMicrotask(() => bindEditablePreview(this, editor));
+        }
+      }
+    });
+    editor.Blocks.add(`orion-dynamic-${type}`, {
+      category: "Project",
+      content: {
+        type: `orion-${type}`
+      },
+      label: definition.label
+    });
+  });
+};
+
+// 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(
+    {
+      source: "payload-visual-builder-child",
+      ...payload
+    },
+    "*"
+  );
+};
+var buildSavePayload = (editor, status, projectData) => ({
+  builderMode: "grapes-v2",
+  compiledCss: scopeBuilderCss(editor.getCss()),
+  compiledHtml: sanitizeBuilderHtml(editor.getHtml()),
+  projectData,
+  status
+});
+var parsePayloadErrorMessage = async (response, fallback) => {
+  try {
+    const json = await response.json();
+    return json.errors?.[0]?.message || json.message || fallback;
+  } catch {
+    const raw = await response.text();
+    return raw.trim() || fallback;
+  }
+};
+var getRelationID = (value) => {
+  if (typeof value === "number" || typeof value === "string") {
+    return value;
+  }
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const id = value.id;
+  return typeof id === "number" || typeof id === "string" ? id : null;
+};
+var normalizeAssetSrc = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  if (/^(https?:)?\/\//i.test(trimmed) || trimmed.startsWith("/")) {
+    return trimmed;
+  }
+  return `/${trimmed}`;
+};
+var mediaDocImageCandidates = (doc) => {
+  const candidates = [];
+  if (doc.sizes && typeof doc.sizes === "object") {
+    Object.values(doc.sizes).forEach((size) => {
+      if (size?.url) {
+        candidates.push({ src: normalizeAssetSrc(size.url), width: size.width });
+      } else if (size?.filename) {
+        candidates.push({ src: `/api/media/file/${encodeURIComponent(size.filename)}`, width: size.width });
+      }
+    });
+  }
+  if (typeof doc.thumbnailURL === "string" && doc.thumbnailURL.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.thumbnailURL), width: 360 });
+  }
+  if (typeof doc.url === "string" && doc.url.length > 0) {
+    candidates.push({ src: normalizeAssetSrc(doc.url), width: doc.width });
+  }
+  if (typeof doc.filename === "string" && doc.filename.length > 0) {
+    candidates.push({ src: `/api/media/file/${encodeURIComponent(doc.filename)}`, width: doc.width });
+  }
+  return candidates.filter((candidate, index, all) => candidate.src && all.findIndex((item) => item.src === candidate.src) === index);
+};
+var pickMediaAssetSrc = (doc) => {
+  const candidates = mediaDocImageCandidates(doc);
+  if (candidates.length === 0) {
+    return "";
+  }
+  const absolute = candidates.find((candidate) => /^(https?:)?\/\//i.test(candidate.src));
+  if (absolute) {
+    return absolute.src;
+  }
+  const fullSize = candidates.find((candidate) => candidate.src === doc.url);
+  if (fullSize) {
+    return fullSize.src;
+  }
+  const widest = [...candidates].sort((left, right) => (right.width || 0) - (left.width || 0))[0];
+  return widest?.src || candidates[0]?.src || "";
+};
+var mediaDocToAsset = (doc) => {
+  const id = getRelationID(doc);
+  const filename = typeof doc.filename === "string" ? doc.filename : "";
+  const src = pickMediaAssetSrc(doc);
+  if (id === null || !src) {
+    return null;
+  }
+  return {
+    alt: typeof doc.alt === "string" ? doc.alt : "",
+    id,
+    name: filename || String(id),
+    src,
+    type: "image"
+  };
+};
+var imageCanLoad = (src) => new Promise((resolve) => {
+  if (!src) {
+    resolve(false);
+    return;
+  }
+  const image = new Image();
+  image.onload = () => resolve(true);
+  image.onerror = () => resolve(false);
+  image.src = src;
+});
+var pruneBrokenImageAssets = async (editor) => {
+  const assetManager = editor.AssetManager;
+  const existingAssets = assetManager.getAll?.() || [];
+  for (const asset of existingAssets) {
+    const src = typeof asset.get === "function" ? String(asset.get("src") || "") : "";
+    if (src && !await imageCanLoad(src)) {
+      assetManager.remove?.(asset);
+    }
+  }
+};
+var extractUploadedMedia = (value) => {
+  const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
+  if (!candidate || typeof candidate !== "object") {
+    return null;
+  }
+  const id = getRelationID(candidate);
+  if (id === null) {
+    return null;
+  }
+  const typed = candidate;
+  return {
+    alt: typeof typed.alt === "string" ? typed.alt : "",
+    filename: typeof typed.filename === "string" ? typed.filename : "",
+    id,
+    sizes: typed.sizes && typeof typed.sizes === "object" ? typed.sizes : void 0,
+    thumbnailURL: typeof typed.thumbnailURL === "string" ? typed.thumbnailURL : "",
+    url: typeof typed.url === "string" ? typed.url : "",
+    width: typeof typed.width === "number" ? typed.width : void 0
+  };
+};
+var loadPayloadMediaAssets = async (editor) => {
+  const response = await fetch(`/api/media?depth=1&limit=100&sort=-updatedAt&_=${Date.now()}`, {
+    cache: "no-store",
+    credentials: "include"
+  });
+  if (!response.ok) {
+    return;
+  }
+  const json = await response.json();
+  const candidateAssets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
+  const assets = [];
+  for (const asset of candidateAssets) {
+    if (await imageCanLoad(asset.src)) {
+      assets.push(asset);
+    }
+  }
+  if (assets.length > 0) {
+    editor.AssetManager.add(assets);
+  }
+  await pruneBrokenImageAssets(editor);
+};
+var uploadPayloadMediaAssets = async (editor, files) => {
+  const fileArray = Array.from(files);
+  const uploadedAssets = [];
+  for (const file of fileArray) {
+    const optimizedFile = await optimizeImageForUpload(file);
+    if (optimizedFile.size > MAX_DIRECT_UPLOAD_BYTES) {
+      throw new Error("Image is too large. Use an image under 4MB or lower-resolution export.");
+    }
+    const fallbackAlt = file.name.replace(/\.[^/.]+$/, "").trim();
+    const formData = new FormData();
+    formData.set("_payload", JSON.stringify({ alt: fallbackAlt || "Uploaded image" }));
+    formData.set("alt", fallbackAlt || "Uploaded image");
+    formData.set("file", optimizedFile);
+    const response = await fetch("/api/media", {
+      body: formData,
+      credentials: "include",
+      method: "POST"
+    });
+    if (!response.ok) {
+      throw new Error(await parsePayloadErrorMessage(response, "Could not upload image."));
+    }
+    const uploaded = extractUploadedMedia(await response.json());
+    const asset = uploaded ? mediaDocToAsset(uploaded) : null;
+    if (asset) {
+      uploadedAssets.push(asset);
+    }
+  }
+  if (uploadedAssets.length > 0) {
+    editor.AssetManager.add(uploadedAssets);
+  }
+};
+function GrapesPageEditor({
+  adapter,
+  autosaveIntervalMs = 3e4,
+  initialData,
+  pageID
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  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 [isDirty, setIsDirty] = (0, import_react.useState)(false);
+  const [lastSavedAt, setLastSavedAt] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [publicationState, setPublicationState] = (0, import_react.useState)("live");
+  const [selectedDevice, setSelectedDevice] = (0, import_react.useState)("desktop");
+  const [saving, setSaving] = (0, import_react.useState)(null);
+  const [saveMessage, setSaveMessage] = (0, import_react.useState)("");
+  const [selectionSummary, setSelectionSummary] = (0, import_react.useState)(null);
+  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(),
+      canUndo: editor.UndoManager.hasUndo()
+    };
+    setHistoryState(next);
+    postToParent({
+      ...next,
+      type: "history-state"
+    });
+  };
+  const runValidation = (editor) => {
+    const issues = validateBuilderV2Output({
+      css: editor.getCss(),
+      html: editor.getHtml()
+    });
+    setValidationIssues(issues);
+    postToParent({ issues, type: "validation-state" });
+    return issues;
+  };
+  const setDevice = (device) => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+    editor.setDevice(device);
+    setSelectedDevice(device);
+  };
+  (0, import_react.useEffect)(() => {
+    let active = true;
+    const init = async () => {
+      if (!containerRef.current || editorRef.current) {
+        return;
+      }
+      try {
+        const grapesjs = (await import("grapesjs")).default;
+        if (!active || !containerRef.current) {
+          return;
+        }
+        const projectData = normalizeBuilderV2ProjectData(initialData?.projectData, initialData?.title);
+        const editor = grapesjs.init({
+          assetManager: {
+            uploadFile: async (event) => {
+              const target = event.target;
+              const dataTransfer = "dataTransfer" in event ? event.dataTransfer : null;
+              const files = dataTransfer?.files || target?.files;
+              if (!files || files.length === 0) {
+                return void 0;
+              }
+              await uploadPayloadMediaAssets(editorRef.current || editor, files).catch((uploadError) => {
+                setError(uploadError instanceof Error ? uploadError.message : "Could not upload image.");
+              });
+            }
+          },
+          blockManager: {
+            appendTo: "#orion-builder-v2-blocks"
+          },
+          container: containerRef.current,
+          deviceManager: {
+            devices: [
+              { id: "desktop", name: "Desktop", width: "" },
+              { id: "tablet", name: "Tablet", width: "768px" },
+              { id: "mobile", name: "Mobile", width: "390px" }
+            ]
+          },
+          fromElement: false,
+          height: "100%",
+          panels: {
+            defaults: []
+          },
+          selectorManager: {
+            componentFirst: true
+          },
+          storageManager: false,
+          styleManager: {
+            appendTo: "#orion-builder-v2-styles",
+            sectors: [
+              {
+                name: "Layout",
+                open: true,
+                properties: ["display", "position", "top", "right", "bottom", "left", "width", "height", "min-height", "margin", "padding"]
+              },
+              {
+                name: "Typography",
+                open: true,
+                properties: ["font-family", "font-size", "font-weight", "line-height", "letter-spacing", "color", "text-align"]
+              },
+              {
+                name: "Decoration",
+                open: true,
+                properties: ["background-color", "background", "border", "border-radius", "box-shadow", "opacity"]
+              },
+              {
+                name: "Flex",
+                open: false,
+                properties: ["flex-direction", "justify-content", "align-items", "gap", "flex-wrap"]
+              }
+            ]
+          },
+          traitManager: {
+            appendTo: "#orion-builder-v2-traits"
+          },
+          width: "auto"
+        });
+        editorRef.current = editor;
+        registerOrionBuilderV2Blocks(editor);
+        registerProjectDynamicComponents(editor, adapter);
+        editor.loadProjectData(projectData);
+        void loadPayloadMediaAssets(editor);
+        editor.on("update", () => {
+          const hasDirtyChanges = editor.getDirtyCount() > 0;
+          setIsDirty(hasDirtyChanges);
+          postToParent({ dirty: hasDirtyChanges, type: "dirty-state" });
+          updateHistoryState(editor);
+          runValidation(editor);
+          setSaveMessage("Unsaved changes");
+          if (autosaveTimerRef.current) {
+            window.clearTimeout(autosaveTimerRef.current);
+          }
+          autosaveTimerRef.current = window.setTimeout(() => {
+            if (editor.getDirtyCount() > 0) {
+              void saveRef.current("draft", { autosave: true });
+            }
+          }, autosaveIntervalMs);
+        });
+        editor.on("component:selected", (component) => {
+          const typed = component;
+          selectedComponentRef.current = typed;
+          setSelectionSummary(summarizeSelectedComponent(typed));
+        });
+        setSelectedDevice(editor.getDevice() || "desktop");
+        runValidation(editor);
+        updateHistoryState(editor);
+        setLoading(false);
+      } catch (initError) {
+        setError(initError instanceof Error ? initError.message : "Could not load the website builder.");
+        setLoading(false);
+      }
+    };
+    void init();
+    return () => {
+      active = false;
+      if (autosaveTimerRef.current) {
+        window.clearTimeout(autosaveTimerRef.current);
+      }
+      editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+  }, [adapter, autosaveIntervalMs, initialData?.projectData, initialData?.title]);
+  const save = async (status, options = {}) => {
+    const editor = editorRef.current;
+    if (!editor || saving) {
+      return;
+    }
+    const issues = runValidation(editor);
+    if (status === "published" && hasBlockingBuilderV2Issues(issues)) {
+      const message = "Resolve blocking validation errors before publishing.";
+      setSaveMessage(message);
+      postToParent({
+        message,
+        ok: false,
+        status,
+        type: "save-result"
+      });
+      return;
+    }
+    setSaving(status);
+    try {
+      const projectData = editor.getProjectData();
+      const payload = buildSavePayload(editor, status, projectData);
+      const dynamicComponents = parseBuilderV2DynamicComponents(String(payload.compiledHtml || ""));
+      const endpoint = status === "draft" ? `/api/pages/${pageID}?draft=true` : `/api/pages/${pageID}`;
+      const response = await fetch(endpoint, {
+        body: JSON.stringify(
+          status === "published" ? {
+            _status: "published",
+            builderDynamicComponents: dynamicComponents,
+            builderMode: "grapes-v2",
+            builderProjectData: projectData,
+            builderPublishedProjectData: projectData,
+            builderLastPublishedAt: (/* @__PURE__ */ new Date()).toISOString(),
+            builderLastSavedAt: (/* @__PURE__ */ new Date()).toISOString(),
+            builderValidationIssues: issues,
+            compiledCss: payload.compiledCss,
+            compiledHtml: payload.compiledHtml
+          } : {
+            _status: "draft",
+            builderAutosaveProjectData: options.autosave ? projectData : null,
+            builderDynamicComponents: dynamicComponents,
+            builderMode: "grapes-v2",
+            builderProjectData: projectData,
+            builderLastSavedAt: (/* @__PURE__ */ new Date()).toISOString(),
+            builderValidationIssues: issues,
+            compiledCss: payload.compiledCss,
+            compiledHtml: payload.compiledHtml
+          }
+        ),
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "PATCH"
+      });
+      if (!response.ok) {
+        if (response.status === 401 || response.status === 403) {
+          postToParent({ type: "session-expired" });
+        }
+        throw new Error(await parsePayloadErrorMessage(response, "Could not save this page."));
+      }
+      editor.clearDirtyCount();
+      setIsDirty(false);
+      setPublicationState(status === "published" ? "live" : "draft");
+      postToParent({
+        dirty: false,
+        type: "dirty-state"
+      });
+      postToParent({
+        message: status === "published" ? "Published." : options.autosave ? "Autosaved." : "Draft saved.",
+        ok: true,
+        status,
+        type: "save-result"
+      });
+      setLastSavedAt((/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }));
+      setSaveMessage(status === "published" ? "Published" : options.autosave ? "Autosaved" : "Draft saved");
+    } catch (saveError) {
+      const message = saveError instanceof Error ? saveError.message : "Could not save.";
+      setSaveMessage(message);
+      postToParent({
+        message,
+        ok: false,
+        status,
+        type: "save-result"
+      });
+    } finally {
+      setSaving(null);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    saveRef.current = save;
+  }, [saving]);
+  (0, import_react.useEffect)(() => {
+    const onMessage = (event) => {
+      const data = event.data;
+      const editor = editorRef.current;
+      if (!data || data.source !== "payload-visual-builder-parent" || !editor) {
+        return;
+      }
+      if (data.type === "dirty-check-request") {
+        postToParent({ dirty: editor.getDirtyCount() > 0, type: "dirty-state" });
+        updateHistoryState(editor);
+        return;
+      }
+      if (data.type === "history-check-request") {
+        updateHistoryState(editor);
+        return;
+      }
+      if (data.type === "undo") {
+        editor.UndoManager.undo();
+        return;
+      }
+      if (data.type === "redo") {
+        editor.UndoManager.redo();
+        return;
+      }
+      if (data.type === "save" && (data.status === "draft" || data.status === "published")) {
+        void save(data.status);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [saving]);
+  const statusLabel = saving ? saving === "published" ? "Publishing..." : "Saving draft..." : isDirty ? "Unsaved changes" : saveMessage && saveMessage !== "Unsaved changes" ? saveMessage : "All changes saved";
+  const statusMeta = lastSavedAt ? `Last saved ${lastSavedAt}` : "Ready";
+  const liveStatusLabel = isDirty ? "Save draft to update" : publicationState === "draft" ? "Unpublished draft changes" : "Live is up to date";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "orion-builder-v2-topbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "orion-builder-v2-eyebrow", children: "Website Builder V2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: initialData?.title || "Untitled page" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-toolbar", "aria-label": "Builder controls", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `orion-builder-v2-sync is-${isDirty ? "dirty" : publicationState}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: liveStatusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: statusMeta })
+        ] }),
+        ["desktop", "tablet", "mobile"].map((device) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            "aria-pressed": selectedDevice === device,
+            className: "orion-builder-v2-tool",
+            onClick: () => setDevice(device),
+            type: "button",
+            children: device
+          },
+          device
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "orion-builder-v2-tool",
+            disabled: !historyState.canUndo,
+            onClick: () => {
+              editorRef.current?.UndoManager.undo();
+              editorRef.current && updateHistoryState(editorRef.current);
+            },
+            type: "button",
+            children: "Undo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "orion-builder-v2-tool",
+            disabled: !historyState.canRedo,
+            onClick: () => {
+              editorRef.current?.UndoManager.redo();
+              editorRef.current && updateHistoryState(editorRef.current);
+            },
+            type: "button",
+            children: "Redo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "orion-builder-v2-tool is-primary", disabled: Boolean(saving), onClick: () => void save("draft"), type: "button", children: saving === "draft" ? "Saving..." : "Save draft" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "orion-builder-v2-tool is-publish", disabled: Boolean(saving), onClick: () => void save("published"), type: "button", children: saving === "published" ? "Publishing..." : "Publish" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "orion-builder-v2-sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Pages" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-page-tree", children: pageTree.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No pages loaded." }) : pageTree.map((page) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "a",
+          {
+            className: "orion-builder-v2-page-link",
+            href: `${editorPageBasePath}/${page.id}`,
+            onClick: (event) => {
+              const target = `${editorPageBasePath}/${page.id}`;
+              if (window.parent && window.parent !== window) {
+                event.preventDefault();
+                window.parent.location.href = target;
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: page.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: page.path })
+            ]
+          },
+          page.id
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Blocks" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Drag sections into the page. Dynamic blocks render through the project adapter." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-blocks" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Validation" }),
+        /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: issue.message }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: issue.severity })
+        ] }, `${issue.code}-${issue.path}`)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "orion-builder-v2-main", children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-error", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-canvas", ref: containerRef })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "orion-builder-v2-inspector", "aria-label": "Selected section settings", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: selectionSummary ? selectionSummary.label : "No section selected" }),
+        /* @__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." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-styles" })
+      ] })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GrapesPageEditor
+});