// atoms.jsx — Lasso shared primitives, icons, type system // ─── Icon set (Lucide-style 2.2 stroke) ────────────────────────────── const Ico = { search: (p={}) => , slider: (p={}) => , heart: (p={}) => , star: (p={}) => , bell: (p={}) => , home: (p={}) => , bag: (p={}) => , user: (p={}) => , chev: (p={}) => , chevL: (p={}) => , chevD: (p={}) => , check: (p={}) => , pin: (p={}) => , clock: (p={}) => , phone: (p={}) => , msg: (p={}) => , arrow: (p={}) => , plus: (p={}) => , minus: (p={}) => , x: (p={}) => , flame: (p={}) => , trophy: (p={}) => , wallet: (p={}) => , card: (p={}) => , google: (p={}) => , email: (p={}) => , lock: (p={}) => , eye: (p={}) => , ticket: (p={}) => , filter: (p={}) => , refresh: (p={}) => , receipt: (p={}) => , ride: (p={}) => , badge: (p={}) => , leaf: (p={}) => , horseshoe: (p={}) => , }; // ─── Bull mark — PNG ───────────────────────────────────────────────── function Bull({ size = 40, variant = 'twotone' }) { const res = window.__resources || {}; const src = variant === 'orange' ? (res.bullOrange || 'assets/bull-orange.png') : (res.bullTwotone || 'assets/bull-twotone.png'); return Lasso bull; } // ─── Glass surface stock — standalone React Bits adaptation ─────────── function GlassSurfaceStock({ children, width = '100%', height = '100%', borderRadius = 20, borderWidth = 0.07, brightness = 50, opacity = 0.93, blur = 11, displace = 0.5, backgroundOpacity = 0, saturation = 1, distortionScale = -180, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = 'R', yChannel = 'G', mixBlendMode = 'screen', className = '', style = {}, contentStyle = {}, }) { const uniqueId = React.useId().replace(/:/g, '-'); const filterId = 'glass-filter-' + uniqueId; const redGradId = 'red-grad-' + uniqueId; const blueGradId = 'blue-grad-' + uniqueId; const [svgSupported, setSvgSupported] = React.useState(false); const containerRef = React.useRef(null); const feImageRef = React.useRef(null); const redChannelRef = React.useRef(null); const greenChannelRef = React.useRef(null); const blueChannelRef = React.useRef(null); const gaussianBlurRef = React.useRef(null); const generateDisplacementMap = () => { const rect = containerRef.current?.getBoundingClientRect(); const actualWidth = rect?.width || 400; const actualHeight = rect?.height || 200; const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5); const svgContent = '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; return 'data:image/svg+xml,' + encodeURIComponent(svgContent); }; const updateDisplacementMap = () => { feImageRef.current?.setAttribute('href', generateDisplacementMap()); }; React.useEffect(() => { updateDisplacementMap(); [ { ref: redChannelRef, offset: redOffset }, { ref: greenChannelRef, offset: greenOffset }, { ref: blueChannelRef, offset: blueOffset }, ].forEach(({ ref, offset }) => { if (!ref.current) return; ref.current.setAttribute('scale', (distortionScale + offset).toString()); ref.current.setAttribute('xChannelSelector', xChannel); ref.current.setAttribute('yChannelSelector', yChannel); }); gaussianBlurRef.current?.setAttribute('stdDeviation', displace.toString()); }, [width, height, borderRadius, borderWidth, brightness, opacity, blur, displace, distortionScale, redOffset, greenOffset, blueOffset, xChannel, yChannel, mixBlendMode]); React.useEffect(() => { if (!containerRef.current) return; const resizeObserver = new ResizeObserver(() => setTimeout(updateDisplacementMap, 0)); resizeObserver.observe(containerRef.current); return () => resizeObserver.disconnect(); }, []); React.useEffect(() => { if (typeof window === 'undefined' || typeof document === 'undefined') return; const isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); const isFirefox = /Firefox/.test(navigator.userAgent); if (isWebkit || isFirefox) { setSvgSupported(false); return; } const div = document.createElement('div'); div.style.backdropFilter = 'url(#' + filterId + ')'; setSvgSupported(div.style.backdropFilter !== ''); }, []); const containerStyle = { position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', width: typeof width === 'number' ? width + 'px' : width, height: typeof height === 'number' ? height + 'px' : height, borderRadius, background: svgSupported ? 'hsl(0 0% 100% / ' + backgroundOpacity + ')' : 'rgba(255,255,255,0.18)', backdropFilter: svgSupported ? 'url(#' + filterId + ') saturate(' + saturation + ')' : 'blur(12px) saturate(1.8) brightness(1.1)', WebkitBackdropFilter: svgSupported ? 'url(#' + filterId + ') saturate(' + saturation + ')' : 'blur(12px) saturate(1.8) brightness(1.1)', border: '1px solid rgba(255,255,255,0.28)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(255,255,255,0.14), 0 8px 24px rgba(27,18,13,0.20)', transition: 'opacity 0.26s ease-out', ...style, }; return (
{children}
); } // ─── Wordmark — Alfa Slab One ──────────────────────────────────────── function Wordmark({ color = 'var(--brand-orange)', size = 22 }) { return (
LASSO
); } // ─── Buttons ───────────────────────────────────────────────────────── function Button({ kind = 'primary', children, onClick, full = false, size = 'md', icon, disabled = false, style = {} }) { const bgMap = { primary: 'var(--dark-chocolate)', accent: 'var(--brand-orange)', sun: 'var(--sun-orange)', ghost: 'transparent', cream: 'var(--bg-warm)', danger: 'var(--delayed-red)', }; const fgMap = { primary: 'var(--dust-cream)', accent: '#fff', sun: '#fff', ghost: 'var(--fg-primary)', cream: 'var(--fg-primary)', danger: '#fff', }; const padMap = { sm: '10px 14px', md: '14px 20px', lg: '17px 24px' }; const fsMap = { sm: 12, md: 14, lg: 15 }; return ( ); } // ─── Status pill ───────────────────────────────────────────────────── function StatusPill({ kind = 'live', children, dot = true }) { const bgMap = { live: '#2E8B4E', cooking: '#F28C1B', delayed: '#C13B1F', closed: '#7C675B', gold: '#D6A63A', orange: '#D85A14', amber: '#E8A82A', blue: '#4B7EA8', gray: '#7C675B', red: '#C83A2D', dark: '#1B120D', }; return (
{dot && } {children}
); } // ─── Quantity stepper ─────────────────────────────────────────────── function Stepper({ value, onChange, dark = false, size = 'md' }) { const bg = dark ? 'var(--dark-chocolate)' : '#fff'; const fg = dark ? 'var(--dust-cream)' : 'var(--dark-chocolate)'; const h = size === 'sm' ? 26 : 30; return (
{value}
); } function btnStepStyle(c, h) { return { width: h, height: h, border: 'none', background: 'transparent', color: c, fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 16, cursor: 'pointer' }; } // ─── Pill (small data chip) ────────────────────────────────────────── function Pill({ bg = 'var(--dust-cream)', fg = 'var(--dark-chocolate)', children, style = {} }) { return (
{children}
); } function placeholderDishFor(hue = 'orange', glyph = 'bowl') { if (glyph === 'drink') return 'drink'; if (glyph === 'cake') return 'cake'; if (glyph === 'taco' || glyph === 'pizza') return 'taco'; const map = { bbq: 'brisket', bun: 'burger', green: 'bowl', coffee: 'iced-latte', sweet: 'cake', red: 'taco', cream: 'iced-latte', orange: 'taco', }; return map[hue] || 'taco'; } // ─── Food placeholder — resolves to the fake food pack, with SVG fallback ── function FoodPh({ height = 130, hue = 'orange', radius = 18, glyph = 'bowl' }) { return ; } // ─── Skeleton block (warm shimmer) ────────────────────────────────── function Skeleton({ w = '100%', h = 14, r = 8, style = {} }) { return
; } // ─── Toast — bottom-center on mobile ──────────────────────────────── function Toast({ msg, kind = 'success', onDone }) { React.useEffect(() => { if (!msg) return; const t = setTimeout(onDone, 2200); return () => clearTimeout(t); }, [msg]); if (!msg) return null; const colors = { success: { bg: 'var(--dark-chocolate)', accent: 'var(--live-green)' }, error: { bg: 'var(--dark-chocolate)', accent: 'var(--delayed-red)' }, info: { bg: 'var(--dark-chocolate)', accent: 'var(--sun-orange)' }, }[kind]; return (
{msg}
); } // ─── Eyebrow label ────────────────────────────────────────────────── function Eyebrow({ children, color = 'var(--warm-stone)', style = {} }) { return
{children}
; } // ─── Section title ────────────────────────────────────────────────── function SectionTitle({ eyebrow, title, action, onAction }) { return (
{eyebrow && {eyebrow}}
{title}
{action &&
{action}
}
); } // ─── Input field ──────────────────────────────────────────────────── function Input({ label, type = 'text', placeholder, value, onChange, icon, error, hint, autoFocus }) { return (
{label && {label}}
{icon} onChange && onChange(e.target.value)} style={{ border: 'none', outline: 'none', flex: 1, background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--fg-primary)', minWidth: 0, }}/>
{error &&
{error}
} {hint && !error &&
{hint}
}
); } // ─── App header — wordmark + nav actions ───────────────────────────── function AppHeader({ onBell, onProfile, initials = 'JM' }) { return (
); } // Bell + avatar cluster — reused standalone in the sticky home header function HeaderActions({ onBell, onProfile, initials = 'JM', authed = true }) { return (
{authed ? ( ) : ( )}
); } // ─── Bottom nav — floats with margin ───────────────────────────────── function BottomNav({ active = 'home', onChange, cartCount = 0 }) { const tabs = [ { id: 'home', label: 'Home', icon: Ico.home }, { id: 'orders', label: 'Orders', icon: Ico.bag, badge: cartCount }, { id: 'shootout', label: 'Shootout', icon: Ico.flame }, { id: 'rewards', label: 'Rewards', icon: Ico.trophy }, { id: 'profile', label: 'Profile', icon: Ico.user }, ]; return (
{tabs.map(t => { const on = active === t.id; return ( ); })}
); } // ─── Search bar ────────────────────────────────────────────────────── function SearchBar({ placeholder = 'Catch your craving…', value, onChange, onFilter, onActivate, filterCount = 0, elevated = false }) { return (
{ e.target.blur(); onActivate(); } : undefined} onChange={(e)=>onChange && onChange(e.target.value)} style={{ border: 'none', outline: 'none', flex: 1, background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-primary)', cursor: onActivate ? 'pointer' : 'text', }}/>
); } // ─── Chips ─────────────────────────────────────────────────────────── function Chips({ items, active, onChange }) { return (
{items.map(i => { const on = i === active; return ( ); })}
); } // ─── Bottom sheet ──────────────────────────────────────────────────── // Renders into a non-scrolling layer pinned to the phone frame (via portal) // so the sheet anchors to the viewport bottom, not the scrolling screen, and // scrolling stays inside the sheet instead of leaking to the page behind. function BottomSheet({ open, onClose, children, title, maxHeight = '85%' }) { const [layer, setLayer] = React.useState(null); const [dragY, setDragY] = React.useState(0); const dragStart = React.useRef(null); React.useEffect(() => { setLayer(document.getElementById('lasso-sheet-layer')); }, []); React.useEffect(() => { if (!open) setDragY(0); }, [open]); const beginSwipeClose = (event) => { if (!open) return; dragStart.current = { y: event.clientY, at: performance.now() }; setDragY(0); event.currentTarget.setPointerCapture?.(event.pointerId); }; const moveSwipeClose = (event) => { if (!dragStart.current) return; setDragY(Math.max(0, event.clientY - dragStart.current.y)); }; const endSwipeClose = (event) => { if (!dragStart.current) return; const distance = Math.max(0, event.clientY - dragStart.current.y); const elapsed = Math.max(1, performance.now() - dragStart.current.at); const velocity = distance / elapsed; dragStart.current = null; setDragY(0); if (distance > 86 || velocity > 0.62) onClose(); }; const body = ( <> {/* overlay */}
{/* sheet */}
{title && (
{title}
)}
{children}
); // Portal into the frame-level layer when available; fall back to inline. return layer ? ReactDOM.createPortal(body, layer) : body; } // ─── Page transitions (slide-in screens) ───────────────────────────── function Screen({ children, dir = 'right', scroll = true }) { // dir: 'right' (push), 'left' (back). scroll: whether the screen itself scrolls. return (
{children}
); } // ─── Sheriff's medallion — knurled coin, beveled rim, embossed star ── const STAR_PTS = 'M50,6 L60.6,35.4 L91.9,36.4 L67.1,55.6 L75.9,85.6 L50,68 L24.1,85.6 L32.9,55.6 L8.2,36.4 L39.4,35.4 Z'; function SheriffStar({ size = 74, value, sub = 'RATED', tone = 'gold' }) { const uid = React.useMemo(() => 'sh' + Math.random().toString(36).slice(2, 7), []); const tones = { gold: { rimHi:'#FBE39A', rimMid:'#E3A622', rimLo:'#9A6410', fieldHi:'#6E4310', fieldLo:'#341E06', starHi:'#FFEDB0', starLo:'#C98A1E', txt:'#FFF2D2', sub:'#EFC979', edge:'#2A1705' }, steel: { rimHi:'#EEF3F7', rimMid:'#AFC0CC', rimLo:'#6E8290', fieldHi:'#46555F', fieldLo:'#212B32', starHi:'#FBFEFF', starLo:'#9FB2BE', txt:'#F2F7FA', sub:'#C3D2DC', edge:'#171F25' }, }; const c = tones[tone] || tones.gold; const ticks = Array.from({ length: 60 }, (_, i) => i * 6); const star = (cx, cy, s, fill, stroke) => ( ); return ( {/* outer coin */} {/* knurled coin edge */} {ticks.map((a, i) => { const rad = a * Math.PI / 180; return ; })} {/* bevel chamfer (reverse gradient) + inner shadow ring */} {/* recessed field */} {/* engraved dotted ring */} {value != null ? ( <> {star(50, 27.5, 0.30, c.edge)} {star(50, 26.5, 0.30, `url(#${uid}star)`)} {value} {sub} ) : ( <> {star(50, 52, 0.62, c.edge)} {star(50, 50.5, 0.62, `url(#${uid}star)`)} {star(50, 50.5, 0.62, 'none', c.starHi)} )} {/* top sheen */} ); } // ─── Illustrated food image — warm board + layered dish art ───────── function FoodArt({ dish = 'taco', height = 92, radius = 14, style = {} }) { const uid = React.useMemo(() => 'fa' + Math.random().toString(36).slice(2, 7), []); const photo = { taco: 'assets/food/taco.png', 'steak-taco': 'assets/food/steak-taco.png', nachos: 'assets/food/nachos.png', quesadilla: 'assets/food/quesadilla.png', burger: 'assets/food/burger.png', 'double-burger': 'assets/food/double-burger.png', 'veggie-burger': 'assets/food/veggie-burger.png', fries: 'assets/food/fries.png', 'onion-rings': 'assets/food/onion-rings.png', shake: 'assets/food/shake.png', coffee: 'assets/food/coffee.png', 'iced-latte': 'assets/food/iced-latte.png', cinnamon: 'assets/food/cinnamon.png', croissant: 'assets/food/croissant.png', pastry: 'assets/food/pastry.png', brisket: 'assets/food/brisket.png', burntends: 'assets/food/burntends.png', 'pulled-pork': 'assets/food/pulled-pork.png', sandwich: 'assets/food/sandwich.png', wings: 'assets/food/wings.png', 'wings-bowl': 'assets/food/wings-bowl.png', ribs: 'assets/food/ribs.png', bowl: 'assets/food/bowl.png', slaw: 'assets/food/slaw.png', drink: 'assets/food/drink.png', lemonade: 'assets/food/lemonade.png', cake: 'assets/food/cake.png', pizza: 'assets/food/pizza.png', sushi: 'assets/food/sushi.png', chinese: 'assets/food/chinese.png', noodles: 'assets/food/noodles.png', kebab: 'assets/food/kebab.png', grocery: 'assets/food/grocery.png', }[dish]; const objectPosition = { taco: 'center 50%', brisket: 'center 50%', burntends: 'center 50%', burger: 'center 52%', sandwich: 'center 52%', wings: 'center 48%', ribs: 'center 48%', slaw: 'center 50%', drink: 'center 48%', cake: 'center 48%', }[dish] || 'center'; if (photo) { return (
{ e.currentTarget.style.display = 'none'; }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition }} />
); } const boards = { char: ['#3A1B0D', '#5A2C13'], // dark smoked board oak: ['#C68A4A', '#9A5E28'], // wood plank cream: ['#E9DCC4', '#CDA876'], // light plate slate: ['#5A4636', '#3A2A1E'], }; const D = { taco: { board: 'char', art: ( ) }, burger: { board: 'oak', art: ( ) }, ribs: { board: 'char', art: ( {[28,40,52,64].map((x,i)=>())} ) }, brisket: { board: 'oak', art: ( ) }, wings: { board: 'slate', art: ( {[[34,44],[58,40],[44,60],[66,58]].map((p,i)=>( ))} ) }, sandwich:{ board: 'cream', art: ( ) }, mac: { board: 'cream', art: ( {[[40,50],[52,48],[60,54],[44,60],[56,60],[48,55]].map((p,i)=>())} ) }, slaw: { board: 'cream', art: ( {[[38,52,'#8AB84A'],[58,50,'#A8C85A'],[48,58,'#7AA83E'],[62,58,'#C8D87A'],[42,60,'#9AC04E']].map((p,i)=>())} ) }, drink: { board: 'oak', art: ( ) }, burntends:{ board: 'char', art: ( {[[36,46],[52,42],[46,58],[62,52],[40,62],[58,64]].map((p,i)=>( ))} ) }, }; const spec = D[dish] || D.taco; const [b0, b1] = boards[spec.board] || boards.char; return (
{/* board grain */} {/* soft plate glow under food */} {spec.art} {/* top sheen */}
); } Object.assign(window, { Ico, Bull, Wordmark, Button, StatusPill, Stepper, Pill, FoodPh, FoodArt, SheriffStar, Skeleton, GlassSurfaceStock, Toast, Eyebrow, SectionTitle, Input, AppHeader, HeaderActions, BottomNav, SearchBar, Chips, BottomSheet, Screen, });