${i+1}${line}

` ).join(''); }; const filtered = (snippets || []).filter(s => (s.title || '').toLowerCase().includes(search.toLowerCase()) || (s.code || '').toLowerCase().includes(search.toLowerCase()) ); const activeItem = (snippets || []).find(s => s.id === activeId); return (

CodeCanvas

{isMultiplayer && (memberList || []).map(m => (

{ e.currentTarget.style.display = 'none'; }} /> ))}

setSearch(e.target.value)} placeholder="Search..." style={{ width: '100%', padding: 8, background: THEME.card, border: `1px solid ${THEME.border}`, color: 'white', borderRadius: 8, boxSizing: 'border-box' }} />

{(filtered || []).map(s => (

setActiveId(s.id)} style={{ background: THEME.card, marginBottom: 16, borderRadius: 8, border: `1px solid ${THEME.border}`, overflow: 'hidden' }}>

{s.lang} {s.title}

{(s.code || []).slice(0, 100)}...

))}

{(activeId || showModal) && (

{showModal ? 'New Snippet' : activeItem?.title} {showModal ? ( ) : ( )}

{showModal ? (

setNewSnippet({...newSnippet, title: e.target.value})} placeholder="Title" style={{ background: THEME.card, border: 'none', padding: 8, color: 'white', borderRadius: 4 }} />

setNewSnippet({...newSnippet, code: e.target.value})} placeholder="Code..."
                  style={{ flex: 1, background: THEME.card, border: 'none', padding: 8, color: 'white', borderRadius: 4, fontFamily: 'monospace' }}
                />
              </div>
            ) : (
              <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
                   {isEditing ? (
                     <textarea 
                       value={activeItem?.code} onChange={e => doUpdate(activeItem.id, e.target.value)}
                       style={{ width: '100%', height: '100%', background: 'transparent', color: THEME.text, border: 'none', outline: 'none', fontFamily: 'monospace' }}
                     />
                   ) : (
                     <div 
                       onClick={() => setIsEditing(true)}
                       dangerouslySetInnerHTML={{ __html: getHighlightedHtml(activeItem?.code) }} 
                     />
                   )}
                </div>
                {!isEditing && (
                  <button 
                    onClick={() => doCopy(activeItem.code, activeItem.id)}
                    style={{ margin: 16, padding: 12, background: copiedId === activeItem.id ? THEME.success : THEME.card, border: 'none', borderRadius: 8, color: 'white' }}
                  >
                    {copiedId === activeItem.id ? 'Copied!' : 'Copy Code'}
                  </button>
                )}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>