@jjlmoya/utils-aquarium 1.0.0 → 1.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-aquarium",
-    "version": "1.0.0",
+    "version": "1.52.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -11,8 +11,13 @@
         "./runtime/*": "./src/tool/*/index.ts",
         "./category-seo": "./src/category/seo.astro"
     },
-    "files": ["src", "scripts"],
-    "publishConfig": {"access": "public"},
+    "files": [
+        "src",
+        "scripts"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
     "scripts": {
         "dev": "astro dev",
         "start": "astro dev",
@@ -29,7 +34,11 @@
         "major": "npm version major",
         "postinstall": "node scripts/postinstall.mjs"
     },
-    "lint-staged": {"*.{ts,tsx,astro}": ["eslint --fix"]},
+    "lint-staged": {
+        "*.{ts,tsx,astro}": [
+            "eslint --fix"
+        ]
+    },
     "dependencies": {
         "@iconify-json/mdi": "^1.2.3",
         "@jjlmoya/prompagate": "^1.1.0",

package/src/tests/bibliography_wellformed_export.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, existsSync } from 'fs';
+import { join, relative } from 'path';
+
+function findBibliographyAstroFiles(dir: string): string[] {
+  const files: string[] = [];
+  if (!existsSync(dir)) return files;
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...findBibliographyAstroFiles(fullPath));
+    } else if (entry.isFile() && entry.name === 'bibliography.astro') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+const toolDir = join(process.cwd(), 'src', 'tool');
+const bibliographyFiles = findBibliographyAstroFiles(toolDir);
+
+describe('Bibliography Component Wellformed Export', () => {
+  it('found tool bibliography.astro components', () => {
+    expect(bibliographyFiles.length).toBeGreaterThan(0);
+  });
+
+  bibliographyFiles.forEach((file) => {
+    const relativePath = relative(process.cwd(), file);
+
+    it(`${relativePath} should use SharedBibliography from @jjlmoya/utils-shared`, () => {
+      const content = readFileSync(file, 'utf-8');
+
+      const usesSharedComponent =
+        content.includes('@jjlmoya/utils-shared') &&
+        (content.includes('Bibliography') || content.includes('SharedBibliography'));
+
+      expect(
+        usesSharedComponent,
+        `File "${relativePath}" does not use the standard Bibliography component from @jjlmoya/utils-shared, resulting in unstyled or raw bibliography output.`,
+      ).toBe(true);
+    });
+  });
+});

package/src/tests/i18n_coverage.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { ALL_TOOLS } from '../tools';
 
-const EXPECTED_LOCALES = ['en'];
+const EXPECTED_LOCALES = ['de', 'en', 'es', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'ru', 'sv', 'tr', 'zh'];
 
 describe('I18n Coverage Validation', () => {
   ALL_TOOLS.forEach(({ entry }) => {

package/src/tests/seo_wellformed_export.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, existsSync } from 'fs';
+import { join, relative } from 'path';
+
+function findSeoAstroFiles(dir: string): string[] {
+  const files: string[] = [];
+  if (!existsSync(dir)) return files;
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...findSeoAstroFiles(fullPath));
+    } else if (entry.isFile() && entry.name === 'seo.astro') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+const toolDir = join(process.cwd(), 'src', 'tool');
+const seoFiles = findSeoAstroFiles(toolDir);
+
+describe('SEO Component Wellformed Export', () => {
+  it('found tool seo.astro components', () => {
+    expect(seoFiles.length).toBeGreaterThan(0);
+  });
+
+  seoFiles.forEach((file) => {
+    const relativePath = relative(process.cwd(), file);
+
+    it(`${relativePath} should dynamically load SEO sections and use SEORenderer`, () => {
+      const content = readFileSync(file, 'utf-8');
+
+      const usesSeoRenderer =
+        content.includes('@jjlmoya/utils-shared') &&
+        (content.includes('SEORenderer') || content.includes('SEOArticle'));
+
+      const acquiresDynamicContent =
+        content.includes('.i18n') ||
+        content.includes('loader') ||
+        content.includes('await loader') ||
+        content.includes('.seo');
+
+      const isBrokenPattern =
+        /sections\s*=\s*\[\s*\]/.test(content) && !acquiresDynamicContent;
+
+      expect(
+        usesSeoRenderer,
+        `File "${relativePath}" does not import or use SEORenderer from @jjlmoya/utils-shared.`,
+      ).toBe(true);
+
+      expect(
+        isBrokenPattern,
+        `File "${relativePath}" relies on a static sections=[] prop default without fetching content from entry.i18n, resulting in empty SEO text on consumers.`,
+      ).toBe(false);
+
+      expect(
+        acquiresDynamicContent,
+        `File "${relativePath}" does not fetch dynamic i18n content for SEO rendering.`,
+      ).toBe(true);
+    });
+  });
+});

package/src/tool/aquariumTankVolumeWaterChangeCalculator/aquarium-tank-volume-water-change-calculator.css

@@ -10,7 +10,7 @@
   --n-accent: #d96f4f;
   --n-accent-ink: #fff;
   --n-error: #a33632;
-  --n-shadow: rgba(23, 49, 59, 0.12);
+  --n-shadow: #dbe6e2;
 }
 
 .theme-dark {
@@ -25,7 +25,7 @@
   --n-accent: #ef9474;
   --n-accent-ink: #251512;
   --n-error: #ff9b91;
-  --n-shadow: rgba(0, 0, 0, 0.28);
+  --n-shadow: #101a1c;
 }
 
 .atvwc-root {
@@ -41,7 +41,6 @@
   padding: clamp(1rem, 3vw, 2rem);
 }
 
-.atvwc-heading,
 .atvwc-panel-topline,
 .atvwc-result-heading,
 .atvwc-footnotes {
@@ -51,6 +50,7 @@
   justify-content: space-between;
 }
 
+.atvwc-step,
 .atvwc-eyebrow,
 .atvwc-subtitle,
 .atvwc-help,
@@ -62,12 +62,20 @@
   margin: 0;
 }
 
+.atvwc-step,
 .atvwc-eyebrow {
   font-size: 1.15rem;
   font-weight: 800;
   letter-spacing: .02em;
 }
 
+.atvwc-step {
+  color: var(--n-water);
+  font-size: .75rem;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
 .atvwc-subtitle,
 .atvwc-help,
 .atvwc-result-hint,
@@ -92,23 +100,17 @@
 
 .atvwc-unit-control button,
 .atvwc-shape,
-.atvwc-reset,
-.atvwc-calculate {
+.atvwc-reset {
+  background: var(--n-card);
   border: 1px solid var(--n-line);
   border-radius: .7rem;
+  color: var(--n-ink);
   cursor: pointer;
   font: inherit;
   min-height: 2.6rem;
   padding: .55rem .8rem;
 }
 
-.atvwc-unit-control button,
-.atvwc-shape,
-.atvwc-reset {
-  background: var(--n-card);
-  color: var(--n-ink);
-}
-
 .atvwc-unit-control button[aria-pressed="true"],
 .atvwc-shape.is-active {
   background: var(--n-water-soft);
@@ -119,16 +121,13 @@
 
 .atvwc-layout {
   display: grid;
-  gap: 1.25rem;
+  gap: 0;
   grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
-  margin-top: 1.5rem;
+  margin-top: 0;
 }
 
 .atvwc-panel {
-  background: var(--n-card);
-  border: 1px solid var(--n-line);
-  border-radius: 1.1rem;
-  padding: clamp(1rem, 2vw, 1.5rem);
+  padding: .25rem 0;
 }
 
 .atvwc-panel h2 {
@@ -136,6 +135,16 @@
   margin: 0;
 }
 
+.atvwc-form-panel {
+  border-right: 1px solid var(--n-line);
+  padding-right: clamp(1rem, 3vw, 2rem);
+}
+
+.atvwc-visual-panel {
+  min-height: 0;
+  padding-left: clamp(1rem, 3vw, 2rem);
+}
+
 .atvwc-reset {
   min-height: 2.25rem;
   padding: .35rem .65rem;
@@ -186,29 +195,31 @@
 .atvwc-field input:focus-visible,
 .atvwc-unit-control button:focus-visible,
 .atvwc-shape:focus-visible,
-.atvwc-reset:focus-visible,
-.atvwc-calculate:focus-visible {
+.atvwc-reset:focus-visible {
   outline: 3px solid var(--n-focus);
   outline-offset: 2px;
 }
 
-.atvwc-calculate {
-  background: var(--n-accent);
-  border-color: var(--n-accent);
-  color: var(--n-accent-ink);
-  font-weight: 800;
-  margin-top: 1.25rem;
-  width: 100%;
-}
-
 .atvwc-bow-note {
   display: none;
 }
 
-.atvwc-visual-panel {
+.atvwc-root[data-shape="bow"] .atvwc-bow-note {
+  display: block;
+}
+
+.atvwc-scene-header {
+  align-items: center;
   display: flex;
-  flex-direction: column;
-  min-height: 100%;
+  justify-content: space-between;
+}
+
+.atvwc-scene-kicker {
+  color: var(--n-muted);
+  font-size: .82rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
 }
 
 .atvwc-tank-stage {
@@ -234,6 +245,17 @@
   width: 10rem;
 }
 
+.atvwc-root[data-shape="cylindrical"] .atvwc-tank {
+  border-radius: 50%;
+  height: 7rem;
+  width: 7rem;
+}
+
+.atvwc-root[data-shape="bow"] .atvwc-tank {
+  border-radius: .8rem 2.8rem 2.8rem .8rem;
+  transform: perspective(14rem) rotateY(-8deg);
+}
+
 .atvwc-water,
 .atvwc-gravel {
   bottom: 0;
@@ -244,7 +266,7 @@
 
 .atvwc-water {
   background: var(--n-water);
-  height: 70%;
+  height: var(--water-level, 70%);
   opacity: .82;
   transition: height .25s ease;
 }
@@ -266,23 +288,6 @@
   width: 84%;
 }
 
-.atvwc-fish {
-  color: var(--n-accent);
-  font-size: 1.5rem;
-  position: absolute;
-}
-
-.atvwc-fish-one {
-  left: 20%;
-  top: 32%;
-}
-
-.atvwc-fish-two {
-  right: 19%;
-  top: 54%;
-  transform: scaleX(-1);
-}
-
 .atvwc-result-heading {
   align-items: center;
   margin-top: 1.25rem;
@@ -294,6 +299,13 @@
   margin: .25rem 0 0;
 }
 
+.atvwc-result-heading p {
+  color: var(--n-accent);
+  font-size: .95rem;
+  font-weight: 800;
+  margin: .4rem 0 0;
+}
+
 .atvwc-scale {
   background: var(--n-water-soft);
   border-radius: 999px;
@@ -337,28 +349,59 @@
 .atvwc-footnotes {
   flex-wrap: wrap;
   gap: .6rem 1rem;
-  margin-top: auto;
   padding-top: 1rem;
 }
 
+.atvwc-stage-note {
+  align-items: flex-start;
+  bottom: 1rem;
+  display: grid;
+  gap: .1rem;
+  left: 1rem;
+  position: absolute;
+}
+
+.atvwc-stage-note strong {
+  color: var(--n-ink);
+  font-size: .95rem;
+}
+
+.atvwc-stage-note span,
+.atvwc-level-mark {
+  color: var(--n-muted);
+  font-size: .72rem;
+}
+
+.atvwc-level-mark {
+  position: absolute;
+  right: 1rem;
+}
+
+.atvwc-level-mark-top {
+  top: 1rem;
+}
+
+.atvwc-level-mark-bottom {
+  bottom: 1rem;
+}
+
 .atvwc-error {
   color: var(--n-error);
   font-weight: 700;
   margin-top: .75rem;
 }
 
-.atvwc-root[data-state="ready"] .atvwc-empty,
-.atvwc-root[data-state="error"] .atvwc-empty {
+.atvwc-root.has-results .atvwc-empty,
+.atvwc-root.has-error .atvwc-empty {
   display: none;
 }
 
-.atvwc-root[data-state="error"] .atvwc-result-card strong,
-.atvwc-root[data-state="error"] .atvwc-footnotes strong {
+.atvwc-root.has-error .atvwc-result-card strong,
+.atvwc-root.has-error .atvwc-footnotes strong {
   color: var(--n-muted);
 }
 
 @media (max-width: 760px) {
-  .atvwc-heading,
   .atvwc-layout {
     display: block;
   }
@@ -369,7 +412,15 @@
   }
 
   .atvwc-visual-panel {
+    border-top: 1px solid var(--n-line);
     margin-top: 1.25rem;
+    padding-left: 0;
+    padding-top: 1.25rem;
+  }
+
+  .atvwc-form-panel {
+    border-right: 0;
+    padding-right: 0;
   }
 
   .atvwc-input-grid {

package/src/tool/aquariumTankVolumeWaterChangeCalculator/bibliography.ts

@@ -1,14 +1,14 @@
 export const bibliography = [
   {
-    name: 'Centro Español de Metrología, Sistema Internacional de Unidades',
-    url: 'https://www.cem.es/sites/default/files/2021-01/SistemaInternacionalUnidades.pdf',
+    name: 'Merck Veterinary Manual, Formulae to Calculate Tank Volumes',
+    url: 'https://www.merckvetmanual.com/multimedia/table/formulae-to-calculate-tank-volumes',
   },
   {
-    name: 'U.S. Geological Survey, Water Density',
-    url: 'https://www.usgs.gov/water-science-school/science/water-density',
+    name: 'FAO, Determinación de los volúmenes de agua',
+    url: 'https://www.fao.org/fishery/static/FAO_Training/FAO_Training/General/x6709s/x6709s15.htm',
   },
   {
-    name: 'OpenStax, Measuring Volume',
-    url: 'https://openstax.org/books/contemporary-mathematics/pages/9-3-measuring-volume',
+    name: 'U.S. Geological Survey, Water Density',
+    url: 'https://www.usgs.gov/water-science-school/science/water-density',
   },
 ];

package/src/tool/aquariumTankVolumeWaterChangeCalculator/component.astro

@@ -6,23 +6,18 @@ const t = (ui ?? {}) as AquariumTankVolumeWaterChangeCalculatorUI;
 ---
 
 <div id="aquarium-tank-volume-water-change-calculator" class="atvwc-root" data-ui={JSON.stringify(t)}>
-  <div class="atvwc-heading">
-    <div>
-      <p class="atvwc-eyebrow">{t.toolTitle}</p>
-      <p class="atvwc-subtitle">{t.toolSubtitle}</p>
-    </div>
-    <div class="atvwc-unit-control" role="group" aria-label={t.unitLabel}>
-      <span class="atvwc-control-label">{t.unitLabel}</span>
-      <button type="button" data-unit-choice="metric" aria-pressed="true">{t.metricLabel}</button>
-      <button type="button" data-unit-choice="imperial" aria-pressed="false">{t.imperialLabel}</button>
-    </div>
-  </div>
-
   <div class="atvwc-layout">
     <section class="atvwc-panel atvwc-form-panel" aria-labelledby="atvwc-dimensions-title">
       <div class="atvwc-panel-topline">
-        <h2 id="atvwc-dimensions-title">{t.dimensionsTitle}</h2>
-        <button type="button" class="atvwc-reset" data-action="reset">{t.resetLabel}</button>
+        <div>
+          <p class="atvwc-step">{t.configureLabel}</p>
+          <h2 id="atvwc-dimensions-title">{t.dimensionsTitle}</h2>
+        </div>
+        <div class="atvwc-unit-control" role="group" aria-label={t.unitLabel}>
+          <span class="atvwc-control-label">{t.unitLabel}</span>
+          <button type="button" data-unit-choice="metric" aria-pressed="true">{t.metricLabel}</button>
+          <button type="button" data-unit-choice="imperial" aria-pressed="false">{t.imperialLabel}</button>
+        </div>
       </div>
 
       <fieldset class="atvwc-fieldset">
@@ -35,43 +30,33 @@ const t = (ui ?? {}) as AquariumTankVolumeWaterChangeCalculatorUI;
         <p class="atvwc-help">{t.shapeHint}</p>
       </fieldset>
 
-      <div class="atvwc-input-grid" data-shape-fields="rectangular">
-        <label class="atvwc-field"><span>{t.lengthLabel} <span data-length-unit></span></span><input data-input="lengthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
-        <label class="atvwc-field"><span>{t.widthLabel} <span data-length-unit></span></span><input data-input="widthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
-        <label class="atvwc-field"><span>{t.heightLabel} <span data-length-unit></span></span><input data-input="heightCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
-      </div>
-
-      <div class="atvwc-input-grid" data-shape-fields="cylindrical" hidden>
-        <label class="atvwc-field"><span>{t.diameterLabel} <span data-length-unit></span></span><input data-input="diameterCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
-        <label class="atvwc-field"><span>{t.heightLabel} <span data-length-unit></span></span><input data-input="heightCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+      <div class="atvwc-input-grid" data-dynamic-fields>
+        <label class="atvwc-field" data-field="lengthCm"><span>{t.lengthLabel} <span data-length-unit>{t.lengthUnitMetric}</span></span><input data-input="lengthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field" data-field="widthCm"><span>{t.widthLabel} <span data-length-unit>{t.lengthUnitMetric}</span></span><input data-input="widthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
+        <label class="atvwc-field" data-field="heightCm"><span>{t.heightLabel} <span data-length-unit>{t.lengthUnitMetric}</span></span><input data-input="heightCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
       </div>
 
-      <div class="atvwc-input-grid" data-shape-fields="bow" hidden>
-        <label class="atvwc-field"><span>{t.lengthLabel} <span data-length-unit></span></span><input data-input="lengthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
-        <label class="atvwc-field"><span>{t.widthLabel} <span data-length-unit></span></span><input data-input="widthCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
-        <label class="atvwc-field"><span>{t.heightLabel} <span data-length-unit></span></span><input data-input="heightCm" type="number" min="0.1" max="500" step="0.1" inputmode="decimal" /></label>
-        <label class="atvwc-field"><span>{t.bowDepthLabel} <span data-length-unit></span></span><input data-input="bowDepthCm" type="number" min="0" max="500" step="0.1" inputmode="decimal" /></label>
-      </div>
-
-      <div class="atvwc-input-grid">
-        <label class="atvwc-field"><span>{t.substrateLabel} <span data-length-unit></span></span><input data-input="substrateDepthCm" type="number" min="0" max="500" step="0.1" inputmode="decimal" /></label>
+      <div class="atvwc-input-grid atvwc-common-fields">
+        <label class="atvwc-field"><span>{t.substrateLabel} <span data-length-unit>{t.lengthUnitMetric}</span></span><input data-input="substrateDepthCm" type="number" min="0" max="500" step="0.1" inputmode="decimal" /></label>
         <label class="atvwc-field"><span>{t.changeLabel} %</span><input data-input="changePercent" type="number" min="0" max="100" step="1" inputmode="decimal" /></label>
       </div>
 
       <p class="atvwc-help">{t.substrateHint}</p>
       <p class="atvwc-help atvwc-bow-note">{t.bowHint}</p>
-      <button type="button" class="atvwc-calculate" data-action="calculate">{t.calculateLabel}</button>
     </section>
 
     <section class="atvwc-panel atvwc-visual-panel" aria-labelledby="atvwc-results-title">
-      <div class="atvwc-tank-stage" aria-hidden="true">
-        <div class="atvwc-tank"><div class="atvwc-water" data-water></div><div class="atvwc-gravel"></div><div class="atvwc-glass-line"></div></div>
-        <div class="atvwc-fish atvwc-fish-one">◈</div>
-        <div class="atvwc-fish atvwc-fish-two">◈</div>
+      <div class="atvwc-scene-header">
+        <span class="atvwc-scene-kicker">{t.netVolumeLabel}</span>
+        <span class="atvwc-scale" data-result="scale"></span>
+      </div>
+      <div class="atvwc-tank-stage" aria-label={t.resultHint}>
+        <div class="atvwc-tank" aria-hidden="true"><div class="atvwc-water" data-water></div><div class="atvwc-gravel"></div><div class="atvwc-glass-line"></div><span class="atvwc-level-mark atvwc-level-mark-top">100%</span><span class="atvwc-level-mark atvwc-level-mark-bottom">0%</span></div>
+        <div class="atvwc-stage-note"><strong data-result="stage-volume">-</strong><span>{t.netVolumeLabel}</span></div>
       </div>
       <div class="atvwc-result-heading">
-        <div><p class="atvwc-eyebrow">{t.netVolumeLabel}</p><h2 id="atvwc-results-title" data-result="net">{t.emptyState}</h2></div>
-        <span class="atvwc-scale" data-result="scale"></span>
+        <h2 id="atvwc-results-title" data-result="net">{t.emptyState}</h2>
+        <p data-result="change-summary"></p>
       </div>
       <p class="atvwc-result-hint">{t.resultHint}</p>
       <p class="atvwc-error" data-error role="alert"></p>