@jjlmoya/utils-audiovisual 1.5.0 → 1.7.0

package/src/tool/tvDistance/component.astro

@@ -177,7 +177,7 @@ const { ui } = Astro.props;
 </script>
 
 <style>
-.tvd-root {
+:global(.tvd-root) {
   --tvd-bg: #fff;
   --tvd-bg-muted: #f8fafc;
   --tvd-bg-sim: #f1f5f9;
@@ -195,7 +195,7 @@ const { ui } = Astro.props;
   padding: 1rem;
 }
 
-:global(.theme-dark) .tvd-root {
+:global(.theme-dark .tvd-root) {
   --tvd-bg: #09090b;
   --tvd-bg-muted: #18181b;
   --tvd-bg-sim: #09090b;
@@ -208,7 +208,7 @@ const { ui } = Astro.props;
   --tvd-shadow: rgba(0,0,0,0.4);
 }
 
-.tvd-card {
+:global(.tvd-card) {
   background: var(--tvd-bg);
   border: 1px solid var(--tvd-border);
   border-radius: var(--tvd-radius);
@@ -216,18 +216,18 @@ const { ui } = Astro.props;
   overflow: hidden;
 }
 
-.tvd-body {
+:global(.tvd-body) {
   display: grid;
   grid-template-columns: 320px 1fr;
 }
 
 @media (max-width: 720px) {
-  .tvd-body {
+  :global(.tvd-body) {
     grid-template-columns: 1fr;
   }
 }
 
-.tvd-left {
+:global(.tvd-left) {
   padding: 1.75rem;
   border-right: 1px solid var(--tvd-border);
   display: flex;
@@ -236,20 +236,20 @@ const { ui } = Astro.props;
 }
 
 @media (max-width: 720px) {
-  .tvd-left {
+  :global(.tvd-left) {
     border-right: none;
     border-bottom: 1px solid var(--tvd-border);
   }
 }
 
-.tvd-specs-block {
+:global(.tvd-specs-block) {
   background: var(--tvd-bg);
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.tvd-specs-title {
+:global(.tvd-specs-title) {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -259,14 +259,14 @@ const { ui } = Astro.props;
   margin: 0 0 0.25rem;
 }
 
-.tvd-tv-icon {
+:global(.tvd-tv-icon) {
   width: 1.25rem;
   height: 1.25rem;
   fill: var(--tvd-primary);
   flex-shrink: 0;
 }
 
-.tvd-label {
+:global(.tvd-label) {
   font-size: 0.65rem;
   font-weight: 800;
   text-transform: uppercase;
@@ -274,25 +274,25 @@ const { ui } = Astro.props;
   color: var(--tvd-text-muted);
 }
 
-.tvd-field {
+:global(.tvd-field) {
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
 }
 
-.tvd-field-row {
+:global(.tvd-field-row) {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.tvd-diagonal-val {
+:global(.tvd-diagonal-val) {
   font-size: 0.85rem;
   font-weight: 800;
   color: var(--tvd-primary);
 }
 
-.tvd-slider {
+:global(.tvd-slider) {
   width: 100%;
   height: 6px;
   accent-color: var(--tvd-primary);
@@ -300,13 +300,13 @@ const { ui } = Astro.props;
   border-radius: 9999px;
 }
 
-.tvd-res-grid {
+:global(.tvd-res-grid) {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.5rem;
 }
 
-.tvd-res-btn {
+:global(.tvd-res-btn) {
   padding: 0.625rem 0.25rem;
   border-radius: 0.75rem;
   border: 1px solid var(--tvd-border);
@@ -318,19 +318,19 @@ const { ui } = Astro.props;
   transition: all 0.2s;
 }
 
-.tvd-res-btn:hover:not(.tvd-res-btn-active) {
+:global(.tvd-res-btn:hover:not(.tvd-res-btn-active)) {
   border-color: var(--tvd-primary);
   opacity: 0.7;
 }
 
-.tvd-res-btn-active {
+:global(.tvd-res-btn-active) {
   background: var(--tvd-primary);
   color: #fff;
   border-color: var(--tvd-primary);
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
 }
 
-.tvd-thx-block {
+:global(.tvd-thx-block) {
   background: var(--tvd-primary-light);
   border: 1px solid var(--tvd-primary-border);
   border-radius: 1rem;
@@ -340,26 +340,26 @@ const { ui } = Astro.props;
   gap: 0.625rem;
 }
 
-.tvd-thx-header {
+:global(.tvd-thx-header) {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-.tvd-thx-icon {
+:global(.tvd-thx-icon) {
   width: 1.125rem;
   height: 1.125rem;
   fill: var(--tvd-primary);
   flex-shrink: 0;
 }
 
-.tvd-thx-title {
+:global(.tvd-thx-title) {
   font-size: 0.8rem;
   font-weight: 800;
   color: var(--tvd-primary);
 }
 
-.tvd-thx-desc {
+:global(.tvd-thx-desc) {
   font-size: 0.75rem;
   line-height: 1.6;
   color: var(--tvd-primary);
@@ -367,20 +367,20 @@ const { ui } = Astro.props;
   margin: 0;
 }
 
-.tvd-right {
+:global(.tvd-right) {
   display: flex;
   flex-direction: column;
   background: var(--tvd-bg);
 }
 
-.tvd-sim-badge {
+:global(.tvd-sim-badge) {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 1.25rem 1.5rem 0;
 }
 
-.tvd-sim-dot {
+:global(.tvd-sim-dot) {
   width: 8px;
   height: 8px;
   border-radius: 50%;
@@ -393,7 +393,7 @@ const { ui } = Astro.props;
   50% { opacity: 0.4; }
 }
 
-.tvd-sim-badge-text {
+:global(.tvd-sim-badge-text) {
   font-size: 0.6rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -401,7 +401,7 @@ const { ui } = Astro.props;
   color: var(--tvd-text-muted);
 }
 
-.tvd-sim-area {
+:global(.tvd-sim-area) {
   flex: 1;
   background: var(--tvd-bg-sim);
   display: flex;
@@ -413,7 +413,7 @@ const { ui } = Astro.props;
   min-height: 400px;
 }
 
-.tvd-tv-visual {
+:global(.tvd-tv-visual) {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -421,7 +421,7 @@ const { ui } = Astro.props;
   transition: width 0.5s ease;
 }
 
-.tvd-tv-screen {
+:global(.tvd-tv-screen) {
   background: #0a0a0f;
   border: 3px solid #27272a;
   border-radius: 0.5rem;
@@ -435,13 +435,13 @@ const { ui } = Astro.props;
   box-shadow: 0 20px 50px rgba(0,0,0,0.3);
 }
 
-.tvd-screen-gradient {
+:global(.tvd-screen-gradient) {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, transparent 60%);
 }
 
-.tvd-screen-ghost {
+:global(.tvd-screen-ghost) {
   width: 30%;
   height: 30%;
   fill: rgba(96,165,250,0.2);
@@ -449,27 +449,27 @@ const { ui } = Astro.props;
   z-index: 1;
 }
 
-.tvd-screen-inset {
+:global(.tvd-screen-inset) {
   position: absolute;
   inset: 0;
   box-shadow: inset 0 0 40px rgba(59,130,246,0.08);
 }
 
-.tvd-stand-neck {
+:global(.tvd-stand-neck) {
   width: 16px;
   height: 16px;
   background: #27272a;
   margin-top: -1px;
 }
 
-.tvd-stand-base {
+:global(.tvd-stand-base) {
   width: 70px;
   height: 6px;
   background: #27272a;
   border-radius: 3px;
 }
 
-.tvd-tv-tooltip {
+:global(.tvd-tv-tooltip) {
   position: absolute;
   top: -2.25rem;
   left: 50%;
@@ -486,37 +486,37 @@ const { ui } = Astro.props;
   pointer-events: none;
 }
 
-.tvd-tv-visual:hover .tvd-tv-tooltip {
+:global(.tvd-tv-visual:hover .tvd-tv-tooltip) {
   opacity: 1;
 }
 
-.tvd-distance-line {
+:global(.tvd-distance-line) {
   width: 1px;
   position: relative;
   transition: height 0.5s ease;
   margin: 0.25rem 0;
 }
 
-.tvd-line-dashed {
+:global(.tvd-line-dashed) {
   width: 100%;
   height: 100%;
   border-left: 1px dashed rgba(59,130,246,0.4);
 }
 
-.tvd-person {
+:global(.tvd-person) {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
 }
 
-.tvd-person-inner {
+:global(.tvd-person-inner) {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.tvd-person-head {
+:global(.tvd-person-head) {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
@@ -526,7 +526,7 @@ const { ui } = Astro.props;
   margin-bottom: 0.25rem;
 }
 
-.tvd-person-body {
+:global(.tvd-person-body) {
   width: 4rem;
   height: 2rem;
   background: var(--tvd-primary);
@@ -534,7 +534,7 @@ const { ui } = Astro.props;
   box-shadow: 0 4px 16px rgba(37,99,235,0.3);
 }
 
-.tvd-location-card {
+:global(.tvd-location-card) {
   background: var(--tvd-bg);
   border: 1px solid var(--tvd-border);
   border-radius: 1rem;
@@ -546,7 +546,7 @@ const { ui } = Astro.props;
   box-shadow: 0 4px 16px var(--tvd-shadow);
 }
 
-.tvd-location-label {
+:global(.tvd-location-label) {
   font-size: 0.6rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -554,14 +554,14 @@ const { ui } = Astro.props;
   color: var(--tvd-text-muted);
 }
 
-.tvd-location-val {
+:global(.tvd-location-val) {
   font-size: 1.25rem;
   font-weight: 900;
   color: var(--tvd-primary);
   line-height: 1;
 }
 
-.tvd-stats {
+:global(.tvd-stats) {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 0.5rem;
@@ -570,7 +570,7 @@ const { ui } = Astro.props;
   border-top: 1px solid var(--tvd-border);
 }
 
-.tvd-stat {
+:global(.tvd-stat) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -580,17 +580,17 @@ const { ui } = Astro.props;
   transition: background 0.2s;
 }
 
-.tvd-stat:hover {
+:global(.tvd-stat:hover) {
   background: var(--tvd-bg);
 }
 
-.tvd-stat-opt {
+:global(.tvd-stat-opt) {
   background: var(--tvd-bg);
   border: 1px solid var(--tvd-border);
   box-shadow: 0 2px 8px var(--tvd-shadow);
 }
 
-.tvd-stat-label {
+:global(.tvd-stat-label) {
   font-size: 0.6rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -598,17 +598,17 @@ const { ui } = Astro.props;
   color: var(--tvd-text-muted);
 }
 
-.tvd-stat-opt .tvd-stat-label {
+:global(.tvd-stat-opt .tvd-stat-label) {
   color: var(--tvd-primary);
 }
 
-.tvd-stat-val {
+:global(.tvd-stat-val) {
   font-size: 1.2rem;
   font-weight: 900;
   color: var(--tvd-text);
 }
 
-.tvd-stat-opt .tvd-stat-val {
+:global(.tvd-stat-opt .tvd-stat-val) {
   font-size: 1.75rem;
   color: var(--tvd-primary);
 }

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

@@ -2,7 +2,7 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 import type { TvDistanceUI, TvDistanceLocaleContent } from '../index';
 
 const slug = 'tv-viewing-distance-calculator-thx-4k-optimal-screen';
-const title = 'TV Distance Calculator - THX and 4K Optimal Screen';
+const title = 'TV Distance Calculator: THX and 4K Optimal Screen';
 const description = 'Calculate the ideal distance to watch your television based on its size and resolution. Optimize your Home Cinema with THX and SMPTE standards.';
 
 const ui: TvDistanceUI = {

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

@@ -2,7 +2,7 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 import type { TvDistanceUI, TvDistanceLocaleContent } from '../index';
 
 const slug = 'distancia-tv';
-const title = 'Calculadora de Distancia TV - Pantalla Óptima THX y 4K';
+const title = 'Calculadora de Distancia TV: Pantalla Óptima THX y 4K';
 const description = 'Calcula la distancia ideal para ver tu televisor según su tamaño y resolución. Optimiza tu Home Cinema con los estándares THX y SMPTE.';
 
 const ui: TvDistanceUI = {

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

@@ -2,7 +2,7 @@ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dt
 import type { TvDistanceUI, TvDistanceLocaleContent } from '../index';
 
 const slug = 'calculatrice-distance-tv-ecran-optimal-thx-4k';
-const title = 'Calculatrice de Distance TV - Écran Optimal THX et 4K';
+const title = 'Calculatrice de Distance TV: Écran Optimal THX et 4K';
 const description = 'Calculez la distance idéale pour regarder votre téléviseur en fonction de sa taille et de sa résolution. Optimisez votre Home Cinéma avec les standards THX et SMPTE.';
 
 const ui: TvDistanceUI = {