cms-renderer 0.8.0 → 0.8.2

package/dist/lib/renderer.js

@@ -102,6 +102,24 @@ function isArticlePublished(article) {
 
 // ../../packages/cms-schema/src/blocks/metadata.ts
 var BLOCK_METADATA = {
+  "nav-block": {
+    name: "Navbar",
+    description: "Fixed top navigation bar with brand, links, login, and CTA",
+    category: "Marketing",
+    icon: "bars-3",
+    fields: [
+      { name: "brandName", label: "Brand Name", type: "Text" },
+      { name: "brandUrl", label: "Brand URL", type: "Text" },
+      { name: "logo", label: "Logo", type: "Image" },
+      { name: "links", label: "Navigation Links", type: "List" },
+      { name: "loginLabel", label: "Login Label", type: "Text" },
+      { name: "loginUrl", label: "Login URL", type: "Text" },
+      { name: "ctaLabel", label: "CTA Label", type: "Text" },
+      { name: "ctaUrl", label: "CTA URL", type: "Text" },
+      { name: "overlay", label: "Overlay on Page", type: "Boolean" }
+    ],
+    variants: [{ name: "Default" }]
+  },
   "hero-block": {
     name: "Hero",
     description: "Full-width hero section with headline, description, and CTA",
@@ -112,6 +130,10 @@ var BLOCK_METADATA = {
       { name: "subheadline", label: "Description", type: "Text" },
       { name: "ctaText", label: "CTA Label", type: "Text" },
       { name: "ctaUrl", label: "CTA URL", type: "URL" },
+      { name: "ctaType", label: "CTA Type", type: "Select" },
+      { name: "cta2Text", label: "CTA 2 Label", type: "Text" },
+      { name: "cta2Url", label: "CTA 2 URL", type: "URL" },
+      { name: "cta2Type", label: "CTA 2 Type", type: "Select" },
       { name: "backgroundImage", label: "Background Image", type: "Image" }
     ],
     variants: [{ name: "Left" }, { name: "Center" }, { name: "Right" }]
@@ -316,35 +338,37 @@ var fileSchema = z5.object({
   type: z5.string()
 });
 
+// ../../packages/cms-schema/src/blocks/schemas/block-url.ts
+var BLOCK_URL_REFINE_MESSAGE = "URL must be http(s)://, /path, #anchor, or empty";
+function isValidBlockUrl(val, allowEmpty = true) {
+  if (val === "") return allowEmpty;
+  if (val.startsWith("http://") || val.startsWith("https://")) {
+    try {
+      new URL(val);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  if (val.startsWith("/") || val.startsWith("#")) return true;
+  return false;
+}
+
 // ../../packages/cms-schema/src/blocks/schemas/hero-block.ts
 var HeroAlignment = ["left", "center", "right"];
 var HeroBlockContentSchema = z6.object({
   headline: z6.string().min(1, "Headline is required").max(100, "Headline too long"),
   subheadline: z6.string().max(200, "Description too long").optional(),
   ctaText: z6.string().max(50, "CTA text too long").optional(),
-  ctaUrl: z6.string().refine(
-    (val) => {
-      if (val === "") return true;
-      if (val.startsWith("http://") || val.startsWith("https://")) {
-        try {
-          new URL(val);
-          return true;
-        } catch {
-          return false;
-        }
-      }
-      if (val.startsWith("/")) {
-        return true;
-      }
-      if (val.startsWith("#")) {
-        return true;
-      }
-      return false;
-    },
-    {
-      message: "URL must be a valid full URL (http://... or https://...), relative path (/path), anchor (#anchor), or empty string"
-    }
-  ).optional().or(z6.literal("")),
+  ctaUrl: z6.string().refine(isValidBlockUrl, {
+    message: BLOCK_URL_REFINE_MESSAGE
+  }).optional().or(z6.literal("")),
+  ctaType: z6.enum(["Primary", "Secondary", "Ghost"]).default("Primary").optional(),
+  cta2Text: z6.string().max(50, "CTA 2 text too long").optional(),
+  cta2Url: z6.string().refine(isValidBlockUrl, {
+    message: BLOCK_URL_REFINE_MESSAGE
+  }).optional().or(z6.literal("")),
+  cta2Type: z6.enum(["Primary", "Secondary", "Ghost"]).default("Secondary").optional(),
   backgroundImage: ImageReferenceSchema.nullable().optional(),
   alignment: z6.enum(HeroAlignment).default("center")
 });
@@ -374,9 +398,39 @@ var LogoTrustBlockContentSchema = z7.object({
 });
 var LOGO_TRUST_BLOCK_SCHEMA_NAME = "logo-trust-block";
 
+// ../../packages/cms-schema/src/blocks/schemas/nav-block.ts
+import { z as z8 } from "zod";
+var NavLinkSchema = z8.object({
+  label: z8.string().min(1, "Link label is required").max(40, "Label too long"),
+  url: z8.string().refine(isValidBlockUrl, {
+    message: BLOCK_URL_REFINE_MESSAGE
+  }),
+  hasDropdown: z8.boolean().default(false)
+});
+var NavBlockContentSchema = z8.object({
+  brandName: z8.string().min(1, "Brand name is required").max(40, "Brand name too long"),
+  brandUrl: z8.string().refine(isValidBlockUrl, {
+    message: BLOCK_URL_REFINE_MESSAGE
+  }),
+  logo: ImageReferenceSchema.nullable().optional(),
+  links: z8.array(NavLinkSchema).max(12, "Maximum 12 links"),
+  loginLabel: z8.string().max(30, "Label too long").optional(),
+  loginUrl: z8.string().refine(isValidBlockUrl, {
+    message: BLOCK_URL_REFINE_MESSAGE
+  }).optional(),
+  ctaLabel: z8.string().max(40, "Label too long").optional(),
+  ctaUrl: z8.string().refine(isValidBlockUrl, {
+    message: BLOCK_URL_REFINE_MESSAGE
+  }).optional(),
+  /** When true, nav is position:fixed and overlays page content. */
+  overlay: z8.boolean().default(true)
+});
+var NAV_BLOCK_SCHEMA_NAME = "nav-block";
+
 // ../../packages/cms-schema/src/blocks/registry.ts
 var BLOCK_SCHEMA_NAMES = [
   ARTICLE_BLOCK_SCHEMA_NAME,
+  NAV_BLOCK_SCHEMA_NAME,
   HERO_BLOCK_SCHEMA_NAME,
   FEATURES_BLOCK_SCHEMA_NAME,
   CTA_BLOCK_SCHEMA_NAME,
@@ -416,7 +470,7 @@ function normalizePath(path) {
 }
 
 // ../../packages/cms-schema/src/routing/path-validation.ts
-import { z as z8 } from "zod";
+import { z as z9 } from "zod";
 var pathRegex = /^\/[\p{L}\p{N}\-_{}/:]*$/u;
 var placeholderSegmentRegex = /^(:[a-zA-Z0-9_]+|\{[a-zA-Z0-9_]+\})$/;
 function hasValidPlaceholderStructure(path) {
@@ -432,7 +486,7 @@ function hasValidPlaceholderStructure(path) {
     return placeholderSegmentRegex.test(segment);
   });
 }
-var pathSchema = z8.string().min(1, "Path is required").regex(
+var pathSchema = z9.string().min(1, "Path is required").regex(
   pathRegex,
   "Path must start with / and contain only letters, numbers, hyphens, underscores, slashes, colons, and braces"
 ).refine(
@@ -441,14 +495,14 @@ var pathSchema = z8.string().min(1, "Path is required").regex(
 );
 
 // ../../packages/cms-schema/src/documents/schemas/language.ts
-import { z as z9 } from "zod";
-var LanguageSchema = z9.object({
+import { z as z10 } from "zod";
+var LanguageSchema = z10.object({
   /** 2-letter ISO 639-1 language code */
-  code: z9.string().length(2, "Language code must be 2 characters"),
+  code: z10.string().length(2, "Language code must be 2 characters"),
   /** English name of the language */
-  name: z9.string().min(1, "Language name required"),
+  name: z10.string().min(1, "Language name required"),
   /** Name in the language itself (optional but recommended) */
-  nativeName: z9.string().optional()
+  nativeName: z10.string().optional()
 });
 
 // lib/block-renderer.tsx
@@ -466,14 +520,14 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   var style = document.createElement('style');
   style.setAttribute('data-cms-overlay', '');
   style.textContent = \`
-    [data-cms-block],
+    [data-cms-sentinel] + *,
     [data-cms-editable] {
       cursor: pointer;
     }
     [data-cms-editable] {
       border-radius: 2px;
     }
-    [data-cms-editable]:not([data-cms-block]):hover {
+    [data-cms-editable]:hover {
       outline: 2px solid var(--component-accent, #A78BFA);
       outline-offset: 2px;
     }
@@ -594,28 +648,6 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   \`;
   document.head.appendChild(style);
 
-  function stampBlockElements() {
-    var sentinels = document.querySelectorAll('[data-cms-sentinel]');
-    sentinels.forEach(function(sentinel) {
-      var blockEl = sentinel.nextElementSibling;
-      if (!blockEl) return;
-
-      var blockId = sentinel.getAttribute('data-block-id');
-      var blockType = sentinel.getAttribute('data-block-type');
-
-      blockEl.setAttribute('data-cms-block', '');
-      blockEl.setAttribute('data-block-id', blockId);
-      blockEl.setAttribute('data-block-type', blockType);
-
-      injectEditableSpans(
-        blockEl,
-        blockId,
-        blockType,
-        sentinel.getAttribute('data-content-entries')
-      );
-    });
-  }
-
   function injectEditableSpans(blockEl, blockId, blockType, rawEntries) {
     if (!rawEntries || blockEl.querySelector('[data-cms-editable][data-content-path]')) return;
 
@@ -669,15 +701,55 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     }
   }
 
-  stampBlockElements();
-
-  var stampObserver = new MutationObserver(function(mutations) {
-    var needsStamp = mutations.some(function(m) {
-      return m.addedNodes.length > 0;
+  function injectAllEditableSpans() {
+    document.querySelectorAll('[data-cms-sentinel]').forEach(function(sentinel) {
+      var blockEl = sentinel.nextElementSibling;
+      if (!blockEl) return;
+      injectEditableSpans(
+        blockEl,
+        sentinel.getAttribute('data-block-id'),
+        sentinel.getAttribute('data-block-type'),
+        sentinel.getAttribute('data-content-entries')
+      );
     });
-    if (needsStamp) stampBlockElements();
-  });
-  stampObserver.observe(document.body, { childList: true, subtree: true });
+  }
+
+  function getBlockRootFromSentinel(sentinel) {
+    return sentinel ? sentinel.nextElementSibling : null;
+  }
+
+  function getSentinelForBlock(blockEl) {
+    var prev = blockEl ? blockEl.previousElementSibling : null;
+    if (prev && prev.hasAttribute('data-cms-sentinel')) return prev;
+    return null;
+  }
+
+  function getBlockId(blockEl) {
+    var sentinel = getSentinelForBlock(blockEl);
+    return sentinel ? sentinel.getAttribute('data-block-id') : null;
+  }
+
+  function getBlockType(blockEl) {
+    var sentinel = getSentinelForBlock(blockEl);
+    return sentinel ? sentinel.getAttribute('data-block-type') : null;
+  }
+
+  function resolveBlockFromTarget(target) {
+    if (!target || !target.closest) return null;
+
+    var sentinels = document.querySelectorAll('[data-cms-sentinel]');
+    for (var i = 0; i < sentinels.length; i++) {
+      var root = getBlockRootFromSentinel(sentinels[i]);
+      if (root && root.contains(target)) return root;
+    }
+    return null;
+  }
+
+  var overlayUiReady = false;
+
+  function initOverlayUi() {
+    if (overlayUiReady) return;
+    overlayUiReady = true;
 
   var overlayRoot = document.createElement('div');
   overlayRoot.id = 'cms-overlay-root';
@@ -759,21 +831,23 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   setTimeout(sendReadySignal, 1500);
 
   function getBlockElement(blockId) {
-    // Match the real block element, not the hidden sentinel <span> that shares
-    // the same data-block-id and precedes it in the DOM. The sentinel is
-    // display:none (a 0x0 rect), so selecting it would paint the outline at the
-    // top-left corner. Only the stamped block carries data-cms-block.
-    return document.querySelector('[data-cms-block][data-block-id="' + blockId + '"]');
+    // Prefer stamped block roots when present; otherwise resolve via sentinel sibling.
+    var stamped = document.querySelector('[data-cms-block][data-block-id="' + blockId + '"]');
+    if (stamped) return stamped;
+    var sentinel = document.querySelector('[data-cms-sentinel][data-block-id="' + blockId + '"]');
+    return getBlockRootFromSentinel(sentinel);
   }
-
+  
   function getAllBlocks() {
-    return Array.from(document.querySelectorAll('[data-cms-block]'));
+    return Array.from(document.querySelectorAll('[data-cms-sentinel]'))
+      .map(getBlockRootFromSentinel)
+      .filter(Boolean);
   }
 
   function getBlockIndex(blockId) {
     var blocks = getAllBlocks();
     for (var i = 0; i < blocks.length; i++) {
-      if (blocks[i].getAttribute('data-block-id') === blockId) return i;
+      if (getBlockId(blocks[i]) === blockId) return i;
     }
     return -1;
   }
@@ -807,7 +881,7 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     outlineEl.style.width = rect.width + 'px';
     outlineEl.style.height = rect.height + 'px';
     if (label) {
-      label.textContent = formatBlockType(el.getAttribute('data-block-type'));
+      label.textContent = formatBlockType(getBlockType(el));
       label.classList.add('cms-label-visible');
     }
   }
@@ -849,15 +923,15 @@ function generateCmsOverlayScript(cmsParentOrigin) {
 
   document.addEventListener('mouseover', function(e) {
     if (toolbarVisible) return;
-    var block = e.target.closest('[data-cms-block]');
+    var block = resolveBlockFromTarget(e.target);
     if (block) {
       updateOutline(block, outline);
     }
   });
 
   document.addEventListener('mouseout', function(e) {
-    var block = e.target.closest('[data-cms-block]');
-    var related = e.relatedTarget ? e.relatedTarget.closest('[data-cms-block]') : null;
+    var block = resolveBlockFromTarget(e.target);
+    var related = e.relatedTarget ? resolveBlockFromTarget(e.relatedTarget) : null;
     if (block && block !== related) {
       outline.style.display = 'none';
       hideCursor();
@@ -866,7 +940,7 @@ function generateCmsOverlayScript(cmsParentOrigin) {
 
   document.addEventListener('mousemove', function(e) {
     if (toolbarVisible) return;
-    var block = e.target.closest('[data-cms-block]');
+    var block = resolveBlockFromTarget(e.target);
     if (block) {
       showCursor(e.clientX, e.clientY);
     }
@@ -874,13 +948,13 @@ function generateCmsOverlayScript(cmsParentOrigin) {
 
   document.addEventListener('contextmenu', function(e) {
     if (e.target.closest('[data-cms-toolbar]')) return;
-    var block = e.target.closest('[data-cms-block]');
+    var block = resolveBlockFromTarget(e.target);
     if (block) {
       if (toolbarVisible) return;
       e.preventDefault();
       hideCursor();
       outline.style.display = 'none';
-      var blockId = block.getAttribute('data-block-id');
+      var blockId = getBlockId(block);
       showToolbar(e.clientX, e.clientY, blockId);
     }
   });
@@ -893,8 +967,8 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     blockInteractiveActivation(e);
 
     if (toolbarVisible) {
-      var activeBlock = e.target.closest('[data-cms-block]');
-      if (!activeBlock || activeBlock.getAttribute('data-block-id') !== currentBlockId) {
+      var activeBlock = resolveBlockFromTarget(e.target);
+      if (!activeBlock || getBlockId(activeBlock) !== currentBlockId) {
         hideToolbar();
       }
     }
@@ -910,12 +984,12 @@ function generateCmsOverlayScript(cmsParentOrigin) {
       return;
     }
 
-    var block = e.target.closest('[data-cms-block]');
+    var block = resolveBlockFromTarget(e.target);
     if (block) {
       postToParent({
         type: 'cms-editable-click',
-        blockId: block.getAttribute('data-block-id'),
-        blockType: block.getAttribute('data-block-type'),
+        blockId: getBlockId(block),
+        blockType: getBlockType(block),
         contentPath: null
       });
     }
@@ -969,6 +1043,29 @@ function generateCmsOverlayScript(cmsParentOrigin) {
       }
     }
   });
+  }
+
+  function scheduleEditableInjection() {
+    requestAnimationFrame(function() {
+      requestAnimationFrame(injectAllEditableSpans);
+    });
+  }
+
+  var stampObserver = new MutationObserver(function(mutations) {
+    var needsInject = mutations.some(function(m) {
+      return m.addedNodes.length > 0;
+    });
+    if (needsInject) scheduleEditableInjection();
+  });
+  stampObserver.observe(document.body, { childList: true, subtree: true });
+
+  initOverlayUi();
+
+  if (document.readyState === 'complete') {
+    scheduleEditableInjection();
+  } else {
+    window.addEventListener('load', scheduleEditableInjection, { once: true });
+  }
 })();
 `;
 }
@@ -1185,7 +1282,8 @@ async function renderParametricRoute({
   try {
     const { route, resolvedParams } = await client.route.getByPath.query({
       websiteId,
-      path
+      path,
+      preview: previewMode
     });
     if (route.state !== "Live") {
       return { status: "not_found" };
@@ -1251,19 +1349,22 @@ async function renderParametricRoute({
       });
     }
     const routeParams = resolvedParams ? Object.fromEntries(
-      Object.entries(resolvedParams).map(([key, param]) => [
-        key,
-        {
-          value: param.value,
-          schemaName: param.schemaName,
-          document: {
-            id: param.document.id,
-            title: param.document.title,
-            content: param.document.content,
-            schema_name: param.document.schema_name
+      Object.entries(resolvedParams).map(([key, param]) => {
+        const documentContent = previewMode ? param.document.draft_content : param.document.published_content;
+        return [
+          key,
+          {
+            value: param.value,
+            schemaName: param.schemaName,
+            document: {
+              id: param.document.id,
+              title: param.document.title,
+              content: documentContent ?? param.document.draft_content,
+              schema_name: param.document.schema_name
+            }
           }
-        }
-      ])
+        ];
+      })
     ) : void 0;
     return {
       status: "ok",