@tomako/tools-runtime 0.1.0

package/src/features/tools/module-loader.ts

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

package/src/features/tools/og-image-generator/og-image-generator.container.tsx

@@ -0,0 +1,86 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { OgImageGenerator } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolCodeGuidesSection,
+    ToolFaqSection,
+    ToolSectionEyebrow,
+    ToolSplitCardSection,
+    type ToolCodeGuideItem,
+    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 OgImageGeneratorContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(
+    locale,
+    "toolsPages.ogImageGenerator.guide",
+  );
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage="/tools/og-image-generator-hero.webp"
+      heroBackgroundAlt={t("heroVisualAlt")}
+    >
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <OgImageGenerator />
+      </ToolWorkspaceSection>
+
+      <ToolSplitCardSection
+        eyebrow={t("whyEyebrow")}
+        heading={t("whyHeading")}
+        items={t.raw("whyItems") as readonly ToolTextCard[]}
+        visual={<ToolImageVisual src="/tools/og-image-generator-value.webp" alt={t("valueVisualAlt")} />}
+      />
+
+      <ToolCodeGuidesSection
+        heading={t("implementationHeading")}
+        intro={t("implementationIntro")}
+        items={t.raw("implementationItems") as readonly ToolCodeGuideItem[]}
+      />
+
+      <ToolSplitCardSection
+        eyebrow={t("tipsEyebrow")}
+        heading={t("tipsHeading")}
+        items={t.raw("tipsItems") as readonly ToolTextCard[]}
+        visual={<ToolImageVisual src="/tools/og-image-generator-sizes.webp" alt={t("sizesVisualAlt")} />}
+        reverse
+      />
+
+      <section className="border-t border-[#E1DDD3] py-14 md:py-16">
+        <div className="mb-7 max-w-3xl">
+          <ToolSectionEyebrow tone="coral">{t("whatYouGetEyebrow")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("whatYouGetHeading")}
+          </h2>
+        </div>
+        <ToolCardGrid
+          items={t.raw("whatYouGetItems") as readonly ToolTextCard[]}
+          columns="three"
+          size="prominent"
+        />
+      </section>
+
+      <ToolFaqSection heading={t("faq")} items={t.raw("faqItems") as readonly ToolFaqItem[]} />
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/social-media-profile-generator", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/og-image-generator/og-image-generator.spec.ts

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const ogImageGeneratorSpec: ToolSpec = {
+  slug: "og-image-generator",
+  toolType: "generator",
+  riskLevel: "medium",
+  seo: {
+    "updatedAt": "2026-08-04",
+    "readingTime": "6 min",
+    "featured": false,
+    "ogImage": "/tools/og-image-generator-hero.webp"
+  },
+  widget: {"id":"og-image-generator","mode":"custom"},
+};

package/src/features/tools/og-image-generator/widget/constants.ts

@@ -0,0 +1,38 @@
+import {
+    DEFAULT_TAG_TYPOGRAPHY,
+    DEFAULT_TITLE_TYPOGRAPHY,
+    type OgImageGeneratorInput,
+} from "../../../../lib/tools/og-image-generator-schema";
+
+export const defaultInput: OgImageGeneratorInput = {
+  sourceUrl: "",
+  brief: "",
+  preset: "openGraph",
+  template: "launch",
+  format: "png",
+  title: "Launch your product with a preview worth clicking",
+  subtitle: "Create social images for links, posts, launches, and long-form content.",
+  brand: "Tomako",
+  tags: "Launch, Growth, Social",
+  logoText: "T",
+  primaryColor: "#FF6B4A",
+  accentColor: "#22C7B8",
+  templateBackgroundColor: "#F9F7F0",
+  tagTypography: DEFAULT_TAG_TYPOGRAPHY,
+  titleTypography: DEFAULT_TITLE_TYPOGRAPHY,
+  backgroundMode: "gradient",
+  backgroundColor: "#111111",
+  gridPattern: "grid",
+  gridColor: "white",
+  gridOpacity: 0.13,
+  gridBlurRadius: 0,
+  noise: 0,
+};
+
+export const colorPresets = [
+  { primary: "#FF6B4A", accent: "#22C7B8", background: "#111111" },
+  { primary: "#111111", accent: "#B7FF3E", background: "#0F0F0F" },
+  { primary: "#275EFE", accent: "#FFCF3D", background: "#101828" },
+  { primary: "#8F174A", accent: "#F7A1C4", background: "#2A0B18" },
+  { primary: "#F9F7F0", accent: "#111111", background: "#FFFFFF" },
+] as const;

package/src/features/tools/og-image-generator/widget/form-fields.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element -- Canvas export previews use local blob URLs. */
+
+import { Button } from "@tomako/ui/button";
+import { Input } from "@tomako/ui/input";
+import { Label } from "@tomako/ui/label";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { Slider } from "@tomako/ui/slider";
+import type { OgImageTypography } from "../../../../lib/tools/og-image-generator-schema";
+import {
+    ogImageFontFamilies,
+    ogImageFontWeights,
+} from "../../../../lib/tools/og-image-generator-schema";
+import { ImagePlus, SlidersHorizontal, X } from "lucide-react";
+import type { ReactNode } from "react";
+
+export function SectionCard({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] p-4">
+      <div className="mb-4">
+        <h4 className="text-sm font-semibold text-[#111111]">{title}</h4>
+        <p className="mt-1 text-xs leading-5 text-[#666666]">{description}</p>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+export function FieldBlock({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid gap-3 rounded-lg border border-[#ECECEC] bg-white p-3">
+      <p className="text-[13px] font-semibold text-[#111111]">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+export function InlineFieldWithSettings({
+  ariaLabel,
+  value,
+  onOpenSettings,
+}: {
+  ariaLabel: string;
+  value: ReactNode;
+  onOpenSettings: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="min-w-0 flex-1">{value}</div>
+      <Button
+        type="button"
+        variant="outline"
+        className="size-10 shrink-0 rounded-lg border-[#D8D8D8] p-0"
+        aria-label={ariaLabel}
+        onClick={onOpenSettings}
+      >
+        <SlidersHorizontal aria-hidden className="size-4" />
+      </Button>
+    </div>
+  );
+}
+
+export function TypographyControls({
+  labels,
+  value,
+  onChange,
+}: {
+  labels: (key: string) => string;
+  value: OgImageTypography;
+  onChange: (field: keyof OgImageTypography, next: OgImageTypography[keyof OgImageTypography]) => void;
+}) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      <div>
+        <Label className="mb-2 text-xs text-[#666666]">{labels("fontFamilyLabel")}</Label>
+        <Select value={value.fontFamily} onValueChange={(next) => onChange("fontFamily", next as OgImageTypography["fontFamily"])}>
+          <SelectTrigger className="h-10 w-full rounded-lg border-[#D8D8D8]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {ogImageFontFamilies.map((family) => (
+              <SelectItem key={family} value={family}>
+                {family}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label className="mb-2 text-xs text-[#666666]">{labels("fontWeightLabel")}</Label>
+        <Select value={value.fontWeight} onValueChange={(next) => onChange("fontWeight", next as OgImageTypography["fontWeight"])}>
+          <SelectTrigger className="h-10 w-full rounded-lg border-[#D8D8D8]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {ogImageFontWeights.map((weight) => (
+              <SelectItem key={weight} value={weight}>
+                {weight}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label className="mb-2 text-xs text-[#666666]">{labels("fontSizeLabel")}</Label>
+        <Input
+          max={120}
+          min={10}
+          type="number"
+          value={value.fontSize}
+          onChange={(event) => onChange("fontSize", Number(event.target.value) || value.fontSize)}
+        />
+      </div>
+      <ColorField label={labels("textColorLabel")} value={value.color} onChange={(next) => onChange("color", next)} />
+    </div>
+  );
+}
+
+export function ImageUploadField({
+  label,
+  chooseLabel,
+  selectedLabel,
+  previewAlt,
+  fileName,
+  imageUrl,
+  onChoose,
+  onRemove,
+}: {
+  label: string;
+  chooseLabel: string;
+  selectedLabel: string;
+  previewAlt: string;
+  fileName?: string;
+  imageUrl?: string;
+  onChoose: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <FieldBlock label={label}>
+      {imageUrl ? (
+        <div className="flex items-center gap-3 rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] p-2">
+          <img alt={previewAlt} className="size-10 rounded-md border border-[#E5E5E5] object-contain" src={imageUrl} />
+          <span className="min-w-0 flex-1 truncate text-sm font-medium text-[#111111]">{fileName || selectedLabel}</span>
+          <Button className="size-9 rounded-lg border-[#D8D8D8] p-0" type="button" variant="outline" onClick={onRemove}>
+            <X aria-hidden className="size-4" />
+          </Button>
+        </div>
+      ) : (
+        <button
+          className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-[#CFCFCF] bg-[#FAFAFA] px-4 py-4 text-sm font-semibold text-[#111111] transition hover:border-[#111111] hover:bg-white"
+          type="button"
+          onClick={onChoose}
+        >
+          <ImagePlus aria-hidden className="size-4" />
+          {chooseLabel}
+        </button>
+      )}
+    </FieldBlock>
+  );
+}
+
+export function ColorField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div>
+      <Label className="mb-2 text-xs text-[#666666]">{label}</Label>
+      <div className="flex items-center gap-3">
+        <input
+          aria-label={label}
+          className="size-10 cursor-pointer rounded-lg border border-[#D8D8D8] bg-white p-1"
+          type="color"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+        />
+        <Input className="font-mono uppercase" value={value} onChange={(event) => onChange(event.target.value)} />
+      </div>
+    </div>
+  );
+}
+
+export function SliderField({
+  label,
+  value,
+  valueLabel,
+  min,
+  max,
+  step,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  valueLabel: string;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <div>
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <Label className="text-xs text-[#666666]">{label}</Label>
+        <span className="text-xs font-semibold text-[#111111]">{valueLabel}</span>
+      </div>
+      <Slider
+        max={max}
+        min={min}
+        step={step}
+        value={[value]}
+        onValueChange={(next) => onChange(next[0] ?? value)}
+      />
+    </div>
+  );
+}
+
+export function isPlaceholderTitle(value: string): boolean {
+  const normalized = value.trim().toLowerCase();
+  return ["test", "demo", "placeholder", "title", "asdf", "1234"].includes(normalized) || /^\d+$/.test(normalized);
+}

package/src/features/tools/og-image-generator/widget/index.ts

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