// Cavivo workspace dashboard const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "greetingStyle": "serif-italic", "showAmbientBlobs": true, "starterDensity": "regular", "inputGlow": true } /*EDITMODE-END*/; // ─── Icons (line-style, 20×20) ────────────────────────────────────────────── const Icon = ({ d, size = 20, stroke = 1.6, fill = "none" }) => {d}; const I = { home: } />, work: } />, spark: } />, bulb: } />, search: } />, bell: } />, invite: } />, help: } />, grid: } />, discover: } />, mic: } />, send: } />, attach: } />, emoji: } />, sliders: } stroke={1.8}/>, app: } />, chevDown: } />, chevUpDown: } size={14} />, plus: } />, // Tile icons (filled-on-color, white stroke) board: } stroke={1.8} />, doc: } stroke={1.8} />, zoom: } stroke={1.8} />, chart: } stroke={1.8} />, idea: } stroke={1.8} />, image: } stroke={1.8} />, wave: } stroke={1.8} />, book: } stroke={1.8} />, phone: } size={18} />, pin: } size={18} />, heart: } size={18} />, edit: } size={18} />, list: } size={18} />, sparkle: } stroke={1.5} />, megaphone: } stroke={1.8} />, target: } stroke={1.8} />, user: } stroke={1.8} />, diamond: } size={16} stroke={1.4} />, check: } stroke={2.2} />, arrow: } />, }; // ─── Logo ─────────────────────────────────────────────────────────────────── const CavivoLogo = ({ size = 32 }) =>
Kimitai
AI video studio
; // ─── Sidebar ──────────────────────────────────────────────────────────────── const SidebarItem = ({ icon, label, active, onClick, badge }) => ; const SectionLabel = ({ children }) =>
{children} {I.chevDown}
; const Sidebar = ({ active, setActive }) => ; // ─── Top bar ──────────────────────────────────────────────────────────────── const IconBtn = ({ children, onClick, title }) => ; // ─── Credit packs (creditsPacks.js — same as app paywall) ───────────────────── const CREDIT_PACKS = (typeof window !== 'undefined' && window.KimitaiCredits?.CREDIT_PACKS) || []; function packStripeUrl(packId) { const cfg = getLandingConfig(); return cfg?.stripeUrls?.[packId] || ''; } const PlansPackCard = ({ pack, onBuy, buying }) => { const [hover, setHover] = React.useState(false); const stripeUrl = packStripeUrl(pack.id); const canBuy = Boolean(onBuy || stripeUrl); const border = pack.popular ? '2px solid #7A5AE0' : '1px solid #E0DAE8'; const bg = pack.popular ? 'linear-gradient(180deg,#FAF7FE 0%,#FFFFFF 100%)' : '#FFFFFF'; const buyLabel = buying ? 'Opening checkout…' : `Buy ${pack.label}`; const btnStyle = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: '100%', marginTop: 18, padding: '12px 18px', borderRadius: 999, border: 'none', cursor: canBuy && !buying ? 'pointer' : 'default', fontFamily: 'inherit', fontWeight: 600, fontSize: 13, color: '#1c1c1c', textDecoration: 'none', background: pack.popular ? 'linear-gradient(120deg,#C8B6FF 0%,#F5B8D0 50%,#C8B6FF 100%)' : '#FFFFFF', boxShadow: pack.popular ? '0 6px 18px rgba(122,90,224,.22)' : 'none', borderWidth: pack.popular ? 0 : 1, borderStyle: 'solid', borderColor: '#E0DAE8', opacity: hover && canBuy && !buying ? 0.92 : 1, transition: 'opacity .15s, transform .15s', transform: hover && canBuy && !buying ? 'translateY(-1px)' : 'translateY(0)', }; const buyHandler = (e) => { if (!canBuy || buying) { e.preventDefault(); return; } if (onBuy) { e.preventDefault(); onBuy(pack.id); } }; const BuyBtn = canBuy ? ( stripeUrl && !onBuy ? ( setHover(true)} onMouseLeave={() => setHover(false)}> {buyLabel} {I.arrow} ) : ( ) ) : ( ); return (
{pack.popular ? (
POPULAR
) : null}
{pack.label}
{pack.price} one-time
{pack.credits.toLocaleString()} credits
{pack.savePct ? (
Save {pack.savePct}%
) : null}
    {pack.perks.map((perk, i) => (
  • {I.check} {perk}
    • ))}
{BuyBtn}
); }; // ─── Supabase (dashboard session + edge functions) ───────────────────────── let dashboardSupabase = null; const getLandingConfig = () => (typeof window !== 'undefined' && window.LANDING_CONFIG) ? window.LANDING_CONFIG : null; const getDashboardSupabase = () => { const cfg = getLandingConfig(); if (!cfg?.supabaseUrl || !cfg?.supabaseAnonKey) return null; if (!dashboardSupabase && typeof window !== 'undefined' && window.supabase?.createClient) { dashboardSupabase = window.supabase.createClient(cfg.supabaseUrl, cfg.supabaseAnonKey, { auth: { persistSession: true, autoRefreshToken: true, detectSessionInUrl: true, storage: window.localStorage, }, }); } return dashboardSupabase; }; function useDashboardAuth() { const [session, setSession] = React.useState(null); const [authLoading, setAuthLoading] = React.useState(true); const [authBootError, setAuthBootError] = React.useState(''); React.useEffect(() => { const sb = getDashboardSupabase(); if (!sb) { setAuthLoading(false); setAuthBootError('Add config.js with your Supabase URL and anon key.'); return undefined; } let cancelled = false; (async () => { try { const { data: { session: s }, error } = await sb.auth.getSession(); if (error) throw error; if (!cancelled) { setSession(s); setAuthBootError(''); } } catch (e) { if (!cancelled) setAuthBootError(e.message || 'Could not restore session'); } finally { if (!cancelled) setAuthLoading(false); } })(); const { data: { subscription } } = sb.auth.onAuthStateChange((_event, s) => { setSession(s); }); return () => subscription.unsubscribe(); }, []); const signOut = async () => { const sb = getDashboardSupabase(); if (sb) await sb.auth.signOut(); }; return { session, user: session?.user ?? null, authLoading, authBootError, signOut }; } const SignInScreen = ({ bootError }) => { const [email, setEmail] = React.useState(''); const [code, setCode] = React.useState(''); const [step, setStep] = React.useState('form'); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const trimmedEmail = email.trim().toLowerCase(); const codeReady = code.replace(/\D/g, '').length >= 6; const friendlyAuthError = (msg) => { if (msg.includes('rate limit')) return 'Too many attempts. Please wait a moment.'; if (msg.includes('expired') || msg.includes('invalid')) return 'That code is invalid or expired. Request a new email.'; return msg; }; const handleSendCode = async () => { if (!trimmedEmail.includes('@') || !trimmedEmail.includes('.')) { setError('Please enter a valid email address.'); return; } const sb = getDashboardSupabase(); if (!sb) { setError('Supabase is not configured.'); return; } setLoading(true); setError(''); try { const { error: otpError } = await sb.auth.signInWithOtp({ email: trimmedEmail, options: { shouldCreateUser: true }, }); if (otpError) throw otpError; setCode(''); setStep('check-email'); } catch (e) { setError(friendlyAuthError(e.message || 'Could not send code')); } finally { setLoading(false); } }; const handleVerifyCode = async () => { const token = code.replace(/\D/g, ''); if (token.length < 6) { setError('Enter the 6–8 digit code from your email.'); return; } const sb = getDashboardSupabase(); if (!sb) { setError('Supabase is not configured.'); return; } setLoading(true); setError(''); try { let { error: verifyError } = await sb.auth.verifyOtp({ email: trimmedEmail, token, type: 'email', }); if (verifyError) { const fallback = await sb.auth.verifyOtp({ email: trimmedEmail, token, type: 'magiclink', }); verifyError = fallback.error; } if (verifyError) throw verifyError; } catch (e) { setError(friendlyAuthError(e.message || 'Could not verify code')); } finally { setLoading(false); } }; const handleResend = async () => { const sb = getDashboardSupabase(); if (!sb) return; setLoading(true); setError(''); try { const { error: otpError } = await sb.auth.signInWithOtp({ email: trimmedEmail, options: { shouldCreateUser: true }, }); if (otpError) throw otpError; setCode(''); } catch (e) { setError(friendlyAuthError(e.message || 'Could not resend')); } finally { setLoading(false); } }; return (
{step === 'form' ? ( <>

Sign in to your studio

Use the same email as the Kimitai app. We'll email you a sign-in code — no password.

{bootError ? (

{bootError}

) : null} {error ? (

{error}

) : null} setEmail(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleSendCode(); }} placeholder="you@example.com" autoComplete="email" style={{ width: '100%', marginTop: 8, padding: '12px 14px', borderRadius: 12, border: '1px solid #E0DAE8', fontFamily: 'inherit', fontSize: 15, boxSizing: 'border-box', }} /> ) : ( <>

Check your email

We sent a sign-in code to {trimmedEmail}. Enter it below to open your studio.

{error ? (

{error}

) : null} setCode(e.target.value.replace(/[^0-9]/g, '').slice(0, 8))} onKeyDown={(e) => { if (e.key === 'Enter' && codeReady && !loading) handleVerifyCode(); }} placeholder="00000000" maxLength={8} style={{ width: '100%', marginTop: 8, padding: '14px 16px', borderRadius: 12, border: '1px solid #E0DAE8', fontFamily: 'inherit', fontSize: 22, fontWeight: 600, letterSpacing: '0.35em', textAlign: 'center', boxSizing: 'border-box', }} /> )}

← Back to Kimitai

); }; async function invokeAuthedFunction(name, body = {}) { const sb = getDashboardSupabase(); const cfg = getLandingConfig(); if (!sb || !cfg) throw new Error('Supabase is not configured'); const { data: { session } } = await sb.auth.getSession(); if (!session?.access_token) throw new Error('Not signed in'); const res = await fetch(`${cfg.supabaseUrl}/functions/v1/${name}`, { method: 'POST', headers: { 'Content-Type': 'application/json', apikey: cfg.supabaseAnonKey, Authorization: `Bearer ${session.access_token}`, }, body: JSON.stringify(body), }); const json = await res.json().catch(() => ({})); if (!res.ok) { const err = new Error(json.error || res.statusText || 'Request failed'); err.status = res.status; err.payload = json; throw err; } return json; } function dashboardCheckoutUrls() { if (typeof window === 'undefined') return { successUrl: '', cancelUrl: '' }; const base = `${window.location.origin}${window.location.pathname}`; return { successUrl: `${base}?purchase=success`, cancelUrl: `${base}?purchase=cancelled`, }; } async function startPackCheckout(packId) { const urls = dashboardCheckoutUrls(); const data = await invokeAuthedFunction('start-stripe-checkout', { packId, successUrl: urls.successUrl, cancelUrl: urls.cancelUrl, }); if (!data.url) throw new Error('Checkout URL missing'); window.location.href = data.url; } function useDashboardCredits() { const [balance, setBalance] = React.useState(null); const [tier, setTier] = React.useState('free'); const [loading, setLoading] = React.useState(true); const refresh = React.useCallback(async () => { const sb = getDashboardSupabase(); if (!sb) { setBalance(null); setLoading(false); return; } const { data: { session } } = await sb.auth.getSession(); if (!session) { setBalance(null); setLoading(false); return; } setLoading(true); try { const data = await invokeAuthedFunction('get-credits', {}); setBalance(typeof data.balance === 'number' ? data.balance : 0); setTier(data.tier || 'free'); } catch { setBalance(0); } finally { setLoading(false); } }, []); React.useEffect(() => { refresh(); const sb = getDashboardSupabase(); if (!sb) return undefined; const { data: { subscription } } = sb.auth.onAuthStateChange(() => { refresh(); }); return () => subscription.unsubscribe(); }, [refresh]); return { balance, tier, loading, refresh, setBalance }; } const avatarInitial = (user) => { if (!user) return '?'; if (user.email) return user.email[0].toUpperCase(); const name = user.user_metadata?.full_name || user.user_metadata?.name; if (typeof name === 'string' && name[0]) return name[0].toUpperCase(); return 'G'; }; const modalShellStyle = { position: 'fixed', inset: 0, zIndex: 2147483647, background: 'rgba(60,40,90,.35)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, }; const modalPanelStyle = { width: 'min(480px, 100%)', maxHeight: '90vh', background: 'linear-gradient(160deg,#F0E5F8 0%,#FCE0EC 45%,#FFE8DC 100%)', borderRadius: 22, overflow: 'hidden', display: 'flex', flexDirection: 'column', position: 'relative', boxShadow: '0 40px 80px -20px rgba(122,90,224,.35), 0 0 0 1px rgba(255,255,255,.6) inset', fontFamily: 'inherit', color: '#1c1c1c', }; const AiProcessingConsentModal = ({ onAgree, onDismiss }) => { const sw = window.SeedanceWeb; const title = sw?.AI_CONSENT_TITLE ?? 'AI Processing Consent'; const body = sw?.AI_CONSENT_BODY ?? ''; const privacyUrl = sw?.AI_CONSENT_PRIVACY_URL ?? 'privacy.html'; return (
{title}

{body}

Read Privacy Policy
); }; const AccountModal = ({ onClose, onSignOut }) => { const [user, setUser] = React.useState(null); const [billing, setBilling] = React.useState(null); const [loading, setLoading] = React.useState(true); const [billingError, setBillingError] = React.useState(''); const [deleteStep, setDeleteStep] = React.useState(false); const [deleteConfirm, setDeleteConfirm] = React.useState(''); const [deleting, setDeleting] = React.useState(false); const [deleteError, setDeleteError] = React.useState(''); React.useEffect(() => { const sb = getDashboardSupabase(); if (!sb) { setLoading(false); return undefined; } let cancelled = false; const load = async () => { const { data: { session } } = await sb.auth.getSession(); if (cancelled) return; setUser(session?.user ?? null); if (!session?.user) { setLoading(false); return; } try { const data = await invokeAuthedFunction('get-account-billing'); if (!cancelled) { setBilling(data); setBillingError(''); } } catch (e) { if (!cancelled) setBillingError(e.message || 'Could not load billing'); } finally { if (!cancelled) setLoading(false); } }; load(); const { data: sub } = sb.auth.onAuthStateChange((_event, session) => { setUser(session?.user ?? null); }); return () => { cancelled = true; sub?.subscription?.unsubscribe(); }; }, []); const handleDelete = async () => { if (deleteConfirm !== 'DELETE') return; setDeleting(true); setDeleteError(''); try { await invokeAuthedFunction('delete-account'); const sb = getDashboardSupabase(); if (sb) await sb.auth.signOut(); window.location.href = 'index.html'; } catch (e) { setDeleteError(e.message || 'Could not delete account'); setDeleting(false); } }; const email = billing?.email ?? user?.email ?? null; const isGuest = billing?.isAnonymous ?? !user?.email; const payment = billing?.payment ?? null; return (
e.stopPropagation()} style={modalPanelStyle}>
Account
Profile, payment method, and account deletion.
{!getDashboardSupabase() ? (

Add config.js with Supabase keys to enable account features.

) : loading ? (

Loading…

) : !user ? (

Session expired. Refresh the page to sign in again.

) : ( <>
{avatarInitial(user)}
{isGuest ? 'Guest account' : (email || 'Account')}
{isGuest ? 'Add an email in the app to save your work across devices.' : email}
Payment
{billingError ? (

{billingError}

) : payment ? (
{payment.brand} •••• {payment.last4}
Expires {String(payment.expMonth).padStart(2, '0')}/{payment.expYear}
Linked
) : (

No payment method on file. Purchases in the app will appear here once Stripe is connected.

)}
Danger zone
{!deleteStep ? ( <>

Permanently delete your account, library videos, and billing link. This cannot be undone.

) : (

Type DELETE to confirm. All videos and account data will be removed.

setDeleteConfirm(e.target.value)} placeholder="DELETE" autoComplete="off" style={{ width: '100%', padding: '10px 12px', borderRadius: 10, border: '1px solid #E0DAE8', fontFamily: 'inherit', fontSize: 13, marginBottom: 10, boxSizing: 'border-box' }} /> {deleteError ? (

{deleteError}

) : null}
)}
)}
); }; const PlansModal = ({ onClose, onBuy, buyingPackId, balance }) => (
e.stopPropagation()} style={{ ...modalPanelStyle, width: 'min(1040px, 100%)', }}>
Get credits
One-time packs. No subscription. Credits expire 60 days after purchase. {typeof balance === 'number' ? ( Balance: {balance.toLocaleString()} credits ) : null}
{CREDIT_PACKS.map((pack) => ( ))}
); const TopBar = ({ onSignOut, balance, creditsLoading, onOpenPlans, onRefreshCredits, plansRequest }) => { const [plansOpen, setPlansOpen] = React.useState(false); const [accountOpen, setAccountOpen] = React.useState(false); const [user, setUser] = React.useState(null); const [buyingPackId, setBuyingPackId] = React.useState(''); const [buyError, setBuyError] = React.useState(''); React.useEffect(() => { const sb = getDashboardSupabase(); if (!sb) return undefined; sb.auth.getSession().then(({ data: { session } }) => setUser(session?.user ?? null)); const { data: sub } = sb.auth.onAuthStateChange((_event, session) => { setUser(session?.user ?? null); }); return () => sub?.subscription?.unsubscribe(); }, []); React.useEffect(() => { if (plansRequest > 0) setPlansOpen(true); }, [plansRequest]); const handleBuyPack = async (packId) => { setBuyError(''); if (packStripeUrl(packId)) { window.open(packStripeUrl(packId), '_blank', 'noopener,noreferrer'); return; } setBuyingPackId(packId); try { await startPackCheckout(packId); } catch (e) { setBuyError(e.message || 'Checkout failed'); setBuyingPackId(''); } }; const openPlans = () => { setPlansOpen(true); if (onOpenPlans) onOpenPlans(); else if (onRefreshCredits) onRefreshCredits(); }; const initial = avatarInitial(user); const balanceLabel = creditsLoading ? '…' : (typeof balance === 'number' ? balance.toLocaleString() : '—'); return ( <>
{buyError ? (

{buyError}

) : null} {plansOpen && typeof document !== 'undefined' ? ReactDOM.createPortal( { setPlansOpen(false); setBuyError(''); }} />, document.body, ) : null} {accountOpen && typeof document !== 'undefined' ? ReactDOM.createPortal( setAccountOpen(false)} onSignOut={onSignOut} />, document.body, ) : null} ); }; // ─── Quick action tile (small, top row) ───────────────────────────────────── const QuickTile = ({ icon, label, color, onClick, href, active }) => { const [hover, setHover] = React.useState(false); const Tag = href ? 'a' : 'button'; const tagProps = href ? { href } : { onClick }; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, background: 'transparent', border: 'none', outline: 'none', cursor: 'pointer', textDecoration: 'none', padding: '6px 4px', fontFamily: 'inherit', transform: hover || active ? 'translateY(-2px)' : 'translateY(0)', transition: 'transform .18s' }}>
{icon}
9 ? 10 : 11.5, color: '#4a4356', fontWeight: 500, letterSpacing: '-.005em', textAlign: 'center', lineHeight: 1.25, maxWidth: 72 }}>{label}
); }; // ─── Starter card (large, gradient) ───────────────────────────────────────── const StarterCard = ({ icon, title, body, palette, onClick }) => { const [hover, setHover] = React.useState(false); return ( ); }; // ─── Palettes for cards ───────────────────────────────────────────────────── const lavenderP = { bg: 'linear-gradient(135deg,#E8DFFA 0%,#F0E5F8 100%)', blob: 'radial-gradient(circle,#C8B6FF 0%,transparent 70%)', border: 'rgba(200,182,255,.5)', iconBg: 'rgba(255,255,255,.7)', iconFg: '#7A5AE0', ink: '#3D2A6B', body: '#5B4A8A', shadow: 'rgba(122,90,224,.18)' }; const pinkP = { bg: 'linear-gradient(135deg,#FCE0EC 0%,#F5B8D0 100%)', blob: 'radial-gradient(circle,#F5B8D0 0%,transparent 70%)', border: 'rgba(245,184,208,.55)', iconBg: 'rgba(255,255,255,.7)', iconFg: '#C4407A', ink: '#6B2A4A', body: '#8A4A6A', shadow: 'rgba(196,64,122,.18)' }; const mintP = { bg: 'linear-gradient(135deg,#D6F0F5 0%,#B5E5D6 100%)', blob: 'radial-gradient(circle,#B5E5D6 0%,transparent 70%)', border: 'rgba(181,229,214,.6)', iconBg: 'rgba(255,255,255,.7)', iconFg: '#2A8060', ink: '#1F4D3D', body: '#3D6A5A', shadow: 'rgba(42,128,96,.16)' }; const peachP = { bg: 'linear-gradient(135deg,#FFE8DC 0%,#FFD4A8 100%)', blob: 'radial-gradient(circle,#FFD4A8 0%,transparent 70%)', border: 'rgba(255,212,168,.6)', iconBg: 'rgba(255,255,255,.7)', iconFg: '#C46A20', ink: '#6B3A1A', body: '#8A5A30', shadow: 'rgba(196,106,32,.18)' }; const creamP = { bg: 'linear-gradient(135deg,#FFF4D6 0%,#FFE8B5 100%)', blob: 'radial-gradient(circle,#FFD75A 0%,transparent 70%)', border: 'rgba(255,215,90,.4)', iconBg: 'rgba(255,255,255,.7)', iconFg: '#A87A20', ink: '#5C4318', body: '#7A6030', shadow: 'rgba(168,122,32,.15)' }; const lightVioletP = { bg: 'linear-gradient(135deg,#F0E5F8 0%,#E8DFFA 100%)', blob: 'radial-gradient(circle,#C8B6FF 0%,transparent 70%)', border: 'rgba(232,223,250,.7)', iconBg: 'rgba(255,255,255,.8)', iconFg: '#9070D0', ink: '#4A3680', body: '#6B5A9A', shadow: 'rgba(122,90,224,.12)' }; const lightMintP = { bg: 'linear-gradient(135deg,#E5F5EE 0%,#D6F0F5 100%)', blob: 'radial-gradient(circle,#B5E5D6 0%,transparent 70%)', border: 'rgba(214,240,245,.7)', iconBg: 'rgba(255,255,255,.8)', iconFg: '#3A9075', ink: '#2A5D4A', body: '#4D7A6A', shadow: 'rgba(42,128,96,.12)' }; const lightPeachP = { bg: 'linear-gradient(135deg,#FFF4E8 0%,#FFE8DC 100%)', blob: 'radial-gradient(circle,#FFD4A8 0%,transparent 70%)', border: 'rgba(255,232,220,.7)', iconBg: 'rgba(255,255,255,.8)', iconFg: '#D08550', ink: '#6B4520', body: '#8A6540', shadow: 'rgba(196,106,32,.12)' }; // ─── Quick tile colors (small) ────────────────────────────────────────────── const qcLight = (bg, fg, ring, shadow) => ({ bg, fg, ring, shadow }); const QC = { violet: qcLight('linear-gradient(140deg,#E8DFFA,#F0E5F8)', '#7A5AE0', 'rgba(200,182,255,.5)', 'rgba(122,90,224,.16)'), pink: qcLight('linear-gradient(140deg,#FCE0EC,#FAD0E0)', '#C4407A', 'rgba(245,184,208,.5)', 'rgba(196,64,122,.14)'), mint: qcLight('linear-gradient(140deg,#D6F0F5,#C5E8DC)', '#2A8060', 'rgba(181,229,214,.55)', 'rgba(42,128,96,.14)'), peach: qcLight('linear-gradient(140deg,#FFE8DC,#FFD8B8)', '#C46A20', 'rgba(255,212,168,.55)', 'rgba(196,106,32,.14)'), cream: qcLight('linear-gradient(140deg,#FFF4D6,#FFE8B5)', '#A87A20', 'rgba(255,215,90,.4)', 'rgba(168,122,32,.14)'), lvioletDeep: qcLight('linear-gradient(140deg,#C8B6FF,#B59AFE)', '#FFFFFF', 'rgba(200,182,255,.6)', 'rgba(122,90,224,.25)'), pinkDeep: qcLight('linear-gradient(140deg,#F5B8D0,#F09CC0)', '#FFFFFF', 'rgba(245,184,208,.6)', 'rgba(196,64,122,.22)'), mintDeep: qcLight('linear-gradient(140deg,#B5E5D6,#9AD8C2)', '#FFFFFF', 'rgba(181,229,214,.6)', 'rgba(42,128,96,.22)') }; // ─── User library (get-library) ───────────────────────────────────────────── const MODE_LABEL = { create: 'Create', compose: 'Compose', animate: 'Animate', marketing: 'Marketing', text: 'Create', image: 'Create', hybrid: 'Compose', voice: 'Compose', }; const LIBRARY_TABS = [ { id: 'all', label: 'All' }, { id: 'done', label: 'Done' }, { id: 'running', label: 'In progress' }, { id: 'failed', label: 'Failed' }, ]; const timeAgo = (iso) => { const diff = Date.now() - new Date(iso).getTime(); const mins = Math.floor(diff / 60000); if (mins < 1) return 'just now'; if (mins < 60) return `${mins}m ago`; const hrs = Math.floor(mins / 60); if (hrs < 24) return `${hrs}h ago`; return `${Math.floor(hrs / 24)}d ago`; }; const modeLabel = (mode) => MODE_LABEL[mode] ?? (mode ? String(mode) : 'Video'); const filterLibraryJobs = (jobs, tab) => { if (tab === 'done') return jobs.filter((j) => j.status === 'succeeded'); if (tab === 'running') return jobs.filter((j) => j.status === 'running' || j.status === 'queued'); if (tab === 'failed') return jobs.filter((j) => j.status === 'failed' || j.status === 'canceled'); return jobs; }; function useDashboardLibrary(active) { const [jobs, setJobs] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(''); const [signedIn, setSignedIn] = React.useState(false); const load = React.useCallback(async () => { const sb = getDashboardSupabase(); if (!sb) { setLoading(false); setSignedIn(false); setJobs([]); return; } const { data: { session } } = await sb.auth.getSession(); setSignedIn(!!session); if (!session) { setJobs([]); setLoading(false); setError(''); return; } setLoading(true); setError(''); try { const data = await invokeAuthedFunction('get-library', {}); setJobs(Array.isArray(data.jobs) ? data.jobs : []); } catch (e) { setError(e.message || 'Could not load videos'); setJobs([]); } finally { setLoading(false); } }, []); React.useEffect(() => { load(); }, [load, active]); return { jobs, loading, error, signedIn, reload: load }; } const discoverItemToJob = (item) => ({ id: item.id, mode: item.mode, prompt: item.prompt, videoUrl: item.videoUrl, thumbnailUrl: item.thumbnailUrl ?? null, createdAt: item.createdAt, status: 'succeeded', creator: item.creator ?? null, creatorId: item.creatorId ?? null, remix: item.remix ?? null, }); function fallbackRemixFromJob(job) { if (job?.remix?.seedanceMode) return job.remix; return { seedanceMode: job?.mode === 'animate' ? 'animate' : job?.mode === 'compose' ? 'compose' : 'create', prompt: job?.prompt ?? '', imageUris: job?.thumbnailUrl ? [job.thumbnailUrl] : [], characterImageUri: job?.thumbnailUrl ?? null, referenceVideoUri: job?.videoUrl ?? null, composeVideoUris: job?.videoUrl ? [job.videoUrl] : [], animateAudioUri: null, aspect: '9:16', resolution: '720p', duration: 8, nativeAudio: true, }; } async function urlToPreviewMedia(url, name, type) { const res = await fetch(url); if (!res.ok) throw new Error('Could not load media'); const blob = await res.blob(); const file = new File([blob], name, { type: blob.type || type }); return { file, preview: URL.createObjectURL(file) }; } function saveBlobAsFile(blob, filename) { const href = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = href; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(href); } /** Direct R2 fetch — can fail when bucket CORS blocks kimitai.com. */ async function downloadViaPresignedUrl(videoUrl, filename) { const res = await fetch(videoUrl); if (!res.ok) throw new Error('Download failed'); const blob = await res.blob(); saveBlobAsFile(blob, filename); } /** Proxy through Supabase so the browser never fetches R2 directly (no R2 CORS). */ async function downloadUserVideo(job) { if (!job?.id) throw new Error('Video not found'); const cfg = getLandingConfig(); const sb = getDashboardSupabase(); if (!sb || !cfg) throw new Error('Supabase is not configured'); const { data: { session } } = await sb.auth.getSession(); if (!session?.access_token) throw new Error('Not signed in'); const res = await fetch(`${cfg.supabaseUrl}/functions/v1/download-library-video`, { method: 'POST', headers: { 'Content-Type': 'application/json', apikey: cfg.supabaseAnonKey, Authorization: `Bearer ${session.access_token}`, }, body: JSON.stringify({ jobId: job.id }), }); if (!res.ok) { let message = 'Download failed'; try { const json = await res.json(); if (json?.error) message = String(json.error); } catch { const text = await res.text().catch(() => ''); if (text) message = text; } throw new Error(message); } const blob = await res.blob(); saveBlobAsFile(blob, `kimitai-${job.id}.mp4`); } async function downloadLibraryVideo(job) { const filename = `kimitai-${job.id || 'video'}.mp4`; if (job?.id) { try { await downloadUserVideo(job); return; } catch (proxyErr) { console.warn('download-library-video', proxyErr); if (job.videoUrl) { await downloadViaPresignedUrl(job.videoUrl, filename); return; } throw proxyErr; } } if (!job?.videoUrl) throw new Error('Video URL not available'); await downloadViaPresignedUrl(job.videoUrl, filename); } async function fetchDiscoverFeed() { const cfg = getLandingConfig(); if (!cfg?.supabaseUrl || !cfg?.supabaseAnonKey) { return { items: [], error: 'Supabase is not configured' }; } const sb = getDashboardSupabase(); if (sb) { const { data: { session } } = await sb.auth.getSession(); if (session?.access_token) { try { const data = await invokeAuthedFunction('get-discover', {}); const items = Array.isArray(data.items) ? data.items : []; return { items: items.map(discoverItemToJob), error: null }; } catch (e) { console.warn('get-discover', e); } } } try { const res = await fetch(`${cfg.supabaseUrl}/functions/v1/get-discover-public`, { method: 'POST', headers: { 'Content-Type': 'application/json', apikey: cfg.supabaseAnonKey, Authorization: `Bearer ${cfg.supabaseAnonKey}`, }, body: JSON.stringify({ limit: 50 }), }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data.error || res.statusText || 'Request failed'); const items = Array.isArray(data.items) ? data.items : []; return { items: items.map(discoverItemToJob), error: null }; } catch (e) { return { items: [], error: e.message || 'Could not load Discover' }; } } function useDashboardDiscover(active) { const [items, setItems] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const load = React.useCallback(async () => { setLoading(true); setError(''); const { items: next, error: err } = await fetchDiscoverFeed(); setItems(next); setError(err || ''); setLoading(false); }, []); React.useEffect(() => { if (active === 'discover') load(); }, [active, load]); return { items, loading, error, reload: load }; } const VideoPlayerModal = ({ job, onClose, onRemix, onDownload, allowDownload = true }) => { const [downloading, setDownloading] = React.useState(false); if (!job?.videoUrl) return null; const handleDownload = async () => { if (onDownload) { onDownload(job); return; } setDownloading(true); try { await downloadLibraryVideo(job); } catch (e) { console.warn('download', e); window.alert(e.message || 'Download failed'); } finally { setDownloading(false); } }; return (
e.stopPropagation()} style={{ width: 'min(420px, 100%)', maxHeight: '90vh', background: '#1c1c1c', borderRadius: 18, overflow: 'hidden', position: 'relative', boxShadow: '0 24px 60px rgba(0,0,0,.4)', }}>
); }; const VideoCard = ({ job, onPlay }) => { const [hover, setHover] = React.useState(false); const isRunning = job.status === 'running' || job.status === 'queued'; const isFailed = job.status === 'failed' || job.status === 'canceled'; const canPlay = job.status === 'succeeded' && job.videoUrl; const poster = job.thumbnailUrl || undefined; return ( ); }; const VideoGrid = ({ jobs, limit, columns = 'repeat(auto-fill, minmax(140px, 1fr))', onPlay, className = '' }) => { const list = limit ? jobs.slice(0, limit) : jobs; if (list.length === 0) return null; return (
{list.map((job) => ( ))}
); }; const LibraryEmpty = ({ signedIn, loading, error, message }) => { if (loading) { return

Loading videos…

; } if (error) { return

{error}

; } if (!signedIn) { return (

Sign in to see videos from your account.

Sign in
); } return (

{message || 'No videos yet. Create one in the app to see it here.'}

); }; const SectionRule = ({ label }) => (
{label}
); const HomeView = ({ library, greetingFont, greetingStyle, displayName, tweaks, onPlay, onCreditsChange, onNeedCredits, composerMode, setComposerMode, remixPrefill, onRemixApplied, }) => { const { jobs, loading, error, reload } = library; const recent = jobs; return ( <>

Good morning,{' '} {displayName || 'there'}

Create, Animate, Compose, or make marketing videos.

setComposerMode('create')} /> setComposerMode('animate')} /> setComposerMode('compose')} /> setComposerMode('marketing')} />
{recent.length > 0 ? ( ) : ( )} ); }; const DiscoverView = ({ discover, onPlayDiscover }) => { const { items, loading, error } = discover; return ( <>

Discover

Featured videos from the community — same feed as the app Discover tab.

{items.length > 0 ? ( ) : ( <> {loading ? (

Loading Discover…

) : error ? (

{error}

) : (

No featured videos yet. Publish a completed video to Discover from the app.

)} )} ); }; const MyVideosView = ({ library, onPlay }) => { const { jobs, loading, error, signedIn } = library; const [tab, setTab] = React.useState('all'); const filtered = filterLibraryJobs(jobs, tab); return ( <>

My videos

Everything you’ve generated, synced from your account.

{LIBRARY_TABS.map((t) => ( ))}
{filtered.length > 0 ? ( ) : ( )} ); }; // ─── Settings popover (Create / Compose output) ───────────────────────────── const SETTINGS_OPTIONS = { aspect: ['9:16', '16:9', '1:1'], resolution: ['480p', '720p', '1080p'], duration: ['3', '5', '8', '10', '12', '15'], }; /** UI state may be a single pick object or an array — normalize before .map. */ function asMediaList(value) { if (!value) return []; return Array.isArray(value) ? value : [value]; } function mediaFilesFromList(value) { return asMediaList(value).map((x) => x?.file).filter(Boolean); } const MODE_META = { create: { title: 'Create', placeholder: 'Describe your scene…\nA fox sprinting through a neon-lit alley at midnight.', hint: 'Text or 1 image → video', }, animate: { title: 'Animate', placeholder: 'Optional note (motion comes from your reference video)…', hint: 'Image + reference video', }, compose: { title: 'Compose', placeholder: 'Describe the scene using @Image1, @Video1, @Audio1…', hint: 'Mix images, video & audio', }, marketing: { title: 'Marketing videos', placeholder: 'Describe what happens in your ad…\nA creator unboxes the product, highlights one feature, ends with a CTA.', hint: 'Seedance · product & avatar', }, }; const MARKETING_OPTIONS = { ugc: ['Auto', 'Talking head', 'Testimonial', 'Behind the scenes'], hook: ['Auto', 'Bold opener', 'Question', 'Visual punch'], setting: ['Auto', 'Studio', 'Lifestyle', 'Outdoor', 'Product shelf'], }; const MarketingChoicePopover = ({ title, icon, value, options, onChange, onClose }) => ( <>
{icon}
{title}
{options.map((opt) => { const active = value === opt; return ( ); })}
); const MarketingAssetPopover = ({ title, previewUrl, onChange, onRemove, onClose }) => ( <>
{title}
{previewUrl ? ( ) : null}
); const ibtn = { width: 30, height: 30, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }; const MarketingToolbarBtn = ({ title, icon, active, highlight, disabled, onClick, popover }) => (
{popover}
); const MediaChip = ({ file, previewUrl, onRemove, label }) => (
{previewUrl && file?.type?.startsWith('video/') ? (
); const FilePickButton = ({ label, accept, multiple, disabled, onPick }) => ( ); const SettingsPopover = ({ values, onChange, onClose, showResolution = true, showDuration = true }) => { const Row = ({ label, hint, options, k }) => (
{label}
{hint &&
{hint}
}
{options.map(opt => { const active = k === 'duration' ? String(values[k]) === String(opt) : values[k] === opt; const label = k === 'duration' ? `${opt}s` : opt; return ( ); })}
); return ( <>
{I.sliders}
Output settings
{showResolution ? ( ) : null} {showDuration ? ( ) : null}
); }; // ─── Mode composer (Create / Animate / Compose) ──────────────────────────── const ModeComposer = ({ mode, glow, onComplete, onCreditsChange, onNeedCredits, remixPrefill, onRemixApplied }) => { const meta = MODE_META[mode] || MODE_META.create; const [prompt, setPrompt] = React.useState(''); const [composePrompt, setComposePrompt] = React.useState(''); const [images, setImages] = React.useState([]); const [characterImage, setCharacterImage] = React.useState(null); const [referenceVideo, setReferenceVideo] = React.useState(null); const [animateAudio, setAnimateAudio] = React.useState(null); const [composeImages, setComposeImages] = React.useState([]); const [composeVideos, setComposeVideos] = React.useState([]); const [composeAudios, setComposeAudios] = React.useState([]); const [marketingPrompt, setMarketingPrompt] = React.useState(''); const [marketingUgc, setMarketingUgc] = React.useState('Auto'); const [marketingHook, setMarketingHook] = React.useState('Auto'); const [marketingSetting, setMarketingSetting] = React.useState('Auto'); const [marketingProduct, setMarketingProduct] = React.useState(null); const [marketingAvatar, setMarketingAvatar] = React.useState(null); const [focused, setFocused] = React.useState(false); const [settingsOpen, setSettingsOpen] = React.useState(false); const [marketingPanel, setMarketingPanel] = React.useState(null); const [output, setOutput] = React.useState({ aspect: '9:16', resolution: '720p', duration: 8 }); const [generating, setGenerating] = React.useState(false); const [genProgress, setGenProgress] = React.useState(0); const [error, setError] = React.useState(''); const [consentOpen, setConsentOpen] = React.useState(false); const consentPendingRef = React.useRef(null); const taRef = React.useRef(null); const fileRefs = { createImages: React.useRef(null), character: React.useRef(null), refVideo: React.useRef(null), animAudio: React.useRef(null), composeImages: React.useRef(null), composeVideos: React.useRef(null), composeAudios: React.useRef(null), marketingProduct: React.useRef(null), marketingAvatar: React.useRef(null), }; const previewUrls = React.useRef([]); React.useEffect(() => () => { previewUrls.current.forEach((u) => URL.revokeObjectURL(u)); previewUrls.current = []; }, []); const rememberPreview = (file) => { const url = URL.createObjectURL(file); previewUrls.current.push(url); return url; }; const runWithConsent = (action) => { const sw = window.SeedanceWeb; if (sw?.hasAiProcessingConsent?.()) { action(); return; } consentPendingRef.current = action; setConsentOpen(true); }; const pickFiles = (ref, { multiple, accept, max, setter, current, asList }) => { if (!ref.current) return; runWithConsent(() => { ref.current.accept = accept; ref.current.multiple = multiple; ref.current.onchange = (e) => { const picked = Array.from(e.target.files || []); e.target.value = ''; if (!picked.length) return; const toItem = (f) => ({ file: f, preview: rememberPreview(f) }); if (multiple) { const next = [...current, ...picked].slice(0, max); setter(next.map((f) => toItem(f))); } else { const item = toItem(picked[0]); setter(asList ? [item] : item); } }; ref.current.click(); }); }; const autoSize = (el) => { if (!el) return; el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 220) + 'px'; }; const textValue = mode === 'compose' ? composePrompt : mode === 'marketing' ? marketingPrompt : prompt; const setTextValue = mode === 'compose' ? setComposePrompt : mode === 'marketing' ? setMarketingPrompt : setPrompt; React.useEffect(() => autoSize(taRef.current), [textValue, mode]); React.useEffect(() => { setError(''); setImages([]); setCharacterImage(null); setReferenceVideo(null); setAnimateAudio(null); setComposeImages([]); setComposeVideos([]); setComposeAudios([]); setMarketingPrompt(''); setMarketingUgc('Auto'); setMarketingHook('Auto'); setMarketingSetting('Auto'); setMarketingProduct(null); setMarketingAvatar(null); setMarketingPanel(null); }, [mode]); const closeComposerPanels = () => { setSettingsOpen(false); setMarketingPanel(null); }; React.useEffect(() => { if (!remixPrefill) return; let cancelled = false; (async () => { try { const r = remixPrefill; setOutput({ aspect: r.aspect || '9:16', resolution: r.resolution || '720p', duration: r.duration || 8, }); if (r.seedanceMode === 'animate') { setPrompt(r.prompt || ''); const face = r.characterImageUri ? await urlToPreviewMedia(r.characterImageUri, 'character.jpg', 'image/jpeg') : null; const motion = r.referenceVideoUri ? await urlToPreviewMedia(r.referenceVideoUri, 'motion.mp4', 'video/mp4') : null; const audio = r.animateAudioUri ? await urlToPreviewMedia(r.animateAudioUri, 'audio.mp3', 'audio/mpeg') : null; if (!cancelled) { setCharacterImage(face); setReferenceVideo(motion); setAnimateAudio(audio); } } else if (r.seedanceMode === 'compose') { setComposePrompt(r.prompt || ''); const imgs = []; const maxComposeImgs = window.SeedanceWeb?.COMPOSE_MAX_IMAGES ?? 9; for (let i = 0; i < (r.imageUris || []).length && imgs.length < maxComposeImgs; i += 1) { const m = await urlToPreviewMedia(r.imageUris[i], `image${i}.jpg`, 'image/jpeg'); imgs.push(m); } const vids = []; const videoUrls = r.composeVideoUris?.length ? r.composeVideoUris : (r.referenceVideoUri ? [r.referenceVideoUri] : []); for (let i = 0; i < videoUrls.length && vids.length < 3; i += 1) { const m = await urlToPreviewMedia(videoUrls[i], `video${i}.mp4`, 'video/mp4'); vids.push(m); } const auds = []; if (r.animateAudioUri) { auds.push(await urlToPreviewMedia(r.animateAudioUri, 'audio.mp3', 'audio/mpeg')); } if (!cancelled) { setComposeImages(imgs); setComposeVideos(vids); setComposeAudios(auds); } } else { setPrompt(r.prompt || ''); const imgs = []; for (let i = 0; i < (r.imageUris || []).length && imgs.length < 1; i += 1) { const m = await urlToPreviewMedia(r.imageUris[i], `image${i}.jpg`, 'image/jpeg'); imgs.push(m); } if (!cancelled) setImages(imgs); } } catch (e) { console.warn('remix prefill', e); } finally { if (!cancelled && onRemixApplied) onRemixApplied(); } })(); return () => { cancelled = true; }; }, [remixPrefill, onRemixApplied]); const canSend = () => { if (generating) return false; if (mode === 'create') return prompt.trim().length > 0; if (mode === 'animate') return characterImage && referenceVideo; if (mode === 'compose') return composePrompt.trim().length > 0; if (mode === 'marketing') { return marketingPrompt.trim().length > 0 && (marketingProduct || marketingAvatar); } return false; }; const runGenerate = async () => { const sw = window.SeedanceWeb; const sb = getDashboardSupabase(); if (!sw || !sb) { setError('Supabase is not configured'); return; } setGenerating(true); setGenProgress(0); setError(''); let taskId = null; let libraryDraft = null; try { const state = { prompt, composePrompt, images: mediaFilesFromList(images).slice(0, sw.CREATE_MAX_IMAGES ?? 1), characterImage: characterImage?.file ?? null, referenceVideo: referenceVideo?.file ?? null, animateAudio: animateAudio?.file ?? null, composeImages: mediaFilesFromList(composeImages).slice(0, sw.COMPOSE_MAX_IMAGES ?? 9), composeVideos: mediaFilesFromList(composeVideos).slice(0, sw.COMPOSE_MAX_VIDEOS ?? 3), composeAudios: mediaFilesFromList(composeAudios).slice(0, sw.COMPOSE_MAX_AUDIO ?? 3), marketingPrompt, marketingUgc, marketingHook, marketingSetting, marketingProduct: marketingProduct?.file ?? null, marketingAvatar: marketingAvatar?.file ?? null, output, }; const started = await sw.startCreate(mode, state, invokeAuthedFunction, sb); taskId = started.taskId; libraryDraft = started.libraryDraft; if (typeof started.balance === 'number' && onCreditsChange) { onCreditsChange(started.balance); } const status = await sw.pollUntilDone(taskId, invokeAuthedFunction, (s) => { setGenProgress(s.progress ?? 0); }); if (status.videoUrl) { await sw.persistCompleted(taskId, status.videoUrl, libraryDraft, invokeAuthedFunction); } if (onComplete) onComplete(); setPrompt(''); setComposePrompt(''); setImages([]); setCharacterImage(null); setReferenceVideo(null); setAnimateAudio(null); setComposeImages([]); setComposeVideos([]); setComposeAudios([]); setMarketingPrompt(''); setMarketingProduct(null); setMarketingAvatar(null); } catch (e) { let msg = e.message || 'Generation failed'; if (e.status === 402 || e.message === 'insufficient_credits') { const need = e.payload?.creditsRequired; msg = need ? `Not enough credits (need ${need}). Buy a pack to continue.` : 'Not enough credits. Buy a pack to continue.'; if (onNeedCredits) onNeedCredits(); } setError(msg); if (taskId && libraryDraft && window.SeedanceWeb) { window.SeedanceWeb.markFailed(taskId, libraryDraft, invokeAuthedFunction); } if (onComplete) onComplete(); } finally { setGenerating(false); } }; const handleGenerate = () => { runWithConsent(() => runGenerate()); }; const imageList = asMediaList(images); const composeImageList = asMediaList(composeImages); const composeVideoList = asMediaList(composeVideos); const composeAudioList = asMediaList(composeAudios); const maxComposeImages = window.SeedanceWeb?.COMPOSE_MAX_IMAGES ?? 9; const maxComposeVideos = window.SeedanceWeb?.COMPOSE_MAX_VIDEOS ?? 3; const maxComposeAudio = window.SeedanceWeb?.COMPOSE_MAX_AUDIO ?? 3; const showCreateImages = mode === 'create'; const showAnimate = mode === 'animate'; const showComposeMedia = mode === 'compose'; const showMarketing = mode === 'marketing'; return (
{consentOpen ? ( { window.SeedanceWeb?.setAiProcessingConsent?.(); setConsentOpen(false); const fn = consentPendingRef.current; consentPendingRef.current = null; if (fn) fn(); }} onDismiss={() => { consentPendingRef.current = null; setConsentOpen(false); }} /> ) : null} {glow ? (
) : null}
{meta.title}
{meta.hint}