/* BLOCKS E-NAV — extra Navigation variants (navbar, tabs, breadcrumb) */
(function(){
  const { cx, Slot, Spark, Bars, Ring, Glyph, G } = window;
  const B='inline-flex items-center justify-center gap-2 cursor-pointer select-none whitespace-nowrap';
  const ghost=s=>s.cls.btnGhost||s.cls.btn;
  const head=(s,x='')=>cx(s.cls.display,s.cls.glow,x);
  const sw=(s,i,fb)=>(s.swatch&&s.swatch[i])||fb||s.cls.accent;

  const Logo=({s,name='Empire'})=>(
    <div className="flex items-center gap-2 shrink-0">
      <span className="w-7 h-7 rounded-lg inline-flex items-center justify-center text-white text-xs font-extrabold"
        style={{background:`linear-gradient(135deg, ${sw(s,0)}, ${sw(s,1)})`}}>E</span>
      <span className={head(s,'text-sm font-extrabold')}>{name}</span>
    </div>);
  const chevron='M9 6l6 6-6 6';

  const blocks=[
    /* ================= NAVBAR ================= */
    { id:'eN-nav-app', type:'navigation', subtype:'navbar', title:'App top bar (logo + links + avatar)', w:2,
      Render:(s)=>{
        const [act,setAct]=React.useState('Dashboard');
        const links=['Dashboard','Projects','Reports','Settings'];
        return (
          <div className={cx(s.cls.surface,'w-full flex items-center gap-5 px-5 py-3')}>
            <Logo s={s}/>
            <nav className="flex items-center gap-1 ml-2">
              {links.map(l=>(
                <button key={l} onClick={()=>setAct(l)}
                  className={cx('px-3 py-1.5 rounded-lg text-sm transition',l===act?s.cls.btnPrimary:cx('font-medium',s.cls.sub,'hover:opacity-100 opacity-80'))}>{l}</button>))}
            </nav>
            <div className="ml-auto flex items-center gap-3">
              <button className={cx(B,s.cls.surface2,'w-9 h-9 rounded-full p-0')}><Glyph d={G.bell} size={16}/></button>
              <span className="w-9 h-9 rounded-full inline-flex items-center justify-center text-white text-xs font-bold" style={{background:sw(s,0)}}>JD</span>
            </div>
          </div>); } },

    { id:'eN-nav-marketing', type:'navigation', subtype:'navbar', title:'Marketing navbar w/ CTA', w:2,
      Render:(s)=>{
        const links=['Product','Solutions','Pricing','Docs'];
        return (
          <div className={cx(s.cls.surface,'w-full flex items-center gap-6 px-6 py-3.5')}>
            <Logo s={s}/>
            <nav className="hidden md:flex items-center gap-5 ml-4">
              {links.map(l=>(
                <a key={l} className={cx('text-sm font-medium cursor-pointer transition hover:opacity-100',s.cls.sub,'opacity-80')}>{l}</a>))}
            </nav>
            <div className="ml-auto flex items-center gap-2">
              <button className={cx(B,ghost(s),'px-3 py-1.5 text-sm')}>Sign in</button>
              <button className={cx(B,s.cls.btnPrimary,'px-4 py-1.5 text-sm')}>Get started<Glyph d={G.arrow} size={14}/></button>
            </div>
          </div>); } },

    { id:'eN-nav-search', type:'navigation', subtype:'navbar', title:'Navbar w/ search field', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full flex items-center gap-4 px-5 py-3')}>
          <Logo s={s} name="Console"/>
          <div className={cx(s.cls.input,'flex items-center gap-2 flex-1 max-w-md px-3 py-2 mx-2')}>
            <span className={s.cls.muted}><Glyph d={G.search} size={15}/></span>
            <input placeholder="Search projects, docs, people…" className="bg-transparent border-0 outline-none text-sm w-full"/>
            <kbd className={cx('text-[10px] px-1.5 py-0.5 rounded',s.cls.chip)}>⌘K</kbd>
          </div>
          <div className="ml-auto flex items-center gap-2">
            <button className={cx(B,s.cls.surface2,'w-9 h-9 rounded-full p-0')}><Glyph d={G.plus} size={16}/></button>
            <span className="w-9 h-9 rounded-full inline-flex items-center justify-center text-white text-xs font-bold" style={{background:sw(s,1,s.cls.accent)}}>AM</span>
          </div>
        </div>) },

    { id:'eN-nav-sidebar', type:'navigation', subtype:'navbar', title:'Vertical sidebar nav', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState('Home');
        const items=[['Home',G.play],['Search',G.search],['Favorites',G.heart],['Alerts',G.bell],['Starred',G.star]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[230px] p-3')}>
            <div className="px-2 pb-3"><Logo s={s}/></div>
            <nav className="flex flex-col gap-1">
              {items.map(([l,d])=>(
                <button key={l} onClick={()=>setAct(l)}
                  className={cx('flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-left transition',l===act?s.cls.btnPrimary:cx('font-medium',s.cls.sub,'opacity-80 hover:opacity-100'))}>
                  <Glyph d={d} size={16}/>{l}</button>))}
            </nav>
            <div className="mt-3 pt-3 flex items-center gap-2 px-2" style={{borderTop:'1px solid rgba(128,128,128,.18)'}}>
              <span className="w-8 h-8 rounded-full inline-flex items-center justify-center text-white text-[11px] font-bold" style={{background:sw(s,0)}}>KO</span>
              <div className="min-w-0"><div className="text-xs font-semibold truncate">Kemi Ola</div><div className={cx('text-[10px]',s.cls.muted)}>Owner</div></div>
            </div>
          </div>); } },

    { id:'eN-nav-bottomtab', type:'navigation', subtype:'navbar', title:'Bottom tab bar (mobile)', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState(0);
        const tabs=[['Home',G.play],['Search',G.search],['Add',G.plus],['Likes',G.heart],['Profile',G.star]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[320px] flex items-stretch px-2 py-2')}>
            {tabs.map(([l,d],i)=>(
              <button key={l} onClick={()=>setAct(i)}
                className={cx('flex-1 flex flex-col items-center gap-1 py-1.5 rounded-lg transition',i===act?'':'opacity-60')}
                style={i===act?{color:s.cls.accent}:null}>
                {i===2
                  ? <span className={cx(B,'w-9 h-9 rounded-full p-0 text-white')} style={{background:s.cls.accent}}><Glyph d={d} size={18}/></span>
                  : <Glyph d={d} size={20} fill={i===act?'currentColor':'none'}/>}
                <span className={cx('text-[10px] font-medium',i===act?'':s.cls.muted)}>{l}</span>
              </button>))}
          </div>); } },

    { id:'eN-nav-dropdown', type:'navigation', subtype:'navbar', title:'Navbar w/ dropdown menu', w:2,
      Render:(s)=>{
        const [open,setOpen]=React.useState(false);
        const menu=['Overview','Analytics','Integrations','Webhooks'];
        return (
          <div className={cx(s.cls.surface,'w-full flex items-center gap-5 px-5 py-3 relative')}>
            <Logo s={s}/>
            <nav className="flex items-center gap-1 ml-2">
              <button className={cx('px-3 py-1.5 rounded-lg text-sm font-medium',s.cls.sub)}>Home</button>
              <div className="relative">
                <button onClick={()=>setOpen(o=>!o)}
                  className={cx('px-3 py-1.5 rounded-lg text-sm inline-flex items-center gap-1.5 transition',open?s.cls.surface2:cx('font-medium',s.cls.sub))}>
                  Platform<Glyph d={chevron} size={13}/></button>
                {open&&(
                  <div className={cx(s.cls.surface,'absolute left-0 top-full mt-2 w-48 p-1.5 z-20')} style={{boxShadow:'0 12px 32px -8px rgba(0,0,0,.35)'}}>
                    {menu.map(m=>(
                      <button key={m} className={cx('w-full text-left px-3 py-2 rounded-lg text-sm transition',s.cls.sub,'hover:opacity-100')}
                        style={{}} onMouseDown={()=>setOpen(false)}>{m}</button>))}
                  </div>)}
              </div>
              <button className={cx('px-3 py-1.5 rounded-lg text-sm font-medium',s.cls.sub)}>Pricing</button>
            </nav>
            <button className={cx(B,s.cls.btnPrimary,'ml-auto px-4 py-1.5 text-sm')}>Console<Glyph d={G.arrow} size={14}/></button>
          </div>); } },

    /* ================= TABS ================= */
    { id:'eN-tabs-underline', type:'navigation', subtype:'tabs', title:'Underline tabs', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState('Overview');
        const tabs=['Overview','Activity','Usage','Members'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[340px] px-4 pt-3')}>
            <div className="flex gap-5" style={{borderBottom:'1px solid rgba(128,128,128,.2)'}}>
              {tabs.map(t=>(
                <button key={t} onClick={()=>setAct(t)}
                  className={cx('pb-2.5 -mb-px text-sm transition',t===act?cx('font-semibold',s.cls.text):cx('font-medium',s.cls.sub))}
                  style={t===act?{borderBottom:`2px solid ${s.cls.accent}`}:{borderBottom:'2px solid transparent'}}>{t}</button>))}
            </div>
            <div className={cx('py-4 text-xs',s.cls.sub)}>Showing <span className={s.cls.text}>{act}</span> for this workspace.</div>
          </div>); } },

    { id:'eN-tabs-pill', type:'navigation', subtype:'tabs', title:'Pill tabs', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState('Day');
        const tabs=['Day','Week','Month','Year'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-4')}>
            <div className="flex gap-1.5 flex-wrap">
              {tabs.map(t=>(
                <button key={t} onClick={()=>setAct(t)}
                  className={cx('px-3.5 py-1.5 rounded-full text-sm transition',t===act?s.cls.btnPrimary:cx('font-medium',s.cls.chip,s.cls.sub))}>{t}</button>))}
            </div>
          </div>); } },

    { id:'eN-tabs-segmented', type:'navigation', subtype:'tabs', title:'Segmented control tabs', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState(0);
        const tabs=['List','Board','Calendar'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-4')}>
            <div className={cx(s.cls.surface2,'inline-flex p-1 rounded-xl gap-1 w-full')}>
              {tabs.map((t,i)=>(
                <button key={t} onClick={()=>setAct(i)}
                  className={cx('flex-1 px-3 py-1.5 rounded-lg text-sm text-center transition',i===act?s.cls.btnPrimary:cx('font-medium',s.cls.sub))}>{t}</button>))}
            </div>
          </div>); } },

    { id:'eN-tabs-icons', type:'navigation', subtype:'tabs', title:'Tabs with icons', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState('Activity');
        const tabs=[['Activity',G.play],['Starred',G.star],['Alerts',G.bell],['Saved',G.heart]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[340px] px-4 pt-3')}>
            <div className="flex gap-4" style={{borderBottom:'1px solid rgba(128,128,128,.2)'}}>
              {tabs.map(([t,d])=>(
                <button key={t} onClick={()=>setAct(t)}
                  className={cx('pb-2.5 -mb-px text-sm inline-flex items-center gap-1.5 transition',t===act?cx('font-semibold',s.cls.text):cx('font-medium',s.cls.sub))}
                  style={t===act?{borderBottom:`2px solid ${s.cls.accent}`,color:s.cls.accent}:{borderBottom:'2px solid transparent'}}>
                  <Glyph d={d} size={15}/>{t}</button>))}
            </div>
            <div className={cx('py-4 text-xs',s.cls.muted)}>Tab: {act}</div>
          </div>); } },

    { id:'eN-tabs-counts', type:'navigation', subtype:'tabs', title:'Tabs with count badges', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState('Open');
        const tabs=[['Open',24],['In review',8],['Merged',132],['Closed',5]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[360px] p-4')}>
            <div className="flex gap-1.5 flex-wrap">
              {tabs.map(([t,n])=>(
                <button key={t} onClick={()=>setAct(t)}
                  className={cx('px-3 py-1.5 rounded-lg text-sm inline-flex items-center gap-2 transition',t===act?s.cls.surface2:'opacity-75 hover:opacity-100')}
                  style={t===act?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`}:null}>
                  <span className={cx('font-medium',t===act?s.cls.text:s.cls.sub)}>{t}</span>
                  <span className="px-1.5 py-0.5 rounded-full text-[10px] font-bold" style={t===act?{background:s.cls.accent,color:'#fff'}:{background:'rgba(128,128,128,.18)'}}>{n}</span>
                </button>))}
            </div>
          </div>); } },

    { id:'eN-tabs-vertical', type:'navigation', subtype:'tabs', title:'Vertical tabs', w:1,
      Render:(s)=>{
        const [act,setAct]=React.useState('Account');
        const tabs=['Account','Security','Billing','Notifications'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-3 flex gap-3')}>
            <div className="flex flex-col gap-1 w-32 shrink-0">
              {tabs.map(t=>(
                <button key={t} onClick={()=>setAct(t)}
                  className={cx('text-left px-3 py-2 rounded-lg text-sm transition',t===act?s.cls.btnPrimary:cx('font-medium',s.cls.sub,'opacity-80 hover:opacity-100'))}>{t}</button>))}
            </div>
            <div className={cx('flex-1 rounded-lg p-3',s.cls.surface2)}>
              <div className="text-sm font-semibold">{act}</div>
              <div className={cx('text-[11px] mt-1 leading-relaxed',s.cls.muted)}>Manage your {act.toLowerCase()} settings here.</div>
            </div>
          </div>); } },

    /* ================= BREADCRUMB ================= */
    { id:'eN-crumb-chevron', type:'navigation', subtype:'breadcrumb', title:'Chevron breadcrumb', w:1,
      Render:(s)=>{
        const crumbs=['Home','Projects','Empire UI'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[340px] px-4 py-3')}>
            <nav className="flex items-center gap-1.5 text-sm flex-wrap">
              {crumbs.map((c,i)=>(
                <React.Fragment key={c}>
                  {i>0&&<span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>}
                  <span className={i===crumbs.length-1?cx('font-semibold',s.cls.text):cx('font-medium cursor-pointer',s.cls.sub)}>{c}</span>
                </React.Fragment>))}
            </nav>
          </div>); } },

    { id:'eN-crumb-slash', type:'navigation', subtype:'breadcrumb', title:'Slash breadcrumb', w:1,
      Render:(s)=>{
        const crumbs=['workspace','billing','invoices','INV-2048'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[340px] px-4 py-3')}>
            <nav className="flex items-center gap-2 text-sm flex-wrap" style={{fontFamily:'Space Mono, monospace'}}>
              {crumbs.map((c,i)=>(
                <React.Fragment key={c}>
                  {i>0&&<span className={s.cls.muted}>/</span>}
                  <span className={i===crumbs.length-1?cx('font-semibold',s.cls.accent&&'',s.cls.text):cx('cursor-pointer',s.cls.sub)}
                    style={i===crumbs.length-1?{color:s.cls.accent}:null}>{c}</span>
                </React.Fragment>))}
            </nav>
          </div>); } },

    { id:'eN-crumb-dropdown', type:'navigation', subtype:'breadcrumb', title:'Breadcrumb w/ dropdown', w:1,
      Render:(s)=>{
        const [open,setOpen]=React.useState(false);
        const siblings=['Marketing','Platform','Mobile'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[340px] px-4 py-3 relative')}>
            <nav className="flex items-center gap-1.5 text-sm">
              <span className={cx('font-medium cursor-pointer',s.cls.sub)}>Home</span>
              <span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>
              <div className="relative">
                <button onClick={()=>setOpen(o=>!o)} className={cx('inline-flex items-center gap-1 font-medium',s.cls.sub)}>
                  Platform<Glyph d={chevron} size={12}/></button>
                {open&&(
                  <div className={cx(s.cls.surface,'absolute left-0 top-full mt-2 w-40 p-1.5 z-20')} style={{boxShadow:'0 12px 32px -8px rgba(0,0,0,.35)'}}>
                    {siblings.map(m=>(
                      <button key={m} onMouseDown={()=>setOpen(false)} className={cx('w-full text-left px-3 py-1.5 rounded-lg text-sm',s.cls.sub)}>{m}</button>))}
                  </div>)}
              </div>
              <span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>
              <span className={cx('font-semibold',s.cls.text)}>Releases</span>
            </nav>
          </div>); } },

    { id:'eN-crumb-home', type:'navigation', subtype:'breadcrumb', title:'Breadcrumb w/ home icon', w:1,
      Render:(s)=>{
        const home='M3 11l9-8 9 8M5 10v10h14V10';
        const crumbs=['Components','Navigation','Breadcrumb'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[360px] px-4 py-3')}>
            <nav className="flex items-center gap-1.5 text-sm flex-wrap">
              <button className={cx(s.cls.sub,'cursor-pointer')}><Glyph d={home} size={15}/></button>
              {crumbs.map((c,i)=>(
                <React.Fragment key={c}>
                  <span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>
                  <span className={i===crumbs.length-1?cx('font-semibold',s.cls.text):cx('font-medium cursor-pointer',s.cls.sub)}>{c}</span>
                </React.Fragment>))}
            </nav>
          </div>); } },

    { id:'eN-crumb-truncated', type:'navigation', subtype:'breadcrumb', title:'Compact truncated breadcrumb', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] px-4 py-3')}>
          <nav className="flex items-center gap-1.5 text-sm">
            <span className={cx('font-medium cursor-pointer',s.cls.sub)}>Root</span>
            <span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>
            <button className={cx(B,s.cls.chip,'w-6 h-6 rounded-md p-0 text-xs font-bold')}>…</button>
            <span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>
            <span className={cx('font-medium cursor-pointer',s.cls.sub)}>src</span>
            <span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>
            <span className={cx('font-semibold',s.cls.text)}>index.tsx</span>
          </nav>
        </div>) },

    { id:'eN-crumb-actions', type:'navigation', subtype:'breadcrumb', title:'Breadcrumb + page actions', w:2,
      Render:(s)=>{
        const crumbs=['Projects','Atlas','Settings'];
        return (
          <div className={cx(s.cls.surface,'w-full flex items-center gap-3 px-5 py-3')}>
            <nav className="flex items-center gap-1.5 text-sm flex-wrap">
              {crumbs.map((c,i)=>(
                <React.Fragment key={c}>
                  {i>0&&<span className={s.cls.muted}><Glyph d={chevron} size={13}/></span>}
                  <span className={i===crumbs.length-1?cx('font-semibold',s.cls.text):cx('font-medium cursor-pointer',s.cls.sub)}>{c}</span>
                </React.Fragment>))}
            </nav>
            <div className="ml-auto flex items-center gap-2">
              <button className={cx(B,ghost(s),'px-3 py-1.5 text-sm')}><Glyph d={G.star} size={14}/>Star</button>
              <button className={cx(B,s.cls.btnPrimary,'px-3.5 py-1.5 text-sm')}><Glyph d={G.plus} size={14}/>New</button>
            </div>
          </div>); } },
  ];
  /* ═══════════════════ CURSORS ═══════════════════ */
  const CURSORS_META=[
    {id:'standard',      name:'Standard Cursor',    vibe:'Classic arrow — premium reimagined', tag:'Standard',  cat:null,       idx:null},
    {id:'glass-lens',    name:'Glass Lens',          vibe:'Frosted glass orb',                  tag:'Glass',     cat:'glass',    idx:0},
    {id:'magnetic-pulse',name:'Magnetic Pulse',      vibe:'Pull field attraction',              tag:'Magnetic',  cat:'natural',  idx:8},
    {id:'dot-ring',      name:'Dot + Ring',          vibe:'Precision double-ring',              tag:'Geometric', cat:'geometric',idx:1},
    {id:'spring',        name:'Spring Overshoot',    vibe:'Physics spring bounce',              tag:'Spring',    cat:'motion',   idx:1},
    {id:'liquid-blob',   name:'Liquid Blob',         vibe:'Morphing organic fluid',             tag:'Organic',   cat:'glass',    idx:6},
    {id:'mercury-drop',  name:'Mercury Drop',        vibe:'Chrome liquid metal',                tag:'Elastic',   cat:'elastic',  idx:6},
    {id:'bracket-frame', name:'Bracket Frame',       vibe:'HUD targeting reticle',             tag:'Tech',      cat:'tech',     idx:4},
    {id:'progress-ring', name:'Progress Ring',       vibe:'Rotating arc — always on',          tag:'Loader',    cat:'tech',     idx:8},
    {id:'water-ripple',  name:'Water Ripple',        vibe:'Concentric waves fade out',          tag:'Wave',      cat:'natural',  idx:0},
    {id:'aurora-glow',   name:'Aurora Glow',         vibe:'Nebula chromatic corona',            tag:'Glow',      cat:'natural',  idx:6},
  ];

  /* load cursor-lib scripts once */
  let _cursorLibReady=null;
  function loadCursorLib(){
    if(_cursorLibReady) return _cursorLibReady;
    _cursorLibReady=new Promise(resolve=>{
      if(window.EmpireCursor){resolve();return;}
      if(!document.querySelector('link[href="/cursor-lib/styles.css"]')){
        const l=document.createElement('link');l.rel='stylesheet';l.href='/cursor-lib/styles.css';document.head.appendChild(l);
      }
      function loadSrc(src,cb){
        if(document.querySelector(`script[src="${src}"]`)){cb();return;}
        const sc=document.createElement('script');sc.src=src;sc.onload=cb;sc.onerror=cb;document.body.appendChild(sc);
      }
      loadSrc('/cursor-lib/data.js',()=>loadSrc('/cursor-lib/data2.js',()=>loadSrc('/cursor-lib/engine.js',resolve)));
    });
    return _cursorLibReady;
  }

  /* ── StandardGlassCursor — rAF lerp, truly adaptive glass arrow ── */
  function StandardGlassCursor({acc,acc2,stageRef}){
    const tRef=React.useRef({x:100,y:110});
    const cRef=React.useRef({x:100,y:110});
    const rafRef=React.useRef(null);
    const [d,setD]=React.useState({x:100,y:110,in:false});
    const [ripples,setRipples]=React.useState([]);

    React.useEffect(()=>{
      let active=false;
      const loop=()=>{
        const c=cRef.current,t=tRef.current;
        c.x+=(t.x-c.x)*0.18; c.y+=(t.y-c.y)*0.18;
        setD({x:c.x,y:c.y,in:active});
        rafRef.current=requestAnimationFrame(loop);
      };
      rafRef.current=requestAnimationFrame(loop);
      const el=stageRef.current; if(!el) return ()=>cancelAnimationFrame(rafRef.current);
      const mv=e=>{const r=el.getBoundingClientRect();tRef.current={x:e.clientX-r.left,y:e.clientY-r.top};active=true;};
      const lv=()=>{active=false;};
      const cl=e=>{
        const r=el.getBoundingClientRect();
        const x=e.clientX-r.left,y=e.clientY-r.top,id=Date.now();
        setRipples(rs=>[...rs,{id,x,y}]);
        setTimeout(()=>setRipples(rs=>rs.filter(r=>r.id!==id)),800);
      };
      el.addEventListener('mousemove',mv);
      el.addEventListener('mouseleave',lv);
      el.addEventListener('click',cl);
      return ()=>{ cancelAnimationFrame(rafRef.current); el.removeEventListener('mousemove',mv); el.removeEventListener('mouseleave',lv); el.removeEventListener('click',cl); };
    },[acc]);

    return (
      <>
        {/* accent bloom — changes color with every style */}
        <div style={{position:'absolute',left:d.x-44,top:d.y-30,width:88,height:70,
          borderRadius:'50%',pointerEvents:'none',zIndex:1,
          background:`radial-gradient(ellipse,${acc}4d 0%,transparent 70%)`,
          filter:'blur(10px)'}}/>

        {/* glass arrow */}
        <div style={{position:'absolute',left:d.x,top:d.y,pointerEvents:'none',zIndex:5,
          filter:`drop-shadow(0 3px 12px ${acc}70) drop-shadow(1px 2px 0 rgba(0,0,0,.5))`}}>
          <svg width="36" height="44" viewBox="0 0 36 44" fill="none" style={{overflow:'visible'}}>
            <defs>
              <linearGradient id={`gla-${acc.replace('#','')}`} x1="3" y1="2" x2="32" y2="42" gradientUnits="userSpaceOnUse">
                <stop offset="0%"   stopColor="rgba(255,255,255,0.52)"/>
                <stop offset="35%"  stopColor={acc} stopOpacity="0.28"/>
                <stop offset="100%" stopColor={acc2} stopOpacity="0.08"/>
              </linearGradient>
            </defs>
            {/* translucent filled body — tinted by accent */}
            <path d="M3 2L3 37L11 29L17 43L22 41L16 27L30 27L3 2Z"
              fill={`url(#gla-${acc.replace('#','')})`}
              stroke={acc} strokeWidth="0.7" strokeOpacity="0.6"
              strokeLinejoin="round"/>
            {/* bright left-edge specular */}
            <path d="M4.5 5L4.5 25L9 20"
              stroke="rgba(255,255,255,0.88)" strokeWidth="1.4" strokeLinecap="round"/>
            {/* tip bright dot */}
            <circle cx="4" cy="4" r="2" fill="rgba(255,255,255,0.95)"/>
            {/* inner subtle shimmer */}
            <path d="M3 2L3 37" stroke="rgba(255,255,255,0.2)" strokeWidth="0.5"/>
          </svg>
        </div>

        {/* ripples */}
        {ripples.map(r=>(
          <div key={r.id} style={{position:'absolute',left:r.x,top:r.y,
            width:56,height:56,marginLeft:-28,marginTop:-28,borderRadius:'50%',
            border:`1px solid ${acc}90`,pointerEvents:'none',zIndex:4,
            animation:'cursor-ripple .7s cubic-bezier(.15,.8,.35,1) forwards'}}/>
        ))}

        {!d.in && <div style={{position:'absolute',bottom:12,left:0,right:0,
          textAlign:'center',fontSize:10,fontWeight:600,letterSpacing:'.07em',
          color:'rgba(255,255,255,.22)',pointerEvents:'none',userSelect:'none'}}>hover to interact</div>}
      </>
    );
  }

  /* individual cursor block factory */
  function makeCursorBlock(c){
    return {
      id:`eN-cursor-${c.id}`,
      type:'navigation',
      subtype:'cursor',
      title:`Cursor — ${c.name}`,
      w:1,
      Render:(s)=>{
        const acc=s.swatch[0], acc2=s.swatch[1]||acc;
        const [ready,setReady]=React.useState(c.cat===null||!!window.EmpireCursor);
        const stageRef=React.useRef(null);
        const mounted=React.useRef(false);

        React.useEffect(()=>{
          if(c.cat===null){setReady(true);return;}
          loadCursorLib().then(()=>setReady(true));
        },[]);

        React.useEffect(()=>{
          if(!ready||!stageRef.current||c.cat===null) return;
          const el=stageRef.current;
          el.style.setProperty('--accent',acc);
          el.style.setProperty('--accent-2',acc2);
          el.style.setProperty('--accent-3',acc2);
          el.style.setProperty('--grid',`${acc}18`);
          el.style.setProperty('background',
            `radial-gradient(ellipse 110% 70% at 50% 0%, ${acc}1c, transparent 60%), transparent`,
            'important');
          if(!mounted.current && window.EmpireCursor){
            try{ window.EmpireCursor.mount(el,c.cat,c.idx); mounted.current=true; }catch(e){}
          }
        },[ready,acc,acc2]);

        return (
          <div style={{width:'100%'}}>
            {c.cat !== null ? (
              <div ref={stageRef} data-stage={`${c.cat}:${c.idx}`} className="stage"
                style={{width:'100%',height:280,cursor:'none',overflow:'hidden',position:'relative',
                  borderRadius:12,
                  ['--accent']:acc,['--accent-2']:acc2,['--accent-3']:acc2,['--grid']:`${acc}18`}}/>
            ) : (
              /* Standard — transparent so win-canvas style shows through */
              <div ref={stageRef} style={{width:'100%',height:280,position:'relative',
                cursor:'none',overflow:'hidden',borderRadius:12,background:'transparent'}}>
                {/* subtle grid overlay — inherits acc color */}
                <div style={{position:'absolute',inset:0,
                  backgroundImage:`linear-gradient(${acc}10 1px,transparent 1px),linear-gradient(90deg,${acc}10 1px,transparent 1px)`,
                  backgroundSize:'32px 32px',pointerEvents:'none'}}/>
                <StandardGlassCursor acc={acc} acc2={acc2} stageRef={stageRef}/>
              </div>
            )}
          </div>
        );
      }
    };
  }

  CURSORS_META.forEach(c=>blocks.push(makeCursorBlock(c)));

  /* inject cursor-ripple keyframe once */
  (function(){
    if(document.getElementById('cursor-block-kf')) return;
    const st=document.createElement('style'); st.id='cursor-block-kf';
    st.textContent='@keyframes cursor-ripple{0%{transform:scale(.1);opacity:1}100%{transform:scale(2.5);opacity:0}}';
    document.head.appendChild(st);
  })();

  /* ═══════════════════ SCROLLBARS ═══════════════════ */
  const SB_DEFS=[
    {id:'sb-minimal', name:'Minimal', desc:'Thin accent thumb, invisible track',
     css:(a)=>`scrollbar-width:thin;scrollbar-color:${a} transparent`},
    {id:'sb-glass',   name:'Glass',   desc:'Frosted translucent thumb + hairline border',
     css:(a,a2)=>`--sb-color:color-mix(in oklab,${a} 55%,transparent)`},
    {id:'sb-neon',    name:'Neon',    desc:'Glowing thumb with bloom shadow',
     css:(a)=>``},
    {id:'sb-chunky',  name:'Chunky',  desc:'Wide padded pill with clear border',
     css:(a)=>``},
    {id:'sb-rail',    name:'Rail',    desc:'Visible track rail + inset thumb',
     css:(a)=>``},
    {id:'sb-gradient',name:'Gradient',desc:'Accent → accent-2 gradient thumb',
     css:(a,a2)=>``},
    {id:'sb-pill',    name:'Pill',    desc:'Ultra-thin 6px rounded pill',
     css:(a)=>`scrollbar-width:thin;scrollbar-color:${a} rgba(0,0,0,.1)`},
    {id:'sb-inset',   name:'Inset',   desc:'Recessed dark track, flat accent thumb',
     css:(a)=>``},
  ];

  SB_DEFS.forEach((sb,idx)=>{
    const uid=`sb-prev-${sb.id}`;
    blocks.push({ id:`eN-sb-${sb.id}`, type:'navigation', subtype:'scrollbar', title:`Scrollbar — ${sb.name}`, w:1,
      Render:(s)=>{
        const acc=s.swatch[0], acc2=s.swatch[1]||acc;
        const [copied,setCopied]=React.useState(false);
        const copy=()=>{
          const css=`.scrollbar { scrollbar-width: thin; scrollbar-color: ${acc} transparent; }\n.scrollbar::-webkit-scrollbar { width: 10px; }\n.scrollbar::-webkit-scrollbar-thumb { background: ${acc}; border-radius: 999px; }`;
          try{navigator.clipboard.writeText(css)}catch{}
          setCopied(true); setTimeout(()=>setCopied(false),1500);
        };
        const styleId=`${uid}-${idx}`;
        const sbCss={
          'sb-minimal':`#${styleId}::-webkit-scrollbar{width:8px}#${styleId}::-webkit-scrollbar-track{background:transparent}#${styleId}::-webkit-scrollbar-thumb{background:${acc};border-radius:999px}`,
          'sb-glass':`#${styleId}::-webkit-scrollbar{width:12px}#${styleId}::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}#${styleId}::-webkit-scrollbar-thumb{background:color-mix(in oklab,${acc} 60%,transparent);border:1px solid rgba(255,255,255,.35);border-radius:999px}`,
          'sb-neon':`#${styleId}::-webkit-scrollbar{width:10px}#${styleId}::-webkit-scrollbar-track{background:rgba(0,0,0,.35);border-radius:999px}#${styleId}::-webkit-scrollbar-thumb{background:${acc};border-radius:999px;box-shadow:0 0 8px ${acc},0 0 16px ${acc}55}`,
          'sb-chunky':`#${styleId}::-webkit-scrollbar{width:16px}#${styleId}::-webkit-scrollbar-track{background:transparent}#${styleId}::-webkit-scrollbar-thumb{background:${acc};border-radius:999px;border:4px solid transparent;background-clip:padding-box}`,
          'sb-rail':`#${styleId}::-webkit-scrollbar{width:14px}#${styleId}::-webkit-scrollbar-track{background:rgba(128,128,128,.15);border-radius:999px;margin:2px}#${styleId}::-webkit-scrollbar-thumb{background:${acc};border-radius:999px;border:3px solid rgba(0,0,0,.2);background-clip:padding-box}`,
          'sb-gradient':`#${styleId}::-webkit-scrollbar{width:12px}#${styleId}::-webkit-scrollbar-track{background:rgba(128,128,128,.08);border-radius:999px}#${styleId}::-webkit-scrollbar-thumb{background:linear-gradient(${acc},${acc2});border-radius:999px}`,
          'sb-pill':`#${styleId}::-webkit-scrollbar{width:6px}#${styleId}::-webkit-scrollbar-track{background:rgba(128,128,128,.1);border-radius:999px}#${styleId}::-webkit-scrollbar-thumb{background:${acc};border-radius:999px}`,
          'sb-inset':`#${styleId}::-webkit-scrollbar{width:14px}#${styleId}::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border-radius:999px;box-shadow:inset 0 0 4px rgba(0,0,0,.5)}#${styleId}::-webkit-scrollbar-thumb{background:${acc};border-radius:999px;border:3px solid transparent;background-clip:padding-box}`,
        }[sb.id]||'';
        return (
          <div style={{width:'100%'}}>
            <style>{sbCss}</style>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10,gap:8}}>
              <div>
                <span className={cx('font-bold text-[13px]',s.cls.text||'')}>{sb.name}</span>
                <span className={cx('text-[11px] ml-1.5',s.cls.sub||'')} style={{opacity:.75}}>{sb.desc}</span>
              </div>
              <button onClick={copy} style={{fontSize:11,fontWeight:700,color:copied?'#fff':acc,
                background:copied?acc:`${acc}18`,border:`1px solid ${acc}40`,borderRadius:7,
                padding:'4px 10px',cursor:'pointer',transition:'all .2s',whiteSpace:'nowrap'}}>
                {copied?'Copied ✓':'Copy CSS'}
              </button>
            </div>
            <div id={styleId} className={cx(s.cls.surface||'')} style={{height:130,overflowY:'scroll',borderRadius:10,
              border:'1px solid rgba(128,128,128,.18)',padding:'10px 14px'}}>
              {Array.from({length:10}).map((_,i)=>(
                <p key={i} className={cx('text-[12px] leading-relaxed mb-2',s.cls.sub||'')} style={{margin:'0 0 8px'}}>
                  Scroll line {i+1} — thumb is <strong style={{color:acc}}>accent</strong>
                </p>
              ))}
            </div>
          </div>
        );
      }
    });
  });

  blocks.forEach(b=>window.BLOCKS.push(b));
})();