@orion-studios/payload-studio 0.6.0-beta.5 → 0.6.0-beta.50

package/dist/builder-v2/client.mjs

@@ -0,0 +1,1033 @@
+'use client';
+"use client";
+import {
+  MAX_DIRECT_UPLOAD_BYTES,
+  optimizeImageForUpload
+} from "../chunk-ROTPP5CU.mjs";
+
+// src/builder-v2/editor/GrapesPageEditor.tsx
+import { useEffect, useRef, useState } from "react";
+
+// 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) => {
+  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;
+};
+
+// 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/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) => typeof value === "string" ? value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">") : "";
+var attrToPropName = (name) => name.replace(/^data-orion-/, "").replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+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 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: [
+            {
+              label: "Component",
+              name: "data-orion-component",
+              type: "text"
+            },
+            ...(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));
+        }
+      }
+    });
+    editor.Blocks.add(`orion-dynamic-${type}`, {
+      category: "Project",
+      content: {
+        type: `orion-${type}`
+      },
+      label: definition.label
+    });
+  });
+};
+
+// src/builder-v2/editor/GrapesPageEditor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+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 mediaDocToAsset = (doc) => {
+  const id = getRelationID(doc);
+  const filename = typeof doc.filename === "string" ? doc.filename : "";
+  const src = typeof doc.url === "string" && doc.url.length > 0 ? doc.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  if (id === null || !src) {
+    return null;
+  }
+  return {
+    alt: typeof doc.alt === "string" ? doc.alt : "",
+    id,
+    name: filename || String(id),
+    src,
+    type: "image"
+  };
+};
+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,
+    url: typeof typed.url === "string" ? typed.url : ""
+  };
+};
+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 assets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
+  editor.AssetManager.add(assets);
+};
+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 = useRef(null);
+  const editorRef = useRef(null);
+  const autosaveTimerRef = useRef(null);
+  const saveRef = useRef(async () => void 0);
+  const [error, setError] = useState("");
+  const [historyState, setHistoryState] = useState({ canRedo: false, canUndo: false });
+  const [lastSavedAt, setLastSavedAt] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [selectedDevice, setSelectedDevice] = useState("desktop");
+  const [saving, setSaving] = useState(null);
+  const [saveMessage, setSaveMessage] = useState("");
+  const [validationIssues, setValidationIssues] = useState([]);
+  const pageTree = initialData?.meta?.pageTree || [];
+  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);
+  };
+  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: {
+            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", () => {
+          postToParent({ dirty: editor.getDirtyCount() > 0, 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", () => {
+          setSaveMessage("Selection ready");
+        });
+        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();
+      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);
+    }
+  };
+  useEffect(() => {
+    saveRef.current = save;
+  }, [saving]);
+  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]);
+  return /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-editor", children: [
+    /* @__PURE__ */ jsxs("header", { className: "orion-builder-v2-topbar", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "orion-builder-v2-eyebrow", children: "Website Builder V2" }),
+        /* @__PURE__ */ jsx("h1", { children: initialData?.title || "Untitled page" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-toolbar", "aria-label": "Builder controls", children: [
+        ["desktop", "tablet", "mobile"].map((device) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-pressed": selectedDevice === device,
+            className: "orion-builder-v2-tool",
+            onClick: () => setDevice(device),
+            type: "button",
+            children: device
+          },
+          device
+        )),
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("button", { className: "orion-builder-v2-tool is-publish", disabled: Boolean(saving), onClick: () => void save("published"), type: "button", children: saving === "published" ? "Publishing..." : "Publish" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "orion-builder-v2-sidebar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Pages" }),
+        /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-page-tree", children: pageTree.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No pages loaded." }) : pageTree.map((page) => /* @__PURE__ */ jsxs("a", { className: "orion-builder-v2-page-link", href: `#page-${page.id}`, children: [
+          /* @__PURE__ */ jsx("span", { children: page.title }),
+          /* @__PURE__ */ jsx("small", { children: page.path })
+        ] }, page.id)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Blocks" }),
+        /* @__PURE__ */ jsx("p", { children: "Drag sections into the page. Dynamic blocks render through the project adapter." }),
+        /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-blocks" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Inspector" }),
+        /* @__PURE__ */ jsx("p", { children: "Selection settings, dynamic bindings, links, and labels." }),
+        /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-traits" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Validation" }),
+        /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-validation-list", children: validationIssues.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No issues found." }) : validationIssues.map((issue) => /* @__PURE__ */ jsxs("div", { className: `orion-builder-v2-validation is-${issue.severity}`, children: [
+          /* @__PURE__ */ jsx("strong", { children: issue.message }),
+          /* @__PURE__ */ jsx("span", { children: issue.severity })
+        ] }, `${issue.code}-${issue.path}`)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "orion-builder-v2-main", children: [
+      loading ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
+      error ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-error", children: error }) : null,
+      saveMessage || lastSavedAt ? /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-save-status", children: [
+        /* @__PURE__ */ jsx("strong", { children: saveMessage || "Ready" }),
+        lastSavedAt ? /* @__PURE__ */ jsxs("span", { children: [
+          "Last saved ",
+          lastSavedAt
+        ] }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-canvas", ref: containerRef })
+    ] })
+  ] });
+}
+export {
+  GrapesPageEditor
+};