opens Settings on that section. "billing" maps to the // merged "Plan & billing" tab (id "plan"). Mirror the google-connected flow: // seed the section hint SettingsPage reads on mount, switch to settings, then // strip the param so a refresh doesn't repeat it. React.useEffect(() => { const p = new URLSearchParams(window.location.search); const s = p.get("settings"); if (!s) return; const section = s === "billing" ? "plan" : s; try { localStorage.setItem("vanday_settings_section", section); } catch {} setView("settings"); p.delete("settings"); const qs = p.toString(); window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : "") + window.location.hash); }, []); // After the in-app plan picker (ChoosePlanTrial) reloads the page, surface the // trial welcome modal for the plan they just started (the auto-start path sets // this directly without a reload; this covers the reload path). React.useEffect(() => { let p = null; try { p = window.localStorage.getItem("vanday_trial_welcome"); } catch {} if (!p) return; try { window.localStorage.removeItem("vanday_trial_welcome"); } catch {} setWelcomeTrialPlan(p); setShowWelcome(true); }, []); const [activeFolder, setActiveFolder] = React.useState("all"); const [previewAsset, setPreviewAsset] = React.useState(null); const [publishAsset, setPublishAsset] = React.useState(null); const [permissionsFolder, setPermissionsFolder] = React.useState(null); const [shareFolder, setShareFolder] = React.useState(null); const [activePortal, setActivePortal] = React.useState(null); const [similarSource, setSimilarSource] = React.useState(null); // Preview navigation stack: when user jumps from one asset's Related tab // to another, we push the previous asset here so they can Back out of it. const [previewStack, setPreviewStack] = React.useState([]); // Quick-upload flow: destination picker + persistent progress dock. // Hooked into Rail / topbar buttons everywhere. If user wants the full // batch experience they can still open the dedicated UploadPage. const [showUploadPicker, setShowUploadPicker] = React.useState(false); const [uploadQueue, setUploadQueue] = React.useState([]); const queueIdRef = React.useRef(1); const openQuickUpload = () => setShowUploadPicker(true); // ----- Mobile chrome (Wave 2, from Claude Design "DAM Refresh") ----------- // Tracks the off-canvas folder drawer. Synced to a `drawer-open` class on // so the CSS at the bottom of styles.css can slide the sidebar in // without each individual screen needing to know about it. Auto-closes // whenever the top-level view changes (e.g. tapping the Upload tab in the // bottom nav navigates away from Library AND closes the drawer). const [drawerOpen, setDrawerOpen] = React.useState(false); React.useEffect(() => { if (drawerOpen) document.body.classList.add("drawer-open"); else document.body.classList.remove("drawer-open"); return () => document.body.classList.remove("drawer-open"); }, [drawerOpen]); React.useEffect(() => { setDrawerOpen(false); }, [view]); // Sidebar items inside the drawer call setActiveFolder, which doesn't change // the top-level `view`, so the close-on-view-change effect above never fires // for in-library navigation. Listen for a vanday-drawer-close event that // library.jsx's Sidebar dispatches whenever the user picks a folder / quick- // access view, so the drawer slides shut and they see what they just selected. React.useEffect(() => { const handler = () => setDrawerOpen(false); window.addEventListener("vanday-drawer-close", handler); return () => window.removeEventListener("vanday-drawer-close", handler); }, []); // Real upload: hand the user's selected files to the server API and let // the upload dock track real progress + the real server response. const queueFiles = async ({ folderId, files }) => { setShowUploadPicker(false); if (!files || files.length === 0) return; // ----- Pre-flight upload-count cap check ----- // Read the live limits + usage from /api/me. If this batch would // push the org over the free-beta upload cap, stop right here and // tell the user — don't show progress for files we know we're // going to reject. window.alert is intentional: this is a hard // wall, not a soft warning, and the user should acknowledge it // before continuing. try { const limits = (typeof window.useVandayLimitsSnapshot === "function") ? window.useVandayLimitsSnapshot() : null; if (limits && Number.isFinite(limits.maxUploads)) { const remaining = Math.max(0, limits.maxUploads - (limits.uploadsUsed || 0)); if (remaining <= 0) { window.alert( `You've reached the ${limits.maxUploads}-upload limit on the ${({ free_beta: "Free Beta", starter: "Starter", growth: "Growth", pro: "Pro" }[limits.planName] || "current")} plan. ` + `Delete some assets in your library to make room before uploading more.` ); return; } if (files.length > remaining) { const msg = `You're trying to upload ${files.length} file${files.length === 1 ? "" : "s"} ` + `but only have ${remaining} slot${remaining === 1 ? "" : "s"} left ` + `(${limits.uploadsUsed} / ${limits.maxUploads} used).\n\n` + `Free up some room by deleting assets, then try again.`; window.alert(msg); return; } } } catch { /* if /api/me hasn't loaded, fall through and let server enforce */ } // Stage each file as an "uploading" row in the dock right away, so the // user sees activity while the network call is in flight. const rows = files.map((f) => ({ id: `u-${queueIdRef.current++}`, name: f.name, size: f.size, thumb: f.thumb, folder: folderId, progress: 30, // arbitrary — we don't get true progress events from fetch status: "uploading", asset: null, _file: f._file, // underlying browser File })); setUploadQueue((q) => [...q, ...rows]); // Fire one POST /api/upload with every file in this batch. const realFiles = files.map((f) => f._file).filter(Boolean); try { const resp = await window.VandayAPI.uploadFiles(realFiles, { folder: folderId }); const created = Array.isArray(resp?.assets) ? resp.assets : []; // Refresh /api/me so the limits snapshot reflects the new count; // the next upload attempt's pre-flight check needs to be accurate. try { window.VandayMe?.fetchMe?.({ force: true }); } catch {} // Files the server couldn't accept (unsupported type inside a zip, or the // upload-count cap) come back in resp.skipped. Surface each as its own // failed row in the upload dock — a clear, non-disruptive failure flow — // instead of a modal alert that vanishes and leaves no trace. const skippedRows = (resp?.skipped || []).map((s) => ({ id: `u-${queueIdRef.current++}`, name: s.name, size: 0, thumb: null, progress: 100, status: "failed", noRetry: true, // retrying an unsupported type / hit cap won't help error: s.reason === "unsupported_type" ? "Skipped — unsupported file type" : s.reason === "upload_limit_reached" ? "Skipped — upload limit reached" : "Skipped", })); // Reconcile staged rows with what the server actually created. // // Three cases: // 1. created.length === rows.length — normal images, 1-to-1 by index // (handles HEIC where the asset's name changes to .jpg) // 2. created.length > rows.length — at least one file was a zip the // server expanded into many assets, or HEIC at the zip root added // to the count. Replace our staged rows with one per server asset. // 3. created.length < rows.length — some files were rejected silently // (rare). Show the unmatched ones as failed. setUploadQueue((qs) => { const others = qs.filter((q) => !rows.some((r) => r.id === q.id)); if (created.length === rows.length) { return [ ...others, ...rows.map((q, i) => { const a = created[i]; return { ...q, status: "analyzing", progress: 100, asset: a, name: a.name, thumb: a.url, _file: undefined }; }), ...skippedRows, ]; } if (created.length > 0) { // Replace staged rows with one row per actually-created asset. return [ ...others, ...created.map((a) => ({ id: `u-${queueIdRef.current++}`, name: a.name, size: (a.sizeBytes || 0) / (1024 * 1024), thumb: a.url, folder: a.folder, progress: 100, status: "analyzing", asset: a, })), ...skippedRows, ]; } // Nothing created — show all staged rows as failed. return [ ...others, ...rows.map((q) => ({ ...q, status: "failed", error: "Server did not accept these files", _file: undefined })), ...skippedRows, ]; }); // Poll each uploaded asset until AI tagging finishes (or we time out). for (const a of created) { const start = Date.now(); const tick = async () => { if (Date.now() - start > 120_000) return; try { const fresh = await window.VandayAPI.getAsset(a.id); if (fresh.aiState === "done" || fresh.aiState === "failed") { setUploadQueue((qs) => qs.map((q) => q.asset?.id === a.id ? { ...q, status: "ready", asset: fresh } : q )); return; } } catch {/* keep polling */} setTimeout(tick, 700); }; setTimeout(tick, 700); } } catch (err) { // Parse server error message if it's a structured 4xx. let msg = String(err?.message || err || "Upload failed"); try { const m = msg.match(/: (\{.+\})$/); if (m) { const body = JSON.parse(m[1]); if (body.message) msg = body.message; else if (body.error) msg = body.error.replace(/_/g, " "); } } catch {} setUploadQueue((qs) => qs.map((q) => ( rows.some((r) => r.id === q.id) ? { ...q, status: "failed", error: msg, _file: undefined } : q ))); } }; const retryUpload = (id) => setUploadQueue((qs) => qs.map((q) => ( q.id === id ? { ...q, status: "uploading", progress: 0, willFail: false, error: null } : q ))); // useCallback so the function identity is stable across App // re-renders. UploadDock's auto-dismiss effect depends on this // reference — without the memo, every App render handed it a new // function, the effect re-ran, and its 4.5s setTimeout was cancelled // and re-scheduled before it could fire. Net effect: the dock would // sit at "All N files processed" indefinitely. const clearCompleted = React.useCallback(() => { setUploadQueue((qs) => qs.filter((q) => ( q.status === "uploading" || q.status === "analyzing" ))); }, []); const openSimilar = (a) => { setSimilarSource(a); setView("library"); }; const clearSimilar = () => setSimilarSource(null); const isPublished = activeFolder === "__published"; // Preview navigation. The pager steps through ORIGINAL assets so its count // matches the library grid (crops are reachable via the Crops tab). When a // crop itself is open, prev/next steps through that asset's sibling crops so // crop navigation still works. const baseList = ALL_ASSETS; const folderList = activeFolder === "all" || isPublished ? baseList : baseList.filter((a) => a.folder === activeFolder); const visibleAssets = previewAsset && previewAsset.kind === "crop" ? baseList.filter((a) => a.kind === "crop" && a.parentId === previewAsset.parentId) : folderList.filter((a) => a.kind !== "crop"); const previewIndex = previewAsset ? visibleAssets.findIndex((a) => a.id === previewAsset.id) : -1; const openAsset = (a) => { // If we're already viewing a different asset and the user is opening // another from inside preview (e.g. via Related / Find similar / crops), // push the current asset so they can navigate back. if (view === "preview" && previewAsset && previewAsset.id !== a.id) { setPreviewStack((s) => [...s, previewAsset]); } setPreviewAsset(a); setView("preview"); }; const goBackInPreview = () => { setPreviewStack((s) => { if (s.length === 0) return s; const next = s.slice(0, -1); setPreviewAsset(s[s.length - 1]); return next; }); }; const closePreview = () => { setPreviewStack([]); setView("library"); }; const goPrev = () => { if (previewIndex > 0) setPreviewAsset(visibleAssets[previewIndex - 1]); }; const goNext = () => { if (previewIndex < visibleAssets.length - 1) setPreviewAsset(visibleAssets[previewIndex + 1]); }; const openPublish = (a) => setPublishAsset(a); const closePublish = () => setPublishAsset(null); // Shopify OAuth return — Shopify redirects the merchant back to // /?shopify=connected|error. Deep-link into Settings → Integrations once // logged in, where IntegrationsHub reads the param and shows the result. const shopifyReturnPending = React.useRef( new URLSearchParams(window.location.search).has("shopify"), ); React.useEffect(() => { if (!shopifyReturnPending.current) return; if (view === "login") return; // wait until authenticated shopifyReturnPending.current = false; try { localStorage.setItem("vanday_settings_section", "integrations"); } catch {} setView("settings"); }, [view]); // Reopen the Publish modal after the social-connect flow. The modal // navigates the whole tab to Upload-Post and back to /?back_from=connect; // here we restore it for the asset the user was publishing. We retry until // the server asset list has loaded (assets stream in asynchronously). React.useEffect(() => { const p = new URLSearchParams(window.location.search); if (p.get("back_from") !== "connect") return; let pendingId = null; try { pendingId = sessionStorage.getItem("vanday_publish_return"); } catch {} if (!pendingId) return; // came from Settings, not the publish modal const cleanUrl = () => { const q = new URLSearchParams(window.location.search); q.delete("back_from"); const qs = q.toString(); window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : "") + window.location.hash); }; const tryOpen = () => { const a = getAsset(pendingId); if (!a) return false; setPublishAsset(a); try { sessionStorage.removeItem("vanday_publish_return"); } catch {} cleanUrl(); return true; }; if (tryOpen()) return; let tries = 0; const iv = setInterval(() => { tries += 1; if (tryOpen() || tries > 40) { // ~10s ceiling clearInterval(iv); if (tries > 40) { try { sessionStorage.removeItem("vanday_publish_return"); } catch {} cleanUrl(); } } }, 250); return () => clearInterval(iv); }, []); // Keyboard navigation on preview React.useEffect(() => { if (view !== "preview" || publishAsset) return; const onKey = (e) => { if (e.key === "Escape") closePreview(); if (e.key === "ArrowLeft") goPrev(); if (e.key === "ArrowRight") goNext(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [view, previewIndex, publishAsset]); // Beta is full — brand-new, uninvited signups can't get in. Show a friendly // dead-end instead of the app. (All hooks above run unconditionally; this // early return is safe.) if (betaFull) { return (

The Vanday beta is full

Thanks so much for your interest! We've reached the limit for this round of the free beta. We'll reach out by email as soon as we re-open sign-ups — no need to do anything in the meantime.

); } // Workspace locked — its trial ended without payment. Block the app and show // the lockout screen (with a path to pay, for admins). Its own component so // its data-fetching hooks aren't called conditionally (Rules of Hooks). if (locked) { return ; } // Brand-new owner + billing live — pick a plan and start the 14-day trial // before entering the app. Its own component so its hooks run unconditionally. if (choosePlan) { return setChoosePlan(false)} />; } // Seat limit reached — this person tried to auto-join via the company-domain // rule but the workspace is at capacity. Tell them to contact an admin. if (seatLimitReached) { return (

🔒

This workspace is full

Your organization's Vanday workspace has used all of its available seats. Contact your workspace administrator — they can either upgrade the plan or remove a member to make room for you.

); } // Domain match choice — user's email matches a workspace with domain auto-join // but we don't silently capture them. Let them decide: join the team or start // their own separate workspace. if (domainMatchFound) { const joinWorkspace = () => { try { window.sessionStorage.setItem("vanday_domain_join", "confirm"); } catch {} location.reload(); }; const createOwnWorkspace = () => { try { window.sessionStorage.setItem("vanday_domain_join", "skip"); } catch {} location.reload(); }; return (

🏢

{domainMatchFound.orgName} is on Vanday

Your email matches your company’s existing Vanday workspace. Would you like to join your team, or start your own separate account?

); } // Invite email mismatch — the person authenticated with an email that // doesn't match the workspace invite. Offer a clear choice: retry with the // invited email, or abandon the invite and start their own workspace. if (inviteMismatch) { const useInvitedEmail = async () => { // Keep the invite id in sessionStorage and bounce them back through // sign-up. Signing out of Clerk + reloading re-opens the sign-up popup // (the URL still carries ?join=invite), where they can use the right email. // Always call Clerk.signOut() if the Clerk SDK is loaded — don't gate // on window.Clerk.user, which can be transiently null even when the // user IS signed in (race between Clerk's client-side hydration and // the click handler). Gating caused the sign-out button to silently // skip the Clerk session clear on the first click; the second click // worked because Clerk had hydrated by then. try { await window.Clerk?.signOut?.(); } catch {} location.reload(); }; const createNewInstead = () => { // Drop the invite link so jfetch stops sending X-Vanday-Invite; the // server then provisions a normal personal workspace for this email. try { window.sessionStorage.removeItem("vanday_invite_id"); } catch {} // Also strip the invite params from the URL. Without this, login.jsx // re-reads ?join=invite&i=… on the next load and immediately re-stashes // the invite id, so /api/me sends X-Vanday-Invite again and the user // lands right back on this mismatch screen — an infinite loop. try { const u = new URL(window.location.href); u.searchParams.delete("join"); u.searchParams.delete("i"); u.searchParams.delete("w"); window.history.replaceState({}, "", u.pathname + u.search + u.hash); } catch {} location.reload(); }; return (

Your email doesn't match the invite

To join {inviteMismatch.workspaceName}, sign in with the email the invite was sent to{inviteMismatch.invitedEmail ? <> ({inviteMismatch.invitedEmail}) : null}.

{inviteMismatch.yourEmail && (

You signed in as {inviteMismatch.yourEmail}.

)}

); } let screen; if (view === "login") screen = setView("library")} />; else if (view === "upload") screen = ; else if (view === "admin") screen = setView("library")} />; else if (view === "settings") screen = ; else if (view === "portal") screen = { setActivePortal(null); setView("library"); }} />; else if (view === "preview") screen = ( = 0 ? previewIndex : 0} total={visibleAssets.length} onPublish={openPublish} onOpenAsset={openAsset} onFindSimilar={openSimilar} onShare={(ctx) => setShareFolder(ctx)} backStack={previewStack} onBack={goBackInPreview} onQuickUpload={openQuickUpload} /> ); else screen = ( ); // Trial countdown banner. Shows above every authenticated view when a // 14-day in-app trial is active and entering its last week (daysLeft <= 7). // Clicking the upgrade CTA navigates to Settings → Billing where the user // can convert to a paid subscription. Hidden on login + share portal so // those public/unauthenticated layouts aren't disrupted. const showTrialBanner = view !== "login" && view !== "portal"; // Mobile chrome only hides on login + public share-portal pages, which have // their own full-page layouts. Preview now keeps the chrome so the user can // navigate away (earlier we excluded it; that left users stranded on phone). const showMobileChrome = view !== "login" && view !== "portal"; const MOBILE_TITLES = { library: "Library", upload: "Upload", settings: "Settings", admin: "Admin", preview: "Preview", }; const mobileTitle = MOBILE_TITLES[view] || "Vanday"; // Mobile search overlay — when the topbar's search icon is tapped, the title // and right-side actions are hidden and the row turns into an inline search // input. Typing dispatches a `vanday-search` window event that library.jsx // listens for; closing clears the query. // NOTE: useState declarations for this are hoisted to the top of App to // satisfy Rules of Hooks (they must not come after any early return). const emitSearch = (q) => { try { window.dispatchEvent(new CustomEvent("vanday-search", { detail: { q } })); } catch {} }; const openMobileSearch = () => { if (view !== "library") setView("library"); setMobileSearchOpen(true); }; const closeMobileSearch = () => { setMobileSearchOpen(false); setMobileSearchQuery(""); emitSearch(""); }; return ( <> {impersonating && (

⚠ You are impersonating {impersonating.email || impersonating.userId}

)} {showTrialBanner && setView("settings")} />} {showMobileChrome && (

{mobileSearchOpen ? ( <> { const q = e.target.value; setMobileSearchQuery(q); emitSearch(q); }} placeholder="Search assets, tags, crops…" type="search" /> ) : ( <> {/* On Preview, the library sidebar isn't rendered (different view), so opening the drawer would slide in nothing — tap appeared dead. Repurpose the left slot as "back to library" while on preview. Everywhere else, it's the menu burger as before. */} {view === "preview" ? ( ) : ( )} {mobileTitle}

)}

)} {screen} {showMobileChrome && ( <> {/* Scrim tap-anywhere to dismiss the drawer. */}

setDrawerOpen(false)} />

{/* Profile tab — for now routes to Settings (which contains the profile section). Wave 2b can wire a dedicated profile view. */}

)} {publishAsset && ( )} {permissionsFolder && ( setPermissionsFolder(null)} /> )} {shareFolder && ( setShareFolder(null)} onOpenPortal={(p) => { setActivePortal({ ...p, folder: (shareFolder.asset || shareFolder.presetAssets) ? null : shareFolder.id, assetIds: p.assetIds, }); setShareFolder(null); setView("portal"); }} /> )} {showUploadPicker && ( setShowUploadPicker(false)} onConfirm={queueFiles} /> )} {view !== "login" && view !== "portal" && ( )} ); } // --------------------------------------------------------------------------- // TrialBanner — top-of-app reminder for orgs in the last 7 days of a 14-day // in-app trial. Polls /api/billing on mount + every 5 minutes after that. // Dismissable per session (the X is a no-op past the immediate session); we // don't persist dismissal across reloads because a customer who's missed // adding a card needs to be re-poked aggressively as the deadline approaches. // --------------------------------------------------------------------------- function TrialBanner({ onGoToBilling }) { const [trial, setTrial] = React.useState(null); const [dismissed, setDismissed] = React.useState(false); const [busy, setBusy] = React.useState(false); const load = React.useCallback(() => { // No billing rolled out for this workspace → no trial is possible, and // /api/billing is admin-only. Skip the poll so non-admin/beta users don't // fire a pointless 403 every 5 minutes. if (window.VandayMe?.usageBillingEnabled?.() !== true) { setTrial(null); return; } window.VandayAPI?.getBilling?.() .then((d) => { if (d?.trial) setTrial(d.trial); else setTrial(null); }) .catch(() => {}); }, []); React.useEffect(() => { load(); const iv = window.setInterval(load, 5 * 60 * 1000); return () => window.clearInterval(iv); }, [load]); if (!trial || dismissed) return null; // Only nag in the last week. Earlier in the trial we don't want to // pressure the user — let them explore. if (trial.daysLeft > 7) return null; // Tone scales with urgency. 7-4 days = soft accent. 3-2 days = stronger. // 1 day / today = red, no dismiss button. const urgent = trial.daysLeft <= 1; const tightening = trial.daysLeft <= 3; const bg = urgent ? "oklch(0.62 0.18 28)" : tightening ? "var(--accent)" : "var(--accent-soft, #fbe6df)"; const fg = urgent || tightening ? "#fff" : "var(--text)"; const message = trial.daysLeft <= 0 ? "Your trial ended." : trial.daysLeft === 1 ? "Last day of your trial." : `${trial.daysLeft} days left on your free trial.`; const cta = urgent ? "Add payment to keep your plan" : "Add payment method"; const goUpgrade = async () => { setBusy(true); try { const { url } = await window.VandayAPI.billingCheckout(trial.plan, "monthly"); window.location.href = url; } catch (e) { setBusy(false); // Fall back to opening the Billing tab so the user can recover. onGoToBilling?.(); } }; return (

{message} {!urgent && ( )}

); } // --------------------------------------------------------------------------- // UpgradeModal — the in-context paywall for blocked actions. Catches a 403 // from the server (with shape { error, plan, upgradeTo, message }) and shows // a one-screen upgrade prompt. Two CTAs: // - "Start free trial" (no card) - skips Stripe entirely // - "Upgrade now" - goes to Stripe Checkout for the upgradeTo plan // Mount once at the app root and trigger via window.dispatchEvent below. // --------------------------------------------------------------------------- function UpgradeModal() { const [payload, setPayload] = React.useState(null); // { plan, upgradeTo, message } | null const [busy, setBusy] = React.useState(null); React.useEffect(() => { const handler = (e) => setPayload(e.detail || null); window.addEventListener("vanday-paywall", handler); return () => window.removeEventListener("vanday-paywall", handler); }, []); if (!payload) return null; const close = () => setPayload(null); const startTrial = async () => { setBusy("trial"); try { await window.VandayAPI.startTrial(payload.upgradeTo); // Close the modal first, then refresh /api/me so the page the user // is currently on (e.g. Integrations) re-renders with the new limits // without a full navigation away. setPayload(null); await window.VandayMe.fetchMe({ force: true }); } catch (e) { window.alert(e.message || "Couldn't start the trial"); setBusy(null); } }; const checkout = async () => { setBusy("checkout"); try { const { url } = await window.VandayAPI.billingCheckout(payload.upgradeTo, "monthly"); window.location.href = url; } catch (e) { setBusy(null); window.alert(e.message || "Couldn't open checkout"); } }; return (

e.stopPropagation()} style={{ background: "var(--surface)", borderRadius: 14, padding: 28, maxWidth: 440, width: "100%", border: "1px solid var(--border)", boxShadow: "0 24px 64px rgba(0,0,0,0.16)", }} >

{payload.title || "Upgrade to unlock this"}

{payload.message} {payload.comingSoon && " Paid plans are coming soon — we'll email you the moment they launch."}

{payload.comingSoon ? ( ) : ( <> )}

); } // Helper used by feature gates around the app: call this with the 403 body // the server returned for the blocked action; the modal hooks itself up via // the window event. Title is optional and lets the caller phrase the prompt // for the specific action ('Publish to Instagram', 'Invite teammates', etc.). window.openVandayPaywall = function openVandayPaywall({ title, plan, upgradeTo, message }) { if (!upgradeTo) return; // server didn't suggest a plan; no-op // Billing isn't rolled out for this workspace (usageBilling off) — never // expose trial/checkout. Show a "paid plans coming soon" teaser instead, so // a blocked paid feature still explains itself without a live upgrade path. const comingSoon = window.VandayMe?.usageBillingEnabled?.() !== true; window.dispatchEvent(new CustomEvent("vanday-paywall", { detail: { title, plan, upgradeTo, message, comingSoon }, })); }; // Catches any render/runtime crash in the React tree so the user sees a // recoverable message instead of a blank white page, and reports it to Sentry // (loaded via Vanday.html on prod). window.Sentry is optional — on dev/local // it's undefined and we just log to the console. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.error("[app] crashed:", error); if (window.Sentry && window.Sentry.captureException) { window.Sentry.captureException(error, { extra: { componentStack: info && info.componentStack }, }); } } render() { if (!this.state.hasError) return this.props.children; return (

⚠️

Something went wrong

The page hit an unexpected error. We've been notified automatically. Reloading usually fixes it — your files are safe.

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