@tomako/tools-runtime 0.1.1 → 0.1.2

package/src/features/tools/shared/create-standard-landing-container.tsx

@@ -3,9 +3,11 @@ import type { ComponentType } from "react";
 
 import type {
     ToolStandardFaqItem,
+    ToolStandardEditorialSection,
     ToolStandardGenerationStep,
     ToolStandardImageTextSection,
     ToolStandardNarrativeSection,
+    ToolStandardReferenceTable,
     ToolStandardReportPreview,
     ToolStandardSectionId,
 } from "../../../features/tools/shared/tool-standard-landing-sections";
@@ -33,6 +35,10 @@ export type StandardLandingCopyKeys = {
   reportPreview?: string;
   /** Optional answer-first sections for decision and strategy tools. */
   narrativeSections?: string;
+  /** Optional structured reading sections for rules, limits, and next actions. */
+  editorialSections?: string;
+  /** Optional searchable specifications table. */
+  referenceTable?: string;
 };
 
 export type StandardLandingContainerConfig = {
@@ -50,6 +56,14 @@ export type StandardLandingContainerConfig = {
   passFaqToShell?: boolean;
   /** A content CTA may navigate to a real, cost-free action. */
   contentCtaHref?: string;
+  /** Hide repeated content CTAs when the primary action is already the workspace above. */
+  showContentCtas?: boolean;
+  /** Some tools have a useful step list but no extra illustration to repeat it. */
+  showGenerationImage?: boolean;
+  /** Only render a standalone guide when the tool has a real sequential workflow. */
+  showGeneration?: boolean;
+  /** Use less vertical padding and a grouped benefit list below mobile breakpoints. */
+  compactMobileSections?: boolean;
   /** Override the default section sequence when the tool archetype needs a different reading flow. */
   sectionOrder?: readonly ToolStandardSectionId[];
 };
@@ -73,6 +87,10 @@ export function createStandardLandingContainer(
     workspaceHeadingLevel = "h1",
     passFaqToShell = true,
     contentCtaHref,
+    showContentCtas = true,
+    showGenerationImage = true,
+    showGeneration = true,
+    compactMobileSections = false,
     sectionOrder,
   } = config;
 
@@ -96,9 +114,12 @@ export function createStandardLandingContainer(
     const narrativeSections = copyKeys?.narrativeSections
       ? (t.raw(copyKeys.narrativeSections) as readonly ToolStandardNarrativeSection[])
       : [];
-    const generationSteps = t.raw(
-      "standard.generation.steps",
-    ) as readonly ToolStandardGenerationStep[];
+    const editorialSections = copyKeys?.editorialSections
+      ? (t.raw(copyKeys.editorialSections) as readonly ToolStandardEditorialSection[])
+      : [];
+    const generationSteps = showGeneration
+      ? (t.raw("standard.generation.steps") as readonly ToolStandardGenerationStep[])
+      : [];
     const faqRaw = t.raw("faqItems");
     const faqItems = (
       Array.isArray(faqRaw) ? faqRaw : []
@@ -106,6 +127,9 @@ export function createStandardLandingContainer(
     const reportPreview = copyKeys?.reportPreview
       ? (t.raw(copyKeys.reportPreview) as ToolStandardReportPreview)
       : undefined;
+    const referenceTable = copyKeys?.referenceTable
+      ? (t.raw(copyKeys.referenceTable) as ToolStandardReferenceTable)
+      : undefined;
     const shellFaq = faqItems.filter(
       (item): item is { question: string; answer: string } =>
         typeof item.answer === "string",
@@ -137,7 +161,8 @@ export function createStandardLandingContainer(
           }}
           imageTextSections={imageTextSections}
           narrativeSections={narrativeSections}
-          generation={{
+          editorialSections={editorialSections}
+          generation={showGeneration ? {
             title: t("standard.generation.title"),
             image: {
               src: generationImageSrc,
@@ -146,15 +171,20 @@ export function createStandardLandingContainer(
             steps: generationSteps,
             ctaLabel: t("standard.generation.ctaLabel"),
             ctaHref: contentCtaHref,
-          }}
+            showCta: showContentCtas,
+            showImage: showGenerationImage,
+          } : undefined}
           reportPreview={reportPreview}
+          referenceTable={referenceTable}
           faq={{
             title: t(faqTitleKey),
             intro: t("standard.faqIntro"),
             ctaLabel: t("standard.faqCtaLabel"),
             ctaHref: contentCtaHref,
+            showCta: showContentCtas,
             items: faqItems,
           }}
+          mobileDensity={compactMobileSections ? "compact" : "default"}
           sectionOrder={sectionOrder}
         />
       </ToolPageShell>

package/src/features/tools/shared/tool-page-shell.tsx

@@ -104,7 +104,7 @@ export async function ToolPageShell({
             ) : null}
 
             <div className="relative z-10 flex min-h-[min(72svh,680px)] flex-col">
-              <div className="mx-auto flex w-full max-w-screen-2xl flex-1 flex-col justify-center gap-10 px-5 pb-8 pt-8 sm:px-8 md:px-12 lg:px-16 lg:pt-12">
+              <div className="mx-auto flex w-full max-w-[76rem] flex-1 flex-col justify-center gap-10 px-4 pb-8 pt-8 sm:px-8 lg:pt-12">
                 <div className="grid flex-1 gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
                   <div className="max-w-4xl">
                     <p className="inline-flex items-center gap-2 rounded-full border border-[#2B211A]/14 bg-[#FFF8EA]/45 px-4 py-2 text-sm font-semibold text-[#4C3C31] shadow-[0_12px_36px_rgba(83,48,28,0.08)] backdrop-blur">
@@ -136,13 +136,13 @@ export async function ToolPageShell({
             </div>
           </section>
 
-          <div className="mx-auto flex max-w-screen-2xl flex-col gap-16 px-5 py-16 sm:px-8 md:gap-20 md:py-24">
+          <div className="mx-auto flex max-w-[76rem] flex-col gap-16 px-4 py-16 sm:px-8 md:gap-20 md:py-24">
             {children}
           </div>
         </>
       ) : (
         <>
-          <div className="mx-auto max-w-screen-2xl px-5 py-5 sm:px-8">
+          <div className="mx-auto max-w-[76rem] px-4 py-5 sm:px-8">
             {heroVariant === "showcase" && heroVisual ? (
               <section className="pb-14 pt-14 md:pb-16 md:pt-16">
                 <div className="mx-auto max-w-4xl text-center">
@@ -211,7 +211,7 @@ export async function ToolPageShell({
         </>
       )}
       {relatedToolSlugs?.length ? (
-        <div className="mx-auto w-full max-w-screen-2xl px-5 pb-16 sm:px-8 md:pb-20">
+        <div className="mx-auto w-full max-w-[76rem] px-4 pb-16 sm:px-8 md:pb-20">
           <RelatedTools locale={locale} currentToolSlug={spec.slug} slugs={relatedToolSlugs} />
         </div>
       ) : null}