@tomako/tools-runtime 0.1.0

package/src/features/tools/pitch-deck-generator/widget/types.ts

@@ -0,0 +1,44 @@
+import type {
+    PitchDeckFundingStage,
+    PitchDeckInput,
+    PitchDeckLanguage,
+    PitchDeckOutlineSlide,
+    PitchDeckResult,
+    PitchDeckSlide,
+    PitchDeckStylePreset,
+} from "../../../../lib/tools/pitch-deck-generator-schema";
+
+export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "invalid" | "generic";
+
+export type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; status: string; taskId: string; data?: PitchDeckResult }
+  | { phase: "done"; data: PitchDeckResult; taskId: string }
+  | { phase: "error"; category: ErrorCategory; taskId?: string; previous?: PitchDeckResult };
+
+export type FormState = PitchDeckInput;
+export type FieldErrorKey = "productUrl" | "productName" | "productContext";
+export type FieldErrors = Partial<Record<FieldErrorKey, string>>;
+
+export type MergedSlide = {
+  outline: PitchDeckOutlineSlide;
+  slide?: PitchDeckSlide;
+};
+
+export type CopyMap = {
+  fundingStages: Record<PitchDeckFundingStage, string>;
+  languages: Record<PitchDeckLanguage, string>;
+  styles: Record<
+    PitchDeckStylePreset,
+    {
+      name: string;
+      summary: string;
+    }
+  >;
+};
+
+export type PackState =
+  | { phase: "idle" }
+  | { phase: "packing"; done: number; total: number }
+  | { phase: "error" };

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

@@ -0,0 +1,137 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { ProductAgreementGenerator } from "./widget";
+
+import {
+    ToolBoundarySection,
+    ToolCardGrid,
+    ToolFaqSection,
+    ToolSection,
+    ToolStandardsSection,
+    ToolTextRows,
+    type ToolBoundaryGroup,
+    type ToolFaqItem,
+    type ToolTextCard,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import { ToolImageVisual, ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+export async function ProductAgreementGeneratorContainer({
+  locale,
+  spec,
+}: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.productAgreementGenerator.guide");
+  const outputItems = t.raw("outputItems") as readonly ToolTextCard[];
+  const whyTomakoItems = t.raw("whyTomakoItems") as readonly ToolTextCard[];
+  const steps = t.raw("howToUseSteps") as readonly string[];
+  const boundaryGroups = t.raw("boundaryGroups") as readonly ToolBoundaryGroup[];
+  const guidance = t.raw("guidanceBullets") as readonly string[];
+  const useCases = t.raw("useCaseItems") as readonly ToolTextCard[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage="/tools/product-agreement-generator-hero.webp"
+      heroBackgroundAlt={t("heroImageAlt")}
+    >
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <ProductAgreementGenerator />
+      </ToolWorkspaceSection>
+
+      <section className="border-t border-[#E1DDD3] py-14 md:py-16">
+        <div className="grid gap-8 md:grid-cols-[0.92fr_1.08fr] md:items-center">
+          <div>
+            <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+              {t("outputs")}
+            </h2>
+            <p className="mt-4 text-base leading-7 text-[#555555]">{t("outputsIntro")}</p>
+          </div>
+          <ToolImageVisual
+            src="/tools/product-agreement-generator-value.webp"
+            alt={t("valueVisualAlt")}
+            wide
+          />
+        </div>
+        <div className="mt-8">
+          <ToolCardGrid items={outputItems} columns="two" />
+        </div>
+      </section>
+
+      <ToolStandardsSection
+        heading={t("whyTomako")}
+        intro={t("whyTomakoIntro")}
+        items={whyTomakoItems}
+      />
+
+      <section className="border-t border-[#E1DDD3] py-14 md:py-16">
+        <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
+          <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("howToUse")}
+          </h2>
+          <p className="max-w-lg text-sm leading-6 text-[#777777]">{t("mockNote")}</p>
+        </div>
+        <ol className="mt-7 grid gap-3 md:grid-cols-4">
+          {steps.map((item, index) => (
+            <li
+              key={item}
+              className="rounded-[1.25rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_12px_28px_rgba(17,17,17,0.05)]"
+            >
+              <span className="flex size-9 items-center justify-center rounded-full bg-[#B7FF3E] text-xs font-semibold text-[#111111]">
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <p className="mt-4 text-sm leading-6 text-[#3D3D3D]">{item}</p>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      <ToolBoundarySection
+        heading={t("boundary")}
+        intro={t("boundaryIntro")}
+        groups={boundaryGroups}
+        visual={
+          <ToolImageVisual
+            src="/tools/product-agreement-generator-boundary.webp"
+            alt={t("boundaryVisualAlt")}
+          />
+        }
+        reverse
+      />
+
+      <ToolSection
+        heading={t("resultGuidance")}
+        intro={t("resultGuidanceIntro")}
+        visual={
+          <ToolImageVisual
+            src="/tools/product-agreement-generator-review.webp"
+            alt={t("reviewVisualAlt")}
+          />
+        }
+        reverse
+      >
+        <ToolTextRows items={guidance} />
+      </ToolSection>
+
+      <ToolSection heading={t("useCases")}>
+        <ToolCardGrid items={useCases} columns="two" />
+      </ToolSection>
+
+      <ToolFaqSection heading={t("faq")} items={faqItems} />
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/gtm-readiness-checklist", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

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

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const productAgreementGeneratorSpec: ToolSpec = {
+  slug: "product-agreement-generator",
+  toolType: "generator",
+  seo: {
+    "publishedAt": "2026-06-28",
+    "updatedAt": "2026-06-30",
+    "readingTime": "6 min",
+    "featured": false,
+    "ogImage": "/tools/product-agreement-generator-hero.webp"
+  },
+  widget: {"id":"product-agreement-generator","mode":"custom"},
+};

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

@@ -0,0 +1,27 @@
+import type { ProductAgreementDocumentType } from "../../../../lib/tools/product-agreement-generator-schema";
+
+import type { AgreementTab, FormState, SupplementModule } from "./types";
+
+export const defaultForm: FormState = {
+  productName: "",
+  operatorName: "",
+  productUrl: "",
+  contactEmail: "",
+  productDescription: "",
+  productType: "saas",
+  primaryRegion: "mainlandChina",
+  dataCategories: [],
+  features: [],
+  documents: ["privacyPolicy", "termsOfService"],
+  notes: "",
+};
+
+export const agreementTabOrder: AgreementTab[] = ["starter", "privacy", "commercial"];
+
+export const agreementTabDocuments: Record<AgreementTab, ProductAgreementDocumentType[]> = {
+  starter: ["privacyPolicy", "termsOfService"],
+  privacy: ["privacyPolicy", "cookiePolicy", "dataProcessingAddendum"],
+  commercial: ["termsOfService", "accountDeletion"],
+};
+
+export const supplementModuleOrder: SupplementModule[] = ["risk", "publish", "notes"];

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

@@ -0,0 +1,218 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@tomako/ui/dropdown-menu";
+import type { ProductAgreementAgentDocument } from "../../../../lib/tools/product-agreement-generator-schema";
+import { CheckCircle2, ChevronDown, FileText } from "lucide-react";
+
+import { toggleValue } from "./helpers";
+import type { FormCopy, FormState, PreviewCopy } from "./types";
+
+export function MultiSelectMenu<T extends string>({
+  title,
+  hint,
+  placeholder,
+  joiner = ", ",
+  options,
+  values,
+  labels,
+  onChange,
+  required,
+}: {
+  title: string;
+  hint?: string;
+  placeholder: string;
+  joiner?: string;
+  options: readonly T[];
+  values: T[];
+  labels: Record<T, string>;
+  onChange: (values: T[]) => void;
+  required?: boolean;
+}) {
+  const selectedText = values.length
+    ? values.map((value) => labels[value]).join(joiner)
+    : placeholder;
+
+  return (
+    <div>
+      <div className="mb-3 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+        <p className="text-[13px] font-semibold text-[#111111]">{title}</p>
+        {hint ? <p className="text-xs leading-5 text-[#777777]">{hint}</p> : null}
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            className="h-auto min-h-12 w-full justify-between whitespace-normal rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] px-4 py-3 text-left text-[15px] font-medium text-[#111111] shadow-none hover:bg-white"
+          >
+            <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-xl px-3 py-2 pl-8 text-sm font-medium text-[#333333] focus:bg-[#F1FFD9] focus:text-[#111111]"
+            >
+              {labels[option]}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export function DocumentButton({
+  document,
+  active,
+  onClick,
+}: {
+  document: ProductAgreementAgentDocument;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      onClick={onClick}
+      className={`flex h-auto w-full items-start justify-start gap-3 whitespace-normal rounded-2xl border p-4 text-left transition ${
+        active
+          ? "border-[#111111] bg-white shadow-[0_12px_28px_rgba(17,17,17,0.08)]"
+          : "border-[#E1DDD3] bg-white/70 hover:border-[#CFC9BC]"
+      }`}
+    >
+      <span
+        className={`mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full ${
+          active ? "bg-[#B7FF3E] text-[#111111]" : "bg-[#F0ECE2] text-[#555555]"
+        }`}
+      >
+        <FileText aria-hidden className="size-4" />
+      </span>
+      <span>
+        <span className="block text-sm font-semibold leading-5 text-[#111111]">
+          {document.title}
+        </span>
+        {document.summary ? (
+          <span className="mt-1 line-clamp-2 block text-xs leading-5 text-[#666666]">
+            {document.summary}
+          </span>
+        ) : null}
+      </span>
+    </Button>
+  );
+}
+
+export function DisclosureList({
+  title,
+  items,
+  tone = "neutral",
+}: {
+  title: string;
+  items: readonly string[];
+  tone?: "neutral" | "warning";
+}) {
+  if (items.length === 0) return null;
+
+  return (
+    <details
+      className={`rounded-[1.25rem] border p-4 ${
+        tone === "warning"
+          ? "border-[#FFD2C2] bg-[#FFF4EC]"
+          : "border-[#D8D4CA] bg-white"
+      }`}
+    >
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold text-[#111111]">
+        <span>{title}</span>
+        <span className="rounded-full bg-white px-2 py-0.5 text-xs text-[#777777]">
+          {items.length}
+        </span>
+      </summary>
+      <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#555555]">
+        {items.map((item) => (
+          <li key={item} className="flex gap-2">
+            <CheckCircle2
+              aria-hidden
+              className={`mt-1 size-4 shrink-0 ${
+                tone === "warning" ? "text-[#B44721]" : "text-[#5A7F10]"
+              }`}
+            />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+}
+
+export function AgreementInputOutputPreview({
+  form,
+  copy,
+  preview,
+  joiner,
+}: {
+  form: FormState;
+  copy: FormCopy;
+  preview: PreviewCopy;
+  joiner: string;
+}) {
+  const selectedDocuments = form.documents.length
+    ? form.documents.map((document) => copy.documentLabels[document]).join(joiner)
+    : preview.reviewItems[0];
+  const briefText = form.productDescription.trim() || preview.briefFallback;
+
+  return (
+    <aside className="rounded-[1.5rem] border border-[#D8D4CA] bg-[#F7F6F2] p-5">
+      <div className="grid gap-4">
+        <div className="rounded-[1.25rem] border border-[#E1DDD3] bg-white p-4">
+          <p className="text-xs font-semibold uppercase tracking-[0.06em] text-[#777777]">
+            {preview.beforeTitle}
+          </p>
+          <h3 className="mt-4 text-xl font-semibold leading-tight text-[#111111]">
+            {form.productName.trim() || preview.productFallback}
+          </h3>
+          <div className="mt-4 grid gap-2 text-sm leading-6 text-[#555555]">
+            <p>{copy.productTypes[form.productType]}</p>
+            <p>{copy.regions[form.primaryRegion]}</p>
+            <p className="line-clamp-3">{briefText}</p>
+          </div>
+        </div>
+
+        <div className="rounded-[1.25rem] border border-[#DCE9CA] bg-[#F7FFE9] p-4">
+          <p className="text-xs font-semibold uppercase tracking-[0.06em] text-[#5A7F10]">
+            {preview.afterTitle}
+          </p>
+          <div className="mt-4 grid gap-3">
+            <div className="rounded-2xl bg-white px-4 py-3 text-sm font-semibold leading-6 text-[#111111]">
+              {selectedDocuments}
+            </div>
+            <div className="grid gap-2">
+              {preview.reviewItems.slice(1).map((item) => (
+                <span
+                  key={item}
+                  className="rounded-full border border-[#DCE9CA] bg-white px-3 py-2 text-xs font-semibold text-[#555555]"
+                >
+                  {item}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,68 @@
+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 isValidEmail(value: string): boolean {
+  return !value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+
+export function formatStatus(status: string): string {
+  return status.replace(/_/g, " ").toLowerCase();
+}
+
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function createMessageId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+export function normalizeInput(value: string): string {
+  return value.trim().replace(/\s+/g, " ").toLowerCase();
+}
+
+export function compactInput(value: string): string {
+  return value.trim().replace(/\s+/g, "").toLowerCase();
+}
+
+export function isMostlyNumeric(value: string): boolean {
+  return /^[\d._-]+$/.test(compactInput(value));
+}
+
+export function isPlaceholderProductName(value: string, placeholder: string): boolean {
+  const normalized = normalizeInput(value);
+  const normalizedPlaceholder = normalizeInput(placeholder.replace(/^例如\s*/i, ""));
+  const placeholderNames = new Set([
+    normalizedPlaceholder,
+    "tomako launch",
+    "example",
+    "example app",
+    "demo",
+    "demo app",
+    "test",
+    "test app",
+    "产品名称",
+    "测试",
+    "测试产品",
+  ]);
+
+  return isMostlyNumeric(value) || placeholderNames.has(normalized);
+}
+
+export function isWeakProductDescription(value: string, placeholder: string): boolean {
+  const normalized = normalizeInput(value);
+  const compact = compactInput(value).replace(/[，。,.!?！？、:：;；"'“”‘’()（）[\]{}]/g, "");
+  const normalizedPlaceholder = normalizeInput(placeholder.replace(/^例如[:：]?\s*/i, ""));
+
+  if (normalized === normalizedPlaceholder) return true;
+  if (isMostlyNumeric(value)) return true;
+  if (/^(test|demo|example|测试|占位|随便)+$/i.test(compact)) return true;
+  if (compact.length < 10) return true;
+
+  return new Set([...compact]).size <= 2;
+}

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

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