@tomako/tools-runtime 0.1.1 → 0.1.3

package/src/features/tools/shared/tool-standard-landing-sections.tsx

@@ -16,12 +16,14 @@ export type ToolStandardBenefitCard = {
 export type ToolStandardImageTextSection = {
   id?: string;
   title: string;
-  body: readonly string[];
+  body: readonly ToolStandardBodyParagraph[];
   image: {
     src: string;
     alt: string;
   };
   imageFirst?: boolean;
+  /** Keep a useful desktop illustration without forcing it into a narrow reading flow. */
+  hideImageOnMobile?: boolean;
   background?: "white" | "muted";
 };
 
@@ -32,10 +34,28 @@ export type ToolStandardImageTextSection = {
 export type ToolStandardNarrativeSection = {
   id?: string;
   title: string;
-  body: readonly string[];
+  body: readonly ToolStandardBodyParagraph[];
   background?: "white" | "muted";
 };
 
+/**
+ * A shared, visual reading pattern for rules, limits, and next actions that
+ * need hierarchy but do not need a decorative illustration.
+ */
+export type ToolStandardEditorialSection = {
+  id?: string;
+  title: string;
+  body: readonly ToolStandardBodyParagraph[];
+};
+
+/** Highlight only the short phrase that carries a rule, formula, or decision. */
+export type ToolStandardBodyParagraph =
+  | string
+  | {
+      text: string;
+      highlights?: readonly string[];
+    };
+
 export type ToolStandardGenerationStep = {
   title: string;
   body: string;
@@ -54,12 +74,26 @@ export type ToolStandardReportPreview = {
   }[];
 };
 
+export type ToolStandardReferenceTable = {
+  title: string;
+  intro: string;
+  mobileHint?: string;
+  columns: readonly [string, string, string, string];
+  rows: readonly {
+    label: string;
+    cells: readonly [string, string, string];
+  }[];
+  note?: string;
+};
+
 export type ToolStandardSectionId =
   | "benefits"
   | "reportPreview"
   | "imageTextSections"
   | "narrative"
+  | "editorial"
   | "generation"
+  | "referenceTable"
   | "faq";
 
 export type ToolStandardFaqItem = {
@@ -74,7 +108,8 @@ export type ToolLandingStandardSectionsProps = {
   };
   imageTextSections: readonly ToolStandardImageTextSection[];
   narrativeSections?: readonly ToolStandardNarrativeSection[];
-  generation: {
+  editorialSections?: readonly ToolStandardEditorialSection[];
+  generation?: {
     title: string;
     image: {
       src: string;
@@ -83,17 +118,23 @@ export type ToolLandingStandardSectionsProps = {
     steps: readonly ToolStandardGenerationStep[];
     ctaLabel: string;
     ctaHref?: string;
+    showImage?: boolean;
+    showCta?: boolean;
   };
   reportPreview?: ToolStandardReportPreview;
+  referenceTable?: ToolStandardReferenceTable;
   faq: {
     title: string;
     intro: string;
     ctaLabel: string;
     ctaHref?: string;
+    showCta?: boolean;
     items: readonly ToolStandardFaqItem[];
   };
   /** Keep the shared primitives, while allowing a report-style tool to lead with its output. */
   sectionOrder?: readonly ToolStandardSectionId[];
+  /** Use a denser vertical rhythm for tools whose first task is already above the fold. */
+  mobileDensity?: "default" | "compact";
   className?: string;
 };
 
@@ -101,19 +142,24 @@ export function ToolLandingStandardSections({
   benefits,
   imageTextSections,
   narrativeSections = [],
+  editorialSections = [],
   generation,
   reportPreview,
+  mobileDensity = "default",
+  referenceTable,
   faq,
   sectionOrder = [
     "benefits",
     "imageTextSections",
+    "editorial",
     "generation",
     "faq",
   ],
   className,
 }: ToolLandingStandardSectionsProps) {
+  const compactMobile = mobileDensity === "compact";
   const sections: Record<ToolStandardSectionId, ReactNode> = {
-    benefits: <ToolStandardBenefitsSection {...benefits} />,
+    benefits: <ToolStandardBenefitsSection {...benefits} compactMobile={compactMobile} />,
     reportPreview: reportPreview ? (
       <ToolStandardReportPreviewSection {...reportPreview} />
     ) : null,
@@ -121,14 +167,21 @@ export function ToolLandingStandardSections({
       <ToolStandardImageTextBlock
         key={section.id ?? section.title}
         {...section}
+        compactMobile={compactMobile}
         imagePriority={index === 0}
       />
     )),
     narrative: narrativeSections.map((section) => (
-      <ToolStandardNarrativeBlock key={section.id ?? section.title} {...section} />
+      <ToolStandardNarrativeBlock key={section.id ?? section.title} {...section} compactMobile={compactMobile} />
     )),
-    generation: <ToolStandardGenerationSection {...generation} />,
-    faq: <ToolStandardFaqSection {...faq} />,
+    editorial: editorialSections.length > 0 ? (
+      <ToolStandardEditorialSection items={editorialSections} compactMobile={compactMobile} />
+    ) : null,
+    generation: generation ? <ToolStandardGenerationSection {...generation} compactMobile={compactMobile} /> : null,
+    referenceTable: referenceTable ? (
+      <ToolStandardReferenceTableSection {...referenceTable} />
+    ) : null,
+    faq: <ToolStandardFaqSection {...faq} compactMobile={compactMobile} />,
   };
 
   return (
@@ -140,26 +193,134 @@ export function ToolLandingStandardSections({
   );
 }
 
+function ToolStandardEditorialSection({
+  items,
+  compactMobile = false,
+}: {
+  items: readonly ToolStandardEditorialSection[];
+  compactMobile?: boolean;
+}) {
+  return (
+    <div
+      className={`relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white ${compactMobile ? "py-10 md:py-14" : "py-12 md:py-16"}`}
+      data-tool-standard-section="editorial"
+    >
+      <div className="mx-auto w-full max-w-[76rem] overflow-hidden rounded-[28px] bg-[#F6F8FA] px-4 sm:px-8">
+        {items.map((item, index) => (
+          <section
+            key={item.id ?? item.title}
+            className={`grid gap-7 px-5 py-8 sm:px-8 md:px-10 md:py-10 xl:grid-cols-[minmax(0,0.4fr)_minmax(0,0.6fr)] xl:gap-12 ${index > 0 ? "border-t border-[#DFE5EB]" : ""} ${compactMobile ? "lg:py-11" : ""}`}
+            data-tool-standard-section={item.id ?? "editorial-item"}
+          >
+            <div className="flex min-w-0 xl:gap-5">
+              <span
+                aria-hidden
+                className="hidden pt-1 text-xs font-semibold tabular-nums tracking-[0.12em] text-[#687785] xl:block"
+              >
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <h2 className="max-w-[450px] text-[25px] font-semibold leading-[33px] text-[#010205] sm:text-balance sm:text-[28px] sm:leading-[35px]">
+                {item.title}
+              </h2>
+            </div>
+            <div className="max-w-[680px] space-y-4 text-[16px] leading-[27px] text-[#26323D] sm:text-[16px] sm:leading-[28px] md:border-l md:border-[#DFE5EB] md:pl-10 xl:pl-12">
+              {item.body.map((paragraph, index) => (
+                <p key={index}>{renderToolStandardParagraph(paragraph)}</p>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ToolStandardReferenceTableSection({
+  title,
+  intro,
+  mobileHint,
+  columns,
+  rows,
+  note,
+}: ToolStandardReferenceTable) {
+  return (
+    <section
+      className="relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white px-5 py-24 md:px-10 md:py-28 lg:px-16 lg:py-32"
+      data-tool-standard-section="reference-table"
+    >
+      <div className="mx-auto max-w-[1284px]">
+        <h2 className="max-w-[760px] text-balance text-[2rem] font-semibold leading-[1.18] text-[#010205] md:text-[40px]">
+          {title}
+        </h2>
+        <p className="mt-5 max-w-[760px] text-pretty text-base leading-[26px] text-[#0D1216]">
+          {intro}
+        </p>
+        {mobileHint ? (
+          <p className="mt-6 text-sm font-medium text-[#56616B] md:hidden">{mobileHint}</p>
+        ) : null}
+        <div className="mt-4 overflow-x-auto rounded-2xl border border-[#DDE3EA] bg-white md:mt-8">
+          <table className="w-full min-w-[760px] border-collapse text-left">
+            <thead className="bg-[#F6F7F8]">
+              <tr>
+                {columns.map((column, index) => (
+                  <th
+                    key={column}
+                    className={`border-b border-[#DDE3EA] px-5 py-4 text-sm font-semibold text-[#010205] ${
+                      index === 0 ? "sticky left-0 z-10 bg-[#F6F7F8] md:static" : ""
+                    }`}
+                    scope="col"
+                  >
+                    {column}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => (
+                <tr key={row.label} className="border-b border-[#E8EBF0] last:border-b-0">
+                  <th
+                    className="sticky left-0 z-10 bg-white px-5 py-4 text-sm font-semibold text-[#010205] md:static"
+                    scope="row"
+                  >
+                    {row.label}
+                  </th>
+                  {row.cells.map((cell) => (
+                    <td key={cell} className="px-5 py-4 text-sm leading-6 text-[#4D5964]">
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {note ? <p className="mt-4 text-sm leading-6 text-[#56616B]">{note}</p> : null}
+      </div>
+    </section>
+  );
+}
+
 function ToolStandardNarrativeBlock({
   id,
   title,
   body,
   background = "white",
-}: ToolStandardNarrativeSection) {
+  compactMobile = false,
+}: ToolStandardNarrativeSection & { compactMobile?: boolean }) {
   return (
     <section
-      className={`relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] px-5 py-20 md:px-10 md:py-24 lg:px-16 lg:py-28 ${
+      className={`relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] ${compactMobile ? "py-16 md:py-24 lg:py-28" : "py-20 md:py-24 lg:py-28"} ${
         background === "muted" ? "bg-[#F6F7F8]" : "bg-white"
       }`}
       data-tool-standard-section={id ?? "narrative"}
     >
-      <div className="mx-auto max-w-[880px]">
+      <div className="mx-auto w-full max-w-[880px] px-4 sm:px-8">
         <h2 className="text-balance text-[2rem] font-semibold leading-[1.18] text-[#010205] md:text-[40px]">
           {title}
         </h2>
         <div className="mt-5 space-y-4 text-pretty text-base leading-[28px] text-[#0D1216] md:text-lg">
           {body.map((paragraph, index) => (
-            <p key={index}>{paragraph}</p>
+            <p key={index}>{renderToolStandardParagraph(paragraph)}</p>
           ))}
         </div>
       </div>
@@ -170,37 +331,37 @@ function ToolStandardNarrativeBlock({
 function ToolStandardBenefitsSection({
   title,
   cards,
+  compactMobile = false,
 }: {
   title: string;
   cards: readonly ToolStandardBenefitCard[];
+  compactMobile?: boolean;
 }) {
   return (
     <section
-      className="relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white px-5 py-24 md:px-10 md:py-28 lg:px-16 lg:py-32"
+      className={`relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white ${compactMobile ? "py-12 sm:py-16 md:py-20 lg:py-24" : "py-16 sm:py-20 md:py-24 lg:py-28"}`}
       data-tool-standard-section="benefits"
     >
-      <div className="mx-auto max-w-[1284px]">
-        <h2 className="text-balance text-center text-[2rem] font-semibold leading-[1.18] text-[#010205] md:text-[40px]">
+      <div className="mx-auto w-full max-w-[76rem] px-4 sm:px-8">
+        <h2 className="text-[25px] font-semibold leading-[33px] text-[#010205] sm:text-balance sm:text-center sm:text-[28px] sm:leading-[35px]">
           {title}
         </h2>
-        <div className="mt-8 grid gap-6 lg:grid-cols-3">
+        <div className="mt-6 grid gap-3 sm:mt-8 sm:gap-5 lg:grid-cols-3">
           {cards.map((item) => {
             const Icon = item.icon;
 
             return (
               <article
                 key={item.title}
-                className="min-w-0 rounded-2xl bg-[#F6F7F8] p-6"
+                className="grid min-w-0 grid-cols-[40px_minmax(0,1fr)] gap-x-3 rounded-2xl border border-[#E4E9F1] bg-[#F8F9FA] p-5 sm:gap-x-4 sm:p-6"
               >
-                <div className="flex min-w-0 items-center gap-4">
-                  <span className="flex size-12 shrink-0 items-center justify-center rounded-lg bg-[#E0D9FC] text-[#0D1216]">
-                    <Icon aria-hidden className="size-5" />
-                  </span>
-                  <h3 className="text-xl font-semibold leading-snug text-[#010205] md:text-2xl">
-                    {item.title}
-                  </h3>
-                </div>
-                <p className="mt-4 text-pretty text-base leading-[26px] text-[#11171D]/60">
+                <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#E0D9FC] text-[#0D1216]">
+                  <Icon aria-hidden className="size-[18px]" />
+                </span>
+                <h3 className="self-center text-[18px] font-semibold leading-[28px] text-[#010205]">
+                  {item.title}
+                </h3>
+                <p className="col-start-2 mt-2 text-[16px] leading-[27px] text-[#4D5964]">
                   {item.body}
                 </p>
               </article>
@@ -218,75 +379,120 @@ function ToolStandardImageTextBlock({
   body,
   image,
   imageFirst = false,
+  hideImageOnMobile = false,
   imagePriority = false,
-}: ToolStandardImageTextSection & { imagePriority?: boolean }) {
+  compactMobile = false,
+}: ToolStandardImageTextSection & { imagePriority?: boolean; compactMobile?: boolean }) {
+  const imageClassName = `${imageFirst ? "order-2 xl:order-1" : "order-2"} ${hideImageOnMobile ? "hidden md:block" : ""}`;
+  const contentClassName = `order-1 min-w-0 ${imageFirst ? "xl:order-2 xl:pl-4" : "xl:pr-4"}`;
+
   return (
     <section
-      className="relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white px-5 py-24 md:px-10 md:py-28 lg:px-16 lg:py-32"
+      className={`relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white ${compactMobile ? "py-16 md:py-24 lg:py-32" : "py-24 md:py-28 lg:py-32"}`}
       data-tool-standard-section={id ?? "image-text"}
     >
       <div
-        className={`mx-auto grid max-w-[1356px] gap-8 xl:items-center xl:gap-12 ${
+        className={`mx-auto grid w-full max-w-[76rem] gap-8 px-4 sm:px-8 xl:items-center xl:gap-12 ${
           imageFirst
             ? "xl:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]"
             : "xl:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]"
         }`}
       >
         {imageFirst ? (
-          <ToolStandardImageFrame {...image} priority={imagePriority} />
+          <ToolStandardImageFrame {...image} className={imageClassName} priority={imagePriority} />
         ) : null}
-        <div className={`min-w-0 ${imageFirst ? "xl:pl-4" : "xl:pr-4"}`}>
-          <h2 className="max-w-[620px] whitespace-pre-line text-balance text-[2rem] font-semibold leading-[1.18] text-[#010205] md:text-[40px]">
-            {title}
+        <div className={contentClassName}>
+          <h2 className="max-w-[620px] text-[25px] font-semibold leading-[33px] text-[#010205] sm:text-balance sm:text-[28px] sm:leading-[35px]">
+            {renderToolStandardTitle(title)}
           </h2>
-          <div className="mt-5 max-w-2xl space-y-4 text-pretty text-base leading-[26px] text-[#0D1216]">
+          <div className="mt-5 max-w-2xl space-y-4 text-[16px] leading-[27px] text-[#0D1216] sm:leading-[28px]">
             {body.map((paragraph, index) => (
-              <p key={index}>{paragraph}</p>
+              <p key={index}>{renderToolStandardParagraph(paragraph)}</p>
             ))}
           </div>
         </div>
         {imageFirst ? null : (
-          <ToolStandardImageFrame {...image} priority={imagePriority} />
+          <ToolStandardImageFrame {...image} className={imageClassName} priority={imagePriority} />
         )}
       </div>
     </section>
   );
 }
 
+function renderToolStandardTitle(title: string) {
+  const lines = title.split("\n");
+
+  return lines.map((line, index) => (
+    <span key={`${line}-${index}`} className={index > 0 ? "xl:block" : undefined}>
+      {index > 0 ? <span className="xl:hidden"> </span> : null}
+      {line}
+    </span>
+  ));
+}
+
+function renderToolStandardParagraph(paragraph: ToolStandardBodyParagraph) {
+  if (typeof paragraph === "string" || !paragraph.highlights?.length) {
+    return typeof paragraph === "string" ? paragraph : paragraph.text;
+  }
+
+  const highlights = [...new Set(paragraph.highlights.filter(Boolean))].sort((a, b) => b.length - a.length);
+  const expression = new RegExp(`(${highlights.map(escapeRegExp).join("|")})`, "g");
+
+  return paragraph.text.split(expression).filter(Boolean).map((part, index) =>
+    highlights.includes(part) ? (
+      <mark
+        key={index}
+        className="rounded-[3px] bg-[#FFF0A8] px-1 font-semibold text-[#171714] [box-decoration-break:clone] [-webkit-box-decoration-break:clone]"
+      >
+        {part}
+      </mark>
+    ) : (
+      part
+    ),
+  );
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 function ToolStandardGenerationSection({
   title,
   image,
   steps,
   ctaLabel,
   ctaHref,
-}: ToolLandingStandardSectionsProps["generation"]) {
+  showImage = true,
+  showCta = true,
+  compactMobile = false,
+}: ToolLandingStandardSectionsProps["generation"] & { compactMobile?: boolean }) {
   return (
     <section
-      className="relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white px-5 py-24 md:px-10 md:py-28 lg:px-16 lg:py-32"
+      className={`relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-white ${compactMobile ? "py-16 md:py-24 lg:py-32" : "py-24 md:py-28 lg:py-32"}`}
       data-tool-standard-section="generation-steps"
     >
-      <div className="mx-auto grid max-w-[1284px] gap-10 xl:grid-cols-2 xl:items-center xl:gap-14">
-        <ToolStandardImageFrame {...image} />
-        <div className="min-w-0 xl:pl-4">
+      <div className={`mx-auto w-full px-4 sm:px-8 ${showImage ? "grid max-w-[76rem] gap-10 xl:grid-cols-2 xl:items-center xl:gap-14" : "max-w-[760px]"}`}>
+        {showImage ? <ToolStandardImageFrame {...image} /> : null}
+        <div className={showImage ? "min-w-0 xl:pl-4" : "min-w-0"}>
           <h2 className="max-w-[620px] whitespace-pre-line text-balance text-[2rem] font-semibold leading-[1.18] text-[#010205] md:text-[40px]">
             {title}
           </h2>
           <ToolStandardGenerationSteps steps={steps} />
-          {ctaHref ? (
+          {showCta && ctaHref ? (
             <Button
               asChild
               className="mt-8 h-12 min-w-40 rounded-lg bg-black px-4 text-base font-semibold text-white shadow-none hover:bg-[#1F1F1F]"
             >
               <a href={ctaHref}>{ctaLabel}</a>
             </Button>
-          ) : (
+          ) : showCta ? (
             <Button
               type="button"
               className="mt-8 h-12 min-w-40 rounded-lg bg-black px-4 text-base font-semibold text-white shadow-none hover:bg-[#1F1F1F]"
             >
               {ctaLabel}
             </Button>
-          )}
+          ) : null}
         </div>
       </div>
     </section>
@@ -304,10 +510,10 @@ function ToolStandardReportPreviewSection({
 }: ToolStandardReportPreview) {
   return (
     <section
-      className="relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-[#F6F7F8] px-5 py-24 md:px-10 md:py-28 lg:px-16 lg:py-32"
+      className="relative left-1/2 w-screen -translate-x-1/2 border-t border-[#E8EBF0] bg-[#F6F7F8] py-24 md:py-28 lg:py-32"
       data-tool-standard-section="report-preview"
     >
-      <div className="mx-auto max-w-[1284px]">
+      <div className="mx-auto w-full max-w-[76rem] px-4 sm:px-8">
         <p className="text-sm font-semibold uppercase tracking-[0.08em] text-[#4A5968]">
           {eyebrow}
         </p>
@@ -361,13 +567,15 @@ function ToolStandardFaqSection({
   ctaLabel,
   ctaHref,
   items,
-}: ToolLandingStandardSectionsProps["faq"]) {
+  showCta = true,
+  compactMobile = false,
+}: ToolLandingStandardSectionsProps["faq"] & { compactMobile?: boolean }) {
   return (
     <section
-      className="relative left-1/2 w-screen -translate-x-1/2 overflow-hidden border-t border-[#E8EBF0] bg-white px-5 py-24 md:px-10 md:py-28 lg:px-16 lg:py-32"
+      className={`relative left-1/2 w-screen -translate-x-1/2 overflow-hidden border-t border-[#E8EBF0] bg-white ${compactMobile ? "py-16 md:py-24 lg:py-32" : "py-24 md:py-28 lg:py-32"}`}
       data-tool-standard-section="faq"
     >
-      <div className="relative mx-auto grid max-w-[1280px] gap-12 lg:grid-cols-[0.42fr_0.58fr] lg:gap-[90px]">
+      <div className="relative mx-auto grid w-full max-w-[76rem] gap-12 px-4 sm:px-8 lg:grid-cols-[0.42fr_0.58fr] lg:gap-[90px]">
         <div>
           <h2 className="max-w-[620px] whitespace-pre-line text-balance text-[2rem] font-semibold leading-[1.18] text-[#010205] md:text-[40px]">
             {title}
@@ -375,7 +583,7 @@ function ToolStandardFaqSection({
           <p className="mt-8 max-w-[531px] text-pretty text-base leading-[26px] text-[#0D1216]">
             {intro}
           </p>
-          {ctaHref ? (
+          {showCta && ctaHref ? (
             <Button
               asChild
               variant="outline"
@@ -383,7 +591,7 @@ function ToolStandardFaqSection({
             >
               <a href={ctaHref}>{ctaLabel}</a>
             </Button>
-          ) : (
+          ) : showCta ? (
             <Button
               type="button"
               variant="outline"
@@ -391,7 +599,7 @@ function ToolStandardFaqSection({
             >
               {ctaLabel}
             </Button>
-          )}
+          ) : null}
         </div>
         <div className="min-w-0">
           {items.map((item, index) => (
@@ -426,13 +634,15 @@ function ToolStandardImageFrame({
   alt,
   src,
   priority = false,
+  className,
 }: {
   alt: string;
   src: string;
   priority?: boolean;
+  className?: string;
 }) {
   return (
-    <figure className="mx-auto w-full min-w-0 max-w-[760px] overflow-hidden rounded-2xl border border-[#40576D]/[0.07] bg-white xl:max-w-none">
+    <figure className={`mx-auto w-full min-w-0 max-w-[760px] overflow-hidden rounded-2xl border border-[#40576D]/[0.07] bg-white xl:max-w-none ${className ?? ""}`}>
       <Image
         alt={alt}
         className="h-auto w-full object-cover"

package/src/features/tools/spec-registry.ts

@@ -17,6 +17,7 @@ import { kokoCodexAssistantSpec } from "./koko-codex-assistant/koko-codex-assist
 import { logoGeneratorSpec } from "./logo-generator/logo-generator.spec";
 import { marketForecastReportSpec } from "./market-forecast-report/market-forecast-report.spec";
 import { millionUserGrowthTestSpec } from "./million-user-growth-test/million-user-growth-test.spec";
+import { mrrCalculatorSpec } from "./mrr-calculator/mrr-calculator.spec";
 import { ogImageGeneratorSpec } from "./og-image-generator/og-image-generator.spec";
 import { createPackageToolSpec } from "./package/to-tool-spec";
 import { pitchDeckGeneratorSpec } from "./pitch-deck-generator/pitch-deck-generator.spec";
@@ -46,6 +47,7 @@ const toolSpecs: ToolSpec[] = [
   productNameGeneratorSpec,
   productPosterGeneratorSpec,
   millionUserGrowthTestSpec,
+  mrrCalculatorSpec,
   marketForecastReportSpec,
   productUiGeneratorSpec,
   appStoreScreenshotGeneratorSpec,

package/src/features/tools/widget-registry.ts

@@ -15,6 +15,7 @@ import { GtmReadinessChecklistWidget } from "./gtm-readiness-checklist/widget";
 import { KokoCodexAssistantDownload } from "./koko-codex-assistant/widget";
 import { LogoGenerator } from "./logo-generator/widget";
 import { MillionUserGrowthTest } from "./million-user-growth-test/widget";
+import { MrrCalculator } from "./mrr-calculator/widget";
 import { OgImageGenerator } from "./og-image-generator/widget";
 import { PitchDeckGenerator } from "./pitch-deck-generator/widget";
 import { ProductAgreementGenerator } from "./product-agreement-generator/widget";
@@ -50,6 +51,7 @@ export const colocatedToolWidgets: Record<string, ComponentType> = {
   "koko-codex-assistant": KokoCodexAssistantDownload,
   "logo-generator": LogoGenerator,
   "million-user-growth-test": MillionUserGrowthTest,
+  "mrr-calculator": MrrCalculator,
   "og-image-generator": OgImageGenerator,
   "pitch-deck-generator": PitchDeckGenerator,
   "product-agreement-generator": ProductAgreementGenerator,