@tomako/tools-runtime 0.1.3 → 0.1.5

package/package.json

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

package/src/features/tools/app-icon-resizer/app-icon-resizer.spec.ts

@@ -6,7 +6,7 @@ export const appIconResizerSpec: ToolSpec = {
   riskLevel: "low",
   seo: {
     "publishedAt": "2026-06-30",
-    "updatedAt": "2026-08-19",
+    "updatedAt": "2026-08-30",
     "readingTime": "5 min",
     "featured": false,
     "ogImage": "/tools/app-icon-resizer-section-primary-8bit-v3.webp"

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

@@ -15,7 +15,6 @@ import { ToolCta } from "../shared/tool-cta";
 import { ToolGuideSection, ToolImageVisual, ToolWorkspaceSection } from "../shared/tool-guide-section";
 import { ToolPageShell } from "../shared/tool-page-shell";
 import type { ToolPageProps } from "../types";
-import { ImgConfig } from "./config";
 
 export async function AppStoreScreenshotGeneratorContainer({
   locale,
@@ -30,14 +29,13 @@ export async function AppStoreScreenshotGeneratorContainer({
     <ToolPageShell
       locale={locale}
       spec={spec}
-      heroVariant="immersive"
-      heroBackgroundImage={ImgConfig.heroBgImg}
-      heroBackgroundAlt={t("heroVisualAlt")}
-      heroBackgroundColor="#F7F6F2"
-      heroBackgroundImageFrameClassName="inset-y-16 left-1/2 w-[calc(100%-2.5rem)] max-w-[1472px] -translate-x-1/2 sm:w-[calc(100%-4rem)] md:inset-y-24"
-      heroBackgroundImageSizes="(min-width: 1536px) 1472px, (min-width: 640px) calc(100vw - 4rem), calc(100vw - 2.5rem)"
+      showDefaultHeader={false}
     >
-      <ToolWorkspaceSection heading={t("workspaceHeading")} hint={t("workspaceHint")}>
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        headingLevel="h1"
+      >
         <AppStoreScreenshotGenerator />
       </ToolWorkspaceSection>
 

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

@@ -5,7 +5,7 @@ export const appStoreScreenshotGeneratorSpec: ToolSpec = {
   toolType: "generator",
   seo: {
     "publishedAt": "2026-06-28",
-    "updatedAt": "2026-07-03",
+    "updatedAt": "2026-08-30",
     "readingTime": "5 min",
     "featured": false,
     "ogImage": "/tools/app-store-screenshot-generator-value.webp"

package/src/features/tools/cold-start-channel-selector/cold-start-channel-selector.spec.ts

@@ -6,7 +6,7 @@ export const coldStartChannelSelectorSpec: ToolSpec = {
   riskLevel: "medium",
   seo: {
     publishedAt: "2026-06-29",
-    updatedAt: "2026-08-03",
+    updatedAt: "2026-08-30",
     readingTime: "7 min",
     featured: false,
     ogImage: "/tools/cold-start-channel-selector-hero.webp",

package/src/features/tools/competitor-analysis/competitor-analysis.container.tsx

@@ -46,7 +46,6 @@ function ImagePlaceholder({
 
 export async function CompetitorAnalysisContainer({ locale, spec }: ToolPageProps) {
   const t = await createToolGuideTranslator(locale, "toolsPages.competitorAnalysis.guide");
-  const sharedT = await createToolGuideTranslator(locale, "toolsPages.shared");
 
   const steps = t.raw("howToUseSteps") as readonly string[];
   const guidance = t.raw("guidanceBullets") as readonly string[];
@@ -58,13 +57,13 @@ export async function CompetitorAnalysisContainer({ locale, spec }: ToolPageProp
     <ToolPageShell
       locale={locale}
       spec={spec}
-      heroVariant="showcase"
-      heroVisual={<ImagePlaceholder label={t("visualAlt.hero")} className="max-w-4xl" />}
+      showDefaultHeader={false}
     >
       <ToolWorkspaceSection
-        heading={sharedT("toolWorkspace")}
-        hint={sharedT("toolWorkspaceHint")}
-        badge={sharedT("keywords")}
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+        headingLevel="h1"
       >
         <CompetitorAnalysis />
       </ToolWorkspaceSection>

package/src/features/tools/competitor-analysis/competitor-analysis.spec.ts

@@ -6,7 +6,7 @@ export const competitorAnalysisSpec: ToolSpec = {
   riskLevel: "medium",
   seo: {
     "publishedAt": "2026-06-29",
-    "updatedAt": "2026-06-29",
+    "updatedAt": "2026-08-30",
     "readingTime": "6 min",
     "featured": false,
     "ogImage": "/tools/competitor-radar-hero.webp"

package/src/features/tools/disclaimer-generator/disclaimer-generator.package.ts

@@ -34,7 +34,7 @@ export const disclaimerGeneratorPackage: ToolPackage = {
     riskLevel: "high",
     keywordEvidence: "docs/seo-keyword-briefs/disclaimer-generator.md",
     seo: {
-      updatedAt: "2026-07-10",
+      updatedAt: "2026-08-30",
       readingTime: "6 min",
       ogImage: "/tools/disclaimer-generator-section-primary.webp",
     },

package/src/features/tools/email-template-generator/email-template-generator.container.tsx

@@ -3,216 +3,88 @@ import { createToolGuideTranslator } from "../shared/tool-message-translator";
 import { EmailTemplateGenerator } from "./widget";
 
 import {
-    ToolCardGrid,
-    ToolFaqSection,
+  ToolBoundarySection,
+  ToolFaqSection,
+  ToolSection,
+  ToolStandardsSection,
+  ToolTextRows,
+  ToolUseCasesSection,
+  ToolValueSection,
+  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";
 
-type TextCard = {
-  title: string;
-  body: string;
-};
-
-type BoundaryGroup = {
-  title: string;
-  items: readonly string[];
-};
-
-type FaqItem = {
-  question: string;
-  answer: string;
-};
-
-function OutputSection({
-  heading,
-  intro,
-  items,
-  visualAlt,
-}: {
-  heading: string;
-  intro: string;
-  items: readonly TextCard[];
-  visualAlt: string;
-}) {
-  return (
-    <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">
-            {heading}
-          </h2>
-          <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-        </div>
-        <ToolImageVisual src="/tools/email-template-generator-value.webp" alt={visualAlt} wide />
-      </div>
-      <div className="mt-8">
-        <ToolCardGrid items={items} />
-      </div>
-    </section>
-  );
-}
-
-function StandardsSection({
-  heading,
-  intro,
-  items,
-}: {
-  heading: string;
-  intro: string;
-  items: readonly TextCard[];
-}) {
-  return (
-    <section className="border-t border-[#E1DDD3] py-14 md:py-16">
-      <div className="max-w-3xl">
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {heading}
-        </h2>
-        <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-      </div>
-      <div className="mt-7">
-        <ToolCardGrid items={items} />
-      </div>
-    </section>
-  );
-}
-
-function BoundarySection({
-  heading,
-  intro,
-  groups,
-  visualAlt,
-}: {
-  heading: string;
-  intro: string;
-  groups: readonly BoundaryGroup[];
-  visualAlt: string;
-}) {
-  return (
-    <section className="grid gap-8 border-t border-[#E1DDD3] py-14 md:grid-cols-[0.98fr_1.02fr] md:items-center md:py-16">
-      <ToolImageVisual src="/tools/email-template-generator-support.webp" alt={visualAlt} />
-      <div>
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {heading}
-        </h2>
-        <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-        <div className="mt-6 grid gap-3">
-          {groups.map((group) => (
-            <article
-              key={group.title}
-              className="rounded-[1.25rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_12px_28px_rgba(17,17,17,0.05)]"
-            >
-              <h3 className="text-base font-semibold leading-tight text-[#111111]">
-                {group.title}
-              </h3>
-              <ul className="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-[#555555]">
-                {group.items.map((item) => (
-                  <li key={item}>{item}</li>
-                ))}
-              </ul>
-            </article>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function GuidanceSection({
-  heading,
-  intro,
-  items,
-  visualAlt,
-}: {
-  heading: string;
-  intro: string;
-  items: readonly string[];
-  visualAlt: string;
-}) {
-  return (
-    <section className="grid gap-8 border-t border-[#E1DDD3] py-14 md:grid-cols-[1fr_1fr] md:items-center md:py-16">
-      <div>
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {heading}
-        </h2>
-        <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-        <div className="mt-6 space-y-4">
-          {items.map((item) => (
-            <p key={item} className="text-base leading-7 text-[#3D3D3D]">
-              {item}
-            </p>
-          ))}
-        </div>
-      </div>
-      <ToolImageVisual src="/tools/email-template-generator-export.webp" alt={visualAlt} />
-    </section>
-  );
-}
-
 export async function EmailTemplateGeneratorContainer({ locale, spec }: ToolPageProps) {
   const t = await createToolGuideTranslator(locale, "toolsPages.emailTemplateGenerator.guide");
-  const outputItems = t.raw("outputItems") as readonly TextCard[];
-  const standardsItems = t.raw("standardsItems") as readonly TextCard[];
-  const boundaryGroups = t.raw("boundaryGroups") as readonly BoundaryGroup[];
+  const outputItems = t.raw("outputItems") as readonly ToolTextCard[];
+  const standardsItems = t.raw("standardsItems") as readonly ToolTextCard[];
+  const boundaryGroups = t.raw("boundaryGroups") as readonly ToolBoundaryGroup[];
   const guidance = t.raw("guidanceItems") as readonly string[];
-  const useCases = t.raw("useCaseItems") as readonly TextCard[];
-  const faqItems = t.raw("faqItems") as readonly FaqItem[];
+  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/email-template-generator-hero.webp"
-      heroBackgroundAlt={t("heroImageAlt")}
-    >
+    <ToolPageShell locale={locale} spec={spec} showDefaultHeader={false}>
       <ToolWorkspaceSection
         heading={t("workspaceHeading")}
         hint={t("workspaceHint")}
+        headingLevel="h1"
       >
         <EmailTemplateGenerator />
       </ToolWorkspaceSection>
 
-      <OutputSection
+      <ToolValueSection
         heading={t("outputs")}
         intro={t("outputsIntro")}
         items={outputItems}
-        visualAlt={t("valueVisualAlt")}
+        visual={
+          <ToolImageVisual
+            src="/tools/email-template-generator-value.webp"
+            alt={t("valueVisualAlt")}
+            wide
+          />
+        }
       />
 
-      <StandardsSection
+      <ToolStandardsSection
         heading={t("standards")}
         intro={t("standardsIntro")}
         items={standardsItems}
       />
 
-      <BoundarySection
+      <ToolBoundarySection
         heading={t("boundary")}
         intro={t("boundaryIntro")}
         groups={boundaryGroups}
-        visualAlt={t("supportVisualAlt")}
+        reverse
+        visual={
+          <ToolImageVisual
+            src="/tools/email-template-generator-support.webp"
+            alt={t("supportVisualAlt")}
+          />
+        }
       />
 
-      <GuidanceSection
+      <ToolSection
         heading={t("guidance")}
         intro={t("guidanceIntro")}
-        items={guidance}
-        visualAlt={t("exportVisualAlt")}
-      />
-
-      <section className="border-t border-[#E1DDD3] py-14 md:py-16">
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {t("useCases")}
-        </h2>
-        <div className="mt-7">
-          <ToolCardGrid items={useCases} />
-        </div>
-      </section>
+        visual={
+          <ToolImageVisual
+            src="/tools/email-template-generator-export.webp"
+            alt={t("exportVisualAlt")}
+          />
+        }
+      >
+        <ToolTextRows items={guidance} />
+      </ToolSection>
 
+      <ToolUseCasesSection heading={t("useCases")} items={useCases} />
       <ToolFaqSection heading={t("faq")} items={faqItems} />
-
       <ToolCta
         heading={t("ctaTitle")}
         hint={t("ctaHint")}

package/src/features/tools/email-template-generator/email-template-generator.spec.ts

@@ -5,7 +5,7 @@ export const emailTemplateGeneratorSpec: ToolSpec = {
   toolType: "generator",
   seo: {
     "publishedAt": "2026-06-29",
-    "updatedAt": "2026-06-29",
+    "updatedAt": "2026-08-30",
     "readingTime": "6 min",
     "featured": false,
     "ogImage": "/tools/email-template-generator-hero.webp"

package/src/features/tools/pitch-deck-generator/pitch-deck-library.tsx

@@ -20,20 +20,23 @@ import {
 import { useLocale, useTranslations } from "../../../i18n/client";
 import { isZhRouteLocale } from "../../../i18n/locale-fallback";
 import type { AppLocale } from "../../../i18n/locale";
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
 
 function deckTitle(entry: PitchDeckLibraryEntry, roundLabel: string): string {
   return `${entry.company} ${roundLabel} Pitch Deck (${entry.year})`;
 }
 
 function DeckCover({ entry, alt }: { entry: PitchDeckLibraryEntry; alt: string }) {
+  const src = staticAsset(`${PITCH_DECK_LIBRARY_COVER_BASE}/${entry.slug}-cover.webp`);
   return (
     <div className="relative aspect-video w-full overflow-hidden bg-[#EEEAE0]">
       <Image
-        src={`${PITCH_DECK_LIBRARY_COVER_BASE}/${entry.slug}-cover.webp`}
+        src={src}
         alt={alt}
         fill
         sizes="(min-width: 1280px) 25vw, (min-width: 768px) 33vw, 100vw"
         className="object-cover"
+        unoptimized={isRemoteStaticAsset(src)}
       />
       <span className="absolute left-3 top-3 rounded-md bg-[#111111] px-2 py-1 text-[11px] font-semibold tracking-wide text-white">
         BP
@@ -98,21 +101,25 @@ export function PitchDeckLibrary() {
               <p className="text-sm leading-6 text-[#555555]">{activeCopy.takeaway}</p>
               {active.pages.length ? (
                 <div className="mt-4 grid gap-4">
-                  {active.pages.map((page, index) => (
+                  {active.pages.map((page, index) => {
+                    const src = staticAsset(page);
+                    return (
                     <div
                       key={page}
                       className="overflow-hidden rounded-[0.75rem] border border-[#E1DDD3] bg-[#EEEAE0]"
                     >
                       <Image
-                        src={page}
+                        src={src}
                         alt={t("pageAlt", { company: active.company, page: index + 1 })}
                         width={1440}
                         height={1080}
                         sizes="(min-width: 1024px) 960px, 100vw"
                         className="h-auto w-full"
+                        unoptimized={isRemoteStaticAsset(src)}
                       />
                     </div>
-                  ))}
+                    );
+                  })}
                 </div>
               ) : (
                 <div className="mt-4 grid gap-4">
@@ -144,7 +151,7 @@ export function PitchDeckLibrary() {
                   type="button"
                   className="min-h-9 bg-[#111111] text-white hover:bg-[#2A2A2A]"
                 >
-                  <a href={active.downloadUrl} download>
+                  <a href={staticAsset(active.downloadUrl)} download>
                     <Download className="size-4" aria-hidden />
                     {t("download")}
                   </a>

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

@@ -5,7 +5,7 @@ export const productNameGeneratorSpec: ToolSpec = {
   toolType: "generator",
   seo: {
     "publishedAt": "2026-06-25",
-    "updatedAt": "2026-08-04",
+    "updatedAt": "2026-08-30",
     "readingTime": "6 min",
     "featured": true,
     "ogImage": "/tools/product-name-generator-section-primary-8bit-v2.webp",

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

@@ -6,7 +6,7 @@ export const productPosterGeneratorSpec: ToolSpec = {
   riskLevel: "medium",
   seo: {
     "publishedAt": "2026-06-29",
-    "updatedAt": "2026-07-13",
+    "updatedAt": "2026-08-30",
     "readingTime": "6 min",
     "featured": false,
     "ogImage": "/tools/product-poster-generator-section-primary-8bit-v2.webp"

package/src/features/tools/shared/tool-guide-section.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import Image from "next/image";
 
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
+
 type VisualTone = "lime" | "blue" | "coral" | "wine";
 
 const toneStyles: Record<
@@ -171,14 +173,16 @@ export function ToolImageVisual({
   priority?: boolean;
   wide?: boolean;
 }) {
+  const resolved = staticAsset(src);
   return (
     <figure className="overflow-hidden rounded-[1.5rem]">
       <Image
-        src={src}
+        src={resolved}
         alt={alt}
         width={1672}
         height={941}
         priority={priority}
+        unoptimized={isRemoteStaticAsset(resolved)}
         sizes={
           wide
             ? "(min-width: 1024px) 1120px, 100vw"

package/src/features/tools/shared/tool-page-shell.tsx

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import { relatedToolSlugsByTool } from "../../../constants/related-tools";
 import { RelatedTools } from "../../../host/server";
 import type { AppLocale } from "../../../i18n/locale";
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
 import { resolveToolLocaleCopy } from "../../../lib/tools/resolve-tool-locale-copy";
 
 import type { ToolSpec } from "../types";
@@ -63,6 +64,9 @@ export async function ToolPageShell({
   // Full messages: public getRequestConfig omits toolsPages; client tools layout alone is not enough for RSC.
   const messages = await loadToolMessages(locale);
   const t = createToolMessageTranslator(locale, messages, "toolsPages.shared");
+  const resolvedHeroBackground = heroBackgroundImage
+    ? staticAsset(heroBackgroundImage)
+    : undefined;
 
   return (
     <div className="min-h-screen overflow-x-clip bg-white text-[#111111]">
@@ -73,28 +77,30 @@ export async function ToolPageShell({
             className="relative w-full overflow-hidden text-[#2B211A]"
             style={{
               minHeight: "min(72svh, 680px)",
-              background: heroBackgroundImage ? heroBackgroundColor : "#F4E6D8",
+              background: resolvedHeroBackground ? heroBackgroundColor : "#F4E6D8",
             }}
           >
-            {heroBackgroundImage ? (
+            {resolvedHeroBackground ? (
               <>
                 {heroBackgroundImageFrameClassName ? (
                   <div className={`absolute ${heroBackgroundImageFrameClassName}`}>
                     <Image
-                      src={heroBackgroundImage}
+                      src={resolvedHeroBackground}
                       alt={heroBackgroundAlt}
                       fill
                       priority
+                      unoptimized={isRemoteStaticAsset(resolvedHeroBackground)}
                       sizes={heroBackgroundImageSizes}
                       className={`pointer-events-none ${heroBackgroundImageClassName}`}
                     />
                   </div>
                 ) : (
                   <Image
-                    src={heroBackgroundImage}
+                    src={resolvedHeroBackground}
                     alt={heroBackgroundAlt}
                     fill
                     priority
+                    unoptimized={isRemoteStaticAsset(resolvedHeroBackground)}
                     sizes={heroBackgroundImageSizes}
                     className={`pointer-events-none ${heroBackgroundImageClassName}`}
                   />

package/src/features/tools/shared/tool-standard-landing-sections.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 
 import { Button } from "@tomako/ui/button";
 
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
 import { ToolStandardGenerationSteps } from "./tool-standard-generation-steps";
 
 export type ToolStandardBenefitCard = {
@@ -641,6 +642,7 @@ function ToolStandardImageFrame({
   priority?: boolean;
   className?: string;
 }) {
+  const resolved = staticAsset(src);
   return (
     <figure className={`mx-auto w-full min-w-0 max-w-[760px] overflow-hidden rounded-2xl border border-[#40576D]/[0.07] bg-white xl:max-w-none ${className ?? ""}`}>
       <Image
@@ -649,7 +651,8 @@ function ToolStandardImageFrame({
         height={840}
         priority={priority}
         sizes="(min-width: 1536px) 630px, (min-width: 1280px) 45vw, (min-width: 768px) 760px, calc(100vw - 40px)"
-        src={src}
+        src={resolved}
+        unoptimized={isRemoteStaticAsset(resolved)}
         width={1260}
       />
     </figure>

package/src/features/tools/slogan-generator/slogan-generator.package.ts

@@ -35,7 +35,7 @@ export const sloganGeneratorPackage: ToolPackage = {
     toolType: "generator",
     keywordEvidence: "docs/seo-keyword-briefs/slogan-generator.md",
     seo: {
-      updatedAt: "2026-07-04",
+      updatedAt: "2026-08-30",
       readingTime: "6 min",
       ogImage: "/tools/slogan-generator-hero.webp",
     },
@@ -247,6 +247,78 @@ Quality requirements:
       },
       badge: { en: "Free, no sign-up", zh: "免费免注册", "zh-tw": "免費免註冊" },
     },
+    standard: {
+      benefits: {
+        title: {
+          en: "Compare distinct slogan directions, not filler variations",
+          zh: "比较真正不同的 Slogan 方向，而不是凑数变体",
+          "zh-tw": "比較真正不同的 Slogan 方向，而不是湊數變體",
+        },
+        cards: [
+          {
+            title: { en: "10 varied candidates", zh: "10 条多风格候选", "zh-tw": "10 條多風格候選" },
+            body: { en: "Compare bold, minimal, playful, premium, and benefit-led lines side by side.", zh: "并排比较大胆、极简、俏皮、高端和利益导向的表达。", "zh-tw": "並排比較大膽、極簡、俏皮、高端和利益導向的表達。" },
+          },
+          {
+            title: { en: "Reasons you can judge", zh: "每条都有判断依据", "zh-tw": "每條都有判斷依據" },
+            body: { en: "Each line explains the rhythm, contrast, specificity, or promise that makes it work.", zh: "每条都说明节奏、对比、具体性或承诺为什么成立。", "zh-tw": "每條都說明節奏、對比、具體性或承諾為什麼成立。" },
+          },
+          {
+            title: { en: "A shortlist with next steps", zh: "带下一步的候选清单", "zh-tw": "帶下一步的候選清單" },
+            body: { en: "Use read-aloud, recall, trademark, and domain checks before choosing a final line.", zh: "定稿前继续做朗读、记忆、商标和域名检查。", "zh-tw": "定稿前繼續做朗讀、記憶、商標和網域檢查。" },
+          },
+        ],
+      },
+      imageTextSections: [
+        {
+          id: "section-primary",
+          title: { en: "Start with a brief the generator can understand", zh: "先给生成器一份能读懂的业务简介", "zh-tw": "先給產生器一份能讀懂的業務簡介" },
+          body: {
+            en: ["State who the business serves and what changes for them.", "Add the brand name only when you want name-based wordplay; vague one-word prompts produce generic lines."],
+            zh: ["写清业务服务谁，以及为他们带来什么变化。", "只有需要名字相关的文字游戏时才填写品牌名；单个空泛词只会得到通用句子。"],
+            "zh-tw": ["寫清業務服務誰，以及為他們帶來什麼變化。", "只有需要名字相關的文字遊戲時才填寫品牌名；單一空泛詞只會得到通用句子。"],
+          },
+          image: { src: "/tools/slogan-generator-value.webp", alt: { en: "A concise slogan standing out from vague drafts.", zh: "一句清晰口号从空泛草案中脱颖而出。", "zh-tw": "一句清晰口號從空泛草案中脫穎而出。" }, side: "left" },
+          imageFirst: true,
+        },
+        {
+          id: "section-variation",
+          title: { en: "Compare styles before polishing words", zh: "先比较风格方向，再打磨具体词句", "zh-tw": "先比較風格方向，再打磨具體詞句" },
+          body: {
+            en: ["Shortlist candidates from different styles rather than near-duplicates.", "Read them aloud and test recall beside the logo with people who do not already know the brand."],
+            zh: ["从不同风格中挑选候选，不要只留同一个想法的近似变体。", "逐条朗读，并把它们和 Logo 放在一起，让不了解品牌的人测试记忆度。"],
+            "zh-tw": ["從不同風格中挑選候選，不要只留同一個想法的近似變體。", "逐條朗讀，並把它們和 Logo 放在一起，讓不了解品牌的人測試記憶度。"],
+          },
+          image: { src: "/tools/slogan-generator-standard.webp", alt: { en: "Slogan candidates compared for fit and memorability.", zh: "按贴合度和记忆度比较口号候选。", "zh-tw": "按貼合度和記憶度比較口號候選。" }, side: "right" },
+        },
+        {
+          id: "section-support",
+          title: { en: "Treat every result as a draft to clear", zh: "把每条结果当成仍需检查的草案", "zh-tw": "把每條結果當成仍需檢查的草案" },
+          body: {
+            en: ["The tool does not check trademarks, domains, or social handles.", "Search the exact phrase in your market and reject lines that overpromise what the product can deliver."],
+            zh: ["工具不会检查商标、域名或社媒账号占用。", "请在目标市场搜索候选原文，并淘汰任何超出产品真实能力的承诺。"],
+            "zh-tw": ["工具不會檢查商標、網域或社群帳號佔用。", "請在目標市場搜尋候選原文，並淘汰任何超出產品真實能力的承諾。"],
+          },
+          image: { src: "/tools/slogan-generator-support.webp", alt: { en: "A slogan shortlist passing brand and trademark checks.", zh: "口号候选清单经过品牌和商标检查。", "zh-tw": "口號候選清單經過品牌和商標檢查。" }, side: "left" },
+          imageFirst: true,
+        },
+      ],
+      generation: {
+        title: { en: "Move from candidate list to a tested slogan", zh: "从候选清单走到经过测试的最终口号", "zh-tw": "從候選清單走到經過測試的最終口號" },
+        image: { src: "/tools/slogan-generator-result-use.webp", alt: { en: "A shortlisted slogan tested beside a logo and landing page.", zh: "入围口号与 Logo 和落地页一起测试。", "zh-tw": "入圍口號與 Logo 和網站首頁一起測試。" }, side: "left" },
+        steps: [
+          { title: { en: "Shortlist three directions", zh: "选出三个不同方向", "zh-tw": "選出三個不同方向" }, body: { en: "Keep candidates that make one clear, honest promise.", zh: "保留只表达一个清晰、诚实承诺的候选。", "zh-tw": "保留只表達一個清晰、誠實承諾的候選。" } },
+          { title: { en: "Test sound and recall", zh: "测试读感和记忆度", "zh-tw": "測試讀感和記憶度" }, body: { en: "Read each aloud and ask unfamiliar readers what they remember later.", zh: "逐条朗读，并询问陌生读者过一段时间后还记得哪条。", "zh-tw": "逐條朗讀，並詢問陌生讀者過一段時間後還記得哪條。" } },
+          { title: { en: "Clear conflicts before launch", zh: "上线前排查冲突", "zh-tw": "上線前排查衝突" }, body: { en: "Check exact-phrase search, trademarks, domains, and handles before committing.", zh: "定稿前检查原文搜索、商标、域名和账号占用。", "zh-tw": "定稿前檢查原文搜尋、商標、網域和帳號佔用。" } },
+        ],
+        ctaLabel: { en: "Generate slogan candidates", zh: "生成 Slogan 候选", "zh-tw": "產生 Slogan 候選" },
+      },
+      faq: {
+        title: { en: "Slogan generator FAQs", zh: "Slogan 生成器常见问题", "zh-tw": "Slogan 產生器常見問題" },
+        intro: { en: "Generate a broad shortlist, then test and clear the final phrase before using it.", zh: "先生成覆盖不同方向的候选，再测试并检查最终短语。", "zh-tw": "先產生涵蓋不同方向的候選，再測試並檢查最終短語。" },
+        ctaLabel: { en: "Create slogan candidates", zh: "生成 Slogan 候选", "zh-tw": "產生 Slogan 候選" },
+      },
+    },
     sections: [
       {
         kind: "cards",

package/src/features/tools/twitter-gif-downloader/twitter-gif-downloader.container.tsx

@@ -40,14 +40,13 @@ export async function TwitterGifDownloaderContainer({ locale, spec }: ToolPagePr
     <ToolPageShell
       locale={locale}
       spec={spec}
-      heroVariant="immersive"
-      heroBackgroundImage="/tools/twitter-gif-downloader-hero.webp"
-      heroBackgroundAlt={t("heroVisualAlt")}
+      showDefaultHeader={false}
     >
       <ToolWorkspaceSection
         heading={t("workspaceHeading")}
         hint={t("workspaceHint")}
         badge={t("workspaceBadge")}
+        headingLevel="h1"
       >
         <TwitterGifDownloader />
       </ToolWorkspaceSection>

package/src/features/tools/twitter-gif-downloader/twitter-gif-downloader.spec.ts

@@ -5,7 +5,7 @@ export const twitterGifDownloaderSpec: ToolSpec = {
   toolType: "downloader",
   seo: {
     "publishedAt": "2026-06-29",
-    "updatedAt": "2026-08-04",
+    "updatedAt": "2026-08-30",
     "readingTime": "5 min",
     "featured": false,
     "ogImage": "/tools/twitter-gif-downloader-hero.webp"

package/src/i18n/messages/en/tools/app-store-screenshot-generator.ts

@@ -16,7 +16,7 @@ const appStoreScreenshotGenerator = {
   guide: {
     heroVisualAlt:
       "Hero visual for an app store listing image generator, showing a complete app store screenshot set.",
-    workspaceHeading: "Upload UI screenshots to generate listing images",
+    workspaceHeading: "App Store Screenshot Generator",
     workspaceHint:
       "Upload real UI screenshots. A cloud Agent uses Skills-OL to fetch supporting context, plan the complete set, and submit live image tasks.",
     whatYouGetHeading: "What you get after generation",

package/src/i18n/messages/en/tools/cold-start-channel-selector.ts

@@ -1,7 +1,7 @@
 const coldStartChannelSelector = {
   meta: {
     title: "Growth Channel Strategy Generator",
-    description: "Build a growth channel strategy for an early product. Add your product, audience, time, and budget to choose the first channel to test and the signal that guides the next step.",
+    description: "Build an early-product growth channel strategy. Add your product, audience, time, and budget to choose the first test and the signal that guides the next step.",
     intro: "Choose the first growth channel to test, then use real signals to decide what comes next.",
     category: "Growth strategy tools",
     keywords: [

package/src/i18n/messages/en/tools/competitor-analysis.ts

@@ -1,7 +1,7 @@
 const competitorAnalysis = {
   meta: {
-    title: "Competitor Analysis Tool",
-    description: "Enter a competitor's URL and a cloud agent researches public signals into a structured profile: overview, traffic and growth, business scale, team, and funding — with sources and confidence.",
+    title: "AI Competitor Analysis Tool: Sources",
+    description: "Enter a competitor URL and get a sourced profile of its product, traffic, growth, business scale, team, and funding, with confidence shown for each finding.",
     intro: "Turn a single competitor URL into a one-page profile. Built from public web and search signals, every dimension shows its confidence so you can act on positioning, growth, and competitive decisions.",
     category: "Market research tools",
     keywords: [
@@ -126,6 +126,9 @@ const competitorAnalysis = {
     },
   },
   guide: {
+    workspaceHeading: "AI Competitor Analysis Tool",
+    workspaceHint: "Enter a public competitor URL to build a sourced profile with confidence and unknowns shown for every major finding.",
+    workspaceBadge: "Public sources only",
     visualAlt: {
       hero: "Competitor profile report preview (visual pending)",
       howToUse: "Competitor analysis workflow illustration (visual pending)",

package/src/i18n/messages/en/tools/email-template-generator.ts

@@ -1,7 +1,7 @@
 const emailTemplateGenerator = {
   meta: {
-    title: "Email Template Generator",
-    description: "Turn marketing or common transactional email requirements into an Agent-generated MJML-first template package with HTML preview, plain text, variables, review notes, and developer handoff.",
+    title: "MJML Email Template Generator",
+    description: "Turn a marketing or transactional email brief into an MJML-first package with HTML preview, plain text, variables, review notes, and developer handoff.",
     intro: "Convert a rough email brief into a previewable, revisable, export-ready MJML template package for campaigns, verification codes, receipts, subscription confirmations, and account notifications.",
     category: "Marketing tools",
     keywords: [
@@ -16,7 +16,7 @@ const emailTemplateGenerator = {
   },
   guide: {
     heroImageAlt: "Visual of a rough email brief becoming MJML, HTML, plain text, variables, and an export bundle.",
-    workspaceHeading: "Tool Workspace",
+    workspaceHeading: "MJML Email Template Generator",
     workspaceHint:
       "Describe the email goal, audience, scenario, and brand tone. The Agent returns a structured MJML-first package you can preview, revise, copy, or export.",
     workspaceBadge: "MJML package",

package/src/i18n/messages/en/tools/product-poster-generator.ts

@@ -1,9 +1,9 @@
 const productPosterGenerator = {
   meta: {
-    title: "AI Product Poster Generator: Turn Screenshots, Benefits, and CTAs Into Posters",
+    title: "AI Product Poster Generator for SaaS",
     displayTitle: "AI Product Poster Generator",
     description:
-      "Enter a product name, benefits, audience, and CTA. Add a URL, logo, screenshots, and brand colors when available to generate a product promo poster for websites, social posts, ads, and OG images.",
+      "Add a product name, benefits, audience, CTA, and optional screenshots to generate a review-ready promo poster for ads, social posts, and websites.",
     intro: "Turn product context into a downloadable promo poster.",
     category: "SEO marketing tools",
     keywords: [

package/src/i18n/messages/en/tools/twitter-gif-downloader.ts

@@ -44,7 +44,7 @@ const twitterGifDownloader = {
   },
   guide: {
     heroVisualAlt: "Hero background showing a public X post link becoming GIF and MP4 downloads",
-    workspaceHeading: "Download a GIF from a public X or Twitter post",
+    workspaceHeading: "Twitter GIF Downloader for X Posts",
     workspaceHint: "Paste a public /status/ link to preview convertible media and save a GIF or MP4. Private, restricted, deleted, or media-free posts will not work.",
     workspaceBadge: "Public link → GIF or MP4",
     resultHeading: "What you get",

package/src/i18n/messages/zh/tools/app-store-screenshot-generator.ts

@@ -16,7 +16,7 @@ const appStoreScreenshotGenerator = {
   guide: {
     heroVisualAlt:
       "应用商店上架图生成器 Hero 视觉图，展示一套应用商店截图。",
-    workspaceHeading: "上传 UI 截图生成上架图",
+    workspaceHeading: "App Store / Google Play 上架截图生成器",
     workspaceHint:
       "上传真实 UI 截图后，云端 Agent 会通过 Skills-OL 抓取补充上下文、规划完整套图并提交真实生图任务。",
     whatYouGetHeading: "生成后会得到什么",

package/src/i18n/messages/zh/tools/competitor-analysis.ts

@@ -1,6 +1,6 @@
 const competitorAnalysis = {
   meta: {
-    title: "竞品分析工具",
+    title: "AI 竞品分析工具",
     description: "输入一个竞品的网址，云端 Agent 调研公开信息，输出结构化的竞品档案：产品概览、流量与增长、业务规模、团队与融资，并附来源和可信度。",
     intro: "把一个竞品 URL 变成一页看懂的竞品档案。基于公开网页和检索的估算，每个维度都标注可信度，帮助你做定位、增长和竞争决策。",
     category: "市场调研工具",
@@ -124,6 +124,9 @@ const competitorAnalysis = {
     },
   },
   guide: {
+    workspaceHeading: "AI 竞品分析工具",
+    workspaceHint: "输入竞品公开网址，生成带来源的结构化档案，并为主要发现标注可信度与未知项。",
+    workspaceBadge: "仅使用公开来源",
     visualAlt: {
       hero: "竞品档案报告预览（配图待补）",
       howToUse: "竞品分析使用流程示意（配图待补）",

package/src/i18n/messages/zh/tools/email-template-generator.ts

@@ -16,7 +16,7 @@ const emailTemplateGenerator = {
   },
   guide: {
     heroImageAlt: "粗略邮件需求转成 MJML、HTML、纯文本、变量和导出包的视觉图。",
-    workspaceHeading: "工具工作台",
+    workspaceHeading: "MJML 邮件模板生成器",
     workspaceHint:
       "描述邮件目标、受众、场景和品牌语气，Agent 会返回结构化的 MJML-first 邮件模板包，可预览、修改、复制和导出。",
     workspaceBadge: "MJML 模板包",

package/src/i18n/messages/zh/tools/product-poster-generator.ts

@@ -1,6 +1,6 @@
 const productPosterGenerator = {
   meta: {
-    title: "AI 产品海报生成器：把产品截图、卖点和 CTA 生成品牌海报图",
+    title: "AI 产品海报生成器：用截图、卖点和 CTA 制作宣传图",
     displayTitle: "AI产品海报生成器",
     description:
       "输入产品名称、卖点、目标用户、CTA，可补充产品 URL、Logo 和截图，生成适合官网、社媒、广告和 OG 分享的产品宣传海报图。",

package/src/i18n/messages/zh/tools/twitter-gif-downloader.ts

@@ -40,7 +40,7 @@ const twitterGifDownloader = {
   },
   guide: {
     heroVisualAlt: "公开 X 帖子链接转换成 GIF 和 MP4 下载文件的 Hero 背景图",
-    workspaceHeading: "从公开 X 或 Twitter 帖子下载 GIF",
+    workspaceHeading: "Twitter / X GIF 下载器",
     workspaceHint: "粘贴带 /status/ 的公开帖子链接，预览可转换媒体后保存 GIF 或 MP4。私密、受限、已删除或没有媒体的帖子无法使用。",
     workspaceBadge: "公开链接 → GIF 或 MP4",
     resultHeading: "你会得到什么",

package/src/i18n/messages/zh-tw/tools/app-store-screenshot-generator.ts

@@ -16,7 +16,7 @@ const appStoreScreenshotGenerator = {
   guide: {
     heroVisualAlt:
       "應用商店上架圖生成器 Hero 視覺圖，展示一套應用商店截圖。",
-    workspaceHeading: "上傳 UI 截圖生成上架圖",
+    workspaceHeading: "App Store / Google Play 上架截圖生成器",
     workspaceHint:
       "上傳真實 UI 截圖後，雲端 Agent 會通過 Skills-OL 抓取補充上下文、規劃完整套圖並提交真實生圖任務。",
     whatYouGetHeading: "生成後會得到什麼",

package/src/i18n/messages/zh-tw/tools/competitor-analysis.ts

@@ -1,6 +1,6 @@
 const competitorAnalysis = {
   meta: {
-    title: "競品分析工具",
+    title: "AI 競品分析工具",
     description: "輸入一個競品的網址，雲端 Agent 調研公開信息，輸出結構化的競品檔案：產品概覽、流量與增長、業務規模、團隊與融資，並附來源和可信度。",
     intro: "把一個競品 URL 變成一頁看懂的競品檔案。基於公開網頁和檢索的估算，每個維度都標註可信度，幫助你做定位、增長和競爭決策。",
     category: "市場調研工具",
@@ -124,6 +124,9 @@ const competitorAnalysis = {
     },
   },
   guide: {
+    workspaceHeading: "AI 競品分析工具",
+    workspaceHint: "輸入競品公開網址，產生帶來源的結構化檔案，並為主要發現標註可信度與未知項。",
+    workspaceBadge: "僅使用公開來源",
     visualAlt: {
       hero: "競品檔案報告預覽（配圖待補）",
       howToUse: "競品分析使用流程示意（配圖待補）",

package/src/i18n/messages/zh-tw/tools/email-template-generator.ts

@@ -16,7 +16,7 @@ const emailTemplateGenerator = {
   },
   guide: {
     heroImageAlt: "粗略郵件需求轉成 MJML、HTML、純文本、變量和導出包的視覺圖。",
-    workspaceHeading: "工具工作臺",
+    workspaceHeading: "MJML 郵件模板產生器",
     workspaceHint:
       "描述郵件目標、受眾、場景和品牌語氣，Agent 會返回結構化的 MJML-first 郵件模板包，可預覽、修改、複製和導出。",
     workspaceBadge: "MJML 模板包",

package/src/i18n/messages/zh-tw/tools/product-poster-generator.ts

@@ -1,6 +1,6 @@
 const productPosterGenerator = {
   meta: {
-    title: "AI 產品海報生成器：把產品截圖、賣點和 CTA 生成品牌海報圖",
+    title: "AI 產品海報生成器：用截圖、賣點和 CTA 製作宣傳圖",
     displayTitle: "AI產品海報生成器",
     description:
       "輸入產品名稱、賣點、目標用戶、CTA，可補充產品 URL、Logo 和截圖，生成適合官網、社媒、廣告和 OG 分享的產品宣傳海報圖。",

package/src/i18n/messages/zh-tw/tools/twitter-gif-downloader.ts

@@ -40,7 +40,7 @@ const twitterGifDownloader = {
   },
   guide: {
     heroVisualAlt: "公開 X 帖子鏈接轉換成 GIF 和 MP4 下載文件的 Hero 背景圖",
-    workspaceHeading: "從公開 X 或 Twitter 帖子下載 GIF",
+    workspaceHeading: "Twitter / X GIF 下載器",
     workspaceHint: "貼上帶 /status/ 的公開帖子連結，預覽可轉換媒體後保存 GIF 或 MP4。私密、受限、已刪除或沒有媒體的帖子無法使用。",
     workspaceBadge: "公開連結 → GIF 或 MP4",
     resultHeading: "你會得到什麼",

package/src/lib/static-asset.ts

@@ -0,0 +1,52 @@
+/**
+ * Resolve root-relative marketing asset paths to the static CDN.
+ * Mirrors `@tomako/public-chrome` staticAsset so tools-runtime stays free of
+ * a chrome peer dependency.
+ *
+ * Image styles (`!960` etc.) follow Tomako OSS image guidelines — append only
+ * when serving from STATIC_ORIGIN; do not rename object keys to `.webp`.
+ */
+
+const STYLE_SUFFIX_PATTERN = /!(default|256|640|960|1600|2560)$/;
+const RASTER_EXT = /\.(png|jpe?g|webp|gif|bmp|tiff?)$/i;
+
+export const DEFAULT_STATIC_ORIGIN = "https://static.tomako.ai";
+
+export type OssImageStyle =
+  | "default"
+  | "256"
+  | "640"
+  | "960"
+  | "1600"
+  | "2560";
+
+function readStaticOrigin(): string {
+  const raw = process.env.NEXT_PUBLIC_STATIC_ORIGIN;
+  if (raw !== undefined) {
+    const value = raw.trim().replace(/\/$/, "");
+    if (value.length > 0) return value;
+  }
+  return DEFAULT_STATIC_ORIGIN;
+}
+
+export function staticAsset(path: string, style?: OssImageStyle): string {
+  if (typeof path !== "string" || path.length === 0) {
+    throw new Error("staticAsset(path): path is required");
+  }
+  if (/^https?:\/\//i.test(path) || path.startsWith("//")) {
+    return path;
+  }
+
+  const normalized = path.startsWith("/") ? path : `/${path}`;
+  const origin = readStaticOrigin();
+  const absolute = `${origin}/static${normalized}`;
+  if (!style || !RASTER_EXT.test(normalized.replace(STYLE_SUFFIX_PATTERN, ""))) {
+    return absolute;
+  }
+  return `${absolute.replace(STYLE_SUFFIX_PATTERN, "")}!${style}`;
+}
+
+/** True when src is an absolute CDN/http URL (skip Next image optimizer). */
+export function isRemoteStaticAsset(src: string): boolean {
+  return /^https?:\/\//i.test(src) || src.startsWith("//");
+}

package/src/lib/tools/ops-catalog.ts

@@ -47,6 +47,15 @@ export function getEffectiveStatus(
   return getOpsRow(catalog, slug)?.status ?? "draft";
 }
 
+/** Search-index eligibility is stricter than public detail access. */
+export function isToolIndexable(
+  slug: string,
+  catalog: ToolOpsRecord[],
+): boolean {
+  const row = getOpsRow(catalog, slug);
+  return row?.status === "published" && row.showOnIndex;
+}
+
 export async function getEffectiveStatusForSlug(slug: string): Promise<ToolStatus> {
   if (!getToolSpec(slug)) {
     return "draft";
@@ -64,7 +73,7 @@ export async function listIndexedToolSpecs(): Promise<ToolSpec[]> {
   const specsBySlug = new Map(listToolSpecs().map((spec) => [spec.slug, spec]));
 
   return catalog
-    .filter((row) => row.status === "published" && row.showOnIndex)
+    .filter((row) => isToolIndexable(row.slug, catalog))
     .sort(
       (left, right) =>
         left.indexSort - right.indexSort ||