@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/collageMaker/i18n/es.ts

@@ -0,0 +1,231 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { CollageMakerUI, CollageMakerLocaleContent } from '../index';
+
+const slug = 'creador-collage-fotos';
+const title = 'Creador de Collages Online - Diseña composiciones profesionales';
+const description = 'Crea collages de fotos gratis en segundos. Elige entre múltiples diseños, ajusta bordes y descarga en alta calidad sin marcas de agua.';
+
+const ui: CollageMakerUI = {
+    dropTitle: "Arrastra imágenes aquí",
+    dropSub: "o {link} · mín. 2, máx. 9",
+    dropLink: "selecciona archivos",
+    imgsLoaded: "Imágenes cargadas",
+    layoutLabel: "Diseño",
+    settingsLabel: "Ajustes",
+    borderLabel: "Borde",
+    borderColorLabel: "Color borde",
+    bgColorLabel: "Fondo",
+    downloadBtn: "Descargar",
+    previewTitle: "Vista previa",
+    needsImgs: "Necesitas {n} imágenes",
+    errorMin: "Necesitas al menos 2 imágenes",
+    errorMax: "Máximo 9 imágenes permitidas",
+    errorLoad: "Error al cargar las imágenes",
+};
+
+const faq: CollageMakerLocaleContent['faq'] = [
+    {
+        question: "¿Cómo puedo cambiar el orden de las fotos?",
+        answer: "Las fotos se colocan en el collage siguiendo el orden en que aparecen en la lista de imágenes cargadas. Puedes eliminar una y volver a subirla para ajustar su posición.",
+    },
+    {
+        question: "¿Qué formato de salida tiene el collage?",
+        answer: "El collage se descarga en formato WebP de alta resolución, ideal para compartir en redes sociales sin perder nitidez.",
+    },
+];
+
+const howTo: CollageMakerLocaleContent['howTo'] = [
+    {
+        name: "Sube tus fotos",
+        text: "Selecciona entre 2 y 9 imágenes desde tu explorador de archivos.",
+    },
+    {
+        name: "Elige un diseño",
+        text: "Selecciona la cuadrícula que mejor se adapte al número de fotos que has subido.",
+    },
+    {
+        name: "Personaliza el estilo",
+        text: "Ajusta el grosor y color del borde para darle un acabado profesional.",
+    },
+    {
+        name: "Descarga y comparte",
+        text: "Pulsa el botón de crear y descarga tu composición final al instante.",
+    },
+];
+
+const bibliography: CollageMakerLocaleContent['bibliography'] = [
+    {
+        name: "Composición Fotográfica: El Arte del Collage",
+        url: "https://es.wikipedia.org/wiki/Collage",
+    },
+];
+
+const seo: CollageMakerLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Creador de Collages Profesional Online',
+        items: [
+            'Múltiples diseños y cuadrículas predefinidas',
+            'Personalización de bordes y colores de fondo',
+            'Alta resolución 1200px lista para redes sociales',
+            'Procesamiento instantáneo sin límites de uso'
+        ]
+    },
+    { type: 'title', text: 'Diseño de Collages: Composiciones que Cuentan Historias', level: 2 },
+    { type: 'paragraph', html: 'Un collage es más que una mezcla de fotos; es una narrativa visual que comunica emoción y contexto. Nuestra herramienta permite crear composiciones geométricas profesionales para Instagram, Facebook, Pinterest o proyectos personales sin necesidad de Photoshop o software costoso.' },
+
+    { type: 'stats', items: [
+        { value: '2-9', label: 'Imágenes por Collage', icon: 'mdi:image-multiple' },
+        { value: '1200px', label: 'Resolución HD', icon: 'mdi:video-high-definition' },
+        { value: 'Instant', label: 'Generación', icon: 'mdi:lightning-bolt' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Composición Visual: Principios de Diseño', level: 3 },
+    { type: 'paragraph', html: 'La composición es el arte de organizar elementos visuales de forma que guíen la vista del espectador y comuniquen intención. Un buen collage equilibra:' },
+    { type: 'list', items: [
+        '<strong>Balance:</strong> Distribución visual de peso (imágenes claras vs oscuras, grandes vs pequeñas).',
+        '<strong>Flujo Visual:</strong> El ojo debe recorrer la composición de forma natural, sin puntos muertos.',
+        '<strong>Contraste:</strong> Variaciones en color, tamaño y forma que atrapan la atención.',
+        '<strong>Unidad:</strong> Coherencia temática - las imágenes deben "hablar juntas" sobre la misma historia.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Diseños Inteligentes y Adaptativos', html: 'Nuestro sistema calcula automáticamente la distribución óptima de espacio según el número de fotos. 2 imágenes = cuadrícula simétrica; 5 imágenes = distribución asimétrica equilibrada. Cada cuadrícula está diseñada para maximizar impacto visual.' },
+
+    { type: 'comparative', items: [
+        {
+            title: 'Para Redes Sociales',
+            description: 'Instagram, TikTok, Facebook - formatos cuadrados',
+            icon: 'mdi:share-all',
+            points: [
+                '1200px es perfecto para feed de Instagram',
+                'Formato cuadrado evita recortes al publicar',
+                'Bordes personalizables para marca'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Para Portafolios',
+            description: 'Vitrinas visuales de fotógrafos y diseñadores',
+            icon: 'mdi:briefcase-outline',
+            points: [
+                'Muestra múltiples ángulos de un proyecto',
+                'Narrativa visual coherente',
+                'Impresión profesional en libro digital'
+            ]
+        },
+        {
+            title: 'Para Regalos Personales',
+            description: 'Impresos, marcos y álbumes digitales',
+            icon: 'mdi:gift-outline',
+            points: [
+                'Recuerdos de eventos (bodas, viajes)',
+                'Alta resolución lista para imprimir',
+                'Diseño instantáneo sin esfuerzo manual'
+            ]
+        }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Personalización: Bordes y Colores', level: 3 },
+    { type: 'table', headers: ['Elemento', 'Efecto Visual', 'Recomendación'], rows: [
+        ['Borde Blanco', 'Limpio, minimalista, moderno', 'Redes sociales, portafolios digitales'],
+        ['Borde Negro', 'Dramático, profesional, artístico', 'Fotografía de arte, moda, lujo'],
+        ['Borde Neutro (gris)', 'Versátil, académico, corporate', 'Negocios, educación, neutralidad'],
+        ['Sin Borde', 'Fusión, continuidad, inmersivo', 'Fondo uniforme, fotos que fluyen']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Diseños predefinidos profesionales - no necesitas saber de composición',
+            con: 'Opciones limitadas a cuadrículas preestablecidas'
+        },
+        {
+            pro: 'Resolución 1200px lista para redes sociales sin reescalado',
+            con: 'No es tan personalizable como Photoshop'
+        },
+        {
+            pro: 'Procesamiento 100% local - privacidad, velocidad, sin límites',
+            con: 'Requiere navegador moderno'
+        },
+        {
+            pro: 'Totalmente gratuito, sin marcas de agua, sin publicidad',
+            con: 'Sin opciones de edición individual (recortes, rotación)'
+        }
+    ], proTitle: 'Ventajas', conTitle: 'Limitaciones' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Listo para Redes Sociales', icon: 'mdi:check-circle-outline', badge: 'Optimizado', html: '1200x1200px es la resolución ideal para Instagram. Soporta cualquier relación de aspecto, pero la salida cuadrada maximiza el impacto en feed, elimina recortes automáticos y se ve igual de bien en desktop, tablet y móvil.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Composición Visual',
+            definition: 'Arte de organizar elementos (color, forma, espacio) para guiar la vista del espectador y comunicar intención emocional.'
+        },
+        {
+            term: 'Regla de los Tercios',
+            definition: 'Principio de composición: divide la imagen en 9 áreas iguales (3x3). Posiciona sujetos en líneas de intersección para máximo impacto.'
+        },
+        {
+            term: 'Cuadrícula Simétrica',
+            definition: 'Divisiones iguales del espacio. Tranquilizante, ordenado. Ideal para pares de fotos o números pares.'
+        },
+        {
+            term: 'Cuadrícula Asimétrica',
+            definition: 'Divisiones desiguales. Dinámico, interesante, visual. Ideal para 5+ fotos con variedad de tamaños.'
+        },
+        {
+            term: 'Balance Visual',
+            definition: 'Equilibrio perceptual del peso visual. Imagen clara + oscura = balance; grande + pequeño = balance.'
+        }
+    ] },
+
+    { type: 'message', title: 'Narrativa Visual Instantánea', ariaLabel: 'Información sobre composición y collages', html: 'Cada collage cuenta una historia. Nuestro diseñador automático asegura que tus historias visuales sean balanceadas, profesionales y listas para el mundo. Sin esperar a que un diseñador gráfico haga el trabajo.' },
+
+    { type: 'title', text: 'Crea, Comparte, Inspira', level: 3 },
+    { type: 'paragraph', html: 'Un collage bien hecho es la diferencia entre un post olvidable y uno que tus seguidores recuerdan y comparten. Utiliza composición inteligente para que tus historias visuales impacten.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'es',
+};
+
+export const content: CollageMakerLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    faqTitle: 'Preguntas frecuentes sobre creación de collages',
+    bibliography,
+    bibliographyTitle: 'Recursos técnicos sobre composición visual',
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/collageMaker/i18n/fr.ts

@@ -0,0 +1,231 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { CollageMakerUI, CollageMakerLocaleContent } from '../index';
+
+const slug = 'createur-collage-photos-gratuit-compositions-professionnelles';
+const title = 'Créateur de Collages en Ligne - Concevez des compositions professionnelles';
+const description = 'Créez des collages de photos gratuitement en quelques secondes. Choisissez parmi plusieurs mises en page, ajustez les bordures et téléchargez en haute qualité sans filigrane.';
+
+const ui: CollageMakerUI = {
+    dropTitle: "Faites glisser les images ici",
+    dropSub: "ou {link} - min. 2, max. 9",
+    dropLink: "sélectionnez des fichiers",
+    imgsLoaded: "Images chargées",
+    layoutLabel: "Mise en page",
+    settingsLabel: "Paramètres",
+    borderLabel: "Bordure",
+    borderColorLabel: "Couleur bordure",
+    bgColorLabel: "Fond",
+    downloadBtn: "Télécharger",
+    previewTitle: "Aperçu",
+    needsImgs: "Vous avez besoin de {n} images",
+    errorMin: "Vous avez besoin d'au moins 2 images",
+    errorMax: "Maximum 9 images autorisées",
+    errorLoad: "Erreur lors du chargement des images",
+};
+
+const faq: CollageMakerLocaleContent['faq'] = [
+    {
+        question: "Comment puis-je changer l'ordre des photos ?",
+        answer: "Les photos sont placées dans le collage en suivant l'ordre dans lequel elles apparaissent dans la liste des images chargées. Vous pouvez en supprimer une et la télécharger à nouveau pour ajuster sa position.",
+    },
+    {
+        question: "Quel est le format de sortie du collage ?",
+        answer: "Le collage est téléchargé au format WebP haute résolution, idéal pour le partage sur les réseaux sociaux sans perte de netteté.",
+    },
+];
+
+const howTo: CollageMakerLocaleContent['howTo'] = [
+    {
+        name: "Importez vos photos",
+        text: "Sélectionnez entre 2 et 9 images depuis votre explorateur de fichiers.",
+    },
+    {
+        name: "Choisissez une mise en page",
+        text: "Sélectionnez la grille qui convient le mieux au nombre de photos que vous avez chargées.",
+    },
+    {
+        name: "Personnalisez le style",
+        text: "Ajustez l'épaisseur et la couleur de la bordure pour donner une finition professionnelle.",
+    },
+    {
+        name: "Téléchargez et partagez",
+        text: "Appuyez sur le bouton de création et téléchargez instantanément votre composition finale.",
+    },
+];
+
+const bibliography: CollageMakerLocaleContent['bibliography'] = [
+    {
+        name: "Composition Photographique : L'Art du Collage",
+        url: "https://fr.wikipedia.org/wiki/Collage",
+    },
+];
+
+const seo: CollageMakerLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Créateur de Collages Professionnel en Ligne',
+        items: [
+            'Plusieurs mises en page et grilles prédéfinies',
+            'Personnalisation des bordures et des couleurs de fond',
+            'Haute résolution 1200px prête pour les réseaux sociaux',
+            'Traitement instantané sans limites d\'utilisation'
+        ]
+    },
+    { type: 'title', text: 'Conception de Collages : Des Compositions qui Racontent des Histoires', level: 2 },
+    { type: 'paragraph', html: 'Un collage est plus qu\'un mélange de photos ; c\'est un récit visuel qui communique une émotion et un contexte. Notre outil permet de créer des compositions géométriques professionnelles pour Instagram, Facebook, Pinterest ou des projets personnels sans avoir besoin de Photoshop ou de logiciels coûteux.' },
+
+    { type: 'stats', items: [
+        { value: '2-9', label: 'Images par Collage', icon: 'mdi:image-multiple' },
+        { value: '1200px', label: 'Résolution HD', icon: 'mdi:video-high-definition' },
+        { value: 'Instantané', label: 'Génération', icon: 'mdi:lightning-bolt' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Composition Visuelle : Principes de Design', level: 3 },
+    { type: 'paragraph', html: 'La composition est l\'art d\'organiser les éléments visuels de manière à guider l\'œil du spectateur et à communiquer une intention. Un bon collage équilibre :' },
+    { type: 'list', items: [
+        '<strong>Équilibre :</strong> Distribution visuelle du poids (images claires vs sombres, grandes vs petites).',
+        '<strong>Flux Visuel :</strong> L\'œil doit parcourir la composition naturellement, sans points morts.',
+        '<strong>Contraste :</strong> Variations de couleur, de taille et de forme qui captent l\'attention.',
+        '<strong>Unité :</strong> Cohérence thématique - les images doivent "parler ensemble" de la même histoire.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Mises en Page Intelligentes et Adaptatives', html: 'Notre système calcule automatiquement la distribution optimale de l\'espace en fonction du nombre de photos. 2 images = grille symétrique ; 5 images = distribution asymétrique équilibrée. Chaque grille est conçue pour maximiser l\'impact visuel.' },
+
+    { type: 'comparative', items: [
+        {
+            title: 'Pour les Réseaux Sociaux',
+            description: 'Instagram, TikTok, Facebook - formats carrés',
+            icon: 'mdi:share-all',
+            points: [
+                '1200px est parfait pour le flux Instagram',
+                'Le format carré évite le recadrage lors de la publication',
+                'Bordures personnalisables pour le branding'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Pour les Portfolios',
+            description: 'Vitrines visuelles pour photographes et designers',
+            icon: 'mdi:briefcase-outline',
+            points: [
+                'Montrez plusieurs angles d\'un projet',
+                'Récit visuel cohérent',
+                'Impression professionnelle de livre numérique'
+            ]
+        },
+        {
+            title: 'Pour les Cadeaux Personnels',
+            description: 'Impressions, cadres et albums numériques',
+            icon: 'mdi:gift-outline',
+            points: [
+                'Souvenirs d\'événements (mariages, voyages)',
+                'Haute résolution prête à imprimer',
+                'Conception instantanée sans effort manuel'
+            ]
+        }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Personnalisation : Bordures et Couleurs', level: 3 },
+    { type: 'table', headers: ['Élément', 'Effet Visuel', 'Recommandation'], rows: [
+        ['Bordure Blanche', 'Propre, minimaliste, moderne', 'Réseaux sociaux, portfolios numériques'],
+        ['Bordure Noire', 'Dramatique, professionnel, artistique', 'Photographie d\'art, mode, luxe'],
+        ['Bordure Neutre (gris)', 'Polyvalent, académique, professionnel', 'Affaires, éducation, neutralité'],
+        ['Sans Bordure', 'Fusion, continuité, immersif', 'Fond uniforme, photos fluides']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Mises en page prédéfinies professionnelles - aucune connaissance en composition requise',
+            con: 'Options limitées aux grilles préétablies'
+        },
+        {
+            pro: 'Résolution 1200px prête pour les réseaux sociaux sans remise à l\'échelle',
+            con: 'Pas autant personnalisable que Photoshop'
+        },
+        {
+            pro: 'Traitement 100 % local - confidentialité, vitesse, sans limites',
+            con: 'Nécessite un navigateur moderne'
+        },
+        {
+            pro: 'Totalement gratuit, sans filigrane, sans publicité',
+            con: 'Pas d\'options d\'édition individuelles (recadrage, rotation)'
+        }
+    ], proTitle: 'Avantages', conTitle: 'Limitations' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Prêt pour les Réseaux Sociaux', icon: 'mdi:check-circle-outline', badge: 'Optimisé', html: '1200x1200px est la résolution idéale pour Instagram. Il prend en charge n\'importe quel rapport d\'aspect, mais la sortie carrée maximise l\'impact du flux, élimine le recadrage automatique et se présente tout aussi bien sur ordinateur, tablette et mobile.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Composition Visuelle',
+            definition: 'Art d\'organiser des éléments (couleur, forme, espace) pour guider l\'œil du spectateur et communiquer une intention émotionnelle.'
+        },
+        {
+            term: 'Règle des Tiers',
+            definition: 'Principe de composition : divise l\'image en 9 zones égales (3x3). Positionnez les sujets sur les lignes d\'intersection pour un impact maximal.'
+        },
+        {
+            term: 'Grille Symétrique',
+            definition: 'Divisions égales de l\'espace. Rassurant, ordonné. Idéal pour les paires de photos.'
+        },
+        {
+            term: 'Grille Asymétrique',
+            definition: 'Divisions inégales. Dynamique, intéressant, visuel. Idéal pour plus de 5 photos.'
+        },
+        {
+            term: 'Équilibre Visuel',
+            definition: 'Équilibre perceptuel du poids visuel. Image claire + sombre = équilibre ; grande + petite = équilibre.'
+        }
+    ] },
+
+    { type: 'message', title: 'Récit Visuel Instantané', ariaLabel: 'Informations sur la composition et les collages', html: 'Chaque collage raconte une histoire. Notre concepteur automatique garantit que vos histoires visuelles sont équilibrées, professionnelles et prêtes pour le monde. Sans attendre qu\'un graphiste fasse le travail.' },
+
+    { type: 'title', text: 'Créez, Partagez, Inspirez', level: 3 },
+    { type: 'paragraph', html: 'Un collage bien fait est la différence entre une publication oubliable et une autre dont vos abonnés se souviennent et qu\'ils partagent. Utilisez la composition intelligente pour que vos histoires visuelles marquent les esprits.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'fr',
+};
+
+export const content: CollageMakerLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Frequently Asked Questions",
+    faq,
+    bibliography,
+    bibliographyTitle: "References",
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/collageMaker/index.ts

@@ -0,0 +1,51 @@
+import type { AudiovisualToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import CollageMaker from './component.astro';
+import CollageMakerSEO from './seo.astro';
+import CollageMakerBibliography from './bibliography.astro';
+
+export interface CollageMakerUI {
+    dropTitle: string;
+    dropSub: string;
+    dropLink: string;
+    imgsLoaded: string;
+    layoutLabel: string;
+    settingsLabel: string;
+    borderLabel: string;
+    borderColorLabel: string;
+    bgColorLabel: string;
+    downloadBtn: string;
+    previewTitle: string;
+    needsImgs: string;
+    errorMin: string;
+    errorMax: string;
+    errorLoad: string;
+    [key: string]: string;
+}
+
+export type CollageMakerLocaleContent = ToolLocaleContent<CollageMakerUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const collageMaker: AudiovisualToolEntry<CollageMakerUI> = {
+    id: 'creador-collage-fotos',
+    icons: {
+        bg: 'mdi:collage',
+        fg: 'mdi:palette-outline',
+    },
+    i18n: {
+        es: async () => es as unknown as CollageMakerLocaleContent,
+        en: async () => en as unknown as CollageMakerLocaleContent,
+        fr: async () => fr as unknown as CollageMakerLocaleContent,
+    },
+};
+
+export { CollageMaker, CollageMakerSEO, CollageMakerBibliography };
+
+export const COLLAGE_MAKER_TOOL: ToolDefinition = {
+    entry: collageMaker as unknown as AudiovisualToolEntry,
+    Component: CollageMaker,
+    SEOComponent: CollageMakerSEO,
+    BibliographyComponent: CollageMakerBibliography,
+};

package/src/tool/collageMaker/logic.ts

@@ -0,0 +1,134 @@
+export interface CollageImageData {
+    src: string;
+    width: number;
+    height: number;
+    name: string;
+}
+
+export interface CollageLayout {
+    id: string;
+    imagesCount: number;
+    canvasWidth: number;
+    canvasHeight: number;
+    getPositions: (width: number, height: number, gap: number) => Array<[number, number, number, number]>;
+}
+
+export const COLLAGE_LAYOUTS: CollageLayout[] = [
+    {
+        id: "2x1",
+        imagesCount: 2,
+        canvasWidth: 800,
+        canvasHeight: 400,
+        getPositions: (w, h, g) => {
+            const cellW = (w - g * 3) / 2;
+            const cellH = h - g * 2;
+            return [
+                [g, g, cellW, cellH],
+                [g * 2 + cellW, g, cellW, cellH]
+            ];
+        }
+    },
+    {
+        id: "1x2",
+        imagesCount: 2,
+        canvasWidth: 400,
+        canvasHeight: 800,
+        getPositions: (w, h, g) => {
+            const cellW = w - g * 2;
+            const cellH = (h - g * 3) / 2;
+            return [
+                [g, g, cellW, cellH],
+                [g, g * 2 + cellH, cellW, cellH]
+            ];
+        }
+    },
+    {
+        id: "2x2",
+        imagesCount: 4,
+        canvasWidth: 800,
+        canvasHeight: 800,
+        getPositions: (w, _h, g) => {
+            const cellSize = (w - g * 3) / 2;
+            return [
+                [g, g, cellSize, cellSize],
+                [g * 2 + cellSize, g, cellSize, cellSize],
+                [g, g * 2 + cellSize, cellSize, cellSize],
+                [g * 2 + cellSize, g * 2 + cellSize, cellSize, cellSize]
+            ];
+        }
+    },
+    {
+        id: "3x3",
+        imagesCount: 9,
+        canvasWidth: 900,
+        canvasHeight: 900,
+        getPositions: (w, _h, g) => {
+            const cellSize = (w - g * 4) / 3;
+            const pos: Array<[number, number, number, number]> = [];
+            for (let r = 0; r < 3; r++) {
+                for (let c = 0; c < 3; c++) {
+                    pos.push([g * (c + 1) + cellSize * c, g * (r + 1) + cellSize * r, cellSize, cellSize]);
+                }
+            }
+            return pos;
+        }
+    }
+];
+
+interface CollageOptions {
+    borderWidth: number;
+    borderColor: string;
+    bgColor: string;
+}
+
+export async function drawCollage(
+    canvas: HTMLCanvasElement,
+    images: CollageImageData[],
+    layoutId: string,
+    options: CollageOptions
+): Promise<void> {
+    const { borderWidth, borderColor, bgColor } = options;
+    const layout = COLLAGE_LAYOUTS.find(l => l.id === layoutId);
+    if (!layout) throw new Error("Layout not found");
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas context not available");
+
+    canvas.width = layout.canvasWidth;
+    canvas.height = layout.canvasHeight;
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const positions = layout.getPositions(canvas.width, canvas.height, borderWidth);
+    const imagesToUse = images.slice(0, positions.length);
+
+    for (let i = 0; i < imagesToUse.length; i++) {
+        const pos = positions[i];
+        if (!pos) continue;
+        const [x, y, w, h] = pos;
+        await drawImageOnCanvas(ctx, imagesToUse[i].src, { x, y, w, h });
+
+        if (borderWidth > 0) {
+            ctx.strokeStyle = borderColor;
+            ctx.lineWidth = borderWidth;
+            ctx.strokeRect(x - borderWidth / 2, y - borderWidth / 2, w + borderWidth, h + borderWidth);
+        }
+    }
+}
+
+async function drawImageOnCanvas(
+    ctx: CanvasRenderingContext2D,
+    src: string,
+    rect: DrawRect
+): Promise<void> {
+    const { x, y, w, h } = rect;
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            ctx.drawImage(img, x, y, w, h);
+            resolve();
+        };
+        img.onerror = () => reject(new Error("Failed to draw image"));
+        img.src = src;
+    });
+}

package/src/tool/collageMaker/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { collageMaker } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await collageMaker.i18n[locale]?.();
+if (!content) return null;
+---
+
+<SEORenderer content={{ locale, sections: content.seo || [] }} />