@tomako/tools-runtime 0.1.0

package/src/features/tools/product-poster-generator/product-poster-generator.container.tsx

@@ -0,0 +1,14 @@
+import { Download, Palette, ShieldCheck } from "lucide-react";
+
+import { createStandardLandingContainer } from "../../../features/tools/shared/create-standard-landing-container";
+import { ProductPosterGenerator } from "./widget";
+
+export const ProductPosterGeneratorContainer = createStandardLandingContainer({
+  guideNamespace: "toolsPages.productPosterGenerator.guide",
+  Widget: ProductPosterGenerator,
+  benefitIcons: [Download, Palette, ShieldCheck],
+  generationImageSrc: "/tools/product-poster-generator-section-steps-8bit-v2.webp",
+  copyKeys: {
+    faqTitle: "faq",
+  },
+});

package/src/features/tools/product-poster-generator/product-poster-generator.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const productPosterGeneratorSpec: ToolSpec = {
+  slug: "product-poster-generator",
+  toolType: "generator",
+  riskLevel: "medium",
+  seo: {
+    "publishedAt": "2026-06-29",
+    "updatedAt": "2026-07-13",
+    "readingTime": "6 min",
+    "featured": false,
+    "ogImage": "/tools/product-poster-generator-section-primary-8bit-v2.webp"
+  },
+  widget: {"id":"product-poster-generator","mode":"custom"},
+};

package/src/features/tools/product-poster-generator/widget/constants.ts

@@ -0,0 +1,125 @@
+import type { ProductPosterFormat } from "../../../../lib/tools/product-poster-generator-schema";
+
+import type {
+    BrandColorPreset,
+    ErrorKind,
+    FormState,
+    PosterIntentOption,
+} from "./types";
+
+export const errorCopyKeys: Record<ErrorKind, { title: string }> = {
+  input: { title: "errorTitle" },
+  submit: { title: "submitErrorTitle" },
+  task: { title: "taskErrorTitle" },
+  result: { title: "resultErrorTitle" },
+  schema: { title: "unreadableResultTitle" },
+  timeout: { title: "timeoutErrorTitle" },
+};
+
+export const defaultForm: FormState = {
+  productName: "",
+  productUrl: "",
+  productContext: "",
+  audience: "",
+  targetScene: "featureLaunch",
+  primaryCta: "Try it free",
+  channel: "socialLaunch",
+  format: "multiSize",
+  style: "cleanSaas",
+  brandColors: "",
+  screenshotNames: [],
+  screenshotDataUrls: [],
+  logoName: undefined,
+  logoDataUrl: undefined,
+};
+
+export const POSTER_FORMAT_OPTIONS: readonly ProductPosterFormat[] = [
+  "multiSize",
+  "ultrawide",
+  "landscape",
+  "landscape32",
+  "landscape43",
+  "square",
+  "portrait34",
+  "portrait",
+  "story",
+] as const;
+
+export const POSTER_INTENT_OPTIONS: readonly PosterIntentOption[] = [
+  {
+    id: "websiteConversion",
+    targetScene: "landingPage",
+    channel: "websiteHero",
+  },
+  {
+    id: "websiteFeature",
+    targetScene: "featureLaunch",
+    channel: "websiteHero",
+  },
+  {
+    id: "socialLaunch",
+    targetScene: "featureLaunch",
+    channel: "socialLaunch",
+  },
+  {
+    id: "socialContent",
+    targetScene: "contentCover",
+    channel: "socialLaunch",
+  },
+  {
+    id: "paidAcquisition",
+    targetScene: "paidCampaign",
+    channel: "paidAd",
+  },
+  {
+    id: "paidRetargeting",
+    targetScene: "paidCampaign",
+    channel: "paidAd",
+  },
+  {
+    id: "productHuntLaunch",
+    targetScene: "communityLaunch",
+    channel: "productHunt",
+  },
+  {
+    id: "ogBlogCover",
+    targetScene: "contentCover",
+    channel: "ogImage",
+  },
+] as const;
+
+export const BRAND_COLOR_PRESETS: readonly BrandColorPreset[] = [
+  {
+    id: "auto",
+    value: "",
+    colors: ["#F7F6F2", "#111111", "#DCD7CB"],
+  },
+  {
+    id: "tomako",
+    value: "#0E4A43, #F36D4F, #DCEB4C",
+    colors: ["#0E4A43", "#F36D4F", "#DCEB4C"],
+  },
+  {
+    id: "ocean",
+    value: "#123C3F, #2F716A, #CFE4DD",
+    colors: ["#123C3F", "#2F716A", "#CFE4DD"],
+  },
+  {
+    id: "violet",
+    value: "#362F78, #8B5CF6, #F4D35E",
+    colors: ["#362F78", "#8B5CF6", "#F4D35E"],
+  },
+  {
+    id: "mono",
+    value: "#111111, #7A7A7A, #F0EEE8",
+    colors: ["#111111", "#7A7A7A", "#F0EEE8"],
+  },
+  {
+    id: "sunset",
+    value: "#3A2A1F, #E76F51, #F4A261",
+    colors: ["#3A2A1F", "#E76F51", "#F4A261"],
+  },
+] as const;
+
+export const TASK_POLL_INTERVAL_MS = 2500;
+export const MAX_TASK_POLL_ATTEMPTS = 120;

package/src/features/tools/product-poster-generator/widget/form-controls.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { ImagePlus, X } from "lucide-react";
+import type { ChangeEvent, ReactNode, RefObject } from "react";
+
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { cn } from "@tomako/ui/cn";
+
+import {
+    ToolField,
+    toolSelectTriggerClass,
+} from "../../../../components/tools/workspace";
+import { BRAND_COLOR_PRESETS } from "./constants";
+import type { BrandColorPreset, BrandColorPresetId } from "./types";
+
+export function SelectField<T extends string>({
+  label,
+  hint,
+  required,
+  value,
+  options,
+  onValueChange,
+}: {
+  label: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  value: T;
+  options: readonly { value: T; label: string }[];
+  onValueChange: (value: string) => void;
+}) {
+  return (
+    <ToolField label={label} hint={hint} required={required}>
+      <Select value={value} onValueChange={onValueChange}>
+        <SelectTrigger className={toolSelectTriggerClass}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </ToolField>
+  );
+}
+
+export function ImagePreview({ src }: { src?: string }) {
+  return (
+    <span
+      aria-hidden
+      className="block size-full bg-cover bg-center"
+      style={src ? { backgroundImage: `url(${src})` } : undefined}
+    />
+  );
+}
+
+export function ScreenshotUploadField({
+  inputRef,
+  label,
+  hint,
+  chooseLabel,
+  selectedLabel,
+  removeLabel,
+  names,
+  previews,
+  onChoose,
+  onChange,
+  onRemove,
+}: {
+  inputRef: RefObject<HTMLInputElement | null>;
+  label: string;
+  hint: string;
+  chooseLabel: string;
+  selectedLabel: string;
+  removeLabel: string;
+  names: string[];
+  previews: string[];
+  onChoose: () => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onRemove: (index: number) => void;
+}) {
+  return (
+    <ToolField label={label} hint={hint}>
+      <input
+        ref={inputRef}
+        accept="image/*"
+        className="hidden"
+        multiple
+        type="file"
+        onChange={onChange}
+      />
+      {names.length ? (
+        <div className="rounded-lg border border-[#E4E9F1] bg-[#F8FAFC] p-3">
+          <div className="mb-3 flex items-center justify-between gap-3">
+            <span className="text-sm font-semibold text-[#111111]">{selectedLabel}</span>
+            <button
+              className="text-xs font-semibold text-[#111111] underline-offset-4 hover:underline"
+              type="button"
+              onClick={onChoose}
+            >
+              {chooseLabel}
+            </button>
+          </div>
+          <div className="grid max-h-48 grid-cols-2 gap-2 overflow-y-auto pr-1">
+            {names.map((name, index) => (
+              <div
+                key={`${name}-${index}`}
+                className="group relative min-w-0 overflow-hidden rounded-lg border border-[#E4E9F1] bg-white"
+              >
+                <div
+                  aria-hidden
+                  className="aspect-[4/3] bg-[#F4F7FB] bg-cover bg-center"
+                  style={previews[index] ? { backgroundImage: `url(${previews[index]})` } : undefined}
+                />
+                <div className="flex items-center justify-between gap-2 px-2 py-2">
+                  <span className="truncate text-xs font-medium text-[#555555]">{name}</span>
+                  <button
+                    aria-label={removeLabel}
+                    className="grid size-7 shrink-0 place-items-center rounded-md border border-[#E4E9F1] bg-white text-[#111111] hover:bg-[#F6F7F8]"
+                    type="button"
+                    onClick={() => onRemove(index)}
+                  >
+                    <X aria-hidden className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <button
+          className="group flex min-h-[128px] w-full max-w-full flex-col items-center justify-center rounded-lg border border-dashed !border-[#E4E9F1] bg-[#FAFBFD] p-4 text-center outline-none transition hover:!border-[#CDD6E3] hover:bg-white focus-visible:!border-[#111111] focus-visible:ring-4 focus-visible:ring-[#111111]/10"
+          type="button"
+          onClick={onChoose}
+        >
+          <span className="flex size-10 items-center justify-center rounded-lg bg-[#F4F7FB] text-[#111111]">
+            <ImagePlus aria-hidden className="size-4" />
+          </span>
+          <span className="mt-3 max-w-sm text-sm font-semibold leading-5 text-[#111111]">
+            {chooseLabel}
+          </span>
+          <span className="mt-2 max-w-xs text-xs leading-5 text-[#555555]">{hint}</span>
+        </button>
+      )}
+    </ToolField>
+  );
+}
+
+export function ColorPaletteField({
+  label,
+  hint,
+  labels,
+  value,
+  onChange,
+}: {
+  label: string;
+  hint?: string;
+  labels: Record<BrandColorPresetId, string>;
+  value: BrandColorPresetId;
+  onChange: (preset: BrandColorPreset) => void;
+}) {
+  return (
+    <ToolField label={label} hint={hint}>
+      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        {BRAND_COLOR_PRESETS.map((preset) => {
+          const active = preset.id === value;
+          return (
+            <button
+              key={preset.id}
+              type="button"
+              className={cn(
+                "flex items-center justify-between gap-3 rounded-lg border bg-white px-3 py-2 text-left text-xs font-semibold text-[#242424] outline-none transition focus-visible:ring-[3px] focus-visible:ring-[#111111]/20",
+                active
+                  ? "border-[#111111] bg-[#F4F7FB] shadow-sm"
+                  : "border-[#E4E9F1] hover:border-[#BDB6AA]",
+              )}
+              aria-pressed={active}
+              onClick={() => onChange(preset)}
+            >
+              <span>{labels[preset.id]}</span>
+              <span className="flex overflow-hidden rounded-full border border-black/10" aria-hidden>
+                {preset.colors.map((color) => (
+                  <span
+                    key={color}
+                    className="size-5"
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </ToolField>
+  );
+}

package/src/features/tools/product-poster-generator/widget/helpers.ts

@@ -0,0 +1,155 @@
+import type { useTranslations } from "../../../../i18n/client";
+import type {
+    ProductPosterChannel,
+    ProductPosterGenerationResult,
+    ProductPosterGeneratorInput,
+    ProductPosterScene,
+} from "../../../../lib/tools/product-poster-generator-schema";
+
+import { BRAND_COLOR_PRESETS, POSTER_INTENT_OPTIONS } from "./constants";
+import type {
+    ErrorKind,
+    GeneratedPoster,
+    ResultState
+} from "./types";
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+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 function getSafeErrorMessage(_error: unknown, fallback: string) {
+  return fallback;
+}
+
+export function getPosterIntentId({
+  targetScene,
+  channel,
+}: {
+  targetScene: ProductPosterScene;
+  channel: ProductPosterChannel;
+}) {
+  return (
+    POSTER_INTENT_OPTIONS.find(
+      (option) => option.targetScene === targetScene && option.channel === channel,
+    )?.id ?? "websiteConversion"
+  );
+}
+
+export function getBrandColorPresetId(value?: string | null) {
+  return (
+    BRAND_COLOR_PRESETS.find((preset) => preset.value === (value?.trim() ?? ""))?.id ?? "auto"
+  );
+}
+
+export function slugifyFileName(value: string) {
+  return (
+    value
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 60) || "product-poster"
+  );
+}
+
+export function sizeToDimensions(size: string) {
+  const [width, height] = size.split("x").map((part) => Number(part));
+  return {
+    width: Number.isFinite(width) ? width : 1024,
+    height: Number.isFinite(height) ? height : 1024,
+  };
+}
+
+export function toGeneratedPoster({
+  result,
+  taskId,
+  input,
+  settingsSummary,
+}: {
+  result: ProductPosterGenerationResult;
+  taskId: string;
+  input: ProductPosterGeneratorInput;
+  settingsSummary: string;
+}): GeneratedPoster {
+  const dimensions =
+    result.image.width && result.image.height
+      ? { width: result.image.width, height: result.image.height }
+      : sizeToDimensions(result.image.size ?? "1024x1024");
+
+  return {
+    taskId,
+    imageTaskId: result.image.imageTaskId,
+    imageUrl: result.image.imageUrl,
+    width: dimensions.width,
+    height: dimensions.height,
+    fileBaseName: slugifyFileName(input.productName),
+    settingsSummary,
+    summary: result.summary,
+    reviewChecklist: result.reviewChecklist,
+    limitations: result.limitations,
+    assets: result.assets,
+    screenshotCount: input.screenshotNames.length,
+  };
+}
+
+export function getPosterResultError(
+  errorCode?: string,
+): { kind: ErrorKind; key: "pollFailed" | "imageFailed" | "unreadableResult" } {
+  if (errorCode === "wrong_result_type" || errorCode === "invalid_result_schema") {
+    return { kind: "schema", key: "unreadableResult" };
+  }
+  if (errorCode === "task_failed") {
+    return { kind: "task", key: "imageFailed" };
+  }
+  return { kind: "result", key: "pollFailed" };
+}
+
+export function loadingStepIndex(phase: ResultState["phase"], status?: string) {
+  if (phase === "submitting") return 0;
+  if (status === "PENDING") return 0;
+  if (status === "STREAMING") return 1;
+  if (status === "AWAITING_INPUT" || status === "SUCCEEDED" || status === "AWAITING_RESULT") {
+    return 2;
+  }
+  return 1;
+}
+
+export function loadingProgress(phase: ResultState["phase"], status?: string) {
+  return Math.min(92, 18 + loadingStepIndex(phase, status) * 24);
+}
+
+export function getAssetLine(
+  assets: ProductPosterGenerationResult["assets"] | undefined,
+  localScreenshotCount: number,
+  t: ReturnType<typeof useTranslations>,
+) {
+  const logo = assets?.exactLogoApplied
+    ? t("assetLogoApplied")
+    : assets?.logoReferenceImageUrl || assets?.logoName
+      ? t("assetLogoUploadedNotApplied")
+      : t("assetLogoMissing");
+  const screenshotReferenceCount =
+    assets?.imageModelReferenceCount ?? Math.max((assets?.referenceImageCount ?? 0) - 1, 0);
+  const screenshotInventoryCount = assets?.screenshotNames?.length ?? localScreenshotCount;
+  const screenshots = screenshotReferenceCount
+    ? t("assetScreenshotReferenceCount", { count: screenshotReferenceCount })
+    : screenshotInventoryCount
+      ? t("assetScreenshotInventoryOnly", { count: screenshotInventoryCount })
+      : t("assetScreenshotMissing");
+  const finalLayer =
+    assets?.exactLogoApplied && assets.originalGeneratedImageUrl ? ` / ${t("assetFinalLogoLayer")}` : "";
+  return `${logo} / ${screenshots}${finalLayer}`;
+}

package/src/features/tools/product-poster-generator/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const ProductPosterGenerator = dynamic(() =>
+  import("./product-poster-generator").then((module) => module.ProductPosterGenerator),
+);