/* eslint-disable */ /* cityform — App shell v2 Forks app.jsx with v2-specific tweaks: · heroMode — model / photo / plan / triptych · sceneMode — scroll / auto / off (the 4-phase signature scene) · motionDensity — confident / subtle / off · hideStickers — global override that returns null from CitySticker The current tweak state is mirrored to window.__v2 and broadcast via the `cf-v2-tweaks` event so page-level components can react without prop-drilling. Plus the original v1 tweaks (mode, density, accent preview) survive unchanged. */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "mode": "light", "density": "standard", "cardVariant": "photo", "previewAccent": "vermilion", "heroMode": "model", "sceneMode": "scroll", "motionDensity": "confident", "hideStickers": false }/*EDITMODE-END*/; /* Wrap CitySticker so the hideStickers tweak takes effect everywhere. The original symbol is captured ONCE — re-wrapping on hot-reload of this script would otherwise infinitely chain wrappers. */ (function () { if (window.__cfStickerWrapped) return; const original = window.CitySticker; window.CitySticker = function CitySticker(props) { if (window.__v2 && window.__v2.hideStickers) return null; return original ? original(props) : null; }; window.__cfStickerWrapped = true; })(); function App() { const [route, setRoute] = React.useState('home'); const [productId, setProductId] = React.useState(null); const [cart, setCart] = React.useState([]); const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [catalogReady, setCatalogReady] = React.useState(false); const [checkoutMsg, setCheckoutMsg] = React.useState(null); // Mirror v2 tweaks onto window so non-app components can read them. React.useEffect(() => { window.__v2 = { heroMode: t.heroMode, sceneMode: t.sceneMode, motionDensity: t.motionDensity, hideStickers: t.hideStickers, }; window.dispatchEvent(new CustomEvent('cf-v2-tweaks', { detail: window.__v2 })); // Motion density — flip a class on that disables transitions // when set to 'off', or boosts them when set to 'confident'. const root = document.documentElement; root.removeAttribute('data-motion'); if (t.motionDensity && t.motionDensity !== 'subtle') { root.setAttribute('data-motion', t.motionDensity); } }, [t.heroMode, t.sceneMode, t.motionDensity, t.hideStickers]); // Live admin catalogue, with fallback to bundled data.js (same as v1). React.useEffect(() => { let cancelled = false; fetch('/api/storefront/catalog') .then(r => r.ok ? r.json() : Promise.reject(r.status)) .then(live => { if (cancelled) return; if (Array.isArray(live) && live.length > 0) { // Merge, don't replace: live D1 entries are authoritative & buyable; // the bundled designed collection (incl. the Sheffield hero + its // curated GLB) persists for the look but is marked non-buyable // (stock 0) since it isn't in the D1 source of truth. const bundled = Array.isArray(window.CATALOG) ? window.CATALOG : []; const liveIds = new Set(live.map(x => x.id)); const keptBundled = bundled .filter(b => !liveIds.has(b.id)) .map(b => ({ ...b, stock: 0 })); window.CATALOG = [...live, ...keptBundled]; // Re-apply v2 photo/GLB augmentation over the merged catalogue. if (typeof window.__applyV2Catalog === 'function') window.__applyV2Catalog(); } setCatalogReady(true); }) .catch(() => { if (!cancelled) setCatalogReady(true); }); return () => { cancelled = true; }; }, []); React.useEffect(() => { document.documentElement.setAttribute('data-mode', t.mode || 'light'); document.documentElement.setAttribute('data-density', t.density || 'standard'); }, [t.mode, t.density]); React.useEffect(() => { window.scrollTo({ top:0 }); }, [route, productId]); if (!catalogReady) { return (

LOADING CATALOGUE…

); } // Commission ("atelier") is out of scope for v1 — fold it back to home. const go = (r, id) => { if (r === 'atelier') r = 'home'; setRoute(r); if (id) setProductId(id); }; const addToCart = (item) => setCart(c => [...c, item]); const removeFromCart = (i) => setCart(c => c.filter((_, idx) => idx !== i)); // Cart -> Stripe Checkout. D1 is the price/stock authority; we send only // slug + qty. Browser is redirected to Stripe's hosted payment page. const checkout = async () => { if (checkoutMsg === 'loading') return; setCheckoutMsg('loading'); const byId = new Map(); cart.forEach((i) => byId.set(i.id, (byId.get(i.id) || 0) + (i.qty || 1))); const items = [...byId].map(([slug, qty]) => ({ slug, qty })); try { const res = await fetch('/api/checkout', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ items }), }); const data = await res.json().catch(() => ({})); if (res.status === 409 && Array.isArray(data.sold)) { setCheckoutMsg('No longer available: ' + data.sold.join(', ')); return; } if (!res.ok || !data.url) { setCheckoutMsg('Could not start checkout. Please try again.'); return; } window.location = data.url; } catch (e) { setCheckoutMsg('Could not start checkout. Please try again.'); } }; return (

{route === 'home' && } {route === 'atlas' && } {route === 'product' && } {route === 'atelier' && } {route === 'cart' && } {route === 'order' && } {route === 'journal' && } {route === 'about' && } setTweak('heroMode', v)} /> setTweak('sceneMode', v)} /> setTweak('motionDensity', v)} /> setTweak('hideStickers', v)} /> setTweak('mode', v)} /> setTweak('density', v)} />

{[ ['home', 'Home'], ['atlas', 'Collection'], ['product', 'Product'], ['atelier', 'Commission'], ['cart', 'Bag'], ['order', 'Order'], ].map(([r, l]) => ( ))}

); } function StubPage({ go, title, subtitle }) { return (

IN DEVELOPMENT

{title}

{subtitle}

); } ReactDOM.createRoot(document.getElementById('root')).render();