@tomako/tools-runtime 0.1.0

package/src/features/tools/social-profile-kit/social-profile-kit.container.tsx

@@ -0,0 +1,177 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+import Image from "next/image";
+
+import { SocialProfileKitGenerator } from "./widget";
+
+import {
+    ToolBoundarySection,
+    ToolFaqSection,
+    ToolPlainTextGrid,
+    ToolSection,
+    ToolTextRows,
+    ToolTripleComparisonSection,
+    type ToolFaqItem,
+    type ToolTripleComparisonItem,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import {
+    ToolGuideSection,
+    ToolWorkspaceSection,
+} from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+type ComparisonItem = {
+  label: string;
+  ordinary: string;
+  tomako: string;
+};
+
+function AssetVisual({
+  src,
+  alt,
+  priority = false,
+}: {
+  src: string;
+  alt: string;
+  priority?: boolean;
+}) {
+  return (
+    <figure className="relative aspect-[16/10] overflow-hidden rounded-[1.25rem] border border-[#D8D4CA]/70">
+      <Image
+        src={src}
+        alt={alt}
+        fill
+        priority={priority}
+        sizes="(min-width: 1024px) 560px, 100vw"
+        className="object-contain"
+      />
+    </figure>
+  );
+}
+
+function WorkspaceVisualIntro({
+  heading,
+  body,
+  alt,
+}: {
+  heading: string;
+  body: string;
+  alt: string;
+}) {
+  return (
+    <div className="mb-8 grid gap-6 rounded-[1.25rem] border border-[#D8D4CA] bg-white/70 p-5 md:grid-cols-[0.8fr_1.2fr] md:items-center md:p-6">
+      <div>
+        <h3 className="text-xl font-semibold leading-tight text-[#111111]">
+          {heading}
+        </h3>
+        <p className="mt-3 text-sm leading-6 text-[#4A4A4A]">{body}</p>
+      </div>
+      <AssetVisual
+        src="/tools/social-media-profile-generator-workspace-clean.webp"
+        alt={alt}
+        priority
+      />
+    </div>
+  );
+}
+
+function mapComparisonItems(items: readonly ComparisonItem[]): ToolTripleComparisonItem[] {
+  return items.map((item) => ({
+    standard: item.label,
+    manual: item.ordinary,
+    tomako: item.tomako,
+  }));
+}
+
+export async function SocialProfileKitContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(
+    locale,
+   "toolsPages.socialProfileKit.guide",
+  );
+  const sharedT = await createToolGuideTranslator( 
+    locale, 
+    "toolsPages.shared" 
+  );
+  const guidanceGroups = (
+    t.raw("guidanceBlocks") as readonly { heading: string; items: readonly string[] }[]
+  ).map((block) => ({ title: block.heading, items: block.items }));
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage="/tools/social-media-profile-generator-hero-clean.webp"
+      heroBackgroundAlt={t("heroImageAlt")}
+    >
+      <ToolWorkspaceSection
+        heading={sharedT("toolWorkspace")}
+        hint={sharedT("toolWorkspaceHint")}
+        badge={sharedT("keywords")}
+      >
+        <WorkspaceVisualIntro
+          heading={t("workspaceVisualHeading")}
+          body={t("workspaceVisualBody")}
+          alt={t("workspaceImageAlt")}
+        />
+        <SocialProfileKitGenerator />
+      </ToolWorkspaceSection>
+
+      <ToolGuideSection
+        heading={t("whatYouGet")}
+        visual={
+          <AssetVisual
+            src="/tools/social-media-profile-generator-value-clean.webp"
+            alt={t("valueImageAlt")}
+          />
+        }
+      >
+        <ToolTextRows items={t.raw("whatYouGetBody") as readonly string[]} />
+        <ToolPlainTextGrid items={t.raw("whatYouGetItems") as readonly string[]} columns="two" />
+      </ToolGuideSection>
+
+      <ToolGuideSection
+        heading={t("sizes")}
+        reverse
+        visual={
+          <AssetVisual
+            src="/tools/social-media-profile-generator-support-clean.webp"
+            alt={t("supportImageAlt")}
+          />
+        }
+      >
+        <ToolTextRows items={t.raw("sizesBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolTripleComparisonSection
+        heading={t("whyChoose")}
+        intro={t("whyChooseIntro")}
+        items={mapComparisonItems(t.raw("whyChooseItems") as readonly ComparisonItem[])}
+      />
+
+      <ToolBoundarySection
+        heading={t("guidance")}
+        intro={t("guidanceIntro")}
+        groups={guidanceGroups}
+        visual={
+          <AssetVisual
+            src="/tools/social-media-profile-generator-handoff-clean.webp"
+            alt={t("handoffImageAlt")}
+          />
+        }
+      />
+
+      <ToolSection heading={t("howItWorks")}>
+        <ToolPlainTextGrid items={t.raw("howItWorksItems") as readonly string[]} columns="three" />
+      </ToolSection>
+
+      <ToolFaqSection heading={t("faq")} items={t.raw("faqItems") as readonly ToolFaqItem[]} />
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/social-profile-kit/social-profile-kit.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const socialProfileKitSpec: ToolSpec = {
+  slug: "social-media-profile-generator",
+  toolType: "generator",
+  riskLevel: "low",
+  seo: {
+    "publishedAt": "2026-06-27",
+    "updatedAt": "2026-07-01",
+    "readingTime": "5 min",
+    "featured": false,
+    "ogImage": "/tools/social-media-profile-generator-hero-clean.webp"
+  },
+  widget: {"id":"social-profile-kit-generator","mode":"custom"},
+};

package/src/features/tools/social-profile-kit/widget/context-editor.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { Download, Paintbrush, Upload } from "lucide-react";
+import { useEffect, useRef, useState, type RefObject } from "react";
+
+import { Button } from "@tomako/ui/button";
+import type { SocialPlatformProfile } from "../../../../lib/tools/social-profile-kit.schema";
+
+import type {
+    SelectedProfileElement,
+    SocialProfileKitCopy,
+} from "./types";
+
+export function ContextEditor({
+  copy,
+  selected,
+  profile,
+  containerRef,
+  zoom,
+  onUpload,
+  onDownload,
+  onReplaceColor,
+}: {
+  copy: SocialProfileKitCopy;
+  selected: SelectedProfileElement | null;
+  profile: SocialPlatformProfile;
+  containerRef: RefObject<HTMLDivElement | null>;
+  zoom: number;
+  onUpload: (file: File) => void;
+  onDownload: () => void;
+  onReplaceColor: () => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ left: 16, top: 16 });
+
+  useEffect(() => {
+    if (!selected || selected.kind === "text") return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const device = selected.device ?? "desktop";
+    const selector = `[data-profile-element="${selected.kind}"][data-profile-device="${device}"]`;
+    let frame = 0;
+
+    const clamp = (value: number, min: number, max: number) =>
+      Math.max(min, Math.min(value, max));
+
+    const updatePosition = () => {
+      const target = container.querySelector<HTMLElement>(selector);
+      if (!target) return;
+
+      const targetRect = target.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const panelRect = panelRef.current?.getBoundingClientRect();
+      const panelWidth = panelRect?.width ?? 220;
+      const panelHeight = panelRect?.height ?? 240;
+      const gap = 12;
+      const visibleLeft = container.scrollLeft + 8;
+      const visibleTop = container.scrollTop + 8;
+      const visibleRight = container.scrollLeft + container.clientWidth - panelWidth - 8;
+      const visibleBottom =
+        container.scrollTop + container.clientHeight - panelHeight - 8;
+
+      const targetLeft =
+        targetRect.left - containerRect.left + container.scrollLeft;
+      const targetRight =
+        targetRect.right - containerRect.left + container.scrollLeft;
+      const targetTop = targetRect.top - containerRect.top + container.scrollTop;
+      const targetBottom =
+        targetRect.bottom - containerRect.top + container.scrollTop;
+      const targetCenterY = targetTop + targetRect.height / 2;
+
+      const hasRoomRight = targetRect.right + gap + panelWidth < containerRect.right;
+      const hasRoomLeft = targetRect.left - gap - panelWidth > containerRect.left;
+
+      let nextLeft = targetRight + gap;
+      let nextTop =
+        selected.kind === "avatar" ? targetCenterY - panelHeight / 2 : targetTop;
+
+      if (!hasRoomRight && hasRoomLeft) {
+        nextLeft = targetLeft - panelWidth - gap;
+      } else if (!hasRoomRight) {
+        nextLeft = targetLeft;
+        nextTop = targetBottom + gap;
+      }
+
+      setPosition({
+        left: clamp(nextLeft, visibleLeft, Math.max(visibleLeft, visibleRight)),
+        top: clamp(nextTop, visibleTop, Math.max(visibleTop, visibleBottom)),
+      });
+    };
+
+    const scheduleUpdate = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(updatePosition);
+    };
+
+    scheduleUpdate();
+    container.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      container.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+    };
+  }, [containerRef, profile, selected, zoom]);
+
+  if (!selected) return null;
+
+  if (selected.kind === "text") {
+    return null;
+  }
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute z-20 flex max-w-[220px] flex-col gap-2 rounded-xl border bg-card p-3 shadow-lg"
+      style={{ left: position.left, top: position.top }}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <div className="text-xs font-semibold text-foreground">
+        {selected.kind === "avatar" ? copy.elements.avatar : copy.elements.banner}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) onUpload(file);
+          event.target.value = "";
+        }}
+      />
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => inputRef.current?.click()}
+      >
+        <Upload className="size-3" />
+        {copy.actions.upload}
+      </Button>
+      <Button type="button" size="sm" variant="outline" onClick={onDownload}>
+        <Download className="size-3" />
+        {copy.actions.download}
+      </Button>
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={onReplaceColor}
+      >
+        <Paintbrush className="size-3" />
+        {copy.actions.replaceColor}
+      </Button>
+      <div className="flex gap-1 pt-1">
+        {profile.colors.map((color) => (
+          <span
+            key={color}
+            className="size-4 rounded-full border"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/features/tools/social-profile-kit/widget/generation-runtime.ts

@@ -0,0 +1,281 @@
+import { imageDownloadUrl } from "../../../../lib/tools/image-download";
+import {
+    type PlatformGenerationState,
+    type PlatformGenerationStatus
+} from "../../../../lib/tools/social-profile-kit.generation";
+import { extractSocialProfileWebsite } from "../../../../lib/tools/social-profile-kit.input";
+import type {
+    SocialProfileInput,
+    SocialProfileKitOutput,
+    SocialProfilePlatform,
+} from "../../../../lib/tools/social-profile-kit.schema";
+import { fakeDelay as sleep } from "../../../../lib/fake-delay";
+import {
+    fetchSocialProfileKitTask,
+} from "../../../../host/client";
+import {
+    SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS,
+} from "../../../../host/client";
+
+export type CanvasZoomMode = "auto" | "manual";
+export type KitGenerationStatus = "agent" | "pending" | "failed";
+export const BANNER_IMAGE_MAX_ATTEMPTS = 2;
+
+export type KitGenerationResult = {
+  kit?: SocialProfileKitOutput;
+  status: KitGenerationStatus;
+  agentError?: string;
+};
+
+export type BrandAssetState = {
+  kind: "logo" | "avatar";
+  name: string;
+  dataUrl: string;
+  previewSrc: string;
+  referenceImageUrl?: string;
+};
+
+export class SocialProfileKitTaskError extends Error {
+  code: string;
+
+  constructor(code: string, message: string) {
+    super(message);
+    this.name = "SocialProfileKitTaskError";
+    this.code = code;
+  }
+}
+
+export async function waitForAgentKit(
+  taskId: string,
+  isCurrentRun: () => boolean,
+  attempts = 7,
+): Promise<SocialProfileKitOutput | null> {
+  for (let attempt = 0; attempt < attempts; attempt += 1) {
+    if (!isCurrentRun()) return null;
+
+    const task = await fetchSocialProfileKitTask(taskId);
+    if (task.data) return task.data.kit;
+    if (task.errorCode || task.status === "FAILED") {
+      const code = task.errorCode ?? "task_failed";
+      throw new SocialProfileKitTaskError(
+        code,
+        task.error || code || "social_profile_kit failed",
+      );
+    }
+
+    await sleep(attempt < 2 ? 800 : 1400);
+  }
+
+  return null;
+}
+
+export function sameToken(left: string | undefined, right: string | undefined) {
+  return String(left ?? "").trim().toLowerCase() === String(right ?? "").trim().toLowerCase();
+}
+
+export function isAgentKitUsable(
+  input: SocialProfileInput,
+  agentKit: SocialProfileKitOutput,
+) {
+  if (!sameToken(agentKit.input.name, input.name)) return false;
+
+  const expectedWebsite = extractSocialProfileWebsite(input.prompt);
+  if (!expectedWebsite) return true;
+
+  return Object.values(agentKit.profiles).some((profile) =>
+    sameToken(profile.website, expectedWebsite),
+  );
+}
+
+export function isGeneratedBannerPlatform(platform: SocialProfilePlatform) {
+  return SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS.includes(
+    platform as (typeof SOCIAL_PROFILE_GENERATED_BANNER_PLATFORMS)[number],
+  );
+}
+
+export function nextPlatformGenerationStatus(
+  current: PlatformGenerationState,
+  platform: SocialProfilePlatform,
+  status: PlatformGenerationStatus,
+) {
+  return {
+    ...current,
+    [platform]: status,
+  };
+}
+
+export function isRetriableBannerImageError(error: unknown) {
+  const message = error instanceof Error ? error.message : String(error ?? "");
+  return /timeout|timed out|fetch failed|network|ECONNRESET|UND_ERR|socket|connect/i.test(
+    message,
+  );
+}
+
+export function readImageAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      resolve(typeof reader.result === "string" ? reader.result : "");
+    });
+    reader.addEventListener("error", () => {
+      reject(reader.error ?? new Error("Failed to read image file."));
+    });
+    reader.readAsDataURL(file);
+  });
+}
+
+export async function fetchImageBitmap(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 createImageBitmap(blob);
+}
+
+export function canvasToPngBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error("Canvas export failed"));
+    }, "image/png");
+  });
+}
+
+export function drawCoverImage(
+  context: CanvasRenderingContext2D,
+  image: ImageBitmap,
+  width: number,
+  height: number,
+) {
+  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,
+  );
+}
+
+export function drawContainImage(
+  context: CanvasRenderingContext2D,
+  image: ImageBitmap,
+  width: number,
+  height: number,
+  paddingRatio = 0.08,
+) {
+  const paddingX = width * paddingRatio;
+  const paddingY = height * paddingRatio;
+  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);
+}
+
+export function drawFallbackAvatar(
+  context: CanvasRenderingContext2D,
+  profile: SocialProfileKitOutput["profiles"][SocialProfilePlatform],
+  width: number,
+  height: number,
+) {
+  const gradient = context.createLinearGradient(0, 0, width, height);
+  gradient.addColorStop(0, profile.colors[1] ?? "#5ba8a0");
+  gradient.addColorStop(1, profile.colors[2] ?? "#f59e6b");
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, width, height);
+  context.fillStyle = "#ffffff";
+  context.font = `700 ${Math.round(Math.min(width, height) * 0.42)}px Arial, sans-serif`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillText(profile.displayName.trim().charAt(0).toUpperCase() || "A", width / 2, height / 2);
+}
+
+export function drawFallbackBanner(
+  context: CanvasRenderingContext2D,
+  profile: SocialProfileKitOutput["profiles"][SocialProfilePlatform],
+  width: number,
+  height: number,
+) {
+  const [ink, teal, coral, gold] = profile.colors;
+  context.fillStyle = ink ?? "#1f2937";
+  context.fillRect(0, 0, width, height);
+  context.fillStyle = teal ?? "#5ba8a0";
+  context.beginPath();
+  context.moveTo(0, height * 0.72);
+  context.bezierCurveTo(width * 0.24, height * 0.38, width * 0.42, height, width * 0.64, height * 0.58);
+  context.bezierCurveTo(width * 0.8, height * 0.3, width * 0.9, height * 0.2, width, height * 0.18);
+  context.lineTo(width, height);
+  context.lineTo(0, height);
+  context.closePath();
+  context.fill();
+  context.fillStyle = coral ?? "#f59e6b";
+  context.globalAlpha = 0.82;
+  context.beginPath();
+  context.arc(width * 0.78, height * 0.34, Math.min(width, height) * 0.2, 0, Math.PI * 2);
+  context.fill();
+  context.fillStyle = gold ?? "#f7d38b";
+  context.globalAlpha = 0.85;
+  context.beginPath();
+  context.arc(width * 0.9, height * 0.58, Math.min(width, height) * 0.12, 0, Math.PI * 2);
+  context.fill();
+  context.globalAlpha = 1;
+}
+
+export async function renderSelectedAssetPng({
+  profile,
+  src,
+  width,
+  height,
+  fit,
+}: {
+  profile: SocialProfileKitOutput["profiles"][SocialProfilePlatform];
+  src?: string;
+  width: number;
+  height: number;
+  fit: "cover" | "contain";
+}) {
+  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);
+  }
+
+  if (src) {
+    const image = await fetchImageBitmap(src);
+    try {
+      if (fit === "contain") drawContainImage(context, image, width, height);
+      else drawCoverImage(context, image, width, height);
+    } finally {
+      image.close();
+    }
+  } else if (fit === "contain") {
+    drawFallbackAvatar(context, profile, width, height);
+  } else {
+    drawFallbackBanner(context, profile, width, height);
+  }
+
+  return canvasToPngBlob(canvas);
+}

package/src/features/tools/social-profile-kit/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const SocialProfileKitGenerator = dynamic(() =>
+  import("./social-profile-kit-generator").then((module) => module.SocialProfileKitGenerator),
+);