measureEdges(e.currentTarget)}
style={{
position: "absolute", top: reach ? REACH_TOP : 0, left: 0, right: 0, bottom: 0,
overflowY: "auto", overflowX: "hidden", WebkitOverflowScrolling: "touch", scrollbarWidth: "none",
padding: `${reach ? 32 : KERAI_HEAD_H + 8}px ${SIDE_B}px ${SHELF_H + 28}px`,
boxSizing: "border-box",
transition: `top ${reachEase}, padding-top ${reachEase}`,
}}
>
{heading}
{subheading}
{entries.length ? (
{entries.map((e, i) => e.set
? leave(() => onPickSet(s))} />
: leave(() => onPick(p, m))} />
)}
) : (
{emptyLine}
)}
setFiltersOpen(false)} aria-hidden="true" style={{
position: "absolute", inset: 0, zIndex: 11, background: "rgba(12,8,6,0.66)",
opacity: filtersOpen ? 1 : 0, pointerEvents: filtersOpen ? "auto" : "none",
transition: `opacity 0.5s ease`,
}} />
Filters
setFiltersOpen(false)}>{CloseIcon}
{[
["Box", (
<>
onChangeBox(null)} style={even}>All boxes
{KC.BOXES.map((b) => (
onChangeBox(b.id)} style={even}>Box {b.id}
))}
)],
["Type", CATEGORIES.map((c) => (
onChangeCategory(c.id)} style={even}>{c.name}
))],
["Gold colour", (
<>
onChangeMetal(null)} style={even}>All gold colours
{KC.MACHINE.metals.map((id) => (
onChangeMetal(id)} style={even}>
))}
)],
].map(([label, choices]) => (
{label}
))}
{BackArrow}
setReach((r) => !r)}>
);
}
/* ------------------------------------------------------------------ */
/* 04. PRODUCT DETAIL */
/* Photography; the name and price; gold colour and diamond size; the */
/* details bar, which opens everything else; then the gift line and */
/* the way to pay. */
/* ------------------------------------------------------------------ */
// Where the purchase box sits on the payment screen, in kiosk pixels.
const KERAI_PAY_BOX = { top: 560, setTop: 400, setGap: 16 };
window.KERAI_PAY_BOX = KERAI_PAY_BOX;
const DETAIL_EASE_IN = "cubic-bezier(.22,.7,.2,1)";
const DETAIL_EASE_OUT = "cubic-bezier(.5,0,.7,.4)";
const FOLD = "cubic-bezier(.65,0,.35,1)";
const slideIn = (delay) => `kerai-slide-in 0.95s ${DETAIL_EASE_IN} ${delay}s both`;
const DETAIL_KEYFRAMES = `
@keyframes kerai-slide-in {
0% { opacity: 0; transform: translateX(48px); filter: blur(12px); }
55% { filter: blur(0); }
100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes kerai-media-in { from { opacity: 0; } to { opacity: 1; } }
`;
function MediaTile({ children, style = {}, dark }) {
const t = themeTokens(useTheme());
return (
);
/* Choice used by the gold colour and diamond size selectors. */
function OptionButton({ selected, disabled, onClick, label, sublabel, glyph, compact }) {
const t = themeTokens(useTheme());
return (
);
}
/* Title and price. The product page, set page and payment screen share
it so the block can carry straight across to payment. */
function SummaryTitle({ product, name, label, priceMinor, showPrice = true }) {
const t = themeTokens(useTheme());
return (
{label || productLabel(product)}
{name || product.name}
{showPrice && (
{priceMinor == null ? "Sold out" : KC.formatMoney(priceMinor)}
)}
);
}
function SummarySelectors({ metals, metal, carats, caratId, onChangeMetal, onChangeCarat, collapse = false, onlySelected = false }) {
const t = themeTokens(useTheme());
// Each option sits in a slot that can fold to nothing on the way to
// payment, so the chosen ones close up without a gap.
const slot = (sel, side, space) => {
const folded = collapse && !sel;
return {
flexShrink: 0,
maxWidth: folded ? 0 : 200,
[side]: folded ? 0 : space,
opacity: folded ? 0 : 1,
overflow: folded ? "hidden" : "visible",
transition: `max-width 0.55s ${FOLD}, padding 0.55s ${FOLD}, opacity 0.3s ease`,
};
};
const compact = onlySelected;
return (
Gold colour
Diamond size
);
}
/* Hand-off to payment: the surrounding pieces fade away while the
summary blocks gain their boxes and rise to where the payment screen
draws them. */
async function riseToPayment({ wrap, boxes, fades, targetTop }) {
const frame = wrap.closest(".screen-frame");
if (!frame) return;
const fading = fades.filter(Boolean).map((el) => {
el.getAnimations().forEach((a) => a.cancel());
return el.animate(
[{ opacity: 1, filter: "blur(0px)" }, { opacity: 0, filter: "blur(12px)" }],
{ duration: 560, easing: "ease", fill: "forwards" }
).finished;
});
const frameRect = frame.getBoundingClientRect();
const scale = frameRect.width / 1080;
const top = (wrap.getBoundingClientRect().top - frameRect.top) / scale;
const boxing = boxes.filter(Boolean).map((el) => el.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 500, delay: 200, easing: "ease", fill: "forwards" }
).finished);
const rise = wrap.animate(
[{ transform: "translateY(0)" }, { transform: `translateY(${targetTop + 24 - top}px)` }],
{ duration: 950, delay: 380, easing: FOLD, fill: "forwards" }
).finished;
try { await Promise.all([...fading, ...boxing, rise]); } catch {}
}
function SquareStill({ src, style }) {
return (
);
}
/* One piece of a set, laid out as the payment screen's purchase box
draws it: square packshot, then title and the chosen options. */
function SetPieceRow({ product, variant, still, stock, boxRef, style }) {
const t = themeTokens(useTheme());
const contentRef = useRefB(null);
const [side, setSide] = useStateB(0);
useLayoutEffectB(() => {
const el = contentRef.current;
setSide(el.offsetHeight);
const ro = new ResizeObserver(() => setSide(el.offsetHeight));
ro.observe(el);
return () => ro.disconnect();
}, []);
return (
{pieces.map((p) => (
toggle(p.key)}>
))}
{KC.INFO_SECTIONS.map((s) => (
toggle(s.id)}>
))}
);
}
function GiftLine({ innerRef, style }) {
const t = themeTokens(useTheme());
return (
);
} else if (product.model) {
feature = (
setHintVisible(false)} />
);
} else {
const still = product.still || shot;
feature = {coverImg(still.src, "center", "contain", 36)} ;
}
media = (
{coverImg(ls.src, ls.position)}
);
} else {
media = {coverImg(shot.src, "center", "contain", 40)} ;
}
const sheetPieces = [{ key: "piece", title: "This piece", rows: KC.specRows(product, variant) }];
return (
setInfoOpen(true)} style={{ animation: slideIn(0.14) }} />
{notice && (
Back
{variant ? `Continue to payment · ${KC.formatMoney(variant.amountMinor)}` : "Continue to payment"}
setInfoOpen(false)} title={pieceTitle(product)} pieces={sheetPieces} />
);
}
/* ------------------------------------------------------------------ */
/* 05. SET — the matching pieces, bought and collected as one */
/* ------------------------------------------------------------------ */
function SetTotal({ set }) {
const t = themeTokens(useTheme());
const saving = KC.setSavingMinor(set);
return (
Set price
{saving > 0 &&
{KC.formatMoney(set.priceMinor)}
);
}
function ScreenSet({ theme, set, fromSku, stock, notice = null, onBack, onContinue, onHome, onLogo }) {
const t = themeTokens(theme);
const reduced = useReducedMotion();
const parts = KC.setParts(set);
const fromProduct = KC.PRODUCT_BY_ID[KC.VARIANT_BY_SKU[fromSku].productId];
const lifestyle = fromProduct.lifestyle || (parts.find((x) => x.product.lifestyle) || {}).product?.lifestyle;
const available = KC.isAvailable(set.sku, stock) && set.components.includes(fromSku);
const GAP = 22;
const [infoOpen, setInfoOpen] = useStateB(false);
const mediaRef = useRefB(null);
const barRef = useRefB(null);
const summaryRef = useRefB(null);
const boxRefs = [useRefB(null), useRefB(null)];
const totalRef = useRefB(null);
const statusRef = useRefB(null);
const actionsRef = useRefB(null);
const exitingRef = useRefB(false);
const playPaymentTransition = async () => {
exitingRef.current = true;
window.__keraiPayFromPdp = true;
if (reduced || !summaryRef.current) return;
await riseToPayment({
wrap: summaryRef.current,
boxes: boxRefs.map((r) => r.current),
fades: [mediaRef, barRef, totalRef, statusRef, actionsRef].map((r) => r.current),
targetTop: KERAI_PAY_BOX.setTop,
});
};
const continueToPayment = () => {
if (!available || exitingRef.current) return;
onContinue({ kind: "set", setId: set.id, fromSku, displayedMinor: set.priceMinor }, { transition: playPaymentTransition });
};
const handleBack = () => {
window.__keraiEnterFrom = "left";
onBack();
};
const lines = [`${parts.length} pieces in ${KC.METALS[set.metal].name.toLowerCase()}, boxed together`, ...KC.detailLines(fromProduct, null).slice(1)];
const sheetPieces = parts.map(({ product, variant }) => ({ key: variant.sku, title: pieceTitle(product), rows: KC.specRows(product, variant) }));
return (
{lifestyle && coverImg(lifestyle.src, lifestyle.position)}
setInfoOpen(true)} style={{ animation: slideIn(0.16) }} />
{(!available || notice) && (
Back
Continue to payment · {KC.formatMoney(set.priceMinor)}
setInfoOpen(false)} title={set.name} pieces={sheetPieces} />
);
}
Object.assign(window, {
ScreenBrowse,
ScreenDetail,
ScreenSet,
SummaryTitle,
SummarySelectors,
KeraiGlassHeader,
SetTotal,
SquareStill,
ScrubSequence,
GiftLine,
KERAI_HEAD_H,
pieceTitle,
typeName,
productLabel,
});
{choices}
{children}
);
}
const coverImg = (src, position = "center", fit = "cover", pad = 0) => (
{metals.map((m) => {
const sel = m.id === metal;
if (onlySelected && !sel) return null;
return (
onChangeMetal(m.id) : undefined}
label={m.name}
glyph={}
/>
);
})}
{carats.map((c, i) => {
const sel = caratId === c.id;
if (onlySelected && !sel) return null;
const dia = 34 + i * 16;
const col = sel ? t.gold : t.fgMuted;
return (
onChangeCarat(c.id) : undefined}
label={c.label}
glyph={
}
/>
);
})}
{children}
-
{rows.map((r, i) => (
- {r.label}
- {r.value}
{section.text && {section.text}}
{section.points && (
);
}
/* `pieces` is one entry per piece: { key, title, rows }. The pieces open
first; the rest of the sheet is the same for everything. */
function DetailsSheet({ open, onClose, title, pieces }) {
const [openIds, setOpenIds] = useStateB(() => new Set(pieces.map((p) => p.key)));
const pieceKeys = pieces.map((p) => p.key).join("|");
useEffectB(() => { if (open) setOpenIds(new Set(pieces.map((p) => p.key))); }, [open, pieceKeys]);
const toggle = (id) => setOpenIds((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
return (
-
{section.points.map((p) => (
- {p} ))}
{KC.GIFT_LINE}
);
}
/* The turn as a frame sequence: dragging sideways plays it forwards or
backwards, and a flick carries on and settles. With `autoTurn` it
swings gently on its own until first touched. */
function ScrubSequence({ sequence, reduced, showHint = true, autoTurn = false }) {
const t = themeTokens(useTheme());
const wrapRef = useRefB(null);
const canvasRef = useRefB(null);
const framesRef = useRefB([]);
const posRef = useRefB(0);
const dragRef = useRefB(null);
const flingRef = useRefB(0);
const autoRef = useRefB(0);
const [hint, setHint] = useStateB(true);
const { dir, count, ext } = sequence;
const clamp = (p) => Math.min(count - 1, Math.max(0, p));
const draw = () => {
const canvas = canvasRef.current;
if (!canvas) return;
const n = Math.round(posRef.current);
const ready = (i) => {
const f = framesRef.current[i];
return f && f.complete && f.naturalWidth ? f : null;
};
let img = null;
for (let d = 0; d < count && !img; d++) img = ready(n - d) || ready(n + d);
if (!img) return;
const ctx = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;
const size = Math.max(w, h) * (sequence.zoom || 1.3);
ctx.clearRect(0, 0, w, h);
ctx.drawImage(img, (w - size) / 2, (h - size) / 2, size, size);
};
useEffectB(() => {
framesRef.current = Array.from({ length: count }, (_, i) => {
const img = new Image();
img.decoding = "async";
img.onload = draw;
img.src = `${dir}/${String(i + 1).padStart(3, "0")}.${ext}`;
return img;
});
const canvas = canvasRef.current;
const ro = new ResizeObserver(() => {
const r = wrapRef.current.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
canvas.width = Math.round(r.width * dpr);
canvas.height = Math.round(r.height * dpr);
draw();
});
ro.observe(wrapRef.current);
if (autoTurn && !reduced) {
const start = performance.now();
const swing = (now) => {
const phase = ((now - start) / 8000) * Math.PI * 2;
posRef.current = ((count - 1) * (1 - Math.cos(phase))) / 2;
draw();
autoRef.current = requestAnimationFrame(swing);
};
autoRef.current = requestAnimationFrame(swing);
}
return () => { ro.disconnect(); cancelAnimationFrame(autoRef.current); cancelAnimationFrame(flingRef.current); };
}, [dir]);
const framesPerPx = () => count / wrapRef.current.getBoundingClientRect().width;
const onDown = (e) => {
cancelAnimationFrame(autoRef.current);
cancelAnimationFrame(flingRef.current);
e.currentTarget.setPointerCapture(e.pointerId);
dragRef.current = { x: e.clientX, t: performance.now(), v: 0 };
setHint(false);
};
const onMove = (e) => {
const d = dragRef.current;
if (!d) return;
const now = performance.now();
const dx = e.clientX - d.x;
const from = posRef.current;
posRef.current = clamp(from + dx * framesPerPx());
d.v = (posRef.current - from) / Math.max(1, now - d.t);
d.x = e.clientX;
d.t = now;
draw();
};
const onUp = () => {
const d = dragRef.current;
dragRef.current = null;
if (!d || reduced) return;
let v = performance.now() - d.t > 80 ? 0 : d.v;
let last = performance.now();
const tick = (now) => {
const dt = now - last;
last = now;
const next = posRef.current + v * dt;
posRef.current = clamp(next);
v = next === posRef.current ? v * Math.pow(0.94, dt / 16.7) : 0;
draw();
if (Math.abs(v) > 0.002) flingRef.current = requestAnimationFrame(tick);
};
flingRef.current = requestAnimationFrame(tick);
};
return (
{showHint && (
)}
);
}
function ScreenDetail({ theme, product, metal, caratId, stock, notice = null, onChangeMetal, onChangeCarat, onContinue, onBack, onHome, onLogo }) {
const t = themeTokens(theme);
const reduced = useReducedMotion();
const metals = KC.metalOptions(product, stock);
const carats = KC.caratOptions(product, metal, stock);
const carat = carats.find((c) => c.id === caratId && c.available) || null;
const variant = carat ? KC.VARIANT_BY_SKU[carat.sku] : null;
const priceMinor = variant ? variant.amountMinor : KC.fromPrice(product, metal, stock);
const [infoOpen, setInfoOpen] = useStateB(false);
const [collapsing, setCollapsing] = useStateB(false);
const [hintVisible, setHintVisible] = useStateB(!!product.model);
useEffectB(() => {
if (!hintVisible) return;
const id = setTimeout(() => setHintVisible(false), 5000);
return () => clearTimeout(id);
}, [hintVisible]);
const morphRef = useRefB(window.__keraiMorph);
const initialOrbit = morphRef.current && morphRef.current.modelOrbit;
useLayoutEffectB(() => { window.__keraiMorph = null; }, []);
const mediaRef = useRefB(null);
const barRef = useRefB(null);
const titleRef = useRefB(null);
const selectorsRef = useRefB(null);
const actionsRef = useRefB(null);
const exitingRef = useRefB(false);
const summaryRef = useRefB(null);
const summaryBoxRef = useRefB(null);
const GAP = 22;
const SQUARE_H = (1080 - SIDE_B * 2 - GAP) / 2;
const handleBack = async () => {
if (exitingRef.current) return;
exitingRef.current = true;
const pending = [actionsRef, barRef, selectorsRef, titleRef, mediaRef].map((ref, i) => {
const el = ref.current;
if (!el) return null;
el.getAnimations().forEach((a) => a.cancel());
return el.animate(
[
{ transform: "translateX(0)", opacity: 1, filter: "blur(0px)" },
{ transform: "translateX(72px)", opacity: 0, filter: "blur(12px)" },
],
{ duration: 720, delay: i * 12, easing: DETAIL_EASE_OUT, fill: "forwards" }
).finished;
});
try { await Promise.all(pending.filter(Boolean)); } catch {}
window.__keraiEnterFrom = "left";
onBack();
};
const playPaymentTransition = async () => {
exitingRef.current = true;
window.__keraiPayFromPdp = true;
if (reduced || !summaryRef.current) return;
setCollapsing(true);
await riseToPayment({
wrap: summaryRef.current,
boxes: [summaryBoxRef.current],
fades: [mediaRef, barRef, actionsRef].map((ref) => ref.current),
targetTop: KERAI_PAY_BOX.top,
});
};
const sequence = product.lifestyle ? product.sequenceSingle || null : null;
const continueToPayment = () => {
if (!variant || exitingRef.current) return;
window.__keraiPaySequence = sequence;
onContinue(
{ kind: "item", sku: variant.sku, displayedMinor: variant.amountMinor },
{ transition: playPaymentTransition }
);
};
/* Media */
const shot = KC.packshot(product, metal, carat ? carat.id : null);
let media;
if (product.lifestyle) {
const ls = product.lifestyle;
let feature;
if (sequence) {
feature =
{feature}
{product.scale && coverImg(product.scale.src, product.scale.position)}
{media}
{notice}
)}
You save {KC.formatMoney(saving)} on the pieces bought separately
}
{parts.map(({ product, variant, still }, i) => (
{!available ? "This set is no longer available." : notice}
)}