@tomako/tools-runtime 0.1.0

package/src/features/tools/app-icon-resizer/widget/helpers.ts

@@ -0,0 +1,314 @@
+import {
+    GOOGLE_PLAY_ICON_MAX_BYTES,
+    IOS_APP_ICON_SLOTS,
+    type AppIconAsset,
+    type AppIconFit,
+    type AppIconPlatform,
+    type AppIconResizerOutput,
+} from "../../../../lib/tools/app-icon-resizer-schema";
+
+import type { GeneratedIconAsset, SourceImage, ZipFileInput } from "./types";
+
+export async function loadSourceImage(file: File): Promise<SourceImage> {
+  const dataUrl = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") resolve(reader.result);
+      else reject(new Error("File reader did not return a data URL."));
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+  const image = new Image();
+  image.src = dataUrl;
+  await image.decode();
+
+  return {
+    fileName: file.name,
+    type: file.type,
+    dataUrl,
+    width: image.naturalWidth,
+    height: image.naturalHeight,
+    image,
+  };
+}
+
+export async function renderIconAssets(
+  source: SourceImage,
+  specs: readonly AppIconAsset[],
+  fit: AppIconFit,
+  backgroundColor: string,
+): Promise<GeneratedIconAsset[]> {
+  return Promise.all(
+    specs.map(async (spec) => {
+      const blob = await renderPng(source.image, spec.width, spec.height, fit, backgroundColor);
+      return {
+        ...spec,
+        blob,
+        url: URL.createObjectURL(blob),
+      };
+    }),
+  );
+}
+
+async function renderPng(
+  image: HTMLImageElement,
+  width: number,
+  height: number,
+  fit: AppIconFit,
+  backgroundColor: string,
+): Promise<Blob> {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+
+  if (!context) {
+    throw new Error("Canvas is not available.");
+  }
+
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+  if (fit === "contain") {
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, width, height);
+  }
+
+  const imageRatio = image.naturalWidth / image.naturalHeight;
+  const canvasRatio = width / height;
+  const scale =
+    fit === "cover"
+      ? imageRatio > canvasRatio
+        ? height / image.naturalHeight
+        : width / image.naturalWidth
+      : imageRatio > canvasRatio
+        ? width / image.naturalWidth
+        : height / image.naturalHeight;
+  const drawWidth = image.naturalWidth * scale;
+  const drawHeight = image.naturalHeight * scale;
+  const dx = (width - drawWidth) / 2;
+  const dy = (height - drawHeight) / 2;
+
+  context.drawImage(image, dx, dy, drawWidth, drawHeight);
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error("Failed to render PNG."));
+    }, "image/png");
+  });
+}
+
+export function buildWarnings(
+  source: SourceImage,
+  assets: readonly GeneratedIconAsset[],
+  t: (key: string, vars?: Record<string, string | number>) => string,
+): string[] {
+  const warnings: string[] = [];
+
+  if (source.width !== source.height) {
+    warnings.push(t("warnings.notSquare"));
+  }
+
+  if (source.type === "image/svg+xml") {
+    warnings.push(t("warnings.svg"));
+  }
+
+  const googlePlayIcon = assets.find((asset) => asset.id === "google-play-512");
+  if (googlePlayIcon && googlePlayIcon.blob.size > GOOGLE_PLAY_ICON_MAX_BYTES) {
+    warnings.push(t("warnings.googlePlayTooLarge"));
+  }
+
+  return warnings;
+}
+
+export async function createIconZip(
+  summary: AppIconResizerOutput,
+  assets: readonly GeneratedIconAsset[],
+  fit: AppIconFit,
+  backgroundColor: string,
+  t: (key: string, vars?: Record<string, string | number>) => string,
+): Promise<Blob> {
+  const files: ZipFileInput[] = [];
+
+  for (const asset of assets) {
+    files.push({
+      path: asset.path,
+      data: new Uint8Array(await asset.blob.arrayBuffer()),
+    });
+  }
+
+  if (assets.some((asset) => asset.platform === "apple")) {
+    files.push({
+      path: "Apple/AppIcon.appiconset/Contents.json",
+      data: encodeText(
+        JSON.stringify(
+          {
+            images: IOS_APP_ICON_SLOTS.map((slot) => ({
+              size: slot.size,
+              idiom: slot.idiom,
+              filename: slot.filename,
+              scale: slot.scale,
+            })),
+            info: {
+              version: 1,
+              author: "xcode",
+            },
+          },
+          null,
+          2,
+        ),
+      ),
+    });
+  }
+
+  files.push({
+    path: "README.txt",
+    data: encodeText(buildReadmeText(t, summary, fit, backgroundColor)),
+  });
+
+  return createZipBlob(files);
+}
+
+function buildReadmeText(
+  t: (key: string, vars?: Record<string, string | number>) => string,
+  summary: AppIconResizerOutput,
+  fit: AppIconFit,
+  backgroundColor: string,
+): string {
+  return [
+    t("readme.title"),
+    t("readme.sourceLine", {
+      fileName: summary.source.fileName,
+      width: summary.source.width,
+      height: summary.source.height,
+    }),
+    t("readme.fitLine", { fit: t(`fits.${fit}`) }),
+    t("readme.backgroundLine", { backgroundColor }),
+    t("readme.assetCountLine", { assetCount: summary.assetCount }),
+    "",
+    t("readme.appleHeading"),
+    t("readme.appleLine1"),
+    t("readme.appleLine2"),
+    "",
+    t("readme.googleHeading"),
+    t("readme.googleLine1"),
+    t("readme.googleLine2"),
+    "",
+    t("readme.androidHeading"),
+    t("readme.androidLine1"),
+    "",
+    t("readme.footerLine1"),
+    t("readme.footerLine2"),
+  ].join("\n");
+}
+
+function createZipBlob(files: readonly ZipFileInput[]): Blob {
+  const localParts: Uint8Array[] = [];
+  const centralParts: Uint8Array[] = [];
+  let offset = 0;
+  const now = new Date();
+  const { dosDate, dosTime } = toDosDateTime(now);
+
+  files.forEach((file) => {
+    const name = encodeText(file.path);
+    const crc = crc32(file.data);
+    const localHeader = new Uint8Array(30);
+    const local = new DataView(localHeader.buffer);
+    local.setUint32(0, 0x04034b50, true);
+    local.setUint16(4, 20, true);
+    local.setUint16(6, 0x0800, true);
+    local.setUint16(8, 0, true);
+    local.setUint16(10, dosTime, true);
+    local.setUint16(12, dosDate, true);
+    local.setUint32(14, crc, true);
+    local.setUint32(18, file.data.length, true);
+    local.setUint32(22, file.data.length, true);
+    local.setUint16(26, name.length, true);
+    local.setUint16(28, 0, true);
+    localParts.push(localHeader, name, file.data);
+
+    const centralHeader = new Uint8Array(46);
+    const central = new DataView(centralHeader.buffer);
+    central.setUint32(0, 0x02014b50, true);
+    central.setUint16(4, 20, true);
+    central.setUint16(6, 20, true);
+    central.setUint16(8, 0x0800, true);
+    central.setUint16(10, 0, true);
+    central.setUint16(12, dosTime, true);
+    central.setUint16(14, dosDate, true);
+    central.setUint32(16, crc, true);
+    central.setUint32(20, file.data.length, true);
+    central.setUint32(24, file.data.length, true);
+    central.setUint16(28, name.length, true);
+    central.setUint16(30, 0, true);
+    central.setUint16(32, 0, true);
+    central.setUint16(34, 0, true);
+    central.setUint16(36, 0, true);
+    central.setUint32(38, 0, true);
+    central.setUint32(42, offset, true);
+    centralParts.push(centralHeader, name);
+
+    offset += localHeader.length + name.length + file.data.length;
+  });
+
+  const centralSize = centralParts.reduce((sum, part) => sum + part.length, 0);
+  const end = new Uint8Array(22);
+  const endView = new DataView(end.buffer);
+  endView.setUint32(0, 0x06054b50, true);
+  endView.setUint16(8, files.length, true);
+  endView.setUint16(10, files.length, true);
+  endView.setUint32(12, centralSize, true);
+  endView.setUint32(16, offset, true);
+  endView.setUint16(20, 0, true);
+
+  return new Blob([...localParts, ...centralParts, end].map(toBlobPart), {
+    type: "application/zip",
+  });
+}
+
+function toBlobPart(part: Uint8Array): BlobPart {
+  return part.buffer.slice(part.byteOffset, part.byteOffset + part.byteLength) as ArrayBuffer;
+}
+
+function toDosDateTime(date: Date): { dosDate: number; dosTime: number } {
+  const year = Math.max(date.getFullYear(), 1980);
+  const dosDate = ((year - 1980) << 9) | ((date.getMonth() + 1) << 5) | date.getDate();
+  const dosTime = (date.getHours() << 11) | (date.getMinutes() << 5) | Math.floor(date.getSeconds() / 2);
+  return { dosDate, dosTime };
+}
+
+function crc32(data: Uint8Array): number {
+  let crc = 0xffffffff;
+
+  for (const byte of data) {
+    crc = CRC32_TABLE[(crc ^ byte) & 0xff] ^ (crc >>> 8);
+  }
+
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+const CRC32_TABLE = new Uint32Array(
+  Array.from({ length: 256 }, (_, index) => {
+    let crc = index;
+    for (let bit = 0; bit < 8; bit += 1) {
+      crc = crc & 1 ? 0xedb88320 ^ (crc >>> 1) : crc >>> 1;
+    }
+    return crc >>> 0;
+  }),
+);
+
+function encodeText(value: string): Uint8Array {
+  return new TextEncoder().encode(value);
+}
+
+export function buildZipName(fileName: string, platform: AppIconPlatform): string {
+  const base = fileName
+    .replace(/\.[^.]+$/, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 48);
+  const suffix = platform === "all" ? "app-store-google-play" : platform;
+  return `${base || "app-icon"}-${suffix}-icons.zip`;
+}

package/src/features/tools/app-icon-resizer/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const AppIconResizer = dynamic(() =>
+  import("./app-icon-resizer").then((module) => module.AppIconResizer),
+);

package/src/features/tools/app-icon-resizer/widget/platform-icons.tsx

@@ -0,0 +1,59 @@
+import Image from "next/image";
+
+import type { AppIconPlatform } from "../../../../lib/tools/app-icon-resizer-schema";
+
+export function PlatformPackageIcon({ value }: { value: AppIconPlatform }) {
+  if (value === "all") {
+    return (
+      <span className="flex h-full w-full items-center justify-center gap-1.5">
+        <PlatformBrandIcon kind="app-store" variant="pair" />
+        <PlatformBrandIcon kind="google-play" variant="pair" />
+      </span>
+    );
+  }
+
+  if (value === "apple") {
+    return <PlatformBrandIcon kind="app-store" variant="single" />;
+  }
+
+  return <PlatformBrandIcon kind="google-play" variant="single" />;
+}
+
+function PlatformBrandIcon({
+  kind,
+  variant,
+}: {
+  kind: "app-store" | "google-play";
+  variant: "pair" | "single";
+}) {
+  let sizeClass = "size-[34px]";
+  let px = 34;
+
+  if (variant === "pair") {
+    if (kind === "google-play") {
+      sizeClass = "size-[22px]";
+      px = 22;
+    } else {
+      sizeClass = "size-[30px]";
+      px = 30;
+    }
+  } else if (kind === "google-play") {
+    sizeClass = "size-[26px]";
+    px = 26;
+  }
+
+  return (
+    <Image
+      alt=""
+      aria-hidden
+      className={`${sizeClass} shrink-0 object-contain`}
+      height={px}
+      src={
+        kind === "app-store"
+          ? "/tools/platform-app-store-icon.webp"
+          : "/tools/platform-google-play-icon.webp"
+      }
+      width={px}
+    />
+  );
+}

package/src/features/tools/app-icon-resizer/widget/preview-dialogs.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable @next/next/no-img-element -- User-selected data/blob URLs are local previews and cannot use Next image optimization. */
+
+import { Button } from "@tomako/ui/button";
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+} from "@tomako/ui/dialog";
+import { downloadBlob } from "../../../../lib/file/download";
+import { ChevronLeft, ChevronRight, Download } from "lucide-react";
+
+import { TRANSPARENT_PREVIEW_BACKGROUND } from "./constants";
+import type { GeneratedIconAsset, SourceImage } from "./types";
+
+export function SourcePreviewDialog({
+  open,
+  onOpenChange,
+  source,
+  title,
+  alt,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  source: SourceImage | null;
+  title: string;
+  alt: string;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="lg">
+        <DialogHeader title={title} />
+        <DialogBody>
+          {source ? (
+            <div
+              className="flex max-h-[70vh] items-center justify-center rounded-lg p-4"
+              style={TRANSPARENT_PREVIEW_BACKGROUND}
+            >
+              <img
+                alt={alt}
+                className="max-h-[62vh] max-w-full rounded-lg object-contain"
+                src={source.dataUrl}
+              />
+            </div>
+          ) : null}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function AssetPreviewDialog({
+  asset,
+  assetPreviewIndex,
+  visibleAssets,
+  onClose,
+  onPrevious,
+  onNext,
+  title,
+  previousLabel,
+  nextLabel,
+  downloadLabel,
+}: {
+  asset: GeneratedIconAsset | null;
+  assetPreviewIndex: number | null;
+  visibleAssets: readonly GeneratedIconAsset[];
+  onClose: () => void;
+  onPrevious: () => void;
+  onNext: () => void;
+  title: string;
+  previousLabel: string;
+  nextLabel: string;
+  downloadLabel: string;
+}) {
+  return (
+    <Dialog
+      open={Boolean(asset)}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent size="xl">
+        <DialogHeader title={title} />
+        <DialogBody>
+          {asset ? (
+            <div
+              className="flex max-h-[70vh] items-center justify-center rounded-lg p-5"
+              style={TRANSPARENT_PREVIEW_BACKGROUND}
+            >
+              <img
+                alt=""
+                className="max-h-[62vh] max-w-full rounded-lg object-contain"
+                src={asset.url}
+              />
+            </div>
+          ) : null}
+        </DialogBody>
+        <DialogFooter className="justify-between">
+          <div className="flex items-center gap-2">
+            <Button
+              disabled={assetPreviewIndex === null || assetPreviewIndex <= 0}
+              type="button"
+              variant="outline"
+              onClick={onPrevious}
+            >
+              <ChevronLeft aria-hidden className="size-4" />
+              {previousLabel}
+            </Button>
+            <Button
+              disabled={
+                assetPreviewIndex === null ||
+                assetPreviewIndex >= visibleAssets.length - 1
+              }
+              type="button"
+              variant="outline"
+              onClick={onNext}
+            >
+              {nextLabel}
+              <ChevronRight aria-hidden className="size-4" />
+            </Button>
+          </div>
+          <Button
+            className="bg-[#111111] text-white hover:bg-[#2A2A2A]"
+            disabled={!asset}
+            type="button"
+            onClick={() => {
+              if (!asset) return;
+              downloadBlob(asset.blob, asset.path.split("/").at(-1) ?? "app-icon.png");
+            }}
+          >
+            <Download aria-hidden className="size-4" />
+            {downloadLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/tools/app-icon-resizer/widget/result-shell.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable @next/next/no-img-element -- User-selected data/blob URLs are local previews and cannot use Next image optimization. */
+
+import { Button } from "@tomako/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@tomako/ui/tabs";
+import { downloadBlob } from "../../../../lib/file/download";
+import { Download } from "lucide-react";
+
+import {
+    ToolResultActions,
+    ToolResultHeader,
+} from "../../../../components/tools/workspace";
+import { TRANSPARENT_PREVIEW_BACKGROUND, resultTabs } from "./constants";
+import type { GeneratedIconAsset, GeneratedPackage, ResultTab } from "./types";
+
+export function ResultPanel({
+  output,
+  resultTab,
+  onResultTabChange,
+  onAssetPreview,
+  onDownloadZip,
+  t,
+}: {
+  output: GeneratedPackage;
+  resultTab: ResultTab;
+  onResultTabChange: (tab: ResultTab) => void;
+  onAssetPreview: (index: number) => void;
+  onDownloadZip: () => void;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}) {
+  const visibleGeneratedAssets =
+    output.platform !== "all" || resultTab === "all"
+      ? output.generatedAssets
+      : resultTab === "apple"
+        ? output.generatedAssets.filter((asset) => asset.platform === "apple")
+        : output.generatedAssets.filter(
+            (asset) => asset.platform === "google" || asset.platform === "android",
+          );
+
+  return (
+    <div className="flex h-full min-h-0 flex-1 overflow-hidden">
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <ToolResultHeader
+          body={t("resultHint", { count: output.assetCount })}
+          className="rounded-lg"
+          title={t("resultTitle")}
+          actions={
+            <ToolResultActions downloadLabel={t("downloadZip")} onDownload={onDownloadZip} />
+          }
+        />
+
+        {output.warnings.length > 0 ? (
+          <div className="mt-4 grid gap-2">
+            {output.warnings.map((warning) => (
+              <p
+                key={warning}
+                className="rounded-lg border border-[#F1CCB7] bg-[#FFF6F0] px-3 py-2 text-sm leading-6 text-[#7B3D23]"
+              >
+                {warning}
+              </p>
+            ))}
+          </div>
+        ) : null}
+
+        {output.platform === "all" ? (
+          <Tabs
+            className="mt-4"
+            value={resultTab}
+            onValueChange={(value) => onResultTabChange(value as ResultTab)}
+          >
+            <TabsList
+              aria-label={t("resultTabsLabel")}
+              className="h-9 rounded-lg border border-[#E5E5E5] bg-white p-1"
+            >
+              {resultTabs.map((tab) => (
+                <TabsTrigger
+                  key={tab}
+                  className="h-7 rounded-md px-3 text-[12.5px] font-semibold text-[#555555] data-[state=active]:bg-[#F3F3F3] data-[state=active]:font-bold data-[state=active]:text-[#111111] data-[state=active]:shadow-none data-[state=active]:ring-1 data-[state=active]:ring-[#111111]/20"
+                  value={tab}
+                >
+                  {t(`resultTabs.${tab}`)}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+        ) : null}
+
+        <AssetGrid
+          assets={visibleGeneratedAssets}
+          onAssetPreview={onAssetPreview}
+          t={t}
+        />
+      </div>
+    </div>
+  );
+}
+
+function AssetGrid({
+  assets,
+  onAssetPreview,
+  t,
+}: {
+  assets: readonly GeneratedIconAsset[];
+  onAssetPreview: (index: number) => void;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}) {
+  return (
+    <div className="mt-5 min-h-0 flex-1 overflow-y-auto pr-1">
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {assets.map((asset, index) => (
+          <article
+            key={asset.id}
+            className="rounded-lg border-2 border-[#E5E5E5] bg-white p-3 transition hover:-translate-y-0.5 hover:border-[#111111] hover:bg-[#F3F3F3]"
+          >
+            <button
+              aria-label={`${t("openAssetPreview")} ${asset.width} x ${asset.height}`}
+              className="block w-full cursor-zoom-in rounded-md text-left outline-none focus-visible:ring-4 focus-visible:ring-[#111111]/10"
+              type="button"
+              onClick={() => onAssetPreview(index)}
+            >
+              <div
+                className="flex h-24 items-center justify-center rounded-md p-3"
+                style={TRANSPARENT_PREVIEW_BACKGROUND}
+              >
+                <img
+                  alt=""
+                  className="max-h-full max-w-full rounded-md object-contain"
+                  src={asset.url}
+                />
+              </div>
+            </button>
+            <p className="mt-3 text-sm font-semibold text-[#111111]">{asset.group}</p>
+            <p className="mt-1 text-xs leading-5 text-[#555555]">
+              {asset.width} x {asset.height} · {asset.purpose}
+            </p>
+            <p className="mt-1 truncate text-[11px] leading-4 text-[#777777]">{asset.path}</p>
+            <Button
+              className="mt-3 h-9 w-full rounded-lg border-[#D8D8D8] bg-white text-xs font-semibold text-[#111111] shadow-none hover:bg-[#F4F4F4]"
+              type="button"
+              variant="outline"
+              onClick={() =>
+                downloadBlob(asset.blob, asset.path.split("/").at(-1) ?? "app-icon.png")
+              }
+            >
+              <Download aria-hidden className="size-3.5" />
+              {t("downloadPng")}
+            </Button>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function getVisibleGeneratedAssets(
+  output: GeneratedPackage,
+  resultTab: ResultTab,
+): GeneratedIconAsset[] {
+  if (output.platform !== "all" || resultTab === "all") return output.generatedAssets;
+  if (resultTab === "apple") {
+    return output.generatedAssets.filter((asset) => asset.platform === "apple");
+  }
+  return output.generatedAssets.filter(
+    (asset) => asset.platform === "google" || asset.platform === "android",
+  );
+}