@designcrowd/library.brand-page 5.18.7 → 5.18.8-ast-padding-1

package/lib/src/bundles/bundled-translations.es-ES.json

@@ -1529,6 +1529,8 @@
         "iconFillColorTitle": "Color de relleno del icono",
         "iconBackgroundColorTitle": "Color de fondo del icono",
         "paddingTitle": "Relleno",
+        "topPaddingTitle": "Relleno superior",
+        "bottomPaddingTitle": "Relleno inferior",
         "dividerStyleTitle": "Estilo del divisor",
         "dividerColorTitle": "Color del separador",
         "addItemTitle": "Añadir artículo",

package/lib/src/bundles/bundled-translations.fr-CA.json

@@ -1529,6 +1529,8 @@
         "iconFillColorTitle": "Couleur de remplissage de l’icône",
         "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
         "paddingTitle": "Marges intérieures",
+        "topPaddingTitle": "Marge intérieure supérieure",
+        "bottomPaddingTitle": "Marges intérieures inférieures",
         "dividerStyleTitle": "Style de séparateur",
         "dividerColorTitle": "Couleur du séparateur",
         "addItemTitle": "Ajouter un article",

package/lib/src/bundles/bundled-translations.fr-FR.json

@@ -1529,6 +1529,8 @@
         "iconFillColorTitle": "Couleur de remplissage de l’icône",
         "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
         "paddingTitle": "Marges intérieures",
+        "topPaddingTitle": "Marges intérieures supérieures",
+        "bottomPaddingTitle": "Marges intérieures inférieures",
         "dividerStyleTitle": "Style de séparateur",
         "dividerColorTitle": "Couleur du séparateur",
         "addItemTitle": "Ajouter un article",

package/lib/src/bundles/bundled-translations.json

@@ -1529,6 +1529,8 @@
         "iconFillColorTitle": "Icon fill color",
         "iconBackgroundColorTitle": "Icon background color",
         "paddingTitle": "Padding",
+        "topPaddingTitle": "Top padding",
+        "bottomPaddingTitle": "Bottom padding",
         "dividerStyleTitle": "Divider Style",
         "dividerColorTitle": "Divider color",
         "addItemTitle": "Add Item",

package/lib/src/bundles/bundled-translations.pt-BR.json

@@ -1529,6 +1529,8 @@
         "iconFillColorTitle": "Cor de preenchimento do ícone",
         "iconBackgroundColorTitle": "Cor de fundo do ícone",
         "paddingTitle": "Preenchimento",
+        "topPaddingTitle": "Preenchimento superior",
+        "bottomPaddingTitle": "Preenchimento inferior",
         "dividerStyleTitle": "Estilo do separador",
         "dividerColorTitle": "Cor do separador",
         "addItemTitle": "Adicionar item",

package/lib/src/bundles/bundled-translations.pt-PT.json

@@ -1529,6 +1529,8 @@
         "iconFillColorTitle": "Cor de preenchimento do ícone",
         "iconBackgroundColorTitle": "Cor de fundo do ícone",
         "paddingTitle": "Preenchimento",
+        "topPaddingTitle": "Preenchimento superior",
+        "bottomPaddingTitle": "Preenchimento inferior",
         "dividerStyleTitle": "Estilo do separador",
         "dividerColorTitle": "Cor do separador",
         "addItemTitle": "Adicionar Item",

package/lib/src/composables/useSnapshot.js

@@ -1,6 +1,57 @@
 import { ref } from 'vue';
 const HTML2CANVAS_CDN_URL = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
 let html2canvasLoadPromise = null;
+// Capture is sized to the rendered content (scrollHeight), not the clipped
+// viewport box. An empty page yields a short capture; a long page captures its
+// full height up to the cap.
+const MIN_SNAPSHOT_HEIGHT = 200;
+// The snapshot is consumed by the AI pipeline's OpenAI vision model, which
+// normalises the SHORT side to ~768px and tiles the long side — so token cost
+// is driven by page HEIGHT, not absolute resolution. This cap bounds that cost
+// AND, more importantly, the html2canvas render work (CPU/memory) — taller pages
+// are truncated. The render is the dominant cost on a capture, so we keep the
+// cap conservative, and lower still on mobile where memory/CPU are tighter.
+const MAX_SNAPSHOT_HEIGHT_DESKTOP = 4096;
+const MAX_SNAPSHOT_HEIGHT_MOBILE = 2560;
+// OpenAI's vision short-side target. Rendering at this width avoids the
+// down-then-up resample blur you'd get from scaling smaller (OpenAI upscales
+// the short side back to 768 regardless) while keeping the payload tight.
+const SNAPSHOT_TARGET_WIDTH = 768;
+/**
+ * Extracts the YouTube video id from an embed URL, or null for non-YouTube
+ * iframes. Handles youtube.com/embed/<id> and youtube-nocookie.com variants.
+ */
+function getYouTubeId(src) {
+    const match = src.match(/(?:youtube(?:-nocookie)?\.com\/embed\/)([A-Za-z0-9_-]{6,})/);
+    return match ? match[1] : null;
+}
+/**
+ * Fetches a YouTube thumbnail and returns it as a data URI, or null on failure.
+ * Inlining as a data URI avoids cross-origin canvas tainting in html2canvas.
+ * Tries maxres first, falls back to hq (maxres 404s on some videos).
+ */
+async function fetchYouTubeThumbnail(id) {
+    for (const quality of ['maxresdefault', 'hqdefault']) {
+        try {
+            const response = await fetch(`https://img.youtube.com/vi/${id}/${quality}.jpg`);
+            if (!response.ok)
+                continue;
+            const blob = await response.blob();
+            // YouTube returns a tiny placeholder for missing qualities; skip those.
+            if (blob.size < 2000)
+                continue;
+            return await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(blob);
+            });
+        }
+        catch {
+            /* try next quality */
+        }
+    }
+    return null;
+}
 /**
  * Dynamically loads html2canvas from CDN if not already loaded
  */
@@ -47,44 +98,205 @@ export function useSnapshot() {
             if (typeof window.html2canvas === 'undefined') {
                 throw new Error('html2canvas failed to load');
             }
-            // Pre-fetch blob URLs from shape <object> elements so they can be
-            // rendered as <img> in the html2canvas clone (html2canvas cannot
-            // traverse the isolated DOM inside <object> elements).
-            const shapeDataUris = new Map();
-            const shapeObjects = element.querySelectorAll('.c-shape-object object');
-            for (const obj of Array.from(shapeObjects)) {
-                const dataUrl = obj.getAttribute('data');
-                if (dataUrl && dataUrl.startsWith('blob:')) {
+            // Wait for fonts and in-flight images to finish before capturing —
+            // otherwise html2canvas snapshots a half-rendered page (missing images,
+            // fallback fonts) and the measured content height is wrong.
+            await document.fonts?.ready;
+            await Promise.all(Array.from(element.querySelectorAll('img'))
+                .filter((img) => !img.complete)
+                .map((img) => new Promise((resolve) => {
+                img.onload = img.onerror = () => resolve();
+            })));
+            // The maker renders the full website inside `.c-preview-container`
+            // (position: fixed + transform: scale). The page background — solid
+            // colour, gradient, or image — lives on `.brand-page-root-background`,
+            // which sits OUTSIDE the scrolling content. Capturing the content alone
+            // drops that background, so transparent sections fall back to white and
+            // their (often light) text becomes invisible. Capture the whole preview
+            // (`[data-test-tag="editor-preview"]`) so the background layer is
+            // included, and size the canvas to the real page length, which only the
+            // inner scroll container `.brand-page__inner` reports via scrollHeight.
+            const target = element.querySelector('[data-test-tag="editor-preview"]') ?? element;
+            const scrollEl = element.querySelector('.brand-page__inner') ?? target;
+            // Keep the render light on mobile (tighter CPU/memory) by truncating
+            // taller there than on desktop.
+            const isMobileViewport = typeof window !== 'undefined' &&
+                window.matchMedia?.('(max-width: 768px)').matches;
+            const maxHeight = isMobileViewport
+                ? MAX_SNAPSHOT_HEIGHT_MOBILE
+                : MAX_SNAPSHOT_HEIGHT_DESKTOP;
+            const captureHeight = Math.min(Math.max(scrollEl.scrollHeight, MIN_SNAPSHOT_HEIGHT), maxHeight);
+            // Render at OpenAI's short-side target width (never upscaling). Token cost
+            // is set by height/aspect ratio, not by scaling down the width, so we keep
+            // the width crisp and let MAX_SNAPSHOT_HEIGHT bound the cost.
+            const captureWidth = target.clientWidth || target.offsetWidth || 1;
+            const scale = Math.min(1, SNAPSHOT_TARGET_WIDTH / captureWidth);
+            // Pre-fetch blob-backed SVGs from content shape <object> elements so they
+            // can be rendered as <img> in the clone (html2canvas can't reach into the
+            // isolated DOM inside <object>). Background-shape blob <img>s are NOT
+            // converted: html2canvas renders them no differently with or without the
+            // conversion, so it'd just be wasted fetches.
+            const blobSvgUris = new Map();
+            const blobSources = Array.from(element.querySelectorAll('.c-shape-object object')).map((o) => o.getAttribute('data'));
+            for (const src of blobSources) {
+                if (src && src.startsWith('blob:') && !blobSvgUris.has(src)) {
                     try {
-                        const response = await fetch(dataUrl);
-                        const svgText = await response.text();
-                        shapeDataUris.set(dataUrl, `data:image/svg+xml,${encodeURIComponent(svgText)}`);
+                        const svgText = await (await fetch(src)).text();
+                        blobSvgUris.set(src, `data:image/svg+xml,${encodeURIComponent(svgText)}`);
                     }
                     catch {
                         /* skip – shape will render as blank, same as before */
                     }
                 }
             }
-            const canvas = await window.html2canvas(element, {
-                allowTaint: true,
+            const objectFitImages = new Map();
+            for (const img of Array.from(element.querySelectorAll('img'))) {
+                const { objectFit, objectPosition } = getComputedStyle(img);
+                if (objectFit !== 'cover' && objectFit !== 'contain')
+                    continue;
+                const rect = img.getBoundingClientRect();
+                const src = img.currentSrc || img.src;
+                if (src && rect.width > 2 && rect.height > 2) {
+                    objectFitImages.set(src, {
+                        fit: objectFit,
+                        position: objectPosition || 'center',
+                        width: Math.round(rect.width),
+                        height: Math.round(rect.height),
+                    });
+                }
+            }
+            const videoThumbs = new Map();
+            for (const iframe of Array.from(element.querySelectorAll('iframe'))) {
+                const id = getYouTubeId(iframe.src);
+                if (!id || videoThumbs.has(id))
+                    continue;
+                const dataUri = await fetchYouTubeThumbnail(id);
+                if (!dataUri)
+                    continue;
+                const rect = iframe.getBoundingClientRect();
+                videoThumbs.set(id, {
+                    dataUri,
+                    width: Math.round(rect.width) || iframe.clientWidth,
+                    height: Math.round(rect.height) || iframe.clientHeight,
+                });
+            }
+            const canvas = await window.html2canvas(target, {
+                // Must stay false: with allowTaint, html2canvas draws cross-origin
+                // media that lacks CORS (e.g. a Getty background <video>), which taints
+                // the canvas and makes toDataURL throw — failing the whole snapshot.
+                // With it off, such content is skipped (rendered blank) instead, so the
+                // snapshot always exports. CORS-enabled images (Unsplash, user uploads)
+                // still render via useCORS.
+                allowTaint: false,
                 useCORS: true,
-                scale: 0.8, // Reduce quality to decrease file size
+                scale, // fit the full page into the vision model's image budget
                 logging: false,
                 backgroundColor: '#ffffff',
-                onclone: (_doc, clonedElement) => {
-                    const clonedObjects = clonedElement.querySelectorAll('.c-shape-object object');
-                    clonedObjects.forEach((obj) => {
+                // Capture the full page, not just the scroll viewport.
+                height: captureHeight,
+                windowHeight: captureHeight,
+                scrollX: 0,
+                scrollY: 0,
+                x: 0,
+                y: 0,
+                onclone: (_doc) => {
+                    const setStyle = (selector, styles) => {
+                        const el = _doc.querySelector(selector);
+                        if (el)
+                            Object.assign(el.style, styles);
+                    };
+                    // Neutralise the fixed-position + scale wrapper and the scroll clip so
+                    // the clone lays out at full content height; otherwise html2canvas
+                    // honours the viewport-height box and the page is cut off.
+                    setStyle('.c-preview-container', {
+                        position: 'static',
+                        transform: 'none',
+                        height: 'auto',
+                        overflow: 'visible',
+                    });
+                    setStyle('[data-test-tag="editor-preview"]', {
+                        position: 'relative',
+                        height: `${captureHeight}px`,
+                        overflow: 'visible',
+                    });
+                    // Stretch the (normally fixed, viewport-height) background and shape
+                    // layers to cover the full page so transparent sections render their
+                    // intended background instead of the white fallback.
+                    setStyle('.brand-page-root-background', {
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                    });
+                    setStyle('.brand-page__background-shapes-layer', {
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                    });
+                    setStyle('.brand-page-root', {
+                        position: 'relative',
+                        height: 'auto',
+                    });
+                    setStyle('.brand-page', { height: 'auto' });
+                    setStyle('.brand-page__inner', {
+                        height: 'auto',
+                        overflow: 'visible',
+                    });
+                    // Swap content shape <object>s for <img> using the pre-fetched data
+                    // URIs (html2canvas can't render <object> SVGs directly).
+                    _doc
+                        .querySelectorAll('.c-shape-object object')
+                        .forEach((obj) => {
                         const dataUrl = obj.getAttribute('data');
-                        if (dataUrl && shapeDataUris.has(dataUrl)) {
+                        if (dataUrl && blobSvgUris.has(dataUrl)) {
                             const img = _doc.createElement('img');
-                            img.src = shapeDataUris.get(dataUrl);
+                            img.src = blobSvgUris.get(dataUrl);
                             const style = obj.getAttribute('style');
-                            if (style) {
+                            if (style)
                                 img.setAttribute('style', style);
-                            }
                             obj.parentNode?.replaceChild(img, obj);
                         }
                     });
+                    // Replace object-fit images with a background-size div so they
+                    // render cropped/contained instead of stretched.
+                    _doc.querySelectorAll('img').forEach((img) => {
+                        const src = img.currentSrc || img.src;
+                        const fitInfo = objectFitImages.get(src);
+                        if (fitInfo) {
+                            const div = _doc.createElement('div');
+                            div.className = img.className;
+                            div.style.cssText = img.getAttribute('style') || '';
+                            div.style.backgroundImage = `url("${img.src}")`;
+                            div.style.backgroundSize = fitInfo.fit;
+                            div.style.backgroundPosition = fitInfo.position;
+                            div.style.backgroundRepeat = 'no-repeat';
+                            div.style.width = `${fitInfo.width}px`;
+                            div.style.height = `${fitInfo.height}px`;
+                            img.parentNode?.replaceChild(div, img);
+                        }
+                    });
+                    // Replace video iframes (blank in html2canvas) with their poster
+                    // thumbnail rendered as a background-size div.
+                    _doc
+                        .querySelectorAll('iframe')
+                        .forEach((iframe) => {
+                        const id = getYouTubeId(iframe.src);
+                        const thumb = id ? videoThumbs.get(id) : undefined;
+                        if (!thumb)
+                            return;
+                        const div = _doc.createElement('div');
+                        div.style.cssText = iframe.getAttribute('style') || '';
+                        div.style.width = `${thumb.width}px`;
+                        div.style.height = `${thumb.height}px`;
+                        div.style.backgroundImage = `url("${thumb.dataUri}")`;
+                        div.style.backgroundSize = 'cover';
+                        div.style.backgroundPosition = 'center';
+                        div.style.backgroundColor = '#000000';
+                        iframe.parentNode?.replaceChild(div, iframe);
+                    });
                 },
             });
             const base64Image = canvas.toDataURL('image/jpeg', 0.8); // Use JPEG with 80% quality for smaller size