@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,226 @@
+"use client";
+
+import type {
+  CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { cn } from "@tomako/ui/cn";
+
+const DEFAULT_FORM_WIDTH = 440;
+const DEFAULT_FORM_MIN_WIDTH = 340;
+const DEFAULT_FORM_MAX_WIDTH = 620;
+const DEFAULT_PREVIEW_MIN_WIDTH = 520;
+const DEFAULT_FORM_MAX_RATIO = 0.48;
+const HIDDEN_SCROLLBAR_CLASS =
+  "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+
+export function ToolWorkspaceLayout({
+  form,
+  preview,
+  className,
+  contentClassName,
+  formClassName,
+  previewClassName,
+  defaultFormWidth = DEFAULT_FORM_WIDTH,
+  minFormWidth = DEFAULT_FORM_MIN_WIDTH,
+  maxFormWidth = DEFAULT_FORM_MAX_WIDTH,
+}: {
+  form: ReactNode;
+  preview: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  formClassName?: string;
+  previewClassName?: string;
+  defaultFormWidth?: number;
+  minFormWidth?: number;
+  maxFormWidth?: number;
+}) {
+  const layoutRef = useRef<HTMLDivElement | null>(null);
+  const dragStateRef = useRef<{ startX: number; startWidth: number } | null>(null);
+  const resolvedMinWidth = Math.min(minFormWidth, maxFormWidth);
+  const resolvedMaxWidth = Math.max(maxFormWidth, resolvedMinWidth);
+  const [formWidth, setFormWidth] = useState(() =>
+    Math.min(Math.max(defaultFormWidth, resolvedMinWidth), resolvedMaxWidth),
+  );
+  const [responsiveMaxWidth, setResponsiveMaxWidth] = useState(resolvedMaxWidth);
+  const [isResizing, setIsResizing] = useState(false);
+
+  const calculateResponsiveMaxWidth = useCallback(() => {
+    const containerWidth = layoutRef.current?.getBoundingClientRect().width ?? 0;
+    const ratioMax = containerWidth
+      ? Math.floor(containerWidth * DEFAULT_FORM_MAX_RATIO)
+      : resolvedMaxWidth;
+    const previewMax = containerWidth
+      ? Math.floor(containerWidth - DEFAULT_PREVIEW_MIN_WIDTH)
+      : resolvedMaxWidth;
+    return Math.max(
+      resolvedMinWidth,
+      Math.min(resolvedMaxWidth, ratioMax, previewMax),
+    );
+  }, [resolvedMaxWidth, resolvedMinWidth]);
+
+  const clampFormWidth = useCallback((nextWidth: number) => {
+    return Math.min(Math.max(nextWidth, resolvedMinWidth), responsiveMaxWidth);
+  }, [responsiveMaxWidth, resolvedMinWidth]);
+
+  useEffect(() => {
+    // Re-clamp once layout width changes, for example when entering full screen.
+    const resizeObserver =
+      typeof ResizeObserver === "undefined" || !layoutRef.current
+        ? null
+        : new ResizeObserver(() => {
+            const nextMaxWidth = calculateResponsiveMaxWidth();
+            setResponsiveMaxWidth(nextMaxWidth);
+            setFormWidth((current) =>
+              Math.min(Math.max(current, resolvedMinWidth), nextMaxWidth),
+            );
+          });
+
+    if (layoutRef.current) resizeObserver?.observe(layoutRef.current);
+
+    return () => resizeObserver?.disconnect();
+  }, [calculateResponsiveMaxWidth, resolvedMinWidth]);
+
+  useEffect(() => {
+    if (!isResizing) return undefined;
+
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+
+    function handlePointerMove(event: PointerEvent) {
+      if (!dragStateRef.current) return;
+      const nextWidth =
+        dragStateRef.current.startWidth + event.clientX - dragStateRef.current.startX;
+      setFormWidth(clampFormWidth(nextWidth));
+    }
+
+    function stopResizing() {
+      dragStateRef.current = null;
+      setIsResizing(false);
+    }
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", stopResizing, { once: true });
+    window.addEventListener("pointercancel", stopResizing, { once: true });
+
+    return () => {
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", stopResizing);
+      window.removeEventListener("pointercancel", stopResizing);
+    };
+  }, [clampFormWidth, isResizing]);
+
+  const layoutStyle = useMemo(
+    () =>
+      ({
+        "--tool-workspace-form-min": `${resolvedMinWidth}px`,
+        "--tool-workspace-form-width": `${formWidth}px`,
+      }) as CSSProperties,
+    [formWidth, resolvedMinWidth],
+  );
+
+  function startResizing(event: ReactPointerEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    dragStateRef.current = {
+      startX: event.clientX,
+      startWidth: formWidth,
+    };
+    setIsResizing(true);
+  }
+
+  function handleResizeKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>) {
+    const step = event.shiftKey ? 32 : 16;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      setFormWidth((current) => clampFormWidth(current - step));
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      setFormWidth((current) => clampFormWidth(current + step));
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      setFormWidth(clampFormWidth(resolvedMinWidth));
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      setFormWidth(clampFormWidth(responsiveMaxWidth));
+    }
+  }
+
+  return (
+    <section
+      className={cn(
+        "max-w-full overflow-hidden rounded-lg border border-[#E4E9F1] bg-white shadow-[0_24px_70px_rgba(17,17,17,0.08)]",
+        className,
+      )}
+    >
+      <div
+        ref={layoutRef}
+        style={layoutStyle}
+        className={cn(
+          "tool-workspace-grid grid h-full max-w-full items-stretch",
+          contentClassName,
+        )}
+      >
+        <style>{`
+          .tool-workspace-grid {
+            grid-template-columns: 1fr;
+          }
+          @media (min-width: 1024px) {
+            .tool-workspace-grid {
+              grid-template-columns: minmax(
+                var(--tool-workspace-form-min),
+                var(--tool-workspace-form-width)
+              )
+                minmax(0, 1fr);
+            }
+          }
+        `}</style>
+        <div
+          className={cn(
+            "relative min-w-0 max-w-full overflow-x-hidden border-b border-[#E4E9F1] bg-white p-5 md:p-6 lg:h-full lg:min-h-0 lg:overflow-y-auto lg:border-b-0 lg:border-r [&:has([data-tool-action-bar-attached])]:pb-0",
+            HIDDEN_SCROLLBAR_CLASS,
+            formClassName,
+          )}
+        >
+          {form}
+          <button
+            type="button"
+            aria-label="Resize configuration panel"
+            aria-orientation="vertical"
+            aria-valuemax={responsiveMaxWidth}
+            aria-valuemin={resolvedMinWidth}
+            aria-valuenow={Math.round(formWidth)}
+            className={cn(
+              "absolute -right-1.5 top-0 z-30 hidden h-full w-3 cursor-col-resize items-center justify-center outline-none lg:flex",
+              "before:block before:h-full before:w-px before:bg-[#E1E1E1] before:content-['']",
+              "hover:before:w-1 hover:before:rounded-full hover:before:bg-[#111111]",
+              "focus-visible:before:w-1 focus-visible:before:rounded-full focus-visible:before:bg-[#111111]",
+              isResizing && "before:w-1 before:rounded-full before:bg-[#111111]",
+            )}
+            role="separator"
+            onKeyDown={handleResizeKeyDown}
+            onPointerDown={startResizing}
+          />
+        </div>
+        <div
+          className={cn(
+            "min-w-0 max-w-full overflow-hidden lg:h-full",
+            previewClassName,
+          )}
+        >
+          {preview}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/constants/LKS.ts

@@ -0,0 +1,29 @@
+export const AUTH_KEY = 'tomako-auth';
+export const PROJECT_WORKSPACE_MAP_KEY = 'tomako.growthWorkspaceByProject';
+export const ACTIVE_ID_KEY = 'tomako.activeId';
+export const ACTIVE_PROJECT = 'unfold.activeProject';
+export const ONBOARDING_GOAL_DRAFT_KEY = "tomako.onboardingGoalDraft.v1";
+export const LOCAL_PROJECTS_LS_KEY = 'unfold.localProjectShells'
+export const TAROT_ANONYMOUS_ID_KEY = 'tomako:tarot-anonymous-id';
+export const DRAFT_STORE_KEY = "unfold.toolDrafts.v1"
+export const POST_LOGIN_REDIRECT_KEY = 'tomako.postLoginRedirect'
+export const BLOG_DRAFT_STORE_KEY = 'unfold.blogDrafts.v1';
+export const LKS = {
+    AUTH_KEY,
+    PROJECT_WORKSPACE_MAP_KEY,
+    ACTIVE_ID_KEY,
+    TAROT_ANONYMOUS_ID_KEY,
+    DRAFT_STORE_KEY,
+    BLOG_DRAFT_STORE_KEY,
+    ONBOARDING_GOAL_DRAFT_KEY,
+} as const;
+
+export const SKS = {
+    POST_LOGIN_REDIRECT_KEY,
+}
+
+
+export const CKS = {
+    ACTIVE_PROJECT,
+    LOCAL_PROJECTS_LS_KEY
+}

package/src/constants/related-tools.ts

@@ -0,0 +1,18 @@
+/**
+ * Editorially reviewed relationships only. The display component still filters
+ * these slugs against the current public tool catalogue before rendering.
+ */
+export const relatedToolSlugsByTool: Readonly<Record<string, readonly string[]>> = {
+  "cold-start-channel-selector": [
+    "gtm-readiness-checklist",
+    "community-post-risk-checker",
+  ],
+  "gtm-readiness-checklist": [
+    "cold-start-channel-selector",
+    "community-post-risk-checker",
+  ],
+  "community-post-risk-checker": [
+    "cold-start-channel-selector",
+    "gtm-readiness-checklist",
+  ],
+};

package/src/constants/social-profile-kit.ts

@@ -0,0 +1,284 @@
+import type { SocialProfilePlatform } from "../lib/tools/social-profile-kit.schema";
+
+export const SOCIAL_PROFILE_PLATFORMS = [
+  "x",
+  "bluesky",
+  "threads",
+  "linkedin",
+  "linkedin-company",
+  "instagram",
+  "tiktok",
+  "youtube",
+  "facebook",
+] as const satisfies readonly SocialProfilePlatform[];
+
+export const SOCIAL_PROFILE_V1_PLATFORMS = [
+  "x",
+  "bluesky",
+  "threads",
+  "linkedin",
+  "linkedin-company",
+  "instagram",
+  "tiktok",
+  "youtube",
+  "facebook",
+] as const satisfies readonly SocialProfilePlatform[];
+
+export const SOCIAL_PROFILE_AVATAR_POLICY = {
+  defaultSource: "uploaded-or-logo",
+  allowedSources: ["uploaded", "logoGenerator", "placeholder"],
+  placeholder: "neutral-monogram",
+  canGenerateHumanPortrait: false,
+  note:
+    "Profile avatars are identity assets. Prefer an uploaded logo or photo; use a neutral monogram placeholder only for preview.",
+} as const;
+
+export type SocialProfileSafeAreaBox = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  note: string;
+};
+
+export type SocialProfileImageSpec = {
+  label: string;
+  width: number;
+  height: number;
+  sourceNote: string;
+};
+
+export type SocialProfilePlatformSpec = {
+  label: string;
+  shortLabel: string;
+  iconLabel: string;
+  supportsBanner: boolean;
+  usernamePrefix: string;
+  avatar: SocialProfileImageSpec;
+  banner?: SocialProfileImageSpec & {
+    safeArea?: string;
+    safeAreaBox?: SocialProfileSafeAreaBox;
+  };
+};
+
+const BRAND_BIRD =
+  "Source: https://www.brandbird.app/tools/social-media-sizes";
+const BUFFER = "Source: https://buffer.com/resources/social-media-image-sizes/";
+const HOOTSUITE =
+  "Source: https://blog.hootsuite.com/social-media-image-sizes-guide/";
+const LINKEDIN_OFFICIAL =
+  "Source: https://www.linkedin.com/help/linkedin/answer/a563309";
+
+export const SOCIAL_PROFILE_PLATFORM_SPECS: Record<
+  SocialProfilePlatform,
+  SocialProfilePlatformSpec
+> = {
+  x: {
+    label: "X",
+    shortLabel: "X",
+    iconLabel: "X",
+    supportsBanner: true,
+    usernamePrefix: "@",
+    avatar: {
+      label: "Profile picture",
+      width: 400,
+      height: 400,
+      sourceNote: `${BRAND_BIRD}; ${BUFFER}`,
+    },
+    banner: {
+      label: "Header",
+      width: 1500,
+      height: 500,
+      safeArea: "Keep key text and faces near the center.",
+      safeAreaBox: {
+        x: 180,
+        y: 80,
+        width: 1140,
+        height: 340,
+        note: "Keep logos, text, and faces away from the top/bottom crop band and left avatar overlap.",
+      },
+      sourceNote: `${BRAND_BIRD}; ${BUFFER}`,
+    },
+  },
+  bluesky: {
+    label: "Bluesky",
+    shortLabel: "Bluesky",
+    iconLabel: "BS",
+    supportsBanner: true,
+    usernamePrefix: "@",
+    avatar: {
+      label: "Profile picture",
+      width: 400,
+      height: 400,
+      sourceNote: BRAND_BIRD,
+    },
+    banner: {
+      label: "Profile banner",
+      width: 1500,
+      height: 500,
+      safeArea: "Keep core identity centered for desktop and mobile crops.",
+      safeAreaBox: {
+        x: 180,
+        y: 80,
+        width: 1140,
+        height: 340,
+        note: "Keep the meaningful visual idea in the center band and leave the lower-left avatar overlap area quiet.",
+      },
+      sourceNote: "Source: https://www.brandbird.app/tools/bluesky-banner-generator",
+    },
+  },
+  threads: {
+    label: "Threads",
+    shortLabel: "Threads",
+    iconLabel: "@",
+    supportsBanner: false,
+    usernamePrefix: "@",
+    avatar: {
+      label: "Profile picture",
+      width: 320,
+      height: 320,
+      sourceNote: "Source: Threads and Instagram-style profile display references",
+    },
+  },
+  linkedin: {
+    label: "LinkedIn",
+    shortLabel: "LinkedIn",
+    iconLabel: "in",
+    supportsBanner: true,
+    usernamePrefix: "/in/",
+    avatar: {
+      label: "Profile photo",
+      width: 400,
+      height: 400,
+      sourceNote: `${BRAND_BIRD}; ${BUFFER}`,
+    },
+    banner: {
+      label: "Personal cover",
+      width: 1584,
+      height: 396,
+      safeArea: "Mobile and desktop crop differently; keep text centered.",
+      safeAreaBox: {
+        x: 360,
+        y: 72,
+        width: 1000,
+        height: 252,
+        note: "Avoid the lower-left avatar overlap and keep headline text in the middle band.",
+      },
+      sourceNote: `${BRAND_BIRD}; ${BUFFER}`,
+    },
+  },
+  "linkedin-company": {
+    label: "LinkedIn Company",
+    shortLabel: "LinkedIn Co.",
+    iconLabel: "in",
+    supportsBanner: true,
+    usernamePrefix: "/company/",
+    avatar: {
+      label: "Company logo",
+      width: 400,
+      height: 400,
+      sourceNote: LINKEDIN_OFFICIAL,
+    },
+    banner: {
+      label: "Page cover",
+      width: 4200,
+      height: 700,
+      safeArea: "Use a wide 6:1 composition and keep key brand elements centered.",
+      safeAreaBox: {
+        x: 840,
+        y: 105,
+        width: 2520,
+        height: 490,
+        note: "Use the middle 60% as the brand-safe composition; leave edge space for responsive crops.",
+      },
+      sourceNote: LINKEDIN_OFFICIAL,
+    },
+  },
+  instagram: {
+    label: "Instagram",
+    shortLabel: "Instagram",
+    iconLabel: "IG",
+    supportsBanner: false,
+    usernamePrefix: "@",
+    avatar: {
+      label: "Profile picture",
+      width: 320,
+      height: 320,
+      sourceNote: `${BRAND_BIRD}; ${BUFFER}`,
+    },
+  },
+  tiktok: {
+    label: "TikTok",
+    shortLabel: "TikTok",
+    iconLabel: "TT",
+    supportsBanner: false,
+    usernamePrefix: "@",
+    avatar: {
+      label: "Profile picture",
+      width: 400,
+      height: 400,
+      sourceNote: BRAND_BIRD,
+    },
+  },
+  youtube: {
+    label: "YouTube",
+    shortLabel: "YouTube",
+    iconLabel: "YT",
+    supportsBanner: true,
+    usernamePrefix: "@",
+    avatar: {
+      label: "Channel avatar",
+      width: 800,
+      height: 800,
+      sourceNote: BUFFER,
+    },
+    banner: {
+      label: "Channel banner",
+      width: 2560,
+      height: 1440,
+      safeArea: "Keep core identity inside the center safe area.",
+      safeAreaBox: {
+        x: 663,
+        y: 551,
+        width: 1235,
+        height: 338,
+        note: "Keep all text and logos in the center safe area so mobile, desktop, and TV crops remain usable.",
+      },
+      sourceNote: BUFFER,
+    },
+  },
+  facebook: {
+    label: "Facebook",
+    shortLabel: "Facebook",
+    iconLabel: "f",
+    supportsBanner: true,
+    usernamePrefix: "@",
+    avatar: {
+      label: "Profile picture",
+      width: 320,
+      height: 320,
+      sourceNote: `${HOOTSUITE}; ${BUFFER}`,
+    },
+    banner: {
+      label: "Cover photo",
+      width: 851,
+      height: 315,
+      safeArea: "Profile image overlaps the lower-left cover area.",
+      safeAreaBox: {
+        x: 170,
+        y: 42,
+        width: 596,
+        height: 210,
+        note: "Keep important details away from the lower-left profile image overlap and from the outer crop edges.",
+      },
+      sourceNote: `${HOOTSUITE}; ${BUFFER}`,
+    },
+  },
+};
+
+export const SOCIAL_PROFILE_DEFAULT_COLORS = [
+  "#1f2937",
+  "#5ba8a0",
+  "#f59e6b",
+  "#f7d38b",
+] as const;

package/src/constants/tool-assets.ts

@@ -0,0 +1,7 @@
+export const socialPlatformAssetAdapterImages = {
+  hero: "/tools/social-platform-asset-adapter-hero-generated.webp",
+  workspace: "/tools/social-platform-asset-adapter-workspace-generated.webp",
+  value: "/tools/social-platform-asset-adapter-value-generated.webp",
+  support: "/tools/social-platform-asset-adapter-support-generated.webp",
+  useCase: "/tools/social-platform-asset-adapter-use-case-generated.webp",
+} as const;

package/src/env.d.ts

@@ -0,0 +1,3 @@
+declare const process: {
+  env: Record<string, string | undefined>;
+};

package/src/features/tools/_templates/standard-tool.container.tsx

@@ -0,0 +1,90 @@
+/**
+ * Golden-sample container template — NOT registered in registry.ts.
+ *
+ * Prefer for standard SEO landing pages:
+ *   createStandardLandingContainer({ guideNamespace, Widget, benefitIcons, generationImageSrc })
+ *   from ../shared/create-standard-landing-container
+ *
+ * Copy this file only when the landing stack is NOT ToolLandingStandardSections
+ * (custom Guide / Divided / immersive layouts).
+ *
+ * Rules:
+ * - Import marketing sections from ../shared/tool-content-sections only.
+ * - Do NOT define local ValueGrid / TextRows / FaqSection / CardGrid helpers.
+ * - Keep this file ≤120 LOC: i18n fetch + shared component composition + CTA.
+ */
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+// import { YourWidget } 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";
+
+export async function ExampleToolContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.exampleTool.guide");
+
+  return (
+    <ToolPageShell locale={locale} spec={spec}>
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        {/* Replace with: <YourWidget /> */}
+        <div aria-hidden className="hidden" />
+      </ToolWorkspaceSection>
+
+      <ToolGuideSection
+        heading={t("whatYouGetHeading")}
+        visual={<ToolImageVisual src="/tools/example-value.webp" alt={t("valueVisualAlt")} priority />}
+      >
+        <ToolCardGrid
+          items={t.raw("whatYouGetItems") as readonly ToolTextCard[]}
+          columns="two"
+          size="prominent"
+        />
+      </ToolGuideSection>
+
+      <ToolGuideSection
+        heading={t("standardsHeading")}
+        reverse
+        visual={<ToolImageVisual src="/tools/example-support.webp" alt={t("supportVisualAlt")} />}
+      >
+        <ToolDividedRows items={t.raw("standardsBody") as readonly string[]} />
+      </ToolGuideSection>
+
+      <ToolTripleComparisonSection
+        heading={t("comparisonHeading")}
+        items={t.raw("comparisonItems") as readonly ToolTripleComparisonItem[]}
+      />
+
+      <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")}
+        primary={{ href: "/tools", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

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

@@ -0,0 +1,11 @@
+import { Download, FileArchive, Upload } from "lucide-react";
+
+import { createStandardLandingContainer } from "../../../features/tools/shared/create-standard-landing-container";
+import { AppIconResizer } from "./widget";
+
+export const AppIconResizerContainer = createStandardLandingContainer({
+  guideNamespace: "toolsPages.appIconResizer.guide",
+  Widget: AppIconResizer,
+  benefitIcons: [Upload, FileArchive, Download],
+  generationImageSrc: "/tools/app-icon-resizer-section-steps-8bit-v3.webp",
+});

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

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const appIconResizerSpec: ToolSpec = {
+  slug: "app-icon-resizer",
+  toolType: "generator",
+  riskLevel: "low",
+  seo: {
+    "publishedAt": "2026-06-30",
+    "updatedAt": "2026-07-13",
+    "readingTime": "5 min",
+    "featured": false,
+    "ogImage": "/tools/app-icon-resizer-section-primary-8bit-v3.webp"
+  },
+  widget: {"id":"app-icon-resizer","mode":"custom"},
+};