@tomako/tools-runtime 0.1.0

package/src/components/tools/workspace/tool-loading-panel.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { CheckCircle2, Circle, LoaderCircle } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useRef } from "react";
+
+import { ProgressBar } from "@tomako/ui/progress";
+import { cn } from "@tomako/ui/cn";
+
+export type ToolLoadingStep = {
+  status: "complete" | "active" | "pending";
+  title: ReactNode;
+  countdown?: ReactNode;
+};
+
+type TomatoParticle = {
+  targetX: number;
+  targetY: number;
+  color: string;
+  angle: number;
+  radius: number;
+  delay: number;
+  drift: number;
+};
+
+const tomatoParticlePalette = ["#FF4F3E", "#FF7A45", "#91D63B", "#111111", "#FFE8A3"];
+
+function clamp01(value: number) {
+  return Math.min(1, Math.max(0, value));
+}
+
+function easeInCubic(value: number) {
+  return value * value * value;
+}
+
+function easeInOutCubic(value: number) {
+  return value < 0.5 ? 4 * value * value * value : 1 - Math.pow(-2 * value + 2, 3) / 2;
+}
+
+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.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];
+      const red = imageData[index];
+      const green = imageData[index + 1];
+      const blue = imageData[index + 2];
+
+      if (alpha < 120 || 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);
+
+      particles.push({
+        targetX: centerX + (x - sampleWidth / 2) * logoScale,
+        targetY: centerY + (y - sampleHeight / 2) * logoScale,
+        color: `rgba(${red}, ${green}, ${blue}, 0.96)`,
+        angle: random * Math.PI * 2,
+        radius: 90 + ((order * 17) % 90),
+        delay: (order % 19) / 120,
+        drift: random * Math.PI * 2,
+      });
+    }
+  }
+
+  return particles;
+}
+
+export function TomatoParticleLoader({
+  label,
+  width = 320,
+  height = 190,
+  fill = false,
+  className,
+}: {
+  label: string;
+  width?: number;
+  height?: number;
+  fill?: boolean;
+  className?: string;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    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;
+    if (!fill) {
+      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 progress = (time % 13000) / 13000;
+      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 jitterX = hold
+          ? Math.sin(time * 0.0018 + particle.drift) * 0.42 + Math.sin(time * 0.0031 + index * 0.31) * 0.16
+          : 0;
+        const jitterY = 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 + jitterX + (burstX - settledX) * release;
+        const y = settledY + jitterY + (burstY - settledY) * release;
+        const alpha = clamp01((hold ? 1 : 0.18 + gather * 0.74) * (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();
+      else animationFrame = window.requestAnimationFrame(drawFrame);
+    };
+    image.src = "/landing/tomato-mark.svg";
+
+    return () => {
+      disposed = true;
+      image.onload = null;
+      window.cancelAnimationFrame(animationFrame);
+      clearCanvas();
+    };
+  }, [fill, height, width]);
+
+  return (
+    <div
+      aria-label={label}
+      className={cn(
+        fill
+          ? "pointer-events-none absolute inset-0 overflow-hidden"
+          : "mx-auto flex max-w-full items-center justify-center overflow-hidden",
+        className,
+      )}
+      style={fill ? undefined : { width, height }}
+      role="status"
+    >
+      <canvas ref={canvasRef} aria-hidden className="block size-full max-w-full" />
+    </div>
+  );
+}
+
+export function ToolLoadingPanel({
+  label,
+  progress,
+  steps,
+  tipLabel,
+  tip,
+}: {
+  label: string;
+  progress: number;
+  steps: readonly ToolLoadingStep[];
+  tipLabel?: ReactNode;
+  tip?: ReactNode;
+}) {
+  return (
+    <div className="flex min-h-0 flex-1 items-center justify-center px-5 py-8 text-center md:px-8">
+      <div className="w-full max-w-[34rem]">
+        <TomatoParticleLoader label={label} />
+        <div className="mx-auto mt-6 w-full max-w-[18rem]">
+          <ProgressBar value={progress} className="h-1.5 bg-[#EEF1F5] [&_[data-slot=progress-indicator]]:bg-[#111111]" />
+        </div>
+        <div className="mx-auto mt-7 grid w-full max-w-[18rem] gap-2 text-left">
+          {steps.map((step, index) => {
+            const isComplete = step.status === "complete";
+            const isActive = step.status === "active";
+            return (
+              <div key={index} className="grid max-w-full grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5">
+                <span className={`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={`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>
+                  {step.countdown ? <span className="ml-2 shrink-0 tabular-nums">{step.countdown}</span> : null}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+        {tip ? (
+          <div className="mt-5 rounded-lg border border-[#E4E9F1] bg-[#F8FAFC] p-4 text-left">
+            {tipLabel ? <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">{tipLabel}</p> : null}
+            <p className="mt-2 text-sm leading-6 text-[#555555]">{tip}</p>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/tools/workspace/tool-option-row.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { RadioGroupItem } from "@tomako/ui/radio-group";
+import { cn } from "@tomako/ui/cn";
+
+export function ToolPlatformOptionCard({
+  active,
+  icon,
+  label,
+  hint,
+  value,
+}: {
+  active: boolean;
+  icon: ReactNode;
+  label: string;
+  hint?: string;
+  value: string;
+}) {
+  return (
+    <label
+      className={cn(
+        "flex min-w-0 cursor-pointer flex-col items-center justify-start gap-2 rounded-lg border-2 !border-[#E4E9F1] bg-[#F8FAFC] px-2 py-3 text-center transition hover:bg-white has-[:focus-visible]:ring-4 has-[:focus-visible]:ring-[#111111]/10 has-[[data-state=checked]]:!border-[#111111] has-[[data-state=checked]]:bg-[#F4F7FB] has-[[data-state=checked]]:shadow-sm",
+        active && "!border-[#111111] bg-[#F4F7FB] shadow-sm",
+      )}
+    >
+      <RadioGroupItem value={value} className="sr-only" />
+      <span className="flex size-8 shrink-0 items-center justify-center" aria-hidden>
+        {icon}
+      </span>
+      <span className="min-w-0 max-w-full">
+        <span className="line-clamp-2 block text-xs font-semibold leading-4 text-[#111111]">
+          {label}
+        </span>
+        {hint ? (
+          <span className="mt-0.5 block line-clamp-2 text-[10px] leading-3 text-[#777777]">
+            {hint}
+          </span>
+        ) : null}
+      </span>
+    </label>
+  );
+}
+
+export function ToolOptionRow({
+  active,
+  label,
+  meta,
+  value,
+}: {
+  active: boolean;
+  label: string;
+  meta: string;
+  value: string;
+}) {
+  return (
+    <label
+      className={cn(
+        "flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition has-[[data-state=checked]]:!border-[#111111] has-[[data-state=checked]]:bg-[#F8FAFC] has-[[data-state=checked]]:shadow-sm",
+        active
+          ? "!border-[#111111] bg-[#F8FAFC] shadow-sm"
+          : "border-[#E4E9F1] bg-white hover:border-[#111111]",
+      )}
+    >
+      <RadioGroupItem value={value} />
+      <span>
+        <span className="block text-sm font-semibold text-[#111111]">{label}</span>
+        <span className="mt-1 block text-xs leading-5 text-[#666666]">{meta}</span>
+      </span>
+    </label>
+  );
+}
+
+export function ToolCompactOption({
+  active,
+  label,
+  value,
+}: {
+  active: boolean;
+  label: string;
+  value: string;
+}) {
+  return (
+    <label
+      className={cn(
+        "flex h-11 cursor-pointer items-center justify-center rounded-lg border px-3 text-sm font-semibold transition has-[[data-state=checked]]:!border-[#111111] has-[[data-state=checked]]:bg-[#F4F7FB] has-[[data-state=checked]]:text-[#111111] has-[[data-state=checked]]:shadow-sm",
+        active
+          ? "!border-[#111111] bg-[#F4F7FB] text-[#111111] shadow-sm"
+          : "border-[#E4E9F1] bg-white text-[#555555] hover:border-[#111111]",
+      )}
+    >
+      <RadioGroupItem className="sr-only" value={value} />
+      {label}
+    </label>
+  );
+}

package/src/components/tools/workspace/tool-preview-panel.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@tomako/ui/cn";
+
+export function ToolPreviewPanel({
+  children,
+  className,
+  contentClassName,
+}: {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}) {
+  return (
+    <aside
+      className={cn(
+        "flex min-h-[560px] min-w-0 overflow-hidden bg-white p-5 md:p-6 lg:h-full lg:min-h-0",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] p-4 md:p-5",
+          contentClassName,
+        )}
+      >
+        {children}
+      </div>
+    </aside>
+  );
+}

package/src/components/tools/workspace/tool-result-actions.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Copy, Download, RotateCcw } from "lucide-react";
+
+import { Button } from "@tomako/ui/button";
+import { cn } from "@tomako/ui/cn";
+
+export function ToolResultActions({
+  copied,
+  copyLabel,
+  copiedLabel,
+  downloadLabel,
+  resetLabel,
+  onCopy,
+  onDownload,
+  onReset,
+  className,
+}: {
+  copied?: boolean;
+  copyLabel?: ReactNode;
+  copiedLabel?: ReactNode;
+  downloadLabel?: ReactNode;
+  resetLabel?: ReactNode;
+  onCopy?: () => void;
+  onDownload?: () => void;
+  onReset?: () => void;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col gap-2 sm:flex-row", className)}>
+      {onCopy && copyLabel ? (
+        <Button
+          className="h-10 rounded-xl border-[#E4E9F1]"
+          onClick={onCopy}
+          type="button"
+          variant="outline"
+        >
+          <Copy aria-hidden className="size-4" />
+          {copied && copiedLabel ? copiedLabel : copyLabel}
+        </Button>
+      ) : null}
+      {onDownload && downloadLabel ? (
+        <Button
+          className="h-10 rounded-xl border-[#E4E9F1]"
+          onClick={onDownload}
+          type="button"
+          variant="outline"
+        >
+          <Download aria-hidden className="size-4" />
+          {downloadLabel}
+        </Button>
+      ) : null}
+      {onReset && resetLabel ? (
+        <Button
+          className="h-10 rounded-xl border-[#E4E9F1]"
+          onClick={onReset}
+          type="button"
+          variant="outline"
+        >
+          <RotateCcw aria-hidden className="size-4" />
+          {resetLabel}
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/tools/workspace/tool-result-file-actions.ts

@@ -0,0 +1,31 @@
+"use client";
+
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+export function downloadTextFile({
+  filename,
+  text,
+  type = "text/markdown;charset=utf-8",
+}: {
+  filename: string;
+  text: string;
+  type?: string;
+}): void {
+  downloadBlob(new Blob([text], { type }), filename);
+}

package/src/components/tools/workspace/tool-result-header.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@tomako/ui/cn";
+
+export function ToolResultHeader({
+  eyebrow,
+  title,
+  body,
+  actions,
+  className,
+}: {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  body?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col justify-between gap-4 rounded-[1.35rem] border border-[#E4E9F1] bg-[#FAFBFD] p-5 md:flex-row md:items-start",
+        className,
+      )}
+    >
+      <div>
+        {eyebrow ? <p className="text-xs font-semibold uppercase text-[#777777]">{eyebrow}</p> : null}
+        <h3 className={`${eyebrow ? "mt-3" : ""} text-3xl font-semibold leading-tight text-[#111111]`}>
+          {title}
+        </h3>
+        {body ? (
+          <p className="mt-2 max-w-3xl text-sm leading-6 text-[#555555]">
+            {body}
+          </p>
+        ) : null}
+      </div>
+      {actions}
+    </div>
+  );
+}

package/src/components/tools/workspace/tool-status.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+export function ToolStatusLine({ children }: { children: ReactNode }) {
+  return <p className="text-xs font-semibold text-[#555555]">{children}</p>;
+}
+
+export function ToolErrorBanner({ children }: { children: ReactNode }) {
+  return (
+    <p className="rounded-lg border border-[#F0B8A3] bg-[#FFF2EC] px-4 py-3 text-sm font-semibold text-[#9B3517]">
+      {children}
+    </p>
+  );
+}