{store.cover ? ( {store.title}

) : null} {/* gradient overlay for text legibility */}

); } /** Mini-store feed card (TikTok-style); loads clipping previews via /api/share when active. */ function StoreFeedCard({ store, isActive, onOpen, onSave, saved, shape, density, dark }) { const radii = { rounded: 28, sharp: 8, blob: 36 }; const padTop = density === 'compact' ? 60 : 64; const padBottom = density === 'compact' ? 96 : 100; const [patchTick, bumpPatch] = React.useReducer((x) => x + 1, 0); const prefetching = React.useRef(false); React.useEffect(() => { const h = () => bumpPatch(); window.addEventListener('deanna:stores-patch', h); return () => window.removeEventListener('deanna:stores-patch', h); }, []); React.useEffect(() => { if (!isActive || !store?.shareSlug || store.productsLoaded || prefetching.current) return; prefetching.current = true; window.hydrateStoreProducts?.(store.shareSlug) .then((products) => { window.mergeProductsIntoGlobalStore?.(store.bookId, store.shareSlug, products || []); prefetching.current = false; }) .catch(() => { prefetching.current = false; }); }, [isActive, store.shareSlug, store.bookId, store.productsLoaded]); const productsPeek = React.useMemo(() => { const cur = window.findStore?.(store.id); const list = (cur && Array.isArray(cur.products)) ? cur.products : (store.products || []); return list; }, [store.id, patchTick, isActive]); const brandLinePrimary = React.useMemo(() => { const first = productsPeek[0]; if (first && first.img && first.name) return `${first.name.slice(0, 42)}`; if (store.creatorName) return store.creatorName; const n = typeof store.items === 'number' ? store.items : 0; return n ? `${n} clipping${n === 1 ? '' : 's'} en esta tienda` : 'MiniTienda Deanna'; }, [productsPeek, store.creatorName, store.items]); const brandMarcaSuffix = React.useMemo(() => { const imgs = productsPeek.filter((p) => p.img); const shown = imgs.length || (typeof store.items === 'number' ? store.items : 0); return shown <= 1 ? `${shown} pieza` : `${shown} piezas`; }, [productsPeek, store.items]); return (

{store.cover ? (

) : null} {/* dark gradient veil */}

{/* mini-store label chip */}

MiniTienda

{/* count + saves */}

{store.items} pzs

{/* product peek strip */}

{productsPeek.slice(0, 4).map((p, i) => (

{p.img ? (

) : ( {p.clipType === 'video' ? '▶' : '·'} )}

))}

{/* title block */}

{brandLinePrimary} · {brandMarcaSuffix}

{store.title}

{store.vibe}

{/* side actions */}

{ e.stopPropagation(); onSave(); }} active={saved}> {Icon.heart('#fff', 2, saved ? '#FF6B6B' : 'none')} { e.stopPropagation(); onSave(); }}> {Icon.bookmark('#fff', 2)} {Icon.share('#fff', 2)}

); } function SideAction({ children, label, onClick, active }) { return ( ); } // ─── Pinterest masonry tile ─────────────────────────────────────────────── function StorePinTile({ store, onOpen, onSave, saved, shape, h }) { const radii = { rounded: 18, sharp: 4, blob: 28 }; return (

{store.cover ? (

) : null}

{store.title}

{store.items} pzs · {fmtSaves(store.saves)}

); } // ─── Hybrid (hero + peek) card ──────────────────────────────────────────── function StoreHybridCard({ store, onOpen, onSave, saved, shape }) { const radii = { rounded: 22, sharp: 6, blob: 32 }; return (

{store.cover ? (

) : null}

{store.vibe}

{store.title}

{(store.products || []).slice(0, 5).map((p) => (

{p.img ? (

) : (

{p.clipType === 'video' ? '▶' : '·'}

)}

))}

); } // ─── Product card ───────────────────────────────────────────────────────── function ProductCard({ product, onOpen, shape }) { const radii = { rounded: 14, sharp: 4, blob: 22 }; return (

{product.img ? ( {product.name}

) : (

{product.clipType === 'video' ? '▶ vídeo' : 'Clip'}

)}

{product.brand}

{product.name}

{product.price}

); } // ─── helpers ────────────────────────────────────────────────────────────── function fmtSaves(n) { if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k'; return String(n); } Object.assign(window, { Icon, Tag, Cover, StoreFeedCard, StorePinTile, StoreHybridCard, ProductCard, fmtSaves, });