@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,76 @@
+import type { AppStoreScreenshotAsset } from "../../../../lib/tools/app-store-screenshot-generator-schema";
+
+import { MAX_ASSET_COUNT, MIN_ASSET_COUNT } from "./constants";
+import type { AssetFormat, GeneratedAssetSlot, PlatformKey } from "./types";
+
+export function buildGeneratedAssetSlots({
+  assets,
+  expectedCount,
+  includePending,
+  platform,
+  totalCount,
+}: {
+  assets: AppStoreScreenshotAsset[];
+  expectedCount: number;
+  includePending: boolean;
+  platform: PlatformKey;
+  totalCount?: number;
+}): GeneratedAssetSlot[] {
+  const sortedAssets = sortGeneratedAssets(assets);
+  if (!includePending) {
+    return sortedAssets.map((asset, index) => ({
+      asset,
+      format: asset.format,
+      slot: asset.slot ?? index + 1,
+    }));
+  }
+
+  const setSize = clampAssetCount(
+    totalCount ?? Math.max(expectedCount, ...sortedAssets.map((asset) => asset.setSize ?? 0)),
+  );
+  const assetsBySlot = new Map<number, AppStoreScreenshotAsset>();
+  sortedAssets.forEach((asset, index) => {
+    const slot = Math.min(setSize, Math.max(1, asset.slot ?? index + 1));
+    if (!assetsBySlot.has(slot)) assetsBySlot.set(slot, asset);
+  });
+
+  return Array.from({ length: setSize }, (_, index) => {
+    const slot = index + 1;
+    const asset = assetsBySlot.get(slot);
+    return {
+      asset,
+      format: asset?.format ?? formatForPendingSlot(platform, slot),
+      slot,
+    };
+  });
+}
+
+export function sortGeneratedAssets(assets: AppStoreScreenshotAsset[]) {
+  return [...assets].sort((left, right) => {
+    const leftSlot = left.slot ?? Number.MAX_SAFE_INTEGER;
+    const rightSlot = right.slot ?? Number.MAX_SAFE_INTEGER;
+    if (leftSlot !== rightSlot) return leftSlot - rightSlot;
+    return left.id.localeCompare(right.id);
+  });
+}
+
+export function widthForAssetFormat(format: AssetFormat) {
+  return format === "featureGraphic" ? "clamp(220px, 27vw, 340px)" : "clamp(112px, 12vw, 156px)";
+}
+
+export function dimensionsForAssetFormat(format: AssetFormat) {
+  if (format === "featureGraphic") return { width: 2048, height: 1024 };
+  if (format === "ipad") return { width: 2048, height: 2732 };
+  if (format === "googlePhone") return { width: 1080, height: 1920 };
+  return { width: 1290, height: 2796 };
+}
+
+export function formatForPendingSlot(platform: PlatformKey, slot: number): AssetFormat {
+  if (platform === "google") return slot === 1 ? "featureGraphic" : "googlePhone";
+  return "iphone";
+}
+
+export function clampAssetCount(value: number | undefined) {
+  if (!Number.isFinite(value)) return MIN_ASSET_COUNT;
+  return Math.min(MAX_ASSET_COUNT, Math.max(MIN_ASSET_COUNT, Math.round(value ?? MIN_ASSET_COUNT)));
+}

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

@@ -0,0 +1,43 @@
+import type { AppStoreScreenshotGeneratorInput } from "../../../../lib/tools/app-store-screenshot-generator-schema";
+
+import type { OutputLanguageKey, PlatformKey, StyleKey } from "./types";
+
+export const platformOptions: PlatformKey[] = ["apple", "google"];
+export const styleOptions: StyleKey[] = ["clean", "bold", "editorial", "dark"];
+export const outputLanguageOptions: OutputLanguageKey[] = ["zh", "en"];
+export const assetCountOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+export const MAX_SCREENSHOT_REFERENCES = 10;
+export const MIN_ASSET_COUNT = 1;
+export const MAX_ASSET_COUNT = 10;
+export const IMAGE_POLL_INTERVAL_MS = 5_000;
+export const IMAGE_POLL_TIMEOUT_MS = 1_800_000;
+export const AGENT_RESULT_POLL_INTERVAL_MS = 3_000;
+export const AGENT_RESULT_TIMEOUT_MS = 1_800_000;
+export const LOGO_REFERENCE_MAX_DATA_URL_LENGTH = 50_000;
+
+export const initialDraft: AppStoreScreenshotGeneratorInput = {
+  source: "url",
+  productUrl: "",
+  hasScreenshot: false,
+  screenshotName: "",
+  screenshotDataUrl: "",
+  screenshotWidth: undefined,
+  screenshotHeight: undefined,
+  screenshotReferences: [],
+  logoName: "",
+  logoDataUrl: "",
+  logoWidth: undefined,
+  logoHeight: undefined,
+  productName: "",
+  productBenefits: "",
+  assetCount: 10,
+  outputLanguage: "zh",
+  platform: "apple",
+  style: "clean",
+  palette: "auto",
+  layout: "mixed",
+  headline: "",
+  subheadline: "",
+};
+
+export const formLabelClassName = "text-[14px] font-semibold text-[#111111]";

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

@@ -0,0 +1,214 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element -- Generated image URLs are returned at runtime by the backend image task service. */
+
+import { Button } from "@tomako/ui/button";
+import { RadioGroup, RadioGroupItem } from "@tomako/ui/radio-group";
+
+import type { AppStoreScreenshotAsset } from "../../../../lib/tools/app-store-screenshot-generator-schema";
+
+import type { PlatformKey } from "./types";
+
+export function AssetImage({
+  asset,
+  alt,
+  className,
+}: {
+  asset: AppStoreScreenshotAsset;
+  alt: string;
+  className: string;
+}) {
+  const style = {
+    aspectRatio: `${asset.width} / ${asset.height}`,
+  };
+
+  if (asset.imageUrl) {
+    return <img src={asset.imageUrl} alt={alt} className={className} style={style} />;
+  }
+
+  return (
+    <div
+      className={`${className} overflow-hidden [&_svg]:block [&_svg]:h-full [&_svg]:w-full`}
+      style={style}
+      role="img"
+      aria-label={alt}
+      dangerouslySetInnerHTML={{ __html: asset.svg ?? "" }}
+    />
+  );
+}
+
+export function StorePlatformGroup({
+  label,
+  options,
+  selected,
+  labelFor,
+  onSelect,
+}: {
+  label: string;
+  options: readonly PlatformKey[];
+  selected: PlatformKey;
+  labelFor: (key: PlatformKey) => string;
+  onSelect: (key: PlatformKey) => void;
+}) {
+  return (
+    <div className="min-w-0 max-w-full">
+      <p className="mb-3 text-[14px] font-semibold text-[#111111]">{label}</p>
+      <RadioGroup
+        className="grid grid-cols-2 gap-2"
+        value={selected}
+        onValueChange={(value) => onSelect(value as PlatformKey)}
+      >
+        {options.map((option) => (
+          <StorePlatformOption
+            key={option}
+            active={selected === option}
+            label={labelFor(option)}
+            value={option}
+          />
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+export function StorePlatformOption({
+  active,
+  label,
+  value,
+}: {
+  active: boolean;
+  label: string;
+  value: PlatformKey;
+}) {
+  const id = `app-store-screenshot-platform-${value}`;
+
+  return (
+    <div className="relative min-w-0">
+      <RadioGroupItem id={id} value={value} className="peer sr-only" />
+      <label
+        htmlFor={id}
+        className={`relative flex min-h-[96px] cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg border-2 px-2 py-3 text-center transition peer-focus-visible:ring-4 peer-focus-visible:ring-[#111111]/10 ${
+          active
+            ? "!border-[#111111] bg-[#F3F3F3] shadow-[0_16px_34px_rgba(17,17,17,0.12)]"
+            : "border-[#E5E5E5] bg-white hover:border-[#BDBDBD] hover:bg-[#FAFAFA]"
+        }`}
+      >
+        <span className="flex h-10 w-[72px] items-center justify-center">
+          <StorePlatformIcon value={value} />
+        </span>
+        <span
+          className={`mt-2 text-[12px] leading-4 ${
+            active ? "font-bold text-[#111111]" : "font-semibold text-[#111111]"
+          }`}
+        >
+          {label}
+        </span>
+      </label>
+    </div>
+  );
+}
+
+export function StorePlatformIcon({ value }: { value: PlatformKey }) {
+  return (
+    <img
+      alt=""
+      aria-hidden
+      className={`${value === "google" ? "size-[26px]" : "size-[34px]"} shrink-0 object-contain`}
+      src={
+        value === "apple"
+          ? "/context-icons/platform-app-store-icon.webp"
+          : "/context-icons/platform-google-play-icon.webp"
+      }
+    />
+  );
+}
+
+export function AssetCountGroup({
+  label,
+  options,
+  selected,
+  labelFor,
+  onSelect,
+}: {
+  label: string;
+  options: readonly number[];
+  selected: number;
+  labelFor: (key: number) => string;
+  onSelect: (key: number) => void;
+}) {
+  return (
+    <div className="min-w-0 max-w-full">
+      <p className="mb-3 text-[14px] font-semibold text-[#111111]">{label}</p>
+      <div className="grid grid-cols-5 gap-2">
+        {options.map((option) => {
+          const active = selected === option;
+          return (
+            <Button
+              key={option}
+              type="button"
+              variant="ghost"
+              aria-pressed={active}
+              style={{
+                borderColor: active ? "#111111" : "#D8D4CA",
+                borderWidth: active ? 2 : 1,
+              }}
+              onClick={() => onSelect(option)}
+              className={`h-10 min-w-0 rounded-lg border-solid px-0 text-sm font-semibold shadow-none transition focus-visible:ring-2 focus-visible:ring-[#111111]/20 ${
+                active
+                  ? "bg-[#F4F4F4] text-[#111111] shadow-[0_8px_18px_rgba(17,17,17,0.08)] hover:bg-[#F4F4F4] hover:text-[#111111]"
+                  : "bg-white text-[#555555] hover:bg-[#FAFAFA] hover:text-[#111111]"
+              }`}
+            >
+              {labelFor(option)}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function OptionGroup<T extends string>({
+  label,
+  options,
+  selected,
+  labelFor,
+  onSelect,
+}: {
+  label: string;
+  options: readonly T[];
+  selected: T;
+  labelFor: (key: T) => string;
+  onSelect: (key: T) => void;
+}) {
+  return (
+    <div className="min-w-0 max-w-full">
+      <p className="mb-3 text-[14px] font-semibold text-[#111111]">{label}</p>
+      <div className="flex max-w-full flex-wrap gap-2 overflow-hidden">
+        {options.map((option) => {
+          const active = selected === option;
+          return (
+            <Button
+              key={option}
+              type="button"
+              variant="ghost"
+              aria-pressed={active}
+              style={{
+                borderColor: active ? "#111111" : "#D8D4CA",
+                borderWidth: active ? 2 : 1,
+              }}
+              onClick={() => onSelect(option)}
+              className={`min-h-10 max-w-full whitespace-normal rounded-lg border-solid px-4 text-sm font-semibold leading-5 shadow-none transition focus-visible:ring-2 focus-visible:ring-[#111111]/20 ${
+                active
+                  ? "bg-[#F4F4F4] text-[#111111] shadow-[0_8px_18px_rgba(17,17,17,0.08)] hover:bg-[#F4F4F4] hover:text-[#111111]"
+                  : "bg-white text-[#555555] hover:bg-[#FAFAFA] hover:text-[#111111]"
+              }`}
+            >
+              {labelFor(option)}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}