@orion-studios/payload-studio 0.6.0-beta.45 → 0.6.0-beta.47

package/dist/builder-v2/client.d.mts

@@ -3,11 +3,16 @@ import type { FC } from 'react'
 export type {
   BuilderV2EditorInitialData,
   BuilderV2EditorProps,
+  BuilderV2PageTreeNode,
+  BuilderV2PermissionSet,
   BuilderV2ProjectAdapter,
   BuilderV2ProjectComponentDefinition,
   BuilderV2RuntimeComponent,
   BuilderV2RuntimeComponentProps,
   BuilderV2TraitDefinition,
+  BuilderV2ThemeTokens,
+  BuilderV2ValidationIssue,
+  BuilderV2VersionSnapshot,
 } from './types'
 
 export declare const GrapesPageEditor: FC<import('./types').BuilderV2EditorProps>

package/dist/builder-v2/client.d.ts

@@ -3,11 +3,16 @@ import type { FC } from 'react'
 export type {
   BuilderV2EditorInitialData,
   BuilderV2EditorProps,
+  BuilderV2PageTreeNode,
+  BuilderV2PermissionSet,
   BuilderV2ProjectAdapter,
   BuilderV2ProjectComponentDefinition,
   BuilderV2RuntimeComponent,
   BuilderV2RuntimeComponentProps,
   BuilderV2TraitDefinition,
+  BuilderV2ThemeTokens,
+  BuilderV2ValidationIssue,
+  BuilderV2VersionSnapshot,
 } from './types'
 
 export declare const GrapesPageEditor: FC<import('./types').BuilderV2EditorProps>

package/dist/builder-v2/client.js

@@ -256,6 +256,7 @@ var allowedIframeHosts = [
   "calendar.google.com",
   "calendly.com",
   "player.vimeo.com",
+  "www.google.com",
   "www.youtube.com",
   "youtube.com"
 ];
@@ -281,10 +282,127 @@ var sanitizeBuilderCss = (value) => {
   }
   return value.replace(/@import\s+[^;]+;/gi, "").replace(/expression\s*\(/gi, "").replace(/javascript\s*:/gi, "");
 };
+var scopeSelector = (selector, scope) => selector.split(",").map((part) => {
+  const trimmed = part.trim();
+  if (!trimmed || trimmed.startsWith(scope) || trimmed.startsWith("@")) {
+    return trimmed;
+  }
+  if (/^(html|body|:root)\b/i.test(trimmed)) {
+    return trimmed.replace(/^(html|body|:root)\b/i, scope);
+  }
+  return `${scope} ${trimmed}`;
+}).filter(Boolean).join(", ");
+var scopeBuilderCss = (value, scope = ".orion-builder-v2-runtime") => {
+  const css = sanitizeBuilderCss(value);
+  if (!css) {
+    return "";
+  }
+  let output = "";
+  let cursor = 0;
+  const rulePattern = /([^{}]+)\{/g;
+  let match;
+  while ((match = rulePattern.exec(css)) !== null) {
+    const selectorStart = match.index;
+    const selector = match[1];
+    output += css.slice(cursor, selectorStart);
+    const trimmedSelector = selector.trim();
+    if (trimmedSelector.startsWith("@keyframes") || trimmedSelector.startsWith("@font-face") || trimmedSelector.startsWith("@page")) {
+      output += `${selector}{`;
+    } else if (trimmedSelector.startsWith("@media") || trimmedSelector.startsWith("@supports")) {
+      output += `${selector}{`;
+    } else {
+      output += `${scopeSelector(selector, scope)} {`;
+    }
+    cursor = rulePattern.lastIndex;
+  }
+  output += css.slice(cursor);
+  return output;
+};
+
+// src/builder-v2/validation.ts
+var hasMatch = (value, pattern) => pattern.test(value);
+var validateBuilderV2Output = (input) => {
+  const html = typeof input.html === "string" ? input.html : "";
+  const css = typeof input.css === "string" ? input.css : "";
+  const issues = [];
+  if (!html.trim()) {
+    issues.push({
+      code: "empty-page",
+      message: "This page has no rendered content.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (!hasMatch(html, /<h1\b/i)) {
+    issues.push({
+      code: "missing-h1",
+      message: "Add one H1 so the published page has a clear primary heading.",
+      path: "compiledHtml",
+      severity: "warning"
+    });
+  }
+  if (hasMatch(html, /\son[a-z]+\s*=/i)) {
+    issues.push({
+      code: "inline-event-handler",
+      message: "Inline event handlers are not allowed in published builder HTML.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (hasMatch(html, /<(script|object|embed)\b/i)) {
+    issues.push({
+      code: "unsafe-element",
+      message: "Script, object, and embed tags are not allowed in builder content.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (hasMatch(html, /\b(?:href|src)=["']\s*javascript:/i)) {
+    issues.push({
+      code: "unsafe-url",
+      message: "Links and media cannot use javascript URLs.",
+      path: "compiledHtml",
+      severity: "error"
+    });
+  }
+  if (hasMatch(css, /@import\s/i)) {
+    issues.push({
+      code: "css-import",
+      message: "CSS imports are removed at publish time. Use the site font and theme managers instead.",
+      path: "compiledCss",
+      severity: "warning"
+    });
+  }
+  if (hasMatch(css, /position\s*:\s*fixed/i)) {
+    issues.push({
+      code: "fixed-position",
+      message: "Fixed positioning can cover site navigation or dialogs. Review this before publishing.",
+      path: "compiledCss",
+      severity: "warning"
+    });
+  }
+  return issues;
+};
+var hasBlockingBuilderV2Issues = (issues) => issues.some((issue) => issue.severity === "error");
 
 // src/builder-v2/editor/defaultBlocks.ts
 var registerOrionBuilderV2Blocks = (editor) => {
   const blocks = editor.Blocks;
+  blocks.add("orion-nav", {
+    category: "Chrome",
+    content: `
+      <header class="orion-builder-v2-nav">
+        <a class="orion-builder-v2-logo" href="/">Brand</a>
+        <nav aria-label="Primary">
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+          <a href="/contact">Contact</a>
+        </nav>
+        <a class="orion-builder-v2-button" href="/contact">Start</a>
+      </header>
+    `,
+    label: "Nav"
+  });
   blocks.add("orion-section", {
     category: "Layout",
     content: `
@@ -324,6 +442,89 @@ var registerOrionBuilderV2Blocks = (editor) => {
     `,
     label: "Columns"
   });
+  blocks.add("orion-card-grid", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Featured</p>
+          <h2>Cards that explain the offer</h2>
+          <div class="orion-builder-v2-grid is-3">
+            <article class="orion-builder-v2-card"><h3>Service One</h3><p>Describe the outcome clients care about.</p><a href="/contact">Learn more</a></article>
+            <article class="orion-builder-v2-card"><h3>Service Two</h3><p>Keep the card concise and scannable.</p><a href="/contact">Learn more</a></article>
+            <article class="orion-builder-v2-card"><h3>Service Three</h3><p>Use the same structure for visual rhythm.</p><a href="/contact">Learn more</a></article>
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Card grid"
+  });
+  blocks.add("orion-gallery", {
+    category: "Media",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <h2>Gallery</h2>
+          <div class="orion-builder-v2-gallery">
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+            <img alt="Gallery item" src="https://placehold.co/900x700" />
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Gallery"
+  });
+  blocks.add("orion-testimonials", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-section is-muted">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Testimonials</p>
+          <h2>What clients say</h2>
+          <div class="orion-builder-v2-grid is-3">
+            <blockquote class="orion-builder-v2-card"><p>"A clear, warm experience from start to finish."</p><cite>Client Name</cite></blockquote>
+            <blockquote class="orion-builder-v2-card"><p>"Exactly what we needed, without friction."</p><cite>Client Name</cite></blockquote>
+            <blockquote class="orion-builder-v2-card"><p>"The site made every next step obvious."</p><cite>Client Name</cite></blockquote>
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Testimonials"
+  });
+  blocks.add("orion-faq", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container is-narrow">
+          <p class="orion-builder-v2-kicker">FAQ</p>
+          <h2>Questions answered</h2>
+          <details open><summary>What should visitors know first?</summary><p>Give a short, useful answer that removes hesitation.</p></details>
+          <details><summary>How does the process work?</summary><p>Explain the next step clearly.</p></details>
+          <details><summary>How do we get started?</summary><p>Point people to the strongest call to action.</p></details>
+        </div>
+      </section>
+    `,
+    label: "FAQ"
+  });
+  blocks.add("orion-pricing", {
+    category: "Commerce",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Pricing</p>
+          <h2>Simple package options</h2>
+          <div class="orion-builder-v2-grid is-3">
+            <article class="orion-builder-v2-card"><h3>Starter</h3><p class="orion-builder-v2-price">$500</p><p>Best for focused launches.</p><a class="orion-builder-v2-button" href="/contact">Choose Starter</a></article>
+            <article class="orion-builder-v2-card is-featured"><h3>Growth</h3><p class="orion-builder-v2-price">$1,500</p><p>Best for expanding teams.</p><a class="orion-builder-v2-button" href="/contact">Choose Growth</a></article>
+            <article class="orion-builder-v2-card"><h3>Custom</h3><p class="orion-builder-v2-price">Quote</p><p>Best for complex builds.</p><a class="orion-builder-v2-button" href="/contact">Talk with us</a></article>
+          </div>
+        </div>
+      </section>
+    `,
+    label: "Pricing"
+  });
   blocks.add("orion-button", {
     category: "Basic",
     content: '<a class="orion-builder-v2-button" href="/contact">Button</a>',
@@ -348,6 +549,22 @@ var registerOrionBuilderV2Blocks = (editor) => {
     `,
     label: "Form"
   });
+  blocks.add("orion-footer", {
+    category: "Chrome",
+    content: `
+      <footer class="orion-builder-v2-footer">
+        <div>
+          <strong>Brand</strong>
+          <p>Short positioning line for the site footer.</p>
+        </div>
+        <nav aria-label="Footer">
+          <a href="/privacy">Privacy</a>
+          <a href="/contact">Contact</a>
+        </nav>
+      </footer>
+    `,
+    label: "Footer"
+  });
 };
 
 // src/builder-v2/editor/projectComponents.ts
@@ -417,7 +634,7 @@ var postToParent = (payload) => {
 };
 var buildSavePayload = (editor, status, projectData) => ({
   builderMode: "grapes-v2",
-  compiledCss: sanitizeBuilderCss(editor.getCss()),
+  compiledCss: scopeBuilderCss(editor.getCss()),
   compiledHtml: sanitizeBuilderHtml(editor.getHtml()),
   projectData,
   status
@@ -516,12 +733,53 @@ var uploadPayloadMediaAssets = async (editor, files) => {
     editor.AssetManager.add(uploadedAssets);
   }
 };
-function GrapesPageEditor({ adapter, initialData, pageID }) {
+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 [error, setError] = (0, import_react.useState)("");
+  const [historyState, setHistoryState] = (0, import_react.useState)({ canRedo: false, canUndo: false });
+  const [lastSavedAt, setLastSavedAt] = (0, import_react.useState)("");
   const [loading, setLoading] = (0, import_react.useState)(true);
+  const [selectedDevice, setSelectedDevice] = (0, import_react.useState)("desktop");
   const [saving, setSaving] = (0, import_react.useState)(null);
+  const [saveMessage, setSaveMessage] = (0, import_react.useState)("");
+  const [validationIssues, setValidationIssues] = (0, import_react.useState)([]);
+  const pageTree = initialData?.meta?.pageTree || [];
+  const updateHistoryState = (editor) => {
+    const next = {
+      canRedo: editor.UndoManager.hasRedo(),
+      canUndo: editor.UndoManager.hasUndo()
+    };
+    setHistoryState(next);
+    postToParent({
+      ...next,
+      type: "history-state"
+    });
+  };
+  const runValidation = (editor) => {
+    const issues = validateBuilderV2Output({
+      css: editor.getCss(),
+      html: editor.getHtml()
+    });
+    setValidationIssues(issues);
+    postToParent({ issues, type: "validation-state" });
+    return issues;
+  };
+  const setDevice = (device) => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+    editor.setDevice(device);
+    setSelectedDevice(device);
+  };
   (0, import_react.useEffect)(() => {
     let active = true;
     const init = async () => {
@@ -605,12 +863,24 @@ function GrapesPageEditor({ adapter, initialData, pageID }) {
         void loadPayloadMediaAssets(editor);
         editor.on("update", () => {
           postToParent({ dirty: editor.getDirtyCount() > 0, type: "dirty-state" });
-          postToParent({
-            canRedo: editor.UndoManager.hasRedo(),
-            canUndo: editor.UndoManager.hasUndo(),
-            type: "history-state"
-          });
+          updateHistoryState(editor);
+          runValidation(editor);
+          setSaveMessage("Unsaved changes");
+          if (autosaveTimerRef.current) {
+            window.clearTimeout(autosaveTimerRef.current);
+          }
+          autosaveTimerRef.current = window.setTimeout(() => {
+            if (editor.getDirtyCount() > 0) {
+              void saveRef.current("draft", { autosave: true });
+            }
+          }, autosaveIntervalMs);
         });
+        editor.on("component:selected", () => {
+          setSaveMessage("Selection ready");
+        });
+        setSelectedDevice(editor.getDevice() || "desktop");
+        runValidation(editor);
+        updateHistoryState(editor);
         setLoading(false);
       } catch (initError) {
         setError(initError instanceof Error ? initError.message : "Could not load the website builder.");
@@ -620,15 +890,30 @@ function GrapesPageEditor({ adapter, initialData, pageID }) {
     void init();
     return () => {
       active = false;
+      if (autosaveTimerRef.current) {
+        window.clearTimeout(autosaveTimerRef.current);
+      }
       editorRef.current?.destroy();
       editorRef.current = null;
     };
-  }, [adapter, initialData?.projectData, initialData?.title]);
-  const save = async (status) => {
+  }, [adapter, autosaveIntervalMs, initialData?.projectData, initialData?.title]);
+  const save = async (status, options = {}) => {
     const editor = editorRef.current;
     if (!editor || saving) {
       return;
     }
+    const issues = runValidation(editor);
+    if (status === "published" && hasBlockingBuilderV2Issues(issues)) {
+      const message = "Resolve blocking validation errors before publishing.";
+      setSaveMessage(message);
+      postToParent({
+        message,
+        ok: false,
+        status,
+        type: "save-result"
+      });
+      return;
+    }
     setSaving(status);
     try {
       const projectData = editor.getProjectData();
@@ -643,15 +928,19 @@ function GrapesPageEditor({ adapter, initialData, pageID }) {
             builderMode: "grapes-v2",
             builderProjectData: projectData,
             builderPublishedProjectData: projectData,
-            builderValidationIssues: [],
+            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,
-            builderValidationIssues: [],
+            builderLastSavedAt: (/* @__PURE__ */ new Date()).toISOString(),
+            builderValidationIssues: issues,
             compiledCss: payload.compiledCss,
             compiledHtml: payload.compiledHtml
           }
@@ -674,14 +963,18 @@ function GrapesPageEditor({ adapter, initialData, pageID }) {
         type: "dirty-state"
       });
       postToParent({
-        message: status === "published" ? "Published." : "Draft saved.",
+        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: saveError instanceof Error ? saveError.message : "Could not save.",
+        message,
         ok: false,
         status,
         type: "save-result"
@@ -690,6 +983,9 @@ function GrapesPageEditor({ adapter, initialData, pageID }) {
       setSaving(null);
     }
   };
+  (0, import_react.useEffect)(() => {
+    saveRef.current = save;
+  }, [saving]);
   (0, import_react.useEffect)(() => {
     const onMessage = (event) => {
       const data = event.data;
@@ -699,19 +995,11 @@ function GrapesPageEditor({ adapter, initialData, pageID }) {
       }
       if (data.type === "dirty-check-request") {
         postToParent({ dirty: editor.getDirtyCount() > 0, type: "dirty-state" });
-        postToParent({
-          canRedo: editor.UndoManager.hasRedo(),
-          canUndo: editor.UndoManager.hasUndo(),
-          type: "history-state"
-        });
+        updateHistoryState(editor);
         return;
       }
       if (data.type === "history-check-request") {
-        postToParent({
-          canRedo: editor.UndoManager.hasRedo(),
-          canUndo: editor.UndoManager.hasUndo(),
-          type: "history-state"
-        });
+        updateHistoryState(editor);
         return;
       }
       if (data.type === "undo") {
@@ -730,19 +1018,89 @@ function GrapesPageEditor({ adapter, initialData, pageID }) {
     return () => window.removeEventListener("message", onMessage);
   }, [saving]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "orion-builder-v2-topbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "orion-builder-v2-eyebrow", children: "Website Builder V2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { children: initialData?.title || "Untitled page" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-toolbar", "aria-label": "Builder controls", children: [
+        ["desktop", "tablet", "mobile"].map((device) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            "aria-pressed": selectedDevice === device,
+            className: "orion-builder-v2-tool",
+            onClick: () => setDevice(device),
+            type: "button",
+            children: device
+          },
+          device
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "orion-builder-v2-tool",
+            disabled: !historyState.canUndo,
+            onClick: () => {
+              editorRef.current?.UndoManager.undo();
+              editorRef.current && updateHistoryState(editorRef.current);
+            },
+            type: "button",
+            children: "Undo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "orion-builder-v2-tool",
+            disabled: !historyState.canRedo,
+            onClick: () => {
+              editorRef.current?.UndoManager.redo();
+              editorRef.current && updateHistoryState(editorRef.current);
+            },
+            type: "button",
+            children: "Redo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "orion-builder-v2-tool is-primary", disabled: Boolean(saving), onClick: () => void save("draft"), type: "button", children: saving === "draft" ? "Saving..." : "Save draft" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "orion-builder-v2-tool is-publish", disabled: Boolean(saving), onClick: () => void save("published"), type: "button", children: saving === "published" ? "Publishing..." : "Publish" })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "orion-builder-v2-sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Pages" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-page-tree", children: pageTree.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No pages loaded." }) : pageTree.map((page) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "orion-builder-v2-page-link", href: `#page-${page.id}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: page.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: page.path })
+        ] }, page.id)) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Blocks" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Drag sections into the page. Dynamic blocks render through the project adapter." }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-blocks" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Inspector" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Selection settings, dynamic bindings, links, and labels." }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "orion-builder-v2-traits" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Validation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-validation-list", children: validationIssues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No issues found." }) : validationIssues.map((issue) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `orion-builder-v2-validation is-${issue.severity}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: issue.message }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: issue.severity })
+        ] }, `${issue.code}-${issue.path}`)) })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "orion-builder-v2-main", children: [
       loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
       error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-error", children: error }) : null,
+      saveMessage || lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "orion-builder-v2-save-status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: saveMessage || "Ready" }),
+        lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          "Last saved ",
+          lastSavedAt
+        ] }) : null
+      ] }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-builder-v2-canvas", ref: containerRef })
     ] })
   ] });