@tomako/tools-runtime 0.1.0

package/src/features/tools/tarot-reading/widget/tarot-reading.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    createTarotReading,
+    inferTarotQuestionType,
+    type TarotReading,
+} from "../../../../lib/tools/tarot-reading";
+import {
+    generateTarotAiReading,
+    type TarotAiReading,
+} from "../../../../host/client";
+import {
+    AnimatePresence,
+    useReducedMotion
+} from "framer-motion";
+import {
+    useEffect,
+    useRef,
+    useState
+} from "react";
+
+import { isWeakQuestion } from "./deck";
+import { DeckView } from "./deck-view";
+import { LandingView } from "./landing-view";
+import { buildShareText } from "./reading-copy";
+import { ReadingView } from "./reading-view";
+import { RevealView } from "./reveal-view";
+import { RitualView } from "./ritual-view";
+import type { ReadingStep, RitualPhase } from "./types";
+
+export function TarotReadingWidget() {
+  const t = useTranslations("toolsPages.tarotReading.widget");
+  const locale = useLocale() as AppLocale;
+  const reducedMotion = useReducedMotion();
+
+  const [step, setStep] = useState<ReadingStep>("input");
+  const [question, setQuestion] = useState("");
+  const [reading, setReading] = useState<TarotReading | null>(null);
+  const [aiReading, setAiReading] = useState<TarotAiReading | null>(null);
+  const [isAiLoading, setIsAiLoading] = useState(false);
+  const [aiFailed, setAiFailed] = useState(false);
+  const [selectedDeckIds, setSelectedDeckIds] = useState<number[]>([]);
+  const [isCollecting, setIsCollecting] = useState(false);
+  const [isShuffling, setIsShuffling] = useState(false);
+  const [ritualPhase, setRitualPhase] = useState<RitualPhase>("beams");
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const aiRequestRef = useRef(0);
+
+  useEffect(() => {
+    document.documentElement.dataset.tarotStep = step;
+    return () => {
+      delete document.documentElement.dataset.tarotStep;
+    };
+  }, [step]);
+
+  useEffect(() => {
+    if (step !== "choose") return;
+    window.scrollTo({ top: 0, behavior: reducedMotion ? "auto" : "smooth" });
+  }, [reducedMotion, step]);
+
+  useEffect(() => {
+    if (step !== "ritual") return;
+    const pileTimer = window.setTimeout(
+      () => setRitualPhase("pile"),
+      reducedMotion ? 120 : 2000,
+    );
+    const pileExpandTimer = window.setTimeout(
+      () => setRitualPhase("pileExpand"),
+      reducedMotion ? 210 : 2750,
+    );
+    const sphereTimer = window.setTimeout(
+      () => setRitualPhase("sphere"),
+      reducedMotion ? 300 : 3600,
+    );
+    const sphereCollapseTimer = window.setTimeout(
+      () => setRitualPhase("sphereCollapse"),
+      reducedMotion ? 390 : 4750,
+    );
+    const stacksTimer = window.setTimeout(
+      () => setRitualPhase("stacks"),
+      reducedMotion ? 480 : 5500,
+    );
+    const finalPileTimer = window.setTimeout(
+      () => setRitualPhase("finalPile"),
+      reducedMotion ? 570 : 6200,
+    );
+    const chooseTimer = window.setTimeout(
+      () => setStep("choose"),
+      reducedMotion ? 720 : 6850,
+    );
+
+    return () => {
+      window.clearTimeout(pileTimer);
+      window.clearTimeout(pileExpandTimer);
+      window.clearTimeout(sphereTimer);
+      window.clearTimeout(sphereCollapseTimer);
+      window.clearTimeout(stacksTimer);
+      window.clearTimeout(finalPileTimer);
+      window.clearTimeout(chooseTimer);
+    };
+  }, [reducedMotion, step]);
+
+  useEffect(() => {
+    if (step !== "choose") return;
+    const timer = window.setTimeout(() => setIsShuffling(false), reducedMotion ? 180 : 720);
+    return () => window.clearTimeout(timer);
+  }, [reducedMotion, step]);
+
+  useEffect(() => {
+    if (step !== "reveal") return;
+    const timer = window.setTimeout(() => {
+      setStep("reading");
+    }, reducedMotion ? 360 : 3000);
+    return () => window.clearTimeout(timer);
+  }, [reducedMotion, step]);
+
+  function beginReading(questionOverride?: string) {
+    const activeQuestion = (questionOverride ?? question).trim();
+    if (isWeakQuestion(activeQuestion)) {
+      setError(t("errors.question"));
+      setReading(null);
+      return;
+    }
+
+    setError(null);
+    setCopied(false);
+    setAiReading(null);
+    setAiFailed(false);
+    setIsAiLoading(true);
+    setSelectedDeckIds([]);
+    setIsCollecting(false);
+    setIsShuffling(true);
+    setRitualPhase("beams");
+    const nextReading = createTarotReading({
+      question: activeQuestion,
+      questionType: inferTarotQuestionType(activeQuestion),
+      locale,
+      seed: `${Date.now()}-${Math.random()}`,
+    });
+    setReading(nextReading);
+    const requestId = aiRequestRef.current + 1;
+    aiRequestRef.current = requestId;
+    void generateTarotAiReading(nextReading, locale)
+      .then((result: TarotAiReading) => {
+        if (aiRequestRef.current !== requestId) return;
+        setAiReading(result);
+        setAiFailed(false);
+      })
+      .catch(() => {
+        if (aiRequestRef.current !== requestId) return;
+        setAiFailed(true);
+      })
+      .finally(() => {
+        if (aiRequestRef.current !== requestId) return;
+        setIsAiLoading(false);
+      });
+    setStep("ritual");
+  }
+
+  function selectDeckCard(id: number) {
+    if (isShuffling || selectedDeckIds.includes(id) || selectedDeckIds.length >= 3) return;
+    setSelectedDeckIds((current) => {
+      const next = [...current, id];
+      if (next.length === 3) {
+        window.setTimeout(() => setIsCollecting(true), reducedMotion ? 60 : 180);
+        window.setTimeout(() => setStep("reveal"), reducedMotion ? 240 : 1100);
+      }
+      return next;
+    });
+  }
+
+  async function copyReading() {
+    if (!reading) return;
+    const text = buildShareText(reading, locale, aiReading);
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.setAttribute("readonly", "true");
+      textArea.style.position = "fixed";
+      textArea.style.opacity = "0";
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textArea);
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1800);
+  }
+
+  function resetReading() {
+    aiRequestRef.current += 1;
+    setStep("input");
+    setReading(null);
+    setAiReading(null);
+    setIsAiLoading(false);
+    setAiFailed(false);
+    setSelectedDeckIds([]);
+    setIsCollecting(false);
+    setRitualPhase("beams");
+    setIsShuffling(false);
+    setCopied(false);
+    setError(null);
+  }
+
+  return (
+    <div className="mx-auto w-full">
+      <AnimatePresence mode="sync">
+        {step === "input" ? (
+          <LandingView
+            key="input"
+            question={question}
+            error={error}
+            onQuestionChange={(value) => {
+              setQuestion(value);
+              setError(null);
+            }}
+            onSubmit={beginReading}
+          />
+        ) : null}
+
+        {step === "ritual" && reading ? <RitualView key="ritual" phase={ritualPhase} /> : null}
+
+        {step === "choose" && reading ? (
+          <DeckView
+            key="choose"
+            isShuffling={isShuffling}
+            isCollecting={isCollecting}
+            selectedDeckIds={selectedDeckIds}
+            onSelectCard={selectDeckCard}
+          />
+        ) : null}
+
+        {step === "reveal" && reading ? (
+          <RevealView
+            key="reveal"
+            reading={reading}
+            locale={locale}
+          />
+        ) : null}
+
+        {step === "reading" && reading ? (
+          <ReadingView
+            key="reading"
+            reading={reading}
+            locale={locale}
+            aiReading={aiReading}
+            isAiLoading={isAiLoading}
+            aiFailed={aiFailed}
+            copied={copied}
+            onCopy={copyReading}
+            onReset={resetReading}
+          />
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/features/tools/tarot-reading/widget/types.ts

@@ -0,0 +1,22 @@
+export type ReadingStep = "input" | "ritual" | "choose" | "reveal" | "reading";
+export type RitualPhase =
+  | "beams"
+  | "pile"
+  | "pileExpand"
+  | "sphere"
+  | "sphereCollapse"
+  | "stacks"
+  | "finalPile";
+
+export type DeckCard = {
+  id: number;
+  x: number;
+  y: number;
+  rotate: number;
+};
+
+export type DeckLayout = {
+  cards: DeckCard[];
+  isCompact: boolean;
+  spreadWidth: number;
+};

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

@@ -0,0 +1,114 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { TwitterGifDownloader } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolComparisonSection,
+    ToolDividedRows,
+    ToolFaqSection,
+    ToolSection,
+    ToolUseCasesBandSection,
+    type ToolComparisonItem,
+    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";
+
+type ComparisonSourceItem = {
+  pain: string;
+  tomako: string;
+};
+
+function mapComparisonItems(items: readonly ComparisonSourceItem[]): ToolComparisonItem[] {
+  return items.map((item) => ({ before: item.pain, after: item.tomako }));
+}
+
+export async function TwitterGifDownloaderContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(
+    locale,
+    "toolsPages.twitterGifDownloader.guide",
+  );
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage="/tools/twitter-gif-downloader-hero.webp"
+      heroBackgroundAlt={t("heroVisualAlt")}
+    >
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <TwitterGifDownloader />
+      </ToolWorkspaceSection>
+
+      <ToolGuideSection
+        heading={t("resultHeading")}
+        visual={
+          <ToolImageVisual
+            src="/tools/twitter-gif-downloader-result-cat.webp"
+            alt={t("resultVisualAlt")}
+            priority
+          />
+        }
+      >
+        <ToolDividedRows items={t.raw("resultBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolGuideSection
+        heading={t("standardsHeading")}
+        reverse
+        visual={
+          <ToolImageVisual
+            src="/tools/twitter-gif-downloader-support.webp"
+            alt={t("supportVisualAlt")}
+          />
+        }
+      >
+        <ToolDividedRows items={t.raw("standardsBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolComparisonSection
+        heading={t("comparisonHeading")}
+        beforeLabel={t("comparisonBefore")}
+        afterLabel={t("comparisonAfter")}
+        items={mapComparisonItems(t.raw("comparisonItems") as readonly ComparisonSourceItem[])}
+      />
+
+      <ToolSection
+        heading={t("resultGuidanceHeading")}
+        visual={
+          <ToolImageVisual
+            src="/tools/twitter-gif-downloader-use-case.webp"
+            alt={t("useCaseVisualAlt")}
+          />
+        }
+      >
+        <ToolCardGrid
+          items={t.raw("resultGuidanceItems") as readonly ToolTextCard[]}
+          size="prominent"
+        />
+      </ToolSection>
+
+      <ToolUseCasesBandSection heading={t("useCases")} items={t.raw("useCaseItems") as readonly string[]} />
+
+      <ToolFaqSection heading={t("faq")} items={t.raw("faqItems") as readonly ToolFaqItem[]} />
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/og-image-generator", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

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

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const twitterGifDownloaderSpec: ToolSpec = {
+  slug: "twitter-gif-downloader",
+  toolType: "downloader",
+  seo: {
+    "publishedAt": "2026-06-29",
+    "updatedAt": "2026-08-04",
+    "readingTime": "5 min",
+    "featured": false,
+    "ogImage": "/tools/twitter-gif-downloader-hero.webp"
+  },
+  widget: {"id":"twitter-gif-downloader","mode":"custom"},
+};

package/src/features/tools/twitter-gif-downloader/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const TwitterGifDownloader = dynamic(() =>
+  import("./twitter-gif-downloader").then((module) => module.TwitterGifDownloader),
+);