@tomako/tools-runtime 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomako/tools-runtime",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Shared interactive tools runtime for Tomako-FE workspace dialogs and Tomako-SEO tool pages",
   "type": "module",
   "exports": {
@@ -176,6 +176,12 @@
     "./features/tools/million-user-growth-test/widget/index": "./src/features/tools/million-user-growth-test/widget/index.ts",
     "./features/tools/million-user-growth-test/widget": "./src/features/tools/million-user-growth-test/widget/index.ts",
     "./features/tools/million-user-growth-test/widget/million-user-growth-test": "./src/features/tools/million-user-growth-test/widget/million-user-growth-test.tsx",
+    "./features/tools/mrr-calculator/mrr-calculator.container": "./src/features/tools/mrr-calculator/mrr-calculator.container.tsx",
+    "./features/tools/mrr-calculator/mrr-calculator.spec": "./src/features/tools/mrr-calculator/mrr-calculator.spec.ts",
+    "./features/tools/mrr-calculator/widget/calculations": "./src/features/tools/mrr-calculator/widget/calculations.ts",
+    "./features/tools/mrr-calculator/widget/index": "./src/features/tools/mrr-calculator/widget/index.ts",
+    "./features/tools/mrr-calculator/widget": "./src/features/tools/mrr-calculator/widget/index.ts",
+    "./features/tools/mrr-calculator/widget/mrr-calculator": "./src/features/tools/mrr-calculator/widget/mrr-calculator.tsx",
     "./features/tools/module-loader": "./src/features/tools/module-loader.ts",
     "./features/tools/og-image-generator/og-image-generator.container": "./src/features/tools/og-image-generator/og-image-generator.container.tsx",
     "./features/tools/og-image-generator/og-image-generator.spec": "./src/features/tools/og-image-generator/og-image-generator.spec.ts",
@@ -410,6 +416,7 @@
     "./i18n/messages/en/tools/logo-generator": "./src/i18n/messages/en/tools/logo-generator.ts",
     "./i18n/messages/en/tools/market-forecast-report": "./src/i18n/messages/en/tools/market-forecast-report.ts",
     "./i18n/messages/en/tools/million-user-growth-test": "./src/i18n/messages/en/tools/million-user-growth-test.ts",
+    "./i18n/messages/en/tools/mrr-calculator": "./src/i18n/messages/en/tools/mrr-calculator.ts",
     "./i18n/messages/en/tools/og-image-generator": "./src/i18n/messages/en/tools/og-image-generator.ts",
     "./i18n/messages/en/tools/pitch-deck-generator": "./src/i18n/messages/en/tools/pitch-deck-generator.ts",
     "./i18n/messages/en/tools/product-agreement-generator": "./src/i18n/messages/en/tools/product-agreement-generator.ts",
@@ -448,6 +455,7 @@
     "./i18n/messages/zh/tools/logo-generator": "./src/i18n/messages/zh/tools/logo-generator.ts",
     "./i18n/messages/zh/tools/market-forecast-report": "./src/i18n/messages/zh/tools/market-forecast-report.ts",
     "./i18n/messages/zh/tools/million-user-growth-test": "./src/i18n/messages/zh/tools/million-user-growth-test.ts",
+    "./i18n/messages/zh/tools/mrr-calculator": "./src/i18n/messages/zh/tools/mrr-calculator.ts",
     "./i18n/messages/zh/tools/og-image-generator": "./src/i18n/messages/zh/tools/og-image-generator.ts",
     "./i18n/messages/zh/tools/pitch-deck-generator": "./src/i18n/messages/zh/tools/pitch-deck-generator.ts",
     "./i18n/messages/zh/tools/product-agreement-generator": "./src/i18n/messages/zh/tools/product-agreement-generator.ts",
@@ -486,6 +494,7 @@
     "./i18n/messages/zh-tw/tools/logo-generator": "./src/i18n/messages/zh-tw/tools/logo-generator.ts",
     "./i18n/messages/zh-tw/tools/market-forecast-report": "./src/i18n/messages/zh-tw/tools/market-forecast-report.ts",
     "./i18n/messages/zh-tw/tools/million-user-growth-test": "./src/i18n/messages/zh-tw/tools/million-user-growth-test.ts",
+    "./i18n/messages/zh-tw/tools/mrr-calculator": "./src/i18n/messages/zh-tw/tools/mrr-calculator.ts",
     "./i18n/messages/zh-tw/tools/og-image-generator": "./src/i18n/messages/zh-tw/tools/og-image-generator.ts",
     "./i18n/messages/zh-tw/tools/pitch-deck-generator": "./src/i18n/messages/zh-tw/tools/pitch-deck-generator.ts",
     "./i18n/messages/zh-tw/tools/product-agreement-generator": "./src/i18n/messages/zh-tw/tools/product-agreement-generator.ts",
@@ -606,6 +615,7 @@
     }
   },
   "devDependencies": {
+    "@tomako/ui": "workspace:*",
     "@types/react": "^19.0.0",
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
@@ -617,11 +627,10 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.8.0",
-    "zod": "^4.4.3",
-    "@tomako/ui": "0.1.0"
+    "zod": "^4.4.3"
   },
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"
   }
-}
+}

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

@@ -173,7 +173,7 @@ export function ToolWorkspaceLayout({
       >
         <style>{`
           .tool-workspace-grid {
-            grid-template-columns: 1fr;
+            grid-template-columns: minmax(0, 1fr);
           }
           @media (min-width: 1024px) {
             .tool-workspace-grid {

package/src/constants/related-tools.ts

@@ -3,6 +3,10 @@
  * these slugs against the current public tool catalogue before rendering.
  */
 export const relatedToolSlugsByTool: Readonly<Record<string, readonly string[]>> = {
+  "app-icon-resizer": [
+    "app-store-screenshot-generator",
+    "social-platform-asset-adapter",
+  ],
   "cold-start-channel-selector": [
     "gtm-readiness-checklist",
     "community-post-risk-checker",

package/src/features/tools/app-icon-resizer/app-icon-resizer.container.tsx

@@ -1,4 +1,4 @@
-import { Download, FileArchive, Upload } from "lucide-react";
+import { Eye, FolderTree, Layers3 } from "lucide-react";
 
 import { createStandardLandingContainer } from "../../../features/tools/shared/create-standard-landing-container";
 import { AppIconResizer } from "./widget";
@@ -6,6 +6,19 @@ import { AppIconResizer } from "./widget";
 export const AppIconResizerContainer = createStandardLandingContainer({
   guideNamespace: "toolsPages.appIconResizer.guide",
   Widget: AppIconResizer,
-  benefitIcons: [Upload, FileArchive, Download],
+  benefitIcons: [Layers3, FolderTree, Eye],
   generationImageSrc: "/tools/app-icon-resizer-section-steps-8bit-v3.webp",
+  copyKeys: {
+    reportPreview: "standard.outputPreview",
+    referenceTable: "standard.referenceTable",
+  },
+  contentCtaHref: "#tool-workspace",
+  sectionOrder: [
+    "reportPreview",
+    "benefits",
+    "imageTextSections",
+    "generation",
+    "referenceTable",
+    "faq",
+  ],
 });

package/src/features/tools/app-icon-resizer/app-icon-resizer.spec.ts

@@ -6,7 +6,7 @@ export const appIconResizerSpec: ToolSpec = {
   riskLevel: "low",
   seo: {
     "publishedAt": "2026-06-30",
-    "updatedAt": "2026-07-13",
+    "updatedAt": "2026-08-19",
     "readingTime": "5 min",
     "featured": false,
     "ogImage": "/tools/app-icon-resizer-section-primary-8bit-v3.webp"

package/src/features/tools/app-icon-resizer/widget/app-icon-resizer.tsx

@@ -14,7 +14,7 @@ import {
     getAppIconAssetSpecs,
     type AppIconPlatform,
 } from "../../../../lib/tools/app-icon-resizer-schema";
-import { FileArchive, RotateCcw } from "lucide-react";
+import { FileArchive, FileImage, FolderTree, RotateCcw } from "lucide-react";
 import type { ChangeEvent, DragEvent, FormEvent } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 
@@ -395,16 +395,7 @@ export function AppIconResizer() {
                   t={t}
                 />
               ) : (
-                <ToolEmptyPanel
-                  body={t("outputEmptyHint")}
-                  className="h-full min-h-0 flex-1 rounded-lg"
-                  icon={
-                    <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-white text-[#111111] shadow-[0_10px_26px_rgba(17,17,17,0.08)]">
-                      <FileArchive aria-hidden className="size-5" />
-                    </span>
-                  }
-                  title={t("outputEmptyTitle")}
-                />
+                <AppIconPackageEmptyState platform={platform} t={t} />
               )}
             </ToolPreviewPanel>
           </div>
@@ -442,3 +433,55 @@ export function AppIconResizer() {
     </>
   );
 }
+
+function AppIconPackageEmptyState({
+  platform,
+  t,
+}: {
+  platform: AppIconPlatform;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+}) {
+  const paths = [
+    ...(platform !== "google"
+      ? ["Apple/AppIcon.appiconset/", "Apple/AppStoreIcon-1024.png"]
+      : []),
+    ...(platform !== "apple"
+      ? ["GooglePlay/app-icon-512.png", "Android/res/mipmap-*/"]
+      : []),
+    "README.txt",
+  ];
+
+  return (
+    <ToolEmptyPanel
+      body={
+        <span className="block w-full">
+          <span className="block">{t("outputEmptyHint")}</span>
+          <span className="mx-auto mt-5 block max-w-md rounded-xl border border-[#E1E5EA] bg-white p-3 text-left shadow-[0_12px_30px_rgba(17,17,17,0.05)]">
+            <span className="flex items-center gap-2 border-b border-[#EEF0F2] px-1 pb-2 text-xs font-semibold text-[#111111]">
+              <FolderTree aria-hidden className="size-4" />
+              {t("outputExampleLabel")}
+            </span>
+            <span className="mt-2 grid gap-1.5">
+              {paths.map((path) => (
+                <span
+                  key={path}
+                  className="flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 font-mono text-[11px] leading-4 text-[#4D5964]"
+                >
+                  <FileImage aria-hidden className="size-3.5 shrink-0 text-[#7B8792]" />
+                  <span className="min-w-0 break-all">{path}</span>
+                </span>
+              ))}
+            </span>
+          </span>
+        </span>
+      }
+      className="h-full min-h-0 flex-1 rounded-lg"
+      icon={
+        <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-white text-[#111111] shadow-[0_10px_26px_rgba(17,17,17,0.08)]">
+          <FileArchive aria-hidden className="size-5" />
+        </span>
+      }
+      title={t("outputEmptyTitle")}
+    />
+  );
+}

package/src/features/tools/app-icon-resizer/widget/platform-icons.tsx

@@ -26,19 +26,15 @@ function PlatformBrandIcon({
   kind: "app-store" | "google-play";
   variant: "pair" | "single";
 }) {
-  let sizeClass = "size-[34px]";
   let px = 34;
 
   if (variant === "pair") {
     if (kind === "google-play") {
-      sizeClass = "size-[22px]";
       px = 22;
     } else {
-      sizeClass = "size-[30px]";
       px = 30;
     }
   } else if (kind === "google-play") {
-    sizeClass = "size-[26px]";
     px = 26;
   }
 
@@ -46,13 +42,14 @@ function PlatformBrandIcon({
     <Image
       alt=""
       aria-hidden
-      className={`${sizeClass} shrink-0 object-contain`}
+      className="shrink-0 object-contain"
       height={px}
       src={
         kind === "app-store"
           ? "/tools/platform-app-store-icon.webp"
           : "/tools/platform-google-play-icon.webp"
       }
+      style={{ height: px, width: px }}
       width={px}
     />
   );

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

@@ -0,0 +1,23 @@
+import { Calculator, Eye, ReceiptText } from "lucide-react";
+
+import { createStandardLandingContainer } from "../../../features/tools/shared/create-standard-landing-container";
+import { MrrCalculator } from "./widget";
+
+export const MrrCalculatorContainer = createStandardLandingContainer({
+  guideNamespace: "toolsPages.mrrCalculator.guide",
+  Widget: MrrCalculator,
+  benefitIcons: [Calculator, ReceiptText, Eye],
+  generationImageSrc: "/tools/mrr-calculator-section-support-8bit.webp",
+  copyKeys: {
+    editorialSections: "standard.editorialSections",
+  },
+  compactMobileSections: true,
+  showContentCtas: false,
+  showGeneration: false,
+  sectionOrder: [
+    "benefits",
+    "imageTextSections",
+    "editorial",
+    "faq",
+  ],
+});

package/src/features/tools/mrr-calculator/mrr-calculator.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const mrrCalculatorSpec: ToolSpec = {
+  slug: "mrr-calculator",
+  toolType: "calculator",
+  riskLevel: "low",
+  seo: {
+    publishedAt: "2026-08-23",
+    updatedAt: "2026-08-23",
+    readingTime: "6 min",
+    featured: false,
+    ogImage: "/tools/mrr-calculator-section-primary-8bit.webp",
+  },
+  widget: { id: "mrr-calculator", mode: "custom" },
+};

package/src/features/tools/mrr-calculator/widget/calculations.ts

@@ -0,0 +1,74 @@
+export type BillingPeriod = "month" | "quarter" | "year";
+
+export type ExactMrrInput = {
+  activeCustomers: number;
+  recurringAmount: number;
+  billingPeriod: BillingPeriod;
+  previousMrr?: number;
+};
+
+export type ExactMrrResult = {
+  monthlyArpa: number;
+  mrr: number;
+  arr: number;
+  growthRate: number | null;
+};
+
+export type EstimatedMrrInput = {
+  monthlyVisits: number;
+  planPrice: number;
+  billingPeriod: BillingPeriod;
+  eligibleVisitShare: number;
+  visitorToPaidRate: number;
+  averagePaidLifetimeMonths: number;
+};
+
+export type EstimatedMrrResult = {
+  monthlyPlanPrice: number;
+  newPaidCustomers: number;
+  activePaidCustomers: number;
+  mrr: number;
+  arr: number;
+};
+
+const PERIOD_MONTHS: Record<BillingPeriod, number> = {
+  month: 1,
+  quarter: 3,
+  year: 12,
+};
+
+export function normalizeMonthlyAmount(amount: number, period: BillingPeriod): number {
+  return amount / PERIOD_MONTHS[period];
+}
+
+export function calculateExactMrr(input: ExactMrrInput): ExactMrrResult {
+  const monthlyArpa = normalizeMonthlyAmount(input.recurringAmount, input.billingPeriod);
+  const mrr = input.activeCustomers * monthlyArpa;
+  const growthRate =
+    input.previousMrr !== undefined && input.previousMrr > 0
+      ? (mrr - input.previousMrr) / input.previousMrr
+      : null;
+
+  return {
+    monthlyArpa,
+    mrr,
+    arr: mrr * 12,
+    growthRate,
+  };
+}
+
+export function estimateMrr(input: EstimatedMrrInput): EstimatedMrrResult {
+  const monthlyPlanPrice = normalizeMonthlyAmount(input.planPrice, input.billingPeriod);
+  const newPaidCustomers =
+    input.monthlyVisits * (input.eligibleVisitShare / 100) * (input.visitorToPaidRate / 100);
+  const activePaidCustomers = newPaidCustomers * input.averagePaidLifetimeMonths;
+  const mrr = activePaidCustomers * monthlyPlanPrice;
+
+  return {
+    monthlyPlanPrice,
+    newPaidCustomers,
+    activePaidCustomers,
+    mrr,
+    arr: mrr * 12,
+  };
+}

package/src/features/tools/mrr-calculator/widget/index.ts

@@ -0,0 +1 @@
+export { MrrCalculator } from "./mrr-calculator";