@jjlmoya/utils-aquarium 1.64.0 → 1.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-aquarium",
-    "version": "1.64.0",
+    "version": "1.66.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -3,10 +3,11 @@ import { aquariumTankVolumeWaterChangeCalculator } from '../tool/aquariumTankVol
 import { aquariumFilterTurnoverStockingPlanner } from '../tool/aquariumFilterTurnoverStockingPlanner/entry';
 import { aquariumLightingPhotoperiodPlanner } from '../tool/aquariumLightingPhotoperiodPlanner/entry';
 import { aquariumEvaporationTopOffPlanner } from '../tool/aquariumEvaporationTopOffPlanner/entry';
+import { aquariumSaltDosingCalculator } from '../tool/aquariumSaltDosingCalculator/entry';
 
 export const aquariumCategory: AquariumCategoryEntry = {
   icon: 'mdi:fishbowl-outline',
-  tools: [aquariumTankVolumeWaterChangeCalculator, aquariumFilterTurnoverStockingPlanner, aquariumLightingPhotoperiodPlanner, aquariumEvaporationTopOffPlanner],
+  tools: [aquariumTankVolumeWaterChangeCalculator, aquariumFilterTurnoverStockingPlanner, aquariumLightingPhotoperiodPlanner, aquariumEvaporationTopOffPlanner, aquariumSaltDosingCalculator],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -12,5 +12,6 @@ import { aquariumTankVolumeWaterChangeCalculator } from './tool/aquariumTankVolu
 import { aquariumFilterTurnoverStockingPlanner } from './tool/aquariumFilterTurnoverStockingPlanner/entry';
 import { aquariumLightingPhotoperiodPlanner } from './tool/aquariumLightingPhotoperiodPlanner/entry';
 import { aquariumEvaporationTopOffPlanner } from './tool/aquariumEvaporationTopOffPlanner/entry';
+import { aquariumSaltDosingCalculator } from './tool/aquariumSaltDosingCalculator/entry';
 
-export const ALL_ENTRIES = [aquariumTankVolumeWaterChangeCalculator, aquariumFilterTurnoverStockingPlanner, aquariumLightingPhotoperiodPlanner, aquariumEvaporationTopOffPlanner];
+export const ALL_ENTRIES = [aquariumTankVolumeWaterChangeCalculator, aquariumFilterTurnoverStockingPlanner, aquariumLightingPhotoperiodPlanner, aquariumEvaporationTopOffPlanner, aquariumSaltDosingCalculator];

package/src/layouts/ProductionCategoryPage.astro

@@ -1,184 +1,184 @@
----
-import ProductionPage from "./ProductionPage.astro";
-import { Icon } from "astro-icon/components";
-import { SEORenderer } from "@jjlmoya/utils-shared";
-import ProductionBreadcrumb from "../components/ProductionBreadcrumb.astro";
-import type { KnownLocale, CategoryLocaleContent } from "../types";
-import { getCategoryPath } from "../mfe/routes";
-import { getCategoryUi } from "../mfe/category-ui";
-
-interface CategoryTool { id: string; icon: string; title: string; description: string; href: string; }
-interface Props { locale: KnownLocale; category: CategoryLocaleContent; tools: CategoryTool[]; alternates: { language: KnownLocale; url: string }[]; image?: string | undefined; }
-const { locale, category, tools, alternates, image } = Astro.props;
-const publicPath = getCategoryPath(locale, category.slug);
-const ui = getCategoryUi(locale);
----
-
-<ProductionPage title={category.title} description={category.description} {locale} {publicPath} {alternates} {image}>
-  <div class="category-production">
-    <div class="category-production-inner">
-      <ProductionBreadcrumb locale={locale} currentTitle={category.title} />
-      <header class="category-header-production">
-        <h1>{category.title}</h1><p>{category.description}</p>
-      </header>
-      <div class="category-tools-grid">
-        {tools.map((tool, index) => (
-          <a href={tool.href} class="category-tool-card">
-            <span class="category-tool-index">{String(index + 1).padStart(2, "0")}</span>
-            <div class="category-tool-icon"><Icon name={tool.icon} /></div>
-            <h2>{tool.title}</h2><p>{tool.description}</p>
-            <span class="category-tool-cta">{ui.useTool} <span aria-hidden="true">→</span></span>
-          </a>
-        ))}
-      </div>
-      <section class="category-seo-production"><SEORenderer content={{ locale, sections: category.seo }} /></section>
-    </div>
-  </div>
-</ProductionPage>
-
-<style>
-  .category-production {
-    min-height: 100vh;
-    overflow-x: clip;
-    background: radial-gradient(ellipse at top, var(--primary-10), var(--bg-surface) 50%, var(--bg-main));
-  }
-
-  .category-production-inner {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: var(--space-xl) var(--space-md) var(--space-4xl);
-  }
-
-  .category-header-production {
-    margin-bottom: var(--space-xl);
-    text-align: center;
-  }
-
-  .category-header-production h1 {
-    margin: 0;
-    color: var(--text-main);
-    font-size: clamp(3.5rem, 9vw, 7rem);
-    font-weight: 900;
-    letter-spacing: -0.06em;
-    line-height: 0.95;
-    text-transform: lowercase;
-  }
-
-  .category-header-production p {
-    max-width: 48rem;
-    margin: 1rem auto 0;
-    color: var(--text-muted);
-    font-size: 1.25rem;
-    line-height: 1.6;
-  }
-
-  .category-tools-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: var(--space-lg);
-    margin-bottom: var(--space-4xl);
-  }
-
-  .category-tool-card {
-    position: relative;
-    display: flex;
-    overflow: hidden;
-    min-height: 230px;
-    flex-direction: column;
-    padding: var(--space-lg);
-    border: 1px solid color-mix(in srgb, var(--aquarium-accent) 18%, var(--border-base));
-    border-radius: 1.25rem;
-    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--aquarium-accent) 4%, var(--bg-surface)));
-    color: inherit;
-    text-decoration: none;
-    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
-    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
-  }
-
-  .category-tool-card:hover,
-  .category-tool-card:focus-visible {
-    border-color: var(--aquarium-accent);
-    box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--aquarium-accent) 18%, transparent);
-    transform: translateY(-4px);
-  }
-
-  .category-tool-card:focus-visible {
-    outline: 3px solid color-mix(in srgb, var(--aquarium-accent) 55%, transparent);
-    outline-offset: 4px;
-  }
-
-  .category-tool-card::after {
-    position: absolute;
-    right: -2rem;
-    bottom: -3rem;
-    width: 9rem;
-    height: 9rem;
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--aquarium-accent) 10%, transparent);
-    content: "";
-    pointer-events: none;
-  }
-
-  .category-tool-icon {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    width: 3.25rem;
-    height: 3.25rem;
-    place-items: center;
-    margin-bottom: var(--space-md);
-    border: 1px solid color-mix(in srgb, var(--aquarium-accent) 28%, transparent);
-    border-radius: 1rem;
-    background: color-mix(in srgb, var(--aquarium-accent) 12%, var(--bg-surface));
-    color: var(--aquarium-accent);
-    font-size: 1.6rem;
-  }
-
-  .category-tool-index {
-    position: absolute;
-    top: var(--space-md);
-    right: var(--space-lg);
-    color: var(--text-dimmed, var(--text-muted));
-    font-family: ui-monospace, SFMono-Regular, monospace;
-    font-size: 0.72rem;
-    letter-spacing: 0.12em;
-  }
-
-  .category-tool-card h2,
-  .category-tool-card p,
-  .category-tool-cta {
-    position: relative;
-    z-index: 1;
-  }
-
-  .category-tool-card h2 {
-    margin: 0 0 0.5rem;
-    color: var(--text-main);
-    font-size: 1.25rem;
-  }
-
-  .category-tool-card p {
-    margin: 0;
-    color: var(--text-muted);
-    line-height: 1.55;
-  }
-
-  .category-tool-cta {
-    margin-top: auto;
-    padding-top: var(--space-md);
-    color: var(--aquarium-accent);
-    font-weight: 700;
-  }
-
-  .category-seo-production {
-    max-width: 56rem;
-    margin: 0 auto;
-    font-size: 1.125rem;
-    line-height: 1.75;
-  }
-
-  @media (width <= 768px) {
-    .category-production-inner { padding: var(--space-lg) var(--space-sm) var(--space-3xl); }
-    .category-tools-grid { grid-template-columns: 1fr; }
-  }
-</style>
+---
+import ProductionPage from "./ProductionPage.astro";
+import { Icon } from "astro-icon/components";
+import { SEORenderer } from "@jjlmoya/utils-shared";
+import ProductionBreadcrumb from "../components/ProductionBreadcrumb.astro";
+import type { KnownLocale, CategoryLocaleContent } from "../types";
+import { getCategoryPath } from "../mfe/routes";
+import { getCategoryUi } from "../mfe/category-ui";
+
+interface CategoryTool { id: string; icon: string; title: string; description: string; href: string; }
+interface Props { locale: KnownLocale; category: CategoryLocaleContent; tools: CategoryTool[]; alternates: { language: KnownLocale; url: string }[]; image?: string | undefined; }
+const { locale, category, tools, alternates, image } = Astro.props;
+const publicPath = getCategoryPath(locale, category.slug);
+const ui = getCategoryUi(locale);
+---
+
+<ProductionPage title={category.title} description={category.description} {locale} {publicPath} {alternates} {image}>
+  <div class="category-production">
+    <div class="category-production-inner">
+      <ProductionBreadcrumb locale={locale} currentTitle={category.title} />
+      <header class="category-header-production">
+        <h1>{category.title}</h1><p>{category.description}</p>
+      </header>
+      <div class="category-tools-grid">
+        {tools.map((tool, index) => (
+          <a href={tool.href} class="category-tool-card">
+            <span class="category-tool-index">{String(index + 1).padStart(2, "0")}</span>
+            <div class="category-tool-icon"><Icon name={tool.icon} /></div>
+            <h2>{tool.title}</h2><p>{tool.description}</p>
+            <span class="category-tool-cta">{ui.useTool} <span aria-hidden="true">→</span></span>
+          </a>
+        ))}
+      </div>
+      <section class="category-seo-production"><SEORenderer content={{ locale, sections: category.seo }} /></section>
+    </div>
+  </div>
+</ProductionPage>
+
+<style>
+  .category-production {
+    min-height: 100vh;
+    overflow-x: clip;
+    background: radial-gradient(ellipse at top, var(--primary-10), var(--bg-surface) 50%, var(--bg-main));
+  }
+
+  .category-production-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-xl) var(--space-md) var(--space-4xl);
+  }
+
+  .category-header-production {
+    margin-bottom: var(--space-xl);
+    text-align: center;
+  }
+
+  .category-header-production h1 {
+    margin: 0;
+    color: var(--text-main);
+    font-size: clamp(3.5rem, 9vw, 7rem);
+    font-weight: 900;
+    letter-spacing: -0.06em;
+    line-height: 0.95;
+    text-transform: lowercase;
+  }
+
+  .category-header-production p {
+    max-width: 48rem;
+    margin: 1rem auto 0;
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    line-height: 1.6;
+  }
+
+  .category-tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-4xl);
+  }
+
+  .category-tool-card {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    min-height: 230px;
+    flex-direction: column;
+    padding: var(--space-lg);
+    border: 1px solid color-mix(in srgb, var(--aquarium-accent) 18%, var(--border-base));
+    border-radius: 1.25rem;
+    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--aquarium-accent) 4%, var(--bg-surface)));
+    color: inherit;
+    text-decoration: none;
+    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
+    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .category-tool-card:hover,
+  .category-tool-card:focus-visible {
+    border-color: var(--aquarium-accent);
+    box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--aquarium-accent) 18%, transparent);
+    transform: translateY(-4px);
+  }
+
+  .category-tool-card:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--aquarium-accent) 55%, transparent);
+    outline-offset: 4px;
+  }
+
+  .category-tool-card::after {
+    position: absolute;
+    right: -2rem;
+    bottom: -3rem;
+    width: 9rem;
+    height: 9rem;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--aquarium-accent) 10%, transparent);
+    content: "";
+    pointer-events: none;
+  }
+
+  .category-tool-icon {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    width: 3.25rem;
+    height: 3.25rem;
+    place-items: center;
+    margin-bottom: var(--space-md);
+    border: 1px solid color-mix(in srgb, var(--aquarium-accent) 28%, transparent);
+    border-radius: 1rem;
+    background: color-mix(in srgb, var(--aquarium-accent) 12%, var(--bg-surface));
+    color: var(--aquarium-accent);
+    font-size: 1.6rem;
+  }
+
+  .category-tool-index {
+    position: absolute;
+    top: var(--space-md);
+    right: var(--space-lg);
+    color: var(--text-dimmed, var(--text-muted));
+    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: 0.72rem;
+    letter-spacing: 0.12em;
+  }
+
+  .category-tool-card h2,
+  .category-tool-card p,
+  .category-tool-cta {
+    position: relative;
+    z-index: 1;
+  }
+
+  .category-tool-card h2 {
+    margin: 0 0 0.5rem;
+    color: var(--text-main);
+    font-size: 1.25rem;
+  }
+
+  .category-tool-card p {
+    margin: 0;
+    color: var(--text-muted);
+    line-height: 1.55;
+  }
+
+  .category-tool-cta {
+    margin-top: auto;
+    padding-top: var(--space-md);
+    color: var(--aquarium-accent);
+    font-weight: 700;
+  }
+
+  .category-seo-production {
+    max-width: 56rem;
+    margin: 0 auto;
+    font-size: 1.125rem;
+    line-height: 1.75;
+  }
+
+  @media (width <= 768px) {
+    .category-production-inner { padding: var(--space-lg) var(--space-sm) var(--space-3xl); }
+    .category-tools-grid { grid-template-columns: 1fr; }
+  }
+</style>

package/src/layouts/ProductionUtilityPage.astro

@@ -45,6 +45,7 @@ const ui = getCategoryUi(locale);
 </ProductionPage>
 
 <script>
+  import { observeWidgetHeight } from "../mfe/widget-height";
   const isWidget = new URLSearchParams(window.location.search).get("widget") === "true";
   const page = document.querySelector<HTMLElement>(".utility-production");
   const container = document.querySelector<HTMLElement>(".utility-tool-production");
@@ -60,11 +61,10 @@ const ui = getCategoryUi(locale);
   document.querySelector('[data-zoom="reset"]')?.addEventListener("click", () => { zoom = 1; applyZoom(); localStorage.removeItem("gamebob-utility-zoom"); });
   if (isWidget) {
     document.body.classList.add("utility-widget-body");
-    if (page) {
-      page.classList.add("utility-widget-mode");
-    }
+    page?.classList.add("utility-widget-mode");
   }
   applyZoom();
+  if (isWidget && container) observeWidgetHeight(container);
 </script>
 
 <style>
@@ -88,7 +88,7 @@ const ui = getCategoryUi(locale);
     margin-top: 0;
   }
 
-  .utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production) {
+  :global(.utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production)) {
     display: none;
   }
 

package/src/mfe/category-ui.ts

@@ -1,34 +1,34 @@
-import type { KnownLocale } from '../types';
-
-export interface CategoryUi {
-  useTool: string;
-  openTool: string;
-  relatedEyebrow: string;
-  moreToolsIn: string;
-  zoom: string;
-  zoomControls: string;
-  zoomOut: string;
-  resetZoom: string;
-  zoomIn: string;
-  breadcrumb: string;
-}
-
-export const CATEGORY_UI: Record<KnownLocale, CategoryUi> = {
-  es: { useTool: 'Usar herramienta', openTool: 'Abrir herramienta', relatedEyebrow: 'Sigue explorando', moreToolsIn: 'Más herramientas en', zoom: 'Zoom', zoomControls: 'Controles de zoom', zoomOut: 'Reducir zoom', resetZoom: 'Restablecer zoom', zoomIn: 'Aumentar zoom', breadcrumb: 'Migas de pan' },
-  en: { useTool: 'Use tool', openTool: 'Open tool', relatedEyebrow: 'Keep exploring', moreToolsIn: 'More tools in', zoom: 'Zoom', zoomControls: 'Zoom controls', zoomOut: 'Zoom out', resetZoom: 'Reset zoom', zoomIn: 'Zoom in', breadcrumb: 'Breadcrumb' },
-  fr: { useTool: "Utiliser l'outil", openTool: "Ouvrir l'outil", relatedEyebrow: 'Continuez à explorer', moreToolsIn: "Plus d'outils dans", zoom: 'Zoom', zoomControls: 'Commandes de zoom', zoomOut: 'Réduire le zoom', resetZoom: 'Réinitialiser le zoom', zoomIn: 'Augmenter le zoom', breadcrumb: 'Fil d’Ariane' },
-  de: { useTool: 'Werkzeug verwenden', openTool: 'Werkzeug öffnen', relatedEyebrow: 'Mehr entdecken', moreToolsIn: 'Weitere Werkzeuge in', zoom: 'Zoom', zoomControls: 'Zoom-Steuerung', zoomOut: 'Verkleinern', resetZoom: 'Zoom zurücksetzen', zoomIn: 'Vergrößern', breadcrumb: 'Brotkrümelnavigation' },
-  it: { useTool: 'Usa lo strumento', openTool: 'Apri lo strumento', relatedEyebrow: 'Continua a esplorare', moreToolsIn: 'Altri strumenti in', zoom: 'Zoom', zoomControls: 'Controlli zoom', zoomOut: 'Riduci zoom', resetZoom: 'Reimposta zoom', zoomIn: 'Aumenta zoom', breadcrumb: 'Breadcrumb' },
-  pt: { useTool: 'Usar ferramenta', openTool: 'Abrir ferramenta', relatedEyebrow: 'Continue a explorar', moreToolsIn: 'Mais ferramentas em', zoom: 'Zoom', zoomControls: 'Controlos de zoom', zoomOut: 'Reduzir zoom', resetZoom: 'Repor zoom', zoomIn: 'Aumentar zoom', breadcrumb: 'Trilho de navegação' },
-  nl: { useTool: 'Tool gebruiken', openTool: 'Tool openen', relatedEyebrow: 'Blijf ontdekken', moreToolsIn: 'Meer tools in', zoom: 'Zoom', zoomControls: 'Zoomknoppen', zoomOut: 'Uitzoomen', resetZoom: 'Zoom herstellen', zoomIn: 'Inzoomen', breadcrumb: 'Broodkruimelnavigatie' },
-  sv: { useTool: 'Använd verktyget', openTool: 'Öppna verktyget', relatedEyebrow: 'Utforska mer', moreToolsIn: 'Fler verktyg i', zoom: 'Zoom', zoomControls: 'Zoomkontroller', zoomOut: 'Zooma ut', resetZoom: 'Återställ zoom', zoomIn: 'Zooma in', breadcrumb: 'Brödsmulenavigering' },
-  pl: { useTool: 'Użyj narzędzia', openTool: 'Otwórz narzędzie', relatedEyebrow: 'Odkrywaj dalej', moreToolsIn: 'Więcej narzędzi w', zoom: 'Powiększenie', zoomControls: 'Sterowanie powiększeniem', zoomOut: 'Pomniejsz', resetZoom: 'Resetuj powiększenie', zoomIn: 'Powiększ', breadcrumb: 'Okruszki nawigacji' },
-  id: { useTool: 'Gunakan alat', openTool: 'Buka alat', relatedEyebrow: 'Jelajahi lebih lanjut', moreToolsIn: 'Alat lainnya di', zoom: 'Zoom', zoomControls: 'Kontrol zoom', zoomOut: 'Perkecil', resetZoom: 'Atur ulang zoom', zoomIn: 'Perbesar', breadcrumb: 'Breadcrumb' },
-  tr: { useTool: 'Aracı kullan', openTool: 'Aracı aç', relatedEyebrow: 'Keşfetmeye devam edin', moreToolsIn: 'Diğer araçlar:', zoom: 'Yakınlaştırma', zoomControls: 'Yakınlaştırma denetimleri', zoomOut: 'Uzaklaştır', resetZoom: 'Yakınlaştırmayı sıfırla', zoomIn: 'Yakınlaştır', breadcrumb: 'İçerik haritası' },
-  ru: { useTool: 'Использовать инструмент', openTool: 'Открыть инструмент', relatedEyebrow: 'Продолжить изучение', moreToolsIn: 'Другие инструменты в', zoom: 'Масштаб', zoomControls: 'Управление масштабом', zoomOut: 'Уменьшить', resetZoom: 'Сбросить масштаб', zoomIn: 'Увеличить', breadcrumb: 'Навигационная цепочка' },
-  ja: { useTool: 'ツールを使う', openTool: 'ツールを開く', relatedEyebrow: 'さらに探索', moreToolsIn: 'その他のツール：', zoom: 'ズーム', zoomControls: 'ズーム操作', zoomOut: '縮小', resetZoom: 'ズームをリセット', zoomIn: '拡大', breadcrumb: 'パンくずリスト' },
-  ko: { useTool: '도구 사용', openTool: '도구 열기', relatedEyebrow: '더 탐색하기', moreToolsIn: '카테고리의 다른 도구:', zoom: '확대/축소', zoomControls: '확대/축소 컨트롤', zoomOut: '축소', resetZoom: '확대/축소 초기화', zoomIn: '확대', breadcrumb: '탐색 경로' },
-  zh: { useTool: '使用工具', openTool: '打开工具', relatedEyebrow: '继续探索', moreToolsIn: '更多工具：', zoom: '缩放', zoomControls: '缩放控件', zoomOut: '缩小', resetZoom: '重置缩放', zoomIn: '放大', breadcrumb: '面包屑导航' },
-};
-
-export const getCategoryUi = (locale: KnownLocale): CategoryUi => CATEGORY_UI[locale];
+import type { KnownLocale } from '../types';
+
+export interface CategoryUi {
+  useTool: string;
+  openTool: string;
+  relatedEyebrow: string;
+  moreToolsIn: string;
+  zoom: string;
+  zoomControls: string;
+  zoomOut: string;
+  resetZoom: string;
+  zoomIn: string;
+  breadcrumb: string;
+}
+
+export const CATEGORY_UI: Record<KnownLocale, CategoryUi> = {
+  es: { useTool: 'Usar herramienta', openTool: 'Abrir herramienta', relatedEyebrow: 'Sigue explorando', moreToolsIn: 'Más herramientas en', zoom: 'Zoom', zoomControls: 'Controles de zoom', zoomOut: 'Reducir zoom', resetZoom: 'Restablecer zoom', zoomIn: 'Aumentar zoom', breadcrumb: 'Migas de pan' },
+  en: { useTool: 'Use tool', openTool: 'Open tool', relatedEyebrow: 'Keep exploring', moreToolsIn: 'More tools in', zoom: 'Zoom', zoomControls: 'Zoom controls', zoomOut: 'Zoom out', resetZoom: 'Reset zoom', zoomIn: 'Zoom in', breadcrumb: 'Breadcrumb' },
+  fr: { useTool: "Utiliser l'outil", openTool: "Ouvrir l'outil", relatedEyebrow: 'Continuez à explorer', moreToolsIn: "Plus d'outils dans", zoom: 'Zoom', zoomControls: 'Commandes de zoom', zoomOut: 'Réduire le zoom', resetZoom: 'Réinitialiser le zoom', zoomIn: 'Augmenter le zoom', breadcrumb: 'Fil d’Ariane' },
+  de: { useTool: 'Werkzeug verwenden', openTool: 'Werkzeug öffnen', relatedEyebrow: 'Mehr entdecken', moreToolsIn: 'Weitere Werkzeuge in', zoom: 'Zoom', zoomControls: 'Zoom-Steuerung', zoomOut: 'Verkleinern', resetZoom: 'Zoom zurücksetzen', zoomIn: 'Vergrößern', breadcrumb: 'Brotkrümelnavigation' },
+  it: { useTool: 'Usa lo strumento', openTool: 'Apri lo strumento', relatedEyebrow: 'Continua a esplorare', moreToolsIn: 'Altri strumenti in', zoom: 'Zoom', zoomControls: 'Controlli zoom', zoomOut: 'Riduci zoom', resetZoom: 'Reimposta zoom', zoomIn: 'Aumenta zoom', breadcrumb: 'Breadcrumb' },
+  pt: { useTool: 'Usar ferramenta', openTool: 'Abrir ferramenta', relatedEyebrow: 'Continue a explorar', moreToolsIn: 'Mais ferramentas em', zoom: 'Zoom', zoomControls: 'Controlos de zoom', zoomOut: 'Reduzir zoom', resetZoom: 'Repor zoom', zoomIn: 'Aumentar zoom', breadcrumb: 'Trilho de navegação' },
+  nl: { useTool: 'Tool gebruiken', openTool: 'Tool openen', relatedEyebrow: 'Blijf ontdekken', moreToolsIn: 'Meer tools in', zoom: 'Zoom', zoomControls: 'Zoomknoppen', zoomOut: 'Uitzoomen', resetZoom: 'Zoom herstellen', zoomIn: 'Inzoomen', breadcrumb: 'Broodkruimelnavigatie' },
+  sv: { useTool: 'Använd verktyget', openTool: 'Öppna verktyget', relatedEyebrow: 'Utforska mer', moreToolsIn: 'Fler verktyg i', zoom: 'Zoom', zoomControls: 'Zoomkontroller', zoomOut: 'Zooma ut', resetZoom: 'Återställ zoom', zoomIn: 'Zooma in', breadcrumb: 'Brödsmulenavigering' },
+  pl: { useTool: 'Użyj narzędzia', openTool: 'Otwórz narzędzie', relatedEyebrow: 'Odkrywaj dalej', moreToolsIn: 'Więcej narzędzi w', zoom: 'Powiększenie', zoomControls: 'Sterowanie powiększeniem', zoomOut: 'Pomniejsz', resetZoom: 'Resetuj powiększenie', zoomIn: 'Powiększ', breadcrumb: 'Okruszki nawigacji' },
+  id: { useTool: 'Gunakan alat', openTool: 'Buka alat', relatedEyebrow: 'Jelajahi lebih lanjut', moreToolsIn: 'Alat lainnya di', zoom: 'Zoom', zoomControls: 'Kontrol zoom', zoomOut: 'Perkecil', resetZoom: 'Atur ulang zoom', zoomIn: 'Perbesar', breadcrumb: 'Breadcrumb' },
+  tr: { useTool: 'Aracı kullan', openTool: 'Aracı aç', relatedEyebrow: 'Keşfetmeye devam edin', moreToolsIn: 'Diğer araçlar:', zoom: 'Yakınlaştırma', zoomControls: 'Yakınlaştırma denetimleri', zoomOut: 'Uzaklaştır', resetZoom: 'Yakınlaştırmayı sıfırla', zoomIn: 'Yakınlaştır', breadcrumb: 'İçerik haritası' },
+  ru: { useTool: 'Использовать инструмент', openTool: 'Открыть инструмент', relatedEyebrow: 'Продолжить изучение', moreToolsIn: 'Другие инструменты в', zoom: 'Масштаб', zoomControls: 'Управление масштабом', zoomOut: 'Уменьшить', resetZoom: 'Сбросить масштаб', zoomIn: 'Увеличить', breadcrumb: 'Навигационная цепочка' },
+  ja: { useTool: 'ツールを使う', openTool: 'ツールを開く', relatedEyebrow: 'さらに探索', moreToolsIn: 'その他のツール：', zoom: 'ズーム', zoomControls: 'ズーム操作', zoomOut: '縮小', resetZoom: 'ズームをリセット', zoomIn: '拡大', breadcrumb: 'パンくずリスト' },
+  ko: { useTool: '도구 사용', openTool: '도구 열기', relatedEyebrow: '더 탐색하기', moreToolsIn: '카테고리의 다른 도구:', zoom: '확대/축소', zoomControls: '확대/축소 컨트롤', zoomOut: '축소', resetZoom: '확대/축소 초기화', zoomIn: '확대', breadcrumb: '탐색 경로' },
+  zh: { useTool: '使用工具', openTool: '打开工具', relatedEyebrow: '继续探索', moreToolsIn: '更多工具：', zoom: '缩放', zoomControls: '缩放控件', zoomOut: '缩小', resetZoom: '重置缩放', zoomIn: '放大', breadcrumb: '面包屑导航' },
+};
+
+export const getCategoryUi = (locale: KnownLocale): CategoryUi => CATEGORY_UI[locale];

package/src/mfe/widget-height.ts

@@ -0,0 +1,14 @@
+export function observeWidgetHeight(container: HTMLElement): void {
+  if (window.parent === window) return;
+
+  const pathSlug = window.location.pathname.split("/").filter(Boolean).pop() ?? "utility";
+  const widgetId = new URLSearchParams(window.location.search).get("id") ?? `jj-widget-${pathSlug}`;
+  const reportHeight = (height: number) => {
+    if (height > 50) {
+      window.parent.postMessage({ jjlmoyaHeight: Math.ceil(height), jjlmoyaId: widgetId }, "*");
+    }
+  };
+  const observer = new ResizeObserver(([entry]) => reportHeight(entry?.contentRect.height ?? 0));
+
+  observer.observe(container);
+}

package/src/tests/qa-test-helpers.ts

@@ -0,0 +1,32 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+export const repositoryRoot = process.cwd();
+export const toolRoot = join(repositoryRoot, 'src', 'tool');
+
+export function listToolDirectories(): string[] {
+  return readdirSync(toolRoot)
+    .map((name) => join(toolRoot, name))
+    .filter((path) => statSync(path).isDirectory());
+}
+
+export function findFiles(directory: string, extensions: string[]): string[] {
+  const files: string[] = [];
+
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(path, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(path);
+  }
+
+  return files;
+}
+
+export function read(path: string): string {
+  return readFileSync(path, 'utf8');
+}
+
+export function displayPath(path: string): string {
+  return relative(repositoryRoot, path).replace(/\\/g, '/');
+}
+

package/src/tests/qa_bibliography_links.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import type { ToolLocaleContent } from '../types';
+
+interface LinkFailure {
+  tool: string;
+  message: string;
+}
+
+function validateEntry(tool: string, entry: { url: string }, seen: Set<string>): LinkFailure[] {
+  const failures: LinkFailure[] = [];
+  let url: URL;
+
+  try {
+    url = new URL(entry.url);
+  } catch {
+    return [{ tool, message: `invalid URL: ${entry.url}` }];
+  }
+
+  if (url.protocol !== 'https:') {
+    failures.push({ tool, message: `non-HTTPS URL: ${entry.url}` });
+  }
+  if (url.pathname === '/' && !url.search && !url.hash) {
+    failures.push({ tool, message: `generic homepage, cite the exact document: ${entry.url}` });
+  }
+  if (seen.has(url.href)) {
+    failures.push({ tool, message: `duplicate source URL: ${entry.url}` });
+  }
+  seen.add(url.href);
+  return failures;
+}
+
+async function validateTool(tool: (typeof ALL_TOOLS)[number]): Promise<LinkFailure[]> {
+  const loader = tool.entry.i18n.en;
+  if (!loader) return [{ tool: tool.entry.id, message: 'English locale loader is missing' }];
+
+  const content = (await loader()) as ToolLocaleContent;
+  const seen = new Set<string>();
+  return (content.bibliography ?? []).flatMap((entry) => validateEntry(tool.entry.id, entry, seen));
+}
+
+describe('QA: bibliography links are specific and usable', () => {
+  it('uses unique HTTPS links to exact source pages instead of generic homepages', async () => {
+    const failures = (await Promise.all(ALL_TOOLS.map(validateTool))).flat();
+    const messages = failures.map(({ tool, message }) => `${tool}: ${message}`);
+    expect(messages, `Bibliography hygiene failures:\n${messages.join('\n')}`).toEqual([]);
+  });
+});