@tomako/tools-runtime 0.1.0

package/src/features/tools/og-image-generator/widget/preview-panel.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element -- Canvas export previews use local blob URLs. */
+
+import { Download, Loader2, RotateCcw } from "lucide-react";
+
+import { Button } from "@tomako/ui/button";
+import { useTranslations } from "../../../../i18n/client";
+import {
+    previewBackground,
+    previewGridStyle,
+    type GeneratedOgImage,
+} from "../../../../lib/tools/og-image-generator-render";
+import {
+    OG_IMAGE_PRESET_META,
+    ogImageFormats,
+    parseOgImageTags,
+    type OgImageFormat,
+    type OgImageGeneratorInput,
+} from "../../../../lib/tools/og-image-generator-schema";
+
+import type { BusyMode } from "./types";
+
+const FALLBACK_TITLE = "Launch your product with a preview worth clicking";
+
+export function OgImagePreviewPanel({
+  aspectRatio,
+  busy,
+  format,
+  input,
+  onFormatChange,
+  onGenerateAi,
+  onRender,
+  onReset,
+  output,
+  summary,
+  onDownload,
+}: {
+  aspectRatio: string;
+  busy: BusyMode;
+  format: OgImageFormat;
+  input: OgImageGeneratorInput;
+  onFormatChange: (format: OgImageFormat) => void;
+  onGenerateAi: () => void;
+  onRender: () => void;
+  onReset: () => void;
+  output: GeneratedOgImage | null;
+  summary: string;
+  onDownload: () => void;
+}) {
+  const t = useTranslations("toolsUi.ogImageGenerator");
+
+  if (busy === "ai" || busy === "render") {
+    return (
+      <div className="flex min-h-[520px] flex-col items-center justify-center rounded-lg border border-[#E5E5E5] bg-white p-8 text-center lg:min-h-[700px]">
+        <span className="flex size-12 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
+          <Loader2 aria-hidden className="size-5 animate-spin" />
+        </span>
+        <h3 className="mt-4 text-xl font-semibold text-[#111111]">
+          {busy === "ai" ? t("aiLoadingTitle") : t("loadingTitle")}
+        </h3>
+        <p className="mx-auto mt-2 max-w-md text-sm leading-6 text-[#555555]">
+          {busy === "ai" ? t("aiLoadingHint") : t("loadingHint")}
+        </p>
+      </div>
+    );
+  }
+
+  if (output) {
+    return (
+      <div className="flex min-w-0 flex-col">
+        <div>
+          <h3 className="text-xl font-semibold text-[#111111]">{t("resultTitle")}</h3>
+          <p className="mt-1 text-sm leading-6 text-[#555555]">
+            {t("resultHint", {
+              width: output.width,
+              height: output.height,
+              format: t(`formats.${output.format}`),
+            })}
+          </p>
+        </div>
+        <div className="mt-5 flex min-h-[460px] items-center justify-center rounded-lg border border-[#E5E5E5] bg-white p-4 lg:min-h-[640px]">
+          <img
+            alt={t("resultAlt")}
+            className="max-h-full max-w-full rounded-md object-contain shadow-[0_24px_60px_rgba(17,17,17,0.16)]"
+            src={output.url}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-w-0 flex-col">
+      <div className="flex flex-col justify-between gap-4 xl:flex-row xl:items-start">
+        <div>
+          <h3 className="text-xl font-semibold text-[#111111]">{t("previewTitle")}</h3>
+          <p className="mt-1 text-sm leading-6 text-[#555555]">{t("previewHint")}</p>
+        </div>
+        <div className="flex w-full max-w-[340px] flex-col gap-3 xl:items-end">
+          <span className="w-fit rounded-lg border border-[#E5E5E5] bg-white px-3 py-2 text-xs font-semibold text-[#555555]">
+            {summary}
+          </span>
+          <div className="w-full rounded-lg border border-[#E5E5E5] bg-white p-3">
+            <p className="mb-2 text-[13px] font-semibold text-[#111111]">{t("formatLabel")}</p>
+            <div className="grid grid-cols-3 gap-2">
+              {ogImageFormats.map((item) => (
+                <button
+                  key={item}
+                  type="button"
+                  onClick={() => onFormatChange(item)}
+                  className={`h-10 rounded-lg border px-3 text-sm font-semibold transition ${
+                    format === item
+                      ? "border-[#111111] bg-[#F7F7F7] text-[#111111]"
+                      : "border-[#E5E5E5] bg-white text-[#555555] hover:border-[#111111]"
+                  }`}
+                >
+                  {t(`formats.${item}`)}
+                </button>
+              ))}
+            </div>
+            <div className="mt-3 grid gap-2">
+              <Button
+                className="h-11 rounded-lg bg-[#111111] text-white hover:bg-[#2A2A2A]"
+                type="button"
+                disabled={busy !== null}
+                onClick={onGenerateAi}
+              >
+                {busy === "ai" ? <Loader2 aria-hidden className="size-4 animate-spin" /> : null}
+                {busy === "ai" ? t("aiGenerating") : t("generateAi")}
+              </Button>
+              <Button
+                className="h-11 rounded-lg border-[#111111]"
+                type="button"
+                variant="outline"
+                disabled={busy !== null}
+                onClick={onRender}
+              >
+                {busy === "render" ? t("generating") : t("generate")}
+              </Button>
+              <Button
+                className="h-11 rounded-lg border-[#E5E5E5]"
+                type="button"
+                variant="outline"
+                disabled={busy !== null}
+                onClick={onReset}
+              >
+                <RotateCcw aria-hidden className="size-4" />
+                {t("reset")}
+              </Button>
+              {output ? (
+                <Button
+                  className="h-11 rounded-lg bg-[#111111] text-white hover:bg-[#2A2A2A]"
+                  type="button"
+                  onClick={onDownload}
+                >
+                  <Download aria-hidden className="size-4" />
+                  {t("download")}
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex min-h-[460px] items-center justify-center rounded-lg border border-[#E5E5E5] bg-white p-4 lg:min-h-[640px]">
+        <div
+          className="w-full max-w-[900px] overflow-hidden rounded-md shadow-[0_24px_60px_rgba(17,17,17,0.14)]"
+          style={{ aspectRatio }}
+        >
+          <OgImagePreviewCanvas input={input} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function OgImagePreviewCanvas({ input }: { input: OgImageGeneratorInput }) {
+  const meta = OG_IMAGE_PRESET_META[input.preset];
+  const tags = parseOgImageTags(input.tags);
+  const gridStyle = previewGridStyle(input);
+  const titleSize = Math.max(18, Math.round(input.titleTypography.fontSize * 0.42));
+  const tagSize = Math.max(10, Math.round(input.tagTypography.fontSize * 0.72));
+
+  return (
+    <div className="relative h-full w-full overflow-hidden" style={{ background: previewBackground(input) }}>
+      {gridStyle ? <div className="absolute inset-0" style={gridStyle} /> : null}
+      {input.noise > 0 ? (
+        <div
+          className="pointer-events-none absolute inset-0 opacity-60 mix-blend-soft-light"
+          style={{
+            backgroundImage:
+              "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
+            opacity: input.noise,
+          }}
+        />
+      ) : null}
+      <div className="absolute inset-x-[7%] bottom-[9%] top-[9%] flex flex-col justify-between">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex min-w-0 items-center gap-3">
+            <LogoMark input={input} />
+            {tags.length ? (
+              <div className="flex min-w-0 flex-wrap gap-1.5">
+                {tags.slice(0, 3).map((tag) => (
+                  <span
+                    key={tag}
+                    className="rounded-full border bg-white/88 px-3 py-1 font-bold"
+                    style={{
+                      borderColor: input.tagTypography.color,
+                      color: input.tagTypography.color,
+                      fontFamily: input.tagTypography.fontFamily,
+                      fontSize: `${tagSize}px`,
+                      fontWeight: Number(input.tagTypography.fontWeight),
+                    }}
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            ) : null}
+          </div>
+          <span className="rounded-full bg-white/18 px-4 py-2 text-xs font-semibold text-white">
+            {meta.width} x {meta.height}
+          </span>
+        </div>
+        <div>
+          <h4
+            className="max-w-[78%] text-balance leading-[0.98]"
+            style={{
+              color: input.titleTypography.color,
+              fontFamily: input.titleTypography.fontFamily,
+              fontSize: `${titleSize}px`,
+              fontWeight: Number(input.titleTypography.fontWeight),
+            }}
+          >
+            {input.title || FALLBACK_TITLE}
+          </h4>
+          {input.subtitle ? (
+            <p className="mt-4 max-w-[66%] text-base font-medium leading-7 text-white/82 md:text-xl">
+              {input.subtitle}
+            </p>
+          ) : null}
+        </div>
+      </div>
+      {input.decorImageDataUrl ? (
+        <img
+          alt=""
+          className="absolute bottom-[10%] right-[8%] max-h-[34%] max-w-[28%] rounded-md object-contain shadow-[0_24px_60px_rgba(17,17,17,0.18)]"
+          src={input.decorImageDataUrl}
+        />
+      ) : (
+        <PreviewShapes input={input} />
+      )}
+    </div>
+  );
+}
+
+function LogoMark({ input }: { input: OgImageGeneratorInput }) {
+  const label = (input.logoText || input.brand || "T").slice(0, 2);
+  if (input.logoDataUrl) {
+    return (
+      <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-white/92 p-1.5 shadow-sm">
+        <img alt="" className="max-h-full max-w-full object-contain" src={input.logoDataUrl} />
+      </span>
+    );
+  }
+  return (
+    <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-white/92 text-sm font-black text-[#111111] shadow-sm">
+      {label}
+    </span>
+  );
+}
+
+function PreviewShapes({ input }: { input: OgImageGeneratorInput }) {
+  if (input.template === "split") {
+    return (
+      <div
+        className="absolute bottom-0 right-0 top-0 w-[34%]"
+        style={{ backgroundColor: input.accentColor }}
+      />
+    );
+  }
+  if (input.template === "quote") {
+    return (
+      <div className="absolute right-[9%] top-[20%] text-[9rem] font-semibold leading-none text-white/22">
+        &quot;
+      </div>
+    );
+  }
+  return (
+    <>
+      <div
+        className="absolute right-[8%] top-[18%] h-[36%] w-[28%] rounded-[10%]"
+        style={{
+          background: input.template === "minimal" ? input.accentColor : "rgba(255,255,255,0.22)",
+          boxShadow: "0 26px 70px rgba(0,0,0,0.22)",
+          transform: input.template === "editorial" ? "rotate(-8deg)" : "rotate(8deg)",
+        }}
+      />
+      <div
+        className="absolute bottom-[12%] right-[18%] h-[15%] w-[15%] rounded-full"
+        style={{ background: input.template === "minimal" ? input.primaryColor : input.accentColor }}
+      />
+    </>
+  );
+}

package/src/features/tools/og-image-generator/widget/types.ts

@@ -0,0 +1 @@
+export type BusyMode = "ai" | "render" | null;

package/src/features/tools/package/direct-models.ts

@@ -0,0 +1,20 @@
+/**
+ * direct 车道的请求级模型选项（全部 direct 工具共享）。
+ *
+ * - model 为 undefined 时不传字段，走服务端默认模型（LLM_DIRECT_MODEL，当前 Flash 档）。
+ * - 非默认值必须同步列入 168 portal 的 LLM_DIRECT_ALLOWED_MODELS 白名单，
+ *   否则服务端返回 400 "model not allowed"。
+ * - labelKey 对应 toolsPages.engine.modelOptions.* 文案。
+ */
+export const DIRECT_MODEL_OPTIONS = [
+  { id: "flash", model: undefined, labelKey: "flash" },
+  { id: "pro", model: "deepseek-v4-pro", labelKey: "pro" },
+] as const;
+
+export type DirectModelOptionId = (typeof DIRECT_MODEL_OPTIONS)[number]["id"];
+
+export const DEFAULT_DIRECT_MODEL_OPTION: DirectModelOptionId = "flash";
+
+export function resolveDirectModel(optionId: string): string | undefined {
+  return DIRECT_MODEL_OPTIONS.find((option) => option.id === optionId)?.model;
+}

package/src/features/tools/package/form.ts

@@ -0,0 +1,38 @@
+import { isClearlyInvalidText } from "../../../lib/tools/input-quality";
+
+import type { FormFieldSpec, FormValues } from "./types";
+
+export function getDefaultFormValues(form: FormFieldSpec[]): FormValues {
+  const values: FormValues = {};
+  for (const field of form) {
+    if (field.kind === "select") values[field.id] = field.defaultValue;
+    else if (field.kind === "toggle") values[field.id] = field.defaultValue;
+    else values[field.id] = "";
+  }
+  return values;
+}
+
+/** 返回未通过校验的字段 id 列表。质量拦截与存量工具一致：拒绝纯数字/占位文本。 */
+export function validateFormValues(
+  form: FormFieldSpec[],
+  values: FormValues,
+): string[] {
+  const invalid: string[] = [];
+  for (const field of form) {
+    if (field.kind !== "text" && field.kind !== "textarea") continue;
+    const raw = String(values[field.id] ?? "").trim();
+    if (!field.required && raw.length === 0) continue;
+    if (field.required && raw.length === 0) {
+      invalid.push(field.id);
+      continue;
+    }
+    if (field.minLength && raw.length < field.minLength) {
+      invalid.push(field.id);
+      continue;
+    }
+    if (field.required && isClearlyInvalidText(raw)) {
+      invalid.push(field.id);
+    }
+  }
+  return invalid;
+}

package/src/features/tools/package/l10n.ts

@@ -0,0 +1,22 @@
+import type { AppLocale } from "../../../i18n/locale";
+import { resolvePrimaryLocale } from "../../../i18n/locale-fallback";
+
+import type { L10nText, L10nTextList } from "./types";
+
+/** zh-tw 缺省回退 zh，其余非中文回退 en（与全站 locale 回退语义一致）。 */
+export function pickL10n(text: L10nText, locale: AppLocale): string;
+export function pickL10n(text: L10nTextList, locale: AppLocale): string[];
+export function pickL10n(
+  text: L10nText | L10nTextList,
+  locale: AppLocale,
+): string | string[] {
+  const record = text as Record<string, string | string[] | undefined>;
+  return record[locale] ?? record[resolvePrimaryLocale(locale)] ?? record.en!;
+}
+
+export function pickL10nOptional(
+  text: L10nText | undefined,
+  locale: AppLocale,
+): string | undefined {
+  return text ? pickL10n(text, locale) : undefined;
+}

package/src/features/tools/package/package-container.tsx

@@ -0,0 +1,285 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+import { Download, FileText, SlidersHorizontal } from "lucide-react";
+
+import { PackageWidgetLoader } from "../../../components/tools/engine/package-widget-loader";
+import type { AppLocale } from "../../../i18n/locale";
+
+import { ToolCta } from "../shared/tool-cta";
+import {
+  ToolCardGrid,
+  ToolFaqSection,
+  ToolTextRows,
+} from "../shared/tool-content-sections";
+import { ToolImageVisual, ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import {
+  ToolLandingStandardSections,
+  type ToolLandingStandardSectionsProps,
+} from "../shared/tool-standard-landing-sections";
+import type { ToolPageProps } from "../types";
+import { pickL10n, pickL10nOptional } from "./l10n";
+import type { PageSection, SectionImage, ToolPackage } from "./types";
+
+function SectionBody({
+  section,
+  locale,
+}: {
+  section: PageSection;
+  locale: AppLocale;
+}) {
+  if (section.kind === "cards") {
+    return (
+      <ToolCardGrid
+        items={section.items.map((item) => ({
+          title: pickL10n(item.title, locale),
+          body: pickL10n(item.body, locale),
+        }))}
+      />
+    );
+  }
+  if (section.kind === "bullets") {
+    return (
+      <div className="grid gap-3">
+        {section.groups.map((group, index) => (
+          <article
+            key={index}
+            className="rounded-[1.25rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_12px_28px_rgba(17,17,17,0.05)]"
+          >
+            {group.title ? (
+              <h3 className="text-base font-semibold leading-tight text-[#111111]">
+                {pickL10n(group.title, locale)}
+              </h3>
+            ) : null}
+            <ul className={`list-disc space-y-2 pl-5 text-sm leading-6 text-[#555555] ${group.title ? "mt-3" : ""}`}>
+              {pickL10n(group.items, locale).map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </article>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <ToolTextRows items={pickL10n(section.paragraphs, locale)} />
+  );
+}
+
+function PackageSection({
+  section,
+  locale,
+}: {
+  section: PageSection;
+  locale: AppLocale;
+}) {
+  const heading = pickL10n(section.heading, locale);
+  const intro = pickL10nOptional(section.intro, locale);
+  const image: SectionImage | undefined = section.image;
+
+  if (!image) {
+    return (
+      <section className="border-t border-[#E1DDD3] py-14 md:py-16">
+        <div className="max-w-3xl">
+          <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {heading}
+          </h2>
+          {intro ? <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p> : null}
+        </div>
+        <div className="mt-7">
+          <SectionBody section={section} locale={locale} />
+        </div>
+      </section>
+    );
+  }
+
+  const imageEl = (
+    <ToolImageVisual src={image.src} alt={pickL10n(image.alt, locale)} wide={image.wide} />
+  );
+  const textEl = (
+    <div>
+      <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+        {heading}
+      </h2>
+      {intro ? <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p> : null}
+    </div>
+  );
+
+  return (
+    <section className="border-t border-[#E1DDD3] py-14 md:py-16">
+      <div className="grid gap-8 md:grid-cols-[0.95fr_1.05fr] md:items-center">
+        {image.side === "left" ? (
+          <>
+            {imageEl}
+            {textEl}
+          </>
+        ) : (
+          <>
+            {textEl}
+            {imageEl}
+          </>
+        )}
+      </div>
+      <div className="mt-8">
+        <SectionBody section={section} locale={locale} />
+      </div>
+    </section>
+  );
+}
+
+export function createPackageContainer(pkg: ToolPackage) {
+  const { assets, meta, page } = pkg;
+
+  return async function PackageToolContainer({
+    locale,
+    spec,
+    clientMessages,
+  }: ToolPageProps) {
+    const tShared = await createToolGuideTranslator(locale, "toolsPages.shared");
+    const faqItems = page.faq.map((item) => ({
+      question: pickL10n(item.question, locale),
+      answer: pickL10n(item.answer, locale),
+    }));
+    const standard = page.standard;
+
+    if (standard) {
+      const localizeImageTextSection = (
+        section: (typeof standard.imageTextSections)[number],
+      ) => ({
+        id: section.id,
+        title: pickL10n(section.title, locale),
+        body: pickL10n(section.body, locale),
+        image: {
+          src: section.image.src,
+          alt: pickL10n(section.image.alt, locale),
+        },
+        imageFirst: section.imageFirst,
+      });
+      const imageTextSections: ToolLandingStandardSectionsProps["imageTextSections"] = [
+        localizeImageTextSection(standard.imageTextSections[0]),
+        localizeImageTextSection(standard.imageTextSections[1]),
+        localizeImageTextSection(standard.imageTextSections[2]),
+      ];
+
+      return (
+        <ToolPageShell
+          locale={locale}
+          spec={spec}
+          showDefaultHeader={false}
+          faqItems={faqItems}
+        >
+          <ToolWorkspaceSection
+            heading={pickL10n(page.workspace.heading, locale)}
+            hint={pickL10n(page.workspace.hint, locale)}
+            badge={pickL10nOptional(page.workspace.badge, locale)}
+            headingLevel="h1"
+          >
+            {clientMessages ? (
+              <PackageWidgetLoader
+                locale={locale}
+                messages={clientMessages}
+                slug={meta.slug}
+              />
+            ) : null}
+          </ToolWorkspaceSection>
+
+          <ToolLandingStandardSections
+            benefits={{
+              title: pickL10n(standard.benefits.title, locale),
+              cards: [
+                {
+                  ...standard.benefits.cards[0],
+                  title: pickL10n(standard.benefits.cards[0].title, locale),
+                  body: pickL10n(standard.benefits.cards[0].body, locale),
+                  icon: FileText,
+                },
+                {
+                  ...standard.benefits.cards[1],
+                  title: pickL10n(standard.benefits.cards[1].title, locale),
+                  body: pickL10n(standard.benefits.cards[1].body, locale),
+                  icon: SlidersHorizontal,
+                },
+                {
+                  ...standard.benefits.cards[2],
+                  title: pickL10n(standard.benefits.cards[2].title, locale),
+                  body: pickL10n(standard.benefits.cards[2].body, locale),
+                  icon: Download,
+                },
+              ],
+            }}
+            imageTextSections={imageTextSections}
+            generation={{
+              title: pickL10n(standard.generation.title, locale),
+              image: {
+                src: standard.generation.image.src,
+                alt: pickL10n(standard.generation.image.alt, locale),
+              },
+              steps: standard.generation.steps.map((step) => ({
+                title: pickL10n(step.title, locale),
+                body: pickL10n(step.body, locale),
+              })),
+              ctaLabel: pickL10n(standard.generation.ctaLabel, locale),
+            }}
+            faq={{
+              title: pickL10n(standard.faq.title, locale),
+              intro: pickL10n(standard.faq.intro, locale),
+              ctaLabel: pickL10n(standard.faq.ctaLabel, locale),
+              items: faqItems,
+            }}
+          />
+        </ToolPageShell>
+      );
+    }
+
+    return (
+      <ToolPageShell
+        locale={locale}
+        spec={spec}
+        heroVariant={assets.hero ? "immersive" : "split"}
+        heroBackgroundImage={assets.hero?.src}
+        heroBackgroundAlt={assets.hero ? pickL10n(assets.hero.alt, locale) : ""}
+        faqItems={faqItems}
+      >
+        <ToolWorkspaceSection
+          heading={pickL10n(page.workspace.heading, locale)}
+          hint={pickL10n(page.workspace.hint, locale)}
+          badge={pickL10nOptional(page.workspace.badge, locale)}
+          headingLevel="h1"
+        >
+          {clientMessages ? (
+            <PackageWidgetLoader
+              locale={locale}
+              messages={clientMessages}
+              slug={meta.slug}
+            />
+          ) : null}
+        </ToolWorkspaceSection>
+
+        {(page.sections ?? []).map((section, index) => (
+          <PackageSection key={index} section={section} locale={locale} />
+        ))}
+
+        <ToolFaqSection heading={tShared("faqHeading")} items={faqItems} />
+
+        {page.cta ? (
+          <ToolCta
+            locale={locale}
+            heading={pickL10nOptional(page.cta.heading, locale)}
+            hint={pickL10n(page.cta.hint, locale)}
+            primary={{
+              href: page.cta.primary.href,
+              label: pickL10n(page.cta.primary.label, locale),
+            }}
+            secondary={
+              page.cta.secondary
+                ? {
+                    href: page.cta.secondary.href,
+                    label: pickL10n(page.cta.secondary.label, locale),
+                  }
+                : undefined
+            }
+          />
+        ) : null}
+      </ToolPageShell>
+    );
+  };
+}