@mce/bigesj 0.11.0 → 0.11.2

package/dist/index.js

@@ -1,110 +1,132 @@
-import { useEditor as rt, definePlugin as nt } from "mce";
-import { assets as B, Element2D as ot } from "modern-canvas";
-import { ref as Z, effectScope as it, getCurrentScope as ft, onScopeDispose as ct, onBeforeUnmount as lt } from "vue";
-import { idGenerator as F, normalizeCRLF as Mt, isGradient as dt } from "modern-idoc";
-import { gunzipSync as Lt } from "fflate";
-const X = Z([]);
-function wt(e, r) {
-  const o = [];
-  for (let t = 0; t <= r.length; t++)
-    o[t] = [t];
-  for (let t = 0; t <= e.length; t++)
-    o[0][t] = t;
-  for (let t = 1; t <= r.length; t++)
-    for (let s = 1; s <= e.length; s++) {
-      const i = e[s - 1] === r[t - 1] ? 0 : 1;
-      o[t][s] = Math.min(o[t - 1][s] + 1, o[t][s - 1] + 1, o[t - 1][s - 1] + i);
+import { useEditor, definePlugin } from "mce";
+import { assets, Element2D } from "modern-canvas";
+import { ref, onBeforeUnmount } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+import { idGenerator, normalizeCRLF, isGradient } from "modern-idoc";
+import { gunzipSync } from "fflate";
+const bigeFonts = ref([]);
+function levenshteinDistance(a, b) {
+  const matrix = [];
+  for (let i = 0; i <= b.length; i++) {
+    matrix[i] = [i];
+  }
+  for (let j = 0; j <= a.length; j++) {
+    matrix[0][j] = j;
+  }
+  for (let i = 1; i <= b.length; i++) {
+    for (let j = 1; j <= a.length; j++) {
+      const cost = a[j - 1] === b[i - 1] ? 0 : 1;
+      matrix[i][j] = Math.min(matrix[i - 1][j] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j - 1] + cost);
     }
-  return o[r.length][e.length];
+  }
+  return matrix[b.length][a.length];
 }
-function mt() {
+function useFonts() {
   const {
-    loadFont: e
-  } = rt(), r = Z(/* @__PURE__ */ new Map());
-  async function o(i) {
-    let n = X.value;
-    return n.length || (n = await fetch(i).then((f) => f.json()).then((f) => f.data.datalist), X.value = n), n;
+    loadFont: baseLoadFont
+  } = useEditor();
+  const fontPromises = ref(/* @__PURE__ */ new Map());
+  async function loadBigeFonts(url) {
+    let result = bigeFonts.value;
+    if (!result.length) {
+      result = await fetch(url).then((rep) => rep.json()).then((res) => res.data.datalist);
+      bigeFonts.value = result;
+    }
+    return result;
   }
-  function t(i, n = X.value) {
-    const f = new Map(n.map((a, M) => [a.id, M])), c = new Map(
-      n.flatMap((a, M) => [...a.en_name.split(","), ...a.name.split(",")].map((L) => [L, M]))
-    ), d = i.replace(/"/g, "").split(",");
-    let l;
-    if (d.forEach((a) => {
-      l ??= f.get(a), l ??= c.get(a);
-    }), l === void 0) {
-      let a;
-      d.forEach((M) => {
-        let L = M;
-        L.endsWith(" R") ? L = `${L.substring(0, L.length - 2)}常规` : L.endsWith(" B") && (L = `${L.substring(0, L.length - 2)}粗体`);
-        const w = L.length;
-        c.forEach((h, u) => {
-          const C = wt(L, u);
-          if (w <= C)
+  function searchBigeFont(keyword, fonts = bigeFonts.value) {
+    const idIndexMap = new Map(fonts.map((item, index2) => [item.id, index2]));
+    const nameIndexMap = new Map(
+      fonts.flatMap((item, index2) => {
+        return [...item.en_name.split(","), ...item.name.split(",")].map((name) => {
+          return [name, index2];
+        });
+      })
+    );
+    const fontFamilies = keyword.replace(/"/g, "").split(",");
+    let index;
+    fontFamilies.forEach((fontFamily) => {
+      index ??= idIndexMap.get(fontFamily);
+      index ??= nameIndexMap.get(fontFamily);
+    });
+    if (index === void 0) {
+      let prevWeight;
+      fontFamilies.forEach((rawA) => {
+        let a = rawA;
+        if (a.endsWith(" R")) {
+          a = `${a.substring(0, a.length - 2)}常规`;
+        } else if (a.endsWith(" B")) {
+          a = `${a.substring(0, a.length - 2)}粗体`;
+        }
+        const aLen = a.length;
+        nameIndexMap.forEach((i, b) => {
+          const dist = levenshteinDistance(a, b);
+          if (aLen <= dist) {
             return;
-          const m = -(C * 0.9 + (u.endsWith("常规") ? 0 : 1) * 0.1);
-          (a === void 0 || m > a) && (a = m, l = h);
+          }
+          const weight = -(dist * 0.9 + (b.endsWith("常规") ? 0 : 1) * 0.1);
+          if (prevWeight === void 0 || weight > prevWeight) {
+            prevWeight = weight;
+            index = i;
+          }
         });
       });
     }
-    return l !== void 0 ? n[l] : void 0;
+    return index !== void 0 ? fonts[index] : void 0;
   }
-  async function s(i) {
-    const n = typeof i == "string" ? [i] : i, f = [];
-    for (const c of n) {
-      let d = r.value.get(c);
-      if (!d) {
-        const l = t(c);
-        if (l && (d = r.value.get(l.en_name), !d)) {
-          const a = Array.from(
-            new Set(
-              [c, l.en_name].filter(Boolean).map((M) => M.replace(/"/g, ""))
-            )
-          );
-          d = e({
-            family: a,
-            src: l.fonturl
-          }), a.forEach((M) => r.value.set(M, d)), r.value.set(String(c), d);
+  async function loadFont(name) {
+    const names = typeof name === "string" ? [name] : name;
+    const result = [];
+    for (const name2 of names) {
+      let promise = fontPromises.value.get(name2);
+      if (!promise) {
+        const font = searchBigeFont(name2);
+        if (font) {
+          promise = fontPromises.value.get(font.en_name);
+          if (!promise) {
+            const names2 = Array.from(
+              new Set(
+                [name2, font.en_name].filter(Boolean).map((v) => v.replace(/"/g, ""))
+              )
+            );
+            promise = baseLoadFont({
+              family: names2,
+              src: font.fonturl
+            });
+            names2.forEach((name3) => fontPromises.value.set(name3, promise));
+            fontPromises.value.set(String(name2), promise);
+          }
         }
       }
-      d && f.push(d);
+      promise && result.push(promise);
     }
-    return await Promise.all(f);
+    return await Promise.all(result);
   }
   return {
-    bigeFonts: X,
-    searchBigeFont: t,
-    loadBigeFonts: o,
-    loadFont: s
+    bigeFonts,
+    searchBigeFont,
+    loadBigeFonts,
+    loadFont
   };
 }
-function ut(e, r) {
-  return ft() ? (ct(e, r), !0) : !1;
-}
-const gt = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-// @__NO_SIDE_EFFECTS__
-function yt(e) {
-  if (!gt) return e;
-  let r = 0, o, t;
-  const s = () => {
-    r -= 1, t && r <= 0 && (t.stop(), o = void 0, t = void 0);
-  };
-  return ((...i) => (r += 1, t || (t = it(!0), o = t.run(() => e(...i))), ut(s), o));
-}
-const _ = /* @__PURE__ */ yt(() => {
-  const e = /* @__PURE__ */ new Map();
-  function r(t, s) {
-    let i = e.get(t);
-    return i || (i = fetch(t).then(s), e.set(t, i)), i;
+const useSharedTextAssets = createSharedComposable(() => {
+  const requests = /* @__PURE__ */ new Map();
+  function baseFetch(url, handle) {
+    let rep = requests.get(url);
+    if (!rep) {
+      rep = fetch(url).then(handle);
+      requests.set(url, rep);
+    }
+    return rep;
   }
-  async function o(t) {
-    return r(t, (s) => s.text());
+  async function fetchToText(url) {
+    return baseFetch(url, (rep) => rep.text());
   }
   return {
-    fetchToText: o
+    fetchToText
   };
-}), Y = {
+});
+const animations = {
   easing: {
     匀速: "linear",
     加速: "cubic-bezier(0.55, 0, 1, 0.45)",
@@ -437,406 +459,699 @@ const _ = /* @__PURE__ */ yt(() => {
     ]
   }
 };
-function U(e, r, o) {
+function convertAnimation(el, animation, type) {
   const {
-    name: t,
-    delay: s = 0,
-    duration: i,
-    iterations: n,
-    mode: f,
-    easing: c,
-    path: d,
-    offsetRotate: l,
-    ...a
-  } = r;
-  let M;
-  if (t === "自定义路径" && d) {
-    let L = `M ${e.style.width / 2} ${e.style.height / 2}`;
-    d.forEach((h) => {
-      const u = Object.keys(h);
-      L += ` ${u[0]}${h[u[0]].join(" ")}`;
+    name,
+    delay = 0,
+    duration,
+    iterations,
+    mode,
+    easing,
+    path,
+    offsetRotate,
+    ...meta
+  } = animation;
+  let keyframes;
+  if (name === "自定义路径" && path) {
+    let d = `M ${el.style.width / 2} ${el.style.height / 2}`;
+    path.forEach((v) => {
+      const keys = Object.keys(v);
+      d += ` ${keys[0]}${v[keys[0]].join(" ")}`;
     });
-    const w = `path("${L}")`;
-    switch (o) {
+    const offsetPath = `path("${d}")`;
+    switch (type) {
       case "in":
-        M = [
-          { opacity: 0, offsetDistance: "100%", offsetPath: w, offsetRotate: l },
-          { offsetDistance: "0%", offsetPath: w, offsetRotate: l }
+        keyframes = [
+          { opacity: 0, offsetDistance: "100%", offsetPath, offsetRotate },
+          { offsetDistance: "0%", offsetPath, offsetRotate }
         ];
         break;
       case "stay":
-        M = [
-          { offsetDistance: "0%", offsetPath: w, offsetRotate: l },
-          { offsetDistance: "100%", offsetPath: w, offsetRotate: l }
+        keyframes = [
+          { offsetDistance: "0%", offsetPath, offsetRotate },
+          { offsetDistance: "100%", offsetPath, offsetRotate }
         ];
         break;
       case "out":
-        M = [
-          { offsetDistance: "0%", offsetPath: w, offsetRotate: l },
-          { opacity: 0, offsetDistance: "100%", offsetPath: w, offsetRotate: l }
+        keyframes = [
+          { offsetDistance: "0%", offsetPath, offsetRotate },
+          { opacity: 0, offsetDistance: "100%", offsetPath, offsetRotate }
         ];
         break;
     }
-  } else
-    switch (o) {
+  } else {
+    switch (type) {
       case "in":
-        M = Y.textIn[t]?.[0] ?? Y.in[t];
+        keyframes = animations.textIn[name]?.[0] ?? animations.in[name];
         break;
       case "stay":
-        M = Y.stay[t];
+        keyframes = animations.stay[name];
         break;
       case "out":
-        M = Y.out[t];
+        keyframes = animations.out[name];
         break;
     }
+  }
   return {
-    id: F(),
-    name: r.name ?? r.title ?? r.id,
-    delay: s,
-    duration: t ? i * (n || 1) : 0,
-    effectMode: f === "逐字" || f === "逐行" ? "sibling" : "parent",
-    keyframes: M ?? [],
-    easing: Y.easing[c],
+    id: idGenerator(),
+    name: animation.name ?? animation.title ?? animation.id,
+    delay,
+    duration: name ? duration * (iterations || 1) : 0,
+    effectMode: mode === "逐字" || mode === "逐行" ? "sibling" : "parent",
+    keyframes: keyframes ?? [],
+    easing: animations.easing[easing],
     meta: {
-      ...a,
+      ...meta,
       inCanvasIs: "Animation",
       inPptIs: "Animation",
       inEditorIs: "Node"
     }
   };
 }
-function jt(e) {
-  if (!e.animations?.length)
+function parseAnimations(el) {
+  if (!el.animations?.length) {
     return {
       delay: 0,
       duration: 0,
       animations: []
     };
-  let r, o, t;
-  e.animations[0].in ? (r = e.animations[0].in, o = e.animations[0].stay, t = e.animations[0].out) : (r = e.animations?.find((f) => f.category === "in"), o = e.animations?.find((f) => f.category === "stay"), t = e.animations?.find((f) => f.category === "out"));
-  const s = r?.delay ?? 0, i = t ? t.delay - s + t.duration : 0, n = [];
-  return r && n.push(
-    U(e, {
-      ...r,
-      delay: 0
-    }, "in")
-  ), o && n.push(
-    U(e, {
-      ...o,
-      delay: o.delay - s
-    }, "stay")
-  ), t && n.push(
-    U(e, {
-      ...t,
-      delay: t.delay - s
-    }, "out")
-  ), {
-    delay: s,
-    duration: i - s,
-    animations: n.filter((f) => !!f?.keyframes)
+  }
+  let _animIn;
+  let _animStay;
+  let _animOut;
+  if (el.animations[0].in) {
+    _animIn = el.animations[0].in;
+    _animStay = el.animations[0].stay;
+    _animOut = el.animations[0].out;
+  } else {
+    _animIn = el.animations?.find((v) => v.category === "in");
+    _animStay = el.animations?.find((v) => v.category === "stay");
+    _animOut = el.animations?.find((v) => v.category === "out");
+  }
+  const startTime = _animIn?.delay ?? 0;
+  const endTime = _animOut ? _animOut.delay - startTime + _animOut.duration : 0;
+  const animations2 = [];
+  if (_animIn) {
+    animations2.push(
+      convertAnimation(el, {
+        ..._animIn,
+        delay: 0
+      }, "in")
+    );
+  }
+  if (_animStay) {
+    animations2.push(
+      convertAnimation(el, {
+        ..._animStay,
+        delay: _animStay.delay - startTime
+      }, "stay")
+    );
+  }
+  if (_animOut) {
+    animations2.push(
+      convertAnimation(el, {
+        ..._animOut,
+        delay: _animOut.delay - startTime
+      }, "out")
+    );
+  }
+  return {
+    delay: startTime,
+    duration: endTime - startTime,
+    animations: animations2.filter((v) => !!v?.keyframes)
   };
 }
-async function V(e) {
+async function convertImageElementToUrl(el) {
+  const {
+    transform = {},
+    style = {},
+    maskUrl,
+    imageEffects = [],
+    imageEffectsRatio = 1
+  } = el;
+  const url = el.clipUrl || el.url;
+  const {
+    translateX = 0,
+    translateY = 0,
+    zoom = 1
+  } = transform ?? {};
+  const {
+    scaleX = 1,
+    scaleY = 1,
+    filter
+  } = style;
+  if (translateX === 0 && translateY === 0 && zoom === 1 && scaleX === 1 && scaleY === 1 && !maskUrl && !filter && !imageEffects.length) {
+    return url;
+  }
+  const img = await assets.fetchImageBitmap(url);
+  const {
+    originWidth = img.width,
+    originHeight = img.height,
+    imageWidth = originWidth,
+    imageHeight = originHeight
+  } = transform;
   const {
-    transform: r = {},
-    style: o = {},
-    maskUrl: t,
-    imageEffects: s = [],
-    imageEffectsRatio: i = 1
-  } = e, n = e.clipUrl || e.url, {
-    translateX: f = 0,
-    translateY: c = 0,
-    zoom: d = 1
-  } = r ?? {}, {
-    scaleX: l = 1,
-    scaleY: a = 1,
-    filter: M
-  } = o;
-  if (f === 0 && c === 0 && d === 1 && l === 1 && a === 1 && !t && !M && !s.length)
-    return n;
-  const L = await B.fetchImageBitmap(n), {
-    originWidth: w = L.width,
-    originHeight: h = L.height,
-    imageWidth: u = w,
-    imageHeight: C = h
-  } = r, {
-    width: m = w,
-    height: g = h
-  } = o, T = window.devicePixelRatio || 1, [j, y] = W(m, g, T);
-  if (M && (y.filter = M), y.scale(l, a), y.translate(l < 0 ? -m : 0, a < 0 ? -g : 0), t) {
-    const D = await B.fetchImageBitmap(t);
-    y.drawImage(D, 0, 0, D.width, D.height, 0, 0, m, g), D.close(), y.globalCompositeOperation = "source-in";
+    width = originWidth,
+    height = originHeight
+  } = style;
+  const dpr = window.devicePixelRatio || 1;
+  const [canvas, ctx] = createCanvas(width, height, dpr);
+  if (filter)
+    ctx.filter = filter;
+  ctx.scale(scaleX, scaleY);
+  ctx.translate(scaleX < 0 ? -width : 0, scaleY < 0 ? -height : 0);
+  if (maskUrl) {
+    const mask = await assets.fetchImageBitmap(maskUrl);
+    ctx.drawImage(mask, 0, 0, mask.width, mask.height, 0, 0, width, height);
+    mask.close();
+    ctx.globalCompositeOperation = "source-in";
   }
-  const A = u * d, k = C * d, tt = -(A / 2 - u / 2) + f, et = -(k / 2 - C / 2) + c;
-  if (y.drawImage(L, 0, 0, L.width, L.height, tt, et, A, k), L.close(), y.globalCompositeOperation = "source-over", s.length > 0) {
-    const S = {
-      x: (m - m * 0.9) / 2,
-      y: (g - g * 0.9) / 2
-    }, v = await createImageBitmap(j);
-    y.clearRect(0, 0, j.width, j.height), y.scale(0.9, 0.9);
-    for (let G = s.length - 1; G >= 0; G--) {
-      const { filling: b, offset: R, stroke: at } = s[G];
-      let z = v;
-      if (b) {
-        const [I, x] = W(m, g, T);
-        if (x.drawImage(z, 0, 0, m, g), x.globalCompositeOperation = "source-in", b.color) {
-          const [p, N] = W(m, g, T);
-          N.fillStyle = b.color, N.fillRect(0, 0, m, g), x.drawImage(p, 0, 0, m, g);
-        } else if (b.imageContent?.image) {
-          const p = await B.fetchImageBitmap(b.imageContent.image);
-          x.drawImage(p, 0, 0, m, g), p.close();
+  const dw = imageWidth * zoom;
+  const dh = imageHeight * zoom;
+  const dx = -(dw / 2 - imageWidth / 2) + translateX;
+  const dy = -(dh / 2 - imageHeight / 2) + translateY;
+  ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
+  img.close();
+  ctx.globalCompositeOperation = "source-over";
+  if (imageEffects.length > 0) {
+    const scale = 0.9;
+    const center = {
+      x: (width - width * scale) / 2,
+      y: (height - height * scale) / 2
+    };
+    const canvasBitmap = await createImageBitmap(canvas);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(scale, scale);
+    for (let i = imageEffects.length - 1; i >= 0; i--) {
+      const { filling, offset, stroke } = imageEffects[i];
+      let effectCanvas = canvasBitmap;
+      if (filling) {
+        const [canvas1, ctx1] = createCanvas(width, height, dpr);
+        ctx1.drawImage(effectCanvas, 0, 0, width, height);
+        ctx1.globalCompositeOperation = "source-in";
+        if (filling.color) {
+          const [canvas2, ctx2] = createCanvas(width, height, dpr);
+          ctx2.fillStyle = filling.color;
+          ctx2.fillRect(0, 0, width, height);
+          ctx1.drawImage(canvas2, 0, 0, width, height);
+        } else if (filling.imageContent?.image) {
+          const img2 = await assets.fetchImageBitmap(filling.imageContent.image);
+          ctx1.drawImage(img2, 0, 0, width, height);
+          img2.close();
         }
-        z = I;
+        effectCanvas = canvas1;
       }
-      if (at?.forEach(({ width: I, color: x }) => {
-        z = new ht().use((p, N, O) => {
-          const [, J] = W(N.width, N.height);
-          J.drawImage(N, 0, 0);
-          const st = Ct(J), $ = O.thickness, H = O.thickness;
-          p.strokeStyle = O.color, p.lineWidth = O.thickness * 2, p.lineJoin = "round", st.forEach((E) => {
-            p.beginPath(), p.moveTo($ + E[0].x, H + E[1].y);
-            for (let Q = 1; Q < E.length; Q++)
-              p.lineTo($ + E[Q].x, H + E[Q].y);
-            p.closePath();
-          }), p.stroke();
-        }).make(z, {
-          color: x,
-          thickness: I / 50 * i
+      stroke?.forEach(({ width: width2, color }) => {
+        effectCanvas = new ImageStroke().use((ctx2, image, options) => {
+          const [, ctx1] = createCanvas(image.width, image.height);
+          ctx1.drawImage(image, 0, 0);
+          const paths = getContours(ctx1);
+          const x = options.thickness;
+          const y = options.thickness;
+          ctx2.strokeStyle = options.color;
+          ctx2.lineWidth = options.thickness * 2;
+          ctx2.lineJoin = "round";
+          paths.forEach((path) => {
+            ctx2.beginPath();
+            ctx2.moveTo(x + path[0].x, y + path[1].y);
+            for (let i2 = 1; i2 < path.length; i2++) {
+              ctx2.lineTo(x + path[i2].x, y + path[i2].y);
+            }
+            ctx2.closePath();
+          });
+          ctx2.stroke();
+        }).make(effectCanvas, {
+          color,
+          thickness: width2 / 50 * imageEffectsRatio
         });
-      }), R) {
-        let { x: I, y: x } = R;
-        I = I / 50 * i * 200, x = x / 50 * i * 200, y.drawImage(z, I + S.x, x + S.y, m, g);
-      } else
-        y.drawImage(z, S.x, S.y, m, g);
+      });
+      if (offset) {
+        let { x, y } = offset;
+        x = x / 50 * imageEffectsRatio * 200;
+        y = y / 50 * imageEffectsRatio * 200;
+        ctx.drawImage(effectCanvas, x + center.x, y + center.y, width, height);
+      } else {
+        ctx.drawImage(effectCanvas, center.x, center.y, width, height);
+      }
     }
-    v.close();
+    canvasBitmap.close();
   }
-  return await new Promise((D) => {
-    j.toBlob((S) => {
+  return await new Promise((resolve) => {
+    canvas.toBlob((blob) => {
       try {
-        D(URL.createObjectURL(S));
-      } catch (v) {
-        console.error(`Failed to URL.createObjectURL, url: ${n}`, v), D(n);
+        resolve(URL.createObjectURL(blob));
+      } catch (e) {
+        console.error(`Failed to URL.createObjectURL, url: ${url}`, e);
+        resolve(url);
       }
     });
   });
 }
-function W(e, r, o = 1) {
-  const t = document.createElement("canvas");
-  t.width = e * o, t.height = r * o, t.style.width = `${e}px`, t.style.height = `${r}px`;
-  const s = t.getContext("2d");
-  return s.scale(o, o), [t, s];
+function createCanvas(width, height, ratio = 1) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(ratio, ratio);
+  return [canvas, ctx];
 }
-class ht {
+class ImageStroke {
   canvas = document.createElement("canvas");
   method;
-  use(r) {
-    return this.method = r, this;
+  use(method) {
+    this.method = method;
+    return this;
   }
-  make(r, o) {
-    const { canvas: t } = this, s = this.canvas.getContext("2d"), i = o.thickness * 2, [n, f] = [r.width, r.height].map((c) => c + i);
-    return (n !== t.width || f !== t.height) && (t.width = n, t.height = f), s.clearRect(0, 0, s.canvas.width, s.canvas.height), this.method(s, r, o), s.drawImage(r, o.thickness, o.thickness), t;
+  make(image, options) {
+    const { canvas } = this;
+    const ctx = this.canvas.getContext("2d");
+    const strokeSize = options.thickness * 2;
+    const [resultWidth, resultHeight] = [image.width, image.height].map((val) => val + strokeSize);
+    if (resultWidth !== canvas.width || resultHeight !== canvas.height) {
+      canvas.width = resultWidth;
+      canvas.height = resultHeight;
+    }
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    this.method(ctx, image, options);
+    ctx.drawImage(image, options.thickness, options.thickness);
+    return canvas;
   }
 }
-function Ct(e) {
-  const t = e.canvas.width, s = e.canvas.height, i = [];
-  let n = 3;
-  const f = 100;
-  return (() => {
-    const d = [], l = new Uint32Array(e.getImageData(0, 0, t, s).data.buffer);
-    let a, M, L, w, h = -1, u, C = 9;
-    const m = [9, 0, 3, 3, 2, 0, 9, 3, 1, 9, 1, 1, 2, 0, 2, 9];
-    function g(j, y) {
-      return j >= 0 && y >= 0 && j < t && y < s ? l[y * t + j] >>> 24 > f : !1;
+function getContours(ctx) {
+  const cx = 0;
+  const cy = 0;
+  const canvasWidth = ctx.canvas.width;
+  const canvasHeight = ctx.canvas.height;
+  const paths = [];
+  let lastPos = 3;
+  const alpha = 100;
+  const trace = () => {
+    const path = [];
+    const data = new Uint32Array(ctx.getImageData(cx, cy, canvasWidth, canvasHeight).data.buffer);
+    let x;
+    let y;
+    let startX;
+    let startY;
+    let startPos = -1;
+    let step;
+    let prevStep = 9;
+    const steps = [9, 0, 3, 3, 2, 0, 9, 3, 1, 9, 1, 1, 2, 0, 2, 9];
+    function getState(x2, y2) {
+      return x2 >= 0 && y2 >= 0 && x2 < canvasWidth && y2 < canvasHeight ? data[y2 * canvasWidth + x2] >>> 24 > alpha : false;
     }
-    function T(j, y) {
-      let A = 0;
-      return g(j - 1, y - 1) && (A += 1), g(j, y - 1) && (A += 2), g(j - 1, y) && (A += 4), g(j, y) && (A += 8), A === 6 ? C === 0 ? 2 : 3 : A === 9 ? C === 3 ? 0 : 1 : m[A];
+    function getNextStep(x2, y2) {
+      let v = 0;
+      if (getState(x2 - 1, y2 - 1)) {
+        v += 1;
+      }
+      if (getState(x2, y2 - 1)) {
+        v += 2;
+      }
+      if (getState(x2 - 1, y2)) {
+        v += 4;
+      }
+      if (getState(x2, y2)) {
+        v += 8;
+      }
+      if (v === 6)
+        return prevStep === 0 ? 2 : 3;
+      else if (v === 9)
+        return prevStep === 3 ? 0 : 1;
+      else
+        return steps[v];
     }
-    for (let j = n; j < l.length; j++)
-      if (l[j] >>> 24 > f) {
-        h = n = j;
+    for (let i = lastPos; i < data.length; i++) {
+      if (data[i] >>> 24 > alpha) {
+        startPos = lastPos = i;
         break;
       }
-    if (h >= 0) {
-      a = L = h % t, M = w = Math.floor(h / t);
-      do
-        u = T(a, M), u === 0 ? M-- : u === 1 ? M++ : u === 2 ? a-- : u === 3 && a++, u !== C && (d.push({ x: a + 0, y: M + 0 }), C = u);
-      while (a !== L || M !== w);
     }
-    return i.push(d), d;
-  })(), i;
+    if (startPos >= 0) {
+      x = startX = startPos % canvasWidth;
+      y = startY = Math.floor(startPos / canvasWidth);
+      do {
+        step = getNextStep(x, y);
+        if (step === 0)
+          y--;
+        else if (step === 1)
+          y++;
+        else if (step === 2)
+          x--;
+        else if (step === 3)
+          x++;
+        if (step !== prevStep) {
+          path.push({ x: x + cx, y: y + cy });
+          prevStep = step;
+        }
+      } while (x !== startX || y !== startY);
+    }
+    paths.push(path);
+    return path;
+  };
+  trace();
+  return paths;
 }
-async function pt(e) {
+async function convertSvgElementToUrl(el) {
   const {
-    id: r,
-    doc: o,
-    url: t,
-    style: s = {},
-    background: i = {}
-  } = e;
-  let n = o;
-  n || (n = await fetch(t).then((c) => c.text()));
-  const f = new DOMParser().parseFromString(
-    n.replace(new RegExp(`#el-${r} `, "gi"), "").replace(/data-colors\s/, " ").replace(/[a-z-]+="([^\s<]*<\S*)"/gi, ""),
+    id,
+    doc,
+    url,
+    style = {},
+    background = {}
+  } = el;
+  let xml = doc;
+  if (!xml) {
+    xml = await fetch(url).then((rep) => rep.text());
+  }
+  const svg = new DOMParser().parseFromString(
+    xml.replace(new RegExp(`#el-${id} `, "gi"), "").replace(/data-colors\s/, " ").replace(/[a-z-]+="([^\s<]*<\S*)"/gi, ""),
     "image/svg+xml"
   ).documentElement;
-  if (!(f instanceof SVGElement))
-    throw new TypeError(`Failed to DOMParser, parse svg to DOM error: ${n}`);
-  if (i.src) {
-    const c = `#${r}-fill-blip`, d = f.querySelector(c), l = d?.querySelector("image");
-    if (d && l)
+  if (!(svg instanceof SVGElement)) {
+    throw new TypeError(`Failed to DOMParser, parse svg to DOM error: ${xml}`);
+  }
+  if (background.src) {
+    const fillId = `#${id}-fill-blip`;
+    const fillPattern = svg.querySelector(fillId);
+    const fillImage = fillPattern?.querySelector("image");
+    if (fillPattern && fillImage) {
       try {
-        const a = await B.fetchImageBitmap(i.src).then((M) => {
-          const L = document.createElement("canvas");
-          return L.width = M.width, L.height = M.height, L.getContext("2d")?.drawImage(M, 0, 0), M.close(), L.toDataURL("image/png");
+        const base64Url = await assets.fetchImageBitmap(background.src).then((bitmap) => {
+          const canvas = document.createElement("canvas");
+          canvas.width = bitmap.width;
+          canvas.height = bitmap.height;
+          canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
+          bitmap.close();
+          return canvas.toDataURL("image/png");
         });
-        l?.setAttribute("href", a), d?.setAttribute("fill", c);
-      } catch (a) {
-        console.error(a);
+        fillImage?.setAttribute("href", base64Url);
+        fillPattern?.setAttribute("fill", fillId);
+      } catch (e) {
+        console.error(e);
       }
+    }
   }
-  return s.width && f.setAttribute("width", String(s.width * 2)), s.height && f.setAttribute("height", String(s.height * 2)), await V({
-    ...e,
+  if (style.width)
+    svg.setAttribute("width", String(style.width * 2));
+  if (style.height)
+    svg.setAttribute("height", String(style.height * 2));
+  return await convertImageElementToUrl({
+    ...el,
     transform: {
-      ...e.transform,
-      originWidth: s.width,
-      originHeight: s.height
+      ...el.transform,
+      originWidth: style.width,
+      originHeight: style.height
     },
-    url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(f.outerHTML)}`
+    url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.outerHTML)}`
   });
 }
-const At = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzIgNzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDcyIDcyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTE5LjMsMzguMWMwLjIsMC41LDAuNCwwLjksMC43LDEuNGMwLjIsMC4zLDAuNCwwLjQsMC44LDAuNGMwLjMsMCwwLjUtMC4xLDAuNi0wLjRjMC4xLTAuMywwLjEtMC42LDAuMi0wLjkgICBjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLjEsMC40LTAuMiwwLjYtMC4xYzAuMiwwLDAuNCwwLjEsMC41LDAuM2MwLjEsMC4yLDAuMiwwLjQsMC4xLDAuNmMtMC4xLDAuNi0wLjIsMS4yLTAuNCwxLjcgICBjLTAuMywwLjgtMC45LDEuMi0xLjcsMS4yYy0wLjksMC0xLjYtMC40LTIuMS0xLjJjLTAuMy0wLjQtMC41LTAuOC0wLjctMS4zYy0wLjQsMC4zLTEsMC42LTEuNywxYy0wLjUsMC4yLTAuOCwwLjEtMS4xLTAuMyAgIGMtMC4yLTAuNS0wLjEtMC45LDAuMy0xLjFjMC43LTAuNCwxLjQtMC44LDEuOS0xLjFjLTAuMi0wLjktMC40LTIuMS0wLjUtMy43TDE1LjksMzRjLTAuMiwwLTAuNCwwLTAuNi0wLjEgICBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4yLDAtMC40LDAuMi0wLjZzMC4zLTAuMywwLjUtMC4zbDEuMi0wLjFjLTAuMS0wLjktMC4xLTEuOS0wLjEtMi45YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMywwLjZjMCwwLjEsMCwxLDAuMSwyLjdsMy4yLTAuNGMwLjIsMCwwLjQsMCwwLjUsMC4xICAgYzAuMiwwLjEsMC4zLDAuMywwLjMsMC41czAsMC40LTAuMSwwLjVjLTAuMSwwLjItMC4zLDAuMy0wLjUsMC4zbC0zLjMsMC40YzAuMSwxLjIsMC4yLDIuMSwwLjMsMi44YzAuNy0wLjYsMS40LTEuNCwyLTIuMiAgIGMwLjMtMC40LDAuNy0wLjQsMS4xLTAuMmMwLjQsMC4zLDAuNCwwLjcsMC4yLDFDMjEuMywzNi4zLDIwLjQsMzcuMywxOS4zLDM4LjF6IE0yMC42LDMxLjFjLTAuMy0wLjItMC43LTAuNS0xLjEtMC44ICAgYy0wLjMtMC4zLTAuMy0wLjYtMC4xLTAuOWMwLjMtMC4zLDAuNi0wLjQsMS0wLjJjMC40LDAuMiwwLjcsMC41LDEuMSwwLjdjMC40LDAuMywwLjQsMC42LDAuMiwxQzIxLjMsMzEuMywyMSwzMS4zLDIwLjYsMzEuMXogICAgTTIzLjMsMzAuOWMwLTAuMiwwLjEtMC40LDAuMi0wLjVjMC4xLTAuMSwwLjMtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMSwwLjEsMC4yLDAuMywwLjIsMC41djYuNWMwLDAuMi0wLjEsMC40LTAuMiwwLjUgICBjLTAuMSwwLjEtMC4zLDAuMi0wLjYsMC4ycy0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjEtMC4yLTAuMy0wLjItMC41VjMwLjl6IE0yNC4zLDQxLjZjLTAuMiwwLTAuNC0wLjEtMC42LTAuMiAgIGMtMC4yLTAuMS0wLjItMC4zLTAuMi0wLjZjMC0wLjIsMC4xLTAuNCwwLjItMC42YzAuMi0wLjEsMC4zLTAuMiwwLjYtMC4yaDAuOWMwLjYsMCwxLTAuNCwxLTEuMXYtOS40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMiwwLjZWMzljMCwwLjgtMC4yLDEuNS0wLjcsMS45cy0xLjEsMC43LTEuOCwwLjdIMjQuM3oiLz4KCTxwYXRoIGQ9Ik00MC42LDM3LjdoLTMuOHYwLjdoNC40YzAuMSwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNGMwLDAuMS0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yICAgaC00LjR2MC43SDQyYzAuMiwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNHMtMC4xLDAuMy0wLjIsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMkgzMGMtMC4yLDAtMC4zLTAuMS0wLjQtMC4yICAgYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNHMwLjEtMC4zLDAuMi0wLjRjMC4xLTAuMSwwLjItMC4yLDAuNC0wLjJoNS4ydi0wLjdoLTQuNGMtMC4xLDAtMC4zLTAuMS0wLjQtMC4ycy0wLjItMC4yLTAuMi0wLjQgICBjMC0wLjEsMC4xLTAuMywwLjItMC40czAuMi0wLjIsMC40LTAuMmg0LjR2LTAuN2gtMy43aDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMnMtMC4yLTAuMy0wLjItMC42di0zLjFjMC0wLjIsMC4xLTAuNCwwLjItMC42ICAgYzAuMS0wLjEsMC4zLTAuMiwwLjYtMC4yaDMuOHYtMC44SDMwYy0wLjIsMC0wLjMtMC4xLTAuNC0wLjJjLTAuMS0wLjEtMC4yLTAuMi0wLjItMC40czAuMS0wLjMsMC4yLTAuNGMwLjEtMC4xLDAuMi0wLjIsMC40LTAuMiAgIGg1LjJ2LTAuOGMtMS40LDAtMi45LDAuMS00LjMsMC4xYy0wLjIsMC0wLjMsMC0wLjQtMC4xYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNGMwLTAuMiwwLTAuMywwLjItMC40YzAuMS0wLjEsMC4zLTAuMiwwLjQtMC4yICAgYzMuMywwLDYuOC0wLjEsMTAuMi0wLjNjMC4yLDAsMC4zLDAsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjMsMC4yLDAuNGMwLDAuMiwwLDAuMy0wLjEsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMiAgIGMtMS4xLDAtMi41LDAuMS00LjMsMC4xdjAuOGg1LjFjMC4yLDAsMC4zLDAuMSwwLjQsMC4yYzAuMSwwLjEsMC4yLDAuMiwwLjIsMC40cy0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yaC01LjEgICB2MC44aDMuOGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My4xYzAsMC4yLTAuMSwwLjQtMC4yLDAuNkM0MSwzNy43LDQwLjgsMzcuNyw0MC42LDM3Ljd6IE0zNS4xLDM0LjlWMzQgICBoLTIuOXYwLjlIMzUuMXogTTM1LjEsMzYuN3YtMC45aC0yLjl2MC45SDM1LjF6IE0zOS44LDM0LjlWMzRoLTIuOXYwLjlIMzkuOHogTTM5LjgsMzYuN3YtMC45aC0yLjl2MC45SDM5Ljh6Ii8+Cgk8cGF0aCBkPSJNNDUuNSw0MS4xYy0wLjMsMC40LTAuNywwLjUtMS4xLDAuM2MtMC40LTAuMy0wLjUtMC43LTAuMy0xLjFsMS0xLjdjMC4zLTAuNCwwLjctMC41LDEuMS0wLjNjMC40LDAuMywwLjUsMC43LDAuMywxLjEgICBMNDUuNSw0MS4xeiBNNTUsMzcuN2MtMC4xLDAtMC4xLDAtMC4yLDBoLTguOWMtMC4zLDAtMC41LTAuMS0wLjYtMC4yYy0wLjItMC4yLTAuMi0wLjQtMC4yLTAuNnYtMy40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjEtMC4xLDAuMy0wLjIsMC42LTAuMmgzLjN2LTMuMWMwLTAuMiwwLjEtMC40LDAuMi0wLjZjMC4yLTAuMiwwLjQtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMiwwLjIsMC4yLDAuNCwwLjIsMC42djAuM0g1NiAgIGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZzLTAuMSwwLjQtMC4yLDAuNWMtMC4xLDAuMS0wLjMsMC4yLTAuNiwwLjJoLTUuMnYxLjNoNGMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My40QzU1LjYsMzcuMyw1NS40LDM3LjYsNTUsMzcuN3ogTTUzLjksMzYuMnYtMmgtNy4xdjJINTMuOXogTTQ5LjYsNDAuN2MwLDAuMy0wLjEsMC41LTAuMiwwLjYgICBjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjItMC4yLTAuNC0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMiAgIHMwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTUyLjgsNDAuN2MwLDAuMi0wLjEsMC40LTAuMiwwLjZjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yICAgYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMi0wLjEtMC4yLTAuMy0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTU2LjYsNDAuM2MwLjIsMC40LDAuMSwwLjgtMC4zLDEuMWMtMC41LDAuMy0wLjgsMC4yLTEuMS0wLjNsLTEtMS43Yy0wLjItMC41LTAuMS0wLjgsMC4zLTEuMSAgIGMwLjUtMC4yLDAuOS0wLjEsMS4xLDAuM0w1Ni42LDQwLjN6Ii8+CjwvZz4KPC9zdmc+";
-async function xt(e, r = !1) {
-  const { fetchToText: o } = _(), t = {
-    ...e.style,
-    highlightReferImage: At,
+const highlightReferImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzIgNzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDcyIDcyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTE5LjMsMzguMWMwLjIsMC41LDAuNCwwLjksMC43LDEuNGMwLjIsMC4zLDAuNCwwLjQsMC44LDAuNGMwLjMsMCwwLjUtMC4xLDAuNi0wLjRjMC4xLTAuMywwLjEtMC42LDAuMi0wLjkgICBjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLjEsMC40LTAuMiwwLjYtMC4xYzAuMiwwLDAuNCwwLjEsMC41LDAuM2MwLjEsMC4yLDAuMiwwLjQsMC4xLDAuNmMtMC4xLDAuNi0wLjIsMS4yLTAuNCwxLjcgICBjLTAuMywwLjgtMC45LDEuMi0xLjcsMS4yYy0wLjksMC0xLjYtMC40LTIuMS0xLjJjLTAuMy0wLjQtMC41LTAuOC0wLjctMS4zYy0wLjQsMC4zLTEsMC42LTEuNywxYy0wLjUsMC4yLTAuOCwwLjEtMS4xLTAuMyAgIGMtMC4yLTAuNS0wLjEtMC45LDAuMy0xLjFjMC43LTAuNCwxLjQtMC44LDEuOS0xLjFjLTAuMi0wLjktMC40LTIuMS0wLjUtMy43TDE1LjksMzRjLTAuMiwwLTAuNCwwLTAuNi0wLjEgICBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4yLDAtMC40LDAuMi0wLjZzMC4zLTAuMywwLjUtMC4zbDEuMi0wLjFjLTAuMS0wLjktMC4xLTEuOS0wLjEtMi45YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMywwLjZjMCwwLjEsMCwxLDAuMSwyLjdsMy4yLTAuNGMwLjIsMCwwLjQsMCwwLjUsMC4xICAgYzAuMiwwLjEsMC4zLDAuMywwLjMsMC41czAsMC40LTAuMSwwLjVjLTAuMSwwLjItMC4zLDAuMy0wLjUsMC4zbC0zLjMsMC40YzAuMSwxLjIsMC4yLDIuMSwwLjMsMi44YzAuNy0wLjYsMS40LTEuNCwyLTIuMiAgIGMwLjMtMC40LDAuNy0wLjQsMS4xLTAuMmMwLjQsMC4zLDAuNCwwLjcsMC4yLDFDMjEuMywzNi4zLDIwLjQsMzcuMywxOS4zLDM4LjF6IE0yMC42LDMxLjFjLTAuMy0wLjItMC43LTAuNS0xLjEtMC44ICAgYy0wLjMtMC4zLTAuMy0wLjYtMC4xLTAuOWMwLjMtMC4zLDAuNi0wLjQsMS0wLjJjMC40LDAuMiwwLjcsMC41LDEuMSwwLjdjMC40LDAuMywwLjQsMC42LDAuMiwxQzIxLjMsMzEuMywyMSwzMS4zLDIwLjYsMzEuMXogICAgTTIzLjMsMzAuOWMwLTAuMiwwLjEtMC40LDAuMi0wLjVjMC4xLTAuMSwwLjMtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMSwwLjEsMC4yLDAuMywwLjIsMC41djYuNWMwLDAuMi0wLjEsMC40LTAuMiwwLjUgICBjLTAuMSwwLjEtMC4zLDAuMi0wLjYsMC4ycy0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjEtMC4yLTAuMy0wLjItMC41VjMwLjl6IE0yNC4zLDQxLjZjLTAuMiwwLTAuNC0wLjEtMC42LTAuMiAgIGMtMC4yLTAuMS0wLjItMC4zLTAuMi0wLjZjMC0wLjIsMC4xLTAuNCwwLjItMC42YzAuMi0wLjEsMC4zLTAuMiwwLjYtMC4yaDAuOWMwLjYsMCwxLTAuNCwxLTEuMXYtOS40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMiwwLjZWMzljMCwwLjgtMC4yLDEuNS0wLjcsMS45cy0xLjEsMC43LTEuOCwwLjdIMjQuM3oiLz4KCTxwYXRoIGQ9Ik00MC42LDM3LjdoLTMuOHYwLjdoNC40YzAuMSwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNGMwLDAuMS0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yICAgaC00LjR2MC43SDQyYzAuMiwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNHMtMC4xLDAuMy0wLjIsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMkgzMGMtMC4yLDAtMC4zLTAuMS0wLjQtMC4yICAgYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNHMwLjEtMC4zLDAuMi0wLjRjMC4xLTAuMSwwLjItMC4yLDAuNC0wLjJoNS4ydi0wLjdoLTQuNGMtMC4xLDAtMC4zLTAuMS0wLjQtMC4ycy0wLjItMC4yLTAuMi0wLjQgICBjMC0wLjEsMC4xLTAuMywwLjItMC40czAuMi0wLjIsMC40LTAuMmg0LjR2LTAuN2gtMy43aDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMnMtMC4yLTAuMy0wLjItMC42di0zLjFjMC0wLjIsMC4xLTAuNCwwLjItMC42ICAgYzAuMS0wLjEsMC4zLTAuMiwwLjYtMC4yaDMuOHYtMC44SDMwYy0wLjIsMC0wLjMtMC4xLTAuNC0wLjJjLTAuMS0wLjEtMC4yLTAuMi0wLjItMC40czAuMS0wLjMsMC4yLTAuNGMwLjEtMC4xLDAuMi0wLjIsMC40LTAuMiAgIGg1LjJ2LTAuOGMtMS40LDAtMi45LDAuMS00LjMsMC4xYy0wLjIsMC0wLjMsMC0wLjQtMC4xYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNGMwLTAuMiwwLTAuMywwLjItMC40YzAuMS0wLjEsMC4zLTAuMiwwLjQtMC4yICAgYzMuMywwLDYuOC0wLjEsMTAuMi0wLjNjMC4yLDAsMC4zLDAsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjMsMC4yLDAuNGMwLDAuMiwwLDAuMy0wLjEsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMiAgIGMtMS4xLDAtMi41LDAuMS00LjMsMC4xdjAuOGg1LjFjMC4yLDAsMC4zLDAuMSwwLjQsMC4yYzAuMSwwLjEsMC4yLDAuMiwwLjIsMC40cy0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yaC01LjEgICB2MC44aDMuOGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My4xYzAsMC4yLTAuMSwwLjQtMC4yLDAuNkM0MSwzNy43LDQwLjgsMzcuNyw0MC42LDM3Ljd6IE0zNS4xLDM0LjlWMzQgICBoLTIuOXYwLjlIMzUuMXogTTM1LjEsMzYuN3YtMC45aC0yLjl2MC45SDM1LjF6IE0zOS44LDM0LjlWMzRoLTIuOXYwLjlIMzkuOHogTTM5LjgsMzYuN3YtMC45aC0yLjl2MC45SDM5Ljh6Ii8+Cgk8cGF0aCBkPSJNNDUuNSw0MS4xYy0wLjMsMC40LTAuNywwLjUtMS4xLDAuM2MtMC40LTAuMy0wLjUtMC43LTAuMy0xLjFsMS0xLjdjMC4zLTAuNCwwLjctMC41LDEuMS0wLjNjMC40LDAuMywwLjUsMC43LDAuMywxLjEgICBMNDUuNSw0MS4xeiBNNTUsMzcuN2MtMC4xLDAtMC4xLDAtMC4yLDBoLTguOWMtMC4zLDAtMC41LTAuMS0wLjYtMC4yYy0wLjItMC4yLTAuMi0wLjQtMC4yLTAuNnYtMy40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjEtMC4xLDAuMy0wLjIsMC42LTAuMmgzLjN2LTMuMWMwLTAuMiwwLjEtMC40LDAuMi0wLjZjMC4yLTAuMiwwLjQtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMiwwLjIsMC4yLDAuNCwwLjIsMC42djAuM0g1NiAgIGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZzLTAuMSwwLjQtMC4yLDAuNWMtMC4xLDAuMS0wLjMsMC4yLTAuNiwwLjJoLTUuMnYxLjNoNGMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My40QzU1LjYsMzcuMyw1NS40LDM3LjYsNTUsMzcuN3ogTTUzLjksMzYuMnYtMmgtNy4xdjJINTMuOXogTTQ5LjYsNDAuN2MwLDAuMy0wLjEsMC41LTAuMiwwLjYgICBjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjItMC4yLTAuNC0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMiAgIHMwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTUyLjgsNDAuN2MwLDAuMi0wLjEsMC40LTAuMiwwLjZjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yICAgYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMi0wLjEtMC4yLTAuMy0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTU2LjYsNDAuM2MwLjIsMC40LDAuMSwwLjgtMC4zLDEuMWMtMC41LDAuMy0wLjgsMC4yLTEuMS0wLjNsLTEtMS43Yy0wLjItMC41LTAuMS0wLjgsMC4zLTEuMSAgIGMwLjUtMC4yLDAuOS0wLjEsMS4xLDAuM0w1Ni42LDQwLjN6Ii8+CjwvZz4KPC9zdmc+";
+async function convertTextStyle(el, isByWord = false) {
+  const { fetchToText } = useSharedTextAssets();
+  const style = {
+    ...el.style,
+    highlightReferImage,
     listStyleType: "none",
     listStyleImage: "none"
   };
-  return e.style.fontSize && (t.fontSize = Math.floor(e.style.fontSize)), e.listStyle?.colormap && (t.listStyleColormap = e.listStyle?.colormap), r || (e.listMode ? t.listStyleType = "disc" : e.listStyle && (t.listStyleImage = await o(e.listStyle.image), t.listStyleSize = `${e.listStyle.size * 100}%`)), e.background?.enabled ? (t.backgroundImage = e.background.image, t.backgroundSize = e.background.size, t.backgroundColormap = e.background.colormap, t.padding = e.background.padding) : t.padding = 0, t;
+  if (el.style.fontSize) {
+    style.fontSize = Math.floor(el.style.fontSize);
+  }
+  if (el.listStyle?.colormap) {
+    style.listStyleColormap = el.listStyle?.colormap;
+  }
+  if (!isByWord) {
+    if (el.listMode) {
+      style.listStyleType = "disc";
+    } else if (el.listStyle) {
+      style.listStyleImage = await fetchToText(el.listStyle.image);
+      style.listStyleSize = `${el.listStyle.size * 100}%`;
+    }
+  }
+  if (el.background?.enabled) {
+    style.backgroundImage = el.background.image;
+    style.backgroundSize = el.background.size;
+    style.backgroundColormap = el.background.colormap;
+    style.padding = el.background.padding;
+  } else {
+    style.padding = 0;
+  }
+  return style;
 }
-async function Tt(e) {
-  const r = e.textEffects ?? [];
-  if (r.length)
-    return await Promise.all(
-      [...r].reverse().map(async (o) => {
-        const t = {}, { offset: s, skew: i, stroke: n, shadow: f, filling: c } = o;
-        if (s && (t.translateX = s.x, t.translateY = s.y), i && (t.skewX = i.x, t.skewY = i.y), n?.color && n.width && (t.textStrokeWidth = n.width, t.textStrokeColor = n.color), f && (t.shadowOffsetX = f.offsetX, t.shadowOffsetY = f.offsetY, t.shadowBlur = f.blur, t.shadowColor = f.color), c) {
-          const { color: d, imageContent: l, gradient: a } = c;
-          l?.image || (a ? t.color = `linear-gradient(${90 - a.angle}deg, ${a.stops.map((M) => `${M.color} ${M.offset * 100}%`).join(",")})` : d && (t.color = d));
+async function convertTextEffects(el) {
+  const effects = el.textEffects ?? [];
+  if (!effects.length) {
+    return void 0;
+  }
+  return await Promise.all(
+    [...effects].reverse().map(async (effect) => {
+      const result = {};
+      const { offset, skew, stroke, shadow, filling } = effect;
+      if (offset) {
+        result.translateX = offset.x;
+        result.translateY = offset.y;
+      }
+      if (skew) {
+        result.skewX = skew.x;
+        result.skewY = skew.y;
+      }
+      if (stroke?.color && stroke.width) {
+        result.textStrokeWidth = stroke.width;
+        result.textStrokeColor = stroke.color;
+      }
+      if (shadow) {
+        result.shadowOffsetX = shadow.offsetX;
+        result.shadowOffsetY = shadow.offsetY;
+        result.shadowBlur = shadow.blur;
+        result.shadowColor = shadow.color;
+      }
+      if (filling) {
+        const { color, imageContent, gradient } = filling;
+        if (imageContent?.image) ;
+        else if (gradient) {
+          result.color = `linear-gradient(${90 - gradient.angle}deg, ${gradient.stops.map((stop) => `${stop.color} ${stop.offset * 100}%`).join(",")})`;
+        } else if (color) {
+          result.color = color;
         }
-        return t;
-      })
-    );
+      }
+      return result;
+    })
+  );
 }
-function Dt(e) {
-  return e.version ? e.contents : e.contents.map((r) => {
-    let o;
-    return r.map((t, s) => {
-      let i = t.content;
-      i = i.replace(/ |\r\n|\n\r|[\n\r\t\v]/g, " "), i = i.replace(/<br\/>/g, `
-`);
-      let n = "", f = 0;
-      for (const c of Array.from(i))
-        s === 0 && f === 0 && c === " " || o === " " && c === " " || (n += c), o = c, f++;
+function getTextContents(el) {
+  if (el.version) {
+    return el.contents;
+  }
+  return el.contents.map((p) => {
+    let prevChar;
+    return p.map((f, fIndex) => {
+      let content = f.content;
+      content = content.replace(/ |\r\n|\n\r|[\n\r\t\v]/g, " ");
+      content = content.replace(/<br\/>/g, "\n");
+      let newContent = "";
+      let cIndex = 0;
+      for (const char of Array.from(content)) {
+        if (fIndex === 0 && cIndex === 0 && char === " ") ;
+        else if (prevChar === " " && char === " ") ;
+        else {
+          newContent += char;
+        }
+        prevChar = char;
+        cIndex++;
+      }
       return {
-        ...t,
-        content: n
+        ...f,
+        content: newContent
       };
-    }).filter((t) => t.content);
+    }).filter((f) => f.content);
   });
 }
-async function It(e, r = !1) {
-  const { fetchToText: o } = _(), t = Dt(e), s = [];
-  for (let i = 0, n = t.length; i < n; i++) {
-    const f = t[i], c = {
+async function convertTextContent(el, isByWord = false) {
+  const { fetchToText } = useSharedTextAssets();
+  const bigeContents = getTextContents(el);
+  const paragraphs = [];
+  for (let i = 0, len = bigeContents.length; i < len; i++) {
+    const bigeParagraphs = bigeContents[i];
+    const paragraph = {
       fragments: []
     };
-    s.push(c);
-    for (let d = 0, l = f.length; d < l; d++) {
-      const a = {}, M = f[d];
-      for (const w in M)
-        w !== "id" && M[w] !== "" && (a[w] = M[w]);
-      a.fontSize && (a.fontSize = Math.floor(a.fontSize)), a.content = Mt(a.content), a.highlight && (a.highlightImage = await o(a.highlight.image), r ? a.highlightSize = "cover" : a.highlight.size && (a.highlightSize = `${a.highlight.size}rem`), a.highlight.colormap && (a.highlightColormap = a.highlight.colormap), a.highlight.line && (a.highlightLine = a.highlight.line), a.highlight.thickness && (a.highlightThickness = `${a.highlight.thickness}%`), delete a.highlight), r || (a.listMode ? c.listStyleType = "disc" : a.listStyle && (c.listStyleImage = await o(a.listStyle.image), c.listStyleSize = `${a.listStyle.size * 100}%`));
-      const L = c.fragments[c.fragments.length - 1];
-      L && Object.keys(L).length === 1 && L.content && Object.keys(a).length === 1 && a.content ? L.content += a.content : c.fragments.push(a);
+    paragraphs.push(paragraph);
+    for (let i2 = 0, len2 = bigeParagraphs.length; i2 < len2; i2++) {
+      const fragment = {};
+      const raw = bigeParagraphs[i2];
+      for (const key in raw) {
+        if (key !== "id" && raw[key] !== "") {
+          fragment[key] = raw[key];
+        }
+      }
+      if (fragment.fontSize) {
+        fragment.fontSize = Math.floor(fragment.fontSize);
+      }
+      fragment.content = normalizeCRLF(fragment.content);
+      if (fragment.highlight) {
+        fragment.highlightImage = await fetchToText(fragment.highlight.image);
+        if (isByWord) {
+          fragment.highlightSize = "cover";
+        } else {
+          if (fragment.highlight.size) {
+            fragment.highlightSize = `${fragment.highlight.size}rem`;
+          }
+        }
+        if (fragment.highlight.colormap) {
+          fragment.highlightColormap = fragment.highlight.colormap;
+        }
+        if (fragment.highlight.line) {
+          fragment.highlightLine = fragment.highlight.line;
+        }
+        if (fragment.highlight.thickness) {
+          fragment.highlightThickness = `${fragment.highlight.thickness}%`;
+        }
+        delete fragment.highlight;
+      }
+      if (!isByWord) {
+        if (fragment.listMode) {
+          paragraph.listStyleType = "disc";
+        } else if (fragment.listStyle) {
+          paragraph.listStyleImage = await fetchToText(fragment.listStyle.image);
+          paragraph.listStyleSize = `${fragment.listStyle.size * 100}%`;
+        }
+      }
+      const prev = paragraph.fragments[paragraph.fragments.length - 1];
+      if (prev && Object.keys(prev).length === 1 && prev.content && Object.keys(fragment).length === 1 && fragment.content) {
+        prev.content += fragment.content;
+      } else {
+        paragraph.fragments.push(fragment);
+      }
     }
   }
-  return s;
+  return paragraphs;
 }
-const P = (e) => (Number.parseFloat(e) || 0) / 100;
-async function q(e, r, o) {
-  const t = { ...e.style ?? e };
-  delete t.bottom, delete t.right;
-  const s = {
+const percentageToPx = (per) => (Number.parseFloat(per) || 0) / 100;
+async function convertElement(el, parent, context) {
+  const style = { ...el.style ?? el };
+  delete style.bottom;
+  delete style.right;
+  const meta = {
     inPptIs: "Shape",
     inEditorIs: "Element"
   };
-  e.id && (s.rawId = e.id), e.name && (s.rawName = e.name);
-  const i = {
-    id: F(),
-    name: e.name ?? e.title ?? e.id,
-    style: t,
-    meta: s,
+  if (el.id) {
+    meta.rawId = el.id;
+  }
+  if (el.name) {
+    meta.rawName = el.name;
+  }
+  const element = {
+    id: idGenerator(),
+    name: el.name ?? el.title ?? el.id,
+    style,
+    meta,
     children: []
   };
-  if (t.borderRadius && (t.borderRadius = t.borderRadius * 0.01 * Math.max(t.height, t.width)), r && e.groupStyle && (t.width = r.style.width * P(e.groupStyle.width), t.height = r.style.height * P(e.groupStyle.height), t.left = r.style.width * P(e.groupStyle.left), t.top = r.style.height * P(e.groupStyle.top)), e.editable === !1 && (t.visibility = "hidden"), e.lock === !0 && (s.lock = !0), e.animations?.length) {
-    const n = jt(e);
-    i.delay = n.delay, i.duration = n.duration, i.children.push(...n.animations), o && (n.animations.forEach((f) => {
-      o.endTime = Math.max(
-        o.endTime,
-        n.delay + f.delay + f.duration
-      );
-    }), o.endTime = Math.max(o.endTime, n.delay + n.duration));
+  if (style.borderRadius) {
+    style.borderRadius = style.borderRadius * 0.01 * Math.max(style.height, style.width);
+  }
+  if (parent && el.groupStyle) {
+    style.width = parent.style.width * percentageToPx(el.groupStyle.width);
+    style.height = parent.style.height * percentageToPx(el.groupStyle.height);
+    style.left = parent.style.width * percentageToPx(el.groupStyle.left);
+    style.top = parent.style.height * percentageToPx(el.groupStyle.top);
+  }
+  if (el.editable === false) {
+    style.visibility = "hidden";
   }
-  switch (e.type) {
+  if (el.lock === true) {
+    meta.lock = true;
+  }
+  if (el.animations?.length) {
+    const parsed = parseAnimations(el);
+    element.delay = parsed.delay;
+    element.duration = parsed.duration;
+    element.children.push(...parsed.animations);
+    if (context) {
+      parsed.animations.forEach((animation) => {
+        context.endTime = Math.max(
+          context.endTime,
+          parsed.delay + animation.delay + animation.duration
+        );
+      });
+      context.endTime = Math.max(context.endTime, parsed.delay + parsed.duration);
+    }
+  }
+  switch (el.type) {
     case "image":
-      if (s.inPptIs = "Picture", i.foreground = {
-        image: await V(e),
-        fillWithShape: !0
-      }, e.clipUrl && (s.rawForegroundImage = e.url), e.cropping) {
-        const n = e.style.width, f = e.style.height, {
-          imageWidth: c,
-          imageHeight: d,
-          maskWidth: l = n,
-          maskHeight: a = f,
-          translateX: M,
-          translateY: L,
-          zoom: w = 1
-        } = e.cropping, h = c * w, u = d * w, C = (h - l) / 2 - M, m = (u - a) / 2 - L, g = C + l / 2, T = m + a / 2, j = -(n / 2 - g), y = -(f / 2 - T), A = h - (j + n), k = u - (y + f);
-        i.foreground.cropRect = {
-          left: j / h,
-          top: y / u,
-          right: A / h,
-          bottom: k / u
+      meta.inPptIs = "Picture";
+      element.foreground = {
+        image: await convertImageElementToUrl(el),
+        fillWithShape: true
+      };
+      if (el.clipUrl) {
+        meta.rawForegroundImage = el.url;
+      }
+      if (el.cropping) {
+        const width = el.style.width;
+        const height = el.style.height;
+        const {
+          imageWidth,
+          imageHeight,
+          maskWidth = width,
+          maskHeight = height,
+          translateX,
+          translateY,
+          zoom = 1
+        } = el.cropping;
+        const cvsWidth = imageWidth * zoom;
+        const cvsHeight = imageHeight * zoom;
+        const distX = (cvsWidth - maskWidth) / 2 - translateX;
+        const distY = (cvsHeight - maskHeight) / 2 - translateY;
+        const originX = distX + maskWidth / 2;
+        const originY = distY + maskHeight / 2;
+        const left = -(width / 2 - originX);
+        const top = -(height / 2 - originY);
+        const right = cvsWidth - (left + width);
+        const bottom = cvsHeight - (top + height);
+        element.foreground.cropRect = {
+          left: left / cvsWidth,
+          top: top / cvsHeight,
+          right: right / cvsWidth,
+          bottom: bottom / cvsHeight
         };
       }
       break;
     case "svg": {
-      s.inPptIs = "Picture", i.foreground = {
-        image: await pt(e),
-        fillWithShape: !0
+      meta.inPptIs = "Picture";
+      element.foreground = {
+        image: await convertSvgElementToUrl(el),
+        fillWithShape: true
       };
       break;
     }
     case "text": {
-      s.inPptIs = "Shape", t.writingMode === "horizontal-tb" ? t.width = Math.ceil(t.width + t.letterSpacing) : t.height = Math.ceil(t.height + t.letterSpacing), i.text = {
-        content: await It(e),
-        style: await xt(e),
-        effects: await Tt(e)
+      meta.inPptIs = "Shape";
+      if (style.writingMode === "horizontal-tb") {
+        style.width = Math.ceil(style.width + style.letterSpacing);
+      } else {
+        style.height = Math.ceil(style.height + style.letterSpacing);
+      }
+      element.text = {
+        content: await convertTextContent(el),
+        style: await convertTextStyle(el),
+        effects: await convertTextEffects(el)
         // plugins: [deformation(el.deformation?.type?.endsWith("byWord") ? -1 : 999, () => el.deformation)],
       };
       break;
     }
     case "com":
-      s.inPptIs = "GroupShape", i.children = (await Promise.all(
-        e.children.map(async (n) => {
+      meta.inPptIs = "GroupShape";
+      element.children = (await Promise.all(
+        el.children.map(async (child) => {
           try {
-            return await q(n, e, o);
-          } catch (f) {
-            console.warn(f);
-            return;
+            return await convertElement(child, el, context);
+          } catch (e) {
+            console.warn(e);
+            return void 0;
           }
         })
       )).filter(Boolean);
@@ -863,193 +1178,279 @@ async function q(e, r, o) {
     case "collage":
     case "imageWall":
     default:
-      console.warn(e);
+      console.warn(el);
       break;
   }
-  return i;
+  return element;
 }
-async function St(e, r = !0, o) {
-  const t = F(), s = {
-    ...e.style ?? e
+async function convertLayout(layout, isFrame = true, context) {
+  const id = idGenerator();
+  const style = {
+    ...layout.style ?? layout
   };
-  delete s.right, delete s.bottom, r && (s.overflow = "hidden");
-  const i = {
-    inPptIs: r ? "Slide" : "GroupShape",
-    inEditorIs: r ? "Frame" : "Element"
+  delete style.right;
+  delete style.bottom;
+  if (isFrame) {
+    style.overflow = "hidden";
+  }
+  const meta = {
+    inPptIs: isFrame ? "Slide" : "GroupShape",
+    inEditorIs: isFrame ? "Frame" : "Element"
   };
-  e.id && (i.rawId = e.id), e.name && (i.rawName = e.name);
-  let n;
-  return e.background && (e.background.color && (n ??= {}, dt(e.background.color ?? "") ? n.image = e.background.color : n.color = e.background.color), e.background.image && (n ??= {}, n.image = e.background.image)), {
-    id: t,
-    name: r ? `Frame ${t}` : e.name,
-    style: s,
+  if (layout.id) {
+    meta.rawId = layout.id;
+  }
+  if (layout.name) {
+    meta.rawName = layout.name;
+  }
+  let background;
+  if (layout.background) {
+    if (layout.background.color) {
+      background ??= {};
+      if (isGradient(layout.background.color ?? "")) {
+        background.image = layout.background.color;
+      } else {
+        background.color = layout.background.color;
+      }
+    }
+    if (layout.background.image) {
+      background ??= {};
+      background.image = layout.background.image;
+    }
+  }
+  return {
+    id,
+    name: isFrame ? `Frame ${id}` : layout.name,
+    style,
     // TODO 过滤掉部分属性
-    background: n,
+    background,
     children: (await Promise.all(
-      e.elements.map(async (f) => {
+      layout.elements.map(async (element) => {
         try {
-          return await q(f, void 0, o);
-        } catch (c) {
-          console.warn(c);
-          return;
+          return await convertElement(element, void 0, context);
+        } catch (e) {
+          console.warn(e);
+          return void 0;
         }
       })
     )).filter(Boolean),
-    meta: i
+    meta
   };
 }
-async function K(e, r = 0) {
+async function convertDoc(doc, gap = 0) {
   const {
-    layouts: o,
-    metas: t = {}
-  } = e, s = {
+    layouts,
+    metas = {}
+  } = doc;
+  const context = {
     endTime: 0
   };
-  let i = await Promise.all(
-    o.map(async (c, d) => ({
-      index: d,
-      element: await St(c, !0, s)
-    }))
-  ), n = 0;
-  i = i.sort((c, d) => c.index - d.index).map((c, d) => {
-    const l = c.element;
-    return l.style && (l.style.top = n, n += Number(l.style.height) + r), l.name = `Frame ${d + 1}`, l;
+  let children = await Promise.all(
+    layouts.map(async (layout, index) => {
+      return {
+        index,
+        element: await convertLayout(layout, true, context)
+      };
+    })
+  );
+  let top = 0;
+  children = children.sort((a, b) => a.index - b.index).map((v, index) => {
+    const element = v.element;
+    if (element.style) {
+      element.style.top = top;
+      top += Number(element.style.height) + gap;
+    }
+    element.name = `Frame ${index + 1}`;
+    return element;
   });
-  const f = i.reduce((c) => {
-    const d = c.style?.left ?? 0, l = c.style?.top ?? 0, a = c.style?.width ?? 0, M = c.style?.height ?? 0;
+  const minmax = children.reduce((child) => {
+    const left = child.style?.left ?? 0;
+    const top2 = child.style?.top ?? 0;
+    const width = child.style?.width ?? 0;
+    const height = child.style?.height ?? 0;
     return {
-      minX: d,
-      minY: l,
-      maxX: d + a,
-      maxY: l + M
+      minX: left,
+      minY: top2,
+      maxX: left + width,
+      maxY: top2 + height
     };
   }, { minX: 0, minY: 0, maxX: 0, maxY: 0 });
   return {
-    id: F(),
-    name: t.name || "doc",
+    id: idGenerator(),
+    name: metas.name || "doc",
     style: {
-      width: t?.width ?? f.maxX - f.minX,
-      height: t?.height ?? f.maxY - f.minY
+      width: metas?.width ?? minmax.maxX - minmax.minX,
+      height: metas?.height ?? minmax.maxY - minmax.minY
     },
-    children: i,
+    children,
     meta: {
-      ...t,
-      endTime: s.endTime,
+      ...metas,
+      endTime: context.endTime,
       inEditorIs: "Doc"
     }
   };
 }
-function zt(e, r) {
-  const { config: o } = e;
+function bidTidLoader(editor, api) {
+  const { config } = editor;
   return {
     name: "bigesj:bidTid",
-    test: (t) => typeof t == "object" && t && !!(t.bid || t.tid),
-    load: async (t) => {
-      const s = t.bid ?? t.tid ?? "", i = async (l) => await fetch(
-        (t.bid ? r.bid : r.tid).replace("%d", l)
-      ).then((a) => a.json()).then((a) => a.data);
-      let n = 0;
-      const f = await Promise.all(
-        s.split("|").map(async (l) => {
-          let [a, M] = l.split("[");
-          M && (M = M.substring(0, M.length - 1));
-          const L = M ? M.split(",").map((g) => Number(g)) : void 0, w = await i(a), { content: h, ...u } = w, C = JSON.parse(h);
-          L !== void 0 && (C.layouts = C.layouts.filter((g, T) => L.includes(T)));
-          const m = await K(C);
-          return m.meta.raw = u, n = Math.max(n, m.meta?.maxTime ?? 0), m;
+    test: (source) => typeof source === "object" && source && !!(source.bid || source.tid),
+    load: async (source) => {
+      const text = source.bid ?? source.tid ?? "";
+      const load = async (id) => {
+        return await fetch(
+          (source.bid ? api.bid : api.tid).replace("%d", id)
+        ).then((rep) => rep.json()).then((res) => res.data);
+      };
+      let maxTime = 0;
+      const docs = await Promise.all(
+        text.split("|").map(async (text1) => {
+          let [id, text2] = text1.split("[");
+          if (text2) {
+            text2 = text2.substring(0, text2.length - 1);
+          }
+          const included = text2 ? text2.split(",").map((v) => Number(v)) : void 0;
+          const bigeDoc = await load(id);
+          const { content: _content, ...raw } = bigeDoc;
+          const content = JSON.parse(_content);
+          if (included !== void 0) {
+            content.layouts = content.layouts.filter((_, index) => included.includes(index));
+          }
+          const doc2 = await convertDoc(content);
+          doc2.meta.raw = raw;
+          maxTime = Math.max(maxTime, doc2.meta?.maxTime ?? 0);
+          return doc2;
         })
-      ), c = { ...f[0], id: s, children: [] };
-      c.meta ??= {}, c.meta.maxTime = n, c.meta.inEditorIs = "Doc";
-      let d = 0;
-      return f.forEach((l) => {
-        let a = 0;
-        l.children?.forEach((M) => {
-          M.style && (M.style.left = d, a = Math.max(a, Number(M.style.width)), c.children.push(M));
-        }), d += a + o.value.frameGap;
-      }), c;
+      );
+      const doc = { ...docs[0], id: text, children: [] };
+      doc.meta ??= {};
+      doc.meta.maxTime = maxTime;
+      doc.meta.inEditorIs = "Doc";
+      let left = 0;
+      docs.forEach((_doc) => {
+        let width = 0;
+        _doc.children?.forEach((element) => {
+          if (element.style) {
+            element.style.left = left;
+            width = Math.max(width, Number(element.style.width));
+            doc.children.push(element);
+          }
+        });
+        left += width + config.value.frameGap;
+      });
+      return doc;
     }
   };
 }
-function Nt() {
+function bigeLoader() {
   return {
     name: "bigesj:bige",
     accept: ".bige",
-    test: (e) => e instanceof File && e.name.endsWith(".bige"),
-    load: async (e) => {
-      const r = JSON.parse(
+    test: (file) => {
+      return file instanceof File && file.name.endsWith(".bige");
+    },
+    load: async (file) => {
+      const bigeDoc = JSON.parse(
         new TextDecoder().decode(
-          Lt(new Uint8Array(await e.arrayBuffer()))
+          gunzipSync(new Uint8Array(await file.arrayBuffer()))
         )
-      ), { content: o, ...t } = r, s = await K(o);
-      return s.meta.raw = t, s;
+      );
+      const { content, ...raw } = bigeDoc;
+      const doc = await convertDoc(content);
+      doc.meta.raw = raw;
+      return doc;
     }
   };
 }
-function Qt(e = {}) {
+function plugin(options = {}) {
   const {
-    font: r,
-    api: o
-  } = e, t = {
+    font,
+    api
+  } = options;
+  const _api = {
     fonts: "/new/design/fonts",
     bid: "/new/udesign/info/%d",
     tid: "/new/design/info/%d",
-    ...o
+    ...api
   };
-  return nt((s) => ({
-    name: "bigesj",
-    loaders: [
-      Nt(),
-      zt(s, t)
-    ],
-    setup: async () => {
-      r && await bt(s, t);
-    }
-  }));
+  return definePlugin((editor) => {
+    return {
+      name: "bigesj",
+      loaders: [
+        bigeLoader(),
+        bidTidLoader(editor, _api)
+      ],
+      setup: async () => {
+        if (font) {
+          await setupFonts(editor, _api);
+        }
+      }
+    };
+  });
 }
-async function bt(e, r) {
+async function setupFonts(editor, api) {
   const {
-    on: o,
-    off: t,
-    root: s
-  } = e, {
-    loadBigeFonts: i,
-    loadFont: n
-  } = mt();
-  function f(l) {
-    l instanceof ot && (l.style.fontFamily && n(l.style.fontFamily).then(() => l.text.update()), l.text.content.forEach((a) => {
-      a.fragments.forEach((M) => {
-        M.fontFamily && n(M.fontFamily).then(() => l.text.update());
-      }), a.fontFamily && n(a.fontFamily).then(() => l.text.update());
-    }));
+    on,
+    off,
+    root
+  } = editor;
+  const {
+    loadBigeFonts,
+    loadFont
+  } = useFonts();
+  function preloadNode(node) {
+    if (node instanceof Element2D) {
+      if (node.style.fontFamily) {
+        loadFont(node.style.fontFamily).then(() => node.text.update());
+      }
+      node.text.content.forEach((p) => {
+        p.fragments.forEach((f) => {
+          if (f.fontFamily) {
+            loadFont(f.fontFamily).then(() => node.text.update());
+          }
+        });
+        if (p.fontFamily) {
+          loadFont(p.fontFamily).then(() => node.text.update());
+        }
+      });
+    }
   }
-  function c(l) {
-    l.forEach((a) => {
-      f(a), a.findOne((M) => (f(M), !1));
+  function preloadNodes(node) {
+    node.forEach((child) => {
+      preloadNode(child);
+      child.findOne((descendant) => {
+        preloadNode(descendant);
+        return false;
+      });
     });
   }
-  async function d() {
-    s.value && c([s.value]);
+  async function preload() {
+    root.value && preloadNodes([root.value]);
   }
-  lt(() => {
-    t("setDoc", d), t("addElement", c);
-  }), o("setDoc", d), o("addElement", c), await i(r.fonts);
+  onBeforeUnmount(() => {
+    off("setDoc", preload);
+    off("addElement", preloadNodes);
+  });
+  on("setDoc", preload);
+  on("addElement", preloadNodes);
+  await loadBigeFonts(api.fonts);
 }
 export {
-  zt as bidTidLoader,
-  Nt as bigeLoader,
-  U as convertAnimation,
-  K as convertDoc,
-  q as convertElement,
-  V as convertImageElementToUrl,
-  St as convertLayout,
-  pt as convertSvgElementToUrl,
-  It as convertTextContent,
-  Tt as convertTextEffects,
-  xt as convertTextStyle,
-  Qt as default,
-  Dt as getTextContents,
-  jt as parseAnimations,
-  Qt as plugin,
-  mt as useFonts,
-  _ as useSharedTextAssets
+  bidTidLoader,
+  bigeLoader,
+  convertAnimation,
+  convertDoc,
+  convertElement,
+  convertImageElementToUrl,
+  convertLayout,
+  convertSvgElementToUrl,
+  convertTextContent,
+  convertTextEffects,
+  convertTextStyle,
+  plugin as default,
+  getTextContents,
+  parseAnimations,
+  plugin,
+  useFonts,
+  useSharedTextAssets
 };