@jjlmoya/utils-creative 1.5.0 → 1.7.0

package/package.json

@@ -1,64 +1,64 @@
 {
-  "name": "@jjlmoya/utils-creative",
-  "version": "1.5.0",
-  "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./data": "./src/data.ts"
-  },
-  "files": [
-    "src"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro",
-    "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
-    "check": "astro check",
-    "type-check": "astro check",
-    "test": "vitest run",
-    "preversion": "npm run lint && npm run test",
-    "postversion": "git push && git push --tags",
-    "patch": "npm version patch",
-    "minor": "npm version minor",
-    "major": "npm version major"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,astro}": [
-      "eslint --fix"
-    ]
-  },
-  "dependencies": {
-    "@iconify-json/mdi": "^1.2.3",
-    "@jjlmoya/utils-shared": "^1.1.0",
-    "astro": "^6.1.2",
-    "astro-icon": "^1.1.0"
-  },
-  "peerDependencies": {
-    "jszip": "^3.10.1"
-  },
-  "devDependencies": {
-    "@astrojs/check": "^0.9.8",
-    "eslint": "^9.39.4",
-    "eslint-plugin-astro": "^1.6.0",
-    "eslint-plugin-no-comments": "^1.1.10",
-    "husky": "^9.1.7",
-    "jszip": "^3.10.1",
-    "lint-staged": "^16.4.0",
-    "postcss-html": "^1.8.1",
-    "schema-dts": "^1.1.2",
-    "stylelint": "^17.6.0",
-    "stylelint-config-standard": "^40.0.0",
-    "stylelint-declaration-strict-value": "^1.11.1",
-    "typescript": "^5.4.0",
-    "typescript-eslint": "^8.58.0",
-    "vitest": "^4.1.2"
-  }
+    "name": "@jjlmoya/utils-creative",
+    "version": "1.7.0",
+    "type": "module",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "exports": {
+        ".": "./src/index.ts",
+        "./data": "./src/data.ts"
+    },
+    "files": [
+        "src"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro",
+        "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
+        "check": "astro check",
+        "type-check": "astro check",
+        "test": "vitest run",
+        "preversion": "npm run lint && npm run test",
+        "postversion": "git push && git push --tags",
+        "patch": "npm version patch",
+        "minor": "npm version minor",
+        "major": "npm version major"
+    },
+    "lint-staged": {
+        "*.{ts,tsx,astro}": [
+            "eslint --fix"
+        ]
+    },
+    "dependencies": {
+        "@iconify-json/mdi": "^1.2.3",
+        "@jjlmoya/utils-shared": "1.2.0",
+        "astro": "^6.1.2",
+        "astro-icon": "^1.1.0"
+    },
+    "peerDependencies": {
+        "jszip": "^3.10.1"
+    },
+    "devDependencies": {
+        "@astrojs/check": "^0.9.8",
+        "eslint": "^9.39.4",
+        "eslint-plugin-astro": "^1.6.0",
+        "eslint-plugin-no-comments": "^1.1.10",
+        "husky": "^9.1.7",
+        "jszip": "^3.10.1",
+        "lint-staged": "^16.4.0",
+        "postcss-html": "^1.8.1",
+        "schema-dts": "^1.1.2",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-declaration-strict-value": "^1.11.1",
+        "typescript": "^5.4.0",
+        "typescript-eslint": "^8.58.0",
+        "vitest": "^4.1.2"
+    }
 }

package/src/tests/locale_completeness.test.ts

@@ -35,8 +35,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('no tools registered yet', () => {
-    expect(ALL_TOOLS.length).toBe(0);
+  it('should have tools registered', () => {
+    expect(ALL_TOOLS.length).toBeGreaterThan(0);
   });
 });
 

package/src/tests/schemas_fulfillment.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import type { ToolLocaleContent } from '../types';
+
+describe('Schemas Fulfillment Validation', () => {
+  ALL_TOOLS.forEach((tool) => {
+    describe(`Tool: ${tool.entry.id}`, () => {
+      Object.keys(tool.entry.i18n).forEach((locale) => {
+        it(`Locale: ${locale} should have faqSchema, appSchema and howToSchema`, async () => {
+          const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
+          if (!loader) return;
+          const content = (await loader()) as ToolLocaleContent;
+
+          const schemaTypes = content.schemas.map((s: any) => s['@type']);
+
+          expect(schemaTypes, `Tool "${tool.entry.id}" locale "${locale}" is missing FAQPage schema`).toContain('FAQPage');
+          expect(schemaTypes, `Tool "${tool.entry.id}" locale "${locale}" is missing SoftwareApplication schema`).toContain('SoftwareApplication');
+          expect(schemaTypes, `Tool "${tool.entry.id}" locale "${locale}" is missing HowTo schema`).toContain('HowTo');
+        });
+      });
+    });
+  });
+});

package/src/tests/title_quality.test.ts

@@ -0,0 +1,55 @@
+import { describe, it } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+function getFiles(dir: string, ext: string[]): string[] {
+  const results: string[] = [];
+  if (!fs.existsSync(dir)) return results;
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat && stat.isDirectory()) {
+      results.push(...getFiles(fullPath, ext));
+    } else if (ext.some((e) => file.endsWith(e))) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+const SRC_DIR = path.join(process.cwd(), 'src');
+
+describe('Project Titles - Separator Validation', () => {
+  const files = [
+    ...getFiles(path.join(SRC_DIR, 'tool'), ['.ts']),
+    ...getFiles(path.join(SRC_DIR, 'category'), ['.ts']),
+  ].filter(f => f.includes('i18n'));
+
+  it.each(files)('Verify that titles in %s do not contain | or spaced -', (filePath) => {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const relativePath = path.relative(process.cwd(), filePath);
+
+    const titlePatterns = [
+      /const\s+title\s*=\s*['"]([^'"]+)['"]/g,
+      /title\s*:\s*['"]([^'"]+)['"]/g,
+    ];
+
+    const findings: string[] = [];
+
+    for (const pattern of titlePatterns) {
+      let match;
+      while ((match = pattern.exec(content)) !== null) {
+        const title = match[1];
+        if (title.includes('|') || /\s-\s/.test(title)) {
+          findings.push(title);
+        }
+      }
+    }
+
+    if (findings.length > 0) {
+      const list = findings.map((f) => `  - "${f}"`).join('\n');
+      throw new Error(`Forbidden separators (| or spaced -) found in titles in ${relativePath}:\n${list}`);
+    }
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { creativeCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 0 tools in ALL_TOOLS (replace with actual count after adding tools)', () => {
-      expect(ALL_TOOLS.length).toBe(0);
+    it('should have 6 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(6);
     });
 
     it('creativeCategory should be defined', () => {

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

@@ -1,18 +1,82 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { BeadPatternGeneratorLocaleContent } from '../index';
 
+const slug = 'bead-pattern-generator';
+const title = 'Pattern Generator';
+const description = 'Create pixel art and bead schemes for Miyuki or Hama from your photos. Color quantization algorithm, tunnel vision mode, and ZIP export.';
+
+const faq: BeadPatternGeneratorLocaleContent['faq'] = [
+  { question: 'What is color quantization in patterns?', answer: 'It is the process of reducing the thousands of colors in a photo to just a few that correspond to the actual bead colors available (e.g., Miyuki or Hama). We use smart algorithms to maintain visual resemblance with the minimum possible palette.' },
+  { question: 'Can I use this pattern for cross-stitch?', answer: 'Yes, the generator creates a grid chart that is perfectly compatible with cross-stitch. You just need to choose a grid size that matches your fabric (Aida 14, 18, etc.).' },
+  { question: 'What is the difference between Miyuki and Hama Beads?', answer: 'Miyuki Delica beads are very small, precise glass beads for jewelry. Hama Beads are plastic and are fused with an iron. Our tool lets you adjust the aspect ratio so the pattern does not distort depending on the material used.' },
+  { question: 'How does the dithering algorithm work?', answer: 'Dithering creates the illusion of more colors by mixing pixels of different colors in spaced patterns. It helps color gradients look smoother even with a limited bead palette.' },
+];
+
+const howTo: BeadPatternGeneratorLocaleContent['howTo'] = [
+  { name: 'Upload a clear image', text: 'Select a photo with good contrast and few small details so the pattern is easier to follow.' },
+  { name: 'Adjust the grid size', text: 'Define how many beads wide and tall your final piece will be. More beads = more detail but more difficulty.' },
+  { name: 'Optimize the color palette', text: 'Reduce the number of colors until they match the beads you have available in your craft kit.' },
+  { name: 'Export the guide scheme', text: 'Generate the final pattern with color codes to use as a reference while assembling your beads on the board or thread.' },
+];
+
+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: 'en',
+};
+
 export const content: BeadPatternGeneratorLocaleContent = {
-  slug: 'bead-pattern-generator',
-  title: 'Pattern Generator',
-  description: 'Create pixel art and bead schemes for Miyuki or Hama from your photos. Color quantization algorithm, tunnel vision mode, and ZIP export.',
+  slug,
+  title,
+  description,
   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'
   },
@@ -40,22 +104,12 @@ export const content: BeadPatternGeneratorLocaleContent = {
     ], columns: 4 },
     { type: 'paragraph', html: 'In an era of ephemeral screens, creating something physical is a revolutionary act. This tool does not seek to automate art, but to <strong>empower the artisan</strong>. We give you computational precision so your hands can build lasting legacies.' },
   ],
-  faq: [
-    { question: 'What is color quantization in patterns?', answer: 'It is the process of reducing the thousands of colors in a photo to just a few that correspond to the actual bead colors available (e.g., Miyuki or Hama). We use smart algorithms to maintain visual resemblance with the minimum possible palette.' },
-    { question: 'Can I use this pattern for cross-stitch?', answer: 'Yes, the generator creates a grid chart that is perfectly compatible with cross-stitch. You just need to choose a grid size that matches your fabric (Aida 14, 18, etc.).' },
-    { question: 'What is the difference between Miyuki and Hama Beads?', answer: 'Miyuki Delica beads are very small, precise glass beads for jewelry. Hama Beads are plastic and are fused with an iron. Our tool lets you adjust the aspect ratio so the pattern does not distort depending on the material used.' },
-    { question: 'How does the dithering algorithm work?', answer: 'Dithering creates the illusion of more colors by mixing pixels of different colors in spaced patterns. It helps color gradients look smoother even with a limited bead palette.' },
-  ],
+  faq,
   bibliography: [
     { name: 'Scikit-Image: Color Quantization using K-Means', url: 'https://scikit-learn.org/0.23/auto_examples/cluster/plot_color_quantization.html' },
     { name: 'Miyuki Delica Beads Specification', url: 'https://www.miyuki-beads.co.jp/english/seedbeads/delica.html' },
     { name: 'Visgraf Lab: Dithering Algorithms', url: 'https://www.visgraf.impa.br/Courses/ip00/proj/Dithering1/floyd_steinberg_dithering.html' },
   ],
-  howTo: [
-    { name: 'Upload a clear image', text: 'Select a photo with good contrast and few small details so the pattern is easier to follow.' },
-    { name: 'Adjust the grid size', text: 'Define how many beads wide and tall your final piece will be. More beads = more detail but more difficulty.' },
-    { name: 'Optimize the color palette', text: 'Reduce the number of colors until they match the beads you have available in your craft kit.' },
-    { name: 'Export the guide scheme', text: 'Generate the final pattern with color codes to use as a reference while assembling your beads on the board or thread.' },
-  ],
-  schemas: []
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
 };

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

@@ -1,18 +1,82 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { BeadPatternGeneratorLocaleContent } from '../index';
 
+const slug = 'generador-patrones-cuentas';
+const title = 'Generador de Patrones';
+const description = 'Crea esquemas de pixel art y cuentas para Miyuki o Hama desde tus fotos.';
+
+const faq: BeadPatternGeneratorLocaleContent['faq'] = [
+  { question: '¿Qué es la cuantización de color en patrones?', answer: 'Es el proceso de reducir los miles de colores de una foto a solo unos pocos que correspondan con los colores reales de las cuentas (ej. Miyuki o Hama). Usamos algoritmos inteligentes para mantener el parecido visual con la mínima paleta posible.' },
+  { question: '¿Puedo usar este patrón para punto de cruz?', answer: 'Sí, el generador crea una malla cuadriculada (gráfico) que es perfectamente compatible con el punto de cruz. Solo debes elegir un tamaño de rejilla que se adapte a tu tela (Aida 14, 18, etc.).' },
+  { question: '¿Qué diferencia hay entre Miyuki y Hama Beads?', answer: 'Las Miyuki Delica son cuentas de cristal muy pequeñas y precisas para joyería. Los Hama Beads son de plástico y se funden con plancha. Nuestra herramienta permite ajustar la relación de aspecto para que el patrón no se deforme según el material usado.' },
+  { question: '¿Cómo funciona el algoritmo de tramado (Dithering)?', answer: 'El tramado crea la ilusión de más colores mezclando píxeles de colores diferentes en patrones espaciados. Ayuda a que las degradaciones de color se vean más suaves incluso con una paleta limitada de cuentas.' },
+];
+
+const howTo: BeadPatternGeneratorLocaleContent['howTo'] = [
+  { name: 'Subir una imagen clara', text: 'Selecciona una foto con buen contraste y pocos detalles pequeños para que el patrón sea más fácil de seguir.' },
+  { name: 'Ajustar el tamaño de la rejilla', text: 'Define cuántas cuentas de ancho y alto tendrá tu pieza final. Recuerda que a más tamaño, más detalle pero más dificultad.' },
+  { name: 'Optimizar la paleta de colores', text: 'Reduce el número de colores hasta que coincidan con las cuentas que tienes disponibles en tu kit de manualidades.' },
+  { name: 'Exportar el esquema guía', text: 'Genera el patrón final con códigos de color para usarlo como referencia mientras montas tus cuentas en la placa o el hilo.' },
+];
+
+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: BeadPatternGeneratorLocaleContent = {
-  slug: 'generador-patrones-cuentas',
-  title: 'Generador de Patrones',
-  description: 'Crea esquemas de pixel art y cuentas para Miyuki o Hama desde tus fotos.',
+  slug,
+  title,
+  description,
   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'
   },
@@ -47,22 +111,12 @@ export const content: BeadPatternGeneratorLocaleContent = {
       { term: 'K-Means Clustering', definition: 'Algoritmo de aprendizaje no supervisado que agrupa píxeles por similitud cromática para encontrar los colores "centroide" de la imagen.' },
     ]},
   ],
-  faq: [
-    { question: '¿Qué es la cuantización de color en patrones?', answer: 'Es el proceso de reducir los miles de colores de una foto a solo unos pocos que correspondan con los colores reales de las cuentas (ej. Miyuki o Hama). Usamos algoritmos inteligentes para mantener el parecido visual con la mínima paleta posible.' },
-    { question: '¿Puedo usar este patrón para punto de cruz?', answer: 'Sí, el generador crea una malla cuadriculada (gráfico) que es perfectamente compatible con el punto de cruz. Solo debes elegir un tamaño de rejilla que se adapte a tu tela (Aida 14, 18, etc.).' },
-    { question: '¿Qué diferencia hay entre Miyuki y Hama Beads?', answer: 'Las Miyuki Delica son cuentas de cristal muy pequeñas y precisas para joyería. Los Hama Beads son de plástico y se funden con plancha. Nuestra herramienta permite ajustar la relación de aspecto para que el patrón no se deforme según el material usado.' },
-    { question: '¿Cómo funciona el algoritmo de tramado (Dithering)?', answer: 'El tramado crea la ilusión de más colores mezclando píxeles de colores diferentes en patrones espaciados. Ayuda a que las degradaciones de color se vean más suaves incluso con una paleta limitada de cuentas.' },
-  ],
+  faq,
   bibliography: [
     { name: 'Scikit-Image: Color Quantization using K-Means', url: 'https://scikit-learn.org/0.23/auto_examples/cluster/plot_color_quantization.html' },
     { name: 'Miyuki Delica Beads Specification', url: 'https://www.miyuki-beads.co.jp/english/seedbeads/delica.html' },
     { name: 'Visgraf Lab: Dithering Algorithms', url: 'https://www.visgraf.impa.br/Courses/ip00/proj/Dithering1/floyd_steinberg_dithering.html' },
   ],
-  howTo: [
-    { name: 'Subir una imagen clara', text: 'Selecciona una foto con buen contraste y pocos detalles pequeños para que el patrón sea más fácil de seguir.' },
-    { name: 'Ajustar el tamaño de la rejilla', text: 'Define cuántas cuentas de ancho y alto tendrá tu pieza final. Recuerda que a más tamaño, más detalle pero más dificultad.' },
-    { name: 'Optimizar la paleta de colores', text: 'Reduce el número de colores hasta que coincidan con las cuentas que tienes disponibles en tu kit de manualidades.' },
-    { name: 'Exportar el esquema guía', text: 'Genera el patrón final con códigos de color para usarlo como referencia mientras montas tus cuentas en la placa o el hilo.' },
-  ],
-  schemas: []
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
 };