// PiBead — Cart drawer // // Global slide-in cart, summons via window event 'pibead:open-cart'. // Items shape: // { id, type, title, patternId?, previewImageUrl?, brand?, gridSize?, // totalBeads?, colorCount?, beadCounts?, estimatedPrice, qty } const { useState, useEffect, useMemo } = React; function CartDrawer({ items, setItems, open, setOpen }) { useEffect(() => { const handler = () => setOpen(true); window.addEventListener('pibead:open-cart', handler); return () => window.removeEventListener('pibead:open-cart', handler); }, []); useEffect(() => { const onEsc = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onEsc); return () => window.removeEventListener('keydown', onEsc); }, []); const total = items.reduce((s, it) => s + (it.estimatedPrice || it.price || 0) * (it.qty || 1), 0); const shippingThreshold = 40; const remaining = Math.max(0, shippingThreshold - total); const progress = Math.min(100, (total / shippingThreshold) * 100); function updateQty(idx, delta) { setItems(items => items.map((it, i) => i === idx ? { ...it, qty: Math.max(1, (it.qty || 1) + delta) } : it)); } function remove(idx) { setItems(items => items.filter((_, i) => i !== idx)); } return ( <> {/* Backdrop */}
setOpen(false)} /> {/* Drawer */} ); } window.CartDrawer = CartDrawer; function EmptyCart() { return (
CART EMPTY

Pick a mode and start a bead build.

window.dispatchEvent(new CustomEvent('pibead:close-cart'))} className="pbtn pbtn-ylw pbtn-sm" style={{ marginTop: 20 }}> DESIGN A KIT
); } function CartItemCard({ item, onInc, onDec, onRemove }) { const isCustom = item.type === 'custom-kit'; return (
{/* Preview */}
{item.previewImageUrl ? ( ) : ( )} {isCustom && ( YOU )}
{/* Detail */}
{item.title}
{isCustom ? (
{item.brand} · {item.gridSize}×{item.gridSize} · {item.totalBeads?.toLocaleString()} beads
) : (
KIT #{(item.id || 'stock').toString().slice(0,6)}
)}
{/* Top bead colors */} {isCustom && item.beadCounts && (
{Object.entries(item.beadCounts).sort((a,b) => b[1] - a[1]).slice(0, 7).map(([id, n]) => { const b = window.BEAD_BY_ID[id]; if (!b) return null; return
; })}
)} {/* Qty + price row */}
{item.qty || 1}
${((item.estimatedPrice || item.price || 0) * (item.qty || 1)).toFixed(2)}
); }