@jjlmoya/utils-audiovisual 1.5.0 → 1.7.0

package/src/tool/collageMaker/component.astro

@@ -246,7 +246,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
     ctx.fillRect(0, 0, W, H);
     for (let i = 0; i < Math.min(images.length, pos.length); i++) {
       const p = pos[i]!;
-      await drawImage(ctx, images[i]!.src, p[0], p[1], p[2], p[3]);
+      await drawImage(ctx, images[i]!.src, { x: p[0], y: p[1], w: p[2], h: p[3] });
       if (gap > 0) { ctx.strokeStyle = bcInput.value; ctx.lineWidth = gap; ctx.strokeRect(p[0]-gap/2, p[1]-gap/2, p[2]+gap, p[3]+gap); }
     }
     canvas.style.display = '';
@@ -301,7 +301,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
 </script>
 
 <style>
-.cm-root {
+:global(.cm-root) {
   --cm-bg: #fff;
   --cm-bg-muted: #f8fafc;
   --cm-border: #e2e8f0;
@@ -317,7 +317,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   padding: 1rem;
 }
 
-:global(.theme-dark) .cm-root {
+:global(.theme-dark .cm-root) {
   --cm-bg: #1e293b;
   --cm-bg-muted: #0f172a;
   --cm-border: #334155;
@@ -328,7 +328,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   --cm-shadow: rgba(0,0,0,0.4);
 }
 
-.cm-card {
+:global(.cm-card) {
   background: var(--cm-bg);
   border: 1px solid var(--cm-border);
   border-radius: var(--cm-radius);
@@ -336,7 +336,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   overflow: hidden;
 }
 
-.cm-top-row {
+:global(.cm-top-row) {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 0;
@@ -348,7 +348,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   }
 }
 
-.cm-left-col {
+:global(.cm-left-col) {
   padding: 1.25rem;
   border-right: 1px solid var(--cm-border);
   display: flex;
@@ -363,7 +363,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   }
 }
 
-.cm-drop-zone {
+:global(.cm-drop-zone) {
   position: relative;
   background: var(--cm-bg-muted);
   border: 2px dashed var(--cm-border);
@@ -379,7 +379,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   color: var(--cm-primary);
 }
 
-.cm-drop-zone input[type="file"] {
+:global(.cm-drop-zone input[type="file"]) {
   position: absolute;
   inset: 0;
   opacity: 0;
@@ -388,32 +388,32 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   height: 100%;
 }
 
-.cm-drop-zone:hover,
-.cm-drop-zone-over {
+:global(.cm-drop-zone:hover),
+:global(.cm-drop-zone-over) {
   border-color: var(--cm-primary);
   background: var(--cm-primary-light);
 }
 
-.cm-drop-title {
+:global(.cm-drop-title) {
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--cm-text);
   margin: 0;
 }
 
-.cm-drop-sub {
+:global(.cm-drop-sub) {
   font-size: 0.75rem;
   color: var(--cm-text-muted);
   margin: 0;
 }
 
-.cm-drop-link {
+:global(.cm-drop-link) {
   color: var(--cm-primary);
   font-weight: 600;
   cursor: pointer;
 }
 
-.cm-section-label {
+:global(.cm-section-label) {
   display: block;
   font-size: 0.65rem;
   font-weight: 700;
@@ -422,13 +422,13 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   color: var(--cm-text-muted);
 }
 
-.cm-section-header {
+:global(.cm-section-header) {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.cm-badge {
+:global(.cm-badge) {
   background: var(--cm-primary-light);
   color: var(--cm-primary);
   font-size: 0.65rem;
@@ -437,14 +437,14 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   border-radius: 9999px;
 }
 
-.cm-thumbs {
+:global(.cm-thumbs) {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
   gap: 0.35rem;
   margin-top: 0.5rem;
 }
 
-.cm-thumb {
+:global(.cm-thumb) {
   position: relative;
   aspect-ratio: 1;
   border-radius: 0.4rem;
@@ -453,18 +453,18 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   transition: border-color 0.15s;
 }
 
-.cm-thumb:hover {
+:global(.cm-thumb:hover) {
   border-color: var(--cm-primary);
 }
 
-.cm-thumb img {
+:global(.cm-thumb img) {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
-.cm-thumb-num {
+:global(.cm-thumb-num) {
   position: absolute;
   bottom: 2px;
   left: 3px;
@@ -475,7 +475,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   line-height: 1;
 }
 
-.cm-thumb-del {
+:global(.cm-thumb-del) {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -493,15 +493,15 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   transition: background 0.15s;
 }
 
-.cm-thumb:hover .cm-thumb-del {
+:global(.cm-thumb:hover .cm-thumb-del) {
   display: flex;
 }
 
-.cm-thumb-del:hover {
+:global(.cm-thumb-del:hover) {
   background: #dc2626;
 }
 
-.cm-preview-col {
+:global(.cm-preview-col) {
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
@@ -509,7 +509,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   min-height: 260px;
 }
 
-.cm-preview-placeholder {
+:global(.cm-preview-placeholder) {
   flex: 1;
   background: var(--cm-bg-muted);
   border: 2px dashed var(--cm-border);
@@ -522,12 +522,12 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   color: var(--cm-text-muted);
 }
 
-.cm-preview-placeholder p {
+:global(.cm-preview-placeholder p) {
   font-size: 0.8rem;
   margin: 0;
 }
 
-.cm-canvas {
+:global(.cm-canvas) {
   width: 100%;
   height: auto;
   border-radius: 0.75rem;
@@ -535,7 +535,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   display: block;
 }
 
-.cm-dims-badge {
+:global(.cm-dims-badge) {
   font-size: 0.65rem;
   font-weight: 600;
   color: var(--cm-text-muted);
@@ -545,7 +545,7 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   padding: 0.15rem 0.5rem;
 }
 
-.cm-section-divider {
+:global(.cm-section-divider) {
   border-top: 1px solid var(--cm-border);
   padding: 1rem 1.25rem;
   display: flex;
@@ -553,13 +553,13 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   gap: 0.75rem;
 }
 
-.cm-layouts {
+:global(.cm-layouts) {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
   gap: 0.4rem;
 }
 
-.cm-layout-btn {
+:global(.cm-layout-btn) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -574,31 +574,31 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   position: relative;
 }
 
-.cm-layout-btn span {
+:global(.cm-layout-btn span) {
   font-size: 0.55rem;
   font-weight: 600;
   text-align: center;
   line-height: 1.2;
 }
 
-.cm-layout-btn:hover:not(:disabled) {
+:global(.cm-layout-btn:hover:not(:disabled)) {
   border-color: var(--cm-primary);
   color: var(--cm-primary);
   background: var(--cm-primary-light);
 }
 
-.cm-layout-btn-active {
+:global(.cm-layout-btn-active) {
   border-color: var(--cm-primary);
   background: var(--cm-primary-light);
   color: var(--cm-primary);
 }
 
-.cm-layout-btn-disabled {
+:global(.cm-layout-btn-disabled) {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
-.cm-layout-need {
+:global(.cm-layout-need) {
   position: absolute;
   top: 2px;
   right: 4px;
@@ -612,37 +612,37 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   line-height: 1.4;
 }
 
-.cm-settings-inline {
+:global(.cm-settings-inline) {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 1rem;
 }
 
-.cm-setting {
+:global(.cm-setting) {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
 }
 
-.cm-setting-label {
+:global(.cm-setting-label) {
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--cm-text-muted);
 }
 
-.cm-slider {
+:global(.cm-slider) {
   accent-color: var(--cm-primary);
   width: 120px;
 }
 
-.cm-color-row {
+:global(.cm-color-row) {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-.cm-color-swatch {
+:global(.cm-color-swatch) {
   width: 32px;
   height: 32px;
   border: 2px solid var(--cm-border);
@@ -652,14 +652,14 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   background: transparent;
 }
 
-.cm-color-code {
+:global(.cm-color-code) {
   font-size: 0.7rem;
   font-weight: 600;
   color: var(--cm-text-muted);
   font-variant-numeric: tabular-nums;
 }
 
-.cm-download-btn {
+:global(.cm-download-btn) {
   display: flex;
   align-items: center;
   gap: 0.4rem;
@@ -677,13 +677,13 @@ const dropSub = (ui.dropSub ?? '').replace('{link}', `<span class="cm-drop-link"
   margin-left: auto;
 }
 
-.cm-download-btn:disabled {
+:global(.cm-download-btn:disabled) {
   opacity: 0.4;
   cursor: not-allowed;
   box-shadow: none;
 }
 
-.cm-download-btn:not(:disabled):hover {
+:global(.cm-download-btn:not(:disabled):hover) {
   transform: translateY(-1px);
   box-shadow: 0 6px 18px rgba(99,102,241,0.4);
 }

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

@@ -2,7 +2,7 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 import type { CollageMakerUI, CollageMakerLocaleContent } from '../index';
 
 const slug = 'free-online-photo-collage-maker-professional-compositions';
-const title = 'Online Collage Maker - Design professional compositions';
+const title = 'Online Collage Maker: Design professional compositions';
 const description = 'Create photo collages for free in seconds. Choose from multiple layouts, adjust borders, and download in high quality without watermarks.';
 
 const ui: CollageMakerUI = {

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

@@ -2,7 +2,7 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 import type { CollageMakerUI, CollageMakerLocaleContent } from '../index';
 
 const slug = 'creador-collage-fotos';
-const title = 'Creador de Collages Online - Diseña composiciones profesionales';
+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 = {

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

@@ -2,7 +2,7 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 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 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 = {

package/src/tool/exifCleaner/component.astro

@@ -73,24 +73,24 @@ const { ui } = Astro.props;
   import { extractExif, createCleanImage } from './logic';
   import type { ExifCleanerUI } from './index';
 
-  function renderMetadata(tags: Record<string, string | number | boolean | undefined>, container: HTMLElement, riskTitle: string) {
-    const keys = Object.keys(tags);
-    if (keys.length === 0) {
-      container.innerHTML = '<div class="ec-no-metadata">No se encontraron metadatos.</div>';
-      return;
-    }
-    let html = `<div class="ec-metadata-title">${riskTitle}</div><ul class="ec-metadata-list">`;
-    if (tags.GPSLocation) html += `<li><span>GPS:</span> <span>${tags.GPSLocation}</span></li>`;
-    if (tags.Model) html += `<li><span>CÁMARA:</span> <span>${tags.Model}</span></li>`;
-    if (tags.DateTimeOriginal) html += `<li><span>FECHA:</span> <span>${tags.DateTimeOriginal}</span></li>`;
-    container.innerHTML = html + '</ul>';
-  }
-
   function init() {
     const root = document.getElementById('ec-root');
     if (!root) return;
 
     const ui = JSON.parse(root.dataset.ui ?? '{}') as ExifCleanerUI;
+
+    function renderMetadata(tags: Record<string, string | number | boolean | undefined>, container: HTMLElement, riskTitle: string) {
+      const keys = Object.keys(tags);
+      if (keys.length === 0) {
+        container.innerHTML = `<div class="ec-no-metadata">${ui.noMetadataFound}</div>`;
+        return;
+      }
+      let html = `<div class="ec-metadata-title">${riskTitle}</div><ul class="ec-metadata-list">`;
+      if (tags.GPSLocation) html += `<li><span>${ui.gpsLabel}</span> <span>${tags.GPSLocation}</span></li>`;
+      if (tags.Model) html += `<li><span>${ui.cameraLabel}</span> <span>${tags.Model}</span></li>`;
+      if (tags.DateTimeOriginal) html += `<li><span>${ui.dateLabel}</span> <span>${tags.DateTimeOriginal}</span></li>`;
+      container.innerHTML = html + '</ul>';
+    }
     const initial = root.querySelector('#ec-initial') as HTMLElement;
     const processing = root.querySelector('#ec-processing') as HTMLElement;
     const result = root.querySelector('#ec-result') as HTMLElement;
@@ -114,6 +114,7 @@ const { ui } = Astro.props;
           const blob = await createCleanImage(img);
 
           downloadBtn.onclick = () => {
+            if (!blob) return;
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
@@ -161,7 +162,7 @@ const { ui } = Astro.props;
 </script>
 
 <style>
-.ec-root {
+:global(.ec-root) {
   --ec-bg: #fff;
   --ec-bg-elevated: #f8fafc;
   --ec-border: #e2e8f0;
@@ -177,7 +178,7 @@ const { ui } = Astro.props;
   margin: 0 auto;
 }
 
-:global(.theme-dark) .ec-root {
+:global(.theme-dark .ec-root) {
   --ec-bg: #18181b;
   --ec-bg-elevated: #27272a;
   --ec-border: #3f3f46;
@@ -189,7 +190,7 @@ const { ui } = Astro.props;
   --ec-shadow: rgba(0, 0, 0, 0.3);
 }
 
-.ec-card {
+:global(.ec-card) {
   background: var(--ec-bg);
   border: 1px solid var(--ec-border);
   border-radius: 3rem;
@@ -199,7 +200,7 @@ const { ui } = Astro.props;
   overflow: hidden;
 }
 
-.ec-drop {
+:global(.ec-drop) {
   padding: 4rem 2rem;
   border: 3px dashed var(--ec-border);
   border-radius: 2.5rem;
@@ -212,13 +213,13 @@ const { ui } = Astro.props;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.ec-drop:hover,
-.ec-drop-active {
+:global(.ec-drop:hover),
+:global(.ec-drop-active) {
   border-color: var(--ec-accent);
   background: var(--ec-accent-alpha-hover);
 }
 
-.ec-drop-icon {
+:global(.ec-drop-icon) {
   width: 6rem;
   height: 6rem;
   background: var(--ec-accent-alpha);
@@ -229,19 +230,19 @@ const { ui } = Astro.props;
   color: var(--ec-accent);
 }
 
-.ec-drop-icon svg {
+:global(.ec-drop-icon svg) {
   width: 3rem;
   height: 3rem;
 }
 
-.ec-title {
+:global(.ec-title) {
   font-size: 2.5rem;
   font-weight: 950;
   color: var(--ec-text);
   margin: 0;
 }
 
-.ec-subtitle {
+:global(.ec-subtitle) {
   font-size: 1.15rem;
   color: var(--ec-text-muted);
   max-width: 500px;
@@ -249,14 +250,14 @@ const { ui } = Astro.props;
   font-weight: 700;
 }
 
-.ec-badges {
+:global(.ec-badges) {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
 }
 
-.ec-badge {
+:global(.ec-badge) {
   padding: 0.6rem 1.25rem;
   background: var(--ec-bg-elevated);
   border-radius: 2rem;
@@ -268,13 +269,13 @@ const { ui } = Astro.props;
   gap: 0.5rem;
 }
 
-.ec-badge svg {
+:global(.ec-badge svg) {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
 
-.ec-processing {
+:global(.ec-processing) {
   padding: 5rem;
   display: flex;
   flex-direction: column;
@@ -283,7 +284,7 @@ const { ui } = Astro.props;
   gap: 1.5rem;
 }
 
-.ec-spinner {
+:global(.ec-spinner) {
   width: 4rem;
   height: 4rem;
   border: 4px solid var(--ec-accent-alpha);
@@ -292,45 +293,45 @@ const { ui } = Astro.props;
   animation: ec-spin 0.8s linear infinite;
 }
 
-.ec-processing-text {
+:global(.ec-processing-text) {
   font-weight: 800;
   color: var(--ec-text);
   margin: 0;
 }
 
-.ec-result {
+:global(.ec-result) {
   padding: 2.5rem;
   display: flex;
   flex-direction: column;
   animation: ec-slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.ec-result-layout {
+:global(.ec-result-layout) {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
 }
 
 @media (max-width: 800px) {
-  .ec-result-layout {
+  :global(.ec-result-layout) {
     grid-template-columns: 1fr;
   }
 }
 
-.ec-preview-col {
+:global(.ec-preview-col) {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.ec-preview-img {
+:global(.ec-preview-img) {
   width: 100%;
   border-radius: 1.5rem;
   box-shadow: 0 20px 50px var(--ec-shadow);
   display: block;
 }
 
-.ec-metadata {
+:global(.ec-metadata) {
   background: var(--ec-bg-elevated);
   border: 1px solid var(--ec-border);
   border-radius: 1.25rem;
@@ -341,7 +342,7 @@ const { ui } = Astro.props;
   justify-content: center;
 }
 
-.ec-no-metadata {
+:global(.ec-no-metadata) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -350,14 +351,14 @@ const { ui } = Astro.props;
   text-align: center;
 }
 
-.ec-metadata-title {
+:global(.ec-metadata-title) {
   color: var(--ec-accent);
   font-weight: 700;
   margin-bottom: 1rem;
   font-size: 0.9rem;
 }
 
-.ec-metadata-list {
+:global(.ec-metadata-list) {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -366,7 +367,7 @@ const { ui } = Astro.props;
   gap: 0.75rem;
 }
 
-.ec-metadata-list li {
+:global(.ec-metadata-list li) {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
@@ -375,21 +376,21 @@ const { ui } = Astro.props;
   color: var(--ec-text);
 }
 
-.ec-metadata-list li span:first-child {
+:global(.ec-metadata-list li span:first-child) {
   font-weight: 700;
 }
 
-.ec-metadata-list li span:last-child {
+:global(.ec-metadata-list li span:last-child) {
   color: var(--ec-text-muted);
 }
 
-.ec-actions-col {
+:global(.ec-actions-col) {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.ec-btn {
+:global(.ec-btn) {
   padding: 1.25rem;
   border-radius: 1.5rem;
   font-weight: 950;
@@ -403,29 +404,29 @@ const { ui } = Astro.props;
   transition: all 0.2s;
 }
 
-.ec-btn svg {
+:global(.ec-btn svg) {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.ec-btn-primary {
+:global(.ec-btn-primary) {
   background: var(--ec-accent);
   color: #fff;
   box-shadow: 0 15px 35px -10px var(--ec-accent);
 }
 
-.ec-btn-primary:hover {
+:global(.ec-btn-primary:hover) {
   transform: translateY(-2px);
   box-shadow: 0 20px 45px -10px var(--ec-accent);
 }
 
-.ec-btn-secondary {
+:global(.ec-btn-secondary) {
   background: var(--ec-bg-elevated);
   border: 1px solid var(--ec-border);
   color: var(--ec-text);
 }
 
-.ec-btn-secondary:hover {
+:global(.ec-btn-secondary:hover) {
   border-color: var(--ec-accent);
   color: var(--ec-accent);
 }