/* ProofMark Studio — shared components */

const { useState, useEffect, useMemo, useRef, useCallback } = React;

/* ---------- Tiny monochrome Glyph (no imported icon libs) ---------- */
const Glyph = ({ name, size = 16, stroke = 1.6 }) => {
  const s = size; const sw = stroke;
  const common = {
    width: s, height: s, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'search':  return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'cmd':     return <svg {...common}><path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z"/></svg>;
    case 'spark':   return <svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>;
    case 'arrow':   return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'check':   return <svg {...common}><path d="m5 12 5 5L20 7"/></svg>;
    case 'x':       return <svg {...common}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case 'dot':     return <svg {...common}><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>;
    case 'plus':    return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'chev':    return <svg {...common}><path d="m9 6 6 6-6 6"/></svg>;
    case 'chevD':   return <svg {...common}><path d="m6 9 6 6 6-6"/></svg>;
    case 'star':    return <svg {...common}><path d="m12 3 2.7 5.8 6.3.7-4.7 4.4 1.3 6.4L12 17.3 6.4 20.3l1.3-6.4L3 9.5l6.3-.7z"/></svg>;
    case 'pin':     return <svg {...common}><path d="M12 2v6M6 10h12l-2 4H8zM12 14v8"/></svg>;
    case 'bolt':    return <svg {...common}><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg>;
    case 'folder':  return <svg {...common}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>;
    case 'settings':return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.1.6.6 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    case 'home':    return <svg {...common}><path d="m3 12 9-8 9 8"/><path d="M5 10v10h14V10"/></svg>;
    case 'grid':    return <svg {...common}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>;
    case 'list':    return <svg {...common}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
    case 'inbox':   return <svg {...common}><path d="M3 13h5l2 3h4l2-3h5"/><path d="M5 5h14l2 8v6H3v-6z"/></svg>;
    case 'clock':   return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'pdf':     return <svg {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/><path d="M9 13h1.5a1.5 1.5 0 0 1 0 3H9v-3zM13 13v3M13 13h2M13 14.5h1.5M17 13v3M17 13h2"/></svg>;
    case 'text':    return <svg {...common}><path d="M4 7V5h16v2M9 5v14M15 19H9"/></svg>;
    case 'merge':   return <svg {...common}><path d="M6 3v8a4 4 0 0 0 4 4h8M18 3v8a4 4 0 0 1-4 4H6"/><path d="M4 21h16"/></svg>;
    case 'split':   return <svg {...common}><path d="M12 3v6M9 12l3-3 3 3M6 21V12M18 21V12"/></svg>;
    case 'extract': return <svg {...common}><rect x="4" y="3" width="12" height="16" rx="1.5"/><path d="M19 7v12a2 2 0 0 1-2 2H9"/></svg>;
    case 'compress':return <svg {...common}><path d="M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4M9 12h6"/></svg>;
    case 'rotate': return <svg {...common}><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></svg>;
    case 'minus':   return <svg {...common}><path d="M5 12h14"/></svg>;
    case 'pencil':  return <svg {...common}><path d="m4 20 4-1 10-10-3-3L5 16z"/></svg>;
    case 'pen':     return <svg {...common}><path d="M4 20h4l10-10-4-4L4 16z"/><path d="M14 6l4 4"/></svg>;
    case 'book':    return <svg {...common}><path d="M4 4h7a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H4zM20 4h-7"/></svg>;
    case 'hash':    return <svg {...common}><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/></svg>;
    case 'crop':    return <svg {...common}><path d="M6 2v16h16M2 6h16v16"/></svg>;
    case 'square':  return <svg {...common}><rect x="4" y="4" width="16" height="16" rx="1"/></svg>;
    case 'layers':  return <svg {...common}><path d="m12 3 9 5-9 5-9-5zM3 13l9 5 9-5M3 18l9 5 9-5"/></svg>;
    case 'form':    return <svg {...common}><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 9h8M8 13h5M8 17h3"/></svg>;
    case 'docx':    return <svg {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/><path d="M9 12l1 5 1-3 1 3 1-5"/></svg>;
    case 'xlsx':    return <svg {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/><path d="m9 13 4 4M13 13l-4 4"/></svg>;
    case 'pptx':    return <svg {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/><path d="M10 11v6M10 11h2.5a1.5 1.5 0 0 1 0 3H10"/></svg>;
    case 'img':     return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m21 15-5-5-9 9"/></svg>;
    case 'txt':     return <svg {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/><path d="M9 13h6M9 16h6M9 10h3"/></svg>;
    case 'md':      return <svg {...common}><rect x="3" y="6" width="18" height="12" rx="1.5"/><path d="M7 15v-6l2 3 2-3v6M15 9v6M15 15l-2-2M15 15l2-2"/></svg>;
    case 'html':    return <svg {...common}><path d="m8 10-3 2 3 2M16 10l3 2-3 2M14 7l-4 10"/></svg>;
    case 'ocr':     return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 9v6M11 9v6M15 9v6M19 9v6"/></svg>;
    case 'sig':     return <svg {...common}><path d="M3 18c3 0 4-10 7-10s2 8 5 8 2-4 4-4"/><path d="M3 21h18"/></svg>;
    case 'send':    return <svg {...common}><path d="m21 3-9 18-2-8-8-2z"/></svg>;
    case 'unlock':  return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0"/></svg>;
    case 'lock':    return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case 'aa':      return <svg {...common}><path d="M4 20 9 6l5 14M5.8 16h6.4M14 20l4-10 4 10M15.3 17h5.4"/></svg>;
    case 'space':   return <svg {...common}><path d="M4 10v4h16v-4"/></svg>;
    case 'quote':   return <svg {...common}><path d="M6 10c0-2 1-3 3-3M6 17l3-7v7zM14 10c0-2 1-3 3-3M14 17l3-7v7z"/></svg>;
    case 'report':  return <svg {...common}><path d="M5 3h11l3 3v15H5z"/><path d="M9 9h6M9 13h6M9 17h4"/></svg>;
    case 'ai':      return <svg {...common}><path d="M12 2v4M12 18v4M4 12H2M22 12h-2M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/><circle cx="12" cy="12" r="4"/></svg>;
    case 'chat':    return <svg {...common}><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-6l-4 4v-4H6a2 2 0 0 1-2-2z"/></svg>;
    case 'sum':     return <svg {...common}><path d="M5 4h14L11 12l8 8H5l6-8z"/></svg>;
    case 'globe':   return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18"/></svg>;
    case 'stack':   return <svg {...common}><rect x="3" y="4" width="18" height="4" rx="1"/><rect x="3" y="10" width="18" height="4" rx="1"/><rect x="3" y="16" width="18" height="4" rx="1"/></svg>;
    case 'box':     return <svg {...common}><path d="m3 7 9-4 9 4-9 4z"/><path d="M3 7v10l9 4 9-4V7M12 11v10"/></svg>;
    case 'ruler':   return <svg {...common}><rect x="3" y="8" width="18" height="8" rx="1"/><path d="M7 8v3M11 8v4M15 8v3M19 8v4"/></svg>;
    case 'feed':    return <svg {...common}><path d="M4 4a16 16 0 0 1 16 16M4 10a10 10 0 0 1 10 10M5 18a2 2 0 1 0 0 0"/></svg>;
    case 'logo':    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
        <rect x="1" y="1" width="22" height="22" rx="6" stroke="currentColor" strokeWidth="1.4"/>
        <circle cx="12" cy="12" r="3" fill="currentColor"/>
        <circle cx="12" cy="12" r="7" stroke="currentColor" strokeWidth="1.1" strokeDasharray="1.8 2.2" opacity=".7"/>
      </svg>);
    default: return <svg {...common}><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>;
  }
};

/* ---------- Status pill ---------- */
const StatusPill = ({ status, size='sm', paused=false }) => {
  const map = {
    live:    { label:'Live',    color:'var(--live)' },
    beta:    { label:'Beta',    color:'var(--beta)' },
    planned: { label:'Planned', color:'var(--planned)' },
    paused:  { label:'Paused',  color:'var(--beta)' },
  };
  // Flag-downgraded live tools carry paused=true so the pill reads "Paused"
  // instead of collapsing silently into "Planned".
  const key = paused ? 'paused' : status;
  const s = map[key] || map.planned;
  const pad = size === 'sm' ? '2px 8px' : '4px 10px';
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding: pad, borderRadius:999,
      fontSize: size === 'sm' ? 10.5 : 11.5, fontWeight:600,
      letterSpacing:'.02em', textTransform:'uppercase',
      color:'var(--text-muted)',
      border:'1px solid var(--border)',
      background:'var(--bg-elev-2)',
      fontFamily:'var(--font-mono)',
    }}>
      <span style={{
        width:6, height:6, borderRadius:999, background:s.color,
        boxShadow: status === 'live' ? `0 0 0 0 ${s.color}` : 'none',
        animation: status === 'live' ? 'pulseDot 2.2s infinite' : 'none',
      }}/>
      {s.label}
    </span>
  );
};

/* ---------- Keyboard shortcut ---------- */
const Kbd = ({ children }) => (
  <kbd style={{
    fontFamily:'var(--font-mono)', fontSize:10.5, fontWeight:500,
    padding:'2px 6px', borderRadius:5,
    background:'var(--bg-elev-2)', border:'1px solid var(--border)',
    color:'var(--text-muted)',
    boxShadow:'0 1px 0 var(--border)',
  }}>{children}</kbd>
);

/* ---------- Sidebar ---------- */
const Sidebar = ({ active, onSelect, onOpenPalette, density, isMobile, open, onClose, pinnedSlugs }) => {
  const items = [
    { id:'home',     label:'Home',      g:'home',   kbd:'H' },
    { id:'tools',    label:'All tools', g:'grid',   kbd:'G' },
    { id:'pinned',   label:'Pinned',    g:'pin',    kbd:'P' },
    { id:'map',      label:'Platform',  g:'layers', kbd:'M' },
  ];
  const bottom = [
    { id:'settings', label:'Settings',  g:'settings' },
  ];

  const pinnedTools = __pmVisible(window.PM_TOOLS).filter(t => pinnedSlugs.includes(t.slug));

  const handleNav = (id) => {
    onSelect(id);
    if (isMobile) onClose();
  };

  return (
    <React.Fragment>
      {isMobile && open && (
        <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:49, background:'rgba(0,0,0,.5)' }}/>
      )}
      <aside className={'pm-sidebar' + (open ? ' open' : '')} style={{
        width: 232, flexShrink:0,
        borderRight:'1px solid var(--border)',
        background:'var(--bg)',
        height:'100vh',
        position: isMobile ? 'fixed' : 'sticky',
        top:0, left:0, zIndex: isMobile ? 50 : 'auto',
        display:'flex', flexDirection:'column',
        padding:'14px 12px',
        ...(isMobile ? {} : { transform:'none' }),
      }}>
        {/* Brand */}
        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'6px 8px 14px 8px', borderBottom:'1px solid var(--border)', marginBottom:10 }}>
          <div style={{
            width:30, height:30, borderRadius:8,
            background:'var(--accent)', color:'var(--accent-ink)',
            display:'grid', placeItems:'center',
          }}>
            <Glyph name="logo" size={18}/>
          </div>
          <div style={{ lineHeight:1.1 }}>
            <div style={{ fontWeight:600, fontSize:13.5, letterSpacing:'-.01em' }}>ProofMark</div>
            <div style={{ fontSize:10.5, color:'var(--text-muted)', fontFamily:'var(--font-mono)', letterSpacing:'.04em', textTransform:'uppercase' }}>Studio · v0.3</div>
          </div>
          {isMobile
            ? <button onClick={onClose} style={{ marginLeft:'auto', padding:6, borderRadius:7, background:'transparent', border:'1px solid var(--border)', color:'var(--text-muted)', cursor:'pointer', display:'grid', placeItems:'center' }}><Glyph name="x" size={14}/></button>
            : <div style={{ marginLeft:'auto' }}><Kbd>⌘</Kbd></div>
          }
        </div>

        {/* Search trigger */}
        <button onClick={() => { onOpenPalette(); if (isMobile) onClose(); }} style={{
          display:'flex', alignItems:'center', gap:10,
          width:'100%', padding:'9px 10px', marginBottom:16,
          background:'var(--bg-elev)', border:'1px solid var(--border)', borderRadius:10,
          color:'var(--text-muted)', cursor:'pointer',
          fontSize:12.5, textAlign:'left', transition:'border-color .15s',
        }}
        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-strong)'}
        onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}
        >
          <Glyph name="search" size={14}/>
          <span>Search tools…</span>
          <span style={{ marginLeft:'auto', display:'flex', gap:3 }}>
            <Kbd>⌘</Kbd><Kbd>K</Kbd>
          </span>
        </button>

        {/* Nav */}
        <nav style={{ display:'flex', flexDirection:'column', gap:1 }}>
          <div style={{ fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-dim)', fontWeight:600, padding:'8px 10px 6px', fontFamily:'var(--font-mono)' }}>Workspace</div>
          {items.map(it => (
            <button key={it.id} onClick={() => handleNav(it.id)} style={{
              display:'flex', alignItems:'center', gap:10,
              width:'100%', padding:'8px 10px', borderRadius:8,
              background: active === it.id ? 'var(--bg-elev)' : 'transparent',
              border:'1px solid ' + (active === it.id ? 'var(--border)' : 'transparent'),
              color: active === it.id ? 'var(--text)' : 'var(--text-muted)',
              fontSize:13, fontWeight: active===it.id ? 500 : 400,
              cursor:'pointer', textAlign:'left', transition:'background .12s, color .12s',
            }}
            onMouseEnter={e => { if(active!==it.id){ e.currentTarget.style.color='var(--text)'; }}}
            onMouseLeave={e => { if(active!==it.id){ e.currentTarget.style.color='var(--text-muted)'; }}}
            >
              <Glyph name={it.g} size={15}/>
              <span>{it.label}</span>
              <span style={{ marginLeft:'auto' }}><Kbd>{it.kbd}</Kbd></span>
            </button>
          ))}
        </nav>

        <div style={{ marginTop:22 }}>
          <div style={{ fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-dim)', fontWeight:600, padding:'8px 10px 6px', fontFamily:'var(--font-mono)' }}>Pinned tools</div>
          {pinnedTools.length === 0 ? (
            <div style={{ padding:'8px 10px', fontSize:11.5, color:'var(--text-dim)' }}>No pinned tools</div>
          ) : pinnedTools.map(t => (
            <button key={t.slug} onClick={() => handleNav('tool:'+t.slug)} style={{
              display:'flex', alignItems:'center', gap:10,
              width:'100%', padding:'7px 10px', borderRadius:8,
              background:'transparent', border:'1px solid transparent',
              color:'var(--text-muted)', fontSize:12.5, cursor:'pointer', textAlign:'left',
            }}
            onMouseEnter={e => { e.currentTarget.style.background='var(--bg-elev)'; e.currentTarget.style.color='var(--text)';}}
            onMouseLeave={e => { e.currentTarget.style.background='transparent'; e.currentTarget.style.color='var(--text-muted)';}}
            >
              <Glyph name={t.icon} size={14}/>
              <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }} title={t.title}>{t.title}</span>
              {t.status === 'live' && (
                <span style={{ marginLeft:'auto', width:6, height:6, borderRadius:99, background:'var(--live)' }}/>
              )}
            </button>
          ))}
        </div>

        <div style={{ marginTop:'auto', paddingTop:12, borderTop:'1px solid var(--border)' }}>
          {bottom.map(it => (
            <button key={it.id} onClick={() => handleNav(it.id)} style={{
              display:'flex', alignItems:'center', gap:10,
              width:'100%', padding:'8px 10px', borderRadius:8,
              background:'transparent', border:'1px solid transparent',
              color:'var(--text-muted)', fontSize:13, cursor:'pointer', textAlign:'left',
            }}>
              <Glyph name={it.g} size={15}/> {it.label}
            </button>
          ))}
          <div style={{
            display:'flex', alignItems:'center', gap:10,
            padding:'10px', marginTop:6, borderRadius:10,
            background:'var(--bg-elev)', border:'1px solid var(--border)',
          }}>
            <div style={{
              width:28, height:28, borderRadius:999,
              background:'var(--accent)',
              color:'var(--accent-ink)', display:'grid', placeItems:'center',
            }}>
              <Glyph name="logo" size={14}/>
            </div>
            <div style={{ lineHeight:1.2, fontSize:12 }}>
              <div style={{ fontWeight:500 }}>My workspace</div>
              <div style={{ color:'var(--text-muted)', fontSize:10.5, fontFamily:'var(--font-mono)' }}>Local · Free</div>
            </div>
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
};

/* ---------- Topbar ---------- */
const Topbar = ({ onOpenPalette, onOpenTweaks, breadcrumb, isMobile, onToggleSidebar }) => (
  <div style={{
    display:'flex', alignItems:'center', gap: isMobile ? 10 : 14,
    padding: isMobile ? '12px 16px' : '14px 28px',
    borderBottom:'1px solid var(--border)',
    background:'color-mix(in oklab, var(--bg) 80%, transparent)',
    backdropFilter:'blur(14px)',
    position:'sticky', top:0, zIndex:20,
  }}>
    {isMobile && (
      <button onClick={onToggleSidebar} style={{
        padding:8, borderRadius:9,
        background:'var(--bg-elev)', border:'1px solid var(--border)',
        color:'var(--text-muted)', cursor:'pointer', display:'grid', placeItems:'center', flexShrink:0,
      }}>
        <Glyph name="list" size={16}/>
      </button>
    )}
    <div style={{ display:'flex', alignItems:'center', gap:10, fontSize:13, color:'var(--text-muted)', minWidth:0 }}>
      {breadcrumb.map((b,i) => (
        <React.Fragment key={i}>
          {i>0 && <span style={{ color:'var(--text-dim)' }}>/</span>}
          <span style={{ color: i===breadcrumb.length-1 ? 'var(--text)' : 'var(--text-muted)', fontWeight: i===breadcrumb.length-1 ? 500 : 400 }}>{b}</span>
        </React.Fragment>
      ))}
    </div>
    <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:10, flexShrink:0 }}>
      {!isMobile && (
        <div style={{
          display:'flex', alignItems:'center', gap:8,
          padding:'6px 10px', borderRadius:999,
          background:'var(--bg-elev)', border:'1px solid var(--border)',
          fontSize:11.5, color:'var(--text-muted)', fontFamily:'var(--font-mono)',
        }}>
          <span style={{ width:6, height:6, borderRadius:99, background:'var(--live)', animation:'pulseDot 2.2s infinite' }}/>
          All systems operational
        </div>
      )}
      <button onClick={onOpenPalette} style={{
        display:'flex', alignItems:'center', gap:8,
        padding:'7px 11px', borderRadius:10,
        background:'var(--bg-elev)', border:'1px solid var(--border)',
        color:'var(--text-muted)', fontSize:12.5, cursor:'pointer',
      }}>
        <Glyph name="search" size={13}/>
        {!isMobile && <span>Jump to…</span>}
        {!isMobile && <Kbd>⌘K</Kbd>}
      </button>
      <button onClick={onOpenTweaks} title="Appearance" style={{
        padding:'8px', borderRadius:9,
        background:'var(--bg-elev)', border:'1px solid var(--border)',
        color:'var(--text-muted)', cursor:'pointer', display:'grid', placeItems:'center',
      }}>
        <Glyph name="spark" size={14}/>
      </button>
    </div>
  </div>
);

Object.assign(window, { Glyph, StatusPill, Kbd, Sidebar, Topbar });