@jjlmoya/utils-creative 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jjlmoya/utils-creative",
-  "version": "1.4.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>;