@tomako/tools-runtime 0.1.0

package/src/features/tools/koko-codex-assistant/koko-codex-assistant.container.tsx

@@ -0,0 +1,151 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+import Image from "next/image";
+
+import { KokoCodexAssistantDownload } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolFaqSection,
+    ToolSection,
+    ToolStandardsSection,
+    ToolTextRows,
+    type ToolFaqItem,
+    type ToolTextCard,
+} from "../shared/tool-content-sections";
+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";
+
+function NotificationVisual({ alt }: { alt: string }) {
+  return (
+    <figure className="overflow-hidden rounded-[1.5rem]">
+      <Image
+        src="/tools/koko-codex-assistant-notification.webp"
+        alt={alt}
+        width={1536}
+        height={1024}
+        sizes="(min-width: 1024px) 520px, (min-width: 768px) 50vw, 100vw"
+        className="block h-auto w-full object-cover"
+      />
+    </figure>
+  );
+}
+
+export async function KokoCodexAssistantContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(
+    locale,
+    "toolsPages.kokoCodexAssistant.guide",
+  );
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="split"
+      heroVisual={
+        <div className="relative min-h-[360px] overflow-hidden rounded-[1.75rem] bg-[#FFF0EA]">
+          <Image
+            src="/tools/koko-codex-assistant-hero.webp"
+            alt={t("heroVisualAlt")}
+            fill
+            priority
+            sizes="(min-width: 1024px) 560px, 100vw"
+            className="object-contain p-4"
+          />
+        </div>
+      }
+    >
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("betaBadge")}
+      >
+        <KokoCodexAssistantDownload />
+      </ToolWorkspaceSection>
+
+      <ToolGuideSection
+        heading={t("resultHeading")}
+        visual={
+          <ToolImageVisual
+            src="/tools/koko-codex-assistant-workspace.webp"
+            alt={t("workspaceVisualAlt")}
+            priority
+          />
+        }
+      >
+        <ToolTextRows items={t.raw("resultBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolSection heading={t("scenarioHeading")} intro={t("scenarioIntro")}>
+        <ToolCardGrid
+          items={t.raw("scenarioItems") as readonly ToolTextCard[]}
+          columns="four"
+          size="prominent"
+        />
+      </ToolSection>
+
+      <ToolGuideSection
+        heading={t("configHeading")}
+        reverse
+        visual={
+          <ToolImageVisual
+            src="/tools/koko-codex-assistant-config.webp"
+            alt={t("configVisualAlt")}
+          />
+        }
+      >
+        <ToolTextRows items={t.raw("configBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolGuideSection
+        heading={t("flowHeading")}
+        visual={
+          <ToolImageVisual
+            src="/tools/koko-codex-assistant-value.webp"
+            alt={t("valueVisualAlt")}
+          />
+        }
+      >
+        <ToolTextRows items={t.raw("flowBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolGuideSection
+        heading={t("notificationHeading")}
+        reverse
+        visual={<NotificationVisual alt={t("notificationVisualAlt")} />}
+      >
+        <ToolTextRows items={t.raw("notificationBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolStandardsSection
+        heading={t("standardsHeading")}
+        items={t.raw("standardsItems") as readonly ToolTextCard[]}
+      />
+
+      <ToolSection
+        heading={t("boundaryHeading")}
+        visual={
+          <ToolImageVisual src="/tools/koko-codex-assistant-beta.webp" alt={t("betaVisualAlt")} />
+        }
+        reverse
+      >
+        <ToolTextRows items={t.raw("boundaryBody") as readonly string[]} />
+      </ToolSection>
+
+      <ToolFaqSection
+        heading={t("faq")}
+        items={t.raw("faqItems") as readonly ToolFaqItem[]}
+      />
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools/product-name-generator", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/koko-codex-assistant/koko-codex-assistant.spec.ts

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const kokoCodexAssistantSpec: ToolSpec = {
+  slug: "koko-codex-assistant",
+  toolType: "downloader",
+  seo: {
+    "publishedAt": "2026-07-01",
+    "updatedAt": "2026-07-02",
+    "readingTime": "6 min",
+    "featured": false,
+    "ogImage": "/tools/koko-codex-assistant-hero.webp"
+  },
+  widget: {"id":"koko-codex-assistant","mode":"custom"},
+};

package/src/features/tools/koko-codex-assistant/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const KokoCodexAssistantDownload = dynamic(() =>
+  import("./koko-codex-assistant-download").then((module) => module.KokoCodexAssistantDownload),
+);

package/src/features/tools/koko-codex-assistant/widget/koko-codex-assistant-download.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { Apple, CheckCircle2, Clock3, Download, LockKeyhole, Monitor } from "lucide-react";
+import Image from "next/image";
+import { type FormEvent, useState } from "react";
+
+import { Button } from "@tomako/ui/button";
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+} from "@tomako/ui/dialog";
+import { Field, Input } from "@tomako/ui/input";
+import { useTranslations } from "../../../../i18n/client";
+
+const INVITE_VERIFY_ENDPOINT = "/api/tools/koko-codex-assistant/verify-invite";
+const MAC_INSTALLER_URL = "/downloads/koko-codex-assistant-beta.dmg";
+
+export function KokoCodexAssistantDownload() {
+  const t = useTranslations("toolsPages.kokoCodexAssistant.widget");
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [inviteCode, setInviteCode] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [verified, setVerified] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  function handleDownloadClick() {
+    if (verified) {
+      window.location.href = MAC_INSTALLER_URL;
+      return;
+    }
+
+    setDialogOpen(true);
+  }
+
+  async function submitInvite(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const normalizedCode = inviteCode.trim();
+
+    if (!normalizedCode) {
+      setError(t("wrongCode"));
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      const response = await fetch(INVITE_VERIFY_ENDPOINT, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ inviteCode: normalizedCode }),
+      });
+      const result = (await response.json().catch(() => null)) as { ok?: boolean } | null;
+
+      if (!response.ok || !result?.ok) {
+        setError(t("wrongCode"));
+        return;
+      }
+
+      setVerified(true);
+      setDialogOpen(false);
+      setError(null);
+      window.location.href = MAC_INSTALLER_URL;
+    } catch {
+      setError(t("wrongCode"));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <section className="overflow-hidden rounded-[1.75rem] border border-[#D8D4CA] bg-white shadow-[0_24px_70px_rgba(17,17,17,0.08)]">
+      <div className="grid lg:grid-cols-[0.97fr_1.03fr]">
+        <div className="relative min-h-[420px] bg-[#F7F6F2] p-5 md:p-7 lg:order-1">
+          <Image
+            src="/tools/koko-codex-assistant-workspace.webp"
+            alt={t("workspaceAlt")}
+            fill
+            sizes="(min-width: 1024px) 540px, 100vw"
+            className="object-contain p-6"
+          />
+        </div>
+
+        <div className="bg-[#FFF5F0] p-5 md:p-7 lg:order-2">
+          <div className="grid h-full gap-4 md:grid-cols-2">
+            <article className="flex min-h-[360px] flex-col rounded-[1.35rem] border border-[#E9CFC2] bg-white p-5 shadow-[0_18px_42px_rgba(92,58,36,0.08)] md:p-6">
+              <div className="flex items-start justify-between gap-4">
+                <span className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-[#111111] text-white">
+                  <Apple aria-hidden className="size-5" />
+                </span>
+                <span className="rounded-full border border-[#F0CDBE] bg-[#FFF1EA] px-3 py-1 text-xs font-semibold text-[#B74429]">
+                  {t("betaBadge")}
+                </span>
+              </div>
+              <h3 className="mt-6 text-2xl font-semibold leading-tight text-[#111111]">
+                {t("macTitle")}
+              </h3>
+              <p className="mt-3 text-sm leading-6 text-[#555555]">{t("macBody")}</p>
+              <div className="mt-5 space-y-3 text-sm leading-6 text-[#3D3D3D]">
+                {(t.raw("macPoints") as string[]).map((item) => (
+                  <p key={item} className="flex gap-2">
+                    <CheckCircle2 aria-hidden className="mt-0.5 size-4 shrink-0 text-[#D85435]" />
+                    <span>{item}</span>
+                  </p>
+                ))}
+              </div>
+              <Button
+                type="button"
+                size="lg"
+                onClick={handleDownloadClick}
+                className="mt-auto w-full rounded-2xl bg-[#111111] text-white shadow-[0_14px_34px_rgba(17,17,17,0.18)] hover:bg-[#2A2A2A]"
+              >
+                <Download aria-hidden className="size-4" />
+                {verified ? t("downloadAgain") : t("downloadMac")}
+              </Button>
+              {verified ? (
+                <p className="mt-3 text-xs font-medium text-[#547331]">{t("verifiedHint")}</p>
+              ) : null}
+            </article>
+
+            <article className="flex min-h-[360px] flex-col rounded-[1.35rem] border border-[#DFDDD8] bg-[#F6F4EF] p-5 opacity-90 md:p-6">
+              <div className="flex items-start justify-between gap-4">
+                <span className="flex size-12 shrink-0 items-center justify-center rounded-2xl border border-[#D8D4CA] bg-white text-[#777777]">
+                  <Monitor aria-hidden className="size-5" />
+                </span>
+                <span className="rounded-full border border-[#D8D4CA] bg-white px-3 py-1 text-xs font-semibold text-[#777777]">
+                  {t("comingSoon")}
+                </span>
+              </div>
+              <h3 className="mt-6 text-2xl font-semibold leading-tight text-[#777777]">
+                {t("windowsTitle")}
+              </h3>
+              <p className="mt-3 text-sm leading-6 text-[#777777]">{t("windowsBody")}</p>
+              <div className="mt-auto flex items-center gap-2 rounded-2xl border border-[#D8D4CA] bg-white px-4 py-3 text-sm font-semibold text-[#777777]">
+                <Clock3 aria-hidden className="size-4" />
+                {t("windowsStatus")}
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader title={t("dialogTitle")} />
+          <form onSubmit={submitInvite}>
+            <DialogBody>
+              <Field label={t("inviteLabel")}>
+                <Input
+                  value={inviteCode}
+                  onChange={(event) => {
+                    setInviteCode(event.target.value);
+                    setError(null);
+                  }}
+                  placeholder={t("invitePlaceholder")}
+                  inputMode="numeric"
+                  autoComplete="off"
+                  className="h-12 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] px-4 text-[15px] font-medium text-[#111111] placeholder:text-[#8A8478]"
+                />
+              </Field>
+              {error ? (
+                <p className="mt-3 flex items-center gap-2 text-sm font-medium text-[#B74429]">
+                  <LockKeyhole aria-hidden className="size-4" />
+                  {error}
+                </p>
+              ) : null}
+            </DialogBody>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDialogOpen(false)}
+              >
+                {t("cancel")}
+              </Button>
+              <Button
+                type="submit"
+                disabled={submitting}
+                className="bg-[#111111] text-white hover:bg-[#2A2A2A]"
+              >
+                {t("confirmDownload")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </section>
+  );
+}

package/src/features/tools/logo-generator/logo-generator.container.tsx

@@ -0,0 +1,112 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { LogoGenerator } from "./widget";
+
+import { ToolCta } from "../shared/tool-cta";
+import {
+  ToolBoundarySection,
+  ToolCardGrid,
+  ToolDividedRows,
+  ToolFaqSection,
+  ToolNumberedRows,
+  ToolSection,
+  ToolStandardsSection,
+  ToolValueSection,
+  type ToolBoundaryGroup,
+  type ToolFaqItem,
+  type ToolTextCard,
+} from "../shared/tool-content-sections";
+import { ToolImageVisual, ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+type UseCaseCard = {
+  title: string;
+  description: string;
+  label: string;
+};
+
+const logoGeneratorImages = {
+  hero: "/tools/logo-generator-pseo-v3-hero.png",
+  workspace: "/tools/logo-generator-pseo-v3-workspace.png",
+  value: "/tools/logo-generator-pseo-v3-value.png",
+  result: "/tools/logo-generator-pseo-v3-result-guidance.png",
+  useCases: "/tools/logo-generator-pseo-v3-use-cases.png",
+  boundary: "/tools/logo-generator-pseo-v3-trust-boundary.png",
+} as const;
+
+function mapUseCaseCards(cards: readonly UseCaseCard[]): ToolTextCard[] {
+  return cards.map((card) => ({
+    title: card.title,
+    body: card.description,
+  }));
+}
+
+export async function LogoGeneratorContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.logoGenerator.guide");
+  const steps = t.raw("howToUseSteps") as readonly string[];
+  const valueCards = t.raw("valueCards") as readonly ToolTextCard[];
+  const guidanceBullets = t.raw("guidanceBullets") as readonly string[];
+  const standardCards = t.raw("standardCards") as readonly ToolTextCard[];
+  const useCaseCards = t.raw("useCaseCards") as readonly UseCaseCard[];
+  const boundaryGroups = t.raw("boundaryGroups") as readonly ToolBoundaryGroup[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+  const images = logoGeneratorImages;
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage={images.hero}
+      heroBackgroundAlt={t("heroImageAlt")}
+    >
+      <ToolWorkspaceSection heading={t("workspaceHeading")} hint={t("workspaceHint")}>
+        <LogoGenerator />
+      </ToolWorkspaceSection>
+      <ToolValueSection
+        heading={t("valueHeading")}
+        intro={t("valueIntro")}
+        items={valueCards}
+        visual={<ToolImageVisual src={images.value} alt={t("valueVisualAlt")} />}
+      />
+      <ToolSection heading={t("howToUse")} intro={t("howToUseIntro")}>
+        <ToolNumberedRows items={steps} />
+      </ToolSection>
+      <ToolSection
+        heading={t("resultGuidance")}
+        intro={t("resultGuidanceIntro")}
+        visual={<ToolImageVisual src={images.result} alt={t("resultVisualAlt")} />}
+        reverse
+      >
+        <ToolDividedRows items={guidanceBullets} />
+      </ToolSection>
+      <ToolStandardsSection
+        heading={t("standardsHeading")}
+        intro={t("standardsIntro")}
+        items={standardCards}
+      />
+      <ToolSection
+        heading={t("useCases")}
+        intro={t("useCasesIntro")}
+        visual={<ToolImageVisual src={images.useCases} alt={t("useCasesVisualAlt")} />}
+      >
+        <ToolCardGrid items={mapUseCaseCards(useCaseCards)} columns="two" />
+      </ToolSection>
+      <ToolBoundarySection
+        heading={t("boundaryHeading")}
+        intro={t("boundaryIntro")}
+        groups={boundaryGroups}
+        visual={<ToolImageVisual src={images.boundary} alt={t("boundaryVisualAlt")} />}
+        reverse
+      />
+      <ToolFaqSection heading={t("faq")} intro={t("faqIntro")} items={faqItems} />
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/product-name-generator", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+        tone="neutral"
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/logo-generator/logo-generator.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const logoGeneratorSpec: ToolSpec = {
+  slug: "logo-generator",
+  toolType: "generator",
+  riskLevel: "medium",
+  seo: {
+    "publishedAt": "2026-06-27",
+    "updatedAt": "2026-07-03",
+    "readingTime": "5 min",
+    "featured": false,
+    "ogImage": "/tools/logo-generator-pseo-v3-hero.png"
+  },
+  widget: {"id":"logo-generator","mode":"custom"},
+};

package/src/features/tools/logo-generator/widget/index.ts

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