@tomako/tools-runtime 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomako/tools-runtime",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Shared interactive tools runtime for Tomako-FE workspace dialogs and Tomako-SEO tool pages",
   "type": "module",
   "exports": {

package/src/features/tools/pitch-deck-generator/pitch-deck-library.tsx

@@ -20,20 +20,23 @@ import {
 import { useLocale, useTranslations } from "../../../i18n/client";
 import { isZhRouteLocale } from "../../../i18n/locale-fallback";
 import type { AppLocale } from "../../../i18n/locale";
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
 
 function deckTitle(entry: PitchDeckLibraryEntry, roundLabel: string): string {
   return `${entry.company} ${roundLabel} Pitch Deck (${entry.year})`;
 }
 
 function DeckCover({ entry, alt }: { entry: PitchDeckLibraryEntry; alt: string }) {
+  const src = staticAsset(`${PITCH_DECK_LIBRARY_COVER_BASE}/${entry.slug}-cover.webp`);
   return (
     <div className="relative aspect-video w-full overflow-hidden bg-[#EEEAE0]">
       <Image
-        src={`${PITCH_DECK_LIBRARY_COVER_BASE}/${entry.slug}-cover.webp`}
+        src={src}
         alt={alt}
         fill
         sizes="(min-width: 1280px) 25vw, (min-width: 768px) 33vw, 100vw"
         className="object-cover"
+        unoptimized={isRemoteStaticAsset(src)}
       />
       <span className="absolute left-3 top-3 rounded-md bg-[#111111] px-2 py-1 text-[11px] font-semibold tracking-wide text-white">
         BP
@@ -98,21 +101,25 @@ export function PitchDeckLibrary() {
               <p className="text-sm leading-6 text-[#555555]">{activeCopy.takeaway}</p>
               {active.pages.length ? (
                 <div className="mt-4 grid gap-4">
-                  {active.pages.map((page, index) => (
+                  {active.pages.map((page, index) => {
+                    const src = staticAsset(page);
+                    return (
                     <div
                       key={page}
                       className="overflow-hidden rounded-[0.75rem] border border-[#E1DDD3] bg-[#EEEAE0]"
                     >
                       <Image
-                        src={page}
+                        src={src}
                         alt={t("pageAlt", { company: active.company, page: index + 1 })}
                         width={1440}
                         height={1080}
                         sizes="(min-width: 1024px) 960px, 100vw"
                         className="h-auto w-full"
+                        unoptimized={isRemoteStaticAsset(src)}
                       />
                     </div>
-                  ))}
+                    );
+                  })}
                 </div>
               ) : (
                 <div className="mt-4 grid gap-4">
@@ -144,7 +151,7 @@ export function PitchDeckLibrary() {
                   type="button"
                   className="min-h-9 bg-[#111111] text-white hover:bg-[#2A2A2A]"
                 >
-                  <a href={active.downloadUrl} download>
+                  <a href={staticAsset(active.downloadUrl)} download>
                     <Download className="size-4" aria-hidden />
                     {t("download")}
                   </a>

package/src/features/tools/shared/tool-guide-section.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import Image from "next/image";
 
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
+
 type VisualTone = "lime" | "blue" | "coral" | "wine";
 
 const toneStyles: Record<
@@ -171,14 +173,16 @@ export function ToolImageVisual({
   priority?: boolean;
   wide?: boolean;
 }) {
+  const resolved = staticAsset(src);
   return (
     <figure className="overflow-hidden rounded-[1.5rem]">
       <Image
-        src={src}
+        src={resolved}
         alt={alt}
         width={1672}
         height={941}
         priority={priority}
+        unoptimized={isRemoteStaticAsset(resolved)}
         sizes={
           wide
             ? "(min-width: 1024px) 1120px, 100vw"

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

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import { relatedToolSlugsByTool } from "../../../constants/related-tools";
 import { RelatedTools } from "../../../host/server";
 import type { AppLocale } from "../../../i18n/locale";
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
 import { resolveToolLocaleCopy } from "../../../lib/tools/resolve-tool-locale-copy";
 
 import type { ToolSpec } from "../types";
@@ -63,6 +64,9 @@ export async function ToolPageShell({
   // Full messages: public getRequestConfig omits toolsPages; client tools layout alone is not enough for RSC.
   const messages = await loadToolMessages(locale);
   const t = createToolMessageTranslator(locale, messages, "toolsPages.shared");
+  const resolvedHeroBackground = heroBackgroundImage
+    ? staticAsset(heroBackgroundImage)
+    : undefined;
 
   return (
     <div className="min-h-screen overflow-x-clip bg-white text-[#111111]">
@@ -73,28 +77,30 @@ export async function ToolPageShell({
             className="relative w-full overflow-hidden text-[#2B211A]"
             style={{
               minHeight: "min(72svh, 680px)",
-              background: heroBackgroundImage ? heroBackgroundColor : "#F4E6D8",
+              background: resolvedHeroBackground ? heroBackgroundColor : "#F4E6D8",
             }}
           >
-            {heroBackgroundImage ? (
+            {resolvedHeroBackground ? (
               <>
                 {heroBackgroundImageFrameClassName ? (
                   <div className={`absolute ${heroBackgroundImageFrameClassName}`}>
                     <Image
-                      src={heroBackgroundImage}
+                      src={resolvedHeroBackground}
                       alt={heroBackgroundAlt}
                       fill
                       priority
+                      unoptimized={isRemoteStaticAsset(resolvedHeroBackground)}
                       sizes={heroBackgroundImageSizes}
                       className={`pointer-events-none ${heroBackgroundImageClassName}`}
                     />
                   </div>
                 ) : (
                   <Image
-                    src={heroBackgroundImage}
+                    src={resolvedHeroBackground}
                     alt={heroBackgroundAlt}
                     fill
                     priority
+                    unoptimized={isRemoteStaticAsset(resolvedHeroBackground)}
                     sizes={heroBackgroundImageSizes}
                     className={`pointer-events-none ${heroBackgroundImageClassName}`}
                   />

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

@@ -5,6 +5,7 @@ import Image from "next/image";
 
 import { Button } from "@tomako/ui/button";
 
+import { isRemoteStaticAsset, staticAsset } from "../../../lib/static-asset";
 import { ToolStandardGenerationSteps } from "./tool-standard-generation-steps";
 
 export type ToolStandardBenefitCard = {
@@ -641,6 +642,7 @@ function ToolStandardImageFrame({
   priority?: boolean;
   className?: string;
 }) {
+  const resolved = staticAsset(src);
   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 ${className ?? ""}`}>
       <Image
@@ -649,7 +651,8 @@ function ToolStandardImageFrame({
         height={840}
         priority={priority}
         sizes="(min-width: 1536px) 630px, (min-width: 1280px) 45vw, (min-width: 768px) 760px, calc(100vw - 40px)"
-        src={src}
+        src={resolved}
+        unoptimized={isRemoteStaticAsset(resolved)}
         width={1260}
       />
     </figure>

package/src/lib/static-asset.ts

@@ -0,0 +1,52 @@
+/**
+ * Resolve root-relative marketing asset paths to the static CDN.
+ * Mirrors `@tomako/public-chrome` staticAsset so tools-runtime stays free of
+ * a chrome peer dependency.
+ *
+ * Image styles (`!960` etc.) follow Tomako OSS image guidelines — append only
+ * when serving from STATIC_ORIGIN; do not rename object keys to `.webp`.
+ */
+
+const STYLE_SUFFIX_PATTERN = /!(default|256|640|960|1600|2560)$/;
+const RASTER_EXT = /\.(png|jpe?g|webp|gif|bmp|tiff?)$/i;
+
+export const DEFAULT_STATIC_ORIGIN = "https://static.tomako.ai";
+
+export type OssImageStyle =
+  | "default"
+  | "256"
+  | "640"
+  | "960"
+  | "1600"
+  | "2560";
+
+function readStaticOrigin(): string {
+  const raw = process.env.NEXT_PUBLIC_STATIC_ORIGIN;
+  if (raw !== undefined) {
+    const value = raw.trim().replace(/\/$/, "");
+    if (value.length > 0) return value;
+  }
+  return DEFAULT_STATIC_ORIGIN;
+}
+
+export function staticAsset(path: string, style?: OssImageStyle): string {
+  if (typeof path !== "string" || path.length === 0) {
+    throw new Error("staticAsset(path): path is required");
+  }
+  if (/^https?:\/\//i.test(path) || path.startsWith("//")) {
+    return path;
+  }
+
+  const normalized = path.startsWith("/") ? path : `/${path}`;
+  const origin = readStaticOrigin();
+  const absolute = `${origin}/static${normalized}`;
+  if (!style || !RASTER_EXT.test(normalized.replace(STYLE_SUFFIX_PATTERN, ""))) {
+    return absolute;
+  }
+  return `${absolute.replace(STYLE_SUFFIX_PATTERN, "")}!${style}`;
+}
+
+/** True when src is an absolute CDN/http URL (skip Next image optimizer). */
+export function isRemoteStaticAsset(src: string): boolean {
+  return /^https?:\/\//i.test(src) || src.startsWith("//");
+}