@tomako/tools-runtime 0.1.0

package/src/features/tools/social-platform-asset-adapter/widget/helpers.ts

@@ -0,0 +1,249 @@
+import type {
+    SocialAssetPlatform,
+    SocialPlatformAssetAdapterInput,
+    SocialPlatformAssetAdapterResult,
+} from "../../../../lib/tools/social-platform-asset-adapter-schema";
+
+import {
+    designAssetTypes,
+    maxDesignAssetDataUrlLength,
+    maxDesignAssetEdge,
+    maxOriginalDesignAssetBytes,
+    platformImageSpecs,
+} from "./constants";
+import type { DesignAsset, ImageUploadErrorCode, MediaExport } from "./types";
+
+export function defaultInput(
+  language: SocialPlatformAssetAdapterInput["language"],
+): SocialPlatformAssetAdapterInput {
+  return {
+    sourceTitle: "",
+    sourceCopy: "",
+    designAssets: [],
+    tags: "",
+    platforms: ["x", "linkedin", "instagram"],
+    campaignGoal: "launch",
+    tone: "clear",
+    audience: "",
+    constraints: "",
+    language,
+  };
+}
+
+export function delay(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+export function estimateDataUrlBytes(dataUrl: string) {
+  const base64 = dataUrl.split(",")[1] ?? "";
+  return Math.ceil((base64.length * 3) / 4);
+}
+
+export function fileToDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") resolve(reader.result);
+      else reject(new Error("cannotRead"));
+    };
+    reader.onerror = () => reject(new Error("cannotRead"));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function dataUrlToImage(dataUrl: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("cannotRead"));
+    image.src = dataUrl;
+  });
+}
+
+export async function prepareDesignAsset(file: File): Promise<DesignAsset> {
+  if (!designAssetTypes.includes(file.type as (typeof designAssetTypes)[number])) {
+    throw new Error("unsupported" satisfies ImageUploadErrorCode);
+  }
+
+  if (file.size > maxOriginalDesignAssetBytes) {
+    throw new Error("tooLarge" satisfies ImageUploadErrorCode);
+  }
+
+  const rawDataUrl = await fileToDataUrl(file);
+  const image = await dataUrlToImage(rawDataUrl);
+  const scale = Math.min(1, maxDesignAssetEdge / Math.max(image.width, image.height));
+  const width = Math.max(1, Math.round(image.width * scale));
+  const height = Math.max(1, Math.round(image.height * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("cannotRead" satisfies ImageUploadErrorCode);
+
+  context.fillStyle = "#ffffff";
+  context.fillRect(0, 0, width, height);
+  context.drawImage(image, 0, 0, width, height);
+
+  const dataUrl = canvas.toDataURL("image/jpeg", 0.72);
+  if (dataUrl.length > maxDesignAssetDataUrlLength) {
+    throw new Error("compressedTooLarge" satisfies ImageUploadErrorCode);
+  }
+
+  return {
+    id:
+      globalThis.crypto?.randomUUID?.() ??
+      `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+    name: file.name,
+    type: "image/jpeg",
+    size: estimateDataUrlBytes(dataUrl),
+    width,
+    height,
+    dataUrl,
+  };
+}
+
+function drawCover(
+  context: CanvasRenderingContext2D,
+  image: HTMLImageElement,
+  width: number,
+  height: number,
+) {
+  const scale = Math.max(width / image.width, height / image.height);
+  const drawWidth = image.width * scale;
+  const drawHeight = image.height * scale;
+  context.drawImage(
+    image,
+    (width - drawWidth) / 2,
+    (height - drawHeight) / 2,
+    drawWidth,
+    drawHeight,
+  );
+}
+
+function drawContained(
+  context: CanvasRenderingContext2D,
+  image: HTMLImageElement,
+  width: number,
+  height: number,
+) {
+  const safeInset = Math.round(Math.min(width, height) * 0.07);
+  const availableWidth = width - safeInset * 2;
+  const availableHeight = height - safeInset * 2;
+  const scale = Math.min(availableWidth / image.width, availableHeight / image.height);
+  const drawWidth = Math.round(image.width * scale);
+  const drawHeight = Math.round(image.height * scale);
+  const x = Math.round((width - drawWidth) / 2);
+  const y = Math.round((height - drawHeight) / 2);
+
+  context.save();
+  context.shadowColor = "rgba(17, 17, 17, 0.18)";
+  context.shadowBlur = Math.round(Math.min(width, height) * 0.025);
+  context.shadowOffsetY = Math.round(Math.min(width, height) * 0.015);
+  context.drawImage(image, x, y, drawWidth, drawHeight);
+  context.restore();
+}
+
+export async function createMediaExport(
+  asset: DesignAsset,
+  platform: SocialAssetPlatform,
+): Promise<MediaExport> {
+  const spec = platformImageSpecs[platform];
+  const image = await dataUrlToImage(asset.dataUrl);
+  const canvas = document.createElement("canvas");
+  canvas.width = spec.width;
+  canvas.height = spec.height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("cannotRead" satisfies ImageUploadErrorCode);
+
+  context.fillStyle = "#F7F6F2";
+  context.fillRect(0, 0, spec.width, spec.height);
+
+  context.save();
+  context.filter = "blur(28px) saturate(0.9)";
+  context.globalAlpha = 0.62;
+  drawCover(context, image, spec.width, spec.height);
+  context.restore();
+
+  context.fillStyle = "rgba(247, 246, 242, 0.44)";
+  context.fillRect(0, 0, spec.width, spec.height);
+  drawContained(context, image, spec.width, spec.height);
+
+  const dataUrl = canvas.toDataURL("image/jpeg", 0.88);
+  return {
+    id: `${asset.id}-${platform}`,
+    assetName: asset.name,
+    platform,
+    width: spec.width,
+    height: spec.height,
+    ratio: spec.ratio,
+    dataUrl,
+    size: estimateDataUrlBytes(dataUrl),
+  };
+}
+
+export async function createMediaExports(
+  asset: DesignAsset,
+  selectedPlatforms: readonly SocialAssetPlatform[],
+) {
+  return Promise.all(
+    selectedPlatforms.map((platform) => createMediaExport(asset, platform)),
+  );
+}
+
+export function platformTone(platform: SocialAssetPlatform) {
+  return {
+    x: "border-[#D8D4CA] bg-white",
+    linkedin: "border-[#BCD6F2] bg-[#F3F8FF]",
+    instagram: "border-[#E9C7D7] bg-[#FFF4F8]",
+    tiktok: "border-[#D6D2D2] bg-[#F8F7F2]",
+    youtubeShorts: "border-[#F1C2B8] bg-[#FFF1EC]",
+    facebook: "border-[#BFD5F5] bg-[#F2F7FF]",
+  }[platform];
+}
+
+export function stringifyAdapterResult(result: SocialPlatformAssetAdapterResult) {
+  const sections = result.platformAssets.map((asset) =>
+    [
+      `## ${asset.platform}`,
+      `Title: ${asset.title}`,
+      "",
+      asset.caption,
+      "",
+      `Design brief: ${asset.designBrief}`,
+      "",
+      `Hashtags: ${asset.hashtags.join(" ")}`,
+      "",
+      `Source basis: title=${asset.sourceBasis.title}, copy=${asset.sourceBasis.copy}, design=${asset.sourceBasis.designMaterials}, tags=${asset.sourceBasis.tags}`,
+      asset.formatNotes.length
+        ? `Format notes:\n${asset.formatNotes.map((item) => `- ${item}`).join("\n")}`
+        : "",
+      asset.riskNotes.length
+        ? `Risk notes:\n${asset.riskNotes.map((item) => `- ${item}`).join("\n")}`
+        : "",
+    ]
+      .filter(Boolean)
+      .join("\n"),
+  );
+
+  return [
+    "# Social platform asset adapter",
+    "",
+    result.currentRead.sourceSummary,
+    "",
+    "## Content angles",
+    result.contentAngles.map((item) => `- ${item}`).join("\n"),
+    "",
+    ...sections,
+    "",
+    "## Missing information",
+    result.missingInfo.map((item) => `- ${item}`).join("\n"),
+    "",
+    "## Review checklist",
+    result.reviewChecklist.map((item) => `- ${item}`).join("\n"),
+  ].join("\n");
+}

package/src/features/tools/social-platform-asset-adapter/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const SocialPlatformAssetAdapter = dynamic(() =>
+  import("./social-platform-asset-adapter").then((module) => module.SocialPlatformAssetAdapter),
+);

package/src/features/tools/social-platform-asset-adapter/widget/result-shell.tsx

@@ -0,0 +1,350 @@
+import {
+    AlertTriangle,
+    ClipboardList,
+    Copy,
+    Crop,
+    Download,
+    FileText,
+    Hash,
+    Layers3,
+    RotateCcw,
+} from "lucide-react";
+import NextImage from "next/image";
+
+import { Button } from "@tomako/ui/button";
+import { useTranslations } from "../../../../i18n/client";
+import type {
+    SocialAssetPlatform,
+    SocialPlatformAssetAdapterResult,
+} from "../../../../lib/tools/social-platform-asset-adapter-schema";
+import { cn } from "@tomako/ui/cn";
+
+import { formatBytes, platformTone } from "./helpers";
+import { SectionHeading } from "./section-heading";
+import type { MediaExport } from "./types";
+
+type T = ReturnType<typeof useTranslations>;
+
+export function MediaExportPanel({
+  isBusy,
+  items,
+  onDownload,
+  platformLabels,
+  t,
+}: {
+  isBusy: boolean;
+  items: readonly MediaExport[];
+  onDownload: (item: MediaExport) => void;
+  platformLabels: Record<SocialAssetPlatform, string>;
+  t: T;
+}) {
+  if (items.length === 0 && !isBusy) return null;
+
+  return (
+    <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_18px_60px_rgba(17,17,17,0.08)] md:p-7">
+      <div className="flex flex-col justify-between gap-3 md:flex-row md:items-start">
+        <div>
+          <SectionHeading icon={Crop} title={t("mediaExportsTitle")} />
+          <p className="max-w-2xl text-sm leading-6 text-[#555555]">
+            {isBusy
+              ? t("mediaExportsPreparing")
+              : t("mediaExportsReady", { count: items.length })}
+          </p>
+        </div>
+      </div>
+
+      {items.length > 0 ? (
+        <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {items.map((item) => (
+            <article
+              className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-3"
+              data-testid="media-export-card"
+              key={item.id}
+            >
+              <div
+                className="relative overflow-hidden rounded-2xl border border-[#D8D4CA] bg-white"
+                style={{ aspectRatio: `${item.width} / ${item.height}` }}
+              >
+                <NextImage
+                  alt={t("mediaExportPreviewAlt", {
+                    file: item.assetName,
+                    platform: platformLabels[item.platform],
+                  })}
+                  className="object-contain"
+                  data-testid="adapted-media-preview"
+                  fill
+                  sizes="(min-width: 1280px) 30vw, (min-width: 768px) 45vw, 90vw"
+                  src={item.dataUrl}
+                  unoptimized
+                />
+              </div>
+              <div className="mt-3 flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <h3 className="truncate text-base font-semibold text-[#111111]">
+                    {platformLabels[item.platform]}
+                  </h3>
+                  <p className="mt-1 text-xs leading-5 text-[#555555]">
+                    {t("mediaExportMeta", {
+                      height: item.height,
+                      ratio: item.ratio,
+                      size: formatBytes(item.size),
+                      width: item.width,
+                    })}
+                  </p>
+                  <p className="mt-1 truncate text-xs text-[#777777]">
+                    {t("mediaExportSource", { file: item.assetName })}
+                  </p>
+                </div>
+                <Button
+                  aria-label={t("downloadImageAria", {
+                    platform: platformLabels[item.platform],
+                  })}
+                  className="size-10 shrink-0 rounded-xl border-[#CFC9BC] p-0"
+                  onClick={() => onDownload(item)}
+                  type="button"
+                  variant="outline"
+                >
+                  <Download aria-hidden className="size-4" />
+                </Button>
+              </div>
+            </article>
+          ))}
+        </div>
+      ) : (
+        <div className="mt-5 rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] p-5 text-sm leading-6 text-[#555555]">
+          {t("mediaExportsEmpty")}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function AdapterResult({
+  copied,
+  onCopy,
+  onDownload,
+  onReset,
+  platformLabels,
+  result,
+  t,
+  taskId,
+}: {
+  copied: boolean;
+  onCopy: () => void;
+  onDownload: () => void;
+  onReset: () => void;
+  platformLabels: Record<SocialAssetPlatform, string>;
+  result: SocialPlatformAssetAdapterResult;
+  t: T;
+  taskId: string;
+}) {
+  return (
+    <div className="grid gap-5">
+      <div className="flex flex-col justify-between gap-4 rounded-[1.35rem] border border-[#E1DDD3] bg-[#F8F7F2] p-5 md:flex-row md:items-start">
+        <div>
+          <p className="text-xs font-semibold uppercase text-[#777777]">
+            {t("resultReady")}
+          </p>
+          <h3 className="mt-3 text-3xl font-semibold leading-tight text-[#111111]">
+            {t("resultTitle", { count: result.platformAssets.length })}
+          </h3>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-[#555555]">
+            {result.currentRead.sourceSummary}
+          </p>
+          <p className="mt-2 text-xs font-semibold text-[#777777]">
+            {t("taskId", { taskId })}
+          </p>
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Button
+            className="h-10 rounded-xl border-[#CFC9BC]"
+            onClick={onCopy}
+            type="button"
+            variant="outline"
+          >
+            <Copy aria-hidden className="size-4" />
+            {copied ? t("copied") : t("copy")}
+          </Button>
+          <Button
+            className="h-10 rounded-xl border-[#CFC9BC]"
+            onClick={onDownload}
+            type="button"
+            variant="outline"
+          >
+            <Download aria-hidden className="size-4" />
+            {t("download")}
+          </Button>
+          <Button
+            className="h-10 rounded-xl border-[#CFC9BC]"
+            onClick={onReset}
+            type="button"
+            variant="outline"
+          >
+            <RotateCcw aria-hidden className="size-4" />
+            {t("reset")}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-3">
+        <ResultPanel icon={FileText} title={t("contentAngles")}>
+          <PillList items={result.contentAngles} />
+        </ResultPanel>
+        <ResultPanel icon={AlertTriangle} title={t("missingInfo")}>
+          <PillList items={result.missingInfo} />
+        </ResultPanel>
+        <ResultPanel icon={ClipboardList} title={t("reviewChecklist")}>
+          <PillList items={result.reviewChecklist} />
+        </ResultPanel>
+      </div>
+
+      <ResultPanel icon={Layers3} title={t("materialCoverage")}>
+        <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+          {(["title", "copy", "designMaterials", "tags"] as const).map((key) => (
+            <div
+              className="rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] px-3 py-2 text-sm leading-6 text-[#3D3D3D]"
+              key={key}
+            >
+              <span className="font-semibold text-[#111111]">
+                {t(`materialFields.${key}`)}
+              </span>
+              <span className="block text-[#555555]">
+                {t(`coverage.${result.currentRead.materialCoverage[key]}`)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </ResultPanel>
+
+      <div className="grid gap-4">
+        {result.platformAssets.map((asset) => (
+          <article
+            className={cn(
+              "rounded-[1.35rem] border p-5",
+              platformTone(asset.platform),
+            )}
+            key={asset.platform}
+          >
+            <div className="flex flex-col justify-between gap-3 md:flex-row md:items-start">
+              <div>
+                <p className="text-xs font-semibold uppercase text-[#777777]">
+                  {platformLabels[asset.platform]}
+                </p>
+                <h3 className="mt-2 text-2xl font-semibold leading-tight text-[#111111]">
+                  {asset.title}
+                </h3>
+              </div>
+              <div className="flex max-w-lg flex-wrap gap-2">
+                {asset.hashtags.map((tag) => (
+                  <span
+                    className="rounded-full border border-[#D8D4CA] bg-white px-3 py-1 text-xs font-semibold text-[#555555]"
+                    key={tag}
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div className="mt-5 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]">
+              <div className="rounded-[1.15rem] border border-[#D8D4CA] bg-white p-4">
+                <SectionHeading icon={FileText} title={t("caption")} />
+                <p className="whitespace-pre-line text-sm leading-6 text-[#3D3D3D]">
+                  {asset.caption}
+                </p>
+              </div>
+              <div className="rounded-[1.15rem] border border-[#D8D4CA] bg-white p-4">
+                <SectionHeading icon={Layers3} title={t("designBrief")} />
+                <p className="text-sm leading-6 text-[#3D3D3D]">
+                  {asset.designBrief}
+                </p>
+              </div>
+            </div>
+            <div className="mt-4 grid gap-4 xl:grid-cols-2">
+              <ResultBlock title={t("formatNotes")}>
+                <PillList items={asset.formatNotes} />
+              </ResultBlock>
+              <ResultBlock title={t("riskNotes")}>
+                <PillList items={asset.riskNotes} />
+              </ResultBlock>
+            </div>
+            <div className="mt-4 rounded-[1.15rem] border border-[#D8D4CA] bg-white p-4">
+              <h4 className="mb-3 text-base font-semibold text-[#111111]">
+                {t("sourceBasis")}
+              </h4>
+              <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+                {(["title", "copy", "designMaterials", "tags"] as const).map(
+                  (key) => (
+                    <div
+                      className="rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] px-3 py-2 text-sm leading-6 text-[#3D3D3D]"
+                      key={key}
+                    >
+                      <span className="font-semibold text-[#111111]">
+                        {t(`materialFields.${key}`)}
+                      </span>
+                      <span className="block text-[#555555]">
+                        {t(`coverage.${asset.sourceBasis[key]}`)}
+                      </span>
+                    </div>
+                  ),
+                )}
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+
+      <ResultPanel icon={Hash} title={t("exportNotes")}>
+        <PillList items={result.exportNotes} />
+      </ResultPanel>
+    </div>
+  );
+}
+
+function ResultPanel({
+  children,
+  icon,
+  title,
+}: {
+  children: React.ReactNode;
+  icon: typeof ClipboardList;
+  title: string;
+}) {
+  return (
+    <div className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+      <SectionHeading icon={icon} title={title} />
+      {children}
+    </div>
+  );
+}
+
+function ResultBlock({
+  children,
+  title,
+}: {
+  children: React.ReactNode;
+  title: string;
+}) {
+  return (
+    <div className="rounded-[1.15rem] border border-[#D8D4CA] bg-white p-4">
+      <h4 className="mb-3 text-base font-semibold text-[#111111]">{title}</h4>
+      {children}
+    </div>
+  );
+}
+
+function PillList({ items }: { items: readonly string[] }) {
+  if (items.length === 0) return null;
+
+  return (
+    <ul className="grid gap-2">
+      {items.map((item) => (
+        <li
+          className="rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] px-3 py-2 text-sm leading-6 text-[#3D3D3D]"
+          key={item}
+        >
+          {item}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/features/tools/social-platform-asset-adapter/widget/section-heading.tsx

@@ -0,0 +1,18 @@
+import type { LucideIcon } from "lucide-react";
+
+export function SectionHeading({
+  icon: Icon,
+  title,
+}: {
+  icon: LucideIcon;
+  title: string;
+}) {
+  return (
+    <div className="mb-4 flex items-center gap-2">
+      <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#ECE9DF] text-[#111111]">
+        <Icon aria-hidden className="size-4" />
+      </span>
+      <h3 className="text-lg font-semibold text-[#111111]">{title}</h3>
+    </div>
+  );
+}