@tomako/tools-runtime 0.1.10 → 0.1.11

package/package.json

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

package/src/components/tools/engine/result-view.tsx

@@ -78,7 +78,7 @@ function SectionHeading({
           <Target aria-hidden className="size-4" />
         </span>
       ) : null}
-      <h3 className={cn("font-semibold text-[#111111]", isWorkspace ? "text-base" : "text-lg")}>
+      <h3 className={cn("min-w-0 break-words font-semibold text-[#111111]", isWorkspace ? "text-base" : "text-lg")}>
         {title}
       </h3>
     </div>
@@ -166,7 +166,7 @@ function BulletList({
           ) : (
             <CheckCircle2 aria-hidden className="mt-0.5 size-4 shrink-0 text-[#7A9B69]" />
           )}
-          <span>{item}</span>
+          <span className="min-w-0 break-words">{item}</span>
         </li>
       ))}
     </ul>
@@ -242,14 +242,14 @@ function CardListView({
             <article
               key={`${title}-${index}`}
               className={cn(
-                "border border-[#D8D4CA] bg-white p-5",
+                "min-w-0 border border-[#D8D4CA] bg-white p-5",
                 isWorkspace
                   ? "rounded-lg"
                   : "rounded-[1.25rem] shadow-[0_12px_28px_rgba(17,17,17,0.05)]",
               )}
             >
-              <div className="flex items-start justify-between gap-3">
-                <h4 className="text-base font-semibold leading-tight text-[#111111]">{title}</h4>
+              <div className="flex min-w-0 items-start justify-between gap-3">
+                <h4 className="min-w-0 break-words text-base font-semibold leading-tight text-[#111111]">{title}</h4>
                 <div className="flex shrink-0 items-center gap-2">
                   {meta != null && meta !== "" ? (
                     <span
@@ -270,7 +270,7 @@ function CardListView({
                 </div>
               </div>
               {typeof body === "string" && body.trim() ? (
-                <p className="mt-2 text-sm leading-6 text-[#555555]">
+                <p className="mt-2 break-words text-sm leading-6 text-[#555555]">
                   {block.card.body?.label ? (
                     <span className="font-semibold text-[#111111]">
                       {pickL10n(block.card.body.label, locale)}:{" "}
@@ -288,7 +288,7 @@ function CardListView({
                       {!isWorkspace ? <ListChecks aria-hidden className="size-3.5" /> : null}
                       {pickL10n(listSpec.label, locale)}
                     </p>
-                    <ul className="mt-1.5 list-disc space-y-1 pl-5 text-sm leading-6 text-[#555555]">
+                    <ul className="mt-1.5 list-disc space-y-1 break-words pl-5 text-sm leading-6 text-[#555555]">
                       {items.map((item) => (
                         <li key={item}>{item}</li>
                       ))}
@@ -297,7 +297,7 @@ function CardListView({
                 );
               })}
               {typeof footer === "string" && footer.trim() ? (
-                <p className="mt-3 rounded-2xl border border-[#F2D2B8] bg-[#FFF7EE] px-3 py-2 text-sm leading-6 text-[#7A4B22]">
+                <p className="mt-3 break-words rounded-2xl border border-[#F2D2B8] bg-[#FFF7EE] px-3 py-2 text-sm leading-6 text-[#7A4B22]">
                   {block.card.footer?.label ? (
                     <span className="font-semibold">
                       {pickL10n(block.card.footer.label, locale)}:{" "}
@@ -503,7 +503,7 @@ export function ResultView({
                       variant={variant}
                     />
                   ) : (
-                    <p key={entry.label} className="text-sm leading-6 text-[#3D3D3D]">
+                    <p key={entry.label} className="break-words text-sm leading-6 text-[#3D3D3D]">
                       <span className="font-semibold text-[#111111]">{entry.label}: </span>
                       {entry.text}
                     </p>

package/src/features/tools/cold-start-channel-selector/widget/preview-panels.tsx

@@ -75,8 +75,8 @@ function TomatoParticleLoader({ statusLabel }: { statusLabel: string }) {
 
     canvas.width = width * devicePixelRatio;
     canvas.height = height * devicePixelRatio;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
     context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
     context.imageSmoothingEnabled = false;
 
@@ -172,8 +172,12 @@ function TomatoParticleLoader({ statusLabel }: { statusLabel: string }) {
   }, []);
 
   return (
-    <div aria-label={statusLabel} className="mx-auto flex h-[190px] w-[320px] items-center justify-center overflow-hidden" role="status">
-      <canvas ref={canvasRef} aria-hidden className="block" />
+    <div
+      aria-label={statusLabel}
+      className="mx-auto flex aspect-[32/19] w-full max-w-[320px] items-center justify-center overflow-hidden"
+      role="status"
+    >
+      <canvas ref={canvasRef} aria-hidden className="block h-full w-full" />
     </div>
   );
 }

package/src/features/tools/gtm-readiness-checklist/gtm-readiness-checklist.container.tsx

@@ -24,11 +24,11 @@ export async function GtmReadinessChecklistContainer({ locale, spec }: ToolPageP
     "toolsPages.gtmReadinessChecklist.guide",
   );
   return (
-    <ToolPageShell locale={locale} spec={spec}>
+    <ToolPageShell locale={locale} spec={spec} showDefaultHeader={false}>
       <ToolWorkspaceSection
         heading={t("workspaceTitle")}
         hint={t("workspaceHint")}
-        badge={t("workspaceBadge")}
+        headingLevel="h1"
       >
         <GtmReadinessChecklistWidget />
       </ToolWorkspaceSection>

package/src/features/tools/gtm-readiness-checklist/widget/gtm-readiness-checklist.tsx

@@ -38,6 +38,30 @@ export function GtmReadinessChecklistWidget() {
 
   return (
     <section className="overflow-hidden rounded-[1.5rem] border border-[#E8E4DB] bg-white shadow-[0_18px_50px_rgba(17,17,17,0.06)]">
+      <div
+        aria-live="polite"
+        className="sticky top-14 z-20 border-b border-[#CFD9EE] bg-[#DAE3F6]/95 px-4 py-3 backdrop-blur lg:hidden"
+      >
+        <div className="flex items-center justify-between gap-4">
+          <div className="min-w-0">
+            <p className="text-xs font-semibold uppercase tracking-[0.06em] text-[#555555]">
+              {t("score")}
+            </p>
+            <p className="mt-1 truncate text-sm font-semibold text-[#111111]">
+              {result.tierLabel}
+            </p>
+          </div>
+          <p className="shrink-0 text-3xl font-semibold leading-none text-[#111111]">
+            {result.score}<span className="ml-1 text-base text-[#555555]">%</span>
+          </p>
+        </div>
+        <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/80">
+          <div
+            className="h-full rounded-full bg-[#111111] transition-[width]"
+            style={{ width: `${result.score}%` }}
+          />
+        </div>
+      </div>
       <div className="grid lg:grid-cols-[1.12fr_0.88fr]">
         <div className="bg-white p-5 md:p-7">
           <p className="mb-6 max-w-2xl text-sm leading-6 text-[#555555]">{t("howToUse")}</p>

package/src/features/tools/og-image-generator/og-image-generator.container.tsx

@@ -24,17 +24,11 @@ export async function OgImageGeneratorContainer({ locale, spec }: ToolPageProps)
   );
 
   return (
-    <ToolPageShell
-      locale={locale}
-      spec={spec}
-      heroVariant="immersive"
-      heroBackgroundImage="/tools/og-image-generator-hero.webp"
-      heroBackgroundAlt={t("heroVisualAlt")}
-    >
+    <ToolPageShell locale={locale} spec={spec} showDefaultHeader={false}>
       <ToolWorkspaceSection
         heading={t("workspaceHeading")}
         hint={t("workspaceHint")}
-        badge={t("workspaceBadge")}
+        headingLevel="h1"
       >
         <OgImageGenerator />
       </ToolWorkspaceSection>

package/src/features/tools/og-image-generator/widget/og-image-generator.tsx

@@ -320,7 +320,7 @@ export function OgImageGenerator() {
   return (
     <>
       <ToolWorkspaceLayout
-        className="rounded-lg border-[#E5E5E5] shadow-[0_24px_70px_rgba(17,17,17,0.08)]"
+        className="rounded-lg border-[#E5E5E5] shadow-[0_24px_70px_rgba(17,17,17,0.08)] lg:h-[min(80vh,900px)] lg:min-h-[720px]"
         form={
           <form onSubmit={(event) => void submit(event)} className="grid gap-5">
             <div>

package/src/features/tools/product-name-generator/widget/candidate-card.tsx

@@ -49,9 +49,9 @@ export function CandidateCard({
         : "";
 
   return (
-    <article className="rounded-[1.35rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_14px_34px_rgba(17,17,17,0.07)]">
+    <article className="min-w-0 rounded-[1.35rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_14px_34px_rgba(17,17,17,0.07)]">
       <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-        <div>
+        <div className="min-w-0">
           <div className="flex flex-wrap items-center gap-2">
             <span className="rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white">
               {copy.stages[candidate.stage] ??
@@ -71,7 +71,7 @@ export function CandidateCard({
               </span>
             ) : null}
           </div>
-          <h3 className="mt-4 text-3xl font-semibold leading-none text-[#111111]">
+          <h3 className="mt-4 break-words text-3xl font-semibold leading-none text-[#111111]">
             {candidate.name}
           </h3>
         </div>
@@ -131,7 +131,7 @@ export function CandidateCard({
                 {candidate.domains.slice(0, 4).map((domain) => (
                   <span
                     key={domain.domain}
-                    className="rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-1.5 text-xs font-semibold text-[#555555]"
+                    className="max-w-full break-all rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-1.5 text-xs font-semibold text-[#555555]"
                   >
                     {domain.domain}: {domain.status}
                   </span>

package/src/features/tools/startup-idea-research/startup-idea-research.container.tsx

@@ -25,31 +25,13 @@ export async function StartupIdeaResearchContainer({ locale, spec }: ToolPagePro
   const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
 
   return (
-    <ToolPageShell
-      locale={locale}
-      spec={spec}
-      heroVariant="showcase"
-      heroVisual={
-        <ToolImageVisual
-          src="/tools/startup-idea-research-hero.webp"
-          alt={t("visualAlt.hero")}
-          priority
-          wide
-        />
-      }
-    >
+    <ToolPageShell locale={locale} spec={spec} showDefaultHeader={false}>
       <ToolWorkspaceSection
         heading={t("workspaceHeading")}
         hint={t("workspaceHint")}
-        badge={t("workspaceBadge")}
+        headingLevel="h1"
       >
-        <div className="grid gap-8 xl:grid-cols-[1fr_0.42fr] xl:items-start">
-          <StartupIdeaResearch />
-          <ToolImageVisual
-            src="/tools/startup-idea-research-workflow.webp"
-            alt={t("visualAlt.workspace")}
-          />
-        </div>
+        <StartupIdeaResearch />
       </ToolWorkspaceSection>
 
       <section className="border-t border-[#E8E4DB] py-12 md:py-16">
@@ -60,6 +42,14 @@ export async function StartupIdeaResearchContainer({ locale, spec }: ToolPagePro
         <div className="mt-7">
           <ToolPlainTextGrid items={values} columns="four" />
         </div>
+        <div className="mt-8">
+          <ToolImageVisual
+            src="/tools/startup-idea-research-workflow.webp"
+            alt={t("visualAlt.workspace")}
+            priority
+            wide
+          />
+        </div>
       </section>
 
       <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[0.95fr_1.05fr] md:items-center md:py-16">

package/src/features/tools/startup-idea-research/widget/result-shell.tsx

@@ -209,9 +209,9 @@ export function Report({
               }}
             />
           </Field>
-          <article className="rounded-[1.25rem] border border-[#E2E6EC] bg-[#FAFBFC] p-5">
-            <h4 className="text-xl font-semibold text-[#111111]">{postTitle}</h4>
-            <p className="mt-3 whitespace-pre-line text-sm leading-6 text-[#3D3D3D]">{postBody}</p>
+          <article className="min-w-0 rounded-[1.25rem] border border-[#E2E6EC] bg-[#FAFBFC] p-5">
+            <h4 className="break-words text-xl font-semibold text-[#111111]">{postTitle}</h4>
+            <p className="mt-3 whitespace-pre-line break-words text-sm leading-6 text-[#3D3D3D]">{postBody}</p>
             <div className="mt-4 flex flex-wrap gap-3">
               <Button variant="outline" onClick={() => void copyRecruitmentText()}>
                 <Copy className="size-4" aria-hidden />
@@ -283,7 +283,7 @@ export function Report({
         <h3 className="text-sm font-semibold uppercase tracking-[0.06em] text-[#55708A]">{t("sections.sources")}</h3>
         <div className="mt-4 grid gap-2">
           {data.sources.length ? data.sources.map((source) => (
-            <a key={`${source.label}-${source.url ?? ""}`} href={source.url} target="_blank" rel="noreferrer nofollow" className="text-sm font-medium text-[#075DF5] hover:underline">
+            <a key={`${source.label}-${source.url ?? ""}`} href={source.url} target="_blank" rel="noreferrer nofollow" className="break-all text-sm font-medium text-[#075DF5] hover:underline">
               {source.label}
             </a>
           )) : <p className="text-sm text-[#777777]">{t("emptyList")}</p>}
@@ -313,7 +313,7 @@ export function InsightCard({
       </h3>
       <ul className="mt-4 grid gap-3">
         {items.length ? items.slice(0, 7).map((item) => (
-          <li key={item} className="text-sm leading-6 text-[#3D3D3D]">
+          <li key={item} className="break-words text-sm leading-6 text-[#3D3D3D]">
             {item}
           </li>
         )) : <li className="text-sm text-[#777777]">{empty}</li>}