/* Components for the ViZO Studio website UI kit. Export to window so multiple babel scripts can share. */ const { useState, useEffect, useRef } = React; /* ---------------- Primitives ---------------- */ function Eyebrow({ children, color = 'var(--graphite)' }) { return (

{children}

); } function Button({ children, variant = 'primary', size = 'medium', onClick, arrow = false, style = {} }) { const sizes = { small: { height: 36, padX: 16, fontSize: 14 }, medium: { height: 44, padX: 20, fontSize: 15 }, large: { height: 56, padX: 28, fontSize: 16 }, xl: { height: 64, padX: 36, fontSize: 17 } }; const s = sizes[size]; const variants = { primary: { background: 'var(--ink)', color: 'var(--canvas)', border: 'none' }, primaryInv: { background: 'var(--canvas)', color: 'var(--ink)', border: 'none' }, secondary: { background: 'transparent', color: 'var(--ink)', border: '1.5px solid var(--ink)' }, secondaryInv: { background: 'transparent', color: 'var(--canvas)', border: '1.5px solid var(--canvas)' }, ghost: { background: 'transparent', color: 'var(--ink)', border: 'none' } }; const v = variants[variant]; const [hover, setHover] = useState(false); return ( ); } function Tag({ children, variant = 'default', style }) { const v = { default: { background: 'var(--bone)', color: 'var(--charcoal)' }, featured: { background: 'var(--accent-amber)', color: 'var(--ink)' }, status: { background: 'var(--canvas)', color: 'var(--ink)', border: '1px solid var(--ink)' }, credit: { background: 'var(--ink)', color: 'var(--canvas)', fontFamily: 'var(--font-mono)', letterSpacing: 0, textTransform: 'none', fontWeight: 500 } }[variant]; return ( {children}); } /* ---------------- Placeholder image ---------------- We don't have real fashion imagery, so render a tasteful monochrome placeholder with a caption. Treat as intentional. */ function FashionPlate({ ratio = '4 / 5', label = 'Figure', subject = 'Model · campaign', dark = false, idx = 0, src, fit = 'cover', position = 'center', bg, alt, children }) { // Subtle tonal variation between plates const tones = dark ? ['#1A1A1A', '#222', '#0F0F0F', '#1F1F1F'] : ['#E8E5E0', '#D8D4CD', '#EFECE6', '#DDD8D0']; const accent = dark ? ['#2E2E2E', '#3A3A3A', '#252525', '#333'] : ['#C4BFB7', '#B8B3AB', '#CFC9C0', '#A8A39A']; const t1 = tones[idx % tones.length]; const t2 = accent[idx % accent.length]; const hasImage = Boolean(src); // Caption shows only when there is a label or subject to display. const labelText = (label || '').trim(); const subjectText = (subject || '').trim(); const hasCaption = Boolean(labelText || subjectText); // Alt: explicit prop wins; else label + subject (empty parts dropped); else a safe fallback. const imgAlt = (alt && alt.trim()) || [labelText, subjectText].filter(Boolean).join(' \u2014 ') || 'ViZO \u2014 AI-generated fashion image'; return (

{hasImage ? {imgAlt}

{imgAlt}

: ( /* subtle vertical band to evoke garment silhouette */

) } {hasCaption &&

{label} {subject}

} {children}

); } /* ---------------- Icons (Lucide inline, 1.5 stroke) ---------------- */ const Icon = { arrow: (p) => , check: (p) => , sparkle: (p) => , camera: (p) => , layers: (p) => , wand: (p) => , grid: (p) => , download: (p) => , shirt: (p) => , package: (p) => , list: (p) => , ghost: (p) => , user: (p) => , tree: (p) => , scan: (p) => , hash: (p) => , maximize: (p) => , store: (p) => , globe: (p) => , gem: (p) => , sparkles: (p) => , cog: (p) => , film: (p) => , clock: (p) => , imagePlay: (p) => , type: (p) => , shoe: (p) => , pencil: (p) => , hat: (p) => , handbag: (p) => , digitalTwin: (p) => , consistency: (p) => , lock: (p) => , studioLight: (p) => , resolution: (p) => , editorialSets: (p) => , clapper: (p) => }; Object.assign(window, { Eyebrow, Button, Tag, FashionPlate, Icon }); /* ---------------- Responsive hooks ---------------- Single source of truth for breakpoints: mobile < 640 (single column, hamburger nav) tablet 640–1023 (two-column layouts allowed) desktop >= 1024 (full multi-column) useIsMobile(bp) keeps a custom threshold (TopNav uses 900) for fine-tuning places where the cliff between bars/menus needs to bend earlier. */ const BP = { mobile: 640, desktop: 1024 }; function useViewport() { const get = () => typeof window !== 'undefined' ? window.innerWidth : 1440; const [w, setW] = useState(get); useEffect(() => { const onResize = () => setW(get()); window.addEventListener('resize', onResize); window.addEventListener('orientationchange', onResize); return () => { window.removeEventListener('resize', onResize); window.removeEventListener('orientationchange', onResize); }; }, []); return w; } function useBreakpoint() { const w = useViewport(); const isMobile = w < BP.mobile; const isTablet = w >= BP.mobile && w < BP.desktop; const isDesktop = w >= BP.desktop; return { width: w, isMobile, isTablet, isDesktop, isMobileOrTablet: !isDesktop }; } function useIsMobile(bp = BP.mobile) { const w = useViewport(); return w < bp; } /* cols(mobile, tablet, desktop) — convenience for gridTemplateColumns */ function cols(m, t, d) { return ({ isMobile, isTablet }) => isMobile ? m : isTablet ? t : d; } Object.assign(window, { useViewport, useBreakpoint, useIsMobile, cols, BP });