@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { useTranslations } from "../../../../i18n/client";
+import { cn } from "@tomako/ui/cn";
+import { motion } from "framer-motion";
+import type { CSSProperties } from "react";
+
+import { useDeckLayout } from "./deck";
+
+export function DeckView({
+  isShuffling,
+  isCollecting,
+  selectedDeckIds,
+  onSelectCard,
+}: {
+  isShuffling: boolean;
+  isCollecting: boolean;
+  selectedDeckIds: readonly number[];
+  onSelectCard: (id: number) => void;
+}) {
+  const t = useTranslations("toolsPages.tarotReading.widget");
+  const deckLayout = useDeckLayout();
+  const { cards: activeDeckCards, isCompact, spreadWidth } = deckLayout;
+  const deckFieldWidth = isCompact
+    ? Math.max(420, spreadWidth + 120)
+    : Math.min(1600, spreadWidth + 180);
+
+  return (
+    <motion.div
+      key="deck"
+      className="mx-auto -mt-8 w-full max-w-[1680px] px-4 md:-mt-10"
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: isCollecting ? 0.2 : 0.45 }}
+    >
+      <div className="text-center">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#D7A84F]">
+          {isShuffling ? t("ritual.shuffling") : t("ritual.choose")}
+        </p>
+        <h2 className="mt-3 text-3xl font-light text-[#FFF8EA] md:text-4xl">
+          {isShuffling ? t("ritual.shufflingTitle") : t("ritual.chooseTitle")}
+        </h2>
+      </div>
+
+      <div
+        className="tarot-deck-field relative mx-auto mt-12 h-[430px] w-full max-w-[1600px] overflow-visible md:mt-14 md:h-[560px]"
+        style={{ maxWidth: deckFieldWidth }}
+      >
+        <div className="absolute left-1/2 top-[54%] h-48 w-48 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(215,168,79,0.14),transparent_68%)]" />
+        {activeDeckCards.map((deckCard, index) => {
+          const selectedIndex = selectedDeckIds.indexOf(deckCard.id);
+          const selected = selectedIndex >= 0;
+
+          return (
+            <button
+              key={deckCard.id}
+              type="button"
+              aria-label={`${t("ritual.choose")} ${index + 1}`}
+              disabled={isShuffling || isCollecting || selected || selectedDeckIds.length >= 3}
+              onClick={() => onSelectCard(deckCard.id)}
+              className={cn(
+                "tarot-deck-card absolute left-1/2 top-1/2 h-28 w-[74px] overflow-visible rounded-[0.95rem] outline-none focus-visible:ring-[3px] focus-visible:ring-[#D7A84F]/32 sm:h-32 sm:w-[86px] md:h-40 md:w-[104px]",
+                selected ? "cursor-default" : "cursor-pointer",
+                selected ? "tarot-deck-card-selected" : "",
+                isCollecting && selected ? "tarot-deck-card-collect-selected" : "",
+                isCollecting && !selected ? "tarot-deck-card-collect-dismiss" : "",
+              )}
+              style={
+                {
+                  "--deck-x": `${deckCard.x}px`,
+                  "--deck-y": `${deckCard.y}px`,
+                  "--deck-rotate": `${deckCard.rotate}deg`,
+                  "--deck-selected-lift": `${isCompact ? -54 : -72}px`,
+                  "--deck-collect-x": `${(selectedIndex - 1) * (isCompact ? 96 : 150)}px`,
+                  "--deck-collect-y": `${isCompact ? -34 : -48}px`,
+                  zIndex: index,
+                } as CSSProperties
+              }
+            />
+          );
+        })}
+      </div>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import { weakQuestionPattern } from "./constants";
+import type { DeckCard, DeckLayout } from "./types";
+
+export function createDeckSpread(
+  count: number,
+  width: number,
+  arcDepth: number,
+  rotateRange: number,
+  yOffset = -28,
+): DeckCard[] {
+  return Array.from({ length: count }, (_, index) => {
+    const progress = count === 1 ? 0.5 : index / (count - 1);
+    const centered = progress - 0.5;
+
+    return {
+      id: index,
+      x: -width / 2 + progress * width,
+      y: Math.pow(centered * 2, 2) * arcDepth + yOffset,
+      rotate: centered * rotateRange,
+    };
+  });
+}
+
+export function createResponsiveDeckLayout(viewportWidth: number): DeckLayout {
+  if (viewportWidth < 768) {
+    const spreadWidth = Math.min(360, Math.max(300, viewportWidth - 70));
+
+    return {
+      cards: createDeckSpread(78, spreadWidth, 62, 30, -22),
+      isCompact: true,
+      spreadWidth,
+    };
+  }
+
+  if (viewportWidth < 1100) {
+    const spreadWidth = Math.max(640, viewportWidth - 220);
+
+    return {
+      cards: createDeckSpread(78, spreadWidth, 92, 36, -42),
+      isCompact: false,
+      spreadWidth,
+    };
+  }
+
+  const spreadWidth = Math.min(1500, Math.max(1080, viewportWidth - 360));
+  const arcDepth = Math.min(178, Math.max(118, spreadWidth * 0.11));
+
+  return {
+    cards: createDeckSpread(78, spreadWidth, arcDepth, 46, -68),
+    isCompact: false,
+    spreadWidth,
+  };
+}
+
+export function useDeckLayout() {
+  const [viewportWidth, setViewportWidth] = useState(() =>
+    typeof window === "undefined" ? 1440 : window.innerWidth,
+  );
+
+  useEffect(() => {
+    let frame = 0;
+    const handleResize = () => {
+      window.cancelAnimationFrame(frame);
+      frame = window.requestAnimationFrame(() => {
+        setViewportWidth(window.innerWidth);
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return useMemo(() => createResponsiveDeckLayout(viewportWidth), [viewportWidth]);
+}
+
+export function isWeakQuestion(question: string): boolean {
+  const normalized = question.trim();
+  return normalized.length < 6 || weakQuestionPattern.test(normalized);
+}

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

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

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

@@ -0,0 +1,209 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { useTranslations } from "../../../../i18n/client";
+import { cn } from "@tomako/ui/cn";
+import { motion } from "framer-motion";
+import { Shuffle } from "lucide-react";
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+
+import { maxQuestionLength } from "./constants";
+
+export function LandingView({
+  question,
+  error,
+  onQuestionChange,
+  onSubmit,
+}: {
+  question: string;
+  error: string | null;
+  onQuestionChange: (value: string) => void;
+  onSubmit: (questionOverride?: string) => void;
+}) {
+  const t = useTranslations("toolsPages.tarotReading.widget");
+  const [focused, setFocused] = useState(false);
+  const [questionPage, setQuestionPage] = useState(0);
+  const [visibleQuestionRows, setVisibleQuestionRows] = useState<number[][]>([
+    [0, 1, 2],
+    [3, 4, 5],
+  ]);
+  const quickQuestionsRef = useRef<HTMLDivElement>(null);
+  const quickMeasureRefs = useRef<Array<HTMLSpanElement | null>>([]);
+  const quickQuestions = t.raw("quickQuestions") as string[];
+  const visibleQuestions = Array.from({ length: 6 }, (_, index) =>
+    quickQuestions[(questionPage * 6 + index) % quickQuestions.length],
+  );
+  const visibleQuestionKey = visibleQuestions.join("\u0000");
+
+  useLayoutEffect(() => {
+    const container = quickQuestionsRef.current;
+    if (!container) return;
+
+    function updateVisibleRows() {
+      if (!quickQuestionsRef.current) return;
+      const availableWidth = quickQuestionsRef.current.clientWidth;
+      const gap = 8;
+      const nextRows = [
+        [0, 1, 2],
+        [3, 4, 5],
+      ].map((candidateIndexes) => {
+        let usedWidth = 0;
+        return candidateIndexes.filter((index) => {
+          const measurement = quickMeasureRefs.current[index];
+          if (!measurement) return false;
+          const nextWidth =
+            usedWidth === 0
+              ? measurement.offsetWidth
+              : usedWidth + gap + measurement.offsetWidth;
+          if (nextWidth > availableWidth) return false;
+          usedWidth = nextWidth;
+          return true;
+        });
+      });
+
+      setVisibleQuestionRows((current) =>
+        current.length === nextRows.length &&
+        current.every(
+          (row, rowIndex) =>
+            row.length === nextRows[rowIndex].length &&
+            row.every((value, index) => value === nextRows[rowIndex][index]),
+        )
+          ? current
+          : nextRows,
+      );
+    }
+
+    updateVisibleRows();
+    const observer = new ResizeObserver(updateVisibleRows);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [visibleQuestionKey]);
+
+  function handleQuestionKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      event.preventDefault();
+      submitQuestion();
+    }
+  }
+
+  function submitQuestion() {
+    onSubmit();
+  }
+
+  return (
+    <motion.div
+      key="landing"
+      className="mx-auto w-full max-w-[772px]"
+      initial={{ opacity: 1, y: 14 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -22 }}
+      transition={{ duration: 0.48, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      <div
+        className={cn(
+          "tarot-magic-border tarot-glass-panel relative overflow-hidden rounded-[0.45rem] border transition-[border-color,box-shadow] duration-300",
+          focused ? "tarot-glass-panel-focus" : "",
+        )}
+      >
+        <label className="block">
+          <span className="sr-only">{t("questionLabel")}</span>
+          <textarea
+            rows={4}
+            maxLength={maxQuestionLength}
+            value={question}
+            onChange={(event) => onQuestionChange(event.target.value)}
+            onKeyDown={handleQuestionKeyDown}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            placeholder={focused ? "" : t("questionPlaceholder")}
+            aria-invalid={error ? true : undefined}
+            suppressHydrationWarning
+            className="h-28 w-full resize-none bg-transparent px-6 py-5 text-[15px] leading-6 text-white outline-none transition placeholder:text-[#6A6864] md:h-32 md:px-7"
+          />
+        </label>
+
+        <div
+          className="flex flex-col justify-between gap-3 border-t px-4 py-2.5 sm:flex-row sm:items-center md:px-6"
+          style={{ borderColor: "rgba(248, 241, 224, 0.12)" }}
+        >
+          <div className="min-w-0 flex-1">
+            {error ? (
+              <p className="text-sm font-medium text-[#F0A88F]">{error}</p>
+            ) : (
+              <p className="sr-only">{t("privacyHint")}</p>
+            )}
+          </div>
+
+          <div className="flex shrink-0 flex-col gap-1 text-right text-[11px] font-semibold tracking-[0.18em] text-[#5F5B56]">
+            <span>{t("questionLabel")} · {question.length} / {maxQuestionLength}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-5">
+        <div className="mb-3 flex items-center justify-between gap-4">
+          <p className="text-xs font-semibold tracking-[0.12em] text-[#8D887F]">
+            {t("quickTitle")}
+          </p>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1.5 text-xs text-[#77726A] transition hover:text-[#D7A84F]"
+            onClick={() => setQuestionPage((current) => current + 1)}
+          >
+            <Shuffle className="size-3.5" />
+            {t("quickRefresh")}
+          </button>
+        </div>
+        <div ref={quickQuestionsRef} className="relative flex flex-col gap-2 overflow-hidden">
+          <div aria-hidden className="pointer-events-none absolute invisible">
+            {visibleQuestions.map((item, index) => (
+              <span
+                key={`${item}-measure`}
+                ref={(element) => {
+                  quickMeasureRefs.current[index] = element;
+                }}
+                className="inline-flex whitespace-nowrap px-3.5 py-2 text-[15px] leading-5"
+              >
+                {item}
+              </span>
+            ))}
+          </div>
+          {visibleQuestionRows.map((row, rowIndex) => (
+            <div
+              key={rowIndex}
+              className="flex min-h-9 items-center gap-2 overflow-hidden"
+            >
+              {row.map((index) => {
+                const item = visibleQuestions[index];
+                return (
+                  <button
+                    key={item}
+                    type="button"
+                    className="tarot-quick-question shrink-0 whitespace-nowrap rounded-full border-0 bg-[#FFF8EA]/[0.035] px-3.5 py-2 text-left text-[15px] leading-5 text-[#AAA49A] transition hover:bg-[#D7A84F]/8 hover:text-[#F8F1E0]"
+                    onClick={() => onQuestionChange(item)}
+                  >
+                    {item}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Button
+        type="button"
+        size="lg"
+        className="tarot-magic-button mx-auto mt-8 flex h-12 min-w-32 justify-center rounded-[0.35rem] border border-[#F8F1E0] bg-[#F8F1E0] px-8 text-sm font-semibold tracking-[0.08em] text-[#080808] shadow-[0_18px_48px_rgba(248,241,224,0.18)] hover:bg-white"
+        onClick={submitQuestion}
+      >
+        {t("drawButton")}
+      </Button>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { isZhRouteLocale } from "../../../../i18n/locale-fallback";
+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";
+
+export function ReadingTextBlock({
+  children,
+  delay = 0,
+}: {
+  children: string;
+  delay?: number;
+}) {
+  return (
+    <motion.div
+      className="border border-[#2C2F31] bg-[#101112]/82 px-7 py-6 text-base leading-9 text-[#A7A4A0] shadow-[0_0_0_1px_rgba(255,255,255,0.012)] md:px-9 md:text-lg md:leading-10"
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.56, delay, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function buildReadingBlocks(reading: TarotReading, locale: AppLocale): string[] {
+  const [past, present, future] = reading.cards;
+  const shortTheme = (value: string) => value.split(/[:：]/, 1)[0];
+  const questionLens = {
+    general: "我会把判断落回这件事有没有出现新的事实、行为和结果，而不只看当下的感觉。",
+    love: "关系里真正要核对的是对方有没有回应、沟通是否清楚、边界是否被尊重，而不只是彼此还有没有情绪。",
+    career: "事业或工作上，我会具体看职责有没有变化、资源是否到位、推进是否产生了可见结果。",
+    money: "说到赚钱，我会具体看收入从哪里来、有没有成交或回款、成本是否可控，而不把忙碌本身当成收益。",
+    decision: "这个选择最终要看哪一条路更符合你的标准，也更能承担实际成本和后果。",
+    self: "这次真正值得观察的是，你的情绪、行为和边界有没有出现可以被自己确认的变化。",
+  }[reading.questionType];
+
+  if (isZhRouteLocale(locale)) {
+    return [
+      reading.overallStory,
+      `把这条时间线连起来看，我会这样理解：过去的${past.name}${past.orientation === "upright" ? "正位" : "逆位"}留下了“${shortTheme(past.theme)}”这层影响，所以事情走到今天并不突然。中间的${present.name}${present.orientation === "upright" ? "正位" : "逆位"}把焦点拉回你现在的状态——${present.meaning} 回到你问的“${reading.question}”，${questionLens}`,
+      `再往后看，${future.name}${future.orientation === "upright" ? "正位" : "逆位"}让我想到的是“${shortTheme(future.theme)}”。它描述的是这件事按现有方式发展时更容易出现的局面，但我不会把它看成已经写好的结局。对“${reading.question}”来说，真正的转折要从${present.advice}开始；随后再用现实中的具体变化验证方向，而不是只等一个答案。`,
+      reading.adjustment,
+    ];
+  }
+
+  return [
+    reading.overallStory,
+    `Past into present: ${past.name} ${past.orientation}, themed around “${shortTheme(past.theme)},” sets the background. ${past.positionLens} With ${present.name} ${present.orientation}, the focus shifts from why this happened to what is workable now. ${present.positionLens} ${present.advice}`,
+    `Present into future: ${future.name} ${future.orientation} is not a fixed prediction but an extension of the current pattern. ${future.positionLens} Adjusting the core named by ${present.name} can soften the difficult expression and strengthen the useful one; leaving it unchanged makes the shown trajectory more likely.`,
+    reading.adjustment,
+  ];
+}
+
+/** Three self-contained synthesis paragraphs for the collapsed result view. */
+export function buildSummaryBlocks(reading: TarotReading, locale: AppLocale): string[] {
+  const [past, present, future] = reading.cards;
+  const orientation = (value: typeof past) =>
+    value.orientation === "upright"
+      ? (isZhRouteLocale(locale) ? "正位" : "upright")
+      : (isZhRouteLocale(locale) ? "逆位" : "reversed");
+
+  if (isZhRouteLocale(locale)) {
+    return [
+      `围绕“${reading.question}”，${past.name}${orientation(past)}、${present.name}${orientation(present)}与${future.name}${orientation(future)}形成的主线，是从“${past.theme}”走到“${present.theme}”，再进入“${future.theme}”。这组牌真正强调的不是单一结果，而是你如何把过去形成的条件，转化为现在能够主动调整的选择。`,
+      `当前的转折点落在${present.name}${orientation(present)}：${present.positionLens} 如果继续沿用现在的方式，${future.name}${orientation(future)}所提示的趋势会逐渐明显；如果先回应当下牌指出的核心问题，未来就仍有调整空间，而不是固定结局。`,
+      `行动上，先落实${present.name}给出的提醒：${present.advice} 随后再用${future.name}校准下一步：${future.advice} 先做一个现实中可以观察结果的小动作，再根据真实反馈决定是否继续推进。`,
+    ];
+  }
+
+  return [
+    `For “${reading.question},” ${past.name} ${orientation(past)}, ${present.name} ${orientation(present)}, and ${future.name} ${orientation(future)} move from “${past.theme}” through “${present.theme}” toward “${future.theme}.” The spread is less about one fixed outcome than about turning past conditions into a choice you can make now.`,
+    `The hinge is ${present.name} ${orientation(present)}: ${present.positionLens} Continuing the same pattern makes the trajectory shown by ${future.name} more likely; responding to the present card keeps that future adjustable rather than fixed.`,
+    `Begin with the present card's cue: ${present.advice} Then use the future card to calibrate the next step: ${future.advice} Make one observable move and let real feedback—not prediction alone—guide what follows.`,
+  ];
+}
+
+export function buildShareText(
+  reading: TarotReading,
+  locale: AppLocale,
+  aiReading?: TarotAiReading | null,
+): string {
+  const readingBlocks = aiReading
+    ? [
+        aiReading.overview,
+        aiReading.narrative,
+        aiReading.turningPoint,
+        aiReading.action,
+      ]
+    : buildReadingBlocks(reading, locale);
+
+  if (isZhRouteLocale(locale)) {
+    return [
+      `问题：${reading.question}`,
+      "",
+      "牌阵：",
+      ...reading.cards.map(
+        (card) =>
+          `${getTarotPositionLabel(locale, card.position)}｜${card.name}｜${card.orientation === "upright" ? "正位" : "逆位"}`,
+      ),
+      "",
+      "完整解读：",
+      ...readingBlocks.flatMap((block) => [block, ""]),
+      ...(aiReading
+        ? [
+            "行动建议：",
+            aiReading.recommendedAction,
+            aiReading.recommendationReason,
+          ]
+        : []),
+    ].join("\n");
+  }
+
+  return [
+    `Question: ${reading.question}`,
+    "",
+    "Spread:",
+    ...reading.cards.map(
+      (card) =>
+        `${getTarotPositionLabel(locale, card.position)} | ${card.name} | ${card.orientation}`,
+    ),
+    "",
+    "Full reading:",
+    ...readingBlocks.flatMap((block) => [block, ""]),
+    ...(aiReading
+      ? [
+          "Recommended action:",
+          aiReading.recommendedAction,
+          aiReading.recommendationReason,
+        ]
+      : []),
+  ].join("\n");
+}