@tomako/tools-runtime 0.1.0

package/src/features/tools/product-hunt-launch-planner/widget/types.ts

@@ -0,0 +1,20 @@
+import type { ProductHuntLaunchPlan } from "../../../../lib/tools/product-hunt-launch-planner-schema";
+
+export type PlannerState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; taskId: string; status: string }
+  | { phase: "error"; code: PlannerErrorCode; detail?: string; taskId?: string }
+  | { phase: "done"; plan: ProductHuntLaunchPlan; taskId: string };
+
+export type PlannerErrorCode =
+  | "validation"
+  | "weakInput"
+  | "submitFailed"
+  | "taskFailed"
+  | "resultTimeout"
+  | "wrongResultType"
+  | "invalidResultSchema"
+  | "resultWritebackMissing";
+
+export type StatusLabelKey = "ready" | "needsWork" | "manual";

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

@@ -0,0 +1,14 @@
+import { BadgeCheck, ClipboardList, SearchCheck } from "lucide-react";
+
+import { createStandardLandingContainer } from "../../../features/tools/shared/create-standard-landing-container";
+import { ProductNameGenerator } from "./widget";
+
+export const ProductNameGeneratorContainer = createStandardLandingContainer({
+  guideNamespace: "toolsPages.productNameGenerator.guide",
+  Widget: ProductNameGenerator,
+  benefitIcons: [ClipboardList, SearchCheck, BadgeCheck],
+  generationImageSrc: "/tools/product-name-generator-section-steps-8bit-v2.webp",
+  copyKeys: {
+    faqTitle: "faq",
+  },
+});

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

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const productNameGeneratorSpec: ToolSpec = {
+  slug: "product-name-generator",
+  toolType: "generator",
+  seo: {
+    "publishedAt": "2026-06-25",
+    "updatedAt": "2026-08-04",
+    "readingTime": "6 min",
+    "featured": true,
+    "ogImage": "/tools/product-name-generator-section-primary-8bit-v2.webp",
+    "cardImage": "/tools/product-name-generator-card-v5.jpg"
+  },
+  widget: {"id":"product-name-generator","mode":"custom"},
+};

package/src/features/tools/product-name-generator/widget/candidate-card.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { ChevronDown, Copy, ExternalLink, LoaderCircle } from "lucide-react";
+
+import type { ProductNameCandidate } from "../../../../lib/tools/product-name-generator-schema";
+import { cn } from "@tomako/ui/cn";
+
+import { verdictTone } from "./helpers";
+import type { DetailState, FormCopy } from "./types";
+
+export function CandidateCard({
+  candidate,
+  copy,
+  labels,
+  detail,
+  onCopy,
+  onDetail,
+}: {
+  candidate: ProductNameCandidate;
+  copy: FormCopy;
+  labels: {
+    score: string;
+    copy: string;
+    detail: string;
+    detailLoading: string;
+    detailAwaiting: string;
+    detailRunning: string;
+    domains: string;
+    checks: string;
+    coreIdea: string;
+    basics: string;
+    seo: string;
+    trademark: string;
+    risks: string;
+    nextChecks: string;
+    open: string;
+  };
+  detail: DetailState | undefined;
+  onCopy: () => void;
+  onDetail: () => void;
+}) {
+  const detailData = detail?.phase === "done" ? detail.data : null;
+  const loading = detail?.phase === "loading";
+  const loadingStatus =
+    detail?.phase === "loading" && detail.status === "AWAITING_RESULT"
+      ? labels.detailAwaiting
+      : detail?.phase === "loading"
+        ? labels.detailRunning
+        : "";
+
+  return (
+    <article className="rounded-[1.35rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_14px_34px_rgba(17,17,17,0.07)]">
+      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <div>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white">
+              {copy.stages[candidate.stage] ??
+                candidate.stage.replace(/_/g, " ")}
+            </span>
+            <span
+              className={cn(
+                "rounded-full border px-3 py-1.5 text-xs font-semibold",
+                verdictTone(candidate.verdict),
+              )}
+            >
+              {copy.verdicts[candidate.verdict] ?? candidate.verdict}
+            </span>
+            {typeof candidate.score === "number" ? (
+              <span className="rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-1.5 text-xs font-semibold text-[#555555]">
+                {labels.score} {candidate.score}
+              </span>
+            ) : null}
+          </div>
+          <h3 className="mt-4 text-3xl font-semibold leading-none text-[#111111]">
+            {candidate.name}
+          </h3>
+        </div>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={onCopy}
+            className="inline-flex size-10 items-center justify-center rounded-full border border-[#D8D4CA] bg-white text-[#111111] transition hover:-translate-y-0.5"
+            aria-label={labels.copy}
+            title={labels.copy}
+          >
+            <Copy aria-hidden className="size-4" />
+          </button>
+          <button
+            type="button"
+            onClick={onDetail}
+            disabled={loading}
+            className="inline-flex min-h-10 items-center gap-2 rounded-lg bg-[#111111] px-4 text-sm font-semibold text-white transition hover:bg-[#2A2A2A] disabled:pointer-events-none disabled:opacity-55"
+          >
+            {loading ? (
+              <LoaderCircle aria-hidden className="size-4 animate-spin" />
+            ) : (
+              <ChevronDown aria-hidden className="size-4" />
+            )}
+            {loading ? labels.detailLoading : labels.detail}
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-5 grid gap-4 md:grid-cols-2">
+        <div className="rounded-2xl bg-[#F7F6F2] p-4">
+          <p className="text-xs font-semibold uppercase text-[#777777]">
+            {labels.coreIdea}
+          </p>
+          <p className="mt-2 text-sm leading-6 text-[#3D3D3D]">
+            {candidate.coreIdea}
+          </p>
+        </div>
+        <div className="rounded-2xl bg-[#F7F6F2] p-4">
+          <p className="text-xs font-semibold uppercase text-[#777777]">
+            {labels.basics}
+          </p>
+          <p className="mt-2 text-sm leading-6 text-[#3D3D3D]">
+            {candidate.basics}
+          </p>
+        </div>
+      </div>
+
+      {candidate.domains.length || candidate.checks.length ? (
+        <div className="mt-4 grid gap-3 lg:grid-cols-2">
+          {candidate.domains.length ? (
+            <div className="rounded-2xl border border-[#E1DDD3] bg-white p-4">
+              <h4 className="text-sm font-semibold text-[#111111]">
+                {labels.domains}
+              </h4>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {candidate.domains.slice(0, 4).map((domain) => (
+                  <span
+                    key={domain.domain}
+                    className="rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-1.5 text-xs font-semibold text-[#555555]"
+                  >
+                    {domain.domain}: {domain.status}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ) : null}
+          {candidate.checks.length ? (
+            <div className="rounded-2xl border border-[#E1DDD3] bg-white p-4">
+              <h4 className="text-sm font-semibold text-[#111111]">
+                {labels.checks}
+              </h4>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {candidate.checks.slice(0, 4).map((check) => (
+                  <span
+                    key={`${check.dimension}-${check.verdict}`}
+                    className={cn(
+                      "rounded-full border px-3 py-1.5 text-xs font-semibold",
+                      verdictTone(check.verdict),
+                    )}
+                  >
+                    {check.dimension}:{" "}
+                    {copy.verdicts[check.verdict] ?? check.verdict}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {detail?.phase === "error" ? (
+        <p className="mt-4 rounded-2xl border border-[#FFD2C2] bg-[#FFF4EC] px-4 py-3 text-sm font-semibold leading-6 text-[#8A260F]">
+          {detail.message}
+        </p>
+      ) : null}
+
+      {loadingStatus ? (
+        <p className="mt-4 rounded-2xl border border-[#D8D4CA] bg-[#F8FAF0] px-4 py-3 text-sm font-semibold leading-6 text-[#555555]">
+          {loadingStatus}
+        </p>
+      ) : null}
+
+      {detailData ? (
+        <div className="mt-5 grid gap-4">
+          <div className="rounded-2xl border border-[#D8D4CA] bg-[#F8FAF0] p-4">
+            <h4 className="text-sm font-semibold text-[#111111]">
+              {detailData.summary}
+            </h4>
+            <p className="mt-2 text-sm leading-6 text-[#555555]">
+              {detailData.recommendation}
+            </p>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <div className="rounded-2xl border border-[#E1DDD3] bg-white p-4">
+              <h4 className="text-sm font-semibold text-[#111111]">
+                {labels.seo}
+              </h4>
+              <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#555555]">
+                {detailData.seo.notes.map((note) => (
+                  <li key={note}>{note}</li>
+                ))}
+              </ul>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {detailData.seo.searchLinks.slice(0, 4).map((link) => (
+                  <a
+                    key={link.url}
+                    className="inline-flex items-center gap-1 rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-1.5 text-xs font-semibold text-[#111111]"
+                    href={link.url}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {link.label}
+                    <ExternalLink aria-hidden className="size-3" />
+                  </a>
+                ))}
+              </div>
+            </div>
+
+            <div className="rounded-2xl border border-[#E1DDD3] bg-white p-4">
+              <h4 className="text-sm font-semibold text-[#111111]">
+                {labels.trademark}
+              </h4>
+              <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#555555]">
+                {detailData.trademark.notes.map((note) => (
+                  <li key={note}>{note}</li>
+                ))}
+              </ul>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {detailData.trademark.officialSources
+                  .slice(0, 4)
+                  .map((link) => (
+                    <a
+                      key={link.url}
+                      className="inline-flex items-center gap-1 rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-1.5 text-xs font-semibold text-[#111111]"
+                      href={link.url}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {link.label}
+                      <ExternalLink aria-hidden className="size-3" />
+                    </a>
+                  ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <div className="rounded-2xl border border-[#FFD2C2] bg-[#FFF4EC] p-4">
+              <h4 className="text-sm font-semibold text-[#111111]">
+                {labels.risks}
+              </h4>
+              <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#6A382A]">
+                {detailData.risks.map((risk) => (
+                  <li key={risk}>{risk}</li>
+                ))}
+              </ul>
+            </div>
+            <div className="rounded-2xl border border-[#D8D4CA] bg-white p-4">
+              <h4 className="text-sm font-semibold text-[#111111]">
+                {labels.nextChecks}
+              </h4>
+              <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#555555]">
+                {detailData.nextChecks.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <p className="rounded-2xl bg-[#F7F6F2] px-4 py-3 text-xs leading-5 text-[#666666]">
+            {detailData.disclaimer}
+          </p>
+        </div>
+      ) : null}
+    </article>
+  );
+}

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

@@ -0,0 +1,21 @@
+import type { ProductNameInput } from "../../../../lib/tools/product-name-generator-schema";
+
+export const defaultForm: ProductNameInput = {
+  workingName: "",
+  productDescription: "",
+  targetUsers: "",
+  desiredVibe: "",
+  style: "clear",
+  targetMarkets: ["globalEnglish"],
+  tlds: ["ai", "com"],
+  maxPriceUsd: 200,
+  allowFallbackDomains: true,
+  candidateNames: "",
+  finalCount: 5,
+};
+
+export const DETAIL_TASK_MAX_ATTEMPTS = 60;
+export const DETAIL_RESULT_MAX_MISSING_ATTEMPTS = 8;
+export const DETAIL_TASK_POLL_MS = 1500;
+export const DETAIL_RESULT_POLL_MS = 2500;
+export const SCREEN_LOADING_STEP_COUNT = 4;

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

@@ -0,0 +1,136 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import type { Ref } from "react";
+
+import { Button } from "@tomako/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@tomako/ui/dropdown-menu";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import {
+    PRODUCT_NAME_STYLES,
+    type ProductNameStyle,
+} from "../../../../lib/tools/product-name-generator-schema";
+import { cn } from "@tomako/ui/cn";
+
+import {
+    toolInvalidControlClass,
+    toolSelectTriggerClass,
+} from "../../../../components/tools/workspace";
+import { toggleValue } from "./helpers";
+
+export function MultiSelectMenu<T extends string>({
+  title,
+  placeholder,
+  options,
+  values,
+  labels,
+  onChange,
+  required,
+  joiner = ", ",
+  error,
+  errorId,
+  triggerRef,
+}: {
+  title: string;
+  placeholder: string;
+  options: readonly T[];
+  values: T[];
+  labels: Record<T, string>;
+  onChange: (values: T[]) => void;
+  required?: boolean;
+  joiner?: string;
+  error?: string;
+  errorId?: string;
+  triggerRef?: Ref<HTMLButtonElement>;
+}) {
+  const selectedText = values.length
+    ? values.map((value) => labels[value]).join(joiner)
+    : placeholder;
+
+  return (
+    <div>
+      <p className="mb-2 text-[14px] font-semibold leading-5 text-[#111111]">
+        {title}
+        {required ? <span aria-hidden className="ml-1 text-xs font-bold text-[#C22114]">*</span> : null}
+      </p>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            ref={triggerRef}
+            type="button"
+            variant="outline"
+            aria-invalid={Boolean(error)}
+            aria-describedby={error ? errorId : undefined}
+            className={cn(
+              toolSelectTriggerClass,
+              "h-auto min-h-11 justify-between whitespace-normal py-2.5 text-left font-normal hover:bg-white",
+              error ? toolInvalidControlClass : "",
+            )}
+          >
+            <span className="line-clamp-2 flex-1 text-left">{selectedText}</span>
+            <ChevronDown aria-hidden className="ml-3 size-4 text-[#777777]" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          className="max-h-72 w-[var(--radix-dropdown-menu-trigger-width)] overflow-auto rounded-2xl border-[#D8D4CA] bg-white p-2 shadow-[0_18px_42px_rgba(17,17,17,0.14)]"
+        >
+          {options.map((option) => (
+            <DropdownMenuCheckboxItem
+              key={option}
+              checked={values.includes(option)}
+              onCheckedChange={() =>
+                onChange(toggleValue(values, option, required))
+              }
+              onSelect={(event) => event.preventDefault()}
+              className="rounded-lg px-3 py-2 pl-8 text-sm font-medium text-[#333333] focus:bg-[#F6F7F8] focus:text-[#111111]"
+            >
+              {labels[option]}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {error ? (
+        <p id={errorId} className="mt-1.5 text-[12px] leading-5 text-[#A83A24]">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function StyleSelect({
+  value,
+  labels,
+  onChange,
+}: {
+  value: ProductNameStyle;
+  labels: Record<ProductNameStyle, string>;
+  onChange: (value: ProductNameStyle) => void;
+}) {
+  return (
+    <Select value={value} onValueChange={(next) => onChange(next as ProductNameStyle)}>
+      <SelectTrigger className={toolSelectTriggerClass}>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {PRODUCT_NAME_STYLES.map((style) => (
+          <SelectItem key={style} value={style}>
+            {labels[style]}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

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

@@ -0,0 +1,41 @@
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function toggleValue<T extends string>(
+  values: T[],
+  value: T,
+  required = false,
+): T[] {
+  if (values.includes(value)) {
+    if (required && values.length === 1) return values;
+    return values.filter((item) => item !== value);
+  }
+  return [...values, value];
+}
+
+export function verdictTone(verdict: string): string {
+  if (verdict === "green")
+    return "border-[#CFE8B5] bg-[#F3FFE5] text-[#315800]";
+  if (verdict === "light_yellow")
+    return "border-[#F0DE9A] bg-[#FFF8D7] text-[#665200]";
+  if (verdict === "yellow")
+    return "border-[#F3C779] bg-[#FFF3D8] text-[#794A00]";
+  if (verdict === "orange")
+    return "border-[#F1AB8E] bg-[#FFF0E8] text-[#8A260F]";
+  if (verdict === "red") return "border-[#F2A6A6] bg-[#FFF0F0] text-[#8A1414]";
+  return "border-[#D8D4CA] bg-white text-[#555555]";
+}
+
+export function screenLoadingStepIndex(status: string): number {
+  if (status === "PENDING") return 0;
+  if (status === "STREAMING") return 1;
+  if (status === "AWAITING_INPUT" || status === "SUCCEEDED") return 2;
+  if (status === "AWAITING_RESULT") return 3;
+  return 1;
+}
+
+export function screenLoadingProgress(status: string): number {
+  const step = screenLoadingStepIndex(status);
+  return Math.min(92, 18 + step * 24);
+}

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

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