@jjlmoya/utils-audiovisual 1.16.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-audiovisual",
-    "version": "1.16.0",
+    "version": "1.18.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -9,6 +9,7 @@ import { tvDistance } from '../tool/tvDistance/index';
 import { imageCompressor } from '../tool/imageCompressor/index';
 import { collageMaker } from '../tool/collageMaker/index';
 import { videoFrameExtractor } from '../tool/videoFrameExtractor/index';
+import { depthOfFieldCalculator } from '../tool/depthOfFieldCalculator/index';
 
 export const audiovisualCategory: AudiovisualCategoryEntry = {
   icon: 'mdi:camera-iris',
@@ -23,6 +24,7 @@ export const audiovisualCategory: AudiovisualCategoryEntry = {
     imageCompressor as AudiovisualToolEntry,
     collageMaker as AudiovisualToolEntry,
     videoFrameExtractor as AudiovisualToolEntry,
+    depthOfFieldCalculator as AudiovisualToolEntry,
   ],
   i18n: {
     es: async () => (await import('./i18n/es')).content,

package/src/entries.ts

@@ -18,6 +18,8 @@ export { tvDistance } from './tool/tvDistance/entry';
 export type { TvDistanceUI, TvDistanceLocaleContent } from './tool/tvDistance/entry';
 export { videoFrameExtractor } from './tool/videoFrameExtractor/entry';
 export type { VideoFrameExtractorUI, VideoFrameExtractorLocaleContent } from './tool/videoFrameExtractor/entry';
+export { depthOfFieldCalculator } from './tool/depthOfFieldCalculator/entry';
+export type { DepthOfFieldUI, DepthOfFieldLocaleContent } from './tool/depthOfFieldCalculator/entry';
 export { audiovisualCategory, toolsCategory } from './category';
 import { chromaticLens } from './tool/chromaticLens/entry';
 import { collageMaker } from './tool/collageMaker/entry';
@@ -29,4 +31,5 @@ import { subtitleSync } from './tool/subtitleSync/entry';
 import { timelapseCalculator } from './tool/timelapseCalculator/entry';
 import { tvDistance } from './tool/tvDistance/entry';
 import { videoFrameExtractor } from './tool/videoFrameExtractor/entry';
-export const ALL_ENTRIES = [chromaticLens, collageMaker, exifCleaner, imageCompressor, printQualityCalculator, privacyBlur, subtitleSync, timelapseCalculator, tvDistance, videoFrameExtractor];
+import { depthOfFieldCalculator } from './tool/depthOfFieldCalculator/entry';
+export const ALL_ENTRIES = [chromaticLens, collageMaker, exifCleaner, imageCompressor, printQualityCalculator, privacyBlur, subtitleSync, timelapseCalculator, tvDistance, videoFrameExtractor, depthOfFieldCalculator];

package/src/index.ts

@@ -13,6 +13,7 @@ export * from './tool/imageCompressor';
 export * from './tool/collageMaker';
 export * from './tool/videoFrameExtractor';
 export * from './tool/privacyBlur';
+export * from './tool/depthOfFieldCalculator';
 
 export type {
   KnownLocale,

package/src/pages/[locale]/[slug].astro

@@ -34,18 +34,28 @@ export async function getStaticPaths() {
       ]),
     ) as Partial<Record<KnownLocale, string>>;
 
+    const firstLoader = entry.i18n.en ?? Object.values(entry.i18n)[0];
+    const englishSlug = firstLoader ? (await firstLoader()).slug : entry.id;
+
     for (const { locale, content } of localeContents) {
-      const allToolsNav = await Promise.all(
-        ALL_TOOLS.map(async ({ entry: navEntry }) => ({
-          id: navEntry.id,
-          title: (await navEntry.i18n[locale]!()).title,
-          href: `/${locale}/${(await navEntry.i18n[locale]!()).slug}`,
-          isActive: navEntry.id === entry.id,
-        })),
-      );
+      const allToolsNav = (
+        await Promise.all(
+          ALL_TOOLS.map(async ({ entry: navEntry }) => {
+            const loader = navEntry.i18n[locale] ?? navEntry.i18n.en;
+            if (!loader) return null;
+            const navContent = await loader();
+            return {
+              id: navEntry.id,
+              title: navContent.title,
+              href: `/${locale}/${navContent.slug}`,
+              isActive: navEntry.id === entry.id,
+            };
+          }),
+        )
+      ).filter(Boolean) as NavItem[];
       paths.push({
         params: { locale, slug: content.slug },
-        props: { Component, locale, content, localeUrls, allToolsNav },
+        props: { Component, locale, content, localeUrls, allToolsNav, englishSlug },
       });
     }
   }
@@ -66,11 +76,16 @@ interface Props {
   content: ToolLocaleContent;
   localeUrls: Partial<Record<KnownLocale, string>>;
   allToolsNav: NavItem[];
+  englishSlug: string;
 }
 
-const { Component, locale, content, localeUrls, allToolsNav } = Astro.props;
+const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props;
+
+const cssFiles = import.meta.glob("../../tool/*/*.css", { query: "?raw", import: "default" });
+const cssKey = Object.keys(cssFiles).find((k) => k.endsWith(`/${englishSlug}.css`));
+const toolCss = cssKey ? await cssFiles[cssKey]() as string : "";
 
-const seoContent: UtilitySEOContent = { locale, sections: content.seo };
+const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
 
 const words = content.title.split(" ");
 const titleHighlight = words[0] || "";
@@ -89,8 +104,9 @@ const titleBase = words.slice(1).join(" ") || "";
     tools={allToolsNav}
   />
   <Fragment slot="head">
+    <Fragment set:html={toolCss ? `<style>${toolCss}</style>` : ''} />
     {
-      content.schemas.map((schema: unknown) => (
+      ( content.schemas ?? []).map((schema: unknown) => (
         <script
           is:inline
           type="application/ld+json"

package/src/tests/locale_completeness.test.ts

@@ -1,42 +1,8 @@
 import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
-import type { ToolLocaleContent } from '../types';
 
 describe('Locale Completeness Validation', () => {
-  ALL_TOOLS.forEach((tool) => {
-    describe(`Tool: ${tool.entry.id}`, () => {
-      Object.keys(tool.entry.i18n).forEach((locale) => {
-        describe(`Locale: ${locale}`, () => {
-          it('faqTitle should be defined when faq items exist', async () => {
-            const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
-            const content = (await loader?.()) as ToolLocaleContent;
-
-            if (content.faq.length > 0) {
-              expect(
-                content.faqTitle,
-                `Tool "${tool.entry.id}" locale "${locale}" has ${content.faq.length} FAQ items but is missing faqTitle`,
-              ).toBeTruthy();
-            }
-          });
-
-          it('bibliographyTitle should be defined when bibliography items exist', async () => {
-            const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
-            const content = (await loader?.()) as ToolLocaleContent;
-
-            if (content.bibliography.length > 0) {
-              expect(
-                content.bibliographyTitle,
-                `Tool "${tool.entry.id}" locale "${locale}" has ${content.bibliography.length} bibliography items but is missing bibliographyTitle`,
-              ).toBeTruthy();
-            }
-          });
-        });
-      });
-    });
-  });
-
-  it('all 10 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(10);
+  it('all 11 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(11);
   });
 });
-

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

@@ -0,0 +1,56 @@
+import type { ToolDefinition } from '../types';
+
+export interface ToolExportValidationResult {
+  passed: boolean;
+  failures: string[];
+}
+
+function validateComponentType(
+  toolId: string,
+  componentName: string,
+  component: unknown,
+  failures: string[],
+): void {
+  if (typeof component !== 'function') {
+    failures.push(`${toolId}: ${componentName} is not a function (${typeof component})`);
+  }
+}
+
+async function validateComponentExecution(
+  toolId: string,
+  componentName: string,
+  fn: () => Promise<unknown>,
+  failures: string[],
+): Promise<void> {
+  try {
+    const result = await fn();
+    if (!result || typeof result !== 'object') {
+      failures.push(`${toolId}: ${componentName} import returned invalid result`);
+    }
+  } catch (error) {
+    failures.push(`${toolId}: ${componentName} execution error - ${error instanceof Error ? error.message : 'unknown'}`);
+  }
+}
+
+export async function validateToolExports(tools: ToolDefinition[]): Promise<ToolExportValidationResult> {
+  const failures: string[] = [];
+
+  for (const tool of tools) {
+    validateComponentType(tool.entry.id, 'Component', tool.Component, failures);
+    validateComponentType(tool.entry.id, 'SEOComponent', tool.SEOComponent, failures);
+    validateComponentType(tool.entry.id, 'BibliographyComponent', tool.BibliographyComponent, failures);
+
+    const componentFn = tool.Component as () => Promise<unknown>;
+    const seoFn = tool.SEOComponent as () => Promise<unknown>;
+    const bibFn = tool.BibliographyComponent as () => Promise<unknown>;
+
+    await validateComponentExecution(tool.entry.id, 'Component', componentFn, failures);
+    await validateComponentExecution(tool.entry.id, 'SEOComponent', seoFn, failures);
+    await validateComponentExecution(tool.entry.id, 'BibliographyComponent', bibFn, failures);
+  }
+
+  return {
+    passed: failures.length === 0,
+    failures,
+  };
+}

package/src/tests/tool_exports.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { validateToolExports } from './shared-test-helpers';
+
+describe('Tool Exports Pattern Validation', () => {
+  describe('Component Exports Format', () => {
+    ALL_TOOLS.forEach((tool) => {
+      it(`${tool.entry.id}: Component should be a lazy-loaded function`, () => {
+        expect(typeof tool.Component).toBe('function');
+        expect(tool.Component).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: SEOComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.SEOComponent).toBe('function');
+        expect(tool.SEOComponent).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: BibliographyComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.BibliographyComponent).toBe('function');
+        expect(tool.BibliographyComponent).toBeInstanceOf(Function);
+      });
+    });
+  });
+
+  describe('Dynamic Import Validation', () => {
+    it('all tools must have functional dynamic imports', async () => {
+      const result = await validateToolExports(ALL_TOOLS);
+      if (!result.passed) {
+        throw new Error(`Tool export validation failed:\n${result.failures.join('\n')}`);
+      }
+      expect(result.passed).toBe(true);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { audiovisualCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 10 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(10);
+    it('should have 11 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(11);
     });
 
     it('audiovisualCategory should be defined', () => {

package/src/tool/chromaticLens/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+    {
+        name: "Median Cut Algorithm - Wikipedia",
+        url: "https://en.wikipedia.org/wiki/Median_cut",
+    },
+    {
+        name: "Farblehre für Designer",
+        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
+    },
+];

package/src/tool/chromaticLens/chromatic-lens-color-palette-extraction-online.css

@@ -1,4 +1,4 @@
-:global(.cl-root) {
+.cl-root {
   --cl-bg: #fff;
   --cl-bg-elevated: #f8fafc;
   --cl-border: #e2e8f0;
@@ -16,7 +16,7 @@
   margin: 0 auto;
 }
 
-:global(.theme-dark .cl-root) {
+.theme-dark .cl-root {
   --cl-bg: #18181b;
   --cl-bg-elevated: #27272a;
   --cl-border: #3f3f46;
@@ -30,7 +30,7 @@
   --cl-shadow: rgba(0, 0, 0, 0.5);
 }
 
-:global(.cl-card) {
+.cl-card {
   background: var(--cl-bg);
   border: 1px solid var(--cl-border);
   border-radius: 3rem;
@@ -40,7 +40,7 @@
   overflow: hidden;
 }
 
-:global(.cl-drop) {
+.cl-drop {
   padding: 5rem 2rem;
   display: flex;
   flex-direction: column;
@@ -53,13 +53,13 @@
   gap: 0.5rem;
 }
 
-:global(.cl-drop:hover),
-:global(.cl-drop-active) {
+.cl-drop:hover,
+.cl-drop-active {
   background: var(--cl-accent-alpha-hover);
   border-color: var(--cl-accent);
 }
 
-:global(.cl-drop-icon) {
+.cl-drop-icon {
   width: 5rem;
   height: 5rem;
   background: var(--cl-accent-alpha);
@@ -71,30 +71,30 @@
   color: var(--cl-accent);
 }
 
-:global(.cl-drop-icon svg) {
+.cl-drop-icon svg {
   width: 2.5rem;
   height: 2.5rem;
 }
 
-:global(.cl-drop-title) {
+.cl-drop-title {
   font-size: 2rem;
   font-weight: 950;
   color: var(--cl-text);
   margin: 0;
 }
 
-:global(.cl-drop-sub) {
+.cl-drop-sub {
   font-size: 1.1rem;
   color: var(--cl-text-muted);
   margin: 0;
   font-weight: 600;
 }
 
-:global(.cl-workspace) {
+.cl-workspace {
   padding: 1.5rem;
 }
 
-:global(.cl-mini-drop) {
+.cl-mini-drop {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
@@ -110,17 +110,17 @@
   transition: border-color 0.2s, color 0.2s;
 }
 
-:global(.cl-mini-drop:hover) {
+.cl-mini-drop:hover {
   border-color: var(--cl-accent);
   color: var(--cl-accent);
 }
 
-:global(.cl-mini-drop svg) {
+.cl-mini-drop svg {
   width: 1.1rem;
   height: 1.1rem;
 }
 
-:global(.cl-config-bar) {
+.cl-config-bar {
   padding: 1rem 0;
   margin-bottom: 2rem;
   border-bottom: 1px solid var(--cl-border);
@@ -128,13 +128,13 @@
   justify-content: flex-end;
 }
 
-:global(.cl-config-item) {
+.cl-config-item {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
 
-:global(.cl-config-label) {
+.cl-config-label {
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -142,7 +142,7 @@
   letter-spacing: 0.1em;
 }
 
-:global(.cl-count-select) {
+.cl-count-select {
   padding: 0.5rem 1rem;
   border-radius: 0.75rem;
   background: var(--cl-bg-elevated);
@@ -152,58 +152,58 @@
   cursor: pointer;
 }
 
-:global(.cl-result-layout) {
+.cl-result-layout {
   display: grid;
   grid-template-columns: 1fr 1.25fr;
   gap: 3rem;
 }
 
 @media (max-width: 800px) {
-  :global(.cl-result-layout) {
+  .cl-result-layout {
     grid-template-columns: 1fr;
   }
 }
 
-:global(.cl-preview-col) {
+.cl-preview-col {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-:global(.cl-preview-img) {
+.cl-preview-img {
   width: 100%;
   border-radius: 1.5rem;
   box-shadow: 0 20px 40px var(--cl-shadow);
   display: block;
 }
 
-:global(.cl-palette-col) {
+.cl-palette-col {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-:global(.cl-palette-header) {
+.cl-palette-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   color: var(--cl-accent);
 }
 
-:global(.cl-palette-header svg) {
+.cl-palette-header svg {
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
 }
 
-:global(.cl-palette-header h4) {
+.cl-palette-header h4 {
   font-size: 1.25rem;
   font-weight: 950;
   color: var(--cl-text);
   margin: 0;
 }
 
-:global(.cl-loader) {
+.cl-loader {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -211,7 +211,7 @@
   padding: 2rem 0;
 }
 
-:global(.cl-spinner) {
+.cl-spinner {
   width: 3rem;
   height: 3rem;
   border: 3px solid var(--cl-accent-alpha);
@@ -220,7 +220,7 @@
   animation: cl-spin 0.8s linear infinite;
 }
 
-:global(.cl-loader-text) {
+.cl-loader-text {
   font-size: 0.75rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -229,14 +229,14 @@
   margin: 0;
 }
 
-:global(.cl-swatches) {
+.cl-swatches {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   animation: cl-fade-up 0.5s ease;
 }
 
-:global(.cl-swatch) {
+.cl-swatch {
   display: flex;
   align-items: center;
   gap: 1.25rem;
@@ -248,17 +248,17 @@
   transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s;
 }
 
-:global(.cl-swatch:hover) {
+.cl-swatch:hover {
   transform: scale(1.02);
   border-color: var(--cl-accent);
 }
 
-:global(.cl-swatch-copied) {
+.cl-swatch-copied {
   background: var(--cl-emerald-alpha);
   border-color: var(--cl-emerald);
 }
 
-:global(.cl-swatch-color) {
+.cl-swatch-color {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 0.75rem;
@@ -266,19 +266,19 @@
   flex-shrink: 0;
 }
 
-:global(.cl-swatch-info) {
+.cl-swatch-info {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
 }
 
-:global(.cl-swatch-hex) {
+.cl-swatch-hex {
   font-weight: 950;
   color: var(--cl-text);
   font-size: 1.25rem;
 }
 
-:global(.cl-swatch-action) {
+.cl-swatch-action {
   font-size: 0.7rem;
   font-weight: 900;
   color: var(--cl-text-muted);
@@ -286,7 +286,7 @@
   letter-spacing: 0.05em;
 }
 
-:global(.cl-hidden) {
+.cl-hidden {
   display: none;
 }
 
@@ -305,4 +305,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-}
+}

package/src/tool/chromaticLens/entry.ts

@@ -37,3 +37,5 @@ export const chromaticLens: AudiovisualToolEntry<ChromaticLensUI> = {
         zh: async () => (await import('./i18n/zh')).content as unknown as ChromaticLensLocaleContent,
     },
 };
+
+export { bibliography } from './bibliography';

package/src/tool/chromaticLens/i18n/de.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
 
@@ -14,8 +15,6 @@ const ui: ChromaticLensUI = {
     copiedLabel: "Kopiert!",
     colorCountLabel: "Anzahl der Farben",
     changeImage: "Bild ändern",
-    faqTitle: "Häufig gestellte Fragen zur Farbetraktion",
-    bibliographyTitle: "Ressourcen und technische Dokumentation"
 };
 
 const faq: ChromaticLensLocaleContent['faq'] = [
@@ -52,17 +51,6 @@ const howTo: ChromaticLensLocaleContent['howTo'] = [
     },
 ];
 
-const bibliography: ChromaticLensLocaleContent['bibliography'] = [
-    {
-        name: "Median Cut Algorithm - Wikipedia",
-        url: "https://en.wikipedia.org/wiki/Median_cut",
-    },
-    {
-        name: "Farblehre für Designer",
-        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
-    },
-];
-
 const seo: ChromaticLensLocaleContent['seo'] = [
     {
         type: 'summary',
@@ -237,9 +225,7 @@ export const content: ChromaticLensLocaleContent = {
     description,
     ui,
     seo,
-    faqTitle: "Häufig gestellte Fragen",
     faq,
-    bibliographyTitle: "Referenzen",
     bibliography,
     howTo,
     schemas: [faqSchema as any, howToSchema as any, appSchema],

package/src/tool/chromaticLens/i18n/en.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
 
@@ -14,8 +15,6 @@ const ui: ChromaticLensUI = {
     copiedLabel: "Copied!",
     colorCountLabel: "Number of colors",
     changeImage: "Change image",
-    faqTitle: "Frequently asked questions about color extraction",
-    bibliographyTitle: "Resources and technical documentation"
 };
 
 const faq: ChromaticLensLocaleContent['faq'] = [
@@ -52,17 +51,6 @@ const howTo: ChromaticLensLocaleContent['howTo'] = [
     },
 ];
 
-const bibliography: ChromaticLensLocaleContent['bibliography'] = [
-    {
-        name: "Median Cut Algorithm - Wikipedia",
-        url: "https://en.wikipedia.org/wiki/Median_cut",
-    },
-    {
-        name: "Color Theory for Designers",
-        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
-    },
-];
-
 const seo: ChromaticLensLocaleContent['seo'] = [
     {
         type: 'summary',
@@ -237,9 +225,7 @@ export const content: ChromaticLensLocaleContent = {
     description,
     ui,
     seo,
-    faqTitle: "Frequently Asked Questions",
     faq,
-    bibliographyTitle: "References",
     bibliography,
     howTo,
     schemas: [faqSchema as any, howToSchema as any, appSchema],