63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:Td67,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { defaultLabels } from "./labels"; import type { ShoeWallLabels } from "./types"; export type AddState = "needs-size" | "ready" | "adding" | "added" | "again" | "error" | "sold-out"; export type AddToBagButtonProps = { /** No size chosen yet. */ needsSize: boolean; soldOut?: boolean; /** Resolves when the bag has it. A rejected promise shows the error state. */ onAdd: () => void | Promise; /** The size is missing: move focus to the sizes and give them a soft pulse. */ onNeedSize?: () => void; /** Changes when the size does: the button goes back to ready at once. */ sizeKey?: string | null; labels?: Partial; onStateChange?: (state: AddState) => void; }; const MIN_ADDING = 350; const AGAIN_AFTER = 2400; /** One fixed size. No state ever moves anything around it. */ export function AddToBagButton({ needsSize, soldOut, onAdd, onNeedSize, sizeKey, labels: given, onStateChange }: AddToBagButtonProps) { const labels = { ...defaultLabels, ...given }; const [phase, setPhase] = useState<"idle" | "adding" | "added" | "again" | "error">("idle"); const timer = useRef(0); const busy = useRef(false); // A different size means a fresh start. const [lastSize, setLastSize] = useState(sizeKey); if (lastSize !== sizeKey) { setLastSize(sizeKey); setPhase("idle"); } useEffect(() => () => window.clearTimeout(timer.current), []); const state: AddState = soldOut ? "sold-out" : needsSize ? "needs-size" : phase === "idle" ? "ready" : phase; useEffect(() => { onStateChange?.(state); }, [state, onStateChange]); const click = useCallback(async () => { if (soldOut) return; if (needsSize) { onNeedSize?.(); return; } if (busy.current) return; // A double click is one click. busy.current = true; setPhase("adding"); const started = performance.now(); let failed = false; try { await onAdd(); } catch { failed = true; } const left = MIN_ADDING - (performance.now() - started); if (left > 0) await new Promise((r) => window.setTimeout(r, left)); busy.current = false; if (failed) { setPhase("error"); return; } setPhase("added"); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setPhase("again"), AGAIN_AFTER); }, [needsSize, onAdd, onNeedSize, soldOut]); const text: Record = { "needs-size": labels.chooseSize, ready: labels.addToBag, adding: labels.adding, added: labels.inBag, again: labels.addAnother, error: labels.addFailed, "sold-out": labels.soldOutButton, }; return ( ); } 65:T140e,"use client"; import { useEffect, useRef } from "react"; import { createPortal } from "react-dom"; import { defaultFormatPrice, defaultLabels } from "./labels"; import type { ShoeWallLabels } from "./types"; export type BagItem = { key: string; name: string; size: string; quantity: number; price: number; currency: string; image: string; alt?: string; href?: string; }; export type BagPeekProps = { open: boolean; items: BagItem[]; onClose: () => void; onRemove: (key: string) => void; onQuantity?: (key: string, quantity: number) => void; onCheckout?: () => void; labels?: Partial; formatPrice?: (amount: number, currency: string) => string; theme?: "auto" | "light" | "dark"; dir?: "ltr" | "rtl"; top?: number; }; /** A compact look into the bag: image, name, size, quantity, remove, subtotal, checkout. */ export function BagPeek({ open, items, onClose, onRemove, onQuantity, onCheckout, labels: given, formatPrice = defaultFormatPrice, theme = "auto", dir, top = 0 }: BagPeekProps) { const labels = { ...defaultLabels, ...given }; const panel = useRef(null); const opener = useRef(null); useEffect(() => { if (!open) return; opener.current = document.activeElement; panel.current?.focus(); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); if (e.key === "Tab" && panel.current) { const all = panel.current.querySelectorAll("button, a[href]"); if (!all.length) return; const first = all[0]; const last = all[all.length - 1]; if (e.shiftKey && (document.activeElement === first || document.activeElement === panel.current)) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener("keydown", onKey); return () => { document.removeEventListener("keydown", onKey); (opener.current as HTMLElement | null)?.focus?.(); }; }, [open, onClose]); if (!open || typeof document === "undefined") return null; const subtotal = items.reduce((sum, i) => sum + i.price * i.quantity, 0); const currency = items[0]?.currency ?? "USD"; return createPortal(

, document.body, ); } 66:T4d61,/** * One flight for every rearrangement, on the Web Animations API. * * Rules kept here: transform and opacity only; px, never % or container units; will-change only * while a shoe flies; React commits the new order once, at the start, and never during a flight. * Each shoe's path is sampled into keyframes, so an arc, a critically damped landing and a * retarget from mid-air are all plain data. */ export type MoveKind = "shuffle" | "sort" | "filter" | "density" | "restore"; export type MoveOptions = { kind: MoveKind; /** The control that started it: the stagger spreads out from here. */ origin?: Element | null; commit: () => void; /** Runs when every shoe has landed. */ onSettled?: () => void; /** Called for each landing, for the sound. */ onLand?: () => void; }; type Pose = { x: number; y: number; width: number }; type Flying = { animations: Animation[]; fly: HTMLElement; /** On its shelf, and waiting for the rest of the move to land. */ landed?: boolean; }; /** * Where to sample a flight, as shares of its time. Most keyframes go where the path bends and the * landing eases: the browser parses every one in the click's own frame, 18 shoes at a time. */ const SAMPLE_AT = [0, 0.04, 0.09, 0.15, 0.22, 0.3, 0.38, 0.46, 0.52, 0.58, 0.64, 0.7, 0.76, 0.82, 0.845, 0.87, 0.9, 0.93, 0.965, 1]; const MAX_FLIERS = 24; const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v)); const easeOut = (t: number) => 1 - (1 - t) ** 3; const easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2); /** From rest at 1 to exactly 0, with no overshoot: it never passes below the shelf. */ const OMEGA = 6; const RESIDUE = (1 + OMEGA) * Math.exp(-OMEGA); const damped = (v: number) => ((1 + OMEGA * v) * Math.exp(-OMEGA * v) - RESIDUE) / (1 - RESIDUE); export function flightDuration(distance: number): number { return clamp(420 + 0.18 * distance, 480, 760); } type PathInput = { dx: number; dy: number; scale: number; lift: boolean; jitter: number; }; /** Where the shoe is at t in 0..1, relative to where it lands. */ export function pathAt(t: number, p: PathInput): { x: number; y: number; s: number } { const distance = Math.hypot(p.dx, p.dy); const arc = clamp(0.18 * distance, 24, 96) * (1 + p.jitter * 0.18); const liftEnd = p.lift ? 0.22 : 0; const travelEnd = p.lift ? 0.82 : 0.8; const startY = p.lift ? p.dy - 18 : p.dy; const liftScale = p.lift ? p.scale * 1.05 : p.scale; if (t < liftEnd) { const e = easeOut(t / liftEnd); return { x: p.dx, y: p.dy - 18 * e, s: p.scale * (1 + 0.05 * e) }; } if (t < travelEnd) { const u = easeInOut((t - liftEnd) / (travelEnd - liftEnd)); const midX = p.dx / 2; const midY = (startY - 12) / 2 - arc; const a = (1 - u) ** 2; const b = 2 * u * (1 - u); const c = u ** 2; return { x: a * p.dx + b * midX, y: a * startY + b * midY + c * -12, s: liftScale + (1.03 - liftScale) * u, }; } const v = damped((t - travelEnd) / (1 - travelEnd)); return { x: 0, y: -12 * v, s: 1 + 0.03 * v }; } function framesFor(p: PathInput): Keyframe[] { return SAMPLE_AT.map((at) => { const { x, y, s } = pathAt(at, p); return { offset: at, transform: at === 1 ? "translate3d(0px, 0px, 0px) scale(1)" : `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0px) scale(${s.toFixed(4)})`, }; }); } function readMatrix(el: HTMLElement): { e: number; f: number; a: number } { const value = getComputedStyle(el).transform; if (!value || value === "none") return { e: 0, f: 0, a: 1 }; const m = new DOMMatrixReadOnly(value); return { e: m.e, f: m.f, a: m.a }; } export class WallEngine { private flying = new Map(); private layer: HTMLElement | null = null; private runId = 0; constructor( private box: () => HTMLElement | null, private reduced: () => boolean, ) {} private wall(): HTMLElement | null { return this.box()?.querySelector(".pw-wall") ?? null; } private slots(): HTMLElement[] { const wall = this.wall(); return wall ? [...wall.querySelectorAll(":scope > .pw-slot")] : []; } /** Where each shoe is now: its place in the layout plus whatever its flight has added. */ private poses(read: boolean): Map { const out = new Map(); for (const slot of this.slots()) { const fly = slot.querySelector(".pw-fly"); const stage = fly?.parentElement; if (!fly || !stage) continue; const rect = stage.getBoundingClientRect(); const m = read && this.flying.has(slot.dataset.id as string) ? readMatrix(fly) : { e: 0, f: 0, a: 1 }; out.set(slot.dataset.id as string, { x: rect.left + rect.width / 2 + m.e, y: rect.bottom + m.f, width: rect.width * m.a, }); } return out; } private overlay(): HTMLElement | null { const box = this.box(); if (!box) return null; if (!this.layer || !this.layer.isConnected) { this.layer = document.createElement("div"); this.layer.className = "pw-overlay"; this.layer.setAttribute("aria-hidden", "true"); box.appendChild(this.layer); } return this.layer; } /** Copies of what is about to change, fading out where they are: a ticket never just vanishes. */ private fadeCopies(selector: string, duration: number) { const box = this.box(); const layer = this.overlay(); if (!box || !layer) return; const origin = box.getBoundingClientRect(); const top = window.innerHeight * -0.2; const bottom = window.innerHeight * 1.2; for (const slot of this.slots()) { const source = slot.querySelector(selector); if (!source) continue; const rect = source.getBoundingClientRect(); if (rect.bottom < top || rect.top > bottom) continue; const copy = source.cloneNode(true) as HTMLElement; copy.style.cssText = `position:absolute;left:${rect.left - origin.left}px;top:${rect.top - origin.top}px;width:${rect.width}px;margin:0;`; layer.appendChild(copy); const fade = copy.animate([{ opacity: 1 }, { opacity: 0 }], { duration, easing: "ease-out", fill: "both" }); fade.onfinish = () => copy.remove(); fade.oncancel = () => copy.remove(); } } /** A shoe that leaves the wall: its copy rises a little and fades where it stood. */ private leaving(gone: { fly: HTMLElement; pose: Pose }[]) { const box = this.box(); const layer = this.overlay(); if (!box || !layer) return; const origin = box.getBoundingClientRect(); for (const { fly, pose } of gone) { const copy = fly.cloneNode(true) as HTMLElement; const rectHeight = fly.getBoundingClientRect().height; copy.style.cssText = `position:absolute;left:${pose.x - pose.width / 2 - origin.left}px;top:${pose.y - rectHeight - origin.top}px;width:${pose.width}px;bottom:auto;right:auto;`; layer.appendChild(copy); const anim = copy.animate( [ { transform: "translate3d(0,0,0) scale(1)", opacity: 1 }, { transform: "translate3d(0,-18px,0) scale(1.03)", opacity: 0 }, ], { duration: 240, easing: "cubic-bezier(0.3,0,0.6,1)", fill: "both" }, ); anim.onfinish = () => copy.remove(); anim.oncancel = () => copy.remove(); } } /** Read the shoes in the air and let go of their animations, so the commit starts from a clean slate. */ private release() { for (const { animations, fly } of this.flying.values()) { for (const a of animations) { a.onfinish = null; a.cancel(); } fly.style.willChange = ""; } const parents = new Set(); for (const { fly } of this.flying.values()) { const li = fly.closest(".pw-slot"); if (li) parents.add(li); } for (const li of parents) li.style.zIndex = ""; this.flying.clear(); } move({ kind, origin, commit, onSettled, onLand }: MoveOptions) { const box = this.box(); if (!box) { commit(); return; } const id = ++this.runId; if (this.reduced()) { this.release(); commit(); const wall = this.wall(); const fade = wall?.animate([{ opacity: 0.001 }, { opacity: 1 }], { duration: 180, easing: "ease-out" }); if (fade) fade.onfinish = () => onSettled?.(); else onSettled?.(); return; } const wasAirborne = new Set([...this.flying].filter(([, f]) => !f.landed).map(([shoe]) => shoe)); const first = this.poses(true); const previousShoes = new Map(this.slots().map((s) => [s.dataset.id as string, s.querySelector(".pw-fly") as HTMLElement])); const beforeHeight = box.offsetHeight; const boxRect = box.getBoundingClientRect(); const bottomInView = boxRect.bottom < window.innerHeight + 40; // After a density change the shoe nearest the middle of the view stays in view. let anchorId: string | null = null; let anchorY = 0; if (kind === "density") { let best = Infinity; for (const [shoe, pose] of first) { const d = Math.abs(pose.y - window.innerHeight / 2); if (d < best) { best = d; anchorId = shoe; anchorY = pose.y; } } } this.fadeCopies(kind === "density" ? ".pw-under" : ".pw-ticket", kind === "density" ? 200 : 130); this.release(); // The one and only React commit of this move. commit(); if (anchorId) { const pose = this.poses(false).get(anchorId); if (pose) { // Everything measured before the scroll keeps its place on screen, so it needs no change. window.scrollBy({ top: pose.y - anchorY, behavior: "instant" as ScrollBehavior }); } } const slots = this.slots(); const last = this.poses(false); const height = window.innerHeight; // Those no longer on the wall leave from where they stood. const gone: { fly: HTMLElement; pose: Pose }[] = []; for (const [shoe, pose] of first) { if (!last.has(shoe) && pose.y > -200 && pose.y < height + 200) { const fly = previousShoes.get(shoe); if (fly) gone.push({ fly, pose }); } } this.leaving(gone); // The stagger spreads out from the control that started the move. const anchor = origin?.getBoundingClientRect(); const ox = anchor ? anchor.left + anchor.width / 2 : window.innerWidth / 2; const oy = anchor ? anchor.top + anchor.height / 2 : 0; const reach = Math.hypot(window.innerWidth, height) || 1; // The section's height, once, with the same timing, only if its bottom edge is in view. const afterHeight = box.offsetHeight; if (Math.abs(afterHeight - beforeHeight) > 1 && bottomInView) { box.animate([{ height: `${beforeHeight}px` }, { height: `${afterHeight}px` }], { duration: 620, easing: "cubic-bezier(0.3,0.1,0.25,1)", }); } // Who flies, nearest the middle of the view first, up to the limit. type Plan = { slot: HTMLElement; shoe: string; from?: Pose; to: Pose }; const plans: Plan[] = []; for (const slot of slots) { const shoe = slot.dataset.id as string; const to = last.get(shoe); if (to) plans.push({ slot, shoe, from: first.get(shoe), to }); } const onScreen = (p: Pose) => p.y > -60 && p.y - p.width < height + 60; plans.sort((a, b) => Math.abs(a.to.y - height / 2) - Math.abs(b.to.y - height / 2)); let fliers = 0; let pending = 0; let settled = false; let landedSoFar = 0; const finishOne = () => { pending--; if (pending <= 0 && !settled && id === this.runId) { settled = true; this.clearLanded(); onSettled?.(); } }; plans.forEach((plan, order) => { const { slot, shoe, from, to } = plan; const fly = slot.querySelector(".pw-fly") as HTMLElement; const contact = slot.querySelector(".pw-contact"); const wallShadow = slot.querySelector(".pw-wallshadow"); const ticket = slot.querySelector(".pw-ticket"); const shelf = slot.querySelector(".pw-shelf"); const animations: Animation[] = []; const toVisible = onScreen(to); const fromVisible = from ? onScreen(from) : false; // Off-screen at both ends: it simply jumps. if (!from ? !toVisible : !toVisible && !fromVisible) return; const distanceToControl = Math.hypot(to.x - ox, to.y - oy); const maxStagger = kind === "density" ? 110 : 220; const delay = Math.round(clamp((distanceToControl / reach) * 2, 0, 1) * maxStagger); // A new shoe on the wall comes down onto its shelf. if (!from) { const duration = 420; const anim = fly.animate( [ { transform: "translate3d(0,-18px,0) scale(1.02)", opacity: 0 }, { transform: "translate3d(0,-10px,0) scale(1.01)", opacity: 1, offset: 0.55 }, { transform: "translate3d(0,0,0) scale(1)", opacity: 1 }, ], { duration, delay: delay + 120, easing: "cubic-bezier(0.25,0.7,0.3,1)", fill: "both" }, ); animations.push(anim); if (ticket) { animations.push(ticket.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200, delay: delay + 340, fill: "both" })); } this.track(shoe, fly, animations, finishOne); pending++; return; } const dx = from.x - to.x; const dy = from.y - to.y; const scale = from.width / to.width; const distance = Math.hypot(dx, dy); const still = distance < 0.5 && Math.abs(scale - 1) < 0.002; if (still && !wasAirborne.has(shoe)) return; fliers++; // Past the limit, or crossing the page edge: a short fade instead of a long trip. const crossing = toVisible !== fromVisible; if (fliers > MAX_FLIERS) { animations.push(fly.animate([{ opacity: 0.001 }, { opacity: 1 }], { duration: 220, delay, fill: "both" })); if (ticket) animations.push(ticket.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200, delay: delay + 120, fill: "both" })); this.track(shoe, fly, animations, finishOne); pending++; return; } if (crossing) { const limit = 200; const k = distance > limit ? limit / distance : 1; const startX = toVisible ? dx * k : 0; const startY = toVisible ? dy * k : 0; const a = fly.animate( toVisible ? [ { transform: `translate3d(${startX}px,${startY}px,0)`, opacity: 0 }, { transform: "translate3d(0px,0px,0)", opacity: 1 }, ] : [ { transform: `translate3d(${dx}px,${dy}px,0) scale(${scale})`, opacity: 1 }, { transform: `translate3d(${dx * (1 - k)}px,${dy * (1 - k)}px,0) scale(${scale})`, opacity: 0 }, ], { duration: 360, delay, easing: "cubic-bezier(0.3,0.1,0.25,1)", fill: toVisible ? "both" : "backwards" }, ); animations.push(a); if (ticket && toVisible) { animations.push(ticket.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200, delay: delay + 260, fill: "both" })); } this.track(shoe, fly, animations, finishOne); pending++; return; } const airborne = wasAirborne.has(shoe); const duration = airborne ? clamp(flightDuration(distance) * 0.85, 320, 760) : flightDuration(distance); const jitter = ((order * 2654435761) >>> 0) / 4294967296 - 0.5; fly.style.willChange = "transform"; // Later landers sit above earlier ones. The order is the landing order. const landsAt = delay + duration; slot.style.zIndex = String(10 + Math.round(landsAt / 10)); animations.push( fly.animate(framesFor({ dx, dy, scale, lift: !airborne, jitter }), { duration, delay: airborne ? 0 : delay, easing: "linear", fill: "both", }), ); const start = airborne ? 0 : delay; if (contact) { const startOpacity = airborne ? 0 : 1; animations.push( contact.animate( [ { opacity: startOpacity }, { opacity: 0, offset: 0.14 }, { opacity: 0, offset: 0.92 }, { opacity: 1 }, ], { duration, delay: start, easing: "linear", fill: "both" }, ), ); } if (wallShadow) { animations.push( wallShadow.animate( [ { opacity: airborne ? 1 : 0.001 }, { opacity: 1, offset: 0.22 }, { opacity: 1, offset: 0.82 }, { opacity: 0.001 }, ], { duration, delay: start, easing: "linear", fill: "both" }, ), ); } if (ticket) { animations.push( ticket.animate( [{ opacity: 0 }, { opacity: 0, offset: 0.86 }, { opacity: 1 }], { duration: duration + 90, delay: start, easing: "linear", fill: "both" }, ), ); } if (shelf && kind !== "density") { // At contact the shelf gives by a pixel and recovers. animations.push( shelf.animate( [{ transform: "translateY(0px)" }, { transform: "translateY(1px)", offset: 0.35 }, { transform: "translateY(0px)" }], { duration: 170, delay: start + duration * 0.92, easing: "ease-out", fill: "both" }, ), ); } if (shelf && kind === "density") { // The new shelf arrives while the shoes are in the air. const at = start + duration * 0.18; animations.push( shelf.animate( [ { opacity: 0, transform: "scaleX(0.72)" }, { opacity: 1, transform: "scaleX(1)" }, ], { duration: duration * 0.5, delay: at, easing: "cubic-bezier(0.2,0.8,0.3,1)", fill: "backwards" }, ), ); } if (onLand) { window.setTimeout(() => { if (id === this.runId && landedSoFar++ < 6) onLand(); }, start + duration * 0.86); } this.track(shoe, fly, animations, finishOne); pending++; }); // The shelves with no shoe at the end of the wall follow the new layout softly. const wall = this.wall(); if (wall) { for (const ghost of wall.querySelectorAll(":scope > .pw-ghost")) { if (getComputedStyle(ghost).display !== "none") { ghost.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, delay: 220, easing: "ease-out", fill: "backwards" }); } } } if (pending === 0 && !settled) { settled = true; onSettled?.(); } } private track(shoe: string, fly: HTMLElement, animations: Animation[], done: () => void) { const entry: Flying = { animations, fly }; this.flying.set(shoe, entry); let left = animations.length; const finishAll = () => { left--; if (left > 0) return; // It stays as it is until the rest are down. Letting go of its layer here would repaint mid-flight. entry.landed = true; done(); }; for (const a of animations) a.onfinish = finishAll; } /** Everyone is down: every shoe lets go of its layer in one go. */ private clearLanded() { for (const { animations, fly } of this.flying.values()) { for (const a of animations) { a.onfinish = null; a.cancel(); } fly.style.willChange = ""; const li = fly.closest(".pw-slot"); if (li) li.style.zIndex = ""; } this.flying.clear(); } } 67:Tb61,import type { Shoe, ShoeSort } from "../types"; export type Arrangement = { sort: ShoeSort; category: string | null; size: string | null; /** A shuffled order of ids, when the wall is shuffled. */ shuffled: string[] | null; }; const byNewest = (a: Shoe, b: Shoe) => (b.addedAt ?? "").localeCompare(a.addedAt ?? ""); /** From dark to light through the hues. Close lightness values read together, so hue decides inside a band. */ function byColour(a: Shoe, b: Shoe): number { const la = Math.round((a.lightness ?? 0.5) * 6); const lb = Math.round((b.lightness ?? 0.5) * 6); if (la !== lb) return la - lb; return (a.hue ?? 0) - (b.hue ?? 0); } export function sorted(shoes: Shoe[], sort: ShoeSort): Shoe[] { const list = [...shoes]; if (sort === "newest") list.sort(byNewest); if (sort === "price-asc") list.sort((a, b) => a.price - b.price); if (sort === "price-desc") list.sort((a, b) => b.price - a.price); if (sort === "colour") list.sort(byColour); return list; } export function hasSize(shoe: Shoe, size: string): boolean { return shoe.sizes.some((s) => s.eu === size && s.stock > 0); } export function visibleShoes(shoes: Shoe[], a: Arrangement): Shoe[] { let list = sorted(shoes, a.sort); if (a.category) list = list.filter((s) => s.category === a.category); if (a.size) list = list.filter((s) => hasSize(s, a.size as string)); if (a.shuffled) { const place = new Map(a.shuffled.map((id, i) => [id, i])); list = [...list].sort((x, y) => (place.get(x.id) ?? 1e9) - (place.get(y.id) ?? 1e9)); } return list; } /** A small seedable generator, so a test can ask for the same shuffle twice. */ export function generator(seed: number): () => number { let state = seed >>> 0 || 1; return () => { state = (state + 0x6d2b79f5) >>> 0; let t = state; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } /** A derangement: no shoe stays where it was, and two of one category do not stand together if it can be helped. */ export function shuffle(list: Shoe[], random: () => number): string[] { const ids = list.map((s) => s.id); if (ids.length < 2) return ids; const category = new Map(list.map((s) => [s.id, s.category])); let best = ids; let bestScore = Infinity; for (let attempt = 0; attempt < 60; attempt++) { const next = [...ids]; // Sattolo's algorithm always gives a single cycle, so no element keeps its place. for (let i = next.length - 1; i > 0; i--) { const j = Math.floor(random() * i); [next[i], next[j]] = [next[j], next[i]]; } let score = 0; for (let i = 1; i < next.length; i++) { if (category.get(next[i]) === category.get(next[i - 1])) score++; } if (score < bestScore) { best = next; bestScore = score; if (score === 0) break; } } return best; } 68:T40a,/** A soft rubber tap made on the spot: no audio files. Started only after a user gesture. */ let context: AudioContext | null = null; let last = 0; export function tap(strength = 1) { if (typeof window === "undefined") return; const now = performance.now(); if (now - last < 60) return; last = now; try { context ??= new AudioContext(); if (context.state === "suspended") void context.resume(); const t = context.currentTime; const gain = context.createGain(); gain.gain.setValueAtTime(0.0001, t); gain.gain.exponentialRampToValueAtTime(0.09 * strength, t + 0.004); gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.09); const body = context.createOscillator(); body.type = "sine"; body.frequency.setValueAtTime(170 + Math.random() * 30, t); body.frequency.exponentialRampToValueAtTime(82, t + 0.08); body.connect(gain).connect(context.destination); body.start(t); body.stop(t + 0.1); } catch { /* No audio on this device: the wall works the same. */ } } 69:Tff7,"use client"; import { useEffect, useRef } from "react"; import { createPortal } from "react-dom"; import type { ShoeSort, ShoeWallLabels } from "./types"; type Props = { open: boolean; onClose: () => void; labels: ShoeWallLabels; theme: string; dir?: string; sort: ShoeSort; onSort: (s: ShoeSort) => void; categories: string[]; category: string | null; onCategory: (c: string | null) => void; sizes: string[]; size: string | null; onSize: (s: string | null) => void; }; const SORTS: ShoeSort[] = ["featured", "newest", "price-asc", "price-desc", "colour"]; /** On phones, sort, categories and size live in a bottom sheet. */ export function FilterSheet(p: Props) { const panel = useRef(null); const opener = useRef(null); useEffect(() => { if (!p.open) return; opener.current = document.activeElement; panel.current?.focus(); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") p.onClose(); if (e.key === "Tab" && panel.current) { const items = panel.current.querySelectorAll("button"); if (!items.length) return; const first = items[0]; const last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener("keydown", onKey); return () => { document.removeEventListener("keydown", onKey); (opener.current as HTMLElement | null)?.focus?.(); }; // The handler only needs the latest onClose, which the parent keeps stable enough for one open sheet. // eslint-disable-next-line react-hooks/exhaustive-deps }, [p.open]); if (!p.open) return null; return createPortal(

, document.body, ); } 6a:Tf98,import type { Shoe, ShoePhoto, ShoeSize } from "./types"; /** The parts of a Storefront API product this reads. Pass the nodes of your own query. */ export type ShopifyProduct = { id: string; handle: string; title: string; description?: string | null; productType?: string | null; tags?: string[] | null; createdAt?: string | null; onlineStoreUrl?: string | null; priceRange?: { minVariantPrice: { amount: string; currencyCode: string } } | null; compareAtPriceRange?: { minVariantPrice?: { amount: string; currencyCode?: string } | null } | null; images?: { nodes?: ShopifyImage[]; edges?: { node: ShopifyImage }[] } | null; variants?: { nodes?: ShopifyVariant[]; edges?: { node: ShopifyVariant }[] } | null; }; export type ShopifyImage = { url: string; width?: number | null; height?: number | null; altText?: string | null }; export type ShopifyVariant = { id: string; availableForSale?: boolean | null; quantityAvailable?: number | null; selectedOptions?: { name: string; value: string }[] | null; price?: { amount: string; currencyCode: string } | null; }; export type FromShopifyOptions = { /** The option that holds the size. Default: "Size". */ sizeOption?: string; /** Build the link to a product. Default: its online store address, or /products/. */ href?: (product: ShopifyProduct) => string; /** The category shown on the wall. Default: productType. */ category?: (product: ShopifyProduct) => string; /** * The wall needs transparent side-view photographs, and where the sole meets the shelf. * Default: the first image, with the sole assumed at the bottom. Run your photographs through * scripts/photos/ and pass the real measures here. */ photo?: (product: ShopifyProduct, image: ShopifyImage | undefined) => Partial; /** Which tag marks a new shoe. Default: "new". */ newTag?: string; }; function nodes(list?: { nodes?: T[]; edges?: { node: T }[] } | null): T[] { return list?.nodes ?? list?.edges?.map((e) => e.node) ?? []; } /** A plain function with no dependency and no network call: a Storefront response in, Shoe[] out. */ export function fromShopifyProducts(products: ShopifyProduct[], options: FromShopifyOptions = {}): Shoe[] { const sizeOption = (options.sizeOption ?? "Size").toLowerCase(); const newTag = (options.newTag ?? "new").toLowerCase(); return products.map((product) => { const image = nodes(product.images)[0]; const given = options.photo?.(product, image) ?? {}; const photo: ShoePhoto = { src: image?.url ?? "", width: image?.width ?? 1600, height: image?.height ?? 1000, baseline: 1, contact: [0.2, 0.9], alt: image?.altText ?? product.title, ...given, }; const sizes: ShoeSize[] = nodes(product.variants).flatMap((variant) => { const option = variant.selectedOptions?.find((o) => o.name.toLowerCase() === sizeOption); if (!option) return []; const stock = variant.quantityAvailable ?? (variant.availableForSale ? 1 : 0); return [{ eu: option.value, stock: Math.max(0, stock), variantId: variant.id }]; }); const price = product.priceRange?.minVariantPrice; const compare = product.compareAtPriceRange?.minVariantPrice; const compareAmount = compare ? Number(compare.amount) : 0; const amount = Number(price?.amount ?? 0); return { id: product.id, slug: product.handle, href: options.href?.(product) ?? product.onlineStoreUrl ?? `/products/${product.handle}`, name: product.title, category: options.category?.(product) ?? product.productType ?? "", price: amount, compareAtPrice: compareAmount > amount ? compareAmount : undefined, currency: price?.currencyCode ?? "USD", isNew: product.tags?.some((t) => t.toLowerCase() === newTag) ?? false, addedAt: product.createdAt ?? undefined, photo, sizes, description: product.description ?? undefined, }; }); } 6b:Ta67,import type { ShoeWallLabels } from "./types"; export const defaultLabels: ShoeWallLabels = { eyebrow: "", heading: "", pairs: (count) => `${count} ${count === 1 ? "pair" : "pairs"}`, sortLabel: "Sort", sortNames: { featured: "Featured", newest: "Newest", "price-asc": "Price low to high", "price-desc": "Price high to low", colour: "Colour", }, allCategories: "All", yourSize: "Your size", anySize: "Any size", clearSize: "Clear size", densityLabel: "Wall density", densityNames: { l: "Large", m: "Medium", s: "Small" }, shuffle: "Shuffle", originalOrder: "Original order", sound: "Sound", filter: "Filter", filterDone: "Done", seeAll: (count) => (count ? `See all ${count} pairs` : "See all pairs"), soldOut: "Sold out", newShoe: "New", wasPrice: "was", emptyTitle: "Nothing on the wall in that size", emptyBody: "Try another size, or bring every pair back.", emptyClear: "Clear filters", noShoesTitle: "The wall is empty for now", noShoesBody: "New pairs go up soon.", announceShuffled: (count) => `${count} ${count === 1 ? "pair" : "pairs"} shuffled`, announceSorted: (count, sort) => `${count} ${count === 1 ? "pair" : "pairs"} sorted by ${sort}`, announceFiltered: (count) => `${count} ${count === 1 ? "pair" : "pairs"} on the wall`, announceDensity: (name) => `Wall density ${name}`, announceAdded: (name, size) => `${name}, size ${size}, added to your bag`, announceOpened: (name) => `${name} opened`, back: "Back to the wall", previous: "Previous pair", next: "Next pair", close: "Close", size: "Size", sizeEcho: (system, size) => `Size · ${system} ${size}`, sizeSystem: "Size system", sizeGuide: "Size guide", onlyLeft: (count) => `Only ${count} left`, chooseSizeHint: "Pick a size first", chooseSize: "Choose your size", addToBag: "Add to bag", adding: "Adding", inBag: "In your bag", addAnother: "Add another", addFailed: "Couldn't add. Try again", addFailedReason: "It didn't reach the bag. Your size is kept.", soldOutButton: "Sold out", viewBag: "View bag", viewFullDetails: "View full details", zoomIn: "Zoom in", zoomOut: "Zoom out", views: "Views of this shoe", bagTitle: "Your bag", bagEmpty: "Nothing in your bag yet.", bagRemove: (name) => `Remove ${name}`, bagQuantity: "Quantity", bagSubtotal: "Subtotal", bagCheckout: "Checkout", bagClose: "Close bag", }; export function defaultFormatPrice(amount: number, currency: string): string { return new Intl.NumberFormat(undefined, { style: "currency", currency, maximumFractionDigits: amount % 1 === 0 ? 0 : 2, }).format(amount); } 6c:T8d1b,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react"; import { createPortal } from "react-dom"; import { AddToBagButton } from "./AddToBagButton"; import { defaultFormatPrice, defaultLabels } from "./labels"; import { clearFailed, markFailed } from "./ShoeImage"; import { SizePicker } from "./SizePicker"; import { dropOf, isSoldOut, markAway } from "./Slot"; import type { Shoe, ShoeSize, ShoeView, ShoeWallLabels } from "./types"; export type ShoeDetailProps = { shoe: Shoe; /** The wall order, for previous and next. */ shoes?: Shoe[]; /** The list item the shoe came from. Without it the view opens with a plain fade. */ from?: HTMLElement | null; /** The wall to fade while the view is open. */ wallRoot?: HTMLElement | null; /** False for a deep link: a plain fade, with the rail already in place. */ morph?: boolean; closing?: boolean; onClose: () => void; onClosed?: () => void; onNavigate?: (shoe: Shoe) => void; onAddToBag?: (shoe: Shoe, size: ShoeSize) => void | Promise; onAdded?: (shoe: Shoe, size: ShoeSize, image: HTMLElement | null) => void; onViewBag?: () => void; onSizeGuide?: (shoe: Shoe) => void; chosenSize?: string | null; onChooseSize?: (eu: string) => void; labels?: Partial; formatPrice?: (amount: number, currency: string) => string; theme?: "auto" | "light" | "dark"; dir?: "ltr" | "rtl"; detailTop?: number; }; const OPEN_MS = 640; const CLOSE_MS = 520; const MIN_ZOOM = 1.15; const easeWeighted = (t: number) => (t < 0.5 ? 8 * t * t * t * t : 1 - (-2 * t + 2) ** 4 / 2); const reducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; /** Sampled so the arc and the weight stay plain data: the sole's centre travels, and nothing else moves. */ function travelFrames(dx: number, dy: number, scale: number, reverse: boolean): Keyframe[] { const frames: Keyframe[] = []; const steps = 32; const lift = Math.min(70, Math.hypot(dx, dy) * 0.1); for (let i = 0; i <= steps; i++) { const t = i / steps; // The first moments are a rise, so the shoe answers before it sets off. const e = reverse ? easeWeighted(t) : 0.04 * Math.min(1, t * 8) + 0.96 * easeWeighted(Math.max(0, (t - 0.0625) / 0.9375)); const k = reverse ? e : 1 - e; const x = dx * k; const arc = Math.sin(Math.PI * e) * lift; const y = dy * k - arc; const s = 1 + (scale - 1) * k; frames.push({ transform: `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0px) scale(${s.toFixed(4)})` }); } return frames; } function largest(photo: Shoe["photo"]): string { return photo.srcSet?.split(",").pop()?.trim().split(" ")[0] ?? photo.src; } export function ShoeDetail(props: ShoeDetailProps) { const { shoe, shoes = [], from, wallRoot, morph = true, closing, onClose, onClosed, onNavigate, theme = "auto", dir, detailTop = 0 } = props; const labels = { ...defaultLabels, ...props.labels }; const formatPrice = props.formatPrice ?? defaultFormatPrice; const titleId = useId(); const root = useRef(null); const backdrop = useRef(null); const shoeBox = useRef(null); const camera = useRef(null); const viewport = useRef(null); const rail = useRef(null); const panel = useRef(null); const back = useRef(null); const sizeGroup = useRef(null); const large = useRef(null); const line = useRef(null); // Started from the wall's picture, so opening never waits for a download. const [first] = useState(() => ({ id: shoe.id, src: from?.querySelector("img")?.currentSrc || shoe.photo.src })); const baseSrc = first.id === shoe.id ? first.src : shoe.photo.src; // The panel cannot be seen for its first 260 ms. Mounting it a frame later keeps its layout out of // the click's frame, and by then the flight runs on the compositor and does not wait for the page. const [panelOn, setPanelOn] = useState(!morph || !from); const openedAt = useRef(0); const [viewIndex, setViewIndex] = useState(0); const [zoomed, setZoomed] = useState(false); const [hint, setHint] = useState(null); const [localSize, setLocalSize] = useState(null); const [state, setState] = useState("needs-size"); const [failed, setFailed] = useState(false); const landed = useRef(false); const inStock = (eu: string | null | undefined) => !!eu && shoe.sizes.some((s) => s.eu === eu && s.stock > 0); const remembered = props.chosenSize ?? localSize; const sizeValue = inStock(remembered) ? (remembered as string) : null; const soldOut = isSoldOut(shoe); const views: ShoeView[] = shoe.views?.length ? shoe.views : []; const index = shoes.findIndex((s) => s.id === shoe.id); /* ---------- The journey there ---------- */ const running = useRef([]); const stageControls = () => (root.current ? [...root.current.querySelectorAll(".pw-back, .pw-nav, .pw-views")] : []); const resetCamera = useCallback(() => { setZoomed(false); setViewIndex(0); if (camera.current) { camera.current.style.transition = ""; camera.current.style.transform = ""; } }, []); /** * Reads every position first and starts every animation after. Mixing the two made the browser * recalculate styles once per part, and that was most of a 180 ms click. */ const measureWall = useCallback(() => { if (!wallRoot) return []; const origin = from?.getBoundingClientRect(); const ox = origin ? origin.left + origin.width / 2 : window.innerWidth / 2; const oy = origin ? origin.top + origin.height / 2 : window.innerHeight / 2; const reach = Math.hypot(window.innerWidth, window.innerHeight); const seen: { part: HTMLElement; distance: number }[] = []; for (const part of wallRoot.querySelectorAll(".pw-bar, .pw-head, .pw-wall > .pw-slot, .pw-wall > .pw-ghost, .pw-more-line")) { const rect = part.getBoundingClientRect(); if (rect.bottom < -40 || rect.top > window.innerHeight + 40) continue; seen.push({ part, distance: Math.hypot(rect.left + rect.width / 2 - ox, rect.top + rect.height / 2 - oy) / reach }); } return seen; }, [from, wallRoot]); const recedeWall = useCallback( (seen: { part: HTMLElement; distance: number }[], reverse: boolean, delay: number, total: number) => { const animations: Animation[] = []; for (const { part, distance } of seen) { const lag = Math.min(1, distance * 1.4) * (total * 0.45); const frames = part === from ? [{ opacity: 1 }, { opacity: 1 }] : [ { opacity: 1, transform: "scale(1)" }, { opacity: 0, transform: "scale(0.985)" }, ]; animations.push( part.animate(reverse ? [...frames].reverse() : frames, { duration: total - (reverse ? 0 : lag * 0.2), delay: reverse ? delay : lag * 0.5, easing: reverse ? "cubic-bezier(0.3,0,0.3,1)" : "cubic-bezier(0.4,0,0.6,1)", fill: "both", }), ); } return animations; }, [from], ); useLayoutEffect(() => { const box = shoeBox.current; const railEl = rail.current; if (!box || !railEl) return; const reduced = reducedMotion(); const animations: Animation[] = []; openedAt.current = performance.now(); const sourceFly = from?.querySelector(".pw-fly") ?? null; const sourceStage = sourceFly?.parentElement ?? null; const sourceShelf = from?.querySelector(".pw-shelf") ?? null; const seen = measureWall(); if (!reduced && morph && from && sourceStage && sourceShelf) { // The shoe here takes over from the one on the shelf, in the same place, in the same frame. const a = sourceStage.getBoundingClientRect(); const b = box.getBoundingClientRect(); const s = sourceShelf.getBoundingClientRect(); const r = railEl.getBoundingClientRect(); markAway(from, true); animations.push( box.animate(travelFrames(a.left + a.width / 2 - (b.left + b.width / 2), a.bottom - b.bottom, a.width / b.width, false), { duration: OPEN_MS, easing: "linear", fill: "both" }), railEl.animate( [ { transform: `translate3d(${s.left - r.left}px, ${s.top - r.top}px, 0) scaleX(${s.width / r.width})` }, { transform: "translate3d(0,0,0) scaleX(1)" }, ], { duration: 480, delay: 40, easing: "cubic-bezier(0.5,0,0.2,1)", fill: "both" }, ), ...recedeWall(seen, false, 0, 320), ); } else { // A deep link, or reduced motion: a plain fade with the rail already in place. markAway(from, true); animations.push(box.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 240, easing: "ease-out", fill: "both" })); animations.push(railEl.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 240, fill: "both" })); if (reduced) { for (const { part } of seen) { if (part !== from) animations.push(part.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: "both" })); } } else { animations.push(...recedeWall(seen, false, 0, 200)); } } if (line.current) animations.push(line.current.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 320, delay: 180, easing: "ease-out", fill: "both" })); // The stage's own controls arrive with the panel, once the wall has gone from under them. for (const control of stageControls()) { animations.push(control.animate([{ opacity: 0 }, { opacity: 1 }], { duration: reduced ? 160 : 320, delay: reduced || !morph ? 0 : 260, easing: "ease-out", fill: "both" })); } if (backdrop.current) { animations.push(backdrop.current.animate([{ opacity: 0 }, { opacity: 1 }], { duration: reduced || !morph || !from ? 200 : 320, easing: "ease-out", fill: "both" })); } running.current = animations; back.current?.focus({ preventScroll: true }); return () => { for (const a of animations) a.cancel(); markAway(from, false); }; // The journey belongs to this view's life, once. Moving between shoes is its own motion. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { if (panelOn) return; const frame = requestAnimationFrame(() => setPanelOn(true)); return () => cancelAnimationFrame(frame); }, [panelOn]); useLayoutEffect(() => { if (!panelOn || !panel.current) return; const reduced = reducedMotion(); const waited = performance.now() - openedAt.current; const animations = [...panel.current.querySelectorAll("[data-enter]")].map((item, i) => item.animate( reduced ? [{ opacity: 0 }, { opacity: 1 }] : [ { opacity: 0, transform: "translate3d(0,10px,0)" }, { opacity: 1, transform: "translate3d(0,0,0)" }, ], { duration: reduced ? 160 : 320, delay: reduced ? 0 : Math.max(0, 260 - waited) + i * 60, easing: "cubic-bezier(0.22,0.9,0.3,1)", fill: "both" }, ), ); running.current = [...running.current, ...animations]; return () => { for (const a of animations) a.cancel(); }; }, [panelOn]); // Once the shoe has landed, the larger picture comes in without a jump. useEffect(() => { landed.current = false; const timer = window.setTimeout(() => { landed.current = true; const img = large.current; if (!img) return; const show = () => img.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, easing: "ease-out", fill: "forwards" }); if (img.complete && img.naturalWidth) { img.decode().then(show, show); } else { img.onload = () => { img.decode().then(show, show); }; } }, OPEN_MS); return () => window.clearTimeout(timer); }, [shoe.id]); /* ---------- The journey back ---------- */ const closeStarted = useRef(false); useLayoutEffect(() => { if (!closing || closeStarted.current) return; closeStarted.current = true; resetCamera(); const box = shoeBox.current; const railEl = rail.current; const reduced = reducedMotion(); const finish = () => { markAway(from, false); for (const a of running.current) a.cancel(); onClosed?.(); }; const items = panel.current ? [...panel.current.querySelectorAll("[data-enter]")] : []; for (const a of running.current) a.cancel(); running.current = []; const sourceStage = from?.querySelector(".pw-fly")?.parentElement ?? null; const sourceShelf = from?.querySelector(".pw-shelf") ?? null; const seen = measureWall(); const list: Animation[] = []; if (!box || !railEl || reduced || !from || !sourceStage || !sourceShelf) { const whole = root.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, easing: "ease-out", fill: "both" }); if (reduced) { for (const { part } of seen) { if (part !== from) list.push(part.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200, fill: "both" })); } } else { list.push(...recedeWall(seen, true, 0, 200)); } running.current = list; if (whole) whole.onfinish = finish; else finish(); return; } const a = sourceStage.getBoundingClientRect(); const b = box.getBoundingClientRect(); const s = sourceShelf.getBoundingClientRect(); const r = railEl.getBoundingClientRect(); for (const item of items) { list.push(item.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 160, easing: "ease-out", fill: "both" })); } if (line.current) list.push(line.current.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 160, easing: "ease-out", fill: "both" })); for (const control of stageControls()) { list.push(control.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 160, easing: "ease-out", fill: "both" })); } const flight = box.animate(travelFrames(a.left + a.width / 2 - (b.left + b.width / 2), a.bottom - b.bottom, a.width / b.width, true), { duration: CLOSE_MS, easing: "linear", fill: "both" }); list.push( railEl.animate( [ { transform: "translate3d(0,0,0) scaleX(1)" }, { transform: `translate3d(${s.left - r.left}px, ${s.top - r.top}px, 0) scaleX(${s.width / r.width})` }, ], { duration: CLOSE_MS - 40, easing: "cubic-bezier(0.5,0,0.2,1)", fill: "both" }, ), ); // The wall starts back at 180 ms and is at full strength as the shoe lands. list.push(...recedeWall(seen, true, 180, CLOSE_MS - 180)); if (backdrop.current) { list.push(backdrop.current.animate([{ opacity: 1 }, { opacity: 0 }], { duration: CLOSE_MS - 180, delay: 180, easing: "linear", fill: "both" })); } list.push(flight); running.current = list; flight.onfinish = finish; // Runs once, when closing turns true. // eslint-disable-next-line react-hooks/exhaustive-deps }, [closing]); /* ---------- Looking closer: a camera over the same photograph ---------- */ // Never past the photograph's own pixels. One image pixel per screen dot on a plain screen, // and 1.5 per CSS pixel on a dense one, which is still crisp. If that means less zoom, zoom less. const focusZoom = useCallback((wanted: number) => { const img = large.current; const box = camera.current; if (!img || !box || !box.offsetWidth) return 1; const natural = img.naturalWidth || 0; const density = Math.min(window.devicePixelRatio || 1, 1.5); return Math.min(wanted, natural / (box.offsetWidth * density)); }, []); const [zoomable, setZoomable] = useState(false); const checkZoomable = useCallback(() => setZoomable(focusZoom(2.2) >= MIN_ZOOM), [focusZoom]); useEffect(() => { checkZoomable(); window.addEventListener("resize", checkZoomable); return () => window.removeEventListener("resize", checkZoomable); }, [checkZoomable, shoe.id]); const setCamera = useCallback((x: number, y: number, s: number, animate: boolean) => { const box = camera.current; const view = viewport.current; if (!box || !view) return; if (s <= 1.001) { box.style.transition = animate ? "transform 580ms cubic-bezier(0.3,0.1,0.15,1)" : ""; box.style.transform = ""; return; } const b = box.offsetWidth; const h = box.offsetHeight; const v = view.getBoundingClientRect(); const parent = (box.parentElement as HTMLElement).getBoundingClientRect(); const left = parent.left - v.left; const top = parent.top - v.top; const tx = v.width / 2 - (left + x * b * s); const ty = v.height / 2 - (top + y * h * s); box.style.transition = animate ? "transform 580ms cubic-bezier(0.3,0.1,0.15,1)" : ""; box.style.transformOrigin = "0 0"; box.style.transform = `translate3d(${tx.toFixed(1)}px, ${ty.toFixed(1)}px, 0) scale(${s.toFixed(3)})`; }, []); const chooseView = (i: number) => { setViewIndex(i); setZoomed(false); const view = views[i]; if (view?.kind === "focus") setCamera(view.x, view.y, focusZoom(view.zoom), true); else setCamera(0.5, 0.5, 1, true); }; // Follow the pointer while zoomed, eased, with a transform only. const zoomTarget = useRef({ x: 0.5, y: 0.5, cx: 0.5, cy: 0.5, s: 1, frame: 0 }); const stepZoom = useCallback(() => { const step = () => { const z = zoomTarget.current; z.cx += (z.x - z.cx) * 0.14; z.cy += (z.y - z.cy) * 0.14; setCamera(z.cx, z.cy, z.s, false); z.frame = Math.abs(z.x - z.cx) + Math.abs(z.y - z.cy) > 0.0006 ? requestAnimationFrame(step) : 0; }; step(); }, [setCamera]); const pointAt = (e: { clientX: number; clientY: number }) => { const parent = camera.current?.parentElement?.getBoundingClientRect(); if (!parent) return { x: 0.5, y: 0.5 }; return { x: Math.min(1, Math.max(0, (e.clientX - parent.left) / parent.width)), y: Math.min(1, Math.max(0, (e.clientY - parent.top) / parent.height)), }; }; const zoomIn = (e: { clientX: number; clientY: number }) => { const z = zoomTarget.current; const p = pointAt(e); const reach = focusZoom(2.2); if (reach < MIN_ZOOM) return; z.x = z.cx = p.x; z.y = z.cy = p.y; z.s = reach; setZoomed(true); setViewIndex(0); setCamera(p.x, p.y, z.s, true); }; const zoomOut = useCallback(() => { cancelAnimationFrame(zoomTarget.current.frame); zoomTarget.current.frame = 0; setZoomed(false); setViewIndex(0); setCamera(0.5, 0.5, 1, true); }, [setCamera]); const onShoePointerMove = (e: ReactPointerEvent) => { if (!zoomed || e.pointerType === "touch") return; const z = zoomTarget.current; const p = pointAt(e); z.x = p.x; z.y = p.y; if (!z.frame) z.frame = requestAnimationFrame(stepZoom); }; /* ---------- Touch: swipe down to close, sideways for views, double tap and pinch to zoom ---------- */ const gesture = useRef<{ x: number; y: number; time: number; id: number } | null>(null); const pointers = useRef(new Map()); const pinch = useRef<{ distance: number; scale: number } | null>(null); const lastTap = useRef(0); const onViewportDown = (e: ReactPointerEvent) => { if (e.pointerType !== "touch") return; pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (pointers.current.size === 2) { const [a, b] = [...pointers.current.values()]; pinch.current = { distance: Math.hypot(a.x - b.x, a.y - b.y), scale: zoomed ? zoomTarget.current.s : 1 }; gesture.current = null; } else { gesture.current = { x: e.clientX, y: e.clientY, time: performance.now(), id: e.pointerId }; } }; const onViewportMove = (e: ReactPointerEvent) => { if (e.pointerType !== "touch" || !pointers.current.has(e.pointerId)) return; pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (pinch.current && pointers.current.size === 2) { const [a, b] = [...pointers.current.values()]; const d = Math.hypot(a.x - b.x, a.y - b.y); const s = Math.max(1, Math.min(focusZoom(2.2), (pinch.current.scale * d) / pinch.current.distance)); const p = pointAt({ clientX: (a.x + b.x) / 2, clientY: (a.y + b.y) / 2 }); zoomTarget.current = { ...zoomTarget.current, x: p.x, y: p.y, cx: p.x, cy: p.y, s }; setZoomed(s > 1.02); setCamera(p.x, p.y, s, false); } }; const onViewportUp = (e: ReactPointerEvent) => { if (e.pointerType !== "touch") return; pointers.current.delete(e.pointerId); if (pointers.current.size < 2) pinch.current = null; const start = gesture.current; gesture.current = null; if (!start || start.id !== e.pointerId) return; const dx = e.clientX - start.x; const dy = e.clientY - start.y; const quick = performance.now() - start.time < 600; if (Math.abs(dx) < 10 && Math.abs(dy) < 10) { const now = performance.now(); if (now - lastTap.current < 320) { lastTap.current = 0; if (zoomed) zoomOut(); else zoomIn(e); } else { lastTap.current = now; } return; } if (zoomed) return; if (quick && dy > 70 && Math.abs(dy) > Math.abs(dx) * 1.3) { onClose(); } else if (quick && Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.3 && views.length > 1) { const rtl = dir === "rtl"; const step = dx < 0 !== rtl ? 1 : -1; const next = Math.min(views.length - 1, Math.max(0, viewIndex + step)); if (next !== viewIndex) chooseView(next); } }; /* ---------- Moving around ---------- */ const walking = useRef(null); const go = useCallback( (step: number) => { if (index < 0 || shoes.length < 2 || !onNavigate) return; const next = shoes[(index + step + shoes.length) % shoes.length]; walking.current = shoeBox.current ? (shoeBox.current.cloneNode(true) as HTMLElement) : null; onNavigate(next); }, [index, onNavigate, shoes], ); // The current shoe walks off along the rail as the next walks on. const previousId = useRef(shoe.id); useLayoutEffect(() => { if (previousId.current === shoe.id) return; const before = shoes.findIndex((s) => s.id === previousId.current); previousId.current = shoe.id; const forward = before === shoes.length - 1 && index === 0 ? true : before === 0 && index === shoes.length - 1 ? false : index >= before; resetCamera(); const box = shoeBox.current; if (!box || reducedMotion()) return; const sign = (forward ? 1 : -1) * (dir === "rtl" ? -1 : 1); const width = box.offsetWidth; // The old shoe leaves as a copy, so one React commit is all this takes. const parent = box.parentElement; const leaving = walking.current; if (parent && leaving) { const copy = leaving; walking.current = null; copy.setAttribute("aria-hidden", "true"); copy.style.pointerEvents = "none"; parent.insertBefore(copy, box); const out = copy.animate( [ { transform: "translate3d(0,0,0)", opacity: 1 }, { transform: `translate3d(${-sign * width * 0.55}px, 0, 0)`, opacity: 0 }, ], { duration: 300, easing: "cubic-bezier(0.4,0,1,1)", fill: "both" }, ); out.onfinish = () => copy.remove(); out.oncancel = () => copy.remove(); } box.animate( [ { transform: `translate3d(${sign * width * 0.55}px, 0, 0)`, opacity: 0 }, { transform: "translate3d(0,0,0)", opacity: 1 }, ], { duration: 420, easing: "cubic-bezier(0.22,0.9,0.3,1)", delay: 60, fill: "backwards" }, ); panel.current?.animate([{ opacity: 0.2 }, { opacity: 1 }], { duration: 300, easing: "ease-out" }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [shoe.id]); /* ---------- Keys, focus, scroll ---------- */ useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); if (zoomed) zoomOut(); else onClose(); return; } const target = e.target as HTMLElement; const inGroup = target.getAttribute("role") === "radio"; if (!inGroup && e.key === "ArrowLeft") go(dir === "rtl" ? 1 : -1); if (!inGroup && e.key === "ArrowRight") go(dir === "rtl" ? -1 : 1); if (e.key === "Tab" && root.current) { const all = [...root.current.querySelectorAll('a[href], button:not([disabled]), [tabindex="0"]')].filter((el) => el.offsetParent !== null); if (!all.length) return; const first = all[0]; const last = all[all.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } else if (!root.current.contains(document.activeElement)) { e.preventDefault(); first.focus(); } } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [dir, go, onClose, zoomed, zoomOut]); // Scrolling is held by stopping its events. Setting overflow on the page would re-lay out all of it // in the click's own frame, and the scrollbar staying where it is means nothing can shift. useEffect(() => { const inside = (target: EventTarget | null) => { const el = target instanceof Element ? target.closest(".pw-panel, .pw-detail, .pw-bag-list") : null; return !!el && el.scrollHeight > el.clientHeight; }; const stop = (e: Event) => { if (!inside(e.target)) e.preventDefault(); }; const SCROLL_KEYS = new Set(["PageUp", "PageDown", "Home", "End", "ArrowUp", "ArrowDown", " "]); const keys = (e: KeyboardEvent) => { const el = e.target as HTMLElement | null; if (!SCROLL_KEYS.has(e.key) || inside(el)) return; if (el && /^(BUTTON|A|SUMMARY|INPUT)$/.test(el.tagName) && (e.key === " " || el.getAttribute("role") === "radio")) return; e.preventDefault(); }; document.addEventListener("wheel", stop, { passive: false }); document.addEventListener("touchmove", stop, { passive: false }); document.addEventListener("keydown", keys); return () => { document.removeEventListener("wheel", stop); document.removeEventListener("touchmove", stop); document.removeEventListener("keydown", keys); }; }, []); /* ---------- Size and bag ---------- */ const chooseSize = (eu: string) => { setLocalSize(eu); props.onChooseSize?.(eu); setHint(null); setFailed(false); }; const pulseSizes = () => { const group = sizeGroup.current; if (!group) return; setHint(labels.chooseSizeHint); group.querySelector('[tabindex="0"]')?.focus(); if (!reducedMotion()) { group.animate([{ transform: "scale(1)" }, { transform: "scale(1.018)" }, { transform: "scale(1)" }], { duration: 360, easing: "ease-in-out" }); } }; const add = async () => { const size = shoe.sizes.find((s) => s.eu === sizeValue); if (!size) return; setFailed(false); try { await props.onAddToBag?.(shoe, size); props.onAdded?.(shoe, size, camera.current); } catch (error) { setFailed(true); throw error; } }; const confirmation = state === "added" ? ( <> {labels.inBag} ·{" "} ) : failed && state === "error" ? ( labels.addFailedReason ) : ( "" ); const price = formatPrice(shoe.price, shoe.currency); const was = shoe.compareAtPrice ? formatPrice(shoe.compareAtPrice, shoe.currency) : null; const [left, right] = shoe.photo.contact; const above = (shoe.photo.height * shoe.photo.baseline) / shoe.photo.width; const panelBody = ( <>

{shoe.category}

{shoe.name}

{was ? ( ~~{labels.wasPrice} {was}~~ ) : null} {price}

{shoe.description ? (

{shoe.description}

) : null}

{ sizeGroup.current = el; }} />

{confirmation}

{labels.viewFullDetails} {shoe.returnsNote ? (

{shoe.returnsNote}

) : null} {shoe.details?.length ? (

{shoe.details.map((d) => (

{d.title}

{d.body}

))}

) : null} ); const dialog = (

{labels.bagTitle}

{p.labels.sortLabel}

{p.labels.filter}

{p.labels.yourSize}

{shoe.name}

{labels.noShoesTitle}

{labels.emptyTitle}