kira-arts 1.4.0 → 1.4.2

package/README.md

@@ -2,6 +2,8 @@
 
 A TypeScript library for generating Discord-style visual cards — profiles, welcome/leave events, level-ups, achievements, leaderboards, compatibility "ship" cards, now-playing music cards, and giveaways — rendered natively for speed and zero runtime dependencies on a browser or headless Chromium.
 
+<img src="https://i.imgur.com/AMk4jWr.png" alt="Kira Arts" width="100%">
+
 **📚 Full documentation, live examples, and a Playground: [documentation](https://guide.worddevs.dev/docs/kira-arts)**
 
 [![npm version](https://img.shields.io/npm/v/kira-arts.svg)](https://www.npmjs.com/package/kira-arts)
@@ -69,7 +71,7 @@ client.on("messageCreate", async (message) => {
     badgesFrame: true,
   });
 
-  await message.reply({ files: [toAttachment(buffer, "profile", "png")] });
+  await message.reply({ files: [toAttachment(buffer, { name: "profile", extension: "png" })] });
 });
 
 client.login(process.env.TOKEN);

package/dist/index.cjs

@@ -1117,21 +1117,31 @@ async function applyWatermarkToCanvas(canvas) {
 	const margin = config.margin ?? 16;
 	const scale = config.scale && config.scale > 0 ? config.scale : 1;
 	const opacity = config.opacity != null ? Math.min(1, Math.max(0, config.opacity)) : .6;
-	const fontSize = (config.fontSize ?? 13) * scale;
+	const fontSize = (config.fontSize ?? 22) * scale;
 	const position = config.position ?? "bottom-right";
-	const isRight = position === "bottom-right" || position === "top-right";
-	const isBottom = position === "bottom-right" || position === "bottom-left";
+	const isLeft = position === "top-left" || position === "bottom-left" || position === "center-left";
+	const isRight = position === "top-right" || position === "bottom-right" || position === "center-right";
+	const isTop = position === "top-left" || position === "top-right";
+	const isBottom = position === "bottom-left" || position === "bottom-right";
 	const logo = config.imageUrl ? await resolveWatermarkImage(config.imageUrl) : void 0;
-	const logoSize = 20 * scale;
-	const gap = 8 * scale;
+	const logoSize = (config.size && config.size > 0 ? config.size : 56) * scale;
+	const gap = 12 * scale;
 	let contentWidth = 0;
 	if (logo) contentWidth += logoSize;
 	if (config.text) {
 		ctx.font = `${fontSize}px sans-serif`;
 		contentWidth += (logo ? gap : 0) + ctx.measureText(config.text).width;
 	}
-	const startX = isRight ? width - margin - contentWidth : margin;
-	const centerY = isBottom ? height - margin - logoSize / 2 : margin + logoSize / 2;
+	let startX;
+	if (isRight) startX = width - margin - contentWidth;
+	else if (isLeft) startX = margin;
+	else startX = (width - contentWidth) / 2;
+	let centerY;
+	if (isBottom) centerY = height - margin - logoSize / 2;
+	else if (isTop) centerY = margin + logoSize / 2;
+	else centerY = height / 2;
+	startX += config.offsetX ?? 0;
+	centerY += config.offsetY ?? 0;
 	ctx.save();
 	ctx.globalAlpha = opacity;
 	let cursorX = startX;
@@ -2395,7 +2405,7 @@ async function resolveStaticImage(bytes, fallbackUrl) {
 	}
 	return (0, _napi_rs_canvas.loadImage)(fallbackUrl).catch(() => void 0);
 }
-async function renderAnimatedMemberEvent(avatarUrl, username, layout, width, height) {
+async function renderAnimatedMemberEvent(avatarUrl, username, layout, width, height, output) {
 	const avatarSource = await fetchImageSource(avatarUrl).catch(() => null);
 	const animatedAvatar = avatarSource?.animated ?? null;
 	const avatarImage = animatedAvatar ? void 0 : await resolveStaticImage(avatarSource?.bytes, avatarUrl);
@@ -2404,7 +2414,7 @@ async function renderAnimatedMemberEvent(avatarUrl, username, layout, width, hei
 	const staticBackgroundImage = !animatedBackground && layout.customBackground ? await resolveStaticImage(backgroundSource?.bytes, layout.customBackground) : void 0;
 	const wantsConfetti = layout.confetti === true;
 	const frameCount = resolveGifFrameCount(layout.gifSeconds);
-	if (!animatedBackground && !animatedAvatar && !wantsConfetti) return renderStaticMemberEventGif(avatarUrl, username, layout, width, height, avatarImage, staticBackgroundImage);
+	if (!animatedBackground && !animatedAvatar && !wantsConfetti) return renderStaticMemberEventImage(avatarUrl, username, layout, width, height, avatarImage, staticBackgroundImage, output);
 	const particles = wantsConfetti ? generateConfetti(width, height, layout.accentColor) : [];
 	const frames = [];
 	if (animatedBackground || animatedAvatar) {
@@ -2451,7 +2461,7 @@ async function renderAnimatedMemberEvent(avatarUrl, username, layout, width, hei
 	}
 	return encodeGif(frames, GIF_FRAME_DELAY_MS);
 }
-async function renderStaticMemberEventGif(avatarUrl, username, layout, width, height, avatarImage, backgroundImage) {
+async function renderStaticMemberEventImage(avatarUrl, username, layout, width, height, avatarImage, backgroundImage, output) {
 	const canvas = (0, _napi_rs_canvas.createCanvas)(width, height);
 	const ctx = canvas.getContext("2d");
 	fillOpaqueBase(ctx, width, height);
@@ -2460,16 +2470,11 @@ async function renderStaticMemberEventGif(avatarUrl, username, layout, width, he
 		backgroundImage
 	});
 	await applyWatermarkToCanvas(canvas);
-	const imageData = ctx.getImageData(0, 0, width, height);
-	return encodeGif([{
-		data: imageData.data,
-		width,
-		height
-	}], GIF_FRAME_DELAY_MS);
+	return encodeCanvas(canvas, output);
 }
 async function genMemberEventPng(avatarUrl, username, layout, output) {
 	const { width, height } = getCardDimensions$5(layout);
-	if (layout.animated) return renderAnimatedMemberEvent(avatarUrl, username, layout, width, height);
+	if (layout.animated) return renderAnimatedMemberEvent(avatarUrl, username, layout, width, height, output);
 	const { canvas, ctx } = createMemberEventCanvas(width, height);
 	await drawMemberEventCard(ctx, width, height, avatarUrl, username, layout);
 	return encodeCanvas(canvas, output);
@@ -2482,12 +2487,12 @@ function formatMessage(template, username, guildName, memberCount) {
 	return template.replace(/\{username\}/g, username).replace(/\{user\}/g, username).replace(/\{server\}/g, guildName).replace(/\{memberCount\}/g, memberCount != null ? String(memberCount) : "");
 }
 function formatMemberCount(memberCount, localDateType) {
-	return localDateType.startsWith("es") ? `Member #${memberCount}` : `Member #${memberCount}`;
+	return localDateType.startsWith("es") ? `Miembro #${memberCount}` : `Member #${memberCount}`;
 }
 function formatKindLabel(kind, localDateType) {
 	const isEs = localDateType.startsWith("es");
-	if (kind === "welcome") return isEs ? "NEW MEMBER" : "NEW MEMBER";
-	return isEs ? "MEMBER LEFT" : "MEMBER LEFT";
+	if (kind === "welcome") return isEs ? "NUEVO MIEMBRO" : "NEW MEMBER";
+	return isEs ? "MIEMBRO SALIÓ" : "MEMBER LEFT";
 }
 async function renderMemberEventCard(userId, guildName, defaultMessage, options = {}, kind = "welcome") {
 	if (!userId || typeof userId !== "string") throw new KiraError("A valid userId is required", "VALIDATION");
@@ -2506,7 +2511,7 @@ async function renderMemberEventCard(userId, guildName, defaultMessage, options
 		roleColor: data.decoration.roleColor,
 		fallback: palette?.borderColor ?? [accentColor]
 	});
-	const localDateType = options.localDateType ?? "es";
+	const localDateType = options.localDateType ?? "en";
 	const rawMessage = options.message === "" ? void 0 : options.message ?? defaultMessage;
 	const message = rawMessage ? normalizeDisplayText(formatMessage(rawMessage, username, normalizeDisplayText(guildName), options.memberCount)) : void 0;
 	const secondaryMessage = options.secondaryMessage ? normalizeDisplayText(formatMessage(options.secondaryMessage, username, normalizeDisplayText(guildName), options.memberCount)) : void 0;