/* global React, useRoute, useCart, useToast, Placeholder, UntitledEmbed, I, CATALOG, CATEGORIES, PRICE_BANDS */ const { useState, useMemo, useEffect } = React; function Store() { const { route, goto } = useRoute(); const initialCat = route.params?.cat || "all"; const [cat, setCat] = useState(initialCat); const [band, setBand] = useState("any"); const [sort, setSort] = useState("featured"); const [view, setView] = useState("grid"); // grid | gallery useEffect(() => { if (route.params?.cat) setCat(route.params.cat); }, [route.params?.cat]); const items = useMemo(() => { let list = CATALOG.filter((p) => cat === "all" || p.cat === cat); const pb = PRICE_BANDS.find((b) => b.key === band); if (pb?.test) list = list.filter((p) => pb.test(p.price)); if (sort === "low") list = [...list].sort((a, b) => a.price - b.price); if (sort === "high") list = [...list].sort((a, b) => b.price - a.price); if (sort === "name") list = [...list].sort((a, b) => a.name.localeCompare(b.name)); return list; }, [cat, band, sort]); return (
{/* Header band */}
§ Store · Vol. III

Editions, in small batches.

Apparel, objects, and music made by the studio, produced in numbered runs, restocked rarely. Everything ships from the studio within five days.

{/* Filters */}
{CATEGORIES.map((c) => ( ))}
{/* Grid */}

{items.length} {items.length === 1 ? "piece" : "pieces"} {cat !== "all" && `· ${cat}`}

{items.length === 0 ? (

Nothing matches that filter, yet.

) : (
{items.map((p, i) => (
goto("pdp", { id: p.id })} style={{ cursor: "pointer" }}>
{p.cover ? ( ) : p.video ? ( ) : ( )}
No. {String(i + 1).padStart(2, "0")}
{p.badge && (
{p.badge}
)}
))}
)}
); } /* ───────────────────────────────────────────────────────────────── Product detail page ───────────────────────────────────────────────────────────────── */ function PDP() { const { route, goto } = useRoute(); const { add, setOpen } = useCart(); const toast = useToast(); const id = route.params?.id; const product = CATALOG.find((p) => p.id === id) || CATALOG[0]; const [variant, setVariant] = useState(product.variants[0]); const [qty, setQty] = useState(1); const [activeImg, setActiveImg] = useState(0); useEffect(() => { setVariant(product.variants[0]); setQty(1); setActiveImg(0); }, [product.id]); const related = CATALOG.filter((p) => p.id !== product.id && p.cat === product.cat).slice(0, 3); const imgs = [ { code: product.code, label: product.name.toLowerCase(), v: product.imgVariant }, { code: product.code + "-A", label: "detail · weave", v: "deep" }, { code: product.code + "-B", label: "on figure", v: "warm" }, { code: product.code + "-C", label: "back · lay-flat", v: "cool" }, ]; return (
{/* Breadcrumb */}
{/* PRIMARY MEDIA, cover/video on top, Untitled embed below if music */}
{product.kind === "music" && product.cover ? ( <> {product.untitledId && ( )} ) : product.video ? ( ) : ( <>
{imgs.map((img, i) => ( ))}
)}
{/* INFO */}
{product.cat} · {product.code}

{product.name}

{product.subtitle}

${product.price} USD · ships within US
Variant
{product.variants.map((v) => ( ))}
Quantity
{qty}

{product.desc}

{/* Specs accordion */}
{[ ["Materials", product.kind === "music" ? "Lossless WAV (24-bit / 96kHz) · MP3 320kbps · stem package on request." : "Cotton, canvas, or wool sourced from Tuscany and Yamagata. Hardware in solid brass and bronze."], ["Care", product.kind === "music" ? "DRM-free download. Stream from your library forever." : "Wash cold, hang to dry. Steam, do not iron. Garment will wear in over time, that's the point."], ["Shipping", "Ships from the studio within 3–5 business days. Free on orders over $200."], ].map(([k, v], i) => (
{String(i + 1).padStart(2, "0")} · {k}

{v}

))}
{/* Related */}

You might also keep

{related.map((p, i) => (
goto("pdp", { id: p.id })}>
{p.cat}
{p.name} ${p.price}
))}
); } window.Store = Store; window.PDP = PDP;