@orion-studios/payload-studio 0.6.0-beta.10 → 0.6.0-beta.103

package/dist/builder-v2/client.js

@@ -0,0 +1,3298 @@
+'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>[^>]*)>/gis;
+var attrPattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)=(?:"([^"]*)"|'([^']*)')/g;
+var decodeHtmlAttribute = (value) => value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+var parseAttributes = (value) => {
+  const props = {};
+  let match;
+  while ((match = attrPattern.exec(value)) !== null) {
+    const name = match[1];
+    const rawValue = match[2] ?? match[3] ?? "";
+    if (!name.startsWith("data-")) {
+      continue;
+    }
+    if (name === "data-orion-component" || name === "data-orion-id") {
+      continue;
+    }
+    if (name === "data-orion-props") {
+      const decoded = decodeHtmlAttribute(rawValue);
+      try {
+        const parsed = JSON.parse(decoded);
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+          Object.assign(props, parsed);
+        }
+      } catch {
+        props.propsJson = decoded;
+      }
+      continue;
+    }
+    const propName = name.replace(/^data-orion-/, "").replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    props[propName] = decodeHtmlAttribute(rawValue);
+  }
+  return props;
+};
+var extractAttribute = (attrs, name) => {
+  attrPattern.lastIndex = 0;
+  let match;
+  while ((match = attrPattern.exec(attrs)) !== null) {
+    if (match[1] === name) {
+      return decodeHtmlAttribute(match[2] ?? match[3] ?? "");
+    }
+  }
+  return null;
+};
+var extractWrapperAttributes = (attrs) => {
+  const id = extractAttribute(attrs, "id") || void 0;
+  const className = extractAttribute(attrs, "class") || void 0;
+  const style = extractAttribute(attrs, "style") || void 0;
+  return id || className || style ? { className, id, style } : void 0;
+};
+var 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 blockPreview = (variant) => `
+  <div class="orion-builder-v2-block-preview is-${variant}" aria-hidden="true">
+    <span class="wire wire-kicker"></span>
+    <span class="wire wire-title"></span>
+    <span class="wire wire-copy"></span>
+    <span class="wire wire-copy is-short"></span>
+    <span class="wire wire-button"></span>
+    <span class="wire wire-image"></span>
+    <span class="wire wire-card"></span>
+    <span class="wire wire-card"></span>
+    <span class="wire wire-card"></span>
+  </div>
+`;
+var registerOrionBuilderV2Blocks = (editor) => {
+  const blocks = editor.Blocks;
+  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",
+    media: blockPreview("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",
+    media: blockPreview("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",
+    media: blockPreview("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",
+    media: blockPreview("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",
+    media: blockPreview("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",
+    media: blockPreview("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",
+    media: blockPreview("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",
+    media: blockPreview("pricing")
+  });
+  blocks.add("orion-button", {
+    category: "Basic",
+    content: '<a class="orion-builder-v2-button" href="/contact">Button</a>',
+    label: "Button",
+    media: blockPreview("button")
+  });
+  blocks.add("orion-image", {
+    category: "Basic",
+    content: '<img alt="Image" class="orion-builder-v2-image" src="https://placehold.co/1200x700" />',
+    label: "Image",
+    media: blockPreview("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",
+    media: blockPreview("form")
+  });
+};
+
+// 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 headingFieldNames = /* @__PURE__ */ new Set(["headline", "label", "question", "title", "value"]);
+var textKindForField = (field, element) => /^h[1-6]$/i.test(element.tagName) || headingFieldNames.has(field) ? "heading" : "body";
+var markActiveEditableField = (model, field, element) => {
+  const computed = window.getComputedStyle(element);
+  model.addAttributes?.({
+    "data-orion-active-edit-field": field,
+    "data-orion-active-text-kind": textKindForField(field, element),
+    "data-orion-active-font-family": computed.fontFamily,
+    "data-orion-active-font-size": computed.fontSize,
+    "data-orion-active-font-weight": computed.fontWeight,
+    "data-orion-active-line-height": computed.lineHeight,
+    "data-orion-active-letter-spacing": computed.letterSpacing,
+    "data-orion-active-color": computed.color,
+    "data-orion-active-text-align": computed.textAlign
+  });
+};
+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 parseJsonRecord = (value) => {
+  const decoded = decodeHtmlAttribute2(value);
+  if (!decoded) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+};
+var serializeJsonRecord = (value) => JSON.stringify(value);
+var normalizeCssColor = (value) => typeof value === "string" && value.trim() && value.trim() !== "none" ? value.trim() : "";
+var defaultBackgroundForComponent = (type, props) => {
+  const block = parseJsonRecord(props.block);
+  const explicit = normalizeCssColor(block.backgroundColor) || normalizeCssColor(props.backgroundColor);
+  if (explicit) {
+    return explicit;
+  }
+  if (type === "xoCta") {
+    return typeof block.style === "string" && block.style.toLowerCase() === "dark" ? "#243654" : "#304b70";
+  }
+  if (type === "xoFeatureGrid" || type === "xoRichText") {
+    return "#fbfaf7";
+  }
+  if (type === "xoHero" && !props.backgroundImageURL && !props.imageURL) {
+    return "#fbfaf7";
+  }
+  return "";
+};
+var syncModelBackgroundToBlock = (model) => {
+  const attrs = model.getAttributes?.() || {};
+  const block = parseJsonRecord(attrs["data-orion-block"]);
+  const style = model.getStyle?.() || {};
+  const backgroundColor = normalizeCssColor(style["background-color"] || style.backgroundColor);
+  if (!backgroundColor || Object.keys(block).length === 0) {
+    return;
+  }
+  model.addAttributes?.({
+    "data-orion-background-color": backgroundColor,
+    "data-orion-block": serializeJsonRecord({
+      ...block,
+      backgroundColor
+    })
+  });
+};
+var previewForDefinition = (definition, props) => definition.editorPreview?.(props) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`;
+var blockPreviewForDefinition = (type) => {
+  const normalizedType = type.replace(/[^a-z0-9-]/gi, "-");
+  return `
+    <div class="orion-builder-v2-block-preview is-project is-${normalizedType}" aria-hidden="true">
+      <span class="wire wire-kicker"></span>
+      <span class="wire wire-title"></span>
+      <span class="wire wire-copy"></span>
+      <span class="wire wire-image"></span>
+      <span class="wire wire-card"></span>
+      <span class="wire wire-card"></span>
+      <span class="wire wire-card"></span>
+    </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();
+      }
+      if (!isImage) {
+        markActiveEditableField(view.model, field, element);
+      }
+      editor.select?.(view.model);
+    }, true);
+    element.addEventListener("click", (event) => {
+      event.stopPropagation();
+      if (!isImage) {
+        markActiveEditableField(view.model, field, element);
+      }
+      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.listenTo(this.model, "change:style", () => syncModelBackgroundToBlock(this.model));
+          this.renderPreview();
+        },
+        renderPreview() {
+          const attributes = this.model.getAttributes?.() || {};
+          const props = propsFromAttributes(attributes);
+          const backgroundColor = defaultBackgroundForComponent(type, props);
+          if (backgroundColor && !normalizeCssColor(this.model.getStyle?.()?.["background-color"])) {
+            this.model.addStyle?.({ "background-color": backgroundColor });
+            this.model.addAttributes?.({ "data-orion-background-color": backgroundColor });
+          }
+          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,
+      media: blockPreviewForDefinition(type)
+    });
+  });
+};
+
+// src/builder-v2/editor/GrapesPageEditor.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var quickLayoutOptions = [
+  { description: "Normal page section flow.", label: "Natural", value: "natural" },
+  { description: "Stack children vertically.", label: "Stacked", value: "stacked" },
+  { description: "Place children in one flexible row.", label: "Row", value: "row" },
+  { description: "Split content into two columns.", label: "Two column", value: "two-column" },
+  { description: "Use a three-column card/grid layout.", label: "Three column", value: "three-column" },
+  { description: "Center content in the section.", label: "Centered", value: "centered" },
+  { description: "Prepare the section for layered content.", label: "Overlay", value: "overlay" }
+];
+var quickSpacingOptions = [
+  { label: "Compact", value: "compact" },
+  { label: "Medium", value: "medium" },
+  { label: "Spacious", value: "spacious" }
+];
+var horizontalAlignOptions = [
+  { label: "Left", value: "left" },
+  { label: "Center", value: "center" },
+  { label: "Right", value: "right" }
+];
+var verticalAlignOptions = [
+  { label: "Top", value: "top" },
+  { label: "Middle", value: "middle" },
+  { label: "Bottom", value: "bottom" }
+];
+var builderSettingHelp = {
+  "align items": "Controls how flex children align across the section, such as top, center, bottom, or stretch.",
+  background: "Sets the full background style for the selected element. Use carefully when combining images, colors, or gradients.",
+  "background color": "Sets the background color behind the selected element content.",
+  "background image url": "The image shown behind this section. Use a media URL from the site media library or uploaded asset.",
+  border: "Controls the selected element border width, style, and color.",
+  "border radius": "Rounds the corners of the selected element.",
+  bottom: "Offsets positioned elements from the bottom. This only applies when Position is relative, absolute, or fixed.",
+  "box shadow": "Adds depth behind the selected element.",
+  color: "Sets the text color for the selected element.",
+  description: "Supporting body copy for this section.",
+  display: "Controls how the element participates in layout. Flex unlocks child alignment and gap controls; none hides the element.",
+  eyebrow: "Small label text shown above the main title or headline.",
+  "flex direction": "Controls whether flex children flow in a row or column. Only applies when Display is flex.",
+  "flex wrap": "Controls whether flex children can wrap onto another row. Only applies when Display is flex.",
+  "font family": "Controls the typeface used by the selected text.",
+  "font size": "Controls how large the selected text appears.",
+  "font weight": "Controls the thickness of the selected text.",
+  "form type": "Chooses which site form this section should render.",
+  gap: "Adds space between child elements. This is most useful when Display is flex or grid.",
+  headline: "Main heading text for this section.",
+  height: "Sets an exact element height. Use sparingly because fixed heights can clip content on smaller screens.",
+  kicker: "Small label text shown above the main hero headline.",
+  left: "Offsets positioned elements from the left. This only applies when Position is relative, absolute, or fixed.",
+  "letter spacing": "Adjusts the space between letters.",
+  "line height": "Controls vertical spacing between lines of text.",
+  margin: "Adds space outside the selected element.",
+  "min height": "Sets the minimum height while still allowing content to grow. Usually better than fixed Height for sections.",
+  opacity: "Controls transparency. Lower values make the selected element more see-through.",
+  padding: "Adds space inside the selected element between its border and content.",
+  position: "Controls whether the element stays in normal flow or can be offset/pinned.",
+  "primary label": "Text for the primary call-to-action button.",
+  "primary link": "Destination URL for the primary call-to-action button.",
+  right: "Offsets positioned elements from the right. This only applies when Position is relative, absolute, or fixed.",
+  "secondary label": "Text for the secondary call-to-action button.",
+  "secondary link": "Destination URL for the secondary call-to-action button.",
+  style: "Selects the visual variant for this component.",
+  subheadline: "Supporting text below the main hero headline.",
+  subtitle: "Supporting text below the section title.",
+  text: "Editable rich text or body content for this section.",
+  "text align": "Controls horizontal text alignment.",
+  title: "Main title text for this section.",
+  top: "Offsets positioned elements from the top. This only applies when Position is relative, absolute, or fixed.",
+  variant: "Selects the layout or visual variant for this component.",
+  width: "Sets the element width. Applies to block, inline-block, flex, grid, absolute, and fixed elements."
+};
+var normalizeHelpKey = (value) => value.replace(/\s+/g, " ").trim().toLowerCase();
+var readDetailedLayoutControlState = (component) => {
+  const style = component?.getStyle?.() || {};
+  return {
+    display: getStyleString(style, "display") || "block",
+    position: getStyleString(style, "position") || "static"
+  };
+};
+var decorateBuilderSettingHelp = (root = document) => {
+  const elements = root.querySelectorAll(
+    [
+      ".orion-builder-v2-choice",
+      ".orion-builder-v2-segmented button",
+      ".orion-builder-v2-toggle",
+      ".gjs-sm-label",
+      ".gjs-label",
+      ".gjs-trt-trait__label",
+      ".gjs-sm-radio-item-label",
+      ".gjs-sm-sector-title"
+    ].join(",")
+  );
+  elements.forEach((element) => {
+    const text = normalizeHelpKey(element.textContent || element.getAttribute("aria-label") || "");
+    const help = builderSettingHelp[text];
+    if (!help) {
+      return;
+    }
+    element.setAttribute("aria-description", help);
+    element.dataset.builderSettingHelp = help;
+    if (!element.querySelector(":scope > .orion-builder-v2-help-trigger")) {
+      const trigger = document.createElement("span");
+      trigger.setAttribute("aria-label", `Show help: ${element.textContent?.trim() || "setting"}`);
+      trigger.className = "orion-builder-v2-help-trigger";
+      trigger.dataset.builderHelpText = help;
+      trigger.role = "button";
+      trigger.tabIndex = 0;
+      trigger.textContent = "?";
+      element.appendChild(trigger);
+    }
+  });
+};
+var findColorInputForControl = (element) => {
+  const field = element.closest(".gjs-field-color") || element.closest(".gjs-sm-property") || element.closest("label");
+  return field?.querySelector(
+    'input:not([type="hidden"]):not([disabled]), input[type="color"]:not([disabled])'
+  ) || null;
+};
+var applyColorValueToInput = (input, color) => {
+  input.value = color;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  input.dispatchEvent(new Event("change", { bubbles: true }));
+};
+var openScreenColorPickerForInput = async (input) => {
+  const EyeDropper = window.EyeDropper;
+  if (!EyeDropper) {
+    return false;
+  }
+  const result = await new EyeDropper().open();
+  applyColorValueToInput(input, result.sRGBHex);
+  return true;
+};
+var decorateBuilderColorEyeDroppers = (root = document) => {
+  const supportsEyeDropper = Boolean(window.EyeDropper);
+  const colorFields = root.querySelectorAll(".gjs-field-color");
+  colorFields.forEach((field) => {
+    const input = findColorInputForControl(field);
+    const swatch = field.querySelector(".gjs-field-colorp");
+    if (!supportsEyeDropper || !input || !swatch || field.querySelector(":scope > .orion-builder-v2-eyedropper")) {
+      return;
+    }
+    field.classList.add("has-orion-eyedropper");
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "orion-builder-v2-eyedropper";
+    button.dataset.orionColorEyedropper = "true";
+    button.setAttribute("aria-label", "Pick color from screen");
+    button.setAttribute("title", "Pick color from screen");
+    button.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 4.3a2.4 2.4 0 0 1 3.4 0l1.6 1.6a2.4 2.4 0 0 1 0 3.4l-1.2 1.2 1 1a1 1 0 1 1-1.4 1.4l-1-1-8.9 8.9H4v-4.2l8.9-8.9-1-1a1 1 0 0 1 1.4-1.4l1 1 1.4-1.4Zm-.4 4.8-8.3 8.3V19h1.6l8.3-8.3-1.6-1.6Z" fill="currentColor"/></svg>';
+    swatch.insertAdjacentElement("afterend", button);
+  });
+};
+var closeBuilderHelpPopovers = (except) => {
+  document.querySelectorAll(".is-builder-help-open").forEach((element) => {
+    if (element !== except) {
+      element.classList.remove("is-builder-help-open");
+      element.classList.remove("is-builder-help-left", "is-builder-help-center", "is-builder-help-right");
+    }
+  });
+};
+var openBuilderHelpPopover = (trigger, wrapper, isOpen) => {
+  if (!wrapper) {
+    return;
+  }
+  wrapper.classList.remove("is-builder-help-left", "is-builder-help-center", "is-builder-help-right");
+  if (!isOpen) {
+    wrapper.classList.remove("is-builder-help-open");
+    return;
+  }
+  const triggerRect = trigger.getBoundingClientRect();
+  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+  const tooltipHalfWidth = 140;
+  const viewportGutter = 18;
+  const triggerCenter = triggerRect.left + triggerRect.width / 2;
+  if (triggerCenter - tooltipHalfWidth < viewportGutter) {
+    wrapper.classList.add("is-builder-help-left");
+  } else if (triggerCenter + tooltipHalfWidth > viewportWidth - viewportGutter) {
+    wrapper.classList.add("is-builder-help-right");
+  } else {
+    wrapper.classList.add("is-builder-help-center");
+  }
+  wrapper.classList.add("is-builder-help-open");
+};
+var positionColorPickerFromAnchor = (anchor) => {
+  if (!anchor) {
+    return;
+  }
+  window.requestAnimationFrame(() => {
+    const picker = document.querySelector(".sp-container.gjs-editor-sp:not(.sp-hidden)");
+    if (!picker) {
+      return;
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const pickerRect = picker.getBoundingClientRect();
+    const viewportPadding = 12;
+    const left = Math.min(
+      Math.max(viewportPadding, anchorRect.right - pickerRect.width),
+      Math.max(viewportPadding, window.innerWidth - pickerRect.width - viewportPadding)
+    );
+    const top = Math.min(anchorRect.bottom + 8, Math.max(viewportPadding, window.innerHeight - pickerRect.height - viewportPadding));
+    picker.style.left = `${left}px`;
+    picker.style.right = "auto";
+    picker.style.top = `${top}px`;
+  });
+};
+var detailedLayoutClassNames = ({ display, position }) => {
+  const normalizedDisplay = normalizeHelpKey(display || "block");
+  const normalizedPosition = normalizeHelpKey(position || "static");
+  const supportsGap = normalizedDisplay === "flex" || normalizedDisplay === "grid";
+  const supportsFlexControls = normalizedDisplay === "flex";
+  const supportsSize = normalizedDisplay === "block" || normalizedDisplay === "inline-block" || normalizedDisplay === "flex" || normalizedDisplay === "grid" || normalizedPosition === "absolute" || normalizedPosition === "fixed";
+  const supportsOffsets = normalizedPosition === "relative" || normalizedPosition === "absolute" || normalizedPosition === "fixed";
+  return [
+    supportsGap ? "can-use-gap" : "cannot-use-gap",
+    supportsFlexControls ? "can-use-flex-controls" : "cannot-use-flex-controls",
+    supportsOffsets ? "can-use-position-offsets" : "cannot-use-position-offsets",
+    supportsSize ? "can-use-sizing-controls" : "cannot-use-sizing-controls"
+  ].join(" ");
+};
+var HelpTrigger = ({ help, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "span",
+  {
+    "aria-label": `Show help: ${label}`,
+    className: "orion-builder-v2-help-trigger",
+    "data-builder-help-text": help,
+    role: "button",
+    tabIndex: 0,
+    children: "?"
+  }
+);
+var layoutStyleReset = {
+  "align-items": "",
+  "display": "",
+  "flex-direction": "",
+  "flex-wrap": "",
+  "gap": "",
+  "grid-template-columns": "",
+  "justify-content": "",
+  "margin-left": "",
+  "margin-right": "",
+  "min-height": "",
+  "place-items": "",
+  "position": "",
+  "text-align": ""
+};
+var quickLayoutStyles = {
+  centered: {
+    ...layoutStyleReset,
+    display: "block",
+    "margin-left": "auto",
+    "margin-right": "auto",
+    "text-align": "center"
+  },
+  natural: layoutStyleReset,
+  overlay: {
+    ...layoutStyleReset,
+    display: "grid",
+    "min-height": "420px",
+    "place-items": "center",
+    position: "relative",
+    "text-align": "center"
+  },
+  row: {
+    ...layoutStyleReset,
+    display: "flex",
+    "flex-direction": "row",
+    "flex-wrap": "wrap",
+    gap: "24px"
+  },
+  stacked: {
+    ...layoutStyleReset,
+    display: "block"
+  },
+  "three-column": {
+    ...layoutStyleReset,
+    display: "grid",
+    gap: "24px",
+    "grid-template-columns": "repeat(3, minmax(0, 1fr))"
+  },
+  "two-column": {
+    ...layoutStyleReset,
+    display: "grid",
+    gap: "24px",
+    "grid-template-columns": "repeat(2, minmax(0, 1fr))"
+  }
+};
+var quickSpacingStyles = {
+  compact: "32px 24px",
+  medium: "64px 24px",
+  spacious: "96px 24px"
+};
+var quickHorizontalAlignStyles = {
+  center: { "justify-content": "center", "text-align": "center" },
+  left: { "justify-content": "flex-start", "text-align": "left" },
+  right: { "justify-content": "flex-end", "text-align": "right" }
+};
+var quickVerticalAlignStyles = {
+  bottom: "flex-end",
+  middle: "center",
+  top: "flex-start"
+};
+var canvasSelectionCss = `
+  .gjs-selected,
+  [data-gjs-highlightable].gjs-selected {
+    outline-color: #c7643d !important;
+    outline-width: 2px !important;
+  }
+
+  .gjs-hovered,
+  [data-gjs-highlightable].gjs-hovered {
+    outline-color: #c7643d !important;
+  }
+`;
+var isQuickHorizontalAlign = (value) => value === "center" || value === "left" || value === "right";
+var isQuickVerticalAlign = (value) => value === "bottom" || value === "middle" || value === "top";
+var getStyleString = (style, property) => {
+  const value = style[property];
+  return typeof value === "string" ? value : "";
+};
+var parseOrionBlockAttribute = (value) => {
+  const decoded = decodeHtmlAttribute3(value);
+  if (!decoded) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(decoded);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+};
+var serializeOrionBlockAttribute = (block) => JSON.stringify(block);
+var readNestedRecord = (value, key) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return {};
+  }
+  const nested = value[key];
+  return nested && typeof nested === "object" && !Array.isArray(nested) ? nested : {};
+};
+var firstString = (...values) => {
+  for (const value of values) {
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value.trim();
+    }
+  }
+  return "";
+};
+var normalizeCssSizeValue = (value) => {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  return /^-?\d*\.?\d+(px|pt|rem|em|%)?$/.test(trimmed) || trimmed === "normal" ? trimmed : "";
+};
+var normalizeCssColorValue = (value) => {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  return trimmed && trimmed !== "none" ? trimmed : "";
+};
+var getStyleColorValue = (style, property) => normalizeCssColorValue(
+  style[property] || style[property.replace(/-([a-z])/g, (_, char) => char.toUpperCase())]
+);
+var normalizeFontFamilyValue = (value) => {
+  if (typeof value !== "string" || !value.trim()) {
+    return "";
+  }
+  const trimmed = value.trim();
+  const normalized = trimmed.replace(/["']/g, "").toLowerCase();
+  if (normalized === "inherit") {
+    return "inherit";
+  }
+  if (normalized.includes("caveat") || normalized.includes("brush script")) {
+    return '"Caveat", "Brush Script MT", cursive';
+  }
+  if (normalized.includes("georgia")) {
+    return 'Georgia, "Times New Roman", serif';
+  }
+  if (normalized.includes("times new roman") && !normalized.includes("georgia")) {
+    return '"Times New Roman", Times, serif';
+  }
+  if (normalized.includes("arial") || normalized.includes("helvetica")) {
+    return "Arial, Helvetica, sans-serif";
+  }
+  if (normalized.includes("inter") || normalized.includes("segoe ui") || normalized.includes("system-ui")) {
+    return 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+  }
+  return trimmed;
+};
+var normalizeFontWeightValue = (value) => {
+  if (typeof value !== "string" && typeof value !== "number") {
+    return "";
+  }
+  const trimmed = String(value).trim();
+  return /^(normal|bold|bolder|lighter|[1-9]00)$/.test(trimmed) ? trimmed : "";
+};
+var normalizeStyleTextAlignment = (value) => value === "center" || value === "left" || value === "right" ? value : "";
+var typographyKey = (kind, property) => `${kind}${property}`;
+var readStylePanelValue = (property) => {
+  const panel = document.getElementById("orion-builder-v2-styles");
+  const control = panel?.querySelector(`.gjs-sm-property__${CSS.escape(property)}`);
+  return control || null;
+};
+var readStylePanelLength = (property) => {
+  const control = readStylePanelValue(property);
+  const value = control?.querySelector("input")?.value.trim() || "";
+  const unit = control?.querySelector("select")?.value.trim() || "";
+  if (!value) {
+    return "";
+  }
+  if (value === "normal") {
+    return value;
+  }
+  return `${value}${unit}`;
+};
+var readStylePanelSelect = (property) => (readStylePanelValue(property)?.querySelector("select")?.value || "").trim();
+var readStylePanelInput = (property) => (readStylePanelValue(property)?.querySelector("input")?.value || "").trim();
+var readStylePanelColor = (property) => {
+  const control = readStylePanelValue(property);
+  const inputValue = (control?.querySelector("input")?.value || "").trim();
+  if (inputValue && inputValue !== "none") {
+    return inputValue;
+  }
+  const swatchColor = (control?.querySelector(".gjs-field-color-picker")?.style.backgroundColor || "").trim();
+  return swatchColor;
+};
+var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
+var hasExplicitHorizontalAlign = (block) => {
+  const settings = readNestedRecord(block, "settings");
+  const typography = readNestedRecord(settings, "typography");
+  return Boolean(
+    firstString(
+      block.horizontalAlign,
+      block.textHeadingAlign,
+      block.textBodyAlign,
+      typography.headingAlign,
+      typography.bodyAlign
+    )
+  );
+};
+var hasExplicitVerticalAlign = (block) => Boolean(firstString(block.verticalAlign));
+var inferComponentHorizontalAlign = (attributes, block) => {
+  const componentType = String(attributes["data-orion-component"] || "");
+  const settings = readNestedRecord(block, "settings");
+  const typography = readNestedRecord(settings, "typography");
+  const blockType = firstString(block.blockType, componentType);
+  const variant = firstString(block.variant, attributes["data-orion-variant"]);
+  const inferred = firstString(
+    block.horizontalAlign,
+    block.textHeadingAlign,
+    block.textBodyAlign,
+    attributes["data-orion-horizontal-align"],
+    variant === "quoteBanner" ? "" : typography.headingAlign,
+    variant === "quoteBanner" ? "" : typography.bodyAlign
+  );
+  if (isQuickHorizontalAlign(inferred)) {
+    return inferred;
+  }
+  if (componentType === "xoHero" || componentType === "xoCta" || componentType === "xoRichText" || blockType === "cta" || blockType === "richText" || variant === "centered" || variant === "quoteBanner") {
+    return "center";
+  }
+  return "left";
+};
+var inferComponentVerticalAlign = (attributes, block) => {
+  const componentType = String(attributes["data-orion-component"] || "");
+  const blockType = firstString(block.blockType, componentType);
+  const variant = firstString(block.variant, attributes["data-orion-variant"]);
+  const inferred = firstString(block.verticalAlign, attributes["data-orion-vertical-align"]);
+  if (isQuickVerticalAlign(inferred)) {
+    return inferred;
+  }
+  if (componentType === "xoHero" || componentType === "xoCta" || componentType === "xoRichText" || blockType === "cta" || blockType === "richText" || variant === "quoteBanner") {
+    return "middle";
+  }
+  return "top";
+};
+var readQuickLayoutState = (component) => {
+  const style = component?.getStyle?.() || {};
+  const attributes = component?.getAttributes?.() || {};
+  const orionBlock = parseOrionBlockAttribute(attributes["data-orion-block"]);
+  const display = getStyleString(style, "display");
+  const gridColumns = getStyleString(style, "grid-template-columns");
+  const flexDirection = getStyleString(style, "flex-direction");
+  const textAlign = getStyleString(style, "text-align");
+  const placeItems = getStyleString(style, "place-items");
+  const padding = getStyleString(style, "padding");
+  const position = getStyleString(style, "position");
+  const justifyContent = getStyleString(style, "justify-content");
+  const alignItems = getStyleString(style, "align-items");
+  const layout = display === "none" ? "natural" : gridColumns.includes("repeat(3") ? "three-column" : gridColumns.includes("repeat(2") ? "two-column" : display === "flex" && flexDirection !== "column" ? "row" : placeItems === "center" || position === "relative" ? "overlay" : textAlign === "center" ? "centered" : display === "block" ? "stacked" : "natural";
+  const spacing = padding.includes("96px") ? "spacious" : padding.includes("32px") ? "compact" : "medium";
+  const storedHorizontalAlign = attributes["data-orion-horizontal-align"];
+  const storedVerticalAlign = attributes["data-orion-vertical-align"];
+  const inferredHorizontalAlign = inferComponentHorizontalAlign(attributes, orionBlock);
+  const inferredVerticalAlign = inferComponentVerticalAlign(attributes, orionBlock);
+  const horizontalAlign = isQuickHorizontalAlign(storedHorizontalAlign) && hasExplicitHorizontalAlign(orionBlock) ? storedHorizontalAlign : textAlign === "right" || justifyContent === "flex-end" ? "right" : textAlign === "center" || justifyContent === "center" ? "center" : inferredHorizontalAlign;
+  const verticalAlign = isQuickVerticalAlign(storedVerticalAlign) && hasExplicitVerticalAlign(orionBlock) ? storedVerticalAlign : alignItems === "flex-end" ? "bottom" : alignItems === "center" || placeItems === "center" ? "middle" : inferredVerticalAlign;
+  return {
+    hidden: display === "none",
+    horizontalAlign,
+    layout,
+    spacing,
+    sticky: position === "sticky" || position === "fixed",
+    verticalAlign
+  };
+};
+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 lastSelectedComponentRef = (0, import_react.useRef)(null);
+  const colorPickerAnchorRef = (0, import_react.useRef)(null);
+  const sidebarPointerActiveRef = (0, import_react.useRef)(false);
+  const stylePanelEditActiveRef = (0, import_react.useRef)(false);
+  const historyRestoreActiveRef = (0, import_react.useRef)(false);
+  const stylePanelHistoryBeforeRef = (0, import_react.useRef)(null);
+  const lastComponentSnapshotRef = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
+  const customUndoStackRef = (0, import_react.useRef)([]);
+  const customRedoStackRef = (0, import_react.useRef)([]);
+  const syncingOrionBlockStylesRef = (0, import_react.useRef)(false);
+  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 [quickLayoutState, setQuickLayoutState] = (0, import_react.useState)(() => readQuickLayoutState(null));
+  const [selectedDevice, setSelectedDevice] = (0, import_react.useState)("desktop");
+  const [detailedLayoutControlState, setDetailedLayoutControlState] = (0, import_react.useState)(
+    () => readDetailedLayoutControlState(null)
+  );
+  const [saving, setSaving] = (0, import_react.useState)(null);
+  const [saveMessage, setSaveMessage] = (0, import_react.useState)("");
+  const [selectionSummary, setSelectionSummary] = (0, import_react.useState)(null);
+  const [openInspectorPanels, setOpenInspectorPanels] = (0, import_react.useState)({});
+  const [openSidebarPanels, setOpenSidebarPanels] = (0, import_react.useState)({});
+  const [validationIssues, setValidationIssues] = (0, import_react.useState)([]);
+  const editorPageBasePath = initialData?.meta?.editorPageBasePath || "/admin/pages";
+  const pageTree = initialData?.meta?.pageTree || [];
+  const role = initialData?.meta?.permissions?.role || "client";
+  const canUseDeveloperControls = role === "developer";
+  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 getCurrentStyleTarget = () => selectedComponentRef.current || lastSelectedComponentRef.current || (editorRef.current?.getSelected?.() || null);
+  const findOrionBlockByElement = (element) => {
+    const target = element?.closest("[data-orion-block]");
+    const targetID = target?.id || "";
+    if (!targetID) {
+      return null;
+    }
+    const editor = editorRef.current;
+    const wrapper = editor?.DomComponents?.getWrapper?.() || null;
+    const component = wrapper?.find?.(`#${CSS.escape(targetID)}`)?.[0] || null;
+    return Object.keys(parseOrionBlockAttribute(component?.getAttributes?.()?.["data-orion-block"])).length > 0 ? component : null;
+  };
+  const findOrionBlockAncestor = (component) => {
+    let current = component;
+    const visited = /* @__PURE__ */ new Set();
+    while (current && !visited.has(current)) {
+      visited.add(current);
+      if (Object.keys(parseOrionBlockAttribute(current.getAttributes?.()?.["data-orion-block"])).length > 0) {
+        return current;
+      }
+      current = current.parent?.() || null;
+    }
+    return null;
+  };
+  const findSelectedCanvasOrionBlock = () => {
+    const editor = editorRef.current;
+    const wrapper = editor?.DomComponents?.getWrapper?.() || null;
+    const candidates = wrapper?.find?.("[data-orion-block]") || [];
+    return candidates.find((candidate) => {
+      const element = candidate.getEl?.();
+      return Boolean(
+        element?.classList.contains("gjs-selected") || element?.matches("[data-gjs-highlightable].gjs-selected, .gjs-selected")
+      );
+    }) || null;
+  };
+  const getCurrentOrionBlockTarget = (component = getCurrentStyleTarget()) => {
+    const ancestor = findOrionBlockAncestor(component);
+    if (ancestor) {
+      return ancestor;
+    }
+    const canvasSelected = findSelectedCanvasOrionBlock();
+    if (canvasSelected) {
+      return canvasSelected;
+    }
+    const editor = editorRef.current;
+    const selected = editor?.getSelected?.() || null;
+    const selectedAncestor = findOrionBlockAncestor(selected);
+    if (selectedAncestor) {
+      return selectedAncestor;
+    }
+    const selectedID = firstString(selected?.getAttributes?.()?.id, component?.getAttributes?.()?.id);
+    const wrapper = editor?.DomComponents?.getWrapper?.() || null;
+    if (!wrapper) {
+      return component || selected || null;
+    }
+    const candidates = [
+      ...selectedID ? wrapper.find?.(`#${selectedID}`) || [] : [],
+      ...wrapper.find?.("[data-orion-block]") || []
+    ];
+    return candidates.find(
+      (candidate) => Object.keys(parseOrionBlockAttribute(candidate.getAttributes?.()?.["data-orion-block"])).length > 0
+    ) || component || selected || null;
+  };
+  const selectStyleManagerTarget = (component) => {
+    if (!component) {
+      return;
+    }
+    const editor = editorRef.current;
+    editor?.StyleManager?.select?.(component);
+  };
+  const updateSelectedItems = (updater) => {
+    const component = getCurrentOrionBlockTarget();
+    if (!component) {
+      return;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const currentItems = parseItemsJson(attrs["data-orion-items-json"]);
+    const nextItems = updater(currentItems);
+    const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+    component.addAttributes?.({
+      "data-orion-items-json": JSON.stringify(nextItems),
+      ...Object.keys(block).length > 0 ? {
+        "data-orion-block": serializeOrionBlockAttribute({
+          ...block,
+          items: nextItems
+        })
+      } : {}
+    });
+    rememberComponentSnapshot(component);
+    setSelectionSummary(summarizeSelectedComponent(component));
+  };
+  const refreshSelectedState = (component) => {
+    setSelectionSummary(summarizeSelectedComponent(component));
+    setQuickLayoutState(readQuickLayoutState(component));
+    setDetailedLayoutControlState(readDetailedLayoutControlState(component));
+    window.requestAnimationFrame(() => decorateBuilderSettingHelp());
+  };
+  const applySelectedStyle = (style) => {
+    const component = selectedComponentRef.current;
+    if (!component) {
+      return;
+    }
+    component.addStyle?.(style);
+    rememberComponentSnapshot(component);
+    refreshSelectedState(component);
+  };
+  const applySelectedStyleAndAttributes = (style, attributes) => {
+    const component = selectedComponentRef.current;
+    if (!component) {
+      return;
+    }
+    component.addStyle?.(style);
+    component.addAttributes?.(attributes);
+    rememberComponentSnapshot(component);
+    refreshSelectedState(component);
+  };
+  const updateSelectedOrionBlock = (updates) => {
+    const component = selectedComponentRef.current;
+    if (!component) {
+      return;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+    if (Object.keys(block).length === 0) {
+      return;
+    }
+    component.addAttributes?.({
+      "data-orion-block": serializeOrionBlockAttribute({
+        ...block,
+        ...updates
+      })
+    });
+    rememberComponentSnapshot(component);
+  };
+  const syncSelectedTypographyStyleToOrionBlock = (component = selectedComponentRef.current) => {
+    if (!component) {
+      return;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+    if (Object.keys(block).length === 0) {
+      return;
+    }
+    const kind = attrs["data-orion-active-text-kind"] === "heading" ? "heading" : "body";
+    const style = component.getStyle?.() || {};
+    const settings = readNestedRecord(block, "settings");
+    const typography = readNestedRecord(settings, "typography");
+    const nextTypography = { ...typography };
+    const fontFamily = normalizeFontFamilyValue(style["font-family"]);
+    const fontSize = normalizeCssSizeValue(style["font-size"]);
+    const fontWeight = normalizeFontWeightValue(style["font-weight"]);
+    const lineHeight = normalizeCssSizeValue(style["line-height"]);
+    const letterSpacing = normalizeCssSizeValue(style["letter-spacing"]);
+    const color = normalizeCssColorValue(style.color);
+    const textAlign = normalizeStyleTextAlignment(style["text-align"]);
+    if (fontFamily) {
+      nextTypography[typographyKey(kind, "FontFamily")] = fontFamily;
+    }
+    if (fontSize) {
+      nextTypography[typographyKey(kind, "FontSize")] = fontSize;
+    }
+    if (fontWeight) {
+      nextTypography[typographyKey(kind, "FontWeight")] = fontWeight;
+    }
+    if (lineHeight) {
+      nextTypography[typographyKey(kind, "LineHeight")] = lineHeight;
+    }
+    if (letterSpacing) {
+      nextTypography[typographyKey(kind, "LetterSpacing")] = letterSpacing;
+    }
+    if (color) {
+      nextTypography[typographyKey(kind, "Color")] = color;
+    }
+    if (textAlign) {
+      nextTypography[typographyKey(kind, "Align")] = textAlign;
+      if (kind === "heading") {
+        block.textHeadingAlign = textAlign;
+      } else {
+        block.textBodyAlign = textAlign;
+      }
+      block.horizontalAlign = textAlign;
+    }
+    component.addAttributes?.({
+      "data-orion-block": serializeOrionBlockAttribute({
+        ...block,
+        settings: {
+          ...settings,
+          typography: nextTypography
+        }
+      })
+    });
+  };
+  const syncSelectedDecorationStyleToOrionBlock = (component = selectedComponentRef.current) => {
+    const target = getCurrentOrionBlockTarget(component);
+    if (!target) {
+      return;
+    }
+    const attrs = target.getAttributes?.() || {};
+    const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+    if (Object.keys(block).length === 0) {
+      return;
+    }
+    const backgroundColor = getStyleColorValue(component?.getStyle?.() || target.getStyle?.() || {}, "background-color");
+    if (!backgroundColor) {
+      return;
+    }
+    target.addAttributes?.({
+      "data-orion-background-color": backgroundColor,
+      "data-orion-block": serializeOrionBlockAttribute({
+        ...block,
+        backgroundColor
+      })
+    });
+  };
+  const syncSelectedTypographyControlsToOrionBlock = (component = selectedComponentRef.current) => {
+    if (!component) {
+      return;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+    if (Object.keys(block).length === 0) {
+      return;
+    }
+    const kind = attrs["data-orion-active-text-kind"] === "heading" ? "heading" : "body";
+    const settings = readNestedRecord(block, "settings");
+    const typography = readNestedRecord(settings, "typography");
+    const nextTypography = { ...typography };
+    const nextStyle = {};
+    const fontFamilyControl = readStylePanelValue("font-family");
+    const fontFamily = normalizeFontFamilyValue(readStylePanelSelect("font-family"));
+    const fontSize = normalizeCssSizeValue(readStylePanelLength("font-size"));
+    const fontWeight = normalizeFontWeightValue(readStylePanelSelect("font-weight"));
+    const lineHeight = normalizeCssSizeValue(readStylePanelLength("line-height"));
+    const letterSpacing = normalizeCssSizeValue(readStylePanelLength("letter-spacing"));
+    const color = normalizeCssColorValue(readStylePanelInput("color"));
+    const textAlign = normalizeStyleTextAlignment(readStylePanelRadio("text-align"));
+    if (fontFamilyControl) {
+      if (fontFamily) {
+        nextTypography[typographyKey(kind, "FontFamily")] = fontFamily;
+        nextStyle["font-family"] = fontFamily;
+      } else {
+        delete nextTypography[typographyKey(kind, "FontFamily")];
+        nextStyle["font-family"] = "";
+        component.removeStyle?.("font-family");
+      }
+    }
+    if (fontSize) {
+      nextTypography[typographyKey(kind, "FontSize")] = fontSize;
+      nextStyle["font-size"] = fontSize;
+    }
+    if (fontWeight) {
+      nextTypography[typographyKey(kind, "FontWeight")] = fontWeight;
+      nextStyle["font-weight"] = fontWeight;
+    }
+    if (lineHeight) {
+      nextTypography[typographyKey(kind, "LineHeight")] = lineHeight;
+      nextStyle["line-height"] = lineHeight;
+    }
+    if (letterSpacing) {
+      nextTypography[typographyKey(kind, "LetterSpacing")] = letterSpacing;
+      nextStyle["letter-spacing"] = letterSpacing;
+    }
+    if (color) {
+      nextTypography[typographyKey(kind, "Color")] = color;
+      nextStyle.color = color;
+    }
+    if (textAlign) {
+      nextTypography[typographyKey(kind, "Align")] = textAlign;
+      nextStyle["text-align"] = textAlign;
+      if (kind === "heading") {
+        block.textHeadingAlign = textAlign;
+      } else {
+        block.textBodyAlign = textAlign;
+      }
+      block.horizontalAlign = textAlign;
+    }
+    if (Object.keys(nextStyle).length > 0) {
+      component.addStyle?.(nextStyle);
+    }
+    component.addAttributes?.({
+      "data-orion-block": serializeOrionBlockAttribute({
+        ...block,
+        settings: {
+          ...settings,
+          typography: nextTypography
+        }
+      })
+    });
+  };
+  const syncSelectedDecorationControlsToOrionBlock = (component = selectedComponentRef.current) => {
+    if (historyRestoreActiveRef.current) {
+      return;
+    }
+    const target = getCurrentOrionBlockTarget(component);
+    if (!target) {
+      return;
+    }
+    const attrs = target.getAttributes?.() || {};
+    const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+    if (Object.keys(block).length === 0) {
+      return;
+    }
+    const panelBackgroundColor = normalizeCssColorValue(readStylePanelColor("background-color"));
+    const styleBackgroundColor = getStyleColorValue(component?.getStyle?.() || target.getStyle?.() || {}, "background-color");
+    const backgroundColor = normalizeCssColorValue(panelBackgroundColor === "none" ? "" : panelBackgroundColor) || styleBackgroundColor;
+    if (!backgroundColor) {
+      return;
+    }
+    if (getStyleColorValue(target.getStyle?.() || {}, "background-color") !== backgroundColor) {
+      target.addStyle?.({ "background-color": backgroundColor });
+    }
+    if (component && component !== target && getStyleColorValue(component.getStyle?.() || {}, "background-color") !== backgroundColor) {
+      component.addStyle?.({ "background-color": backgroundColor });
+    }
+    target.addAttributes?.({
+      "data-orion-background-color": backgroundColor,
+      "data-orion-block": serializeOrionBlockAttribute({
+        ...block,
+        backgroundColor
+      })
+    });
+  };
+  const syncAllOrionBlockStylesToAttributes = () => {
+    if (syncingOrionBlockStylesRef.current) {
+      return;
+    }
+    const editor = editorRef.current;
+    const wrapper = editor?.DomComponents?.getWrapper?.() || null;
+    const blocks = wrapper?.find?.("[data-orion-block]") || [];
+    syncingOrionBlockStylesRef.current = true;
+    try {
+      blocks.forEach((component) => {
+        const attrs = component.getAttributes?.() || {};
+        const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+        if (Object.keys(block).length === 0) {
+          return;
+        }
+        const backgroundColor = getStyleColorValue(component.getStyle?.() || {}, "background-color");
+        if (!backgroundColor || normalizeCssColorValue(block.backgroundColor) === backgroundColor && normalizeCssColorValue(attrs["data-orion-background-color"]) === backgroundColor) {
+          return;
+        }
+        component.addAttributes?.({
+          "data-orion-background-color": backgroundColor,
+          "data-orion-block": serializeOrionBlockAttribute({
+            ...block,
+            backgroundColor
+          })
+        });
+      });
+    } finally {
+      syncingOrionBlockStylesRef.current = false;
+    }
+  };
+  const hydrateSelectedTypographyStyleFromOrionBlock = (component) => {
+    if (!component) {
+      return;
+    }
+    const attrs = component.getAttributes?.() || {};
+    const block = parseOrionBlockAttribute(attrs["data-orion-block"]);
+    if (Object.keys(block).length === 0) {
+      return;
+    }
+    const kind = attrs["data-orion-active-text-kind"] === "heading" ? "heading" : "body";
+    const settings = readNestedRecord(block, "settings");
+    const typography = readNestedRecord(settings, "typography");
+    const nextStyle = {};
+    const currentStyle = component.getStyle?.() || {};
+    const fontFamily = normalizeFontFamilyValue(firstString(typography[typographyKey(kind, "FontFamily")], attrs["data-orion-active-font-family"]));
+    const fontSize = firstString(typography[typographyKey(kind, "FontSize")], attrs["data-orion-active-font-size"]);
+    const fontWeight = normalizeFontWeightValue(firstString(typography[typographyKey(kind, "FontWeight")], attrs["data-orion-active-font-weight"]));
+    const lineHeight = firstString(typography[typographyKey(kind, "LineHeight")], attrs["data-orion-active-line-height"]);
+    const letterSpacing = firstString(typography[typographyKey(kind, "LetterSpacing")], attrs["data-orion-active-letter-spacing"]);
+    const color = firstString(typography[typographyKey(kind, "Color")], attrs["data-orion-active-color"]);
+    const textAlign = firstString(typography[typographyKey(kind, "Align")], kind === "heading" ? block.textHeadingAlign : block.textBodyAlign, attrs["data-orion-active-text-align"]);
+    if (fontFamily && !currentStyle["font-family"]) {
+      nextStyle["font-family"] = fontFamily;
+    }
+    if (fontSize && !currentStyle["font-size"]) {
+      nextStyle["font-size"] = fontSize;
+    }
+    if (fontWeight && !currentStyle["font-weight"]) {
+      nextStyle["font-weight"] = fontWeight;
+    }
+    if (lineHeight && !currentStyle["line-height"]) {
+      nextStyle["line-height"] = lineHeight;
+    }
+    if (letterSpacing && letterSpacing !== "normal" && !currentStyle["letter-spacing"]) {
+      nextStyle["letter-spacing"] = letterSpacing;
+    }
+    if (color && !currentStyle.color) {
+      nextStyle.color = color;
+    }
+    if (textAlign && !currentStyle["text-align"]) {
+      nextStyle["text-align"] = textAlign;
+    }
+    if (Object.keys(nextStyle).length > 0) {
+      component.addStyle?.(nextStyle);
+    }
+  };
+  const rehydrateSelectedComponentControls = (component) => {
+    if (!component || component !== selectedComponentRef.current) {
+      return;
+    }
+    hydrateSelectedTypographyStyleFromOrionBlock(component);
+    rememberComponentSnapshot(component);
+    refreshSelectedState(component);
+  };
+  const applyQuickLayout = (layout) => {
+    const nextStyle = quickLayoutStyles[layout];
+    applySelectedStyle({
+      ...nextStyle,
+      ...quickLayoutState.spacing ? { padding: quickSpacingStyles[quickLayoutState.spacing] } : {},
+      ...quickLayoutState.hidden ? { display: "none" } : {},
+      ...quickLayoutState.sticky ? { position: "sticky", top: "0px", "z-index": "10" } : {}
+    });
+  };
+  const applyQuickSpacing = (spacing) => {
+    applySelectedStyle({ padding: quickSpacingStyles[spacing] });
+  };
+  const applyQuickHorizontalAlign = (alignment) => {
+    updateSelectedOrionBlock({
+      horizontalAlign: alignment,
+      textBodyAlign: alignment,
+      textHeadingAlign: alignment
+    });
+    applySelectedStyleAndAttributes(quickHorizontalAlignStyles[alignment], {
+      "data-orion-horizontal-align": alignment
+    });
+  };
+  const applyQuickVerticalAlign = (alignment) => {
+    updateSelectedOrionBlock({
+      verticalAlign: alignment
+    });
+    applySelectedStyleAndAttributes(
+      {
+        "align-items": quickVerticalAlignStyles[alignment],
+        "place-items": "",
+        width: "100%"
+      },
+      {
+        "data-orion-vertical-align": alignment
+      }
+    );
+  };
+  const toggleSticky = () => {
+    applySelectedStyle(
+      quickLayoutState.sticky ? { position: "", top: "", "z-index": "" } : { position: "sticky", top: "0px", "z-index": "10" }
+    );
+  };
+  const toggleHidden = () => {
+    applySelectedStyle(
+      quickLayoutState.hidden ? { display: quickLayoutStyles[quickLayoutState.layout].display || "" } : { display: "none" }
+    );
+  };
+  const toggleInspectorPanel = (panel) => {
+    setOpenInspectorPanels((current) => ({
+      ...current,
+      [panel]: !current[panel]
+    }));
+  };
+  const toggleSidebarPanel = (panel) => {
+    setOpenSidebarPanels((current) => ({
+      ...current,
+      [panel]: !current[panel]
+    }));
+  };
+  const updateHistoryState = (editor) => {
+    const next = {
+      canRedo: customRedoStackRef.current.length > 0 || editor.UndoManager.hasRedo(),
+      canUndo: customUndoStackRef.current.length > 0 || editor.UndoManager.hasUndo()
+    };
+    setHistoryState(next);
+    postToParent({
+      ...next,
+      type: "history-state"
+    });
+  };
+  const snapshotComponent = (component) => {
+    if (!component) {
+      return null;
+    }
+    return {
+      attributes: { ...component.getAttributes?.() || {} },
+      component,
+      style: { ...component.getStyle?.() || {} }
+    };
+  };
+  const rememberComponentSnapshot = (component) => {
+    const snapshot = snapshotComponent(component);
+    if (snapshot) {
+      lastComponentSnapshotRef.current.set(snapshot.component, snapshot);
+    }
+    return snapshot;
+  };
+  const getPreviousComponentSnapshot = (component) => component ? lastComponentSnapshotRef.current.get(component) || snapshotComponent(component) : null;
+  const restoreComponentSnapshot = (snapshot) => {
+    const currentStyle = snapshot.component.getStyle?.() || {};
+    snapshot.component.addStyle?.({
+      ...Object.fromEntries(Object.keys(currentStyle).map((key) => [key, ""])),
+      ...Object.fromEntries(Object.entries(snapshot.style).map(([key, value]) => [key, String(value)]))
+    });
+    snapshot.component.addAttributes?.({ ...snapshot.attributes });
+    selectedComponentRef.current = snapshot.component;
+    lastSelectedComponentRef.current = snapshot.component;
+    editorRef.current?.select?.(snapshot.component);
+    selectStyleManagerTarget(snapshot.component);
+    lastComponentSnapshotRef.current.set(snapshot.component, snapshot);
+    refreshSelectedState(snapshot.component);
+  };
+  const pushCustomHistoryEntry = (before, after) => {
+    if (!before || !after || before.component !== after.component) {
+      return;
+    }
+    if (JSON.stringify(before.style) === JSON.stringify(after.style) && JSON.stringify(before.attributes) === JSON.stringify(after.attributes)) {
+      return;
+    }
+    customUndoStackRef.current.push({ after, before });
+    customRedoStackRef.current = [];
+    lastComponentSnapshotRef.current.set(after.component, after);
+    if (customUndoStackRef.current.length > 100) {
+      customUndoStackRef.current.shift();
+    }
+    if (editorRef.current) {
+      updateHistoryState(editorRef.current);
+    }
+  };
+  const completeHistoryRestore = (editor) => {
+    window.requestAnimationFrame(() => {
+      window.setTimeout(() => {
+        syncAllOrionBlockStylesToAttributes();
+        const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget()) || selectedComponentRef.current;
+        if (selected) {
+          selectedComponentRef.current = selected;
+          lastSelectedComponentRef.current = selected;
+          selectStyleManagerTarget(selected);
+          refreshSelectedState(selected);
+        }
+        updateHistoryState(editor);
+        historyRestoreActiveRef.current = false;
+      }, 120);
+    });
+  };
+  const runHistoryAction = (action) => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+    const customEntry = action === "undo" ? customUndoStackRef.current.pop() : customRedoStackRef.current.pop();
+    if (customEntry) {
+      historyRestoreActiveRef.current = true;
+      restoreComponentSnapshot(action === "undo" ? customEntry.before : customEntry.after);
+      if (action === "undo") {
+        customRedoStackRef.current.push(customEntry);
+      } else {
+        customUndoStackRef.current.push(customEntry);
+      }
+      completeHistoryRestore(editor);
+      return;
+    }
+    historyRestoreActiveRef.current = true;
+    if (action === "undo") {
+      editor.UndoManager.undo();
+    } else {
+      editor.UndoManager.redo();
+    }
+    completeHistoryRestore(editor);
+  };
+  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);
+  };
+  const syncStylePanelInput = (event) => {
+    const target = event.target;
+    if (!target?.closest("#orion-builder-v2-styles")) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
+      return;
+    }
+    stylePanelEditActiveRef.current = true;
+    if (!stylePanelHistoryBeforeRef.current) {
+      stylePanelHistoryBeforeRef.current = snapshotComponent(getCurrentOrionBlockTarget(getCurrentStyleTarget()));
+    }
+    window.setTimeout(() => {
+      const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
+      if (selected) {
+        selectedComponentRef.current = selected;
+        lastSelectedComponentRef.current = selected;
+      }
+      syncSelectedTypographyControlsToOrionBlock(selected);
+      syncSelectedDecorationControlsToOrionBlock(selected);
+      syncAllOrionBlockStylesToAttributes();
+      if (selected) {
+        editorRef.current?.select?.(selected);
+      }
+      refreshSelectedState(getCurrentStyleTarget());
+      pushCustomHistoryEntry(stylePanelHistoryBeforeRef.current, snapshotComponent(selected));
+      stylePanelHistoryBeforeRef.current = null;
+      window.setTimeout(() => {
+        stylePanelEditActiveRef.current = false;
+      }, 120);
+    }, 80);
+  };
+  const syncStylePanelChange = () => {
+    stylePanelEditActiveRef.current = true;
+    if (!stylePanelHistoryBeforeRef.current) {
+      stylePanelHistoryBeforeRef.current = snapshotComponent(getCurrentOrionBlockTarget(getCurrentStyleTarget()));
+    }
+    window.setTimeout(() => {
+      const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
+      if (selected) {
+        selectedComponentRef.current = selected;
+        lastSelectedComponentRef.current = selected;
+      }
+      syncSelectedTypographyControlsToOrionBlock(selected);
+      syncSelectedDecorationControlsToOrionBlock(selected);
+      syncAllOrionBlockStylesToAttributes();
+      if (selected) {
+        editorRef.current?.select?.(selected);
+      }
+      refreshSelectedState(getCurrentStyleTarget());
+      pushCustomHistoryEntry(stylePanelHistoryBeforeRef.current, snapshotComponent(selected));
+      stylePanelHistoryBeforeRef.current = null;
+      window.setTimeout(() => {
+        stylePanelEditActiveRef.current = false;
+      }, 120);
+    }, 80);
+  };
+  (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"
+          },
+          canvasCss: canvasSelectionCss,
+          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: "Detailed layout",
+                open: false,
+                properties: [
+                  "display",
+                  "position",
+                  "top",
+                  "right",
+                  "bottom",
+                  "left",
+                  "width",
+                  "height",
+                  "min-height",
+                  "margin",
+                  "padding",
+                  "flex-direction",
+                  "justify-content",
+                  "align-items",
+                  "gap",
+                  "flex-wrap"
+                ]
+              },
+              {
+                name: "Typography",
+                open: false,
+                properties: [
+                  {
+                    name: "Font family",
+                    property: "font-family",
+                    type: "select",
+                    options: [
+                      { id: "inherit", label: "Inherit" },
+                      { id: "Arial, Helvetica, sans-serif", label: "Arial" },
+                      { id: 'Georgia, "Times New Roman", serif', label: "Georgia" },
+                      { id: '"Times New Roman", Times, serif', label: "Times New Roman" },
+                      { id: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', label: "Inter/System" },
+                      { id: '"Caveat", "Brush Script MT", cursive', label: "Script" }
+                    ]
+                  },
+                  {
+                    name: "Font size",
+                    property: "font-size",
+                    type: "number",
+                    units: ["pt", "px", "rem", "em", "%"]
+                  },
+                  "font-weight",
+                  {
+                    name: "Line height",
+                    property: "line-height",
+                    type: "number",
+                    units: ["pt", "px", "rem", "em", "%", ""]
+                  },
+                  {
+                    name: "Letter spacing",
+                    property: "letter-spacing",
+                    type: "number",
+                    units: ["pt", "px", "em", "rem"]
+                  },
+                  "color",
+                  "text-align"
+                ]
+              },
+              {
+                name: "Decoration",
+                open: false,
+                properties: ["background-color", "background", "border", "border-radius", "box-shadow", "opacity"]
+              }
+            ]
+          },
+          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;
+          refreshSelectedState(selectedComponentRef.current);
+          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;
+          const target = getCurrentOrionBlockTarget(typed) || typed;
+          selectedComponentRef.current = target;
+          lastSelectedComponentRef.current = target;
+          if (target !== typed) {
+            editor.select?.(target);
+          }
+          selectStyleManagerTarget(target);
+          rehydrateSelectedComponentControls(target);
+          window.setTimeout(() => {
+            selectStyleManagerTarget(target);
+            rehydrateSelectedComponentControls(target);
+          }, 120);
+        });
+        editor.on("component:update:attributes", (component) => {
+          if (historyRestoreActiveRef.current) {
+            return;
+          }
+          rehydrateSelectedComponentControls(component);
+        });
+        editor.on("component:deselected", () => {
+          const activeElement = document.activeElement;
+          if (sidebarPointerActiveRef.current || activeElement?.closest("#orion-builder-v2-styles, #orion-builder-v2-traits, .orion-builder-v2-sidebar")) {
+            window.requestAnimationFrame(() => {
+              const selected = selectedComponentRef.current;
+              if (selected) {
+                editor.select?.(selected);
+              }
+              refreshSelectedState(selected);
+            });
+            return;
+          }
+          selectedComponentRef.current = null;
+          refreshSelectedState(null);
+        });
+        const bindCanvasSelectionTracking = () => {
+          const canvasDocument = editor.Canvas?.getDocument?.();
+          if (!canvasDocument) {
+            return;
+          }
+          const trackCanvasSelection = (event) => {
+            const target = findOrionBlockByElement(event.target);
+            if (!target) {
+              return;
+            }
+            selectedComponentRef.current = target;
+            lastSelectedComponentRef.current = target;
+            rememberComponentSnapshot(target);
+            refreshSelectedState(target);
+          };
+          canvasDocument.addEventListener("pointerdown", trackCanvasSelection, true);
+          canvasDocument.addEventListener("click", trackCanvasSelection, true);
+        };
+        bindCanvasSelectionTracking();
+        editor.on("canvas:frame:load", bindCanvasSelectionTracking);
+        editor.on("style:property:update", () => {
+          const selected = getCurrentStyleTarget();
+          if (historyRestoreActiveRef.current) {
+            refreshSelectedState(selected);
+            return;
+          }
+          const historyTarget = getCurrentOrionBlockTarget(selected);
+          const before = getPreviousComponentSnapshot(historyTarget);
+          syncSelectedTypographyStyleToOrionBlock(selected);
+          syncSelectedDecorationStyleToOrionBlock(selected);
+          if (stylePanelEditActiveRef.current) {
+            syncSelectedDecorationControlsToOrionBlock(selected);
+          }
+          window.setTimeout(() => {
+            syncAllOrionBlockStylesToAttributes();
+            pushCustomHistoryEntry(before, snapshotComponent(historyTarget));
+          }, 80);
+          refreshSelectedState(selected);
+        });
+        editor.on("component:styleUpdate:background-color", () => {
+          window.setTimeout(() => {
+            if (historyRestoreActiveRef.current) {
+              return;
+            }
+            syncAllOrionBlockStylesToAttributes();
+          }, 160);
+        });
+        editor.on("style:target", () => {
+          const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
+          if (selected) {
+            selectedComponentRef.current = selected;
+            lastSelectedComponentRef.current = selected;
+            window.setTimeout(() => {
+              if (historyRestoreActiveRef.current) {
+                return;
+              }
+              selectStyleManagerTarget(selected);
+              refreshSelectedState(selected);
+            }, 160);
+          }
+        });
+        setSelectedDevice(editor.getDevice() || "desktop");
+        runValidation(editor);
+        updateHistoryState(editor);
+        decorateBuilderSettingHelp();
+        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 {
+      syncAllOrionBlockStylesToAttributes();
+      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)(() => {
+    decorateBuilderSettingHelp();
+    decorateBuilderColorEyeDroppers();
+    const refreshControls = () => refreshSelectedState(selectedComponentRef.current);
+    const onStylePanelInput = (event) => {
+      const target = event.target;
+      if (target?.closest("#orion-builder-v2-styles")) {
+        const activeElement = document.activeElement;
+        if (!sidebarPointerActiveRef.current && !activeElement?.closest("#orion-builder-v2-styles")) {
+          return;
+        }
+        syncStylePanelChange();
+      }
+    };
+    const onDocumentClick = async (event) => {
+      const target = event.target;
+      const helpTrigger = target?.closest(".orion-builder-v2-help-trigger");
+      if (helpTrigger) {
+        event.preventDefault();
+        event.stopPropagation();
+        const wrapper = helpTrigger.parentElement;
+        const willOpen = !wrapper?.classList.contains("is-builder-help-open");
+        closeBuilderHelpPopovers(wrapper);
+        openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
+        return;
+      }
+      const eyeDropperButton = target?.closest('[data-orion-color-eyedropper="true"]');
+      if (eyeDropperButton) {
+        event.preventDefault();
+        event.stopPropagation();
+        const input = findColorInputForControl(eyeDropperButton);
+        if (input) {
+          try {
+            await openScreenColorPickerForInput(input);
+            refreshControls();
+          } catch {
+          }
+        }
+        return;
+      }
+      closeBuilderHelpPopovers();
+      const colorAnchor = target?.closest(".gjs-field-colorp, .gjs-field-colorp-c, .gjs-field-color-picker");
+      if (colorAnchor) {
+        colorPickerAnchorRef.current = colorAnchor.closest(".gjs-field-colorp") || colorAnchor;
+        positionColorPickerFromAnchor(colorPickerAnchorRef.current);
+        window.setTimeout(() => positionColorPickerFromAnchor(colorPickerAnchorRef.current), 80);
+      }
+    };
+    const onDocumentKeydown = (event) => {
+      const target = event.target;
+      const helpTrigger = target?.closest(".orion-builder-v2-help-trigger");
+      if (!helpTrigger || event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      const wrapper = helpTrigger.parentElement;
+      const willOpen = !wrapper?.classList.contains("is-builder-help-open");
+      closeBuilderHelpPopovers(wrapper);
+      openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
+    };
+    const observer = new MutationObserver(() => {
+      decorateBuilderSettingHelp();
+      decorateBuilderColorEyeDroppers();
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    document.addEventListener("change", refreshControls);
+    document.addEventListener("change", onStylePanelInput, true);
+    document.addEventListener("click", onDocumentClick, true);
+    document.addEventListener("input", refreshControls);
+    document.addEventListener("input", onStylePanelInput, true);
+    document.addEventListener("keydown", onDocumentKeydown, true);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("change", refreshControls);
+      document.removeEventListener("change", onStylePanelInput, true);
+      document.removeEventListener("click", onDocumentClick, true);
+      document.removeEventListener("input", refreshControls);
+      document.removeEventListener("input", onStylePanelInput, true);
+      document.removeEventListener("keydown", onDocumentKeydown, true);
+    };
+  }, []);
+  (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") {
+        runHistoryAction("undo");
+        return;
+      }
+      if (data.type === "redo") {
+        runHistoryAction("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";
+  const renderInspectorPanel = (panel, title, children) => {
+    const isOpen = Boolean(openInspectorPanels[panel]);
+    const panelContentID = `orion-builder-v2-inspector-panel-${panel}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `orion-builder-v2-panel orion-builder-v2-collapsible-panel ${isOpen ? "is-open" : "is-collapsed"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          "aria-controls": panelContentID,
+          "aria-expanded": isOpen,
+          className: "orion-builder-v2-panel-toggle",
+          onClick: () => toggleInspectorPanel(panel),
+          type: "button",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "orion-builder-v2-panel-toggle-icon", "aria-hidden": "true", children: isOpen ? "\u2212" : "+" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-panel-body", hidden: !isOpen, id: panelContentID, children })
+    ] });
+  };
+  const renderSidebarPanel = (panel, title, children) => {
+    const isOpen = Boolean(openSidebarPanels[panel]);
+    const panelContentID = `orion-builder-v2-sidebar-panel-${panel}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `orion-builder-v2-panel orion-builder-v2-collapsible-panel ${isOpen ? "is-open" : "is-collapsed"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          "aria-controls": panelContentID,
+          "aria-expanded": isOpen,
+          className: "orion-builder-v2-panel-toggle",
+          onClick: () => toggleSidebarPanel(panel),
+          type: "button",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "orion-builder-v2-panel-toggle-icon", "aria-hidden": "true", children: isOpen ? "\u2212" : "+" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-panel-body", hidden: !isOpen, id: panelContentID, children })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `orion-builder-v2-editor ${detailedLayoutClassNames(detailedLayoutControlState)}`,
+      onPointerDownCapture: (event) => {
+        const target = event.target;
+        sidebarPointerActiveRef.current = Boolean(
+          target?.closest("#orion-builder-v2-styles, #orion-builder-v2-traits, .orion-builder-v2-sidebar, .orion-builder-v2-inspector")
+        );
+      },
+      onPointerUpCapture: () => {
+        window.setTimeout(() => {
+          sidebarPointerActiveRef.current = false;
+        }, 0);
+      },
+      onChangeCapture: syncStylePanelInput,
+      onInputCapture: syncStylePanelInput,
+      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: () => {
+                  runHistoryAction("undo");
+                },
+                type: "button",
+                children: "Undo"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "orion-builder-v2-tool",
+                disabled: !historyState.canRedo,
+                onClick: () => {
+                  runHistoryAction("redo");
+                },
+                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: [
+          renderSidebarPanel("pages", "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.jsx)(
+            "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 })
+            },
+            page.id
+          )) })),
+          renderSidebarPanel("blocks", "Blocks", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__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" })
+          ] })),
+          renderSidebarPanel("validation", "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: [
+          renderInspectorPanel("section", selectionSummary ? selectionSummary.label : "No section selected", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__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 ? renderInspectorPanel("items", "Items", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__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.jsxs)("label", { className: "orion-builder-v2-item-title", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Title" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    "aria-label": `Item ${item.index + 1} title`,
+                    onChange: (event) => {
+                      const title = event.target.value;
+                      updateSelectedItems(
+                        (items) => items.map(
+                          (currentItem, index) => index === item.index ? {
+                            ...currentItem,
+                            title
+                          } : currentItem
+                        )
+                      );
+                    },
+                    type: "text",
+                    value: 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,
+          renderInspectorPanel("design", "Design", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Use quick controls for common layout changes, then fine tune exact values in Detailed design below." }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-quick-layout", "aria-label": "Quick layout controls", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { children: [
+                  "Layout",
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Choose a common arrangement for the selected section, such as stacked, row, columns, centered, or overlay.", label: "Layout" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-choice-grid", children: quickLayoutOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    "aria-pressed": quickLayoutState.layout === option.value,
+                    className: "orion-builder-v2-choice",
+                    disabled: !selectionSummary,
+                    onClick: () => applyQuickLayout(option.value),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        option.label,
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: option.description, label: option.label })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: option.description })
+                    ]
+                  },
+                  option.value
+                )) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { children: [
+                  "Alignment",
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Control where content sits inside the selected section horizontally and vertically.", label: "Alignment" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-segmented", role: "group", "aria-label": "Horizontal alignment", children: horizontalAlignOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    "aria-pressed": quickLayoutState.horizontalAlign === option.value,
+                    disabled: !selectionSummary,
+                    onClick: () => applyQuickHorizontalAlign(option.value),
+                    type: "button",
+                    children: [
+                      option.label,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: `${option.label} aligns content horizontally within the selected section.`, label: option.label })
+                    ]
+                  },
+                  option.value
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-segmented", role: "group", "aria-label": "Vertical alignment", children: verticalAlignOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    "aria-pressed": quickLayoutState.verticalAlign === option.value,
+                    disabled: !selectionSummary,
+                    onClick: () => applyQuickVerticalAlign(option.value),
+                    type: "button",
+                    children: [
+                      option.label,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: `${option.label} aligns content vertically within the selected section.`, label: option.label })
+                    ]
+                  },
+                  option.value
+                )) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-control-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { children: [
+                  "Spacing",
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Set a quick inside-padding preset for the selected section.", label: "Spacing" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-segmented", role: "group", "aria-label": "Section spacing", children: quickSpacingOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    "aria-pressed": quickLayoutState.spacing === option.value,
+                    disabled: !selectionSummary,
+                    onClick: () => applyQuickSpacing(option.value),
+                    type: "button",
+                    children: [
+                      option.label,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: `${option.label} spacing changes the selected section's inside padding.`, label: option.label })
+                    ]
+                  },
+                  option.value
+                )) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-toggle-list", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    "aria-pressed": quickLayoutState.sticky,
+                    className: "orion-builder-v2-toggle",
+                    disabled: !selectionSummary,
+                    onClick: toggleSticky,
+                    type: "button",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        "Sticky section",
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Keep this selected section visible while visitors scroll past it.", label: "Sticky section" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: "Keep this section pinned while scrolling." })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    "aria-pressed": quickLayoutState.hidden,
+                    className: "orion-builder-v2-toggle",
+                    disabled: !selectionSummary,
+                    onClick: toggleHidden,
+                    type: "button",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+                        "Hide section",
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpTrigger, { help: "Hide this selected section on the page without deleting its content.", label: "Hide section" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: "Keep it saved but do not show it on the page." })
+                    ] })
+                  }
+                )
+              ] })
+            ] })
+          ] })),
+          renderInspectorPanel("detailed-design", "Detailed design", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+              "Fine tune exact spacing, color, typography, borders, size, and layout values for the selected element.",
+              canUseDeveloperControls ? " Developer access is active." : ""
+            ] }),
+            /* @__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
+});