@jjlmoya/utils-audiovisual 1.2.0

package/src/pages/[locale].astro

@@ -0,0 +1,251 @@
+---
+import PreviewLayout from '../layouts/PreviewLayout.astro';
+import PreviewNavSidebar from '../components/PreviewNavSidebar.astro';
+import { audiovisualCategory, ALL_TOOLS } from '../index';
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale, ToolLocaleContent } from '../types';
+
+export async function getStaticPaths() {
+  const locales = ['en', 'es', 'fr'] as KnownLocale[];
+  return locales.map(locale => ({ params: { locale } }));
+}
+
+const { locale: currentLocale } = Astro.params as { locale: KnownLocale };
+
+const categoryContent = await audiovisualCategory.i18n[currentLocale]!();
+
+const tools = ALL_TOOLS || [];
+
+const toolsWithContent = tools.length > 0
+  ? await Promise.all(
+      tools.map(async ({ entry, Component }) => {
+        const languages = Object.keys(entry.i18n);
+        const localeEntries = await Promise.all(
+          languages.map(async (l) => {
+            const content = await entry.i18n[l as KnownLocale]!();
+            return [l, content];
+          })
+        );
+
+        const localeContents = Object.fromEntries(localeEntries) as Record<string, ToolLocaleContent<Record<string, string>>>;
+
+        const currentLocaleContent = localeContents[currentLocale] || localeContents['en'] || localeContents['es'];
+        const availableLocales: Record<string, string> = {};
+
+        for (const l of languages) {
+          const lCont = localeContents[l];
+          if (lCont) {
+            availableLocales[l] = `/${l}/${lCont.slug}`;
+          }
+        }
+
+        return { entry, Component, locale: currentLocaleContent, availableLocales };
+      })
+    )
+  : [];
+---
+
+<PreviewLayout
+  title={categoryContent.title}
+  currentLocale={currentLocale}
+  hasSidebar={true}
+>
+  <PreviewNavSidebar
+    slot="sidebar"
+    categoryTitle={categoryContent.title}
+    tools={toolsWithContent.map(({ entry, locale, availableLocales }) => {
+      const href = availableLocales[currentLocale] || (locale ? `/${currentLocale}/${locale.slug}` : '#');
+      return {
+        id: entry.id,
+        title: locale?.title || entry.id,
+        href: href,
+      };
+    })}
+  />
+  <div class="dashboard">
+    <header class="preview-header">
+      <span class="badge">preview · @jjlmoya/utils-template</span>
+      <h1>{categoryContent.title}</h1>
+      <p>{categoryContent.description}</p>
+    </header>
+
+    <div class="tool-list">
+      {toolsWithContent?.map(({ entry, locale, availableLocales }) => (
+        <article class="tool-card">
+          <a href={availableLocales?.[currentLocale] || (locale ? `/${currentLocale}/${locale.slug}` : '#')} class="tool-card-link">
+            <div class="tool-icons">
+               <div class="icon-wrapper bg">
+                  <Icon name={entry.icons.bg} />
+               </div>
+               <div class="icon-wrapper fg">
+                  <Icon name={entry.icons.fg} />
+               </div>
+            </div>
+            <div class="tool-card-content">
+              <h2 class="tool-title">{locale?.title}</h2>
+              <p class="tool-description">{locale?.description}</p>
+            </div>
+            <div class="tool-card-meta">
+              <span class="tool-id">{entry.id}</span>
+            </div>
+          </a>
+
+          {availableLocales && Object.keys(availableLocales).length > 1 && (
+            <div class="tool-locales">
+              {Object.entries(availableLocales).map(([l, url]) => (
+                <a href={url} class="locale-badge" title={`Ver en ${l.toUpperCase()}`} class:list={{ active: l === currentLocale }}>
+                  {l.toUpperCase()}
+                </a>
+              ))}
+            </div>
+          )}
+        </article>
+      ))}
+    </div>
+  </div>
+</PreviewLayout>
+
+<style>
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+  }
+  .preview-header {
+    text-align: center;
+    padding-bottom: 3rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+  .badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: var(--accent);
+    border-radius: 99px;
+    font-size: 0.7rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: var(--text-base);
+    letter-spacing: 0.05em;
+  }
+  h1 {
+    font-size: clamp(2rem, 6vw, 3.5rem);
+    font-weight: 900;
+    margin: 0 0 1rem;
+    background: linear-gradient(to bottom, var(--text-base), var(--text-muted));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  .preview-header p {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+    margin: 0;
+  }
+  .tool-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 2rem;
+  }
+  .tool-card {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .tool-card-link {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+  .tool-card-link:hover {
+    border-color: var(--accent);
+    background: rgba(244, 63, 94, 0.05);
+    transform: translateY(-2px);
+  }
+  .tool-icons {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.25rem;
+  }
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.5rem;
+    font-size: 1.5rem;
+  }
+  .icon-wrapper.bg {
+    background: var(--accent);
+    color: var(--text-base);
+  }
+  .icon-wrapper.fg {
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    color: var(--accent);
+  }
+  .tool-card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .tool-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem;
+    color: var(--text-base);
+  }
+  .tool-description {
+    font-size: 0.9375rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin: 0;
+  }
+  .tool-card-meta {
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+    margin-top: 1.5rem;
+  }
+  .tool-id {
+    display: inline-block;
+    font-size: 0.7rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    padding: 0.35rem 0.75rem;
+    border-radius: 0.4rem;
+    color: var(--accent);
+    font-weight: 600;
+  }
+  .tool-locales {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .locale-badge {
+    display: inline-block;
+    padding: 0.4rem 0.85rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 0.4rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: all 0.15s ease;
+  }
+  .locale-badge:hover,
+  .locale-badge.active {
+    color: var(--accent);
+    border-color: var(--accent);
+    background: rgba(244, 63, 94, 0.1);
+  }
+</style>

package/src/pages/index.astro

@@ -0,0 +1,4 @@
+---
+---
+<meta http-equiv="refresh" content="0;url=/es" />
+

package/src/tests/faq_count.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import type * as DATA from '../data';
+
+const TOOLS: typeof DATA.audiovisualCategory[] = [];
+
+describe('FAQ Content Validation', () => {
+  TOOLS.forEach((entry) => {
+    describe(`Tool: ${entry.icon}`, () => {
+      it('placeholder', () => {
+        expect(true).toBe(true);
+      });
+    });
+  });
+
+  it('no tools registered yet', () => {
+    expect(TOOLS.length).toBe(0);
+  });
+});
+

package/src/tests/locale_completeness.test.ts

@@ -0,0 +1,42 @@
+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);
+  });
+});
+

package/src/tests/mocks/astro_mock.js

@@ -0,0 +1,2 @@
+export default function () { return null; }
+

package/src/tests/no_h1_in_components.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+const EXCLUDED_DIRS = ['node_modules', 'pages', 'layouts'];
+
+function findAstroFiles(dir: string): string[] {
+  const files: string[] = [];
+  const entries = readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory() && !EXCLUDED_DIRS.includes(entry.name)) {
+      files.push(...findAstroFiles(fullPath));
+    } else if (entry.isFile() && entry.name.endsWith('.astro')) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+function hasH1(content: string): boolean {
+  return /<h1[\s>]/i.test(content);
+}
+
+const srcDir = join(process.cwd(), 'src');
+const astroFiles = findAstroFiles(srcDir);
+
+describe('No H1 in Components', () => {
+  if (astroFiles.length === 0) {
+    it('no astro components found', () => {
+      expect(true).toBe(true);
+    });
+  }
+
+  astroFiles.forEach((file) => {
+    const relativePath = file.replace(process.cwd(), '');
+    it(`${relativePath} should not contain <h1>`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasH1(content),
+        `File "${relativePath}" contains a <h1> element. Use <h2> or lower inside components — h1 belongs to the page layout.`,
+      ).toBe(false);
+    });
+  });
+});
+

package/src/tests/seo_length.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import * as DATA from '../data';
+
+const ENTRIES = [
+  { id: 'audiovisualCategory', i18n: DATA.audiovisualCategory.i18n },
+];
+
+describe('SEO Content Length Validation', () => {
+  ENTRIES.forEach((entry) => {
+    describe(`Tool: ${entry.id}`, () => {
+      Object.keys(entry.i18n).forEach((locale) => {
+        it(`${locale}: SEO section should exist`, async () => {
+          const loader = (entry.i18n as Record<string, () => Promise<{ seo?: unknown[] }>>)[locale];
+          const content = await loader();
+          if (!content.seo) return;
+          expect(Array.isArray(content.seo)).toBe(true);
+        });
+      });
+    });
+  });
+});
+

package/src/tests/tool_validation.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+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('audiovisualCategory should be defined', () => {
+      expect(audiovisualCategory).toBeDefined();
+      expect(audiovisualCategory.i18n).toBeDefined();
+    });
+  });
+});
+

package/src/tool/chromaticLens/bibliography.astro

@@ -0,0 +1,17 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { chromaticLens } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await chromaticLens.i18n[locale]?.();
+if (!content || !content.bibliography || content.bibliography.length === 0) return null;
+
+const { bibliography, bibliographyTitle = 'Bibliografía' } = content;
+---
+
+<SharedBibliography title={bibliographyTitle} links={bibliography} />

package/src/tool/chromaticLens/component.astro

@@ -0,0 +1,178 @@
+---
+import type { ChromaticLensUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: ChromaticLensUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="cl-root" id="cl-root" data-ui={JSON.stringify(ui)}>
+  <div class="cl-card">
+
+    <div id="cl-empty" class="cl-drop">
+      <input type="file" id="cl-file" accept="image/*" class="cl-hidden" />
+      <div class="cl-drop-icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
+        </svg>
+      </div>
+      <h3 class="cl-drop-title">{ui.dropTitle}</h3>
+      <p class="cl-drop-sub">{ui.dropSubtitle}</p>
+    </div>
+
+    <div id="cl-workspace" class="cl-workspace cl-hidden">
+      <div id="cl-mini-drop" class="cl-mini-drop">
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+        </svg>
+        <span>{ui.changeImage}</span>
+      </div>
+
+      <div class="cl-config-bar">
+        <div class="cl-config-item">
+          <span class="cl-config-label">{ui.colorCountLabel}</span>
+          <select id="cl-count" class="cl-count-select">
+            <option value="5">5</option>
+            <option value="8" selected>8</option>
+            <option value="12">12</option>
+            <option value="16">16</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="cl-result-layout">
+        <div class="cl-preview-col">
+          <img id="cl-preview" class="cl-preview-img" src="#" alt="" />
+        </div>
+
+        <div class="cl-palette-col">
+          <div class="cl-palette-header">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M3 3h4v4H3zm0 7h4v4H3zm0 7h4v4H3zm7-14h11v2H10zm0 7h11v2H10zm0 7h11v2H10z"/>
+            </svg>
+            <h4>{ui.paletteTitle}</h4>
+          </div>
+          <div id="cl-loader" class="cl-loader cl-hidden">
+            <div class="cl-spinner"></div>
+            <p class="cl-loader-text">{ui.processingLabel}</p>
+          </div>
+          <div id="cl-swatches" class="cl-swatches"></div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+  import { extractPalette } from './logic';
+  import type { ColorSwatch } from './logic';
+  import type { ChromaticLensUI } from './index';
+
+  function init() {
+    const root = document.getElementById('cl-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui ?? '{}') as ChromaticLensUI;
+    const canvas = document.createElement('canvas');
+    const ctxRaw = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctxRaw) return;
+    const ctx = ctxRaw;
+
+    const fileInput = root.querySelector('#cl-file') as HTMLInputElement;
+    const emptyState = root.querySelector('#cl-empty') as HTMLElement;
+    const workspace = root.querySelector('#cl-workspace') as HTMLElement;
+    const miniDrop = root.querySelector('#cl-mini-drop') as HTMLElement;
+    const preview = root.querySelector('#cl-preview') as HTMLImageElement;
+    const countSelect = root.querySelector('#cl-count') as HTMLSelectElement;
+    const loader = root.querySelector('#cl-loader') as HTMLElement;
+    const swatches = root.querySelector('#cl-swatches') as HTMLElement;
+
+    let currentImageData: Uint8ClampedArray | null = null;
+    let isProcessing = false;
+
+    function renderPalette(palette: ColorSwatch[]) {
+      swatches.innerHTML = '';
+      palette.forEach((item) => {
+        const el = document.createElement('div');
+        el.className = 'cl-swatch';
+        el.innerHTML = `
+          <div class="cl-swatch-color" style="background-color:${item.hex}"></div>
+          <div class="cl-swatch-info">
+            <span class="cl-swatch-hex">${item.hex}</span>
+            <span class="cl-swatch-action">${labels.copyLabel}</span>
+          </div>
+        `;
+        el.addEventListener('click', () => {
+          navigator.clipboard.writeText(item.hex);
+          const action = el.querySelector('.cl-swatch-action') as HTMLElement;
+          const prev = action.textContent;
+          action.textContent = labels.copiedLabel;
+          el.classList.add('cl-swatch-copied');
+          setTimeout(() => {
+            action.textContent = prev;
+            el.classList.remove('cl-swatch-copied');
+          }, 2000);
+        });
+        swatches.appendChild(el);
+      });
+    }
+
+    function processPalette() {
+      if (!currentImageData || isProcessing) return;
+      isProcessing = true;
+      loader.classList.remove('cl-hidden');
+      swatches.classList.add('cl-hidden');
+      const count = parseInt(countSelect.value);
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          const palette = extractPalette(currentImageData!, count);
+          renderPalette(palette);
+          loader.classList.add('cl-hidden');
+          swatches.classList.remove('cl-hidden');
+          isProcessing = false;
+        }, 50);
+      });
+    }
+
+    function handleFile(file: File) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          canvas.width = img.naturalWidth;
+          canvas.height = img.naturalHeight;
+          ctx.drawImage(img, 0, 0);
+          currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+          preview.src = img.src;
+          emptyState.classList.add('cl-hidden');
+          workspace.classList.remove('cl-hidden');
+          processPalette();
+        };
+        img.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+
+    emptyState.addEventListener('click', () => fileInput.click());
+    miniDrop.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files?.[0]) handleFile(fileInput.files[0]);
+    });
+    countSelect.addEventListener('change', processPalette);
+
+    root.addEventListener('dragover', (e) => { e.preventDefault(); emptyState.classList.add('cl-drop-active'); });
+    root.addEventListener('dragleave', () => emptyState.classList.remove('cl-drop-active'));
+    root.addEventListener('drop', (e) => {
+      e.preventDefault();
+      emptyState.classList.remove('cl-drop-active');
+      if (e.dataTransfer?.files[0]) handleFile(e.dataTransfer.files[0]);
+    });
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>