@tomako/tools-runtime 0.1.0

package/src/features/tools/cold-start-channel-selector/widget/constants.ts

@@ -0,0 +1,46 @@
+import type {
+    ColdStartChannelConfidence,
+    ColdStartChannelPriority,
+    ColdStartChannelSelectorInput,
+} from "../../../../lib/tools/cold-start-channel-selector-schema";
+
+export const GRACE_WINDOW_MS = 420_000;
+
+export const initialInput: ColdStartChannelSelectorInput = {
+  productUrl: undefined,
+  productDescription: undefined,
+  productForm: "unknown",
+  targetMarket: "unknown",
+  stage: "launched",
+  weeklyHours: "3_7",
+  budget: "under_500",
+  targetAudience: undefined,
+  existingAssets: undefined,
+  triedChannels: undefined,
+  constraints: undefined,
+};
+
+export const CONFIDENCE_STYLE: Record<ColdStartChannelConfidence, string> = {
+  high: "bg-[#E8F7EE] text-[#15803D]",
+  medium: "bg-[#FFF6D7] text-[#92600A]",
+  low: "bg-[#F1F4F8] text-[#667085]",
+};
+
+export const PRIORITY_STYLE: Record<ColdStartChannelPriority, string> = {
+  first: "border-[#111111] bg-[#F8FAFC]",
+  second: "border-[#D8E2EF] bg-white",
+  third: "border-[#D8E2EF] bg-white",
+  later: "border-[#E4E9F1] bg-white",
+};
+
+export const tomatoParticlePalette = ["#FF4F3E", "#FF7A45", "#91D63B", "#111111", "#FFE8A3"];
+
+export type TomatoParticle = {
+  targetX: number;
+  targetY: number;
+  color: string;
+  angle: number;
+  radius: number;
+  delay: number;
+  drift: number;
+};

package/src/features/tools/cold-start-channel-selector/widget/form-controls.tsx

@@ -0,0 +1,41 @@
+import { ToolField, toolSelectTriggerClass } from "../../../../components/tools/workspace";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+
+import type { Option } from "./types";
+
+export function SelectField({
+  label,
+  value,
+  options,
+  disabled,
+  onValueChange,
+}: {
+  label: string;
+  value: string;
+  options: readonly Option[];
+  disabled: boolean;
+  onValueChange: (value: string) => void;
+}) {
+  return (
+    <ToolField label={label}>
+      <Select value={value} onValueChange={onValueChange} disabled={disabled}>
+        <SelectTrigger className={toolSelectTriggerClass}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </ToolField>
+  );
+}

package/src/features/tools/cold-start-channel-selector/widget/helpers.ts

@@ -0,0 +1,75 @@
+import type { ColdStartChannelSelectorResult } from "../../../../lib/tools/cold-start-channel-selector-schema";
+
+import type { TomatoParticle } from "./constants";
+
+export function buildReportText(data: ColdStartChannelSelectorResult): string {
+  const channels = data.priorityChannels
+    .map((channel) => `- ${channel.name}: ${channel.fitReason} First action: ${channel.firstAction}`)
+    .join("\n");
+  const plan = data.executionPlan
+    .map((item) => `- ${item.day}: ${item.focus} (${item.expectedSignal})`)
+    .join("\n");
+  return `${data.summary}\n\nPriority channels:\n${channels}\n\nExecution plan:\n${plan}\n\nBoundary:\n${data.boundaryNote}`;
+}
+
+export function clamp01(value: number) {
+  return Math.min(1, Math.max(0, value));
+}
+
+export function easeInCubic(value: number) {
+  return value * value * value;
+}
+
+export function easeInOutCubic(value: number) {
+  return value < 0.5 ? 4 * value * value * value : 1 - Math.pow(-2 * value + 2, 3) / 2;
+}
+
+export function createTomatoParticles(width: number, height: number, image: HTMLImageElement) {
+  const sampleWidth = 96;
+  const sampleHeight = 80;
+  const sampleCanvas = document.createElement("canvas");
+  const sampleContext = sampleCanvas.getContext("2d", { willReadFrequently: true });
+
+  if (!sampleContext) return [];
+
+  sampleCanvas.width = sampleWidth;
+  sampleCanvas.height = sampleHeight;
+  sampleContext.clearRect(0, 0, sampleWidth, sampleHeight);
+  sampleContext.drawImage(image, 0, 0, sampleWidth, sampleHeight);
+
+  const imageData = sampleContext.getImageData(0, 0, sampleWidth, sampleHeight).data;
+  const particles: TomatoParticle[] = [];
+  const logoScale = 1.2;
+  const centerX = width / 2;
+  const centerY = height * 0.46;
+
+  for (let y = 0; y < sampleHeight; y += 2) {
+    for (let x = 0; x < sampleWidth; x += 2) {
+      const index = (y * sampleWidth + x) * 4;
+      const alpha = imageData[index + 3];
+      if (alpha < 120) continue;
+
+      const red = imageData[index];
+      const green = imageData[index + 1];
+      const blue = imageData[index + 2];
+      if (red + green + blue > 735) continue;
+
+      const order = particles.length;
+      const seed = Math.sin((x + 1) * 12.9898 + (y + 1) * 78.233) * 43758.5453;
+      const random = seed - Math.floor(seed);
+      const angle = random * Math.PI * 2;
+
+      particles.push({
+        targetX: centerX + (x - sampleWidth / 2) * logoScale,
+        targetY: centerY + (y - sampleHeight / 2) * logoScale,
+        color: `rgba(${red}, ${green}, ${blue}, 0.96)`,
+        angle,
+        radius: 90 + ((order * 17) % 90),
+        delay: (order % 19) / 120,
+        drift: random * Math.PI * 2,
+      });
+    }
+  }
+
+  return particles;
+}

package/src/features/tools/cold-start-channel-selector/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const ColdStartChannelSelector = dynamic(() =>
+  import("./cold-start-channel-selector").then((module) => module.ColdStartChannelSelector),
+);

package/src/features/tools/cold-start-channel-selector/widget/preview-panels.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { CheckCircle2, Circle, LoaderCircle, Route } from "lucide-react";
+import { useEffect, useRef } from "react";
+
+import { ProgressBar } from "@tomako/ui/progress";
+import { cn } from "@tomako/ui/cn";
+
+import { tomatoParticlePalette, type TomatoParticle } from "./constants";
+import {
+    clamp01,
+    createTomatoParticles,
+    easeInCubic,
+    easeInOutCubic,
+} from "./helpers";
+import type { LoadingStep } from "./types";
+
+export function EmptyPreview({
+  title,
+  body,
+  steps,
+}: {
+  title: string;
+  body: string;
+  steps?: readonly string[];
+}) {
+  return (
+    <div className="grid min-h-full place-items-center px-4 py-10 text-center">
+      <div className="max-w-md">
+        <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-white text-[#111111] shadow-[0_10px_30px_rgba(17,17,17,0.06)]">
+          <Route className="size-5" aria-hidden />
+        </span>
+        <h3 className="mt-5 text-xl font-semibold leading-tight text-[#111111]">{title}</h3>
+        <p className="mt-3 text-sm leading-6 text-[#666666]">{body}</p>
+        {steps && steps.length > 0 ? (
+          <ol className="mx-auto mt-6 grid max-w-sm gap-3 text-left">
+            {steps.map((step, index) => (
+              <li
+                key={step}
+                className="grid grid-cols-[1.5rem_minmax(0,1fr)] items-center gap-3 rounded-lg bg-white/70 px-3 py-2.5 text-sm font-medium leading-5 text-[#30343B]"
+              >
+                <span className="flex size-6 items-center justify-center rounded-full bg-[#111111] text-xs font-semibold text-white">
+                  {index + 1}
+                </span>
+                <span>{step}</span>
+              </li>
+            ))}
+          </ol>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function TomatoParticleLoader({ statusLabel }: { statusLabel: string }) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+
+    const context = canvas.getContext("2d");
+    if (!context) return undefined;
+
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const width = 320;
+    const height = 190;
+    const devicePixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+    let animationFrame = 0;
+    let particles: TomatoParticle[] = [];
+    const image = new window.Image();
+    let disposed = false;
+
+    canvas.width = width * devicePixelRatio;
+    canvas.height = height * devicePixelRatio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+    context.imageSmoothingEnabled = false;
+
+    const clearCanvas = () => {
+      context.setTransform(1, 0, 0, 1, 0, 0);
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+      context.imageSmoothingEnabled = false;
+    };
+
+    const drawFallbackLogo = () => {
+      clearCanvas();
+      context.drawImage(image, width / 2 - 42, height * 0.46 - 35, 84, 70);
+    };
+
+    const drawFrame = (time: number) => {
+      if (disposed) return;
+
+      const cycle = 13000;
+      const progress = (time % cycle) / cycle;
+      const centerX = width / 2;
+      const centerY = height * 0.46;
+
+      clearCanvas();
+
+      particles.forEach((particle, index) => {
+        const entranceDelay = particle.delay * 0.46;
+        const gather = easeInOutCubic(clamp01((progress - 0.04 - entranceDelay) / 0.38));
+        const settle = easeInOutCubic(clamp01((progress - 0.3 - entranceDelay * 0.25) / 0.22));
+        const hold = progress > 0.52 && progress < 0.9;
+        const releaseDelay = ((index % 23) / 22) * 0.04;
+        const release = easeInCubic(clamp01((progress - 0.9 - releaseDelay) / 0.06));
+        const spin = progress * Math.PI * 2.1 + particle.drift;
+        const trailAngle = particle.angle + Math.sin(spin) * 0.16;
+        const startRadius = particle.radius + Math.sin(spin * 1.7) * 10;
+        const startX = centerX + Math.cos(trailAngle) * startRadius;
+        const startY = centerY + Math.sin(trailAngle) * startRadius * 0.62;
+        const targetX = startX + (particle.targetX - startX) * settle;
+        const targetY = startY + (particle.targetY - startY) * settle;
+        const burstX = centerX + Math.cos(trailAngle) * (startRadius + 34);
+        const burstY = centerY + Math.sin(trailAngle) * (startRadius + 34) * 0.62;
+        const settledX = startX + (targetX - startX) * gather;
+        const settledY = startY + (targetY - startY) * gather;
+        const finalJitterX = hold
+          ? Math.sin(time * 0.0018 + particle.drift) * 0.42 +
+            Math.sin(time * 0.0031 + index * 0.31) * 0.16
+          : 0;
+        const finalJitterY = hold
+          ? Math.cos(time * 0.0016 + particle.drift * 1.17) * 0.34 +
+            Math.sin(time * 0.0027 + index * 0.43) * 0.14
+          : 0;
+        const x = settledX + finalJitterX + (burstX - settledX) * release;
+        const y = settledY + finalJitterY + (burstY - settledY) * release;
+        const baseAlpha = hold ? 1 : 0.18 + gather * 0.74;
+        const alpha = clamp01(baseAlpha * (1 - release));
+
+        context.globalAlpha = alpha;
+        context.fillStyle =
+          hold || gather > 0.72
+            ? particle.color
+            : tomatoParticlePalette[index % tomatoParticlePalette.length];
+        context.fillRect(Math.round(x), Math.round(y), hold ? 1.3 : 1.2, hold ? 1.3 : 1.2);
+
+        const anchorAlpha = clamp01((release - 0.08) / 0.35) * (1 - release) * 0.38;
+        if (anchorAlpha > 0) {
+          context.globalAlpha = anchorAlpha;
+          context.fillStyle = particle.color;
+          context.fillRect(Math.round(particle.targetX), Math.round(particle.targetY), 1.05, 1.05);
+        }
+      });
+
+      context.globalAlpha = 1;
+      animationFrame = window.requestAnimationFrame(drawFrame);
+    };
+
+    image.onload = () => {
+      if (disposed) return;
+      particles = createTomatoParticles(width, height, image);
+      if (prefersReducedMotion.matches) {
+        drawFallbackLogo();
+        return;
+      }
+      animationFrame = window.requestAnimationFrame(drawFrame);
+    };
+    image.src = "/landing/tomato-mark.svg";
+
+    return () => {
+      disposed = true;
+      image.onload = null;
+      window.cancelAnimationFrame(animationFrame);
+      clearCanvas();
+    };
+  }, []);
+
+  return (
+    <div aria-label={statusLabel} className="mx-auto flex h-[190px] w-[320px] items-center justify-center overflow-hidden" role="status">
+      <canvas ref={canvasRef} aria-hidden className="block" />
+    </div>
+  );
+}
+
+export function RunningPanel({
+  steps,
+  tip,
+  tipLabel,
+  statusLabel,
+}: {
+  steps: readonly LoadingStep[];
+  tip: string;
+  tipLabel: string;
+  statusLabel: string;
+}) {
+  return (
+    <div className="flex min-h-full items-center justify-center px-2 py-4 text-center">
+      <div className="w-full max-w-[34rem]">
+        <TomatoParticleLoader statusLabel={statusLabel} />
+        <div className="mx-auto mt-8 w-full max-w-[16rem]">
+          <ProgressBar
+            value={42}
+            className="h-1.5 bg-[#EEF1F5] [&_[data-slot=progress-indicator]]:bg-[#111111]"
+          />
+        </div>
+        <div className="mx-auto mt-8 grid w-full max-w-[18rem] gap-2.5 text-left">
+          {steps.map((step) => {
+            const isComplete = step.status === "complete";
+            const isActive = step.status === "active";
+
+            return (
+              <div
+                key={step.title}
+                className="grid max-w-full grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5"
+              >
+                <span
+                  className={cn(
+                    "flex size-5 items-center justify-center rounded-full",
+                    isComplete
+                      ? "text-[#2FB344]"
+                      : isActive
+                        ? "text-[#111111]"
+                        : "text-[#A8B3C4]",
+                  )}
+                >
+                  {isComplete ? (
+                    <CheckCircle2 aria-hidden className="size-4.5" />
+                  ) : isActive ? (
+                    <LoaderCircle aria-hidden className="size-4 animate-spin motion-reduce:animate-none" />
+                  ) : (
+                    <Circle aria-hidden className="size-3.5" />
+                  )}
+                </span>
+                <span
+                  className={cn(
+                    "flex min-w-0 items-baseline text-sm font-normal leading-6",
+                    isActive ? "text-[#111827]" : "text-[#A8B3C4]",
+                  )}
+                >
+                  <span className="min-w-0 truncate">{step.title}...</span>
+                  <span className="ml-2 shrink-0 tabular-nums">{step.countdown}</span>
+                </span>
+              </div>
+            );
+          })}
+        </div>
+        <div className="mx-auto mt-7 max-w-[32rem] rounded-lg border border-[#E4E9F1] bg-[#F8FAFC] p-4 text-left">
+          <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+            {tipLabel}
+          </p>
+          <p className="mt-2 text-sm leading-6 text-[#555555]">{tip}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/features/tools/cold-start-channel-selector/widget/result-shell.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import {
+    AlertTriangle,
+    BarChart3,
+    CheckCircle2,
+    Clock3,
+} from "lucide-react";
+import { useMemo, useState, type ReactNode } from "react";
+
+import {
+    ToolResultActions,
+    ToolResultHeader,
+} from "../../../../components/tools/workspace";
+import type {
+    ColdStartChannelConfidence,
+    ColdStartChannelSelectorResult,
+} from "../../../../lib/tools/cold-start-channel-selector-schema";
+import { cn } from "@tomako/ui/cn";
+
+import { CONFIDENCE_STYLE, PRIORITY_STYLE } from "./constants";
+import { buildReportText } from "./helpers";
+import type { T } from "./types";
+
+function ConfidenceBadge({ level, t }: { level: ColdStartChannelConfidence; t: T }) {
+  return (
+    <span className={cn("rounded-full px-2.5 py-1 text-[11px] font-semibold", CONFIDENCE_STYLE[level])}>
+      {t(`confidence.${level}`)}
+    </span>
+  );
+}
+
+function SectionTitle({ icon, title }: { icon: ReactNode; title: string }) {
+  return (
+    <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.08em] text-[#667085]">
+      <span className="text-[#111111]">{icon}</span>
+      {title}
+    </h3>
+  );
+}
+
+function DetailBlock({ label, value }: { label: string; value?: string }) {
+  if (!value) return null;
+  return (
+    <div className="mt-4">
+      <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">{label}</p>
+      <p className="mt-1 text-sm leading-6 text-[#3D4D5C]">{value}</p>
+    </div>
+  );
+}
+
+function MiniList({ label, items }: { label: string; items: readonly string[] }) {
+  if (!items.length) return null;
+  return (
+    <div className="mt-4">
+      <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">{label}</p>
+      <ul className="mt-2 grid gap-1.5">
+        {items.map((item) => (
+          <li key={item} className="flex gap-2 text-sm leading-6 text-[#3D4D5C]">
+            <span className="mt-2 size-1.5 shrink-0 rounded-full bg-[#111111]" />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function ChannelReport({
+  data,
+  t,
+  onReset,
+}: {
+  data: ColdStartChannelSelectorResult;
+  t: T;
+  onReset: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const reportText = useMemo(() => buildReportText(data), [data]);
+
+  async function copyReport() {
+    await navigator.clipboard?.writeText(reportText);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  }
+
+  return (
+    <div className="grid gap-5 pb-2">
+      <ToolResultHeader
+        eyebrow={t("sections.priority")}
+        title={t("reportTitle")}
+        body={data.summary}
+        actions={
+          <ToolResultActions
+            copied={copied}
+            copiedLabel={t("copiedReport")}
+            copyLabel={t("copyReport")}
+            resetLabel={t("analyzeAnother")}
+            onCopy={() => void copyReport()}
+            onReset={onReset}
+          />
+        }
+      />
+
+      <section className="grid gap-4">
+        <SectionTitle icon={<BarChart3 className="size-4" />} title={t("sections.priority")} />
+        <div className="grid gap-4 xl:grid-cols-2">
+          {data.priorityChannels.map((channel) => (
+            <article
+              key={`${channel.priority}-${channel.name}`}
+              className={cn("rounded-lg border p-4 shadow-[0_10px_28px_rgba(17,17,17,0.04)]", PRIORITY_STYLE[channel.priority])}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">
+                    {t(`priority.${channel.priority}`)} · {channel.score}/100
+                  </p>
+                  <h4 className="mt-2 text-lg font-semibold text-[#111111]">{channel.name}</h4>
+                </div>
+                <ConfidenceBadge level={channel.confidence} t={t} />
+              </div>
+              <p className="mt-4 text-sm leading-6 text-[#3D4D5C]">{channel.fitReason}</p>
+              <DetailBlock label={t("labels.whyNow")} value={channel.whyNow} />
+              <DetailBlock label={t("labels.firstAction")} value={channel.firstAction} />
+              <MiniList label={t("labels.assets")} items={channel.requiredAssets} />
+              <MiniList label={t("labels.metrics")} items={channel.validationMetrics} />
+              <MiniList label={t("labels.risks")} items={channel.risks} />
+            </article>
+          ))}
+        </div>
+      </section>
+
+      {data.executionPlan.length ? (
+        <section className="grid gap-4">
+          <SectionTitle icon={<Clock3 className="size-4" />} title={t("sections.plan")} />
+          <div className="grid gap-3 xl:grid-cols-2">
+            {data.executionPlan.map((item) => (
+              <article key={`${item.day}-${item.focus}`} className="rounded-lg border border-[#E4E9F1] bg-white p-4">
+                <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">
+                  {item.day}
+                </p>
+                <h4 className="mt-2 text-base font-semibold text-[#111111]">{item.focus}</h4>
+                <MiniList label={t("labels.actions")} items={item.actions} />
+                <DetailBlock label={t("labels.expectedSignal")} value={item.expectedSignal} />
+              </article>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        {data.avoidForNow.length ? (
+          <section className="rounded-lg border border-[#F3D2C9] bg-[#FFF8F5] p-4">
+            <SectionTitle icon={<AlertTriangle className="size-4" />} title={t("sections.avoid")} />
+            <div className="mt-3 grid gap-3">
+              {data.avoidForNow.map((item) => (
+                <div key={item.name} className="border-t border-[#F3D2C9] pt-3 first:border-t-0 first:pt-0">
+                  <p className="font-semibold text-[#111111]">{item.name}</p>
+                  <p className="mt-1 text-sm leading-6 text-[#7C3D24]">{item.reason}</p>
+                  {item.revisitWhen ? (
+                    <p className="mt-1 text-xs font-medium text-[#9A3412]">{item.revisitWhen}</p>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        <section className="rounded-lg border border-[#E4E9F1] bg-white p-4">
+          <SectionTitle icon={<CheckCircle2 className="size-4" />} title={t("sections.boundary")} />
+          {data.missingInfo.length ? (
+            <MiniList label={t("labels.missingInfo")} items={data.missingInfo} />
+          ) : null}
+          <p className="mt-3 text-sm leading-6 text-[#555555]">{data.boundaryNote}</p>
+          {data.sources.length ? (
+            <ul className="mt-4 grid gap-2">
+              {data.sources.map((source) => (
+                <li key={`${source.label}-${source.url ?? ""}`} className="text-sm">
+                  {source.url ? (
+                    <a
+                      href={source.url}
+                      target="_blank"
+                      rel="noopener noreferrer nofollow"
+                      className="font-medium text-[#111111] underline underline-offset-4"
+                    >
+                      {source.label}
+                    </a>
+                  ) : (
+                    <span className="text-[#3D4D5C]">{source.label}</span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </section>
+      </div>
+    </div>
+  );
+}

package/src/features/tools/cold-start-channel-selector/widget/types.ts

@@ -0,0 +1,21 @@
+import type { useTranslations } from "../../../../i18n/client";
+import type { ColdStartChannelSelectorResult } from "../../../../lib/tools/cold-start-channel-selector-schema";
+
+export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "validation";
+
+export type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; status: string }
+  | { phase: "done"; data: ColdStartChannelSelectorResult }
+  | { phase: "error"; category: ErrorCategory };
+
+export type Option = { value: string; label: string };
+
+export type LoadingStep = {
+  status: "complete" | "active" | "pending";
+  title: string;
+  countdown: string;
+};
+
+export type T = ReturnType<typeof useTranslations>;