@fraczled/sdk 1.30.66 → 1.31.1

package/README.md

@@ -11,7 +11,7 @@ npm install @fraczled/sdk
 ## Server-gated delivery (required)
 
 To prevent unauthorized usage, always gate the SDK bundle through your backend.
-Use `/api/editor/init` to validate the license, then serve the SDK from `/api/editor/sdk`.
+Use `/v1/editor/init` to validate the license, then serve the SDK from `/v1/editor/sdk`.
 See `docs/license-enforcement.md` for the full flow.
 
 ## Quick Start

package/dist/canvasExportPipeline-DSisAQcO.js

@@ -0,0 +1,637 @@
+import { g as Q, b as K, a as J, t as L, c as m, d as I, e as x, f as tt, h as ot, i as G, j as st, k as ft, l as ct, m as ht, s as dt, n as ut, E as B, o as gt, p as rt, q as et, r as nt, u as pt } from "./index-C2qSvudu.js";
+const yt = {
+  normal: "source-over",
+  dissolve: "source-over",
+  darken: "darken",
+  multiply: "multiply",
+  "color-burn": "color-burn",
+  "linear-burn": "color-burn",
+  "darker-color": "darken",
+  lighten: "lighten",
+  screen: "screen",
+  "color-dodge": "color-dodge",
+  "linear-dodge": "screen",
+  "lighter-color": "lighten",
+  overlay: "overlay",
+  "soft-light": "soft-light",
+  "hard-light": "hard-light",
+  "vivid-light": "hard-light",
+  "linear-light": "hard-light",
+  "pin-light": "hard-light",
+  "hard-mix": "hard-light",
+  difference: "difference",
+  exclusion: "exclusion",
+  subtract: "difference",
+  divide: "difference",
+  hue: "hue",
+  saturation: "saturation",
+  color: "color",
+  luminosity: "luminosity"
+}, wt = (t) => t && yt[t] || "source-over", bt = (t = "behind") => {
+  const o = ["adjustments"];
+  return t === "behind" && o.push("stroke-behind"), o.push("effect", "fill"), t === "front" && o.push("stroke-front"), o;
+}, kt = (t, o) => !o || o === "none" ? t : o === "uppercase" ? t.toUpperCase() : o === "lowercase" ? t.toLowerCase() : o === "capitalize" ? t.replace(/\b\w/g, (s) => s.toUpperCase()) : t, R = (t, o, s) => o ? t.measureText(o).width + (o.length > 1 ? s * (o.length - 1) : 0) : 0, St = (t, o, s, n) => {
+  const a = [], e = o.split(`
+`);
+  return e.forEach((i, f) => {
+    if (s === void 0 || s <= 0) {
+      a.push({ text: i, width: R(t, i, n) }), f < e.length - 1 && i === "" && a.push({ text: "", width: 0 });
+      return;
+    }
+    const r = i.split(/(\s+)/).filter((c) => c.length > 0);
+    let l = "";
+    r.forEach((c) => {
+      const d = l + c;
+      if (!l && (R(t, c, n) <= s || c.trim() === "")) {
+        l = c;
+        return;
+      }
+      if (R(t, d, n) <= s) {
+        l = d;
+        return;
+      }
+      if (l && a.push({ text: l, width: R(t, l, n) }), R(t, c, n) <= s) {
+        l = c;
+        return;
+      }
+      let h = "";
+      for (const g of c) {
+        const b = h + g;
+        if (!h || R(t, b, n) <= s) {
+          h = b;
+          continue;
+        }
+        a.push({ text: h, width: R(t, h, n) }), h = g;
+      }
+      l = h;
+    }), l && a.push({ text: l, width: R(t, l, n) }), f < e.length - 1 && i === "" && a.push({ text: "", width: 0 });
+  }), a;
+}, Ct = (t, o, s) => {
+  const n = o.fontSize || 24, a = ft(
+    n,
+    o.fontFamily || "sans-serif",
+    o.fontWeight || "normal",
+    o.fontStyle || "normal"
+  ), e = (o.lineHeight ?? 1.4) * n, i = (o.letterSpacing ?? 0) * n, f = o.textAlign || "left", r = o.autoWidth ? void 0 : s, l = kt(o.content || "", o.textTransform);
+  t.save(), t.font = a;
+  const c = St(t, l, r, i), d = ct({
+    ctx: t,
+    fontSize: n,
+    fontFamily: o.fontFamily || "sans-serif",
+    fontWeight: o.fontWeight || "normal",
+    fontStyle: o.fontStyle || "normal",
+    lineHeight: o.lineHeight ?? 1.4,
+    sampleText: "Hg"
+  });
+  return t.restore(), {
+    lines: c,
+    lineHeight: e,
+    letterSpacing: i,
+    width: s,
+    align: f,
+    font: a,
+    offsetY: d.baselineOffset
+  };
+}, U = (t, o, s, n, a, e) => {
+  if (!o) return;
+  if (a === 0) {
+    e === "fill" ? t.fillText(o, s, n) : t.strokeText(o, s, n);
+    return;
+  }
+  let i = s;
+  for (const f of o)
+    e === "fill" ? t.fillText(f, i, n) : t.strokeText(f, i, n), i += t.measureText(f).width + a;
+}, C = (t, o, s) => {
+  const { lines: n, lineHeight: a, letterSpacing: e, width: i, align: f, font: r } = o, l = s.offsetX ?? 0, c = (o.offsetY ?? 0) + (s.offsetY ?? 0);
+  t.save(), t.font = r, t.textBaseline = "alphabetic", t.textAlign = "left", s.fillStyle && (t.fillStyle = s.fillStyle), s.strokeStyle && s.strokeWidth && (t.strokeStyle = s.strokeStyle, t.lineWidth = s.strokeWidth, t.lineJoin = s.lineJoin ?? "round", t.lineCap = s.lineCap ?? "round"), n.forEach((d, y) => {
+    const u = y * a + c, h = d.width;
+    let g = l;
+    f === "center" ? g = i / 2 - h / 2 + l : f === "right" && (g = i - h + l), s.strokeStyle && s.strokeWidth && U(t, d.text, g, u, e, "stroke"), s.fillStyle && U(t, d.text, g, u, e, "fill");
+  }), t.restore();
+}, vt = (t, o, s, n, a, e) => {
+  const i = (n - 90) * Math.PI / 180, f = Math.cos(i), r = Math.sin(i), l = o / 2 - f * (o / 2), c = s / 2 - r * (s / 2), d = o / 2 + f * (o / 2), y = s / 2 + r * (s / 2), u = t.createLinearGradient(l, c, d, y);
+  return u.addColorStop(0, a), u.addColorStop(1, e), u;
+}, Mt = (t, o, s) => {
+  const { lines: n, lineHeight: a, width: e, align: i } = o, f = s.spread, r = Math.max(0, s.roundness);
+  n.forEach((l, c) => {
+    const d = l.width;
+    let y = 0;
+    i === "center" ? y = e / 2 - d / 2 : i === "right" && (y = e - d);
+    const u = c * a, h = y - f, g = u, b = d + f * 2, v = a;
+    if (t.save(), t.fillStyle = s.fillStyle, t.beginPath(), r <= 0)
+      t.rect(h, g, b, v);
+    else {
+      const w = Math.min(r, b / 2, v / 2);
+      t.moveTo(h + w, g), t.lineTo(h + b - w, g), t.arcTo(h + b, g, h + b, g + w, w), t.lineTo(h + b, g + v - w), t.arcTo(h + b, g + v, h + b - w, g + v, w), t.lineTo(h + w, g + v), t.arcTo(h, g + v, h, g + v - w, w), t.lineTo(h, g + w), t.arcTo(h, g, h + w, g, w), t.closePath();
+    }
+    t.fill(), t.restore();
+  });
+}, V = (t, o, s, n, a, e) => {
+  var W;
+  const i = Ct(t, o, s);
+  if (i.lines.length === 0) return;
+  const f = o.color || "#000000", r = Q(e, f), l = K((W = o.effect) == null ? void 0 : W.adjustments), c = e.blurAmount ?? 5, d = a === "blur" ? `${l} blur(${c}px)` : l, y = o.textStrokeWidth ?? 0, u = o.textStrokeColor || "#000000", h = o.textStrokePosition || "behind", g = o.textStrokeStyle || "round", b = g === "round" ? "round" : "miter", v = g === "round" ? "round" : "butt", w = () => {
+    y <= 0 || C(t, i, {
+      strokeStyle: u,
+      strokeWidth: y,
+      lineJoin: b,
+      lineCap: v
+    });
+  }, T = bt(h === "front" ? "front" : "behind");
+  t.save(), t.filter = d, T.forEach((D) => {
+    switch (D) {
+      case "stroke-behind":
+        w();
+        break;
+      case "effect": {
+        switch (a) {
+          case "shadow": {
+            const { offsetX: p, offsetY: S } = I(e), M = e.blur ?? 0, Y = J(e), k = L(r, Y);
+            t.save(), t.shadowColor = k, t.shadowBlur = M, t.shadowOffsetX = p, t.shadowOffsetY = S, C(t, i, { fillStyle: f }), t.restore();
+            break;
+          }
+          case "lift": {
+            const p = st(e), S = `rgba(0,0,0, ${0.5 * p})`;
+            t.save(), t.shadowColor = S, t.shadowBlur = 20 * p, t.shadowOffsetX = 0, t.shadowOffsetY = 10 * p, C(t, i, { fillStyle: f }), t.restore();
+            break;
+          }
+          case "neon": {
+            const p = G(e), S = e.textColor || "#ffffff";
+            t.save(), [p * 5, p * 3, p].forEach((M) => {
+              t.shadowColor = r, t.shadowBlur = M, t.shadowOffsetX = 0, t.shadowOffsetY = 0, C(t, i, { fillStyle: S });
+            }), C(t, i, { fillStyle: S }), t.restore();
+            break;
+          }
+          case "outline": {
+            const p = ot(e);
+            C(t, i, {
+              strokeStyle: r,
+              strokeWidth: p,
+              lineJoin: "round",
+              lineCap: "round",
+              fillStyle: f
+            });
+            break;
+          }
+          case "hollow": {
+            const p = tt(e);
+            C(t, i, {
+              strokeStyle: r,
+              strokeWidth: p,
+              lineJoin: "round",
+              lineCap: "round"
+            });
+            break;
+          }
+          case "splice": {
+            const p = x(e), { offsetX: S, offsetY: M } = I(e);
+            t.save(), t.shadowColor = "rgba(0,0,0,0.2)", t.shadowBlur = 0, t.shadowOffsetX = S, t.shadowOffsetY = M, C(t, i, {
+              strokeStyle: r,
+              strokeWidth: p,
+              lineJoin: "round",
+              lineCap: "round"
+            }), t.restore(), C(t, i, {
+              strokeStyle: r,
+              strokeWidth: p,
+              lineJoin: "round",
+              lineCap: "round"
+            });
+            break;
+          }
+          case "echo": {
+            const { offsetX: p, offsetY: S } = I(e);
+            C(t, i, { fillStyle: L(r, 0.5), offsetX: p, offsetY: S }), C(t, i, {
+              fillStyle: L(r, 0.3),
+              offsetX: p * 2,
+              offsetY: S * 2
+            }), C(t, i, { fillStyle: f });
+            break;
+          }
+          case "glitch": {
+            const p = m(e);
+            C(t, i, { fillStyle: "#0ea5e9", offsetX: -p, offsetY: 0 }), C(t, i, { fillStyle: "#f43f5e", offsetX: p, offsetY: 0 }), C(t, i, { fillStyle: f });
+            break;
+          }
+          case "blur": {
+            C(t, i, { fillStyle: f });
+            break;
+          }
+          case "duotone": {
+            const p = e.duotoneLight || "#f472b6", S = e.duotoneDark || "#1e40af";
+            C(t, i, { fillStyle: p, offsetX: 1, offsetY: 1 }), C(t, i, { fillStyle: p, offsetX: -1, offsetY: -1 }), C(t, i, { fillStyle: S });
+            break;
+          }
+          case "reflection": {
+            const p = (e.reflectionOpacity ?? 50) / 100, S = e.reflectionDistance ?? 5, M = `rgba(0,0,0, ${p * 0.3})`;
+            t.save(), t.shadowColor = M, t.shadowBlur = S, t.shadowOffsetX = 0, t.shadowOffsetY = S + 10, C(t, i, { fillStyle: f }), t.restore();
+            break;
+          }
+          case "background": {
+            const p = J(e), S = (e.spread ?? 50) / 5, M = (e.roundness ?? 0) / 2;
+            Mt(t, i, {
+              fillStyle: L(r, p),
+              spread: S,
+              roundness: M
+            });
+            break;
+          }
+          case "gradient_overlay": {
+            const p = e.gradientColor1 || "#667eea", S = e.gradientColor2 || "#764ba2", M = e.gradientAngle || 135, Y = vt(t, s, n, M, p, S);
+            C(t, i, { fillStyle: Y });
+            break;
+          }
+          default:
+            C(t, i, { fillStyle: f });
+        }
+        break;
+      }
+      case "fill":
+        a === "background" && C(t, i, { fillStyle: f });
+        break;
+      case "stroke-front":
+        w();
+        break;
+    }
+  }), t.restore();
+}, A = {
+  triangle: "50,0 100,100 0,100",
+  star: "50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35",
+  hexagon: "25,0 75,0 100,50 75,100 25,100 0,50",
+  pentagon: "50,0 95,35 77,90 23,90 5,35",
+  diamond: "50,0 100,50 50,100 0,50",
+  arrow: "0,35 60,35 60,15 100,50 60,85 60,65 0,65",
+  heart: "50,20 55,15 65,10 80,10 95,25 95,45 50,90 5,45 5,25 20,10 35,10 45,15"
+}, $ = (t, o, s) => {
+  const n = document.createElement("canvas");
+  n.width = Math.max(1, Math.ceil(t * s)), n.height = Math.max(1, Math.ceil(o * s));
+  const a = n.getContext("2d");
+  if (!a)
+    throw new Error("Failed to get canvas context");
+  return a.setTransform(1, 0, 0, 1, 0, 0), a.scale(s, s), { canvas: n, ctx: a };
+}, X = (t, o) => ({ path: t, transform: o }), j = (t, o, s) => {
+  o.transform ? (t.save(), t.transform(o.transform.a, o.transform.b, o.transform.c, o.transform.d, o.transform.e, o.transform.f), s(o.path), t.restore()) : s(o.path);
+}, N = (t, o) => {
+  if (o.transform && typeof t.getTransform == "function") {
+    const s = t.getTransform();
+    t.transform(o.transform.a, o.transform.b, o.transform.c, o.transform.d, o.transform.e, o.transform.f), t.clip(o.path), t.setTransform(s);
+    return;
+  }
+  t.clip(o.path);
+}, _ = (t) => {
+  if (!t)
+    return { x: 0, y: 0, width: 0, height: 0 };
+  const o = t.split(/[\s,]+/).map((s) => Number.parseFloat(s)).filter((s) => !Number.isNaN(s));
+  return o.length >= 4 ? { x: o[0], y: o[1], width: o[2], height: o[3] } : { x: 0, y: 0, width: 0, height: 0 };
+}, Tt = (t) => {
+  try {
+    let o = "linear", s = 90, n = "";
+    if (t.includes("radial-gradient")) {
+      o = "radial";
+      const e = t.match(/radial-gradient\((.*)\)/);
+      if (!e) return null;
+      const f = e[1].split(/,(?![^()]*\))/).map((r) => r.trim());
+      f[0].includes("circle") || f[0].includes("ellipse") || f[0].includes("at ") ? n = f.slice(1).join(",") : n = f.join(",");
+    } else {
+      const e = t.match(/linear-gradient\((.*)\)/);
+      if (!e) return null;
+      const f = e[1].split(/,(?![^()]*\))/).map((r) => r.trim());
+      f[0].includes("deg") ? (s = parseInt(f[0], 10), n = f.slice(1).join(",")) : f[0].includes("to ") ? (f[0] === "to right" ? s = 90 : f[0] === "to bottom" ? s = 180 : f[0] === "to left" ? s = 270 : f[0] === "to top" ? s = 0 : s = 180, n = f.slice(1).join(",")) : (s = 180, n = f.join(","));
+    }
+    const a = n.split(/,(?![^()]*\))/).map((e) => e.trim()).map((e) => {
+      const i = e.match(/(.+)\s+(\d+)%$/);
+      return i ? { color: i[1], offset: i[2] + "%" } : { color: e, offset: "" };
+    }).filter((e) => e.color);
+    return a.length === 2 && (a[0].offset || (a[0].offset = "0%"), a[1].offset || (a[1].offset = "100%")), { type: o, angle: s, stops: a };
+  } catch {
+    return null;
+  }
+}, at = (t, o, s, n) => {
+  const a = (n - 90) * Math.PI / 180, e = Math.cos(a), i = Math.sin(a), f = o / 2 - e * (o / 2), r = s / 2 - i * (s / 2), l = o / 2 + e * (o / 2), c = s / 2 + i * (s / 2);
+  return t.createLinearGradient(f, r, l, c);
+}, Pt = (t, o, s) => {
+  const n = Math.min(o, s) / 2;
+  if (typeof t == "number") {
+    const l = Math.max(0, Math.min(t, n));
+    return { tl: l, tr: l, br: l, bl: l };
+  }
+  const a = t, e = Math.max(0, Math.min((a == null ? void 0 : a.tl) ?? 0, n)), i = Math.max(0, Math.min((a == null ? void 0 : a.tr) ?? 0, n)), f = Math.max(0, Math.min((a == null ? void 0 : a.br) ?? 0, n)), r = Math.max(0, Math.min((a == null ? void 0 : a.bl) ?? 0, n));
+  return { tl: e, tr: i, br: f, bl: r };
+}, z = (t, o, s, n, a, e) => {
+  const { tl: i, tr: f, br: r, bl: l } = Pt(e, n, a);
+  if (i === 0 && f === 0 && r === 0 && l === 0) {
+    t.rect(o, s, n, a);
+    return;
+  }
+  t.moveTo(o + i, s), t.lineTo(o + n - f, s), t.arcTo(o + n, s, o + n, s + f, f), t.lineTo(o + n, s + a - r), t.arcTo(o + n, s + a, o + n - r, s + a, r), t.lineTo(o + l, s + a), t.arcTo(o, s + a, o, s + a - l, l), t.lineTo(o, s + i), t.arcTo(o, s, o + i, s, i), t.closePath();
+}, it = (t, o, s, n) => {
+  const a = t.split(" ").map((r) => {
+    const [l, c] = r.split(",").map(Number);
+    return { x: l / 100 * s, y: c / 100 * n };
+  }), e = typeof o == "number";
+  if (e && o <= 0)
+    return `M ${a.map((r) => `${r.x},${r.y}`).join(" L ")} Z`;
+  const i = a.length;
+  let f = "";
+  for (let r = 0; r < i; r++) {
+    const l = a[(r - 1 + i) % i], c = a[r], d = a[(r + 1) % i], y = { x: l.x - c.x, y: l.y - c.y }, u = { x: d.x - c.x, y: d.y - c.y }, h = Math.sqrt(y.x * y.x + y.y * y.y), g = Math.sqrt(u.x * u.x + u.y * u.y), b = Math.min(h, g) / 2;
+    let v = 0;
+    e ? v = o : v = o[`p${r}`] ?? 0;
+    const w = Math.min(v, b);
+    if (w <= 0) {
+      r === 0 ? f += `M ${c.x},${c.y} ` : f += `L ${c.x},${c.y} `;
+      continue;
+    }
+    const T = { x: c.x + y.x / h * w, y: c.y + y.y / h * w }, W = { x: c.x + u.x / g * w, y: c.y + u.y / g * w };
+    r === 0 ? f += `M ${T.x},${T.y} ` : f += `L ${T.x},${T.y} `, f += `Q ${c.x},${c.y} ${W.x},${W.y} `;
+  }
+  return f += "Z", f;
+}, Ot = (t) => {
+  const o = t.clip;
+  if (!o) return null;
+  const s = Math.max(0, o.left ?? 0), n = Math.max(0, o.top ?? 0), a = Math.max(0, o.right ?? 0), e = Math.max(0, o.bottom ?? 0);
+  if (!(n > 0 || a > 0 || e > 0 || s > 0)) return null;
+  const f = t.width - s - a, r = t.height - n - e;
+  return f <= 0 || r <= 0 ? null : {
+    left: s,
+    top: n,
+    width: f,
+    height: r,
+    originX: s + f / 2,
+    originY: n + r / 2
+  };
+}, Wt = (t) => {
+  var a, e, i, f;
+  const o = (e = (a = t.effect) == null ? void 0 : a.style) == null ? void 0 : e.type, s = ((f = (i = t.effect) == null ? void 0 : i.style) == null ? void 0 : f.params) || {};
+  if (!o || o === "none") return 0;
+  const n = (r, l) => r ?? l;
+  switch (o) {
+    case "shadow": {
+      const r = n(s.blur, 10), l = n(s.offset, 50) / 5;
+      return r + l + 10;
+    }
+    case "lift": {
+      const r = n(s.intensity, 50) / 50, l = 20 * r, c = 10 * r;
+      return l + c + 10;
+    }
+    case "neon":
+      return G(s) * 5 + 6;
+    case "outline":
+      return ot(s) * 2 + 2;
+    case "hollow":
+      return tt(s) * 2 + 2;
+    case "splice": {
+      const r = x(s), { offsetX: l, offsetY: c } = I(s);
+      return Math.max(Math.abs(l), Math.abs(c)) + r * 2 + 4;
+    }
+    case "echo": {
+      const { offsetX: r, offsetY: l } = I(s);
+      return Math.max(Math.abs(r), Math.abs(l)) * 2 + 4;
+    }
+    case "glitch":
+      return Math.abs(m(s)) + 4;
+    case "blur":
+      return n(s.blurAmount, 5) * 2 + 4;
+    case "duotone":
+    case "gradient_overlay":
+    case "background":
+      return 2;
+    case "reflection": {
+      const r = n(s.reflectionDistance, 5), l = r, c = r + 10;
+      return Math.abs(c) + l + 6;
+    }
+    default:
+      return 0;
+  }
+}, lt = (t) => {
+  const o = [], s = /d=\"([^\"]+)\"/g;
+  let n = null;
+  for (; (n = s.exec(t)) !== null; )
+    o.push(n[1]);
+  return o;
+}, Dt = (t, o, s) => {
+  if (t.type === "shape") {
+    const n = t.content, a = rt(n);
+    if (a && typeof DOMMatrix < "u") {
+      const e = lt(a.markup);
+      if (e.length > 0) {
+        const { x: i, y: f, width: r, height: l } = _(a.viewBox), c = r > 0 ? o / r : 1, d = l > 0 ? s / l : 1, y = new DOMMatrix().translate(-i, -f).scale(c, d), u = new Path2D(e.join(" "));
+        return X(u, y);
+      }
+    }
+    if (n === "rect") {
+      const e = new Path2D(), i = t.cornerRadius || 0;
+      return z(e, 0, 0, o, s, i), X(e);
+    }
+    if (n === "circle") {
+      const e = new Path2D();
+      return e.ellipse(o / 2, s / 2, o / 2, s / 2, 0, 0, Math.PI * 2), X(e);
+    }
+    if (n === "line") {
+      const e = new Path2D();
+      return e.moveTo(0, s / 2), e.lineTo(o, s / 2), X(e);
+    }
+    if (A[n]) {
+      const e = t.cornerRadius || 0, i = it(A[n], e, o, s);
+      return X(new Path2D(i));
+    }
+  }
+  return null;
+}, F = (t, o, s) => {
+  if (t.type === "image" && t.clipShape) {
+    const n = rt(t.clipShape);
+    if (n) {
+      const a = lt(n.markup);
+      if (a.length > 0 && typeof DOMMatrix < "u") {
+        const { x: e, y: i, width: f, height: r } = _(n.viewBox), l = f > 0 ? o / f : 1, c = r > 0 ? s / r : 1, d = new DOMMatrix().translate(-e, -i).scale(l, c), y = new Path2D(a.join(" "));
+        return X(y, d);
+      }
+    }
+    if (t.clipShape === "circle") {
+      const a = new Path2D();
+      return a.ellipse(o / 2, s / 2, o / 2, s / 2, 0, 0, Math.PI * 2), X(a);
+    }
+    if (t.clipShape === "path" && t.path) {
+      const a = et(t.path);
+      return X(new Path2D(a));
+    }
+    if (A[t.clipShape]) {
+      const a = t.cornerRadius || 0, e = it(A[t.clipShape], a, o, s);
+      return X(new Path2D(e));
+    }
+  }
+  return null;
+}, Yt = (t, o, s, n) => {
+  const a = o.backgroundColor || "transparent", e = a.includes("gradient") ? Tt(a) : null;
+  if (e)
+    if (e.type === "radial") {
+      const l = t.createRadialGradient(s / 2, n / 2, 0, s / 2, n / 2, Math.max(s, n) / 2);
+      e.stops.forEach((c, d) => {
+        const y = e.stops.length > 1 ? d / (e.stops.length - 1) : 0, u = c.offset ? Number.parseFloat(c.offset) / 100 : y;
+        l.addColorStop(Number.isFinite(u) ? u : y, c.color);
+      }), t.fillStyle = l;
+    } else {
+      const l = at(t, s, n, e.angle);
+      e.stops.forEach((c, d) => {
+        const y = e.stops.length > 1 ? d / (e.stops.length - 1) : 0, u = c.offset ? Number.parseFloat(c.offset) / 100 : y;
+        l.addColorStop(Number.isFinite(u) ? u : y, c.color);
+      }), t.fillStyle = l;
+    }
+  else
+    t.fillStyle = a;
+  const i = Dt(o, s, n);
+  i ? j(t, i, (l) => t.fill(l)) : t.fillRect(0, 0, s, n);
+  const f = o.content === "line" ? Math.max(2, o.strokeWidth || 4) : o.strokeWidth || 0, r = o.strokeColor || "transparent";
+  f > 0 && r !== "transparent" && (t.save(), t.strokeStyle = r, t.lineWidth = f, t.lineJoin = "round", t.lineCap = o.strokeStyle === "round" ? "round" : "butt", o.strokeStyle === "dashed" ? t.setLineDash([6, 4]) : o.strokeStyle === "dotted" ? t.setLineDash([2, 2]) : t.setLineDash([]), i ? j(t, i, (l) => t.stroke(l)) : t.strokeRect(0, 0, s, n), t.restore());
+}, Xt = (t, o, s) => {
+  if (o === "none") return t;
+  const n = t.width / s, a = t.height / s, { canvas: e, ctx: i } = $(n, a, s);
+  return i.filter = o, i.drawImage(t, 0, 0, n, a), e;
+}, Rt = (t) => new Promise((o, s) => {
+  const n = new Image(), a = nt(t);
+  n.decoding = "async", a.crossOrigin && (n.crossOrigin = a.crossOrigin), n.onload = () => o(n), n.onerror = (e) => s(e), n.src = a.src;
+}), It = async (t, o, s, n, a) => {
+  if (o.isIcon && o.iconPaths && o.iconPaths.length > 0) {
+    const { x: D, y: p, width: S, height: M } = _(
+      o.iconViewBox || `0 0 ${s} ${n}`
+    ), Y = S > 0 ? s / S : 1, k = M > 0 ? n / M : 1;
+    t.save(), t.fillStyle = o.color || "#000000", t.translate(-D * Y, -p * k), t.scale(Y, k), o.iconPaths.forEach((O) => {
+      const P = new Path2D(O);
+      t.fill(P);
+    }), t.restore();
+    return;
+  }
+  const e = o.content;
+  if (!e) return;
+  const f = nt(e).src;
+  let r = a.get(f);
+  r || (r = await Rt(f), a.set(f, r));
+  const l = r.naturalWidth || r.width || s, c = r.naturalHeight || r.height || n, d = pt(o.crop, s, n, l, c), y = d.width * l, u = d.height * c, h = s / y, g = n / u, b = l * h, v = c * g, w = -(d.x * l) * h, T = -(d.y * c) * g, W = (o.imageRotation ?? 0) * (Math.PI / 180);
+  if (o.backgroundColor && o.backgroundColor !== "transparent" && (t.save(), t.fillStyle = o.backgroundColor, t.fillRect(0, 0, s, n), t.restore()), t.save(), W) {
+    const D = w + b / 2, p = T + v / 2;
+    t.translate(D, p), t.rotate(W), t.translate(-D, -p);
+  }
+  t.drawImage(r, w, T, b, v), t.restore();
+}, Lt = (t, o) => {
+  if (!o.path) return;
+  const s = et(o.path);
+  if (!s) return;
+  const n = new Path2D(s), a = o.backgroundColor ?? o.path.fillColor ?? "transparent", e = o.strokeColor ?? o.path.strokeColor ?? "transparent", i = o.strokeWidth ?? o.path.strokeWidth ?? 0;
+  a && a !== "transparent" && (t.save(), t.fillStyle = a, t.fill(n), t.restore()), i > 0 && e && e !== "transparent" && (t.save(), t.strokeStyle = e, t.lineWidth = i, t.lineCap = o.path.lineCap, t.lineJoin = o.path.lineJoin, o.strokeStyle === "dashed" ? t.setLineDash([6, 4]) : o.strokeStyle === "dotted" ? t.setLineDash([2, 2]) : t.setLineDash([]), t.stroke(n), t.restore());
+}, $t = async (t, o, s) => {
+  var D, p, S, M, Y;
+  const n = Wt(t), a = typeof n == "number" ? n : 0, e = t.width + a * 2, i = t.height + a * 2, { canvas: f, ctx: r } = $(e, i, o);
+  r.save(), r.translate(a, a);
+  const l = Ot(t), c = ((p = (D = t.effect) == null ? void 0 : D.style) == null ? void 0 : p.type) ?? "none", d = ((M = (S = t.effect) == null ? void 0 : S.style) == null ? void 0 : M.params) ?? {}, y = K((Y = t.effect) == null ? void 0 : Y.adjustments), { canvas: u, ctx: h } = $(t.width, t.height, o);
+  if (t.type === "text")
+    l ? (h.save(), h.beginPath(), h.rect(l.left, l.top, l.width, l.height), h.clip(), V(h, t, t.width, t.height, c, d), h.restore()) : V(h, t, t.width, t.height, c, d);
+  else {
+    if (h.save(), l)
+      h.beginPath(), h.rect(l.left, l.top, l.width, l.height), h.clip();
+    else {
+      const k = F(t, t.width, t.height);
+      k ? N(h, k) : t.type === "image" && t.cornerRadius && (h.beginPath(), z(h, 0, 0, t.width, t.height, t.cornerRadius), h.clip());
+    }
+    if (t.type === "shape" ? Yt(h, t, t.width, t.height) : t.type === "image" ? await It(h, t, t.width, t.height, s) : t.type === "path" ? Lt(h, t) : (h.fillStyle = t.backgroundColor || "transparent", h.fillRect(0, 0, t.width, t.height)), h.restore(), t.type === "image" && (t.strokeWidth || 0) > 0) {
+      const k = F(t, t.width, t.height);
+      h.save(), h.strokeStyle = t.strokeColor || "#000000", h.lineWidth = t.strokeWidth || 0, h.lineJoin = "round", h.lineCap = t.strokeStyle === "round" ? "round" : "butt", t.strokeStyle === "dashed" ? h.setLineDash([6, 4]) : t.strokeStyle === "dotted" ? h.setLineDash([2, 2]) : h.setLineDash([]), k ? j(h, k, (O) => h.stroke(O)) : t.cornerRadius ? (h.beginPath(), z(h, 0, 0, t.width, t.height, t.cornerRadius), h.stroke()) : h.strokeRect(0, 0, t.width, t.height), h.restore();
+    }
+  }
+  const g = t.type === "text", b = [];
+  if (!g) {
+    if (y && b.push(y), c === "blur") {
+      const k = d.blurAmount ?? 5;
+      b.push(`blur(${k}px)`);
+    }
+    c === "duotone" && b.push("grayscale(100%)");
+  }
+  const v = b.join(" ").trim() || "none", w = !g && c === "blur", T = g || w ? u : Xt(u, v, o);
+  if (!g && (c === "shadow" || c === "lift" || c === "neon")) {
+    if (r.save(), r.filter = "none", c === "shadow") {
+      const { offsetX: k, offsetY: O } = I(d), P = d.blur ?? 0, E = J(d);
+      r.shadowColor = L(Q(d, "#000000"), E), r.shadowBlur = P, r.shadowOffsetX = k, r.shadowOffsetY = O, r.drawImage(T, 0, 0, t.width, t.height);
+    } else if (c === "lift") {
+      const k = st(d);
+      r.shadowColor = `rgba(0,0,0, ${0.5 * k})`, r.shadowBlur = 20 * k, r.shadowOffsetX = 0, r.shadowOffsetY = 10 * k, r.drawImage(T, 0, 0, t.width, t.height);
+    } else if (c === "neon") {
+      const k = G(d), O = d.color || "#00ff00";
+      [k * 5, k * 3, k].forEach((P) => {
+        r.shadowColor = O, r.shadowBlur = P, r.shadowOffsetX = 0, r.shadowOffsetY = 0, r.drawImage(T, 0, 0, t.width, t.height);
+      });
+    }
+    r.restore();
+  }
+  if (!g && c === "reflection") {
+    const k = (d.reflectionOpacity ?? 50) / 100, O = d.reflectionDistance ?? 5, P = 0.35;
+    r.save(), r.drawImage(T, 0, 0, t.width, t.height), r.translate(0, t.height + O), r.scale(1, -1), r.globalAlpha = k, r.drawImage(
+      T,
+      0,
+      t.height - t.height * P,
+      t.width,
+      t.height * P,
+      0,
+      0,
+      t.width,
+      t.height * P
+    ), r.restore();
+  } else
+    w ? (r.save(), r.filter = v, r.drawImage(u, 0, 0, t.width, t.height), r.restore()) : r.drawImage(T, 0, 0, t.width, t.height);
+  if (!g && c === "gradient_overlay") {
+    const k = d.gradientColor1 || "#667eea", O = d.gradientColor2 || "#764ba2", P = d.gradientAngle || 135, E = (d.transparency ?? 80) / 100;
+    r.save(), r.globalAlpha = E, r.filter = y || "none", r.globalCompositeOperation = "overlay";
+    const H = at(r, t.width, t.height, P);
+    H.addColorStop(0, k), H.addColorStop(1, O), r.fillStyle = H;
+    const q = F(t, t.width, t.height);
+    q ? (r.save(), N(r, q), r.fillRect(0, 0, t.width, t.height), r.restore()) : r.fillRect(0, 0, t.width, t.height), r.restore();
+  }
+  if (!g && c === "duotone") {
+    const k = d.duotoneLight || "#f472b6", O = d.duotoneDark || "#1e40af", P = F(t, t.width, t.height);
+    r.save(), r.filter = y || "none", P && N(r, P), r.globalCompositeOperation = "multiply", r.fillStyle = O, r.fillRect(0, 0, t.width, t.height), r.globalCompositeOperation = "screen", r.globalAlpha = 0.6, r.fillStyle = k, r.fillRect(0, 0, t.width, t.height), r.restore();
+  }
+  r.restore();
+  const W = l ? { x: l.originX, y: l.originY } : { x: t.width / 2, y: t.height / 2 };
+  return {
+    canvas: f,
+    padding: a,
+    origin: W,
+    width: e,
+    height: i
+  };
+}, Z = async (t, o) => {
+  const { page: s, settings: n, bleed: a, backgroundColor: e, pixelRatio: i } = o, f = o.width, r = o.height, l = a, c = a;
+  e !== "transparent" && (t.save(), t.fillStyle = e || n.backgroundColor || "#ffffff", t.fillRect(0, 0, f, r), t.restore());
+  const d = [...s.elements].filter((u) => u.visible !== !1).sort((u, h) => u.zIndex - h.zIndex), y = /* @__PURE__ */ new Map();
+  for (const u of d) {
+    const { canvas: h, padding: g, origin: b, width: v, height: w } = await $t(
+      u,
+      i,
+      y
+    );
+    t.save(), t.globalCompositeOperation = wt(u.blendMode), t.globalAlpha = u.opacity ?? 1, t.translate(l + u.x, c + u.y), t.translate(b.x, b.y), t.rotate((u.rotation ?? 0) * Math.PI / 180), t.scale(u.flipX ? -1 : 1, u.flipY ? -1 : 1), t.translate(-b.x, -b.y), t.drawImage(h, -g, -g, v, w), t.restore();
+  }
+}, At = async (t) => {
+  await ht(document);
+  const o = t.width, s = t.height;
+  if (!dt(
+    o,
+    s,
+    t.pixelRatio,
+    8192,
+    67108864
+  )) {
+    const { canvas: i, ctx: f } = $(o, s, t.pixelRatio);
+    return await Z(f, t), i;
+  }
+  const a = ut(o, s, {
+    tileWidth: B.tileSize,
+    tileHeight: B.tileSize,
+    overlap: B.tileOverlap
+  }), e = [];
+  for (const i of a.tiles) {
+    const { canvas: f, ctx: r } = $(i.width, i.height, t.pixelRatio);
+    r.translate(-i.x, -i.y), await Z(r, t), e.push({ rect: i, canvas: f });
+  }
+  return gt(e, o, s, t.pixelRatio);
+};
+export {
+  At as capturePageCanvas
+};

package/dist/fraczled-sdk.es.js

@@ -1,6 +1,6 @@
 import "react";
 import "react-dom/client";
-import { S as o, y as p, x as c, z as i } from "./index-Cu0YlsyW.js";
+import { S as o, y as p, x as c, z as i } from "./index-C2qSvudu.js";
 export {
   o as Store,
   p as createFraczledEditor,