@jjlmoya/utils-creative 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jjlmoya/utils-creative",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/tool/bead-pattern-generator/component.astro

@@ -1,4 +1,11 @@
 ---
+import type { BeadPatternGeneratorUI } from './index';
+
+interface Props {
+  ui: BeadPatternGeneratorUI;
+}
+
+const { ui } = Astro.props;
 ---
 
 <div class="bead-wrapper">
@@ -8,13 +15,13 @@
         <div class="bead-inner">
             <div class="bead-header">
                 <div class="bead-header-title">
-                    <h2>Laboratorio de Patrones</h2>
-                    <p>Ingeniería de color para tus manos</p>
+                    <h2>{ui.title}</h2>
+                    <p>{ui.subtitle}</p>
                 </div>
 
                 <div class="bead-controls">
                     <div class="bead-control-group">
-                        <label class="bead-control-label">Tamaño (Ancho)</label>
+                        <label class="bead-control-label">{ui.gridSizeLabel}</label>
                         <div class="bead-slider-row">
                             <input type="range" id="grid-width" min="10" max="100" value="40" class="bead-slider bead-slider-pink" />
                             <span id="grid-width-value" class="bead-slider-val bead-val-pink">40</span>
@@ -22,7 +29,7 @@
                     </div>
 
                     <div class="bead-control-group">
-                        <label class="bead-control-label">Colores</label>
+                        <label class="bead-control-label">{ui.colorCountLabel}</label>
                         <div class="bead-slider-row">
                             <input type="range" id="color-count" min="2" max="32" value="12" class="bead-slider bead-slider-purple" />
                             <span id="color-count-value" class="bead-slider-val bead-val-purple">12</span>
@@ -30,16 +37,16 @@
                     </div>
 
                     <div class="bead-control-group">
-                        <label class="bead-control-label">Opciones</label>
+                        <label class="bead-control-label">{ui.optionsLabel}</label>
                         <div class="bead-options-row">
                             <label class="bead-checkbox-label">
                                 <input type="checkbox" id="show-rulers" class="bead-checkbox" />
-                                <span>Reglas</span>
+                                <span>{ui.rulersLabel}</span>
                             </label>
                             <div class="bead-divider"></div>
-                            <label class="bead-checkbox-label" title="Patrón Sorpresa">
+                            <label class="bead-checkbox-label" title={ui.symbolsTooltip}>
                                 <input type="checkbox" id="show-symbols" class="bead-checkbox" />
-                                <span>Símbolos</span>
+                                <span>{ui.symbolsLabel}</span>
                             </label>
                         </div>
                     </div>
@@ -48,7 +55,7 @@
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                         </svg>
-                        <span>Descargar</span>
+                        <span>{ui.downloadBtn}</span>
                     </button>
                 </div>
             </div>
@@ -62,21 +69,21 @@
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                             </svg>
                         </div>
-                        <h3>Carga tu Visión</h3>
-                        <p>y deja que la magia digital ocurra</p>
+                        <h3>{ui.uploadTitle}</h3>
+                        <p>{ui.uploadSubtitle}</p>
                     </div>
                 </div>
 
                 <div id="result-area" class="bead-result bead-hidden">
                     <div class="bead-result-inner">
                         <div class="bead-palette-col">
-                            <h3 class="bead-palette-title">ADN Cromático</h3>
+                            <h3 class="bead-palette-title">{ui.paletteTitle}</h3>
                             <div id="palette-grid" class="bead-palette-grid"></div>
                             <button id="reupload-btn" class="bead-reupload-btn">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                 </svg>
-                                Cambiar Imagen
+                                {ui.reuploadBtn}
                             </button>
                         </div>
                         <div class="bead-canvas-col">
@@ -86,8 +93,8 @@
 
                     <div class="bead-tunnel-bar">
                         <div>
-                            <h3 class="bead-tunnel-title">Visión de Túnel</h3>
-                            <p class="bead-tunnel-sub">Tu asistente de precisión fila por fila.</p>
+                            <h3 class="bead-tunnel-title">{ui.tunnelVisionTitle}</h3>
+                            <p class="bead-tunnel-sub">{ui.tunnelVisionSubtitle}</p>
                         </div>
                         <div class="bead-tunnel-controls">
                             <button id="focus-prev" class="bead-tunnel-btn">▲</button>
@@ -590,6 +597,7 @@
     min-height: 25rem;
     display: flex;
     flex-direction: column;
+    gap: 3rem;
   }
 
   .bead-drop-zone {
@@ -716,13 +724,13 @@
     gap: 0.5rem;
   }
 
-  .bead-palette-item {
+  :global(.bead-palette-item) {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
-  .bead-color-swatch {
+  :global(.bead-color-swatch) {
     width: 100%;
     aspect-ratio: 1;
     border-radius: 50%;
@@ -734,21 +742,21 @@
     justify-content: center;
   }
 
-  :global(.theme-dark) .bead-color-swatch {
+  :global(.theme-dark .bead-color-swatch) {
     border-color: #1f2937;
     outline-color: #374151;
   }
 
-  .bead-symbol {
+  :global(.bead-symbol) {
     font-size: 0.75rem;
     font-weight: 700;
     user-select: none;
   }
-  .bead-symbol-dark {
+  :global(.bead-symbol-dark) {
     color: #000;
   }
 
-  .bead-symbol-light {
+  :global(.bead-symbol-light) {
     color: #fff;
   }
 

package/src/tool/bead-pattern-generator/i18n/en.ts

@@ -7,12 +7,24 @@ export const content: BeadPatternGeneratorLocaleContent = {
   faqTitle: 'Frequently Asked Questions',
   bibliographyTitle: 'Artisan Bibliography',
   ui: {
-    title: 'Pattern Generator',
+    title: 'Pattern Laboratory',
+    subtitle: 'Color engineering for your hands',
     description: 'From photo to bead scheme.',
+    gridSizeLabel: 'Size (Width)',
+    colorCountLabel: 'Colors',
+    optionsLabel: 'Options',
+    rulersLabel: 'Rulers',
+    symbolsTooltip: 'Surprise Pattern',
+    symbolsLabel: 'Symbols',
+    downloadBtn: 'Download',
+    uploadTitle: 'Upload Your Vision',
+    uploadSubtitle: 'and let the digital magic happen',
+    paletteTitle: 'Chromatic DNA',
+    reuploadBtn: 'Change Image',
+    tunnelVisionTitle: 'Tunnel Vision',
+    tunnelVisionSubtitle: 'Your precision assistant row by row.',
     uploadLabel: 'Upload your photo',
-    gridSizeLabel: 'Grid size (beads)',
     pixelateBtn: 'Generate Pattern',
-    downloadBtn: 'Download Scheme',
     faqTitle: 'FAQ',
     bibliographyTitle: 'References'
   },

package/src/tool/bead-pattern-generator/i18n/es.ts

@@ -7,12 +7,24 @@ export const content: BeadPatternGeneratorLocaleContent = {
   faqTitle: 'Preguntas Frecuentes',
   bibliographyTitle: 'Bibliografía del Artesano',
   ui: {
-    title: 'Generador de Patrones',
+    title: 'Laboratorio de Patrones',
+    subtitle: 'Ingeniería de color para tus manos',
     description: 'De fotografía a esquema de cuentas.',
+    gridSizeLabel: 'Tamaño (Ancho)',
+    colorCountLabel: 'Colores',
+    optionsLabel: 'Opciones',
+    rulersLabel: 'Reglas',
+    symbolsTooltip: 'Patrón Sorpresa',
+    symbolsLabel: 'Símbolos',
+    downloadBtn: 'Descargar',
+    uploadTitle: 'Carga tu Visión',
+    uploadSubtitle: 'y deja que la magia digital ocurra',
+    paletteTitle: 'ADN Cromático',
+    reuploadBtn: 'Cambiar Imagen',
+    tunnelVisionTitle: 'Visión de Túnel',
+    tunnelVisionSubtitle: 'Tu asistente de precisión fila por fila.',
     uploadLabel: 'Sube tu foto',
-    gridSizeLabel: 'Tamaño de la cuadrícula (beads)',
     pixelateBtn: 'Generar Patrón',
-    downloadBtn: 'Descargar Esquema',
     faqTitle: 'FAQ',
     bibliographyTitle: 'Referencias'
   },

package/src/tool/bead-pattern-generator/i18n/fr.ts

@@ -7,12 +7,24 @@ export const content: BeadPatternGeneratorLocaleContent = {
   faqTitle: 'Questions Fréquemment Posées',
   bibliographyTitle: 'Bibliographie de l\'Artisan',
   ui: {
-    title: 'Générateur de Modèles',
+    title: 'Laboratoire de Modèles',
+    subtitle: 'Ingénierie chromatique pour vos mains',
     description: 'De la photo au schéma de perles.',
+    gridSizeLabel: 'Taille (Largeur)',
+    colorCountLabel: 'Couleurs',
+    optionsLabel: 'Options',
+    rulersLabel: 'Règles',
+    symbolsTooltip: 'Motif Surprise',
+    symbolsLabel: 'Symboles',
+    downloadBtn: 'Télécharger',
+    uploadTitle: 'Chargez Votre Vision',
+    uploadSubtitle: 'et laissez la magie numérique opérer',
+    paletteTitle: 'ADN Chromatique',
+    reuploadBtn: 'Changer l\'Image',
+    tunnelVisionTitle: 'Vision de Tunnel',
+    tunnelVisionSubtitle: 'Votre assistant de précision rangée par rangée.',
     uploadLabel: 'Chargez votre photo',
-    gridSizeLabel: 'Taille de grille (perles)',
     pixelateBtn: 'Générer le Modèle',
-    downloadBtn: 'Télécharger le Schéma',
     faqTitle: 'FAQ',
     bibliographyTitle: 'Références'
   },

package/src/tool/bead-pattern-generator/index.ts

@@ -7,10 +7,22 @@ export interface BeadPatternGeneratorUI {
   [key: string]: string;
   title: string;
   description: string;
-  uploadLabel: string;
+  subtitle: string;
   gridSizeLabel: string;
-  pixelateBtn: string;
+  colorCountLabel: string;
+  optionsLabel: string;
+  rulersLabel: string;
+  symbolsTooltip: string;
+  symbolsLabel: string;
   downloadBtn: string;
+  uploadTitle: string;
+  uploadSubtitle: string;
+  paletteTitle: string;
+  reuploadBtn: string;
+  tunnelVisionTitle: string;
+  tunnelVisionSubtitle: string;
+  uploadLabel: string;
+  pixelateBtn: string;
   faqTitle: string;
   bibliographyTitle: string;
 }

package/src/tool/dice-roller/component.astro

@@ -1,11 +1,18 @@
 ---
+import type { DiceRollerUI } from './index';
+
+interface Props {
+  ui: DiceRollerUI;
+}
+
+const { ui } = Astro.props;
 ---
 
-<div id="dice-roller-root" class="dr-root">
+<div id="dice-roller-root" class="dr-root" data-ui={JSON.stringify(ui)}>
   <div class="dr-panel">
 
     <div class="dr-selector">
-      <p class="dr-label">Añadir dados a la bolsa</p>
+      <p class="dr-label">{ui.addDiceLabel}</p>
       <div class="dr-dice-grid">
         <button class="dr-die-btn" data-sides="4">d4</button>
         <button class="dr-die-btn" data-sides="6">d6</button>
@@ -19,16 +26,16 @@
 
     <div class="dr-pool-section">
       <div class="dr-pool-header">
-        <p class="dr-label">Bolsa de dados</p>
-        <button id="dr-clear-pool" class="dr-clear-btn">Vaciar</button>
+        <p class="dr-label">{ui.bagLabel}</p>
+        <button id="dr-clear-pool" class="dr-clear-btn">{ui.emptyBagBtn}</button>
       </div>
       <div id="dr-pool" class="dr-pool-display">
-        <span class="dr-pool-empty">Haz clic en los dados para añadirlos</span>
+        <span class="dr-pool-empty">{ui.emptyBagText}</span>
       </div>
     </div>
 
     <div class="dr-modifier-section">
-      <label class="dr-label" for="dr-modifier">Modificador</label>
+      <label class="dr-label" for="dr-modifier">{ui.modifierLabel}</label>
       <div class="dr-modifier-controls">
         <button id="dr-mod-dec" class="dr-mod-btn">−</button>
         <span id="dr-modifier-val" class="dr-modifier-display">0</span>
@@ -37,7 +44,7 @@
     </div>
 
     <button id="dr-roll-btn" class="dr-roll-btn" disabled>
-      <span id="dr-roll-text">Lanzar dados</span>
+      <span id="dr-roll-text">{ui.rollBtn}</span>
     </button>
 
   </div>
@@ -46,11 +53,11 @@
 
     <div class="dr-result-card" id="dr-result-card">
       <div class="dr-result-empty" id="dr-result-empty">
-        <p>Añade dados y lanza</p>
+        <p>{ui.preRollText}</p>
       </div>
       <div class="dr-result-content" id="dr-result-content" style="display:none">
         <div class="dr-total-area">
-          <span class="dr-total-label">Total</span>
+          <span class="dr-total-label">{ui.totalLabel}</span>
           <span id="dr-total" class="dr-total-val">0</span>
           <span id="dr-roll-expr" class="dr-roll-expr"></span>
         </div>
@@ -60,11 +67,11 @@
 
     <div class="dr-history-section">
       <div class="dr-history-header">
-        <span class="dr-label">Historial</span>
-        <button id="dr-clear-history" class="dr-clear-btn">Limpiar</button>
+        <span class="dr-label">{ui.historyLabel}</span>
+        <button id="dr-clear-history" class="dr-clear-btn">{ui.clearHistoryBtn}</button>
       </div>
       <div id="dr-history-list" class="dr-history-list">
-        <p class="dr-history-empty">El historial de tiradas aparecerá aquí</p>
+        <p class="dr-history-empty">{ui.emptyHistoryText}</p>
       </div>
     </div>
 
@@ -72,6 +79,10 @@
 </div>
 
 <script>
+  import type { DiceRollerUI } from './index';
+  const root = document.getElementById('dice-roller-root') as HTMLElement;
+  const ui = JSON.parse(root.dataset.ui || '{}') as DiceRollerUI;
+
   type Pool = { sides: number; count: number }[];
 
   let pool: Pool = [];
@@ -94,9 +105,9 @@
 
   function renderPool(): void {
     if (pool.length === 0) {
-      poolDisplay.innerHTML = '<span class="dr-pool-empty">Haz clic en los dados para añadirlos</span>';
+      poolDisplay.innerHTML = `<span class="dr-pool-empty">${ui.emptyBagText}</span>`;
       rollBtn.disabled = true;
-      rollText.textContent = 'Lanzar dados';
+      rollText.textContent = ui.rollBtn;
       return;
     }
 
@@ -106,14 +117,15 @@
       chip.className = 'dr-pool-chip';
       chip.innerHTML = `
         <span class="dr-chip-label">${count}d${sides}</span>
-        <button class="dr-chip-remove" data-sides="${sides}" title="Quitar un d${sides}">−</button>
+        <button class="dr-chip-remove" data-sides="${sides}">−</button>
       `;
       poolDisplay.appendChild(chip);
     });
 
     const total = poolTotal();
     rollBtn.disabled = false;
-    rollText.textContent = `Lanzar ${total} dado${total !== 1 ? 's' : ''}`;
+    const label = total === 1 ? ui.rollOneLabel : ui.rollManyLabel;
+    rollText.textContent = label.replace('$COUNT', total.toString());
   }
 
   function addDie(sides: number): void {
@@ -224,7 +236,7 @@
   rollBtn.addEventListener('click', rollAll);
 
   document.getElementById('dr-clear-history')?.addEventListener('click', () => {
-    historyList.innerHTML = '<p class="dr-history-empty">El historial de tiradas aparecerá aquí</p>';
+    historyList.innerHTML = `<p class="dr-history-empty">${ui.emptyHistoryText}</p>`;
   });
 </script>
 
@@ -378,7 +390,7 @@
   font-style: italic;
 }
 
-.dr-pool-chip {
+:global(.dr-pool-chip) {
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -388,13 +400,13 @@
   padding: 0.2rem 0.5rem 0.2rem 0.75rem;
 }
 
-.dr-chip-label {
+:global(.dr-chip-label) {
   font-size: 0.8rem;
   font-weight: 700;
   color: var(--dr-primary);
 }
 
-.dr-chip-remove {
+:global(.dr-chip-remove) {
   width: 1.125rem;
   height: 1.125rem;
   border-radius: 50%;
@@ -411,7 +423,7 @@
   padding: 0;
 }
 
-.dr-chip-remove:hover {
+:global(.dr-chip-remove:hover) {
   background: var(--dr-primary-dark);
 }
 
@@ -581,7 +593,7 @@
   justify-content: center;
 }
 
-.dr-result-pip {
+:global(.dr-result-pip) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -594,24 +606,24 @@
   transition: border-color 0.2s;
 }
 
-.dr-pip-max {
+:global(.dr-pip-max) {
   border-color: var(--dr-success);
   background: rgba(16, 185, 129, 0.1);
 }
 
-.dr-pip-min {
+:global(.dr-pip-min) {
   border-color: var(--dr-danger);
   background: rgba(239, 68, 68, 0.1);
 }
 
-.dr-pip-val {
+:global(.dr-pip-val) {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--dr-text);
   line-height: 1;
 }
 
-.dr-pip-die {
+:global(.dr-pip-die) {
   font-size: 0.65rem;
   color: var(--dr-text-muted);
   font-weight: 600;
@@ -662,7 +674,7 @@
   margin: 1rem 0;
 }
 
-.dr-history-item {
+:global(.dr-history-item) {
   display: grid;
   grid-template-columns: 1fr auto auto;
   align-items: center;
@@ -686,7 +698,7 @@
   }
 }
 
-.dr-hist-expr {
+:global(.dr-hist-expr) {
   color: var(--dr-text-muted);
   font-size: 0.75rem;
   overflow: hidden;
@@ -694,13 +706,13 @@
   white-space: nowrap;
 }
 
-.dr-hist-result {
+:global(.dr-hist-result) {
   font-weight: 800;
   font-size: 1rem;
   color: var(--dr-primary);
 }
 
-.dr-hist-time {
+:global(.dr-hist-time) {
   font-size: 0.7rem;
   color: var(--dr-text-muted);
 }

package/src/tool/dice-roller/i18n/en.ts

@@ -14,7 +14,16 @@ export const content: DiceRollerLocaleContent = {
     historyLabel: 'History',
     clearHistoryBtn: 'Clear History',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'References'
+    bibliographyTitle: 'References',
+    addDiceLabel: 'Add dice to the bag',
+    bagLabel: 'Dice bag',
+    emptyBagBtn: 'Empty',
+    emptyBagText: 'Click the dice to add them',
+    modifierLabel: 'Modifier',
+    rollManyLabel: 'Roll $COUNT dice',
+    rollOneLabel: 'Roll $COUNT die',
+    preRollText: 'Add dice and roll',
+    emptyHistoryText: 'Roll history will appear here'
   },
   seo: [
     { type: 'title', text: 'The Art of Randomness: History and Mathematics of Dice', level: 2 },

package/src/tool/dice-roller/i18n/es.ts

@@ -14,7 +14,16 @@ export const content: DiceRollerLocaleContent = {
     historyLabel: 'Historial',
     clearHistoryBtn: 'Limpiar Historial',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Referencias'
+    bibliographyTitle: 'Referencias',
+    addDiceLabel: 'Añadir dados a la bolsa',
+    bagLabel: 'Bolsa de dados',
+    emptyBagBtn: 'Vaciar',
+    emptyBagText: 'Haz clic en los dados para añadirlos',
+    modifierLabel: 'Modificador',
+    rollManyLabel: 'Lanzar $COUNT dados',
+    rollOneLabel: 'Lanzar $COUNT dado',
+    preRollText: 'Añade dados y lanza',
+    emptyHistoryText: 'El historial de tiradas aparecerá aquí'
   },
   seo: [
     { type: 'title', text: 'El arte de la aleatoriedad: historia y matemáticas de los dados', level: 2 },

package/src/tool/dice-roller/i18n/fr.ts

@@ -14,7 +14,16 @@ export const content: DiceRollerLocaleContent = {
     historyLabel: 'Historique',
     clearHistoryBtn: 'Effacer l\'historique',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Références'
+    bibliographyTitle: 'Références',
+    addDiceLabel: 'Ajouter des dés au sac',
+    bagLabel: 'Sac de dés',
+    emptyBagBtn: 'Vider',
+    emptyBagText: 'Cliquez sur les dés pour les ajouter',
+    modifierLabel: 'Modificateur',
+    rollManyLabel: 'Lancer $COUNT dés',
+    rollOneLabel: 'Lancer $COUNT dé',
+    preRollText: 'Ajoutez des dés et lancez',
+    emptyHistoryText: 'L\'historique des lancers apparaîtra ici'
   },
   seo: [
     { type: 'title', text: 'L\'Art du Hasard : Histoire et Mathématiques des Dés', level: 2 },

package/src/tool/dice-roller/index.ts

@@ -13,6 +13,15 @@ export interface DiceRollerUI {
   clearHistoryBtn: string;
   faqTitle: string;
   bibliographyTitle: string;
+  addDiceLabel: string;
+  bagLabel: string;
+  emptyBagBtn: string;
+  emptyBagText: string;
+  modifierLabel: string;
+  rollManyLabel: string;
+  rollOneLabel: string;
+  preRollText: string;
+  emptyHistoryText: string;
 }
 
 export type DiceRollerLocaleContent = ToolLocaleContent<DiceRollerUI>;

package/src/tool/fortune-cookie/component.astro

@@ -470,25 +470,35 @@ const ASSETS = {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.5);
-  width: 75%;
-  max-width: 280px;
+  width: 85%;
+  max-width: 320px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.2),
+    0 4px 6px -2px rgba(0, 0, 0, 0.1),
+    inset 0 0 20px rgba(0, 0, 0, 0.05);
   opacity: 0;
   transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 1000ms;
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition-duration: 800ms;
   z-index: 0;
+  overflow: hidden;
 }
 
 .fortune-cookie-paper.visible {
   opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1) rotate(-1deg);
   z-index: 20;
 }
 
 .fortune-cookie-paper-img {
   width: 100%;
-  filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
-  transform: rotate(1deg);
+  height: auto;
+  display: block;
+  opacity: 0.15;
+  pointer-events: none;
+  mix-blend-mode: multiply;
 }
 
 .fortune-cookie-paper-content {
@@ -498,23 +508,24 @@ const ASSETS = {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  padding: 1.5rem;
   text-align: center;
+  z-index: 10;
 }
 
 .fortune-cookie-text {
-  color: #0f172a;
-  font-weight: 900;
+  color: #1e293b;
+  font-weight: 800;
   font-size: 1.125rem;
-  line-height: 1.25;
+  line-height: 1.4;
   transform: rotate(-1deg);
   user-select: text;
+  margin: 0;
 }
 
 @media (min-width: 768px) {
   .fortune-cookie-text {
     font-size: 1.25rem;
-    line-height: 1.75rem;
   }
 }
 
@@ -527,12 +538,12 @@ const ASSETS = {
   transform: rotate(-1deg);
 }
 
-.fortune-cookie-number {
+:global(.fortune-cookie-number) {
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 700;
-  background-color: rgba(255, 255, 255, 0.9);
-  color: #450a0a;
+  background-color: #f1f5f9;
+  color: #dc2626;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-top: 0.125rem;
@@ -621,7 +632,7 @@ const ASSETS = {
   40%, 60% { transform: translate3d(4px, 0, 0) rotate(4deg); }
 }
 
-.fortune-cookie-crumb {
+:global(.fortune-cookie-crumb) {
   position: absolute;
   width: 20px;
   height: 20px;

package/src/tool/synesthesia-painter/component.astro

@@ -282,7 +282,7 @@ const { ui } = Astro.props;
   color: #ef4444;
 }
 
-.synesthesia-painter-char {
+:global(.synesthesia-painter-char) {
   display: inline-block;
   color: var(--char-color);
   transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -301,7 +301,7 @@ const { ui } = Astro.props;
   }
 }
 
-.synesthesia-painter-viz-layer.dots .synesthesia-painter-char {
+:global(.synesthesia-painter-viz-layer.dots .synesthesia-painter-char) {
   color: transparent;
   font-size: 0;
   width: 1rem;
@@ -312,17 +312,17 @@ const { ui } = Astro.props;
   box-shadow: 0 0 8px var(--char-color);
 }
 
-.synesthesia-painter-viz-layer.aura .synesthesia-painter-char {
+:global(.synesthesia-painter-viz-layer.aura .synesthesia-painter-char) {
   color: rgba(255, 255, 255, 0.15);
   text-shadow: 0 0 18px var(--char-color), 0 0 36px var(--char-color);
 }
 
-:global(.theme-dark) .synesthesia-painter-viz-layer.aura .synesthesia-painter-char {
+:global(.theme-dark .synesthesia-painter-viz-layer.aura .synesthesia-painter-char) {
   color: rgba(255, 255, 255, 0.85);
   text-shadow: 0 0 14px var(--char-color), 0 0 28px var(--char-color), 0 0 56px var(--char-color);
 }
 
-.synesthesia-painter-cursor {
+:global(.synesthesia-painter-cursor) {
   display: inline-block;
   width: 2px;
   height: 2.5rem;

package/src/tool/zalgo-generator/component.astro

@@ -1,21 +1,28 @@
 ---
 import { Icon } from 'astro-icon/components';
+import type { ZalgoGeneratorUI } from './index';
+
+interface Props {
+    ui: ZalgoGeneratorUI;
+}
+
+const { ui } = Astro.props;
 ---
 
-<section class="zg-section">
+<section class="zg-section" id="zalgo-generator-root" data-ui={JSON.stringify(ui)}>
     <div class="zg-grid">
         <div class="zg-left">
             <div class="zg-config-card">
                 <div class="zg-config-hover-bg"></div>
                 <h3 class="zg-config-title">
                     <Icon name="mdi:tune-variant" style="width:1.25rem;height:1.25rem;color:#9333ea" />
-                    Configuración
+                    {ui.configTitle}
                 </h3>
 
                 <div class="zg-config-body">
                     <div class="zg-field">
                         <div class="zg-field-header">
-                            <label class="zg-field-label">Intensidad</label>
+                            <label class="zg-field-label">{ui.intensity}</label>
                             <span id="intensity-value" class="zg-intensity-val">50%</span>
                         </div>
                         <input type="range" id="intensity-slider" min="0.1" max="1.5" step="0.1" value="0.5" class="zg-slider" />
@@ -23,21 +30,21 @@ import { Icon } from 'astro-icon/components';
 
                     <div class="zg-toggles">
                         <label class="zg-toggle-row">
-                            <span class="zg-toggle-label">Corrupción Superior</span>
+                            <span class="zg-toggle-label">{ui.upLabel}</span>
                             <div class="zg-switch">
                                 <input type="checkbox" id="opt-up" checked class="zg-switch-input" />
                                 <div class="zg-switch-track"></div>
                             </div>
                         </label>
                         <label class="zg-toggle-row">
-                            <span class="zg-toggle-label">Ruido Central</span>
+                            <span class="zg-toggle-label">{ui.midLabel}</span>
                             <div class="zg-switch">
                                 <input type="checkbox" id="opt-middle" checked class="zg-switch-input" />
                                 <div class="zg-switch-track"></div>
                             </div>
                         </label>
                         <label class="zg-toggle-row">
-                            <span class="zg-toggle-label">Corrupción Inferior</span>
+                            <span class="zg-toggle-label">{ui.downLabel}</span>
                             <div class="zg-switch">
                                 <input type="checkbox" id="opt-down" checked class="zg-switch-input" />
                                 <div class="zg-switch-track"></div>
@@ -47,13 +54,13 @@ import { Icon } from 'astro-icon/components';
 
                     <button id="reset-options" class="zg-reset-btn">
                         <Icon name="mdi:history" style="width:1rem;height:1rem" />
-                        Restablecer Valores
+                        {ui.resetBtn}
                     </button>
                 </div>
             </div>
 
             <div class="zg-warning">
-                <p>ADVERTENCIA: El texto Zalgo utiliza caracteres combinados de Unicode que pueden desbordar visualmente su contenedor. Úsese con precaución en redes sociales.</p>
+                <p>{ui.warningText}</p>
             </div>
         </div>
 
@@ -68,14 +75,14 @@ import { Icon } from 'astro-icon/components';
                 <textarea
                     id="input-text"
                     class="zg-textarea"
-                    placeholder="Escribe aquí el mensaje que deseas corromper..."
+                    placeholder={ui.inputPlaceholder}
                 ></textarea>
                 <div class="zg-editor-footer">
-                    <span id="char-count" class="zg-char-count">0 CARACTERES</span>
+                    <span id="char-count" class="zg-char-count">0 {ui.charLabel}</span>
                     <div class="zg-footer-sep"></div>
                     <button id="copy-btn" class="zg-copy-btn">
                         <Icon name="mdi:content-copy" style="width:1.25rem;height:1.25rem" />
-                        Copiar Resultado
+                        {ui.copyBtn}
                     </button>
                     <button id="clear-btn" class="zg-clear-btn">
                         <Icon name="mdi:trash-can-outline" style="width:1.25rem;height:1.25rem" />
@@ -84,24 +91,28 @@ import { Icon } from 'astro-icon/components';
             </div>
 
             <div class="zg-preview-wrap">
-                <div class="zg-preview-badge">Vista Previa en Tiempo Real</div>
+                <div class="zg-preview-badge">{ui.previewLabel}</div>
                 <div id="fake-ui-body" class="zg-preview-body">
                     <div class="zg-preview-dots"></div>
                     <div id="zalgo-output" class="zg-output">
-                        <span class="zg-output-empty">Vacío</span>
+                        <span class="zg-output-empty">{ui.emptyLabel}</span>
                     </div>
                     <div id="glitch-overlay" class="zg-glitch-overlay">
                         <div class="zg-glitch-line zg-glitch-line-1"></div>
                         <div class="zg-glitch-line zg-glitch-line-2"></div>
                     </div>
                 </div>
-                <p class="zg-preview-note">Nota: Algunos navegadores pueden limitar el renderizado de caracteres combinados</p>
+                <p class="zg-preview-note">{ui.noteText}</p>
             </div>
         </div>
     </div>
 </section>
 
 <script>
+    import type { ZalgoGeneratorUI } from './index';
+    const root = document.getElementById('zalgo-generator-root') as HTMLElement;
+    const ui = JSON.parse(root.dataset.ui || '{}') as ZalgoGeneratorUI;
+
     const UP = ["\u030d","\u030e","\u0304","\u0305","\u033f","\u0311","\u0306","\u0310","\u0352","\u0357","\u0351","\u0307","\u0308","\u030a","\u0342","\u0343","\u0344","\u034a","\u034b","\u034c","\u0303","\u0302","\u030c","\u0350","\u0300","\u0301","\u030b","\u030f","\u0312","\u0313","\u0314","\u033d","\u0309","\u0363","\u0364","\u0365","\u0366","\u0367","\u0368","\u0369","\u036a","\u036b","\u036c","\u036d","\u036e","\u036f","\u033e","\u035b","\u0346","\u031a"];
     const MID = ["\u0315","\u031b","\u0340","\u0341","\u0358","\u0321","\u0322","\u0327","\u0328","\u0334","\u0335","\u0336","\u034f","\u035c","\u035d","\u035e","\u035f","\u0360","\u0362","\u0338","\u0337","\u0361","\u0489"];
     const DOWN = ["\u0316","\u0317","\u0318","\u0319","\u031c","\u031d","\u031e","\u031f","\u0320","\u0324","\u0325","\u0326","\u0329","\u032a","\u032b","\u032c","\u032d","\u032e","\u032f","\u0330","\u0331","\u0332","\u0333","\u0339","\u033a","\u033b","\u033c","\u0345","\u0347","\u0348","\u0349","\u034d","\u034e","\u0353","\u0354","\u0355","\u0356","\u0359","\u035a","\u0323"];
@@ -142,10 +153,10 @@ import { Icon } from 'astro-icon/components';
     function update() {
         const text = input.value;
         const intensity = parseFloat(intensitySlider.value);
-        if (charCount) charCount.textContent = `${text.length} CARACTERES`;
+        if (charCount) charCount.textContent = `${text.length} ${ui.charLabel}`;
         if (intensityValue) intensityValue.textContent = `${Math.round(intensity * 100)}%`;
         if (!text.trim()) {
-            output.innerHTML = '<span class="zg-output-empty">Vacío</span>';
+            output.innerHTML = `<span class="zg-output-empty">${ui.emptyLabel}</span>`;
             glitchOverlay.style.opacity = "0";
             fakeUiBody.style.borderColor = "";
             fakeUiBody.style.boxShadow = "";
@@ -174,10 +185,10 @@ import { Icon } from 'astro-icon/components';
 
     copyBtn?.addEventListener("click", () => {
         const text = output.textContent || "";
-        if (text && text !== "Vacío") {
+        if (text && text !== ui.emptyLabel) {
             navigator.clipboard.writeText(text);
             const orig = copyBtn.innerHTML;
-            copyBtn.innerHTML = "¡Copiado!";
+            copyBtn.innerHTML = ui.copied || '¡Copiado!';
             setTimeout(() => { copyBtn.innerHTML = orig; }, 2000);
         }
     });

package/src/tool/zalgo-generator/i18n/en.ts

@@ -15,7 +15,18 @@ export const content: ZalgoGeneratorLocaleContent = {
     copyBtn: 'Copy Chaos',
     copied: 'Copied!',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'References'
+    bibliographyTitle: 'References',
+    configTitle: 'Configuration',
+    intensity: 'Intensity',
+    upLabel: 'Upper Corruption',
+    midLabel: 'Middle Noise',
+    downLabel: 'Lower Corruption',
+    resetBtn: 'Reset Values',
+    warningText: 'WARNING: Zalgo text uses combined Unicode characters that may visually overflow their container. Use with caution on social media.',
+    previewLabel: 'Real-time Preview',
+    emptyLabel: 'Empty',
+    charLabel: 'CHARACTERS',
+    noteText: 'Note: Some browsers may limit the rendering of combined characters'
   },
   seo: [
     { type: 'title', text: 'What Is Zalgo Text and How Does Visual Corruption Work?', level: 2 },

package/src/tool/zalgo-generator/i18n/es.ts

@@ -15,7 +15,18 @@ export const content: ZalgoGeneratorLocaleContent = {
     copyBtn: 'Copiar Caos',
     copied: '¡Copiado!',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Referencias'
+    bibliographyTitle: 'Referencias',
+    configTitle: 'Configuración',
+    intensity: 'Intensidad',
+    upLabel: 'Corrupción Superior',
+    midLabel: 'Ruido Central',
+    downLabel: 'Corrupción Inferior',
+    resetBtn: 'Restablecer Valores',
+    warningText: 'ADVERTENCIA: El texto Zalgo utiliza caracteres combinados de Unicode que pueden desbordar visualmente su contenedor. Úsese con precaución en redes sociales.',
+    previewLabel: 'Vista Previa en Tiempo Real',
+    emptyLabel: 'Vacío',
+    charLabel: 'CARACTERES',
+    noteText: 'Nota: Algunos navegadores pueden limitar el renderizado de caracteres combinados'
   },
   seo: [
     { type: 'title', text: '¿Qué es el Texto Zalgo y cómo funciona la corrupción visual?', level: 2 },

package/src/tool/zalgo-generator/i18n/fr.ts

@@ -15,7 +15,18 @@ export const content: ZalgoGeneratorLocaleContent = {
     copyBtn: 'Copier le Chaos',
     copied: 'Copié !',
     faqTitle: 'FAQ',
-    bibliographyTitle: 'Références'
+    bibliographyTitle: 'Références',
+    configTitle: 'Configuration',
+    intensity: 'Intensité',
+    upLabel: 'Corruption Supérieure',
+    midLabel: 'Bruit Central',
+    downLabel: 'Corruption Inférieure',
+    resetBtn: 'Réinitialiser les Valeurs',
+    warningText: 'AVERTISSEMENT : Le texte Zalgo utilise des caractères combinés Unicode qui peuvent déborder visuellement de leur conteneur. À utiliser avec précaution sur les réseaux sociaux.',
+    previewLabel: 'Aperçu en Temps Réel',
+    emptyLabel: 'Vide',
+    charLabel: 'CARACTÈRES',
+    noteText: 'Note : Certains navigateurs peuvent limiter le rendu des caractères combinés'
   },
   seo: [
     { type: 'title', text: 'Qu\'est-ce que le Texte Zalgo et comment fonctionne la corruption visuelle ?', level: 2 },

package/src/tool/zalgo-generator/index.ts

@@ -14,6 +14,17 @@ export interface ZalgoGeneratorUI {
   copied: string;
   faqTitle: string;
   bibliographyTitle: string;
+  configTitle: string;
+  intensity: string;
+  upLabel: string;
+  midLabel: string;
+  downLabel: string;
+  resetBtn: string;
+  warningText: string;
+  previewLabel: string;
+  emptyLabel: string;
+  charLabel: string;
+  noteText: string;
 }
 
 export type ZalgoGeneratorLocaleContent = ToolLocaleContent<ZalgoGeneratorUI>;