@tomako/tools-runtime 0.1.0

package/src/lib/tools/social-profile-kit.manual.ts

@@ -0,0 +1,481 @@
+import type { AppLocale } from "../../i18n/locale";
+
+import {
+  SOCIAL_PROFILE_DEFAULT_COLORS,
+  SOCIAL_PROFILE_PLATFORM_SPECS,
+  SOCIAL_PROFILE_PLATFORMS,
+  SOCIAL_PROFILE_V1_PLATFORMS,
+} from "./social-profile-kit.constants";
+import {
+  socialProfileInputSchema,
+  socialProfileKitOutputSchema,
+  type SocialProfileInput,
+  type SocialProfileKitOutput,
+  type SocialProfileOutputLanguage,
+  type SocialProfilePlatform,
+  type SocialPlatformProfile,
+} from "./social-profile-kit.schema";
+
+const DEFAULT_INPUT: SocialProfileInput = {
+  mode: "brandCompany",
+  inputMode: "form",
+  name: "NovaDesk",
+  positioning: "AI workspace for solo founders",
+  audience: "Creators, indie hackers",
+  targetMarket: "northAmerica",
+  outputLanguage: "en",
+  tone: "modern",
+  prompt: "",
+  platforms: [...SOCIAL_PROFILE_V1_PLATFORMS],
+  theme: "light",
+};
+
+const BIO_PREVIEW_LIMITS: Partial<Record<SocialProfilePlatform, number>> = {
+  x: 155,
+  threads: 145,
+  instagram: 145,
+  tiktok: 80,
+};
+
+function slugifyHandle(value: string) {
+  const slug = value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "")
+    .slice(0, 20);
+  return slug || "profilekit";
+}
+
+function extractWebsite(input: SocialProfileInput) {
+  const source = [input.name, input.positioning, input.audience, input.prompt]
+    .filter(Boolean)
+    .join(" ");
+  const match = source.match(
+    /(?:https?:\/\/)?(?:www\.)?([a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z]{2,})+)/i,
+  );
+  return match?.[1]?.toLowerCase();
+}
+
+function toneWord(input: SocialProfileInput) {
+  if (input.outputLanguage === "zh") {
+    switch (input.tone) {
+      case "bold":
+        return "鲜明";
+      case "friendly":
+        return "亲和";
+      case "minimal":
+        return "克制";
+      case "professional":
+        return "可信";
+      case "modern":
+      default:
+        return "现代";
+    }
+  }
+
+  if (input.outputLanguage === "ja") {
+    switch (input.tone) {
+      case "bold":
+        return "シャープ";
+      case "friendly":
+        return "親しみやすい";
+      case "minimal":
+        return "ミニマル";
+      case "professional":
+        return "信頼感のある";
+      case "modern":
+      default:
+        return "モダン";
+    }
+  }
+
+  switch (input.tone) {
+    case "bold":
+      return "sharp";
+    case "friendly":
+      return "warm";
+    case "minimal":
+      return "clean";
+    case "professional":
+      return "credible";
+    case "modern":
+    default:
+      return "modern";
+  }
+}
+
+function sentencePart(value: string | undefined, fallback: string) {
+  return (value || fallback).trim().replace(/[。.!！?？；;,，]+$/g, "");
+}
+
+function ellipsis(language: SocialProfileOutputLanguage) {
+  return language === "en" ? "..." : "…";
+}
+
+function concisePart(
+  value: string | undefined,
+  fallback: string,
+  language: SocialProfileOutputLanguage,
+  maxLength = 110,
+) {
+  const clean = sentencePart(value, fallback);
+  const firstSentence = clean.split(/(?<=[.!?。！？])\s+|[。！？]/u)[0] || clean;
+
+  if (firstSentence.length <= maxLength) return firstSentence;
+
+  const clipped = firstSentence.slice(0, maxLength - 1);
+  const lastSpace = clipped.lastIndexOf(" ");
+  return `${(lastSpace > 48 ? clipped.slice(0, lastSpace) : clipped).trim()}${ellipsis(language)}`;
+}
+
+function fitBio(
+  platform: SocialProfilePlatform,
+  bio: string,
+  language: SocialProfileOutputLanguage,
+) {
+  const limit = BIO_PREVIEW_LIMITS[platform];
+  if (!limit || bio.length <= limit) return bio;
+
+  const clipped = bio.slice(0, limit - 1);
+  const lastSpace = clipped.lastIndexOf(" ");
+  return `${(lastSpace > 48 ? clipped.slice(0, lastSpace) : clipped).trim()}${ellipsis(language)}`;
+}
+
+function hasCjkText(value: string | undefined) {
+  return /[\u3400-\u9fff]/.test(String(value ?? ""));
+}
+
+function uniqueList(items: string[]) {
+  return Array.from(new Set(items.filter(Boolean)));
+}
+
+function joinEnglishList(items: string[]) {
+  const values = uniqueList(items);
+  if (values.length <= 1) return values[0] ?? "";
+  if (values.length === 2) return `${values[0]} and ${values[1]}`;
+  return `${values.slice(0, -1).join(", ")}, and ${values[values.length - 1]}`;
+}
+
+function englishAudienceFallback(value: string | undefined) {
+  const text = sentencePart(value, "your audience");
+  if (!hasCjkText(text)) return text;
+
+  const groups: string[] = [];
+  if (/\u72ec\u7acb\u5f00\u53d1/.test(text)) groups.push("indie developers");
+  if (/\u4e2d\u5c0f\u56e2\u961f|\u5c0f\u56e2\u961f|\u4e2d\u5c0f\u4f01\u4e1a/.test(text)) {
+    groups.push("small teams");
+  }
+  if (/\u521b\u59cb\u4eba/.test(text)) groups.push("founders");
+  if (/\u521b\u4f5c\u8005/.test(text)) groups.push("creators");
+  if (/\u8fd0\u8425|\u589e\u957f/.test(text)) groups.push("operators");
+
+  return joinEnglishList(groups) || "indie makers and small teams";
+}
+
+function englishPositioningFallback(
+  value: string | undefined,
+  audienceValue: string | undefined,
+) {
+  const text = sentencePart(value, "a focused product");
+  if (!hasCjkText(text)) return text;
+
+  const audience = englishAudienceFallback(audienceValue);
+  const noun = /agent|\u667a\u80fd\u4f53|\u4ee3\u7406/i.test(text)
+    ? "agent tool"
+    : /\u5de5\u5177/.test(text)
+      ? "tool"
+      : "product";
+  const article = /^[aeiou]/i.test(noun) ? "An" : "A";
+
+  if (/\u8425\u9500|\u63a8\u5e7f|\u83b7\u5ba2|\u589e\u957f/.test(text)) {
+    return `${article} ${noun} that helps ${audience} run marketing and promotion more easily`;
+  }
+  if (/\u5de5\u4f5c\u53f0|workspace/i.test(text)) {
+    return `An AI workspace for ${audience}`;
+  }
+  return `${article} practical ${noun} for ${audience}`;
+}
+
+function localizedProfileCopy(input: SocialProfileInput) {
+  if (input.outputLanguage !== "en") {
+    return {
+      positioning: input.positioning,
+      audience: input.audience,
+    };
+  }
+
+  return {
+    positioning: englishPositioningFallback(input.positioning, input.audience),
+    audience: englishAudienceFallback(input.audience),
+  };
+}
+
+function brandHashtag(input: SocialProfileInput) {
+  const compactName = input.name.replace(/[^\p{L}\p{N}]+/gu, "");
+  return `#${compactName || "ProfileKit"}`;
+}
+
+function zhInstagramValueLine(input: SocialProfileInput) {
+  const source = `${input.name} ${input.positioning} ${input.audience}`;
+  if (/营销|推广|增长|获客|GTM/i.test(source)) return "让增长工作更轻盈";
+  if (/画布|创作|设计|内容|自媒体/.test(source)) return "让创作更自由";
+  if (/AI|工作台|工具|Agent/i.test(source)) return "让工作流更清晰";
+  return "把想法变成可见成果";
+}
+
+function instagramBio(
+  input: SocialProfileInput,
+  language: SocialProfileOutputLanguage,
+  positioning: string,
+  audience: string,
+) {
+  const hashtag = brandHashtag(input);
+  const shortAudience = concisePart(
+    audience,
+    language === "zh" ? "同频用户" : "your people",
+    language,
+    34,
+  );
+
+  if (language === "zh") {
+    return `${zhInstagramValueLine(input)}\n给${shortAudience}的灵感与实战\n${hashtag}`;
+  }
+
+  if (language === "ja") {
+    return `${concisePart(positioning, "価値を届けるブランド", language, 34)}\n${shortAudience}のためのヒント\n${hashtag}`;
+  }
+
+  return `${concisePart(positioning, "A clearer way to work", language, 42)}\nIdeas for ${shortAudience}\n${hashtag}`;
+}
+
+function platformBio(platform: SocialProfilePlatform, input: SocialProfileInput) {
+  const language = input.outputLanguage;
+  const copy = localizedProfileCopy(input);
+  const audience = sentencePart(
+    copy.audience,
+    language === "zh" ? "目标用户" : language === "ja" ? "対象ユーザー" : "your audience",
+  );
+  const positioning = concisePart(
+    copy.positioning,
+    language === "zh" ? "一个聚焦的产品" : language === "ja" ? "集中したプロダクト" : "a focused product",
+    language,
+  );
+
+  if (String(platform) === "instagram") {
+    return instagramBio(input, language, positioning, audience);
+  }
+
+  if (language === "zh") {
+    switch (platform) {
+      case "bluesky":
+        return `${positioning}。面向${audience}分享产品进展、观察和实用链接。`;
+      case "threads":
+        return `${positioning}。给${audience}看的短观点、产品进展和交流回复。`;
+      case "linkedin":
+        return `${positioning}。服务${audience}。`;
+      case "linkedin-company":
+        return `${positioning}。分享产品更新、招聘信号和团队动态。`;
+      case "instagram":
+        return `${positioning}\n面向${audience}\n产品进展与实战灵感。`;
+      case "tiktok":
+        return `${positioning}。给${audience}看的快速演示。`;
+      case "youtube":
+        return `${positioning}。为${audience}提供产品演示和实战内容。`;
+      case "facebook":
+        return `${positioning}。分享更新、发布信息和实用笔记。`;
+      case "x":
+      default:
+        return `${positioning}。面向${audience}分享产品进展和实战笔记。`;
+    }
+  }
+
+  if (language === "ja") {
+    switch (platform) {
+      case "instagram":
+        return `${positioning}\n${audience}向け\n毎週プロダクトの学びを共有。`;
+      case "youtube":
+        return `${positioning}。${audience}向けのデモと実践的な動画。`;
+      case "linkedin-company":
+        return `${positioning}。プロダクト更新、採用、会社の動きを発信。`;
+      case "x":
+      default:
+        return `${positioning}。${audience}向けの進捗と実践メモ。`;
+    }
+  }
+
+  switch (platform) {
+    case "bluesky":
+      return `${positioning}. Open notes and useful links for ${audience}.`;
+    case "threads":
+      return `${positioning}. Short thoughts, launches, and replies for ${audience}.`;
+    case "linkedin":
+      return `${positioning}. Built for ${audience}.`;
+    case "linkedin-company":
+      return `${positioning}. Product updates, hiring signals, and company notes for ${audience}.`;
+    case "instagram":
+      return `${positioning}\nFor ${audience}\nNew ideas, shipped weekly.`;
+    case "tiktok":
+      return `${positioning}. Quick demos for ${audience}.`;
+    case "youtube":
+      return `${positioning}. Videos for ${audience} who want practical progress.`;
+    case "facebook":
+      return `${positioning}. Updates, launches, and practical notes for ${audience}.`;
+    case "x":
+    default:
+      return `${positioning}. Notes for ${audience}.`;
+  }
+}
+
+function headline(platform: SocialProfilePlatform, input: SocialProfileInput) {
+  const language = input.outputLanguage;
+  const copy = localizedProfileCopy(input);
+  if (platform === "linkedin") {
+    return language === "zh"
+      ? `${input.name} | ${concisePart(input.positioning, "账号定位", language, 90)}`
+      : language === "ja"
+        ? `${input.name} | ${concisePart(input.positioning, "プロフィール定位", language, 90)}`
+        : `${input.name} | ${concisePart(copy.positioning, "profile positioning", language, 90)}`;
+  }
+
+  if (platform === "linkedin-company") {
+    const positioning = concisePart(
+      copy.positioning,
+      language === "zh" ? "账号定位" : language === "ja" ? "プロフィール定位" : "profile positioning",
+      language,
+      90,
+    );
+    const audience = sentencePart(
+      copy.audience,
+      language === "zh" ? "目标受众" : language === "ja" ? "対象ユーザー" : "target audience",
+    );
+
+    if (language === "zh") return `${positioning}，服务${audience}`;
+    if (language === "ja") return `${positioning}。${audience}向け`;
+    return `${positioning} for ${audience}`;
+  }
+
+  return undefined;
+}
+
+function description(platform: SocialProfilePlatform, input: SocialProfileInput) {
+  const tone = toneWord(input);
+  const language = input.outputLanguage;
+  const copy = localizedProfileCopy(input);
+
+  if (platform === "youtube") {
+    if (language === "zh") {
+      return `${input.name} 分享面向${input.audience}的${tone}产品演示与营销工作流。`;
+    }
+    if (language === "ja") {
+      return `${input.name} は${input.audience}向けに${tone}なワークフローを共有します。`;
+    }
+    return `${input.name} shares ${tone} workflows for ${copy.audience}.`;
+  }
+
+  if (platform === "threads") {
+    if (language === "zh") {
+      return `${input.name} 面向${input.audience}发布简洁的${tone}产品更新。`;
+    }
+    if (language === "ja") {
+      return `${input.name} は${input.audience}向けに${tone}な短い更新を投稿します。`;
+    }
+    return `${input.name} posts concise ${tone} updates for ${copy.audience}.`;
+  }
+
+  return undefined;
+}
+
+function createProfile(
+  platform: SocialProfilePlatform,
+  input: SocialProfileInput,
+): SocialPlatformProfile {
+  const spec = SOCIAL_PROFILE_PLATFORM_SPECS[platform];
+  const handle = slugifyHandle(input.name);
+  const website = extractWebsite(input) ?? `${handle}.app`;
+  const username = `${spec.usernamePrefix}${handle}`;
+  const tone = toneWord(input);
+  const copy = localizedProfileCopy(input);
+  const personOrBrand =
+    input.mode === "personalCreator" ? "personal creator" : "product brand";
+  const colors = [...SOCIAL_PROFILE_DEFAULT_COLORS];
+
+  const profile: SocialPlatformProfile = {
+    platform,
+    displayName: input.name,
+    username,
+    bio: fitBio(platform, platformBio(platform, input), input.outputLanguage),
+    headline: headline(platform, input),
+    description: description(platform, input),
+    website,
+    avatar: {
+      kind: "placeholder",
+      source: "placeholder",
+      generationMode: "placeholder",
+      isPlaceholderOnly: true,
+      prompt: `Neutral monogram preview for ${input.name}; prefer uploaded ${personOrBrand === "product brand" ? "brand logo" : "founder photo"} before publishing.`,
+      width: spec.avatar.width,
+      height: spec.avatar.height,
+    },
+    banner: spec.supportsBanner
+      ? {
+          kind: "placeholder",
+          generationMode: "generate",
+          prompt: `${tone} ${platform} profile banner for ${input.name}: ${copy.positioning}`,
+          width: spec.banner?.width,
+          height: spec.banner?.height,
+          safeArea: spec.banner?.safeArea,
+          safeAreaBox: spec.banner?.safeAreaBox,
+        }
+      : { kind: "notApplicable" },
+    colors,
+  };
+
+  return profile;
+}
+
+function normalizeInput(input: SocialProfileInput): SocialProfileInput {
+  return socialProfileInputSchema.parse({
+    ...DEFAULT_INPUT,
+    ...input,
+    platforms:
+      input.platforms.length > 0 ? input.platforms : DEFAULT_INPUT.platforms,
+  });
+}
+
+export function createDefaultManualSocialProfileKit(
+  locale: AppLocale,
+): SocialProfileKitOutput {
+  const localizedDefaults =
+    locale === "zh" || locale === "zh-tw"
+      ? {
+          name: "NovaDesk",
+          positioning: "面向独立创始人的 AI 工作台",
+          audience: "创作者、独立开发者",
+          targetMarket: "china" as const,
+          outputLanguage: "zh" as const,
+        }
+      : {};
+
+  return createManualSocialProfileKit({
+    ...DEFAULT_INPUT,
+    ...localizedDefaults,
+  });
+}
+
+export function createManualSocialProfileKit(
+  rawInput: SocialProfileInput,
+): SocialProfileKitOutput {
+  const input = normalizeInput(rawInput);
+  const profiles = Object.fromEntries(
+    SOCIAL_PROFILE_PLATFORMS.map((platform) => [
+      platform,
+      createProfile(platform, input),
+    ]),
+  ) as SocialProfileKitOutput["profiles"];
+
+  return socialProfileKitOutputSchema.parse({
+    id: `manual-draft-${Date.now()}`,
+    generatedAt: new Date().toISOString(),
+    input,
+    profiles,
+  });
+}

package/src/lib/tools/social-profile-kit.package.ts

@@ -0,0 +1,220 @@
+import type {
+  SocialBannerAsset,
+  SocialImageAsset,
+  SocialPlatformProfile,
+  SocialProfileKitOutput,
+  SocialProfilePlatform,
+} from "./social-profile-kit.schema";
+import { imageDownloadUrl } from "./image-download";
+import { createZipBlob, type ZipFileInput } from "../zip";
+
+type PackageScope = {
+  platforms?: readonly SocialProfilePlatform[];
+};
+
+export function buildSocialProfileKitZip(
+  kit: SocialProfileKitOutput,
+  scope: PackageScope = {},
+): Promise<Blob> {
+  const platforms = scope.platforms?.length
+    ? [...scope.platforms]
+    : (Object.keys(kit.profiles) as SocialProfilePlatform[]);
+  const files: ZipFileInput[] = [];
+
+  return buildFiles().then((nextFiles) => createZipBlob(nextFiles));
+
+  async function buildFiles() {
+  for (const platform of platforms) {
+    const profile = kit.profiles[platform];
+    const avatarImage = await buildRasterAssetFile(
+      profile.avatar.src,
+      `${platform}-avatar-${profile.avatar.width}x${profile.avatar.height}.png`,
+      profile.avatar.width,
+      profile.avatar.height,
+      "contain",
+    );
+    files.push(
+      avatarImage ?? {
+        path: `${platform}-avatar-${profile.avatar.width}x${profile.avatar.height}.svg`,
+        data: buildAvatarSvg(profile, profile.avatar),
+      },
+    );
+
+    if (profile.banner && profile.banner.kind !== "notApplicable") {
+      const width = profile.banner.width ?? 1200;
+      const height = profile.banner.height ?? 400;
+      const bannerImage = await buildRasterAssetFile(
+        profile.banner.src,
+        `${platform}-background-${width}x${height}.png`,
+        width,
+        height,
+        "cover",
+      );
+      files.push(
+        bannerImage ?? {
+          path: `${platform}-background-${width}x${height}.svg`,
+          data: buildBannerSvg(profile, profile.banner, width, height),
+        },
+      );
+    }
+  }
+
+  return files;
+  }
+}
+
+export function buildSocialProfileKitZipName(
+  kit: SocialProfileKitOutput,
+  platform?: SocialProfilePlatform,
+) {
+  const base = slugFilePart(kit.input.name) || "social-profile-kit";
+  return platform ? `${base}-${platform}-profile-kit.zip` : `${base}-profile-kit.zip`;
+}
+
+function buildAvatarSvg(profile: SocialPlatformProfile, avatar: SocialImageAsset) {
+  const [ink, teal, coral] = profile.colors;
+  const initial = escapeSvg(profile.displayName.trim().charAt(0).toUpperCase() || "A");
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${avatar.width}" height="${avatar.height}" viewBox="0 0 ${avatar.width} ${avatar.height}">`,
+    `<rect width="100%" height="100%" fill="${ink}"/>`,
+    `<circle cx="${avatar.width * 0.5}" cy="${avatar.height * 0.5}" r="${Math.min(avatar.width, avatar.height) * 0.42}" fill="${teal}"/>`,
+    `<circle cx="${avatar.width * 0.62}" cy="${avatar.height * 0.38}" r="${Math.min(avatar.width, avatar.height) * 0.2}" fill="${coral}" opacity="0.75"/>`,
+    `<text x="50%" y="54%" text-anchor="middle" dominant-baseline="middle" font-family="Arial, sans-serif" font-size="${Math.min(avatar.width, avatar.height) * 0.34}" font-weight="700" fill="#ffffff">${initial}</text>`,
+    `<text x="50%" y="92%" text-anchor="middle" font-family="Arial, sans-serif" font-size="${Math.max(12, avatar.width * 0.035)}" fill="#ffffff" opacity="0.72">mock avatar placeholder</text>`,
+    "</svg>",
+  ].join("");
+}
+
+function buildBannerSvg(
+  profile: SocialPlatformProfile,
+  banner: SocialBannerAsset,
+  width: number,
+  height: number,
+) {
+  const [ink, teal, coral, gold] = profile.colors;
+  const safe = banner.safeAreaBox;
+  const titleSize = Math.max(28, Math.min(72, width * 0.05));
+  const bodySize = Math.max(16, Math.min(34, width * 0.022));
+  const safeRect = safe
+    ? `<rect x="${safe.x}" y="${safe.y}" width="${safe.width}" height="${safe.height}" fill="none" stroke="#ffffff" stroke-width="4" stroke-dasharray="14 10" opacity="0.65"/>`
+    : "";
+
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
+    `<rect width="100%" height="100%" fill="${ink}"/>`,
+    `<path d="M0 ${height * 0.75} C ${width * 0.2} ${height * 0.45}, ${width * 0.38} ${height * 0.95}, ${width * 0.58} ${height * 0.58} S ${width * 0.86} ${height * 0.2}, ${width} ${height * 0.18} L ${width} ${height} L 0 ${height} Z" fill="${teal}" opacity="0.9"/>`,
+    `<circle cx="${width * 0.78}" cy="${height * 0.34}" r="${Math.min(width, height) * 0.22}" fill="${coral}" opacity="0.82"/>`,
+    `<circle cx="${width * 0.9}" cy="${height * 0.58}" r="${Math.min(width, height) * 0.13}" fill="${gold}" opacity="0.85"/>`,
+    safeRect,
+    `<text x="${width * 0.08}" y="${height * 0.36}" font-family="Arial, sans-serif" font-size="${titleSize}" font-weight="700" fill="#ffffff">${escapeSvg(profile.displayName)}</text>`,
+    `<text x="${width * 0.08}" y="${height * 0.36 + titleSize * 0.8}" font-family="Arial, sans-serif" font-size="${bodySize}" fill="#ffffff" opacity="0.82">${escapeSvg(profile.username)}</text>`,
+    `<text x="${width * 0.08}" y="${height * 0.86}" font-family="Arial, sans-serif" font-size="${Math.max(13, bodySize * 0.72)}" fill="#ffffff" opacity="0.72">mock banner placeholder - ${escapeSvg(banner.generationMode ?? "generate")}</text>`,
+    "</svg>",
+  ].join("");
+}
+
+async function buildRasterAssetFile(
+  src: string | undefined,
+  path: string,
+  width: number,
+  height: number,
+  fit: "cover" | "contain",
+): Promise<ZipFileInput | null> {
+  if (!src) return null;
+
+  try {
+    const sourceBlob = await fetchImageBlob(src);
+    const image = await createImageBitmap(sourceBlob);
+    const cropped = await renderAssetPng(image, width, height, fit);
+    image.close();
+    return {
+      path,
+      data: new Uint8Array(await cropped.arrayBuffer()),
+    };
+  } catch {
+    return null;
+  }
+}
+
+async function fetchImageBlob(src: string) {
+  const url = src.startsWith("https:") ? imageDownloadUrl(src) : src;
+  const response = await fetch(url, { cache: "no-store" });
+  if (!response.ok) throw new Error(`Image fetch failed: ${response.status}`);
+  const blob = await response.blob();
+  if (!blob.type.startsWith("image/")) throw new Error("Invalid image content");
+  return blob;
+}
+
+function renderAssetPng(
+  image: ImageBitmap,
+  width: number,
+  height: number,
+  fit: "cover" | "contain",
+): Promise<Blob> {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Canvas unavailable");
+
+  if (fit === "contain") {
+    context.fillStyle = "#ffffff";
+    context.fillRect(0, 0, width, height);
+
+    const paddingX = width * 0.08;
+    const paddingY = height * 0.08;
+    const maxWidth = width - paddingX * 2;
+    const maxHeight = height - paddingY * 2;
+    const scale = Math.min(maxWidth / image.width, maxHeight / image.height);
+    const targetWidth = image.width * scale;
+    const targetHeight = image.height * scale;
+    const targetX = (width - targetWidth) / 2;
+    const targetY = (height - targetHeight) / 2;
+
+    context.drawImage(image, targetX, targetY, targetWidth, targetHeight);
+  } else {
+    const sourceRatio = image.width / image.height;
+    const targetRatio = width / height;
+    const sourceWidth =
+      sourceRatio > targetRatio ? image.height * targetRatio : image.width;
+    const sourceHeight =
+      sourceRatio > targetRatio ? image.height : image.width / targetRatio;
+    const sourceX = (image.width - sourceWidth) / 2;
+    const sourceY = (image.height - sourceHeight) / 2;
+
+    context.drawImage(
+      image,
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      0,
+      0,
+      width,
+      height,
+    );
+  }
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error("Canvas export failed"));
+    }, "image/png");
+  });
+}
+
+function escapeSvg(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function slugFilePart(value: string) {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 48);
+}