@drawnagency/primitives 0.1.87 → 0.1.89

package/dist/{chunk-PTVY3Q7P.js → chunk-2QXJ2KGB.js}

@@ -1,6 +1,6 @@
 import {
   EditablePlainText
-} from "./chunk-NEDOJHHR.js";
+} from "./chunk-J75XGXYD.js";
 import {
   Button,
   usePages

package/dist/{chunk-DRCPDOW3.js → chunk-CZ3YXGK5.js}

@@ -308,6 +308,64 @@ function generateVideoPoster(blob, quality) {
   });
 }
 
+// src/media/compose-preview.ts
+var WIDTH = 1200;
+var HEIGHT = 630;
+async function composePreviewImage(inputs) {
+  const canvas = document.createElement("canvas");
+  canvas.width = WIDTH;
+  canvas.height = HEIGHT;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2D canvas context unavailable");
+  ctx.fillStyle = inputs.background;
+  ctx.fillRect(0, 0, WIDTH, HEIGHT);
+  let drewLogo = false;
+  if (inputs.mode === "logo" && inputs.logoUrl) {
+    try {
+      const img = await loadImage(inputs.logoUrl);
+      if (!(img.width > 0 && img.height > 0)) {
+        throw new Error("Logo image has no intrinsic size");
+      }
+      const maxW = WIDTH * 0.6;
+      const maxH = HEIGHT * 0.5;
+      const scale = Math.min(maxW / img.width, maxH / img.height);
+      const w = img.width * scale;
+      const h = img.height * scale;
+      ctx.filter = inputs.invertLogo ? "invert(1)" : "none";
+      ctx.drawImage(img, (WIDTH - w) / 2, (HEIGHT - h) / 2, w, h);
+      ctx.filter = "none";
+      drewLogo = true;
+    } catch {
+    }
+  }
+  if (!drewLogo) {
+    if (document.fonts?.ready) await document.fonts.ready;
+    await document.fonts.load(`600 84px ${inputs.headingFont}`).catch(() => {
+    });
+    ctx.fillStyle = inputs.textColor;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.font = `600 84px ${inputs.headingFont}, system-ui, sans-serif`;
+    ctx.fillText(inputs.siteName, WIDTH / 2, HEIGHT / 2, WIDTH * 0.86);
+  }
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error("toBlob returned null")),
+      "image/webp",
+      0.9
+    );
+  });
+}
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`failed to load ${url}`));
+    img.src = url;
+  });
+}
+
 // src/media/index.ts
 var MEDIA_KEY = /* @__PURE__ */ Symbol.for("@drawnagency/primitives/media");
 var _g = globalThis;
@@ -339,6 +397,7 @@ export {
   rebindImageRef,
   resolveLogo,
   generateVideoPoster,
+  composePreviewImage,
   setMediaProvider,
   getMediaProvider
 };

package/dist/{chunk-NEDOJHHR.js → chunk-J75XGXYD.js}

@@ -6,10 +6,10 @@ import {
   SettingsIcon,
   useMediaLibrary,
   useResolvedMedia
-} from "./chunk-EO7K45GV.js";
+} from "./chunk-NV4R6VHN.js";
 import {
   rebindImageRef
-} from "./chunk-DRCPDOW3.js";
+} from "./chunk-CZ3YXGK5.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";