// ════════════════════════════════════════════════════════════════ // PEXXIE · WEB BUILDER — Webflow-style visual editor + Lovable/v0 AI // build mode. Both drive ONE live page model (window state) so AI- // generated blocks are then fine-tunable on the visual canvas. // Exported as window.WebBuilder (used by px-website.jsx · Editor). // ════════════════════════════════════════════════════════════════ const { Icon, Spark, Pex, Avatar, Card, Btn, Pill, Label, Num, Toggle, Field } = window; // — Honest Loaves brand surface used to render the customer's site — const BRAND = { crust: '#3A2A1C', wheat: '#D9A84C', bake: '#8C4A2A', cream: '#F2E2C4', creamCard: '#FBF3E0', creamDk: '#E8D6AE', ink: '#3A2A1C', sub: '#6B563C', accent: '#8C4A2A', }; const SWATCHES = [BRAND.cream, '#FFFFFF', BRAND.creamCard, BRAND.wheat, BRAND.bake, BRAND.crust]; const isDark = (c) => c === BRAND.crust || c === BRAND.bake; const PADV = { compact: 30, cozy: 52, spacious: 80 }; let __bid = 100; const nid = () => 'b' + (++__bid); // — Block definitions: defaults, inspector fields, library metadata — const DEFS = { hero: { label: 'Hero', icon: 'layout', make: () => ({ eyebrow: 'Brooklyn · since 2019', headline: 'Stone-milled. Hand-shaped. Stubborn.', sub: 'A tiny bakery in Williamsburg. Open Thursday through Sunday.', cta: 'Order for Saturday', bg: BRAND.cream, pad: 'spacious', align: 'left' }), fields: [['eyebrow', 'Eyebrow', 'text'], ['headline', 'Headline', 'area'], ['sub', 'Subtext', 'area'], ['cta', 'Button label', 'text']], }, products: { label: 'Product grid', icon: 'grid', make: () => ({ heading: "This week's bakes", items: [{ name: 'Country bâtard', price: '$8' }, { name: 'Rye & caraway', price: '$9' }, { name: 'Pain de mie', price: '$7' }], bg: '#FFFFFF', pad: 'cozy', align: 'center' }), fields: [['heading', 'Heading', 'text']], }, story: { label: 'Story / text', icon: 'fileText', make: () => ({ heading: 'Our story', body: 'Three generations of stubborn obsession with bread. We mill our own flour, ferment slow, and bake in a single Brooklyn oven — the same way since 2019.', bg: '#FFFFFF', pad: 'cozy', align: 'left' }), fields: [['heading', 'Heading', 'text'], ['body', 'Body', 'area']], }, gallery: { label: 'Gallery', icon: 'image', make: () => ({ heading: 'From the oven', images: [BRAND.wheat, BRAND.bake, BRAND.creamDk, '#C99944', BRAND.wheat, BRAND.bake], bg: BRAND.creamCard, pad: 'cozy', align: 'center' }), fields: [['heading', 'Heading', 'text']], }, testimonials: { label: 'Testimonials', icon: 'message', make: () => ({ heading: 'What Brooklyn says', quotes: [{ q: 'The best loaf in the borough, full stop.', a: 'Marc · Café Bleu' }, { q: 'I drive in from Queens every Saturday for this bread.', a: 'Sofia M.' }], bg: BRAND.cream, pad: 'cozy', align: 'center' }), fields: [['heading', 'Heading', 'text']], }, cta: { label: 'Call to action', icon: 'megaphone', make: () => ({ heading: 'Order for this weekend', sub: 'Pickup Thursday–Sunday. Wholesale welcome.', button: 'Start an order', bg: BRAND.crust, pad: 'cozy', align: 'center' }), fields: [['heading', 'Heading', 'text'], ['sub', 'Subtext', 'text'], ['button', 'Button label', 'text']], }, contact: { label: 'Contact form', icon: 'mail', make: () => ({ heading: 'Say hello', sub: 'Wholesale, classes, or just to talk bread.', button: 'Send message', bg: '#FFFFFF', pad: 'cozy', align: 'left' }), fields: [['heading', 'Heading', 'text'], ['sub', 'Subtext', 'text'], ['button', 'Button label', 'text']], }, }; const LIB_ORDER = ['hero', 'products', 'story', 'gallery', 'testimonials', 'cta', 'contact']; const seedPage = () => ([ { id: nid(), type: 'hero', props: DEFS.hero.make() }, { id: nid(), type: 'products', props: DEFS.products.make() }, { id: nid(), type: 'story', props: DEFS.story.make() }, { id: nid(), type: 'cta', props: DEFS.cta.make() }, ]); const seedAbout = () => ([ { id: nid(), type: 'story', props: { ...DEFS.story.make(), heading: 'About Honest Loaves' } }, { id: nid(), type: 'gallery', props: DEFS.gallery.make() }, { id: nid(), type: 'testimonials', props: DEFS.testimonials.make() }, { id: nid(), type: 'cta', props: DEFS.cta.make() }, ]); const seedContact = () => ([ { id: nid(), type: 'contact', props: DEFS.contact.make() }, { id: nid(), type: 'cta', props: { ...DEFS.cta.make(), heading: 'Prefer to just visit?', sub: 'We’re at 114 Wythe Ave, Brooklyn. Thursday–Sunday, 8am–2pm.' } }, ]); const BUILDER_PAGES = ['Home', 'About', 'Contact']; // ── Block renderer (used by both the design canvas and the AI preview) ── function BlockView({ block, brand, narrow, editable, onText }) { const P = window.PX; const p = block.props; const dark = isDark(p.bg); const fg = dark ? '#F5E9CE' : brand.ink; const fgSub = dark ? 'rgba(245,233,206,0.72)' : brand.sub; const padV = PADV[p.pad || 'cozy']; const align = p.align || 'left'; const wrap = { background: p.bg, color: fg, padding: `${padV}px ${narrow ? 22 : 44}px` }; const serif = "'Cormorant Garamond', Georgia, serif"; const Edit = ({ k, children, style }) => ( onText(block.id, k, e.currentTarget.textContent) : undefined} style={{ outline: 'none', cursor: editable ? 'text' : 'inherit', ...style }}>{children} ); if (block.type === 'hero') { return (
{p.eyebrow}
{p.headline}
{p.sub}
{p.cta}
{!narrow &&
}
); } if (block.type === 'products') { return (
{p.heading}
{p.items.map((it, i) => (
{it.name}
{it.price}
))}
); } if (block.type === 'story') { return (
{p.heading}
{p.body}
); } if (block.type === 'gallery') { const imgs = p.images || [brand.wheat, brand.bake, brand.creamDk, '#C99944', brand.wheat, brand.bake]; return (
{p.heading}
{imgs.map((c, i) =>
)}
); } if (block.type === 'testimonials') { return (
{p.heading}
{p.quotes.map((q, i) => (
“{q.q}”
{q.a}
))}
); } if (block.type === 'cta') { return (
{p.heading}
{p.sub}
{p.button}
); } if (block.type === 'contact') { return (
{p.heading}
{p.sub}
{['Name', 'Email'].map(l =>
{l}
)}
Message
{p.button}
); } return null; } // ── The site nav (locked top chrome of the rendered page) ── function SiteNav({ narrow }) { return (
Honest Loaves
{!narrow &&
MenuClassesShopContact
} {narrow && }
); } // ════════════════════════════════════════════════════════════════ // Main builder component // ════════════════════════════════════════════════════════════════ window.WebBuilder = function WebBuilder() { const P = window.PX; const { toast, pexOpen, setPexOpen, go, sparks, setSparks, openOverlay } = window.useApp(); // The builder is a full-bleed workspace — collapse the Pex panel while // we're in it (still reachable from the topbar), restore it on exit. React.useEffect(() => { const prev = pexOpen; if (prev) setPexOpen(false); return () => { if (prev) setPexOpen(true); }; }, []); const [blocks, setBlocks] = React.useState(seedPage); const [sel, setSel] = React.useState(null); const [device, setDevice] = React.useState('desktop'); const [mode, setMode] = React.useState('design'); // design | ai const [leftTab, setLeftTab] = React.useState('add'); // add | layers const [preview, setPreview] = React.useState(false); const [insTab, setInsTab] = React.useState('content'); // content | style const [pageName, setPageName] = React.useState('Home'); const [pageMenu, setPageMenu] = React.useState(false); const [publishing, setPublishing] = React.useState(false); // Other pages are kept in a side store so switching genuinely swaps the // canvas model. (Prototype: undo history resets on page switch.) const pageStore = React.useRef(null); if (!pageStore.current) pageStore.current = { About: seedAbout(), Contact: seedContact() }; // history const hist = React.useRef({ past: [], future: [] }); const snap = () => JSON.parse(JSON.stringify(blocks)); const commit = (nextBlocks, opts = {}) => { hist.current.past.push(snap()); if (hist.current.past.length > 60) hist.current.past.shift(); hist.current.future = []; setBlocks(nextBlocks); }; const undo = () => { const h = hist.current; if (!h.past.length) return; h.future.push(snap()); setBlocks(h.past.pop()); }; const redo = () => { const h = hist.current; if (!h.future.length) return; h.past.push(snap()); setBlocks(h.future.pop()); }; const narrow = device !== 'desktop'; const deviceW = device === 'mobile' ? 390 : device === 'tablet' ? 768 : 1080; const selBlock = blocks.find(b => b.id === sel) || null; // mutations const setProp = (id, k, v) => setBlocks(bs => bs.map(b => b.id === id ? { ...b, props: { ...b.props, [k]: v } } : b)); const setPropCommit = (id, k, v) => commit(blocks.map(b => b.id === id ? { ...b, props: { ...b.props, [k]: v } } : b)); const addBlock = (type, atEnd) => { const nb = { id: nid(), type, props: DEFS[type].make() }; const idx = atEnd || !sel ? blocks.length : blocks.findIndex(b => b.id === sel) + 1; const next = [...blocks.slice(0, idx), nb, ...blocks.slice(idx)]; commit(next); setSel(nb.id); setLeftTab('layers'); return nb; }; const removeBlock = (id) => { commit(blocks.filter(b => b.id !== id)); if (sel === id) setSel(null); }; const dupBlock = (id) => { const b = blocks.find(x => x.id === id); const nb = { id: nid(), type: b.type, props: JSON.parse(JSON.stringify(b.props)) }; const idx = blocks.findIndex(x => x.id === id) + 1; commit([...blocks.slice(0, idx), nb, ...blocks.slice(idx)]); setSel(nb.id); }; const move = (id, dir) => { const i = blocks.findIndex(b => b.id === id); const j = i + dir; if (j < 0 || j >= blocks.length) return; const next = [...blocks]; [next[i], next[j]] = [next[j], next[i]]; commit(next); }; // push a history snapshot before a live edit begins (matches inspector fields) const beginEdit = () => { hist.current.past.push(snap()); hist.current.future = []; }; // switch which page the canvas is editing (saves current, loads target) const switchPage = (name) => { setPageMenu(false); if (name === pageName) return; pageStore.current[pageName] = JSON.parse(JSON.stringify(blocks)); const target = pageStore.current[name] || seedPage(); hist.current = { past: [], future: [] }; setBlocks(target); setSel(null); setPageName(name); }; // Pex rewrite of a whole section — costs 1 spark, gated on the wallet const REWRITES = { hero: { headline: 'Bread worth the wait — every single loaf.', sub: 'Slow-fermented, stone-milled, and baked fresh in Williamsburg. Thursday through Sunday.', eyebrow: 'Brooklyn’s stubborn little bakery' }, products: { heading: 'Fresh out of the oven this week' }, story: { heading: 'Why we do it the hard way', body: 'We could go faster. We don’t. Every loaf ferments for three days, from flour we mill ourselves — because shortcuts taste like shortcuts.' }, gallery: { heading: 'Straight from the bakers’ bench' }, testimonials: { heading: 'Loved across the five boroughs' }, cta: { heading: 'Reserve your loaves for the weekend', sub: 'Order by Thursday for Saturday pickup. Wholesale inquiries welcome.', button: 'Start your order' }, contact: { heading: 'Let’s talk bread', sub: 'Wholesale, classes, private events — we read every message.', button: 'Send it over' }, }; const rewriteSection = (block) => { const cost = 1; if (cost > sparks) { openOverlay('creditGate', { needed: cost, balance: sparks }); return; } const patch = REWRITES[block.type]; if (!patch) { toast('Nothing to rewrite here.', { tone: 'neutral' }); return; } setSparks(s => Math.max(0, s - cost)); commit(blocks.map(b => b.id === block.id ? { ...b, props: { ...b.props, ...patch } } : b)); toast('Pex rewrote this section.', { tone: 'sage', icon: 'sparkles' }); }; // ── Top toolbar ── const DeviceBtn = ({ k, icon, w }) => (
setDevice(k)} title={k} style={{ padding: '5px 9px', borderRadius: 7, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, background: device === k ? P.card : 'transparent', boxShadow: device === k ? P.shSm : 'none', color: device === k ? P.ink : P.ink3 }}> {w && {w}}
); return (
{/* toolbar */}
go('website/pages')} title="Back to Website" style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '6px 8px', borderRadius: 8, cursor: 'pointer', color: P.ink2, fontSize: 12.5, fontWeight: 500 }} onMouseEnter={e => e.currentTarget.style.background = P.hover} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> Website
setPageMenu(o => !o)} title="Switch page" style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 13, color: P.ink, fontWeight: 600, cursor: 'pointer', padding: '4px 6px', borderRadius: 7 }} onMouseEnter={e => e.currentTarget.style.background = P.hover} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> {pageName}
{pageMenu && <>
setPageMenu(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }}/>
SWITCH PAGE
{BUILDER_PAGES.map(pg => (
switchPage(pg)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 8px', borderRadius: 7, cursor: 'pointer', fontSize: 12.5, color: pg === pageName ? P.ink : P.ink2, fontWeight: pg === pageName ? 600 : 400, background: pg === pageName ? P.sunk : 'transparent' }} onMouseEnter={e => { if (pg !== pageName) e.currentTarget.style.background = P.hover; }} onMouseLeave={e => { if (pg !== pageName) e.currentTarget.style.background = 'transparent'; }}> {pg}{pg === pageName && }
))}
}
{/* mode switch */}
{[['design', 'Design', 'sliders'], ['ai', 'Build with Pex', 'sparkles']].map(m => { const on = mode === m[0]; return
{ setMode(m[0]); setPreview(false); }} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 7, cursor: 'pointer', fontSize: 12.5, fontWeight: 600, background: on ? P.card : 'transparent', boxShadow: on ? P.shSm : 'none', color: on ? (m[0] === 'ai' ? P.sparkDim : P.ink) : P.ink3 }}> {m[1]}
; })}
{mode === 'design' && (
)} {mode === 'design' && <>
{ setPreview(p => !p); setSel(null); }}>{preview ? 'Exit preview' : 'Preview'} } setPublishing(true)}>Publish
{/* body */} {mode === 'ai' ? : (
{/* left panel */} {!preview && (
{[['add', 'Add', 'plus'], ['layers', 'Layers', 'layers']].map(t => { const on = leftTab === t[0]; return
setLeftTab(t[0])} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '6px 0', borderRadius: 8, cursor: 'pointer', fontSize: 12.5, fontWeight: 600, background: on ? P.card : P.sunk, boxShadow: on ? P.shSm : 'none', color: on ? P.ink : P.ink3 }}>{t[1]}
; })}
{leftTab === 'add' ? ( <>
{LIB_ORDER.map(t => (
addBlock(t)} title={`Add ${DEFS[t].label}`} style={{ border: `1px solid ${P.line}`, borderRadius: 10, padding: '14px 8px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, cursor: 'pointer', background: P.card, transition: 'background .12s' }} onMouseEnter={e => e.currentTarget.style.background = P.hover} onMouseLeave={e => e.currentTarget.style.background = P.card}>
{DEFS[t].label}
))}
Tip: need something custom? Switch to Build with Pex and describe it.
) : ( <>
Header / Nav
{blocks.map((b, i) => { const on = sel === b.id; return (
setSel(b.id)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 9px', borderRadius: 8, marginBottom: 2, cursor: 'pointer', background: on ? P.card : 'transparent', border: `1px solid ${on ? P.line : 'transparent'}`, boxShadow: on ? P.shSm : 'none' }}> {DEFS[b.type].label} { e.stopPropagation(); move(b.id, -1); }} style={{ color: i === 0 ? P.ink4 : P.ink3, cursor: 'pointer', padding: 1 }}> { e.stopPropagation(); move(b.id, 1); }} style={{ color: i === blocks.length - 1 ? P.ink4 : P.ink3, cursor: 'pointer', padding: 1 }}>
); })}
setLeftTab('add')} style={{ padding: 9, border: `1px dashed ${P.lineStrong}`, borderRadius: 8, fontSize: 11.5, color: P.ink3, textAlign: 'center', marginTop: 6, cursor: 'pointer' }}>+ Add section
)}
)} {/* canvas */}
{preview &&
setPreview(false)} style={{ position: 'fixed', bottom: 22, right: 22, zIndex: 30, display: 'flex', alignItems: 'center', gap: 7, padding: '9px 15px', background: P.ink, color: P.canvas, borderRadius: 999, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', boxShadow: P.shPop }}>Exit preview
}
{!preview && (
honestloaves.com · {device}{device !== 'desktop' ? ` · ${deviceW}px` : ''}
)}
{blocks.length === 0 && (
Empty page. Add a section to begin.
addBlock('hero', true)}>Add a hero
)} {blocks.map(b => { const on = sel === b.id; return (
{ e.stopPropagation(); setSel(b.id); }} style={{ position: 'relative', cursor: preview ? 'default' : 'pointer', outline: !preview && on ? `2px solid ${P.spark}` : 'none', outlineOffset: -2 }} onMouseEnter={e => { if (!preview && !on) e.currentTarget.style.outline = `2px solid ${P.sparkTint}`, e.currentTarget.style.outlineOffset = '-2px'; }} onMouseLeave={e => { if (!preview && !on) e.currentTarget.style.outline = 'none'; }}> {!preview && on && (
e.stopPropagation()}> {DEFS[b.type].label} {[['chevUp', () => move(b.id, -1)], ['chevD', () => move(b.id, 1)], ['copy', () => dupBlock(b.id)], ['trash', () => removeBlock(b.id)]].map((a, i) => ( ))}
)}
); })}
{/* inspector */} {!preview && (
{selBlock ? ( <>
{DEFS[selBlock.type].label} dupBlock(selBlock.id)} title="Duplicate" style={{ color: P.ink3, cursor: 'pointer', padding: 3 }}> removeBlock(selBlock.id)} title="Delete" style={{ color: P.rose, cursor: 'pointer', padding: 3 }}>
{[['content', 'Content'], ['style', 'Style']].map(t => { const on = insTab === t[0]; return
setInsTab(t[0])} style={{ flex: 1, textAlign: 'center', padding: '6px 0', borderRadius: 7, cursor: 'pointer', fontSize: 12.5, fontWeight: 600, background: on ? P.sunk : 'transparent', color: on ? P.ink : P.ink3 }}>{t[1]}
; })}
{insTab === 'content' ? (
{DEFS[selBlock.type].fields.map(f => (
{f[2] === 'area' ?