const { Button, IconButton, Icon, Card, Badge, Tag } = window.SuperiorPrintingHouseDesignSystem_81d178; const TONES = ["mid", "light", "dark", "mid", "light", "mid"]; /* The card opens here: the photographs at the size they were shot, and the copy that was too long for a card, without leaving the grid behind. A page per project would need routes, a URL scheme and a way back — this needs a piece of state. Esc, the backdrop and the close button all close it, and the page behind is frozen while it is open: an overlay you can scroll the page under looks broken the moment the wheel moves. */ function Lightbox({ item, t, onClose }) { const p = item.p; const v = cardView(t, p); const imgs = galleryList(p.images, p.src); const [at, setAt] = React.useState(0); const step = (d) => setAt((n) => (n + d + imgs.length) % imgs.length); React.useEffect(() => { const key = (e) => { if (e.key === "Escape") onClose(); else if (e.key === "ArrowRight") step(1); else if (e.key === "ArrowLeft") step(-1); }; document.addEventListener("keydown", key); const held = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", key); document.body.style.overflow = held; }; }, [imgs.length]); return ( ); } /* The grid is every card the home page rails carry, not a second list that has to be kept in step with them — same photographs, same copy, same admin paths. The chips are the categories those cards declare, so adding a card in the admin adds its category here for free. `focus` is the category the visitor clicked on a home card; null means show everything. */ function Work({ go, t, focus }) { const revealGrid = useReveal(), revealCta = useReveal(); /* `focus` says where the visitor came from: { rail } is the copy.js path of the rail they were looking at, { cat } a category they clicked on a card. The page never mixes rails — arriving from Slogan shows Slogan's work and Slogan's categories, not every tag on the site. */ const rail = (focus && focus.rail) || null; const items = allWorkItems(t).filter(it => !rail || it.path.indexOf(rail + ".") === 0); /* Chip order follows the master list in copy.js so it does not reshuffle every time a card is added, but a category only appears once a card actually carries it — and a category typed onto a card without being in the master list still gets a chip rather than being unreachable. */ const used = new Set(items.flatMap(it => workCats(it.p))); const master = t.work.categories || []; const cats = [...master.filter(c => used.has(c)), ...[...used].filter(c => !master.includes(c))]; const [filter, setFilter] = React.useState(focus && cats.includes(focus.cat) ? focus.cat : null); /* The open card itself, not its index: the filter chips rebuild the list under it. */ const [open, setOpen] = React.useState(null); /* Order is the order in copy.js — the panel's reordering arrows are the only thing that decides it, now that the year is gone. */ const list = filter ? items.filter(it => workCats(it.p).includes(filter)) : items; return (

setFilter(null)} selected={!filter}>{t.work.filterAll} {cats.map(c => setFilter(c)} selected={filter === c}>{c})}

{list.map(({ p, path }, n) => ( setOpen({ p, path })} style={{ cursor: "pointer" }} media={

} /> ))}

{open && setOpen(null)} />}

{t.work.cta.eyebrow}

{t.work.cta.title}

); } Object.assign(window, { Work });