@designcrowd/library.brand-page 6.0.0 → 6.0.1-ast-bg-shape

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

@@ -1303,7 +1303,15 @@
         "media": "Media",
         "replaceMedia": "Replace Media",
         "overlayColor": "Overlay color",
-        "overlayOpacity": "Overlay opacity"
+        "overlayOpacity": "Overlay opacity",
+        "shape": "Shape",
+        "singleShape": "Single shape",
+        "multipleShapes": "Multiple shapes",
+        "shapeColor": "Shape color",
+        "opacity": "Opacity",
+        "size": "Size",
+        "screenPlacement": "Screen placement (%)",
+        "offset": "Offset (%)"
     },
     "colorPicker": {
         "newColor": "New Color",

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

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { A as E, a as T, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as G, j as t, k as D, l as P, m as R, n as L, o as M, p as o, q as r, r as n, s as b, t as F, u as l, v as i, w as g, x as B, y as c, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as K, J as k, K as m, L as V, M as X, N as v, O as h, P as W, Q as f, R as x, S as z, T as w, U as Z, V as j, W as q, X as Q, Y as J, Z as $, $ as aa, a0 as _a, a1 as Ea, a2 as Ta, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as Ga, ac as ta, ad as Da, ae as Pa, af as Ra, ag as La, ah as Ma, ai as oa, aj as ra, ak as na, al as ba, am as Fa, an as la, ao as ia, ap as ga, aq as Ba, ar as ca, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as Ka, aA as ka, aB as ma, aC as Va, aD as Xa, aE as va, aF as ha, aG as Wa, aH as fa, aI as xa, aJ as za, aK as wa, aL as Za, aM as ja, aN as qa, aO as Qa, aP as Ja, aQ as $a, aR as a_, aS as __, aT as E_, aU as T_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as G_, b2 as t_, b3 as D_, b4 as P_, b5 as R_, b6 as L_, b7 as M_, b8 as o_, b9 as r_, ba as n_, bb as b_, bc as F_, bd as l_, be as i_, bf as g_, bg as B_, bh as c_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as K_, bq as k_, br as m_, bs as V_, bt as X_, bu as v_, bv as h_, bw as W_, bx as f_, by as x_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as q_, bE as Q_, bF as J_, bG as $_, bH as aE, bI as _E, bJ as EE, bK as TE, bL as sE, bM as IE, bN as SE, bO as NE, bP as eE, bQ as AE, bR as OE, bS as CE, bT as GE, bU as tE, bV as DE, bW as PE, bX as RE, bY as LE, bZ as ME, b_ as oE, b$ as rE, c0 as nE, c1 as bE, c2 as FE, c3 as lE, c4 as iE, c5 as gE, c6 as BE, c7 as cE, c8 as YE, c9 as UE, ca as dE, cb as uE, cc as HE, cd as pE, ce as yE, cf as KE, cg as kE, ch as mE, ci as VE, cj as XE, ck as vE, cl as hE, cm as WE, cn as fE, co as xE, cp as zE, cq as wE, cr as ZE } from "./lib-Cfx4mNMR.js";
+import { A as E, a as T, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as G, j as t, k as D, l as P, m as R, n as L, o as M, p as o, q as r, r as n, s as b, t as F, u as l, v as i, w as g, x as B, y as c, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as K, J as k, K as m, L as V, M as X, N as v, O as h, P as W, Q as f, R as x, S as z, T as w, U as Z, V as j, W as q, X as Q, Y as J, Z as $, $ as aa, a0 as _a, a1 as Ea, a2 as Ta, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as Ga, ac as ta, ad as Da, ae as Pa, af as Ra, ag as La, ah as Ma, ai as oa, aj as ra, ak as na, al as ba, am as Fa, an as la, ao as ia, ap as ga, aq as Ba, ar as ca, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as Ka, aA as ka, aB as ma, aC as Va, aD as Xa, aE as va, aF as ha, aG as Wa, aH as fa, aI as xa, aJ as za, aK as wa, aL as Za, aM as ja, aN as qa, aO as Qa, aP as Ja, aQ as $a, aR as a_, aS as __, aT as E_, aU as T_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as G_, b2 as t_, b3 as D_, b4 as P_, b5 as R_, b6 as L_, b7 as M_, b8 as o_, b9 as r_, ba as n_, bb as b_, bc as F_, bd as l_, be as i_, bf as g_, bg as B_, bh as c_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as K_, bq as k_, br as m_, bs as V_, bt as X_, bu as v_, bv as h_, bw as W_, bx as f_, by as x_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as q_, bE as Q_, bF as J_, bG as $_, bH as aE, bI as _E, bJ as EE, bK as TE, bL as sE, bM as IE, bN as SE, bO as NE, bP as eE, bQ as AE, bR as OE, bS as CE, bT as GE, bU as tE, bV as DE, bW as PE, bX as RE, bY as LE, bZ as ME, b_ as oE, b$ as rE, c0 as nE, c1 as bE, c2 as FE, c3 as lE, c4 as iE, c5 as gE, c6 as BE, c7 as cE, c8 as YE, c9 as UE, ca as dE, cb as uE, cc as HE, cd as pE, ce as yE, cf as KE, cg as kE, ch as mE, ci as VE, cj as XE, ck as vE, cl as hE, cm as WE, cn as fE, co as xE, cp as zE, cq as wE, cr as ZE } from "./lib-Dfr7gLQv.js";
 import { createPinia as qE, setActivePinia as QE } from "pinia";
 export {
   E as ABOUT_SECTION_SETTINGS_CONFIG,