// PiBead — Pattern Creator (real photo-to-bead workflow) // // Pipeline (see src/lib/color.jsx for helpers): // 1. user drops/selects an image -> File // 2. generatePatternFromImage() -> GeneratedPattern { grid, beadCounts, ... } // 3. UI lets the user edit individual cells (pencil/eraser/eyedrop/replace) // 4. addToCart() pushes a CartItem with the full pattern payload const { useState, useEffect, useRef, useMemo, useCallback } = React; function CreatePage({ onNavigate, addToCart }) { // ── Settings ───────────────────────────────────────────────────────── const [brand, setBrand] = useState('Mard'); const [gridSize, setGridSize] = useState(50); const [colorLimit, setColorLimit] = useState(null); // null = use brand max const [removeBg, setRemoveBg] = useState(false); const [denoise, setDenoise] = useState(true); // ── Image + pattern state ──────────────────────────────────────────── const [imageFile, setImageFile] = useState(null); const [imageUrl, setImageUrl] = useState(null); const [pattern, setPattern] = useState(() => window.buildDemoPattern('Mard', 50)); const [generating, setGenerating] = useState(false); const [error, setError] = useState(null); const [autoRegen, setAutoRegen] = useState(true); // ── Editing tools ──────────────────────────────────────────────────── const [tool, setTool] = useState('pencil'); const [zoom, setZoom] = useState(1); const [selectedBeadId, setSelectedBeadId] = useState(null); const [history, setHistory] = useState({ past: [], future: [] }); const [hoverCell, setHoverCell] = useState(null); const [isDragging, setIsDragging] = useState(false); // ── Cart feedback ──────────────────────────────────────────────────── const [showAdded, setShowAdded] = useState(false); const [showExport, setShowExport] = useState(false); const palette = window.BEAD_BRANDS[brand].palette; const paletteHex = useMemo(() => { const m = {}; for (const p of palette) m[p.id] = p.hex; return m; }, [palette]); // Counts derived from current pattern grid const counts = useMemo(() => { if (!pattern) return []; return Object.entries(pattern.beadCounts) .map(([id, count]) => ({ ...window.BEAD_BY_ID[id], count })) .filter(b => b && b.count > 0) .sort((a, b) => b.count - a.count); }, [pattern]); // Re-pick the default selected bead when brand changes useEffect(() => { if (!selectedBeadId || !window.BEAD_BY_ID[selectedBeadId] || window.BEAD_BY_ID[selectedBeadId].brand !== brand) { // pick the most-used color of the current pattern, else palette[0] if (counts.length) setSelectedBeadId(counts[0].id); else setSelectedBeadId(palette[0].id); } }, [brand, counts, palette]); // ── File handling ──────────────────────────────────────────────────── async function handleFile(file) { if (!file) return; setError(null); if (!file.type.startsWith('image/')) { setError('Please upload an image file (jpg, png, webp).'); return; } if (file.size > 20 * 1024 * 1024) { setError('Image is too large. Max 20 MB.'); return; } setImageFile(file); // Preview URL if (imageUrl) URL.revokeObjectURL(imageUrl); setImageUrl(URL.createObjectURL(file)); if (autoRegen) await runGenerate(file); } async function runGenerate(fileOverride) { const file = fileOverride || imageFile; if (!file) return; setGenerating(true); setError(null); try { // Small yield so the spinner renders before heavy work await new Promise(r => setTimeout(r, 50)); const p = await window.generatePatternFromImage(file, { brand, gridSize, colorLimit, removeBg, denoise, }); setPattern(p); setHistory({ past: [], future: [] }); } catch (e) { console.error(e); setError(e.message || 'Pattern generation failed.'); } finally { setGenerating(false); } } // When grid size or brand changes, auto-regen if we have a real source image useEffect(() => { if (imageFile && autoRegen) runGenerate(); // eslint-disable-next-line }, [gridSize, brand, removeBg, denoise, colorLimit]); // Drop image directly onto the canvas / page useEffect(() => { const onDragOver = (e) => { e.preventDefault(); }; const onDrop = (e) => { e.preventDefault(); const f = e.dataTransfer?.files?.[0]; if (f) handleFile(f); }; window.addEventListener('dragover', onDragOver); window.addEventListener('drop', onDrop); return () => { window.removeEventListener('dragover', onDragOver); window.removeEventListener('drop', onDrop); }; }); // ── Editing helpers ────────────────────────────────────────────────── function pushHistory() { setHistory(h => ({ past: [...h.past, pattern].slice(-30), future: [] })); } function undo() { if (!history.past.length) return; const prev = history.past[history.past.length - 1]; setHistory(h => ({ past: h.past.slice(0, -1), future: [pattern, ...h.future] })); setPattern(prev); } function redo() { if (!history.future.length) return; const nxt = history.future[0]; setHistory(h => ({ past: [...h.past, pattern], future: h.future.slice(1) })); setPattern(nxt); } function applyTool(x, y) { setPattern(p => { if (!p) return p; const grid = p.grid; const current = grid[y][x]; let next = grid; if (tool === 'pencil') { if (!selectedBeadId || current === selectedBeadId) return p; next = grid.map(r => r.slice()); next[y][x] = selectedBeadId; } else if (tool === 'eraser') { const lightest = palette.reduce((acc, b) => (b.rgb.r + b.rgb.g + b.rgb.b) > (acc.rgb.r + acc.rgb.g + acc.rgb.b) ? b : acc, palette[0]); next = grid.map(r => r.slice()); next[y][x] = lightest.id; } else if (tool === 'eyedrop') { setSelectedBeadId(current); setTool('pencil'); return p; } else if (tool === 'replace') { if (!selectedBeadId || current === selectedBeadId) return p; next = grid.map(r => r.map(c => c === current ? selectedBeadId : c)); } else { return p; } return rebuildPattern(p, next); }); } function rebuildPattern(p, newGrid) { const beadCounts = window.countBeadsFromGrid(newGrid); const totalBeads = Object.values(beadCounts).reduce((s, n) => s + n, 0); const colorCount = Object.keys(beadCounts).length; const pal = window.BEAD_BRANDS[p.brand].palette; return { ...p, grid: newGrid, beadCounts, totalBeads, colorCount, estimatedPrice: window.calculateEstimatedKitPrice(beadCounts, pal), previewImageUrl: window.gridToDataURL(newGrid, 8), }; } function onCellDown(x, y) { if (tool === 'hand') return; pushHistory(); setIsDragging(true); applyTool(x, y); } function onCellEnter(x, y) { setHoverCell({ x, y }); if (isDragging && (tool === 'pencil' || tool === 'eraser')) applyTool(x, y); } useEffect(() => { const up = () => setIsDragging(false); window.addEventListener('mouseup', up); window.addEventListener('touchend', up); return () => { window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); }; }, []); // ── Add to cart ────────────────────────────────────────────────────── function addToCartHandler() { if (!pattern || pattern.isDemo) return; const item = { id: 'cart-' + pattern.id, type: 'custom-kit', title: 'Custom Pixel Kit', patternId: pattern.id, previewImageUrl: pattern.previewImageUrl, brand: pattern.brand, gridSize: pattern.gridSize, totalBeads: pattern.totalBeads, colorCount: pattern.colorCount, beadCounts: pattern.beadCounts, estimatedPrice: pattern.estimatedPrice, qty: 1, }; addToCart && addToCart(item); setShowAdded(true); setTimeout(() => setShowAdded(false), 2400); setTimeout(() => window.dispatchEvent(new CustomEvent('pibead:open-cart')), 400); } function downloadPattern() { if (!pattern) return; const url = window.gridToDataURL(pattern.grid, 16); const a = document.createElement('a'); a.href = url; a.download = `pibead-${pattern.id}.png`; a.click(); } function savePattern() { if (!pattern) return; try { const saved = JSON.parse(localStorage.getItem('pibead.saved') || '[]'); saved.push({ ...pattern, savedAt: new Date().toISOString() }); localStorage.setItem('pibead.saved', JSON.stringify(saved.slice(-10))); setShowAdded(true); setTimeout(() => setShowAdded(false), 1500); } catch (e) {} } const canAddToCart = pattern && !pattern.isDemo && !generating; return (
0} canRedo={history.future.length > 0} onSave={savePattern} onExport={() => setShowExport(true)} onAdd={addToCartHandler} canAddToCart={canAddToCart} pattern={pattern} onNavigate={onNavigate} />
{ setImageFile(null); if (imageUrl) URL.revokeObjectURL(imageUrl); setImageUrl(null); setPattern(window.buildDemoPattern(brand, gridSize)); }} onGenerate={() => runGenerate()} generating={generating} error={error} />
setHoverCell(null)} onFileDrop={handleFile} />
{showExport && window.ExportModal && ( setShowExport(false)} /> )} {showAdded && (
Added to cart
{pattern?.totalBeads?.toLocaleString()} beads · {pattern?.colorCount} colors · ${pattern?.estimatedPrice?.toFixed(2)}
)}
); } window.CreatePage = CreatePage; // ── Top Toolbar ──────────────────────────────────────────────────────── function CreatorToolbar({ tool, setTool, zoom, setZoom, undo, redo, canUndo, canRedo, onSave, onExport, onAdd, canAddToCart, pattern, onNavigate, cartCount }) { const tools = [ { id: 'hand', icon: 'Hand', label: 'Pan' }, { id: 'pencil', icon: 'Pencil', label: 'Pencil' }, { id: 'eraser', icon: 'Eraser', label: 'Eraser' }, { id: 'eyedrop', icon: 'Eyedrop', label: 'Eyedropper' }, { id: 'replace', icon: 'Replace', label: 'Replace all' }, ]; return (
{ e.preventDefault(); onNavigate && onNavigate('home'); }} style={{ display: 'flex', alignItems: 'center' }} title="Tobeads home"> Creator
{tools.map(t => { const Icon = window.Icon[t.icon]; return ( ); })} {Math.round(zoom*100)}%
); } // Click-based compact nav menu (replaces hover HUD inside the editor) function ToolbarMenu({ onNavigate, cartCount }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } if (open) document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); const links = [ ['Home', 'home'], ['Quick Start', 'quickstart'], ['Preset World', 'presets'], ['Creator Mode', 'create'], ['Gallery', 'gallery'], ]; return (
{open && (
{links.map(([label, route]) => ( ))}
)}
); } // ── Left Settings Panel ────────────────────────────────────────────── function CreatorSettingsPanel({ brand, setBrand, gridSize, setGridSize, colorLimit, setColorLimit, removeBg, setRemoveBg, denoise, setDenoise, autoRegen, setAutoRegen, imageFile, imageUrl, pattern, onFile, onClearImage, onGenerate, generating, error }) { return (
{/* Source */} {error && (
{error}
)} {/* Brand */}
{Object.values(window.BEAD_BRANDS).map(b => ( ))}
{/* Grid */}
{[30, 50, 80].map(s => ( ))}
{/* Color limit */} {/* Optimization */} setDenoise(!denoise)}/> setRemoveBg(!removeBg)}/> setAutoRegen(!autoRegen)}/>
); } function ColorLimitSlider({ value, setValue, max }) { const v = value ?? max; return (
{v === max ? 'No limit' : v + ' colors max'} {v} / {max}
{ const n = Number(e.target.value); setValue(n === max ? null : n); }} />
); } function ImageUploader({ imageFile, imageUrl, onFile, onClear }) { const ref = useRef(null); const [hover, setHover] = useState(false); function onDrop(e) { e.preventDefault(); setHover(false); const f = e.dataTransfer?.files?.[0]; if (f) onFile(f); } if (imageFile && imageUrl) { return (
{imageFile.name}
{(imageFile.size/1024).toFixed(0)} kb · {imageFile.type.split('/')[1].toUpperCase()}
onFile(e.target.files?.[0])}/>
); } return (
setHover(true)} onDragLeave={() => setHover(false)} onDragOver={(e) => e.preventDefault()} onDrop={onDrop} onClick={() => ref.current?.click()} style={{ border: '1.5px dashed ' + (hover ? 'var(--ink)' : 'var(--line-2)'), background: hover ? 'rgba(255,216,61,0.12)' : 'rgba(17,17,17,0.02)', borderRadius: 12, padding: 22, textAlign: 'center', cursor: 'pointer', transition: 'all .15s ease', }} >
Drop a photo
or click to browse · JPG · PNG · WEBP · ≤20 MB
onFile(e.target.files?.[0])}/>
); } // ── Helper subcomponents ───────────────────────────────────────────── function Group({ title, hint, children }) { return (
{title}
{children} {hint &&
{hint}
}
); } function Stat({ label, value }) { return (
{label}
{value}
); } function ToggleRowControl({ label, on, onChange, sub }) { return ( ); } // ── Bottom Status Bar (professional editor status) ────────────────────── function CreatorStatusBar({ pattern, brand, gridSize, selectedBead, hoverCell, zoom, generating }) { const isDemo = pattern?.isDemo; const stateLabel = generating ? 'Generating…' : (isDemo ? 'Demo Pattern · Upload to begin' : 'Pattern ready · Auto-saved'); const dotColor = generating ? 'var(--yellow)' : (isDemo ? 'var(--muted)' : 'var(--green)'); const cur = hoverCell ? `${hoverCell.x}, ${hoverCell.y}` : '—, —'; return (
{stateLabel} Brand {brand} Grid {gridSize}×{gridSize} Color {selectedBead ? ( {selectedBead.code} {selectedBead.name} ) : —} Cursor {cur}
{!isDemo && pattern && ( Beads {pattern.totalBeads.toLocaleString()} · {pattern.colorCount} colors )} Zoom {Math.round(zoom*100)}%
); } function StatusSeg({ children, first }) { return ( {children} ); } // ── Canvas Header ──────────────────────────────────────────────────── function CanvasHeader({ brand, gridSize, hoverCell, grid }) { const hoverId = grid && hoverCell ? grid[hoverCell.y]?.[hoverCell.x] : null; const bead = hoverId ? window.BEAD_BY_ID[hoverId] : null; return (
Canvas {gridSize} × {gridSize} ·{brand}
{bead ? ( <>
{bead.code} · {bead.name} · ({hoverCell.x}, {hoverCell.y}) ) : ( Hover a cell )}
); } // ── Canvas Area ────────────────────────────────────────────────────── function CanvasArea({ pattern, paletteHex, generating, zoom, tool, onCellDown, onCellEnter, onCellLeave, onFileDrop }) { if (!pattern) return null; const { grid, gridSize } = pattern; return (
e.preventDefault()} onDrop={(e) => { e.preventDefault(); const f = e.dataTransfer?.files?.[0]; if (f) onFileDrop(f); }} > {generating && }
{ // touch dragging doesn't fire mouseenter — hit-test the finger position // and paint the cell underneath so drag-to-draw works on phones. const t = e.touches[0]; if (!t) return; const el = document.elementFromPoint(t.clientX, t.clientY); if (el && el.dataset && el.dataset.cx !== undefined) { onCellEnter(Number(el.dataset.cx), Number(el.dataset.cy)); } }} > {grid.flatMap((row, y) => row.map((id, x) => (
onCellDown(x, y)} onMouseEnter={() => onCellEnter(x, y)} onTouchStart={(e) => { e.preventDefault(); onCellDown(x, y); }} /> )))}
{gridSize <= 50 && (
)}
); } function GeneratingOverlay() { return (
Mapping pixels to beads…
Snapping each pixel to the nearest bead color
); } // ── Bottom Palette Bar ─────────────────────────────────────────────── function PaletteBar({ palette, selected, setSelected, brand }) { const bead = palette.find(p => p.id === selected) || palette[0]; return (
Color
{bead.code} {bead.name} {bead.hex.toUpperCase()}
{brand} · {palette.length} colors
{palette.map(c => ( setSelected(c.id)} size={22}/> ))}
); } // ── Right Order Summary ────────────────────────────────────────────── function CreatorOrderSummary({ pattern, counts, brand, onAdd, canAdd }) { if (!pattern) return null; const brandDef = window.BEAD_BRANDS[brand]; return (
YOU DESIGN {pattern.isDemo && DEMO}

Custom Pixel Kit

${pattern.estimatedPrice.toFixed(2)} estimated
{brand} · {pattern.gridSize}×{pattern.gridSize} · ships in 2 business days
Summary
{!canAdd && pattern.isDemo && (
Upload a photo to enable checkout
)}
Free shipping 30-day returns Bio plastic
); } function PriceBreakdown({ pattern, brandDef }) { const beadCost = (pattern.totalBeads / 1000) * brandDef.basePrice; const handling = pattern.colorCount * 0.15; return (
); } function PriceRow({ label, value }) { return (
{label} {value}
); } function SummaryStat({ label, value }) { return (
{label}
{value}
); }