@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,189 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { useTranslations } from "../../../../i18n/client";
+import { isZhRouteLocale } from "../../../../i18n/locale-fallback";
+import Link from "next/link";
+import type { AppLocale } from "../../../../i18n/locale";
+import { getTarotPositionLabel, type TarotReading } from "../../../../lib/tools/tarot-reading";
+import type { TarotAiReading } from "../../../../host/client";
+import { motion } from "framer-motion";
+import { ArrowRight, Copy, RefreshCw } from "lucide-react";
+import { useMemo } from "react";
+
+import { SelectedCardFigure } from "./cards";
+import { buildReadingBlocks } from "./reading-copy";
+
+function splitReadingParagraphs(text: string) {
+  return text
+    .trim()
+    .split(/\n+/)
+    .map((block) => block.trim())
+    .filter(Boolean)
+    .flatMap((block) => {
+      const sentences = block.match(/[^。！？.!?]+[。！？.!?]?/g)?.map((sentence) => sentence.trim()).filter(Boolean) ?? [block];
+      const paragraphs: string[] = [];
+      let paragraph = "";
+      let sentenceCount = 0;
+
+      for (const sentence of sentences) {
+        const separator = paragraph && !/[。！？]$/.test(paragraph) ? " " : "";
+        const nextParagraph = `${paragraph}${separator}${sentence}`;
+
+        if (paragraph && (sentenceCount >= 2 || nextParagraph.length > 135)) {
+          paragraphs.push(paragraph);
+          paragraph = sentence;
+          sentenceCount = 1;
+        } else {
+          paragraph = nextParagraph;
+          sentenceCount += 1;
+        }
+      }
+
+      if (paragraph) paragraphs.push(paragraph);
+      return paragraphs;
+    });
+}
+
+function ReadingParagraphs({ text, className }: { text: string; className?: string }) {
+  return (
+    <div className={`mt-3 space-y-3 ${className ?? ""}`}>
+      {splitReadingParagraphs(text).map((paragraph, index) => (
+        <p key={`${index}-${paragraph.slice(0, 18)}`}>{paragraph}</p>
+      ))}
+    </div>
+  );
+}
+
+function repeatsCardMeaning(meaning: string, questionConnection: string) {
+  const normalizedConnection = questionConnection.replace(/[\s，,；;：:]/g, "");
+  return meaning
+    .split(/[。！？.!?；;]/)
+    .map((part) => part.replace(/[\s，,：:]/g, "").trim())
+    .filter((part) => part.length >= 8)
+    .some((part) => normalizedConnection.includes(part));
+}
+
+export function ReadingView({
+  reading, locale, aiReading, isAiLoading, copied, onCopy, onReset,
+}: {
+  reading: TarotReading;
+  locale: AppLocale;
+  aiReading: TarotAiReading | null;
+  isAiLoading: boolean;
+  aiFailed: boolean;
+  copied: boolean;
+  onCopy: () => void;
+  onReset: () => void;
+}) {
+  const t = useTranslations("toolsPages.tarotReading.widget");
+  const zh = isZhRouteLocale(locale);
+  const localBlocks = useMemo(() => buildReadingBlocks(reading, locale), [locale, reading]);
+  const fullBlocks = aiReading
+    ? [aiReading.overview, aiReading.narrative, aiReading.turningPoint, aiReading.action]
+    : localBlocks;
+  const toolNames: Record<string, string> = zh
+    ? {
+        "startup-idea-research": "创业方向研究", "product-name-generator": "产品取名器",
+        "cold-start-channel-selector": "冷启动渠道选择器", "gtm-readiness-checklist": "GTM 准备度清单",
+        "product-poster-generator": "产品海报生成器", "og-image-generator": "OG 分享图生成器",
+      }
+    : {
+        "startup-idea-research": "Startup Idea Research", "product-name-generator": "Product Name Generator",
+        "cold-start-channel-selector": "Cold Start Channel Selector", "gtm-readiness-checklist": "GTM Readiness Checklist",
+        "product-poster-generator": "Product Poster Generator", "og-image-generator": "OG Image Generator",
+      };
+
+  return (
+    <motion.div
+      key="reading"
+      className="mx-auto h-full w-full max-w-[1440px] px-2"
+      initial={{ opacity: 0, y: 18, scale: 0.98 }} animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, y: -14 }} transition={{ duration: 0.58, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      <div className="grid h-full min-h-0 gap-5 lg:grid-cols-[150px_minmax(0,1fr)] lg:items-stretch xl:grid-cols-[160px_minmax(0,1fr)] xl:gap-6">
+        <aside className="flex flex-row justify-center gap-4 overflow-x-auto pb-2 lg:h-full lg:flex-col lg:items-center lg:justify-center lg:gap-[clamp(40px,7vh,90px)] lg:overflow-hidden lg:pb-0">
+          {reading.cards.map((card, index) => (
+            <SelectedCardFigure key={card.position} card={card} locale={locale} compact resultScale priority={index === 0} />
+          ))}
+        </aside>
+
+        <section className="tarot-magic-border flex h-full min-h-0 flex-col overflow-hidden border border-[#303235] bg-[#090A0A]/94 shadow-[0_28px_90px_rgba(0,0,0,0.34)]">
+          <header className="flex flex-col gap-4 border-b border-[#222426] px-6 py-5 md:px-8 xl:flex-row xl:items-center xl:justify-between">
+            <h2 className="max-w-4xl text-2xl font-semibold leading-snug text-[#E6E1D8] md:text-3xl">
+              {zh ? "问题：" : "Question: "}{reading.question}
+            </h2>
+            <div className="flex shrink-0 gap-2">
+              <Button type="button" variant="outline" size="sm" className="tarot-magic-border border-[#D7A84F]/28 bg-[#FFF8EA] text-[15px] font-semibold text-[#080808] hover:bg-white hover:text-[#080808]" onClick={onCopy}>
+                <Copy aria-hidden className="size-4" />{copied ? t("copied") : t("copy")}
+              </Button>
+              <Button type="button" variant="outline" size="sm" className="tarot-magic-border border-[#D7A84F]/28 bg-[#FFF8EA] text-[15px] font-semibold text-[#080808] hover:bg-white hover:text-[#080808]" onClick={onReset}>
+                <RefreshCw aria-hidden className="size-4" />{t("reset")}
+              </Button>
+            </div>
+          </header>
+
+          <div className="tarot-reading-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 md:px-8">
+            {isAiLoading ? (
+              <div className="border border-[#2C2F31] bg-[#101112]/82 px-7 py-10 text-center text-base text-[#A7A4A0]">
+                <span className="mx-auto mb-4 block size-5 animate-spin rounded-full border border-[#D7A84F]/30 border-t-[#D7A84F]" />
+                {zh ? "正在结合你的问题与三张牌，整理这次牌阵的主线…" : "Connecting your question with the three-card story…"}
+              </div>
+            ) : (
+              <motion.div className="space-y-4" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45 }}>
+                      <section className="bg-[#151718]/88 px-6 py-6">
+                        <p className="text-base font-semibold tracking-[0.12em] text-[#D7B66F]">{zh ? "核心洞察" : "Core insight"}</p>
+                        <ReadingParagraphs text={fullBlocks[0]} className="text-[17px] leading-8 text-[#D8D4CC] md:text-lg" />
+                      </section>
+
+                      {reading.cards.map((card) => {
+                        const deep = aiReading?.cardReadings.find((item: { position: string }) => item.position === card.position);
+                        const questionConnection = deep?.questionConnection
+                          && !repeatsCardMeaning(card.meaning, deep.questionConnection)
+                          ? deep.questionConnection
+                          : card.questionConnection;
+                        return (
+                        <article key={card.position} className="border border-[#292B2D] bg-[#0E0F10]/88">
+                          <header className="border-b border-[#242628] px-5 py-4">
+                            <p className="text-[15px] font-medium uppercase tracking-[0.12em] text-[#8F8A82]">{zh ? "时间之流牌位" : "Timeline position"}</p>
+                            <h3 className="mt-1 text-lg font-semibold text-[#E9E3D8]">
+                              {getTarotPositionLabel(locale, card.position)} · {card.name}（{card.orientation === "upright" ? (zh ? "正位" : "upright") : (zh ? "逆位" : "reversed")}）
+                            </h3>
+                          </header>
+                          <dl className="grid gap-x-6 gap-y-3 px-5 py-5 text-[15px] leading-7 md:grid-cols-[110px_1fr] md:text-base">
+                            <dt className="font-medium text-[#8F8A82]">{zh ? "可见象征" : "Visible imagery"}</dt><dd className="text-[#AAA7A1]">{zh ? card.visibleImagery : (deep?.imagery ?? card.visibleImagery)}</dd>
+                            <dt className="font-medium text-[#8F8A82]">{zh ? "牌意链接" : "Card meaning"}</dt><dd className="text-[#AAA7A1]">{zh ? card.meaning : (deep?.meaning ?? card.meaning)}</dd>
+                            <dt className="font-medium text-[#8F8A82]">{zh ? "与你的问题" : "In your question"}</dt><dd className="text-[#AAA7A1]">{questionConnection}</dd>
+                            <dt className="font-medium text-[#8F8A82]">{zh ? "现实提醒" : "Reality check"}</dt><dd className="font-semibold text-[#D8C59C]">{deep?.realityCheck ?? card.advice}</dd>
+                          </dl>
+                        </article>
+                        );
+                      })}
+
+                      <section className="border-l-2 border-[#B99452] bg-[#101112]/70 px-5 py-5">
+                        <p className="text-[15px] font-semibold tracking-[0.12em] text-[#C6A25E]">{zh ? "综合判断" : "Synthesis"}</p>
+                        <ReadingParagraphs text={`${fullBlocks[1]}\n${fullBlocks[2]}`} className="text-[15px] leading-7 text-[#AAA7A1] md:text-base" />
+                      </section>
+                      <section className="border-l-2 border-[#B99452] bg-[#101112]/70 px-5 py-5">
+                        <p className="text-[15px] font-semibold tracking-[0.12em] text-[#C6A25E]">{zh ? "下一步" : "Next step"}</p>
+                        <ReadingParagraphs text={fullBlocks[3]} className="text-[15px] leading-7 font-medium text-[#D8C59C] md:text-base" />
+                      </section>
+
+                      {aiReading ? (
+                        <section className="border border-[#D7A84F]/32 bg-[#D7A84F]/[0.06] px-5 py-5">
+                          <p className="text-[15px] font-semibold tracking-[0.12em] text-[#D7A84F]">{zh ? "把提醒变成行动" : "Turn insight into action"}</p>
+                          <h3 className="mt-2 text-lg font-semibold text-[#F8F1E0]">{aiReading.recommendedAction}</h3>
+                          <p className="mt-2 text-[15px] leading-7 text-[#A7A4A0] md:text-base">{aiReading.recommendationReason}</p>
+                          <Link href={`/tools/${aiReading.recommendedToolSlug}`} className="mt-4 inline-flex min-h-10 items-center gap-2 bg-[#F8F1E0] px-4 text-[15px] font-semibold text-[#080808] hover:bg-white">
+                            {toolNames[aiReading.recommendedToolSlug] ?? aiReading.recommendedToolSlug}<ArrowRight className="size-4" />
+                          </Link>
+                        </section>
+                      ) : null}
+              </motion.div>
+            )}
+          </div>
+        </section>
+      </div>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,50 @@
+"use client";
+
+import type { AppLocale } from "../../../../i18n/locale";
+import type { TarotReading } from "../../../../lib/tools/tarot-reading";
+import { motion, useReducedMotion } from "framer-motion";
+import { useEffect, useState } from "react";
+
+import { SelectedCardFigure } from "./cards";
+
+export function RevealView({
+  reading,
+  locale,
+}: {
+  reading: TarotReading;
+  locale: AppLocale;
+}) {
+  const reducedMotion = useReducedMotion();
+  const [faceUp, setFaceUp] = useState(false);
+
+  useEffect(() => {
+    const flipTimer = window.setTimeout(
+      () => setFaceUp(true),
+      reducedMotion ? 120 : 1000,
+    );
+    return () => window.clearTimeout(flipTimer);
+  }, [reducedMotion]);
+
+  return (
+    <motion.div
+      key="reveal"
+      className="mx-auto flex min-h-[62vh] w-full max-w-7xl items-center justify-center px-2 py-10"
+      initial={{ opacity: 0, y: 18 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -16 }}
+      transition={{ duration: 0.58, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      <div className="grid w-full items-end justify-items-center gap-10 md:grid-cols-3 md:gap-16">
+        {reading.cards.map((card, index) => (
+          <SelectedCardFigure
+            key={card.position}
+            card={card}
+            locale={locale}
+            priority={index === 0}
+            faceUp={faceUp}
+          />
+        ))}
+      </div>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,276 @@
+"use client";
+
+import { useTranslations } from "../../../../i18n/client";
+import { cn } from "@tomako/ui/cn";
+import {
+    AnimatePresence,
+    motion,
+    useReducedMotion,
+} from "framer-motion";
+import type { CSSProperties } from "react";
+
+import { CardBack } from "./cards";
+import {
+    ritualRays,
+    ritualSphereCards,
+    ritualStackCards,
+    ritualStars
+} from "./constants";
+import type { RitualPhase } from "./types";
+
+export function RitualSphere() {
+  return (
+    <motion.div
+      key="sphere"
+      aria-hidden
+      className="tarot-card-sphere-stage absolute inset-0 z-10 flex items-center justify-center"
+      initial={{ opacity: 0.98, scale: 1 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 1.06 }}
+      transition={{ duration: 0.86, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      <div className="tarot-card-sphere relative h-[80vh] min-h-[580px] w-[min(1180px,98vw)]">
+        <div className="absolute left-1/2 top-1/2 h-32 w-20 -translate-x-1/2 -translate-y-1/2 opacity-75 md:h-44 md:w-28">
+          <CardBack />
+        </div>
+        {ritualSphereCards.map((card) => (
+          <div
+            key={card.id}
+            className="tarot-sphere-card h-32 w-[76px] md:h-56 md:w-[132px]"
+            style={
+              {
+                "--sphere-yaw": `${card.yaw}deg`,
+                "--sphere-pitch": `${card.pitch}deg`,
+                "--sphere-radius": `${card.radius}px`,
+                "--sphere-tilt": `${card.tilt}deg`,
+                "--sphere-scale": card.scale,
+                "--sphere-opacity": card.opacity,
+                "--sphere-delay": `${card.delay}s`,
+              } as CSSProperties
+            }
+          >
+            <CardBack />
+          </div>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
+
+export function RitualMorphCards({ mode }: { mode: "expand" | "collapse" }) {
+  return (
+    <motion.div
+      key={mode}
+      aria-hidden
+      className="tarot-card-sphere-stage absolute inset-0 z-10 flex items-center justify-center"
+      initial={{ opacity: mode === "expand" ? 0.82 : 0.92 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.18, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      <div className="relative h-[80vh] min-h-[580px] w-[min(1180px,98vw)]">
+        {ritualSphereCards.map((card, index) => {
+          const stackCard = ritualStackCards[index];
+
+          return (
+            <div
+              key={`${mode}-${card.id}`}
+              className={cn(
+                "tarot-morph-card h-32 w-[76px] md:h-56 md:w-[132px]",
+                mode === "expand" ? "tarot-morph-card-expand" : "tarot-morph-card-collapse",
+              )}
+              style={
+                {
+                  "--sphere-yaw": `${card.yaw}deg`,
+                  "--sphere-pitch": `${card.pitch}deg`,
+                  "--sphere-radius": `${card.radius}px`,
+                  "--sphere-tilt": `${card.tilt}deg`,
+                  "--sphere-scale": card.scale,
+                  "--sphere-opacity": card.opacity,
+                  "--morph-delay": `${mode === "expand" ? card.delay : stackCard.delay * 0.45}s`,
+                  "--stack-x": `${stackCard.x}px`,
+                  "--stack-y": `${stackCard.y}px`,
+                  "--stack-rotate": `${stackCard.rotate}deg`,
+                  "--stack-opacity": stackCard.opacity,
+                  zIndex: stackCard.depth,
+                } as CSSProperties
+              }
+            >
+              <CardBack />
+            </div>
+          );
+        })}
+      </div>
+    </motion.div>
+  );
+}
+
+export function RitualPile({ variant = "center" }: { variant?: "center" | "final" }) {
+  const isFinal = variant === "final";
+
+  return (
+    <motion.div
+      key={variant}
+      className="tarot-ritual-pile relative z-10 h-[188px] w-[110px] md:h-[232px] md:w-[136px]"
+      initial={{ opacity: isFinal ? 0.28 : 0.14, scale: isFinal ? 0.28 : 0.08 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: isFinal ? 0.82 : 1.08 }}
+      transition={{ duration: isFinal ? 0.5 : 0.66, ease: [0.16, 0.84, 0.18, 1] }}
+    >
+      <div className="absolute inset-[-42px] rounded-full bg-[radial-gradient(circle,rgba(248,241,224,0.16),transparent_68%)]" />
+      {[0, 1, 2, 3, 4].map((layer) => (
+        <div
+          key={layer}
+          className="absolute inset-0"
+          style={{
+            transform: `translate(${layer * 2.1}px, ${layer * 1.1}px) rotate(${layer * 0.7 - 1.4}deg)`,
+            opacity: 0.32 + layer * 0.14,
+          }}
+        >
+          <CardBack priority={layer === 4} />
+        </div>
+      ))}
+    </motion.div>
+  );
+}
+
+export function RitualThreeStacks() {
+  return (
+    <motion.div
+      key="stacks"
+      aria-hidden
+      className="absolute inset-0 z-10 flex items-center justify-center"
+      initial={{ opacity: 0, scale: 1.08 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.55 }}
+      transition={{ duration: 0.48, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      <div className="relative h-[240px] w-[860px] max-w-[92vw] md:h-[280px]">
+        {ritualStackCards.map((card) => (
+          <div
+            key={card.id}
+            className="tarot-stack-card tarot-stack-card-final h-[138px] w-[82px] md:h-[164px] md:w-[98px]"
+            style={
+              {
+                "--stack-x": `${card.x}px`,
+                "--stack-y": `${card.y}px`,
+                "--stack-rotate": `${card.rotate}deg`,
+                "--stack-delay": `${card.delay}s`,
+                "--stack-opacity": card.opacity,
+                zIndex: card.depth,
+              } as CSSProperties
+            }
+          >
+            <CardBack />
+          </div>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
+
+export function RitualView({
+  phase,
+}: {
+  phase: RitualPhase;
+}) {
+  const t = useTranslations("toolsPages.tarotReading.widget");
+  const reducedMotion = useReducedMotion();
+  const showPrompt = phase === "beams" || phase === "pile" || phase === "pileExpand";
+
+  return (
+    <motion.div
+      key="ritual"
+      className="fixed inset-0 z-30 flex items-center justify-center overflow-hidden bg-black text-[#D9D2C7]"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: reducedMotion ? 0 : 0.22 }}
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.08),transparent_18%),linear-gradient(180deg,#000_0%,#020202_54%,#000_100%)]" />
+      {phase !== "beams" ? (
+        <div className="absolute inset-0">
+          {ritualStars.map((star) => (
+            <span
+              key={star.id}
+              className="tarot-ritual-star absolute rounded-full bg-[#F5F5F1] shadow-[0_0_16px_rgba(255,255,255,0.46)]"
+              style={
+                {
+                  left: `${star.left}%`,
+                  top: `${star.top}%`,
+                  width: star.size,
+                  height: star.size,
+                  opacity: star.opacity,
+                  "--ritual-star-opacity": star.opacity,
+                  "--ritual-star-delay": `${star.delay}s`,
+                } as CSSProperties
+              }
+            />
+          ))}
+        </div>
+      ) : null}
+
+      <AnimatePresence>
+        {phase === "beams" ? (
+          <motion.div
+            key="beams"
+            aria-hidden
+            className="absolute inset-0"
+            initial={{ opacity: reducedMotion ? 0 : 1 }}
+            animate={{ opacity: reducedMotion ? 0 : 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0 }}
+          >
+            {ritualRays.map((ray) => (
+              <span
+                key={ray.id}
+                className="tarot-ritual-ray"
+                style={
+                  {
+                    "--ray-angle": `${ray.angle}deg`,
+                    "--ray-length": `${ray.length}px`,
+                    "--ray-start": `${ray.start}px`,
+                    "--ray-near": `${ray.start * 0.72}px`,
+                    "--ray-mid": `${ray.mid}px`,
+                    "--ray-width": `${ray.width}px`,
+                    "--ray-opacity": ray.opacity,
+                    "--ray-delay": `${ray.delay}s`,
+                  } as CSSProperties
+                }
+              />
+            ))}
+            <span className="tarot-ritual-core absolute left-1/2 top-1/2" />
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+
+      <AnimatePresence mode="wait">
+        {showPrompt ? (
+          <motion.p
+            key="focus-text"
+            className="tarot-ritual-prompt pointer-events-none absolute inset-0 z-20 flex items-center justify-center px-6 text-center text-2xl font-light tracking-[0.04em] text-[#D8D3CC]/86 md:text-4xl"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: reducedMotion ? 0 : 0.34 }}
+          >
+            {t("ritual.focusPrompt")}
+          </motion.p>
+        ) : null}
+      </AnimatePresence>
+
+      <AnimatePresence mode="sync">
+        {phase === "pile" ? <RitualPile /> : null}
+        {phase === "pileExpand" ? <RitualMorphCards mode="expand" /> : null}
+        {phase === "sphere" ? <RitualSphere /> : null}
+        {phase === "sphereCollapse" ? <RitualMorphCards mode="collapse" /> : null}
+        {phase === "stacks" ? <RitualThreeStacks /> : null}
+        {phase === "finalPile" ? (
+          <div className="relative z-20 flex flex-col items-center">
+            <RitualPile variant="final" />
+          </div>
+        ) : null}
+      </AnimatePresence>
+    </motion.div>
+  );
+}