@tomako/tools-runtime 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomako/tools-runtime",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Shared interactive tools runtime for Tomako-FE workspace dialogs and Tomako-SEO tool pages",
   "type": "module",
   "exports": {

package/src/features/tools/app-store-screenshot-generator/widget/app-store-screenshot-generator.tsx

@@ -44,7 +44,7 @@ import {
     buildGeneratedAssetSlots,
     clampAssetCount,
     dimensionsForAssetFormat,
-    widthForAssetFormat,
+    gridClassForAssetFormat,
 } from "./asset-slots";
 import {
     LOGO_REFERENCE_MAX_DATA_URL_LENGTH,
@@ -160,9 +160,12 @@ export function AppStoreScreenshotGenerator() {
     () => downloadableAssets.filter((asset) => downloadSelectionIds.has(asset.id)),
     [downloadSelectionIds, downloadableAssets],
   );
+  const soleDownloadableAsset = downloadableAssets.length === 1 ? downloadableAssets[0] : null;
   const downloadButtonLabel = downloadSelectionMode
     ? `${t("download")} ${selectedDownloadAssets.length}/${downloadableAssets.length}`
-    : t("download");
+    : soleDownloadableAsset
+      ? t("downloadPng")
+      : t("download");
 
   async function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -489,6 +492,14 @@ export function AppStoreScreenshotGenerator() {
     if (!downloadableAssets.length || downloading) return;
     setDownloadError(null);
 
+    if (soleDownloadableAsset) {
+      await downloadAssets([soleDownloadableAsset], {
+        forceZip: false,
+        zipName: buildScreenshotsZipName(draft, "selected"),
+      });
+      return;
+    }
+
     if (!downloadSelectionMode) {
       setDownloadSelectionMode(true);
       setDownloadSelectionIds(
@@ -521,6 +532,15 @@ export function AppStoreScreenshotGenerator() {
     });
   }
 
+  function handleDownloadSvgClick(asset: AppStoreScreenshotAsset) {
+    if (!asset.svg || downloading) return;
+    setDownloadError(null);
+    downloadBlob(
+      new Blob([asset.svg], { type: "image/svg+xml;charset=utf-8" }),
+      `${assetFileBase(draft, asset)}.svg`,
+    );
+  }
+
   function cancelDownloadSelection() {
     setDownloadSelectionMode(false);
     setDownloadSelectionIds(new Set());
@@ -998,6 +1018,18 @@ export function AppStoreScreenshotGenerator() {
                         {downloading ? t("downloading") : downloadButtonLabel}
                       </span>
                     </Button>
+                    {soleDownloadableAsset?.svg ? (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => handleDownloadSvgClick(soleDownloadableAsset)}
+                        disabled={downloading}
+                        className="h-10 rounded-lg border-[#D8D4CA] bg-white px-4 text-xs font-semibold text-[#111111] shadow-none hover:bg-[#F4F4F4] disabled:pointer-events-none disabled:opacity-55"
+                      >
+                        <Download aria-hidden className="size-4" />
+                        {t("downloadSvg")}
+                      </Button>
+                    ) : null}
                     {downloadSelectionMode ? (
                       <Button
                         type="button"
@@ -1095,7 +1127,13 @@ export function AppStoreScreenshotGenerator() {
                     </div>
                   </div>
                 ) : null}
-                <div className="flex flex-wrap items-start gap-4">
+                <div
+                  className={`grid items-start gap-4 ${
+                    resultSlots.length === 1
+                      ? "grid-cols-1"
+                      : "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
+                  }`}
+                >
                   {resultSlots.map(({ asset, format, slot }) => {
                     if (!asset) {
                       const dimensions = dimensionsForAssetFormat(format);
@@ -1104,11 +1142,8 @@ export function AppStoreScreenshotGenerator() {
                           key={`pending-${slot}`}
                           aria-label={t("pendingImageLoading", { index: slot })}
                           role="status"
-                          style={{
-                            aspectRatio: `${dimensions.width} / ${dimensions.height}`,
-                            width: widthForAssetFormat(format),
-                          }}
-                          className="flex max-w-full flex-col items-center justify-center rounded-lg border border-dashed border-[#D8D4CA] bg-white p-4 text-center shadow-[0_8px_22px_rgba(17,17,17,0.04)]"
+                          style={{ aspectRatio: `${dimensions.width} / ${dimensions.height}` }}
+                          className={`flex w-full max-w-full flex-col items-center justify-center rounded-lg border border-dashed border-[#D8D4CA] bg-white p-4 text-center shadow-[0_8px_22px_rgba(17,17,17,0.04)] ${gridClassForAssetFormat(format, resultSlots.length === 1)}`}
                         >
                           <span className="flex size-10 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
                             <Loader2 aria-hidden className="size-4 animate-spin" />
@@ -1130,8 +1165,7 @@ export function AppStoreScreenshotGenerator() {
                     return (
                       <div
                         key={asset.id}
-                        style={{ width: widthForAssetFormat(asset.format) }}
-                        className="relative max-w-full"
+                        className={`relative w-full max-w-full ${gridClassForAssetFormat(asset.format, resultSlots.length === 1)}`}
                       >
                         <button
                           type="button"

package/src/features/tools/app-store-screenshot-generator/widget/asset-slots.test.ts

@@ -0,0 +1,52 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import type { AppStoreScreenshotAsset } from "../../../../lib/tools/app-store-screenshot-generator-schema";
+
+import {
+  buildGeneratedAssetSlots,
+  gridClassForAssetFormat,
+} from "./asset-slots";
+
+function asset(overrides: Partial<AppStoreScreenshotAsset>): AppStoreScreenshotAsset {
+  return {
+    id: "asset-1",
+    platform: "google",
+    format: "googlePhone",
+    width: 1080,
+    height: 1920,
+    imageUrl: "https://example.com/generated.png",
+    ...overrides,
+  };
+}
+
+describe("app store screenshot result slots", () => {
+  it("keeps completed and pending Google assets in the same ordered slot model", () => {
+    const slots = buildGeneratedAssetSlots({
+      assets: [asset({ id: "phone-2", slot: 2 })],
+      expectedCount: 3,
+      includePending: true,
+      platform: "google",
+      totalCount: 3,
+    });
+
+    assert.deepEqual(
+      slots.map(({ asset: result, format, slot }) => ({ id: result?.id, format, slot })),
+      [
+        { id: undefined, format: "featureGraphic", slot: 1 },
+        { id: "phone-2", format: "googlePhone", slot: 2 },
+        { id: undefined, format: "googlePhone", slot: 3 },
+      ],
+    );
+  });
+
+  it("lets feature graphics span the responsive result grid", () => {
+    assert.equal(gridClassForAssetFormat("featureGraphic"), "sm:col-span-2 xl:col-span-3");
+    assert.equal(gridClassForAssetFormat("iphone"), "");
+  });
+
+  it("centers a sole result at an inspectable width without creating implicit grid columns", () => {
+    assert.equal(gridClassForAssetFormat("featureGraphic", true), "mx-auto max-w-[340px]");
+    assert.equal(gridClassForAssetFormat("iphone", true), "mx-auto max-w-[340px]");
+  });
+});

package/src/features/tools/app-store-screenshot-generator/widget/asset-slots.ts

@@ -54,8 +54,9 @@ export function sortGeneratedAssets(assets: AppStoreScreenshotAsset[]) {
   });
 }
 
-export function widthForAssetFormat(format: AssetFormat) {
-  return format === "featureGraphic" ? "clamp(220px, 27vw, 340px)" : "clamp(112px, 12vw, 156px)";
+export function gridClassForAssetFormat(format: AssetFormat, isSoleResult = false) {
+  if (isSoleResult) return "mx-auto max-w-[340px]";
+  return format === "featureGraphic" ? "sm:col-span-2 xl:col-span-3" : "";
 }
 
 export function dimensionsForAssetFormat(format: AssetFormat) {

package/src/features/tools/app-store-screenshot-generator/widget/input-media.test.ts

@@ -0,0 +1,81 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import type {
+  AppStoreScreenshotAsset,
+  AppStoreScreenshotGeneratorInput,
+} from "../../../../lib/tools/app-store-screenshot-generator-schema";
+
+import { createGeneratedAssetZipEntries } from "./input-media";
+
+const input = {
+  source: "upload",
+  productUrl: "",
+  hasScreenshot: true,
+  screenshotName: "source.png",
+  screenshotDataUrl: "",
+  screenshotReferences: [],
+  logoName: "",
+  logoDataUrl: "",
+  productName: "Tomako",
+  productBenefits: "",
+  assetCount: 1,
+  outputLanguage: "en",
+  platform: "apple",
+  style: "clean",
+  palette: "auto",
+  layout: "mixed",
+  headline: "",
+  subheadline: "",
+} satisfies AppStoreScreenshotGeneratorInput;
+
+describe("app store screenshot ZIP entries", () => {
+  it("includes the PNG and existing SVG wrapper for each generated asset", async () => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg"><metadata>${"prompt ".repeat(20)}</metadata></svg>`;
+    const asset = {
+      id: "hero",
+      platform: "apple",
+      format: "iphone",
+      title: "Core benefit",
+      width: 1290,
+      height: 2796,
+      imageUrl: "https://example.com/hero.png",
+      svg,
+    } satisfies AppStoreScreenshotAsset;
+
+    const files = await createGeneratedAssetZipEntries(
+      [asset],
+      input,
+      async () => new Blob([new Uint8Array([137, 80, 78, 71])], { type: "image/png" }),
+    );
+
+    assert.deepEqual(
+      files.map((file) => file.path),
+      [
+        "01-tomako-apple-iphone-core-benefit.png",
+        "01-tomako-apple-iphone-core-benefit.svg",
+      ],
+    );
+    assert.deepEqual([...files[0]!.data], [137, 80, 78, 71]);
+    assert.equal(new TextDecoder().decode(files[1]!.data), svg);
+  });
+
+  it("does not advertise a missing SVG by adding an empty file", async () => {
+    const asset = {
+      id: "hero",
+      platform: "apple",
+      format: "iphone",
+      width: 1290,
+      height: 2796,
+      imageUrl: "https://example.com/hero.png",
+    } satisfies AppStoreScreenshotAsset;
+
+    const files = await createGeneratedAssetZipEntries(
+      [asset],
+      input,
+      async () => new Blob([new Uint8Array([1])], { type: "image/png" }),
+    );
+
+    assert.deepEqual(files.map((file) => file.path), ["01-tomako-apple-iphone-hero.png"]);
+  });
+});

package/src/features/tools/app-store-screenshot-generator/widget/input-media.ts

@@ -5,7 +5,7 @@ import type {
 
 import { renderAssetToPngBlob } from "./generation";
 import type { SourceKey } from "./types";
-import { createZipBlob, slugForFileName, type ZipFileInput } from "./zip";
+import { createZipBlob, encodeText, slugForFileName, type ZipFileInput } from "./zip";
 
 export function inferSource(input: AppStoreScreenshotGeneratorInput): SourceKey {
   const hasUrl = input.productUrl.trim().length > 0;
@@ -137,22 +137,34 @@ export async function createGeneratedAssetsZip(
   assets: readonly AppStoreScreenshotAsset[],
   input: AppStoreScreenshotGeneratorInput,
 ): Promise<Blob> {
+  return createZipBlob(await createGeneratedAssetZipEntries(assets, input));
+}
+
+export async function createGeneratedAssetZipEntries(
+  assets: readonly AppStoreScreenshotAsset[],
+  input: AppStoreScreenshotGeneratorInput,
+  renderPng: (asset: AppStoreScreenshotAsset) => Promise<Blob> = renderAssetToPngBlob,
+): Promise<ZipFileInput[]> {
   const files: ZipFileInput[] = [];
   const usedPaths = new Set<string>();
 
   for (const [index, asset] of assets.entries()) {
-    const blob = await renderAssetToPngBlob(asset);
-    const path = uniqueZipPath(
-      usedPaths,
-      `${String(index + 1).padStart(2, "0")}-${assetFileBase(input, asset)}-${slugForFileName(asset.title ?? asset.id)}.png`,
-    );
+    const fileStem = `${String(index + 1).padStart(2, "0")}-${assetFileBase(input, asset)}-${slugForFileName(asset.title ?? asset.id)}`;
+    const blob = await renderPng(asset);
     files.push({
-      path,
+      path: uniqueZipPath(usedPaths, `${fileStem}.png`),
       data: new Uint8Array(await blob.arrayBuffer()),
     });
+
+    if (asset.svg) {
+      files.push({
+        path: uniqueZipPath(usedPaths, `${fileStem}.svg`),
+        data: encodeText(asset.svg),
+      });
+    }
   }
 
-  return createZipBlob(files);
+  return files;
 }
 
 export function uniqueZipPath(usedPaths: Set<string>, path: string) {