@designcrowd/library.brand-page 5.18.9 → 5.19.1-error-html2canvas-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/clients/asset-library-clients.js

@@ -74,18 +74,25 @@ export default class AssetLibraryClient {
         });
     }
     async getBrandPageMetadataAsync(s3Url) {
-        try {
-            const response = await axios.get(s3Url, {
-                timeout: 10000,
-                headers: {
-                    Accept: 'application/json',
-                },
-            });
-            return response.data;
-        }
-        catch (error) {
-            console.error('Error fetching brand page metadata:', error);
-            return null;
+        const maxAttempts = 2;
+        for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+            try {
+                const response = await axios.get(s3Url, {
+                    timeout: 30000,
+                    headers: {
+                        Accept: 'application/json',
+                    },
+                });
+                return response.data;
+            }
+            catch (error) {
+                console.error(`Error fetching brand page metadata (attempt ${attempt}/${maxAttempts}):`, error);
+                if (attempt === maxAttempts) {
+                    return null;
+                }
+                await new Promise((resolve) => setTimeout(resolve, 500));
+            }
         }
+        return null;
     }
 }

package/lib/src/composables/useSnapshot.js

@@ -131,13 +131,17 @@ export function useSnapshot() {
             // 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.
+            // Inline every shape's blob-backed SVG as a data: URI up front. Shapes
+            // (content + background) render their coloured SVG via an <img> whose src
+            // is a `blob:` URL from URL.createObjectURL. The owning component revokes
+            // that blob on re-render (colour/size/imageUrl change) and on unmount —
+            // exactly what an AI "change all my contents" run triggers right before we
+            // capture. html2canvas fetches each <img> src ASYNCHRONOUSLY while
+            // rendering, so a concurrent revoke leaves it fetching a dead blob URL →
+            // the shape 404s and snapshots blank. A data: URI can't be revoked, so
+            // swapping the blob for one in the clone removes the race.
             const blobSvgUris = new Map();
-            const blobSources = Array.from(element.querySelectorAll('.c-shape-object object')).map((o) => o.getAttribute('data'));
+            const blobSources = Array.from(element.querySelectorAll('.c-shape-object img')).map((img) => img.getAttribute('src'));
             for (const src of blobSources) {
                 if (src && src.startsWith('blob:') && !blobSvgUris.has(src)) {
                     try {
@@ -245,19 +249,15 @@ export function useSnapshot() {
                         height: 'auto',
                         overflow: 'visible',
                     });
-                    // Swap content shape <object>s for <img> using the pre-fetched data
-                    // URIs (html2canvas can't render <object> SVGs directly).
+                    // Repoint each shape <img> from its (revocable) blob: src to the
+                    // pre-fetched data: URI so html2canvas never fetches a blob that may
+                    // have been revoked mid-capture.
                     _doc
-                        .querySelectorAll('.c-shape-object object')
-                        .forEach((obj) => {
-                        const dataUrl = obj.getAttribute('data');
-                        if (dataUrl && blobSvgUris.has(dataUrl)) {
-                            const img = _doc.createElement('img');
-                            img.src = blobSvgUris.get(dataUrl);
-                            const style = obj.getAttribute('style');
-                            if (style)
-                                img.setAttribute('style', style);
-                            obj.parentNode?.replaceChild(img, obj);
+                        .querySelectorAll('.c-shape-object img')
+                        .forEach((img) => {
+                        const src = img.getAttribute('src');
+                        if (src && blobSvgUris.has(src)) {
+                            img.src = blobSvgUris.get(src);
                         }
                     });
                     // Replace object-fit images with a background-size div so they