{PS_I18N.T("loyalty")} / {platform === "google" ? "Google Pass Studio" : "Apple Pass Studio"}

); } function useHistory(initial) { const stackRef = React.useRef([initial]); const [idx, setIdx] = React.useState(0); const current = stackRef.current[idx]; const set = (val) => { stackRef.current = [...stackRef.current.slice(0, idx + 1), val]; setIdx(stackRef.current.length - 1); }; const undo = () => setIdx((i) => Math.max(0, i - 1)); const redo = () => setIdx((i) => Math.min(stackRef.current.length - 1, i + 1)); const canUndo = idx > 0; const canRedo = idx < stackRef.current.length - 1; return [current, set, { undo, redo, canUndo, canRedo }]; } function PassStudio() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [platform, setPlatform] = React.useState("apple"); const [lang, setLang] = React.useState("en"); const [pass, setPass, passHistory] = useHistory(PASS_PRESETS[t.preset] || PASS_PRESETS.loyalty); const [gpass, setGpass, gpassHistory] = useHistory(GOOGLE_DEFAULT); const [sidebarWidth, setSidebarWidth] = React.useState(440); const containerRef = React.useRef(null); const dragStart = React.useRef({ x: 0, w: 440 }); // Track whether any modal portal is open so the drag handle can be suppressed. const [modalOpen, setModalOpen] = React.useState(false); React.useEffect(() => { const check = () => { const hasModal = [...document.body.children].some(el => !el.dataset.chatbot && getComputedStyle(el).position === 'fixed' ); setModalOpen(hasModal); }; const observer = new MutationObserver(check); observer.observe(document.body, { childList: true }); return () => observer.disconnect(); }, []); const onResizeStart = React.useCallback((e) => { // Don't start a drag when a modal portal is open. if ([...document.body.children].some(el => !el.dataset.chatbot && getComputedStyle(el).position === 'fixed')) return; e.preventDefault(); const containerW = containerRef.current ? containerRef.current.offsetWidth : window.innerWidth; dragStart.current = { x: e.clientX, w: sidebarWidth }; document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none"; const onMove = (ev) => { const delta = t.previewSide === "left" ? -(ev.clientX - dragStart.current.x) : (ev.clientX - dragStart.current.x); const maxW = containerW - 320; // always leave at least 320px for preview const next = Math.min(maxW, Math.max(240, dragStart.current.w + delta)); setSidebarWidth(next); }; const onUp = () => { document.body.style.cursor = ""; document.body.style.userSelect = ""; window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); }, [sidebarWidth, t.previewSide]); // Reflect autosave freshness in the top bar: stamp the moment any edit lands. const [savedAt, setSavedAt] = React.useState(() => Date.now()); React.useEffect(() => { setSavedAt(Date.now()); }, [pass, gpass]); // Make T()/PL() across the studio resolve to the selected language this render. PS_I18N.setLang(lang); // Apply a preset when the tweak changes (Apple side). const prevPreset = React.useRef(t.preset); React.useEffect(() => { if (t.preset !== prevPreset.current) { prevPreset.current = t.preset; if (PASS_PRESETS[t.preset]) { setPass(PASS_PRESETS[t.preset]); setGpass((g) => ({ ...g, backgroundColor: PASS_PRESETS[t.preset].backgroundColor })); } } }, [t.preset]); const isGoogle = platform === "google"; // Both platforms stay mounted so switching is a smooth crossfade, not a hard // cut. The inactive side fades out and is made non-interactive. const appleForm = setPlatform("google")} lang={lang} onLang={setLang} onUndo={passHistory.undo} onRedo={passHistory.redo} canUndo={passHistory.canUndo} canRedo={passHistory.canRedo} />; const googleForm = setPlatform("apple")} onUndo={gpassHistory.undo} onRedo={gpassHistory.redo} canUndo={gpassHistory.canUndo} canRedo={gpassHistory.canRedo} />; const applePreview = ; const googlePreview = ; const isDark = t.backdrop === "dark"; // Dark preview also flips the whole studio UI: toggle the design system's // `.dark` theme on so every surface (and any portaled modal) re-themes. React.useEffect(() => { document.documentElement.classList.toggle("dark", isDark); return () => document.documentElement.classList.remove("dark"); }, [isDark]); // The crossfade underlay must match the active backdrop, or in dark mode the // light page background flashes through mid-transition. This is the key fix. const stageBg = isDark ? "radial-gradient(130% 100% at 50% 0%, #1A1026 0%, #120D18 46%, #0F0A16 100%)" : "var(--background)"; // Cinematic platform swap: the leaving side swings back into depth (rotateY + // scale down + blur + fade), the entering side swings forward from the other // side. `side` is -1 for Apple (exits left), +1 for Google (exits right). const stageLayer = (active, side) => ({ position: "absolute", inset: 0, display: "flex", opacity: active ? 1 : 0, transform: active ? "translateX(0) rotateY(0deg) scale(1)" : `translateX(${side * 11}%) rotateY(${side * -12}deg) scale(.9)`, filter: active ? "blur(0px)" : "blur(12px)", transformOrigin: side < 0 ? "right center" : "left center", pointerEvents: active ? "auto" : "none", transition: "opacity .55s ease, transform .72s cubic-bezier(.22,1,.32,1), filter .55s ease", willChange: "opacity, transform, filter", backfaceVisibility: "hidden", }); const formLayer = (active, side) => ({ position: "absolute", inset: 0, background: "var(--surface-base)", opacity: active ? 1 : 0, // No transform on the active layer — CSS transforms create a new fixed- // positioning context, which would constrain position:fixed popups/modals // to the sidebar instead of the full viewport. transform: active ? undefined : `translateX(${side * 22}px)`, pointerEvents: active ? "auto" : "none", transition: "opacity .42s ease, transform .55s cubic-bezier(.22,1,.32,1)", willChange: active ? "opacity" : "opacity, transform", }); return (

{/* Editing panel — slides + fades between platforms */}

{appleForm}

{googleForm}

{/* Resize handle — hidden and non-interactive when a modal is open */}

{ if (!modalOpen) e.currentTarget.style.background = "var(--border-focused, #ff7e3d)"; }} onMouseLeave={e => e.currentTarget.style.background = "var(--border-primary)"} >

{/* Preview stage — cinematic 3D swap */}

{applePreview}

{googlePreview}

setTweak("backdrop", v)} />

setTweak("preset", v)} /> setTweak("backdrop", v)} /> setTweak("device", v)} /> setTweak("guides", v)} /> setTweak("previewSide", v)} /> setTweak("accent", v)} />

); } /* ── AI Chat Bot ─────────────────────────────────────────────────────────── */ // The Gemini API key lives server-side now; the chatbot calls the backend proxy // (/api/ai/chat) with the operator's Bearer session. No key in the browser. function parseBold(text) { const parts = text.split(/(\*\*.*?\*\*)/g); return parts.map((p, i) => p.startsWith("**") && p.endsWith("**") ? React.createElement("strong", { key: i }, p.slice(2, -2)) : p ); } function BotMessage({ text, animate }) { const [shown, setShown] = React.useState(animate ? 0 : text.length); React.useEffect(() => { if (!animate) { setShown(text.length); return; } setShown(0); let i = 0; const id = setInterval(() => { i++; setShown(i); if (i >= text.length) clearInterval(id); }, 18); return () => clearInterval(id); }, [text, animate]); return React.createElement(React.Fragment, null, parseBold(text.slice(0, shown))); } async function geminiChat(history, userText) { const base = window.SpoonityAuth ? window.SpoonityAuth.getEndpoint() : ""; const res = await fetch(`${base}/api/ai/chat`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ history, userText }), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err?.error || `HTTP ${res.status}`); } const data = await res.json(); return data.text || "…"; } function ChatBot() { const [open, setOpen] = React.useState(false); const [messages, setMessages] = React.useState([ { role: "bot", text: "Hi! I'm your Spoonity AI assistant. Ask me anything about designing your wallet pass." }, ]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const bottomRef = React.useRef(null); const inputRef = React.useRef(null); React.useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages, loading]); React.useEffect(() => { if (open) setTimeout(() => inputRef.current?.focus(), 320); }, [open]); const send = async () => { const text = input.trim(); if (!text || loading) return; setInput(""); const next = [...messages, { role: "user", text }]; setMessages(next); setLoading(true); try { const reply = await geminiChat(messages, text); setMessages(m => [...m, { role: "bot", text: reply }]); } catch (err) { setMessages(m => [...m, { role: "bot", text: `Error: ${err.message}` }]); } finally { setLoading(false); } }; const panelW = 320; return ReactDOM.createPortal(

{/* Slide-in chat panel */}

{/* Header */}

Spoonity AI

Pass design assistant

{/* Messages */}

{messages.map((m, i) => (

{m.role === "user" ? m.text : React.createElement(BotMessage, { text: m.text, animate: i === messages.length - 1 })}

))} {loading && (

{[0,1,2].map(i => (

))}

)}

{/* Input */}

setInput(e.target.value)} onKeyDown={e => e.key === "Enter" && !e.shiftKey && (e.preventDefault(), send())} placeholder="Ask me anything…" style={{ flex: 1, border: "1.5px solid var(--border-primary,#e5e7eb)", borderRadius: 10, padding: "8px 11px", fontSize: 13, outline: "none", fontFamily: "var(--font-sans)", background: "var(--surface-base,#fff)", color: "var(--typography-primary,#111)", transition: "border-color .15s", }} onFocus={e => e.target.style.borderColor = "var(--border-focused,#ff7e3d)"} onBlur={e => e.target.style.borderColor = "var(--border-primary,#e5e7eb)"} />

{/* Floating trigger button */} {/* Bouncing dots keyframes */}

, document.body ); } window.PassStudio = PassStudio;