@jjlmoya/utils-creative 1.2.0

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

@@ -0,0 +1,372 @@
+---
+import './style.css';
+---
+
+<div class="bead-wrapper">
+    <div class="bead-card" id="main-container">
+        <div class="bead-top-bar"></div>
+
+        <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>
+                </div>
+
+                <div class="bead-controls">
+                    <div class="bead-control-group">
+                        <label class="bead-control-label">Tamaño (Ancho)</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>
+                        </div>
+                    </div>
+
+                    <div class="bead-control-group">
+                        <label class="bead-control-label">Colores</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>
+                        </div>
+                    </div>
+
+                    <div class="bead-control-group">
+                        <label class="bead-control-label">Opciones</label>
+                        <div class="bead-options-row">
+                            <label class="bead-checkbox-label">
+                                <input type="checkbox" id="show-rulers" class="bead-checkbox" />
+                                <span>Reglas</span>
+                            </label>
+                            <div class="bead-divider"></div>
+                            <label class="bead-checkbox-label" title="Patrón Sorpresa">
+                                <input type="checkbox" id="show-symbols" class="bead-checkbox" />
+                                <span>Símbolos</span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <button id="download-btn" disabled class="bead-download-btn">
+                        <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>
+                    </button>
+                </div>
+            </div>
+
+            <div class="bead-canvas-area">
+                <div class="bead-drop-zone" id="drop-zone">
+                    <input type="file" id="image-upload" accept="image/*" class="bead-file-input" />
+                    <div class="bead-drop-content">
+                        <div class="bead-upload-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <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>
+                    </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>
+                            <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
+                            </button>
+                        </div>
+                        <div class="bead-canvas-col">
+                            <canvas id="pattern-canvas" class="bead-canvas"></canvas>
+                        </div>
+                    </div>
+
+                    <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>
+                        </div>
+                        <div class="bead-tunnel-controls">
+                            <button id="focus-prev" class="bead-tunnel-btn">▲</button>
+                            <span id="focus-row-display" class="bead-tunnel-display">--</span>
+                            <button id="focus-next" class="bead-tunnel-btn">▼</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    const SYMBOLS = "123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+    type RoundCtx = CanvasRenderingContext2D & { roundRect?: (...args: number[]) => void };
+
+    function getClosestCenterIdx(p: number[], centers: number[][]): number {
+        let minDist = Infinity, idx = 0;
+        for (let c = 0; c < centers.length; c++) {
+            const cc = centers[c] ?? [0,0,0];
+            const d = (p[0]-cc[0])**2 + (p[1]-cc[1])**2 + (p[2]-cc[2])**2;
+            if (d < minDist) { minDist = d; idx = c; }
+        }
+        return idx;
+    }
+
+    function updateCenters(clusters: number[][][], colorCount: number, centers: number[][]): void {
+        for (let c = 0; c < colorCount; c++) {
+            const cluster = clusters[c] ?? [];
+            if (cluster.length > 0) {
+                let r = 0, g = 0, b = 0;
+                for (const p of cluster) { r += p[0] ?? 0; g += p[1] ?? 0; b += p[2] ?? 0; }
+                centers[c] = [Math.floor(r/cluster.length), Math.floor(g/cluster.length), Math.floor(b/cluster.length)];
+            }
+        }
+    }
+
+    function simpleQuantize(imageData: ImageData, colorCount: number): number[][] {
+        const pixels = imageData.data;
+        const pixelArray: number[][] = [];
+        for (let i = 0; i < pixels.length; i += 4 * 10) {
+            if (pixels[i + 3] > 128) pixelArray.push([pixels[i], pixels[i + 1], pixels[i + 2]]);
+        }
+        if (pixelArray.length === 0) return [];
+        const centers: number[][] = [];
+        for (let i = 0; i < colorCount; i++) centers.push(pixelArray[Math.floor(Math.random() * pixelArray.length)] ?? [0,0,0]);
+        for (let iter = 0; iter < 5; iter++) {
+            const clusters: number[][][] = Array(colorCount).fill(null).map(() => []);
+            for (const p of pixelArray) clusters[getClosestCenterIdx(p, centers)].push(p);
+            updateCenters(clusters, colorCount, centers);
+        }
+        return centers;
+    }
+
+    function findClosestColorIndex(r: number, g: number, b: number, palette: number[][]): number {
+        let minDist = Infinity, closestIdx = 0;
+        for (let i = 0; i < palette.length; i++) {
+            const p = palette[i] ?? [0,0,0];
+            const d = (r-p[0])**2 + (g-p[1])**2 + (b-p[2])**2;
+            if (d < minDist) { minDist = d; closestIdx = i; }
+        }
+        return closestIdx;
+    }
+
+    const dropZone = document.getElementById("drop-zone") as HTMLDivElement;
+    const imageInput = document.getElementById("image-upload") as HTMLInputElement;
+    const resultArea = document.getElementById("result-area") as HTMLDivElement;
+    const reuploadBtn = document.getElementById("reupload-btn") as HTMLButtonElement;
+    const gridWidthInput = document.getElementById("grid-width") as HTMLInputElement;
+    const gridWidthValue = document.getElementById("grid-width-value") as HTMLSpanElement;
+    const colorCountInput = document.getElementById("color-count") as HTMLInputElement;
+    const colorCountValue = document.getElementById("color-count-value") as HTMLSpanElement;
+    const rulersToggle = document.getElementById("show-rulers") as HTMLInputElement;
+    const symbolsToggle = document.getElementById("show-symbols") as HTMLInputElement;
+    const downloadBtn = document.getElementById("download-btn") as HTMLButtonElement;
+    const patternCanvas = document.getElementById("pattern-canvas") as HTMLCanvasElement;
+    const paletteGrid = document.getElementById("palette-grid") as HTMLDivElement;
+    const focusPrevBtn = document.getElementById("focus-prev") as HTMLButtonElement;
+    const focusNextBtn = document.getElementById("focus-next") as HTMLButtonElement;
+    const focusDisplay = document.getElementById("focus-row-display") as HTMLSpanElement;
+
+    let currentImage: HTMLImageElement | null = null;
+    let currentFileName = "patron";
+    let currentRow = -1;
+    let totalRows = 0;
+    interface LastData { grid: number[]; palette: number[][]; cols: number; rows: number; }
+    let lastData: LastData = { grid: [], palette: [], cols: 0, rows: 0 };
+    let debounceTimer: ReturnType<typeof setTimeout>;
+
+    imageInput?.addEventListener("change", (e) => {
+        const files = (e.target as HTMLInputElement).files;
+        if (files?.length) handleFile(files[0]);
+    });
+
+    if (dropZone) {
+        ["dragover","dragenter"].forEach(evt => dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.add("bead-drop-active"); }));
+        ["dragleave","drop"].forEach(evt => dropZone.addEventListener(evt, (e) => { e.preventDefault(); dropZone.classList.remove("bead-drop-active"); }));
+        dropZone.addEventListener("drop", (e) => { if (e.dataTransfer?.files.length) handleFile(e.dataTransfer.files[0]); });
+    }
+
+    reuploadBtn?.addEventListener("click", () => {
+        dropZone?.classList.remove("bead-hidden");
+        resultArea?.classList.add("bead-hidden");
+        currentImage = null;
+        if (downloadBtn) downloadBtn.disabled = true;
+        if (imageInput) imageInput.value = "";
+    });
+
+    function handleFile(file: File) {
+        currentFileName = file.name.split(".").slice(0,-1).join(".") || "patron";
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            if (e.target?.result) {
+                const img = new Image();
+                img.onload = () => { currentImage = img; dropZone?.classList.add("bead-hidden"); resultArea?.classList.remove("bead-hidden"); generatePattern(); };
+                img.src = e.target.result as string;
+            }
+        };
+        reader.readAsDataURL(file);
+    }
+
+    gridWidthInput?.addEventListener("input", (e) => { if (gridWidthValue) gridWidthValue.textContent = (e.target as HTMLInputElement).value; debounceGenerate(); });
+    colorCountInput?.addEventListener("input", (e) => { if (colorCountValue) colorCountValue.textContent = (e.target as HTMLInputElement).value; debounceGenerate(); });
+    rulersToggle?.addEventListener("change", drawGrid);
+    symbolsToggle?.addEventListener("change", drawGrid);
+
+    function debounceGenerate() {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(generatePattern, 300);
+    }
+
+    function createGridFromImage(width: number, colors: number): { grid: number[]; palette: number[][] } | null {
+        if (!currentImage) return null;
+        const height = Math.round(width * (currentImage.height / currentImage.width));
+        const tmp = document.createElement("canvas");
+        tmp.width = width; tmp.height = height;
+        const ctx = tmp.getContext("2d");
+        if (!ctx) return null;
+        ctx.drawImage(currentImage, 0, 0, width, height);
+        const imageData = ctx.getImageData(0, 0, width, height);
+        const palette = simpleQuantize(imageData, colors);
+        if (!palette.length) return null;
+        const grid: number[] = [];
+        for (let i = 0; i < imageData.data.length; i += 4)
+            grid.push(findClosestColorIndex(imageData.data[i], imageData.data[i+1], imageData.data[i+2], palette));
+        return { grid, palette };
+    }
+    function updatePatternState(grid: number[], palette: number[][], width: number, height: number): void {
+        lastData = { grid, palette, cols: width, rows: height };
+        totalRows = height;
+        currentRow = -1;
+        if (focusDisplay) focusDisplay.textContent = "--";
+        displayPalette(palette);
+        if (downloadBtn) downloadBtn.disabled = false;
+    }
+
+    function generatePattern() {
+        if (!currentImage || !patternCanvas) return;
+        const width = parseInt(gridWidthInput?.value || "40");
+        const colors = parseInt(colorCountInput?.value || "12");
+        const result = createGridFromImage(width, colors);
+        if (!result) return;
+        const height = Math.round(width * (currentImage.height / currentImage.width));
+        updatePatternState(result.grid, result.palette, width, height);
+        drawGrid();
+    }
+    interface DrawConfig { S: number; G: number; R: number; ctx: CanvasRenderingContext2D; cols: number; rows: number; palette: number[][]; symbols: boolean; }
+    function drawRulers(cfg: DrawConfig): void {
+        const { S, G, R, ctx, cols, rows } = cfg;
+        ctx.fillStyle="#64748b"; ctx.font="10px monospace"; ctx.textAlign="center"; ctx.textBaseline="middle";
+        for (let i=0;i<cols;i++) if ((i+1)%5===0||i===0) ctx.fillText((i+1).toString(), R+G+i*(S+G)+S/2, R/2);
+        for (let j=0;j<rows;j++) if ((j+1)%5===0||j===0) ctx.fillText((j+1).toString(), R/2, R+G+j*(S+G)+S/2);
+        ctx.strokeStyle="#e2e8f0"; ctx.lineWidth=1; ctx.beginPath();
+        ctx.moveTo(R,0); ctx.lineTo(R, (rows*(S+G)+G+R));
+        ctx.moveTo(0,R); ctx.lineTo((cols*(S+G)+G+R),R); ctx.stroke();
+    }
+    function drawCell(cfg: DrawConfig, ci: number, x: number, y: number): void {
+        const { S, G, R, ctx, palette, symbols } = cfg;
+        const px=R+G+x*(S+G), py=R+G+y*(S+G);
+        const c=palette[ci] ?? [0,0,0];
+        ctx.fillStyle = symbols ? "#fff" : `rgb(${c[0]},${c[1]},${c[2]})`;
+        if (symbols) { ctx.strokeStyle="#cbd5e1"; ctx.lineWidth=1; }
+        ctx.beginPath();
+        const rCtx = ctx as RoundCtx;
+        if (rCtx.roundRect) rCtx.roundRect(px,py,S,S,4); else ctx.rect(px,py,S,S);
+        ctx.fill();
+        if (symbols) {
+            ctx.stroke();
+            ctx.fillStyle="#000"; ctx.font="bold 14px sans-serif"; ctx.textAlign="center"; ctx.textBaseline="middle";
+            ctx.fillText(SYMBOLS[ci%SYMBOLS.length], px+S/2, py+S/2+1);
+        }
+    }
+    function highlightRow(cfg: DrawConfig, x: number, y: number): void {
+        const { S, G, R, ctx } = cfg, px=R+G+x*(S+G), py=R+G+y*(S+G);
+        if (y===currentRow) { ctx.strokeStyle="#db2777"; ctx.lineWidth=3; ctx.stroke(); }
+        else { ctx.fillStyle="rgba(255,255,255,0.75)"; ctx.fillRect(px,py,S,S); }
+    }
+    function drawGridCells(cfg: DrawConfig, grid: number[], cols: number): void {
+        grid.forEach((ci,idx) => {
+            const x=idx%cols, y=Math.floor(idx/cols);
+            drawCell(cfg, ci, x, y);
+            if (currentRow !== -1) highlightRow(cfg, x, y);
+        });
+    }
+    function prepareDrawConfig(cols: number, rows: number, palette: number[][]): DrawConfig | null {
+        if (!patternCanvas) return null;
+        const S = 25, G = 2, R = (rulersToggle?.checked) ? 25 : 0;
+        patternCanvas.width = cols*(S+G)+G+R;
+        patternCanvas.height = rows*(S+G)+G+R;
+        const ctx = patternCanvas.getContext("2d");
+        return ctx ? { S, G, R, ctx, cols, rows, palette, symbols: symbolsToggle?.checked || false } : null;
+    }
+    function drawGrid() {
+        if (!lastData.grid?.length) return;
+        const { grid, cols, rows, palette } = lastData;
+        const cfg = prepareDrawConfig(cols, rows, palette);
+        if (!cfg) return;
+        cfg.ctx.fillStyle = "#fff"; cfg.ctx.fillRect(0,0,cfg.ctx.canvas.width,cfg.ctx.canvas.height);
+        if (cfg.R > 0) drawRulers(cfg);
+        drawGridCells(cfg, grid, cols);
+    }
+    function displayPalette(palette: number[][]) {
+        if (!paletteGrid) return;
+        paletteGrid.innerHTML = "";
+        palette.forEach((c, idx) => {
+            const [r0=0,g0=0,b0=0] = c;
+            const brightness = (r0*299+g0*587+b0*114)/1000;
+            const wrap = document.createElement("div"); wrap.className = "bead-palette-item";
+            const swatch = document.createElement("div"); swatch.className = "bead-color-swatch";
+            swatch.style.backgroundColor = `rgb(${r0},${g0},${b0})`;
+            swatch.title = `Color ${idx+1}: RGB(${r0},${g0},${b0})`;
+            const sym = document.createElement("span");
+            sym.className = "bead-symbol " + (brightness > 128 ? "bead-symbol-dark" : "bead-symbol-light");
+            sym.textContent = SYMBOLS[idx%SYMBOLS.length] ?? '';
+            swatch.appendChild(sym); wrap.appendChild(swatch); paletteGrid.appendChild(wrap);
+        });
+    }
+
+    downloadBtn?.addEventListener("click", async () => {
+        if (!patternCanvas || !currentImage) return;
+        const { default: JSZip } = await import("jszip");
+        const zip = new JSZip();
+        const base = currentFileName ? `${currentFileName}_patron_jjlmoya` : "patron_jjlmoya";
+        zip.file(`${base}_pattern.webp`, await (await fetch(patternCanvas.toDataURL("image/webp"))).blob());
+        zip.file(`${base}_guia.webp`, await (await fetch(generateLegendCanvas().toDataURL("image/webp"))).blob());
+        const blob = await zip.generateAsync({ type: "blob" });
+        const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `${base}.zip`; a.click();
+    });
+    function generateLegendCanvas(): HTMLCanvasElement {
+        const { palette } = lastData;
+        const c = document.createElement("canvas"), ctx = c.getContext("2d");
+        if (!ctx) return c;
+        const rh=40, p=20, hh=60, w=400;
+        c.width=w; c.height=hh+palette.length*rh+p;
+        ctx.fillStyle="#fff"; ctx.fillRect(0,0,c.width,c.height);
+        ctx.fillStyle="#1e293b"; ctx.font="bold 20px sans-serif"; ctx.textAlign="center"; ctx.textBaseline="middle";
+        ctx.fillText("Guía Maestra de Ejecución", w/2, 30);
+        ctx.font="14px sans-serif"; ctx.fillStyle="#64748b"; ctx.fillText(currentFileName||"Sin título", w/2, 50);
+        ctx.textAlign="left";
+        palette.forEach((col, idx) => {
+            const [r0=0,g0=0,b0=0] = col;
+            const y=hh+idx*rh+rh/2;
+            ctx.fillStyle=`rgb(${r0},${g0},${b0})`;
+            ctx.beginPath();
+            const rCtx = ctx as RoundCtx;
+            if (rCtx.roundRect) rCtx.roundRect(p, hh+idx*rh+5, 30, 30, 8); else ctx.rect(p, hh+idx*rh+5, 30, 30);
+            ctx.fill(); ctx.strokeStyle="#e2e8f0"; ctx.lineWidth=1; ctx.stroke();
+            const br=(r0*299+g0*587+b0*114)/1000;
+            ctx.fillStyle=br>128?"#000":"#fff"; ctx.font="bold 16px monospace"; ctx.textAlign="center";
+            ctx.fillText(SYMBOLS[idx%SYMBOLS.length] ?? '', p+15, y+2);
+            ctx.fillStyle="#334155"; ctx.font="bold 16px sans-serif"; ctx.textAlign="left";
+            ctx.fillText(`Color ${idx+1}`, p+45, y);
+            ctx.fillStyle="#64748b"; ctx.font="14px monospace";
+            ctx.fillText(`RGB(${r0},${g0},${b0})`, p+120, y);
+        });
+        return c;
+    }
+    focusPrevBtn?.addEventListener("click", () => { currentRow = currentRow > -1 ? currentRow-1 : totalRows-1; if (focusDisplay) focusDisplay.textContent = currentRow===-1?"--":(currentRow+1).toString(); drawGrid(); });
+    focusNextBtn?.addEventListener("click", () => { currentRow = currentRow < totalRows-1 ? currentRow+1 : -1; if (focusDisplay) focusDisplay.textContent = currentRow===-1?"--":(currentRow+1).toString(); drawGrid(); });
+</script>

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

@@ -0,0 +1,61 @@
+import type { BeadPatternGeneratorLocaleContent } from '../index';
+
+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.',
+  faqTitle: 'Frequently Asked Questions',
+  bibliographyTitle: 'Artisan Bibliography',
+  ui: {
+    title: 'Pattern Generator',
+    description: 'From photo to bead scheme.',
+    uploadLabel: 'Upload your photo',
+    gridSizeLabel: 'Grid size (beads)',
+    pixelateBtn: 'Generate Pattern',
+    downloadBtn: 'Download Scheme',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'References'
+  },
+  seo: [
+    { type: 'title', text: 'Digital Alchemy: Transmute Pixels into Tangible Art', level: 2 },
+    { type: 'paragraph', html: 'Welcome to the <strong>Ultimate Pattern Studio</strong>. A <em>chromatic intelligence engine</em> designed for Pixel Art architects, Miyuki masters, and cross-stitch visionaries. Your bridge between the digital and the handmade.' },
+    { type: 'card', icon: 'mdi:grid', title: 'The Intelligent Grid', html: 'Our <strong>spatial subsampling</strong> algorithm does not just "shrink" your image. It analyzes the visual structure to map complex pixel groups to individual cells, preserving the integrity of silhouettes and edges like an expert illustrator.' },
+    { type: 'card', icon: 'mdi:palette', title: 'K-Means Color Quantization', html: 'We implement a variant of the <strong>K-Means Clustering</strong> algorithm that mathematically finds the "centroid" tones of your image. Astonishing visual fidelity with a minimalist palette of 12, 24 or 32 colors.' },
+    { type: 'title', text: 'Mastery in 3 Steps', level: 3 },
+    { type: 'card', icon: 'mdi:image-search', title: 'The Perfect Selection', html: 'Look for <strong>high contrast</strong>, dramatic lighting and iconic shapes. Portraits with clean backgrounds, logos, and vector art translate beautifully.' },
+    { type: 'card', icon: 'mdi:ruler', title: 'Dimensional Calibration', html: '<strong>Miyuki Delica:</strong> 50 beads ≈ 8cm · <strong>Hama Midi:</strong> 50 beads ≈ 25cm · <strong>Cross-Stitch:</strong> 1 cell = 1 stitch.' },
+    { type: 'card', icon: 'mdi:eye-check', title: 'Zen Execution (Tunnel Vision Mode)', html: 'Our <strong>Tunnel Vision</strong> system acts as your personal assistant, dimming visual noise and surgically highlighting only the active row. Absolute concentration.' },
+    { type: 'title', text: 'Infinite Canvases', level: 3 },
+    { type: 'list', items: [
+      '<strong>Textile Jewelry:</strong> Intricate patterns for looms and geometric bracelets.',
+      '<strong>Cross-Stitch:</strong> Modern schemes ready to be embroidered pixel by pixel.',
+      '<strong>Mosaics:</strong> Large-scale murals using simplified ceramic tesserae.',
+      '<strong>Retro Gaming:</strong> 8-bit authentic assets and sprites in seconds.',
+    ]},
+    { type: 'stats', items: [
+      { value: '10–100', label: 'Bead width range', icon: 'mdi:arrow-expand-horizontal' },
+      { value: '2–32', label: 'Color palette slots', icon: 'mdi:palette-swatch' },
+      { value: 'K-Means', label: 'Quantization algorithm', icon: 'mdi:function-variant' },
+      { value: 'ZIP', label: 'Export format (pattern + guide)', icon: 'mdi:zip-box' },
+    ], 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.' },
+  ],
+  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: []
+};

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

@@ -0,0 +1,68 @@
+import type { BeadPatternGeneratorLocaleContent } from '../index';
+
+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.',
+  faqTitle: 'Preguntas Frecuentes',
+  bibliographyTitle: 'Bibliografía del Artesano',
+  ui: {
+    title: 'Generador de Patrones',
+    description: 'De fotografía a esquema de cuentas.',
+    uploadLabel: 'Sube tu foto',
+    gridSizeLabel: 'Tamaño de la cuadrícula (beads)',
+    pixelateBtn: 'Generar Patrón',
+    downloadBtn: 'Descargar Esquema',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'Referencias'
+  },
+  seo: [
+    { type: 'title', text: 'Alquimia Digital: Transmuta Píxeles en Arte Tangible', level: 2 },
+    { type: 'paragraph', html: 'Bienvenido al <strong>Estudio Definitivo de Patrones</strong>. Un motor de <em>inteligencia cromática</em> diseñado para arquitectos del Pixel Art, maestros del Miyuki y visionarios del punto de cruz. Tu puente entre lo digital y lo artesanal.' },
+    { type: 'card', icon: 'mdi:grid', title: 'La Retícula Inteligente', html: 'Nuestro algoritmo de <strong>submuestreo espacial</strong> no solo "encoge" tu imagen. Analiza la estructura visual para mapear grupos de píxeles complejos a celdas individuales, preservando la integridad de siluetas y bordes como un dibujante experto.' },
+    { type: 'card', icon: 'mdi:palette', title: 'Cuantización K-Means', html: 'Implementamos una variante del algoritmo <strong>K-Means Clustering</strong> que encuentra matemáticamente los tonos "centroides" de tu imagen. Fidelidad visual asombrosa con una paleta minimalista de 12, 24 o 32 tonos.' },
+    { type: 'title', text: 'Maestría en 3 Pasos', level: 3 },
+    { type: 'card', icon: 'mdi:image-search', title: 'La Selección Perfecta', html: 'Busca <strong>alto contraste</strong>, iluminación dramática y formas icónicas. Los retratos con fondo limpio, logotipos y arte vectorial se traducen maravillosamente.' },
+    { type: 'card', icon: 'mdi:ruler', title: 'Calibración Dimensional', html: '<strong>Miyuki Delica:</strong> 50 cuentas ≈ 8cm · <strong>Hama Midi:</strong> 50 cuentas ≈ 25cm · <strong>Punto de Cruz:</strong> 1 celda = 1 puntada.' },
+    { type: 'card', icon: 'mdi:eye-check', title: 'Ejecución Zen (Modo Visión de Túnel)', html: 'Nuestro sistema <strong>Visión de Túnel</strong> actúa como tu asistente personal, oscureciendo el ruido visual y resaltando quirúrgicamente solo la fila activa. Concentración absoluta.' },
+    { type: 'title', text: 'Lienzos Infinitos', level: 3 },
+    { type: 'list', items: [
+      '<strong>Joyería Textil:</strong> Patrones intrincados para telares y brazaletes geométricos.',
+      '<strong>Cross-Stitch:</strong> Esquemas modernos listos para ser bordados pixel a pixel.',
+      '<strong>Mosaicos:</strong> Murales de gran escala usando teselas cerámicas simplificadas.',
+      '<strong>Retro Gaming:</strong> Assets y sprites con estética 8-bit auténtica en segundos.',
+    ]},
+    { type: 'paragraph', html: 'En una era de pantallas efímeras, crear algo físico es un acto revolucionario. Esta herramienta no busca automatizar el arte, sino <strong>empoderar al artesano</strong>. Te damos la precisión computacional para que tus manos puedan construir legados duraderos.' },
+    { type: 'stats', items: [
+      { value: '10–100', label: 'Ancho del patrón (cuentas)', icon: 'mdi:arrow-expand-horizontal' },
+      { value: '2–32', label: 'Colores en la paleta', icon: 'mdi:palette-swatch' },
+      { value: 'K-Means', label: 'Algoritmo de cuantización', icon: 'mdi:function-variant' },
+      { value: 'ZIP', label: 'Exportación (patrón + guía)', icon: 'mdi:zip-box' },
+    ], columns: 4 },
+    { type: 'glossary', items: [
+      { term: 'Miyuki Delica', definition: 'Cuentas de cristal japonesas de alta precisión, cilíndricas y uniformes. Ideales para joyería y patrones geométricos complejos.' },
+      { term: 'Hama Beads', definition: 'Cuentas de plástico que se fusionan con calor (plancha). Perfectas para proyectos de pixel art de gran formato.' },
+      { term: 'Cuantización de color', definition: 'Proceso matemático para reducir los miles de colores de una imagen a una paleta limitada, manteniendo la fidelidad visual máxima posible.' },
+      { term: 'Visión de túnel', definition: 'Modo de trabajo fila a fila que oscurece el resto del patrón para ayudar a concentrarse en la fila activa sin errores.' },
+      { 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.' },
+  ],
+  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: []
+};

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

@@ -0,0 +1,61 @@
+import type { BeadPatternGeneratorLocaleContent } from '../index';
+
+export const content: BeadPatternGeneratorLocaleContent = {
+  slug: 'generateur-de-modeles-de-perles',
+  title: 'Générateur de Modèles',
+  description: 'Créez du pixel art et des schémas de perles pour Miyuki ou Hama à partir de vos photos. Algorithme de quantification de couleurs, mode vision tunnel et export ZIP.',
+  faqTitle: 'Questions Fréquemment Posées',
+  bibliographyTitle: 'Bibliographie de l\'Artisan',
+  ui: {
+    title: 'Générateur de Modèles',
+    description: 'De la photo au schéma de perles.',
+    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'
+  },
+  seo: [
+    { type: 'title', text: 'Alchimie Numérique : Transmutez les Pixels en Art Tangible', level: 2 },
+    { type: 'paragraph', html: 'Bienvenue dans le <strong>Studio de Modèles Ultime</strong>. Un <em>moteur d\'intelligence chromatique</em> conçu pour les architectes du Pixel Art, les maîtres de la Miyuki et les visionnaires du point de croix. Votre pont entre le numérique et le fait-main.' },
+    { type: 'card', icon: 'mdi:grid', title: 'La Grille Intelligente', html: 'Notre algorithme de <strong>sous-échantillonnage spatial</strong> ne se contente pas de "réduire" votre image. Il analyse la structure visuelle pour mapper des groupes de pixels complexes sur des cellules individuelles, préservant l\'intégrité des silhouettes et des contours comme le ferait un illustrateur expert.' },
+    { type: 'card', icon: 'mdi:palette', title: 'Quantification de Couleurs K-Means', html: 'Nous implémentons une variante de l\'algorithme <strong>K-Means Clustering</strong> qui trouve mathématiquement les tons "centroïdes" de votre image. Une fidélité visuelle étonnante avec une palette minimaliste de 12, 24 ou 32 couleurs.' },
+    { type: 'title', text: 'La Maîtrise en 3 Étapes', level: 3 },
+    { type: 'card', icon: 'mdi:image-search', title: 'La Sélection Parfaite', html: 'Recherchez un <strong>contraste élevé</strong>, un éclairage dramatique et des formes iconiques. Les portraits avec des fonds épurés, les logos et l\'art vectoriel se traduisent magnifiquement.' },
+    { type: 'card', icon: 'mdi:ruler', title: 'Calibration Dimensionnelle', html: '<strong>Miyuki Delica :</strong> 50 perles ≈ 8 cm · <strong>Hama Midi :</strong> 50 perles ≈ 25 cm · <strong>Point de Croix :</strong> 1 cellule = 1 point.' },
+    { type: 'card', icon: 'mdi:eye-check', title: 'Exécution Zen (Mode Vision Tunnel)', html: 'Notre système de <strong>Vision Tunnel</strong> agit comme votre assistant personnel, atténuant le bruit visuel et mettant chirurgicalement en évidence uniquement la rangée active. Une concentration absolue.' },
+    { type: 'title', text: 'Canevas Infinis', level: 3 },
+    { type: 'list', items: [
+      '<strong>Bijouterie Textile :</strong> Modèles complexes pour métiers à tisser et bracelets géométriques.',
+      '<strong>Point de Croix :</strong> Schémas modernes prêts à être brodés pixel par pixel.',
+      '<strong>Mosaïques :</strong> Murales à grande échelle utilisant des tesselles de céramique simplifiées.',
+      '<strong>Retro Gaming :</strong> Sprites et assets 8-bits authentiques en quelques secondes.',
+    ]},
+    { type: 'stats', items: [
+      { value: '10–100', label: 'Largeur en perles', icon: 'mdi:arrow-expand-horizontal' },
+      { value: '2–32', label: 'Emplacements de palette', icon: 'mdi:palette-swatch' },
+      { value: 'K-Means', label: 'Algorithme de quantification', icon: 'mdi:function-variant' },
+      { value: 'ZIP', label: 'Format d\'export (modèle + guide)', icon: 'mdi:zip-box' },
+    ], columns: 4 },
+    { type: 'paragraph', html: 'À l\'ère des écrans éphémères, créer quelque chose de physique est un acte révolutionnaire. Cet outil ne cherche pas à automatiser l\'art, mais à <strong>donner du pouvoir à l\'artisan</strong>. Nous vous offrons la précision informatique pour que vos mains puissent bâtir des héritages durables.' },
+  ],
+  faq: [
+    { question: 'Qu\'est-ce que la quantification de couleurs dans les modèles ?', answer: 'C\'est le processus de réduction des milliers de couleurs d\'une photo à quelques-unes seulement qui correspondent aux couleurs réelles des perles disponibles (ex: Miyuki ou Hama). Nous utilisons des algorithmes intelligents pour maintenir la ressemblance visuelle avec la palette minimale possible.' },
+    { question: 'Puis-je utiliser ce modèle pour le point de croix ?', answer: 'Oui, le générateur crée un diagramme de grille parfaitement compatible avec le point de croix. Il vous suffit de choisir une taille de grille correspondant à votre tissu (Aïda 14, 18, etc.).' },
+    { question: 'Quelle est la différence entre les perles Miyuki et Hama ?', answer: 'Les perles Miyuki Delica sont de très petites perles de verre précises pour la bijouterie. Les perles Hama sont en plastique et se fusionnent au fer à repasser. Notre outil vous permet d\'ajuster le rapport d\'aspect pour que le modèle ne se déforme pas selon le matériau utilisé.' },
+    { question: 'Comment fonctionne l\'algorithme de tramage (dithering) ?', answer: 'Le tramage crée l\'illusion d\'un plus grand nombre de couleurs en mélangeant des pixels de différentes couleurs dans des motifs espacés. Cela aide les dégradés de couleurs à paraître plus fluides, même avec une palette de perles limitée.' },
+  ],
+  bibliography: [
+    { name: 'Scikit-Image: Quantification de couleurs utilisant K-Means', url: 'https://scikit-learn.org/0.23/auto_examples/cluster/plot_color_quantization.html' },
+    { name: 'Spécifications des Perles Miyuki Delica', url: 'https://www.miyuki-beads.co.jp/english/seedbeads/delica.html' },
+    { name: 'Visgraf Lab: Algorithmes de Tramage (Dithering)', url: 'https://www.visgraf.impa.br/Courses/ip00/proj/Dithering1/floyd_steinberg_dithering.html' },
+  ],
+  howTo: [
+    { name: 'Charger une image claire', text: 'Sélectionnez une photo avec un bon contraste et peu de petits détails pour que le modèle soit plus facile à suivre.' },
+    { name: 'Ajuster la taille de la grille', text: 'Définissez la largeur et la hauteur en perles de votre pièce finale. Plus il y a de perles, plus il y a de détails, mais plus c\'est difficile.' },
+    { name: 'Optimiser la palette de couleurs', text: 'Réduisez le nombre de couleurs jusqu\'à ce qu\'elles correspondent aux perles dont vous disposez dans votre kit de loisirs créatifs.' },
+    { name: 'Exporter le schéma guide', text: 'Générez le modèle final avec les codes de couleur à utiliser comme référence lors de l\'assemblage de vos perles sur la plaque ou le fil.' },
+  ],
+  schemas: []
+};

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

@@ -0,0 +1,37 @@
+import type { CreativeToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import BeadPatternGeneratorComponent from './component.astro';
+import BeadPatternGeneratorSEO from './seo.astro';
+import BeadPatternGeneratorBibliography from './bibliography.astro';
+
+export interface BeadPatternGeneratorUI {
+  [key: string]: string;
+  title: string;
+  description: string;
+  uploadLabel: string;
+  gridSizeLabel: string;
+  pixelateBtn: string;
+  downloadBtn: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+}
+
+export type BeadPatternGeneratorLocaleContent = ToolLocaleContent<BeadPatternGeneratorUI>;
+
+export const beadPatternGenerator: CreativeToolEntry<BeadPatternGeneratorUI> = {
+  id: 'bead-pattern-generator',
+  icons: { bg: 'mdi:grid', fg: 'mdi:palette' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export { BeadPatternGeneratorComponent, BeadPatternGeneratorSEO, BeadPatternGeneratorBibliography };
+
+export const BEAD_PATTERN_GENERATOR_TOOL: ToolDefinition = {
+  entry: beadPatternGenerator,
+  Component: BeadPatternGeneratorComponent,
+  SEOComponent: BeadPatternGeneratorSEO,
+  BibliographyComponent: BeadPatternGeneratorBibliography,
+};

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

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { beadPatternGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await beadPatternGenerator.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}