@tomako/tools-runtime 0.1.0

package/src/features/tools/app-icon-resizer/widget/types.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties } from "react";
+
+import type {
+    AppIconAsset,
+    AppIconPlatform,
+    AppIconResizerOutput,
+} from "../../../../lib/tools/app-icon-resizer-schema";
+
+export type SourceImage = {
+  fileName: string;
+  type: string;
+  dataUrl: string;
+  width: number;
+  height: number;
+  image: HTMLImageElement;
+};
+
+export type GeneratedIconAsset = AppIconAsset & {
+  blob: Blob;
+  url: string;
+};
+
+export type GeneratedPackage = AppIconResizerOutput & {
+  generatedAssets: GeneratedIconAsset[];
+  platform: AppIconPlatform;
+  zipBlob: Blob;
+};
+
+export type ResultTab = "all" | "apple" | "google";
+
+export type ZipFileInput = {
+  path: string;
+  data: Uint8Array;
+};
+
+export type TransparentPreviewStyle = CSSProperties;

package/src/features/tools/app-store-screenshot-generator/app-store-screenshot-generator.container.tsx

@@ -0,0 +1,108 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+import { AppStoreScreenshotGenerator } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolDividedRows,
+    ToolFaqSection,
+    ToolTripleComparisonSection,
+    ToolUseCasesBandSection,
+    type ToolFaqItem,
+    type ToolTextCard,
+    type ToolTripleComparisonItem,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import { ToolGuideSection, ToolImageVisual, ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+import { ImgConfig } from "./config";
+
+export async function AppStoreScreenshotGeneratorContainer({
+  locale,
+  spec,
+}: ToolPageProps) {
+  const t = await createToolGuideTranslator(
+    locale,
+    "toolsPages.appStoreScreenshotGenerator.guide",
+  );
+  
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage={ImgConfig.heroBgImg}
+      heroBackgroundAlt={t("heroVisualAlt")}
+      heroBackgroundColor="#F7F6F2"
+      heroBackgroundImageFrameClassName="inset-y-16 left-1/2 w-[calc(100%-2.5rem)] max-w-[1472px] -translate-x-1/2 sm:w-[calc(100%-4rem)] md:inset-y-24"
+      heroBackgroundImageSizes="(min-width: 1536px) 1472px, (min-width: 640px) calc(100vw - 4rem), calc(100vw - 2.5rem)"
+    >
+      <ToolWorkspaceSection heading={t("workspaceHeading")} hint={t("workspaceHint")}>
+        <AppStoreScreenshotGenerator />
+      </ToolWorkspaceSection>
+
+      <ToolGuideSection
+        heading={t("whatYouGetHeading")}
+        visual={
+          <ToolImageVisual
+            src="/tools/app-store-screenshot-generator-value.webp"
+            alt={t("valueVisualAlt")}
+            priority
+          />
+        }
+      >
+        <ToolCardGrid
+          items={t.raw("whatYouGetItems") as readonly ToolTextCard[]}
+          columns="two"
+          size="prominent"
+        />
+      </ToolGuideSection>
+
+      <ToolTripleComparisonSection
+        heading={t("comparisonHeading")}
+        items={t.raw("comparisonItems") as readonly ToolTripleComparisonItem[]}
+      />
+
+      <ToolGuideSection
+        heading={t("supportHeading")}
+        reverse
+        visual={
+          <ToolImageVisual
+            src="/tools/app-store-screenshot-generator-support.webp"
+            alt={t("supportVisualAlt")}
+          />
+        }
+      >
+        <ToolDividedRows items={t.raw("supportBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolGuideSection
+        heading={t("resultGuidanceHeading")}
+        visual={
+          <ToolImageVisual
+            src="/tools/app-store-screenshot-generator-use-case.webp"
+            alt={t("useCaseVisualAlt")}
+          />
+        }
+      >
+        <ToolDividedRows items={t.raw("resultGuidanceBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolUseCasesBandSection
+        heading={t("useCasesHeading")}
+        items={t.raw("useCaseItems") as readonly string[]}
+      />
+
+      <ToolFaqSection
+        heading={t("faqHeading")}
+        items={t.raw("faqItems") as readonly ToolFaqItem[]}
+      /> 
+      <ToolCta
+        hint={t("ctaHint")}
+        tone="neutral"
+        primary={{ href: "/tools/app-icon-resizer", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/app-store-screenshot-generator/app-store-screenshot-generator.spec.ts

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const appStoreScreenshotGeneratorSpec: ToolSpec = {
+  slug: "app-store-screenshot-generator",
+  toolType: "generator",
+  seo: {
+    "publishedAt": "2026-06-28",
+    "updatedAt": "2026-07-03",
+    "readingTime": "5 min",
+    "featured": false,
+    "ogImage": "/tools/app-store-screenshot-generator-value.webp"
+  },
+  widget: {"id":"app-store-screenshot-generator","mode":"custom"},
+};

package/src/features/tools/app-store-screenshot-generator/config.ts

@@ -0,0 +1,3 @@
+export const ImgConfig = {
+  heroBgImg: "/tools/app-store-screenshot-generator-hero-v3.webp",
+};