@tomako/tools-runtime 0.1.0

package/src/features/tools/runtime-registry.ts

@@ -0,0 +1,186 @@
+import type { ComponentType } from "react";
+
+import { getToolSpec, resolveToolSlug } from "./spec-registry";
+import type { ToolModule, ToolPageProps } from "./types";
+
+type ToolContainerLoader = () => Promise<ComponentType<ToolPageProps>>;
+
+const toolContainerLoaders: Record<string, ToolContainerLoader> = {
+  "app-icon-resizer": () =>
+    import("./app-icon-resizer/app-icon-resizer.container").then(
+      (module) => module.AppIconResizerContainer,
+    ),
+  "gtm-readiness-checklist": () =>
+    import("./gtm-readiness-checklist/gtm-readiness-checklist.container").then(
+      (module) => module.GtmReadinessChecklistContainer,
+    ),
+  "product-name-generator": () =>
+    import("./product-name-generator/product-name-generator.container").then(
+      (module) => module.ProductNameGeneratorContainer,
+    ),
+  "product-poster-generator": () =>
+    import("./product-poster-generator/product-poster-generator.container").then(
+      (module) => module.ProductPosterGeneratorContainer,
+    ),
+  "million-user-growth-test": () =>
+    import("./million-user-growth-test/million-user-growth-test.container").then(
+      (module) => module.MillionUserGrowthTestContainer,
+    ),
+  "market-forecast-report": () =>
+    import("./market-forecast-report/market-forecast-report.container").then(
+      (module) => module.MarketForecastReportContainer,
+    ),
+  "product-ui-generator": () =>
+    import("./product-ui-generator/product-ui-generator.container").then(
+      (module) => module.ProductUiGeneratorContainer,
+    ),
+  "app-store-screenshot-generator": () =>
+    import(
+      "./app-store-screenshot-generator/app-store-screenshot-generator.container"
+    ).then((module) => module.AppStoreScreenshotGeneratorContainer),
+  "build-in-public-story-generator": () =>
+    import("./build-in-public-story-generator/build-in-public-story-generator.container").then(
+      (module) => module.BuildInPublicStoryGeneratorContainer,
+    ),
+  "og-image-generator": () =>
+    import("./og-image-generator/og-image-generator.container").then(
+      (module) => module.OgImageGeneratorContainer,
+    ),
+  "cold-start-channel-selector": () =>
+    import("./cold-start-channel-selector/cold-start-channel-selector.container").then(
+      (module) => module.ColdStartChannelSelectorContainer,
+    ),
+  "tarot-reading": () =>
+    import("./tarot-reading/tarot-reading.container").then(
+      (module) => module.TarotReadingContainer,
+    ),
+  "product-agreement-generator": () =>
+    import("./product-agreement-generator/product-agreement-generator.container").then(
+      (module) => module.ProductAgreementGeneratorContainer,
+    ),
+  "product-hunt-launch-planner": () =>
+    import("./product-hunt-launch-planner/product-hunt-launch-planner.container").then(
+      (module) => module.ProductHuntLaunchPlannerContainer,
+    ),
+  "email-template-generator": () =>
+    import("./email-template-generator/email-template-generator.container").then(
+      (module) => module.EmailTemplateGeneratorContainer,
+    ),
+  "commercial-bp-generator": () =>
+    import("./commercial-bp-generator/commercial-bp-generator.container").then(
+      (module) => module.CommercialBpGeneratorContainer,
+    ),
+  "pitch-deck-generator": () =>
+    import("./pitch-deck-generator/pitch-deck-generator.container").then(
+      (module) => module.PitchDeckGeneratorContainer,
+    ),
+  "competitor-analysis": () =>
+    import("./competitor-analysis/competitor-analysis.container").then(
+      (module) => module.CompetitorAnalysisContainer,
+    ),
+  "community-feedback-inbox": () =>
+    import("./community-feedback-inbox/community-feedback-inbox.container").then(
+      (module) => module.CommunityFeedbackInboxContainer,
+    ),
+  "startup-idea-research": () =>
+    import("./startup-idea-research/startup-idea-research.container").then(
+      (module) => module.StartupIdeaResearchContainer,
+    ),
+  "community-pain-point-extractor": () =>
+    import("./community-pain-point-extractor/community-pain-point-extractor.container").then(
+      (module) => module.CommunityPainPointExtractorContainer,
+    ),
+  "reddit-pain-point-finder": () =>
+    import("./reddit-pain-point-finder/reddit-pain-point-finder.container").then(
+      (module) => module.RedditPainPointFinderContainer,
+    ),
+  "social-listening-research-report": () =>
+    import(
+      "./social-listening-research-report/social-listening-research-report.container"
+    ).then((module) => module.SocialListeningResearchReportContainer),
+  "twitter-gif-downloader": () =>
+    import("./twitter-gif-downloader/twitter-gif-downloader.container").then(
+      (module) => module.TwitterGifDownloaderContainer,
+    ),
+  "koko-codex-assistant": () =>
+    import("./koko-codex-assistant/koko-codex-assistant.container").then(
+      (module) => module.KokoCodexAssistantContainer,
+    ),
+  "logo-generator": () =>
+    import("./logo-generator/logo-generator.container").then(
+      (module) => module.LogoGeneratorContainer,
+    ),
+  "social-media-profile-generator": () =>
+    import("./social-profile-kit/social-profile-kit.container").then(
+      (module) => module.SocialProfileKitContainer,
+    ),
+  "social-platform-asset-adapter": () =>
+    import("./social-platform-asset-adapter/social-platform-asset-adapter.container").then(
+      (module) => module.SocialPlatformAssetAdapterContainer,
+    ),
+  "user-interview-record-generator": () =>
+    import("./user-interview-record-generator/user-interview-record-generator.container").then(
+      (module) => module.UserInterviewRecordGeneratorContainer,
+    ),
+  "user-interview-insight-report-generator": () =>
+    import(
+      "./user-interview-insight-report-generator/user-interview-insight-report-generator.container"
+    ).then((module) => module.UserInterviewInsightReportGeneratorContainer),
+  "user-interview-guide-generator": () => loadPackageContainer(
+    import("./user-interview-guide-generator/user-interview-guide-generator.package").then(
+      (module) => module.userInterviewGuideGeneratorPackage,
+    ),
+  ),
+  "utm-builder": () => loadPackageContainer(
+    import("./utm-builder/utm-builder.package").then((module) => module.utmBuilderPackage),
+  ),
+  "slogan-generator": () => loadPackageContainer(
+    import("./slogan-generator/slogan-generator.package").then(
+      (module) => module.sloganGeneratorPackage,
+    ),
+  ),
+  "investor-matching-planner": () => loadPackageContainer(
+    import("./investor-matching-planner/investor-matching-planner.package").then(
+      (module) => module.investorMatchingPlannerPackage,
+    ),
+  ),
+  "disclaimer-generator": () => loadPackageContainer(
+    import("./disclaimer-generator/disclaimer-generator.package").then(
+      (module) => module.disclaimerGeneratorPackage,
+    ),
+  ),
+  "product-positioning-analyzer": () => loadPackageContainer(
+    import("./product-positioning-analyzer/product-positioning-analyzer.package").then(
+      (module) => module.productPositioningAnalyzerPackage,
+    ),
+  ),
+  "community-post-risk-checker": () => loadPackageContainer(
+    import("./community-post-risk-checker/community-post-risk-checker.package").then(
+      (module) => module.communityPostRiskCheckerPackage,
+    ),
+  ),
+};
+
+async function loadPackageContainer(
+  packagePromise: Promise<
+    import("./package/types").ToolPackage
+  >,
+): Promise<ComponentType<ToolPageProps>> {
+  const [{ createPackageContainer }, pkg] = await Promise.all([
+    import("./package/package-container"),
+    packagePromise,
+  ]);
+  return createPackageContainer(pkg);
+}
+
+export async function loadToolModule(slug: string): Promise<ToolModule | undefined> {
+  const resolvedSlug = resolveToolSlug(slug);
+  const spec = getToolSpec(resolvedSlug);
+  const loadContainer = toolContainerLoaders[resolvedSlug];
+  if (!spec || !loadContainer) return undefined;
+
+  return {
+    spec,
+    Container: await loadContainer(),
+  };
+}

package/src/features/tools/shared/create-guide-stack-container.tsx

@@ -0,0 +1,176 @@
+import type { ComponentType } from "react";
+
+import type { ToolPageProps } from "../types";
+import {
+    ToolCardGrid,
+    ToolFaqSection,
+    ToolPlainTextGrid,
+    ToolSection,
+    type ToolFaqItem,
+    type ToolTextCard,
+} from "./tool-content-sections";
+import { ToolCta } from "./tool-cta";
+import {
+    ToolGuideSection,
+    ToolImageVisual,
+    ToolWorkspaceSection,
+} from "./tool-guide-section";
+import { createToolGuideTranslator } from "./tool-message-translator";
+import { ToolPageShell } from "./tool-page-shell";
+
+export type GuideStackAssets = {
+  hero: string;
+  support: string;
+  failure: string;
+  resultUse: string;
+  standard: string;
+};
+
+export type GuideStackCta = {
+  primaryHref: string;
+  secondaryHref: string;
+};
+
+export type GuideStackContainerConfig = {
+  /** e.g. toolsPages.userInterviewRecordGenerator.guide */
+  guideNamespace: string;
+  Widget: ComponentType;
+  assets: GuideStackAssets;
+  cta: GuideStackCta;
+};
+
+function asCards(value: unknown): readonly ToolTextCard[] {
+  return Array.isArray(value) ? (value as readonly ToolTextCard[]) : [];
+}
+
+function asStrings(value: unknown): readonly string[] {
+  return Array.isArray(value) ? (value as readonly string[]) : [];
+}
+
+function asFaq(value: unknown): readonly ToolFaqItem[] {
+  return Array.isArray(value) ? (value as readonly ToolFaqItem[]) : [];
+}
+
+/**
+ * A2 factory: immersive hero + workspace + Guide/Card/FAQ/CTA stack
+ * shared by user-interview record/insight twins (and similar pages).
+ *
+ * Use when: landing is Guide/Card sections (not ToolLandingStandardSections).
+ * Prefer createStandardLandingContainer for the standard SEO 4-block stack.
+ * Prefer ToolPackage for form + structured-result tools.
+ */
+export function createGuideStackContainer(
+  config: GuideStackContainerConfig,
+): ComponentType<ToolPageProps> {
+  const { guideNamespace, Widget, assets, cta } = config;
+
+  return async function GuideStackToolContainer({
+    locale,
+    spec,
+  }: ToolPageProps) {
+    const t = await createToolGuideTranslator(locale, guideNamespace);
+    const outputItems = asCards(t.raw("outputItems"));
+    const supportItems = asStrings(t.raw("supportItems"));
+    const unsupportedItems = asStrings(t.raw("unsupportedItems"));
+    const failureItems = asStrings(t.raw("failureItems"));
+    const resultUseItems = asStrings(t.raw("resultUseItems"));
+    const whyTomakoItems = asCards(t.raw("whyTomakoItems"));
+    const standardItems = asStrings(t.raw("standardItems"));
+    const faqItems = asFaq(t.raw("faqItems"));
+    const shellFaq = faqItems.filter(
+      (item): item is { question: string; answer: string } =>
+        typeof item.answer === "string",
+    );
+
+    return (
+      <ToolPageShell
+        heroBackgroundAlt={t("heroVisualAlt")}
+        heroBackgroundImage={assets.hero}
+        heroVariant="immersive"
+        locale={locale}
+        spec={spec}
+        faqItems={shellFaq}
+      >
+        <ToolWorkspaceSection
+          badge={t("workspaceBadge")}
+          heading={t("workspaceHeading")}
+          hint={t("workspaceHint")}
+        >
+          <Widget />
+        </ToolWorkspaceSection>
+        <ToolSection heading={t("outputs")}>
+          <ToolCardGrid items={outputItems} columns="two" />
+        </ToolSection>
+        <ToolGuideSection
+          heading={t("supportHeading")}
+          visual={
+            <ToolImageVisual
+              alt={t("supportVisualAlt")}
+              src={assets.support}
+              wide
+            />
+          }
+        >
+          <ToolPlainTextGrid items={supportItems} />
+        </ToolGuideSection>
+        <ToolGuideSection
+          heading={t("unsupportedHeading")}
+          reverse
+          visual={
+            <ToolImageVisual
+              alt={t("failureVisualAlt")}
+              src={assets.failure}
+              wide
+            />
+          }
+        >
+          <ToolPlainTextGrid items={unsupportedItems} />
+          <h3 className="mt-8 text-xl font-semibold text-[#111111]">
+            {t("failureHeading")}
+          </h3>
+          <ToolPlainTextGrid items={failureItems} />
+        </ToolGuideSection>
+        <ToolGuideSection
+          heading={t("resultUseHeading")}
+          visual={
+            <ToolImageVisual
+              alt={t("resultUseVisualAlt")}
+              src={assets.resultUse}
+              wide
+            />
+          }
+        >
+          <ToolPlainTextGrid items={resultUseItems} />
+        </ToolGuideSection>
+        <ToolSection heading={t("whyTomakoHeading")}>
+          <ToolCardGrid items={whyTomakoItems} columns="two" />
+        </ToolSection>
+        <ToolGuideSection
+          heading={t("standardHeading")}
+          reverse
+          visual={
+            <ToolImageVisual
+              alt={t("standardVisualAlt")}
+              src={assets.standard}
+              wide
+            />
+          }
+        >
+          <ToolPlainTextGrid items={standardItems} />
+        </ToolGuideSection>
+        <ToolFaqSection heading={t("faq")} items={faqItems} />
+        <ToolCta
+          hint={t("ctaHint")}
+          primary={{
+            href: cta.primaryHref,
+            label: t("ctaPrimary"),
+          }}
+          secondary={{
+            href: cta.secondaryHref,
+            label: t("ctaSecondary"),
+          }}
+        />
+      </ToolPageShell>
+    );
+  };
+}

package/src/features/tools/shared/create-standard-landing-container.tsx

@@ -0,0 +1,163 @@
+import type { LucideIcon } from "lucide-react";
+import type { ComponentType } from "react";
+
+import type {
+    ToolStandardFaqItem,
+    ToolStandardGenerationStep,
+    ToolStandardImageTextSection,
+    ToolStandardNarrativeSection,
+    ToolStandardReportPreview,
+    ToolStandardSectionId,
+} from "../../../features/tools/shared/tool-standard-landing-sections";
+import { ToolLandingStandardSections } from "../../../features/tools/shared/tool-standard-landing-sections";
+
+import type { ToolPageProps } from "../types";
+import { ToolWorkspaceSection } from "./tool-guide-section";
+import { createToolGuideTranslator } from "./tool-message-translator";
+import { ToolPageShell } from "./tool-page-shell";
+
+type StandardImageTextCopy = Omit<ToolStandardImageTextSection, "image"> & {
+  image: ToolStandardImageTextSection["image"];
+};
+
+export type StandardLandingCopyKeys = {
+  /** default: workspaceHeading */
+  workspaceHeading?: string;
+  /** default: workspaceHint */
+  workspaceHint?: string;
+  /** default: faqHeading */
+  faqTitle?: string;
+  /** default: standard.generation.imageAlt */
+  generationImageAlt?: string;
+  /** Optional static output preview for report-style tools. */
+  reportPreview?: string;
+  /** Optional answer-first sections for decision and strategy tools. */
+  narrativeSections?: string;
+};
+
+export type StandardLandingContainerConfig = {
+  /**
+   * next-intl namespace under full messages, e.g. toolsPages.appIconResizer.guide
+   * Loaded via getFullMessages — not public-messages (which omits toolsPages).
+   */
+  guideNamespace: string;
+  Widget: ComponentType;
+  benefitIcons: readonly [LucideIcon, LucideIcon, LucideIcon];
+  generationImageSrc: string;
+  copyKeys?: StandardLandingCopyKeys;
+  workspaceHeadingLevel?: "h1" | "h2";
+  /** When true, pass string FAQ answers into ToolPageShell for JSON-LD. Default true. */
+  passFaqToShell?: boolean;
+  /** A content CTA may navigate to a real, cost-free action. */
+  contentCtaHref?: string;
+  /** Override the default section sequence when the tool archetype needs a different reading flow. */
+  sectionOrder?: readonly ToolStandardSectionId[];
+};
+
+/**
+ * Factory for workspace-first tools that share ToolLandingStandardSections.
+ * Configure namespace / widget / icons / step image — do not clone containers.
+ *
+ * Use when: SEO landing = Workspace + standard benefits/imageText/generation/FAQ.
+ * Do not use when: custom Guide/Divided stacks, immersive hero layouts, or Package tools.
+ */
+export function createStandardLandingContainer(
+  config: StandardLandingContainerConfig,
+): ComponentType<ToolPageProps> {
+  const {
+    guideNamespace,
+    Widget,
+    benefitIcons,
+    generationImageSrc,
+    copyKeys,
+    workspaceHeadingLevel = "h1",
+    passFaqToShell = true,
+    contentCtaHref,
+    sectionOrder,
+  } = config;
+
+  const workspaceHeadingKey = copyKeys?.workspaceHeading ?? "workspaceHeading";
+  const workspaceHintKey = copyKeys?.workspaceHint ?? "workspaceHint";
+  const faqTitleKey = copyKeys?.faqTitle ?? "faqHeading";
+  const generationImageAltKey =
+    copyKeys?.generationImageAlt ?? "standard.generation.imageAlt";
+
+  return async function StandardLandingToolContainer({
+    locale,
+    spec,
+  }: ToolPageProps) {
+    const t = await createToolGuideTranslator(locale, guideNamespace);
+    const benefitCards = t.raw("standard.benefits.cards") as readonly [
+      { title: string; body: string },
+      { title: string; body: string },
+      { title: string; body: string },
+    ];
+    const imageTextSections = t.raw("standard.imageTextSections") as readonly StandardImageTextCopy[];
+    const narrativeSections = copyKeys?.narrativeSections
+      ? (t.raw(copyKeys.narrativeSections) as readonly ToolStandardNarrativeSection[])
+      : [];
+    const generationSteps = t.raw(
+      "standard.generation.steps",
+    ) as readonly ToolStandardGenerationStep[];
+    const faqRaw = t.raw("faqItems");
+    const faqItems = (
+      Array.isArray(faqRaw) ? faqRaw : []
+    ) as readonly ToolStandardFaqItem[];
+    const reportPreview = copyKeys?.reportPreview
+      ? (t.raw(copyKeys.reportPreview) as ToolStandardReportPreview)
+      : undefined;
+    const shellFaq = faqItems.filter(
+      (item): item is { question: string; answer: string } =>
+        typeof item.answer === "string",
+    );
+
+    return (
+      <ToolPageShell
+        locale={locale}
+        spec={spec}
+        showDefaultHeader={false}
+        faqItems={passFaqToShell ? shellFaq : undefined}
+      >
+        <ToolWorkspaceSection
+          heading={t(workspaceHeadingKey)}
+          hint={t(workspaceHintKey)}
+          headingLevel={workspaceHeadingLevel}
+        >
+          <Widget />
+        </ToolWorkspaceSection>
+
+        <ToolLandingStandardSections
+          benefits={{
+            title: t("standard.benefits.title"),
+            cards: [
+              { ...benefitCards[0], icon: benefitIcons[0] },
+              { ...benefitCards[1], icon: benefitIcons[1] },
+              { ...benefitCards[2], icon: benefitIcons[2] },
+            ],
+          }}
+          imageTextSections={imageTextSections}
+          narrativeSections={narrativeSections}
+          generation={{
+            title: t("standard.generation.title"),
+            image: {
+              src: generationImageSrc,
+              alt: t(generationImageAltKey),
+            },
+            steps: generationSteps,
+            ctaLabel: t("standard.generation.ctaLabel"),
+            ctaHref: contentCtaHref,
+          }}
+          reportPreview={reportPreview}
+          faq={{
+            title: t(faqTitleKey),
+            intro: t("standard.faqIntro"),
+            ctaLabel: t("standard.faqCtaLabel"),
+            ctaHref: contentCtaHref,
+            items: faqItems,
+          }}
+          sectionOrder={sectionOrder}
+        />
+      </ToolPageShell>
+    );
+  };
+}