{/* выбор макета */}

Дизайн заметки

{Object.keys(NOTE_LAYOUTS).map(k => { const on = layout === k; return ( ); })}

{plain ? (

onChange([{ ...list[0], title:'', text:e.target.value }])} rows={4}
          placeholder="Например: стяжка полусухая М150, демпферная лента по периметру…"
          style={{ width:'100%', resize:'vertical', fontFamily:'inherit', fontSize:13.5, lineHeight:1.5, color:NB.ink, background:NB.fieldbg, border:'.5px solid '+NB.line, borderRadius:11, padding:'10px 13px', outline:'none' }} />
      ) : (
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {list.map((b, i) => (
            <BlockEditor key={b.id} block={b} index={i} total={list.length} layout={layout}
              onPatch={(p) => set(b.id, p)} onRemove={() => remove(b.id)} onMove={(d) => move(b.id, d)} />
          ))}
          <button onClick={add} style={{
            display:'inline-flex', alignItems:'center', gap:6, alignSelf:'flex-start', padding:'8px 14px', borderRadius:10,
            border:'1px dashed '+NB.line, background:'transparent', color:NB.accent, fontFamily:'inherit', fontSize:13, fontWeight:700, cursor:'pointer',
          }}>{nbIc.plus} Добавить блок</button>
        </div>
      )}
    </div>
  );
}

/* ============ ОТОБРАЖЕНИЕ (read) ============ */
function NoteContentView({ layout, blocks, text, onImage }) {
  // legacy: нет блоков → обычный текст
  if (!blocks || !blocks.length || layout === 'plain') {
    const t = (blocks && blocks.length) ? blocksToText(blocks) : text;
    return <div style={{ fontSize:13.5, color:'#3a3a3e', lineHeight:1.55, whiteSpace:'pre-wrap' }}>{t}</div>;
  }
  if (layout === 'form') return (
    <div style={{ display:'flex', flexDirection:'column', gap:1, border:'.5px solid '+NB.line, borderRadius:11, overflow:'hidden' }}>
      {blocks.map((b, i) => (
        <div key={b.id} style={{ display:'flex', gap:12, alignItems:'flex-start', padding:'9px 12px', background: i%2 ? '#fff' : NB.faint }}>
          <div style={{ width:150, flexShrink:0, fontSize:12.5, fontWeight:700, color:NB.ink }}>{b.title || '—'}</div>
          <div style={{ flex:1, minWidth:0, fontSize:13, color:'#3a3a3e', lineHeight:1.5, whiteSpace:'pre-wrap' }}>{b.text}</div>
          {b.image && <img src={b.image.url} alt="" onClick={()=>onImage&&onImage(b.image)} style={{ width:56, height:44, objectFit:'cover', borderRadius:7, border:'.5px solid '+NB.line, cursor:onImage?'zoom-in':'default', flexShrink:0 }} />}
        </div>
      ))}
    </div>
  );
  if (layout === 'checkup') return (
    <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
      {blocks.map((b, i) => (
        <div key={b.id} style={{ display:'flex', gap:11, alignItems:'flex-start' }}>
          <span style={{ width:22, height:22, flexShrink:0, borderRadius:'50%', background:'#fff0e6', color:NB.accent, fontSize:11.5, fontWeight:800, display:'grid', placeItems:'center', marginTop:1 }}>{i+1}</span>
          <div style={{ flex:1, minWidth:0, display:'flex', gap:12, alignItems:'flex-start', flexDirection: b.imageSide==='left'?'row-reverse':'row' }}>
            <div style={{ flex:1, minWidth:0 }}>
              {b.title && <div style={{ fontSize:13.5, fontWeight:700, color:NB.ink, marginBottom:2 }}>{b.title}</div>}
              {b.text && <div style={{ fontSize:13, color:'#3a3a3e', lineHeight:1.5, whiteSpace:'pre-wrap' }}>{b.text}</div>}
            </div>
            {b.image && <img src={b.image.url} alt="" onClick={()=>onImage&&onImage(b.image)} style={{ width:96, height:72, objectFit:'cover', borderRadius:9, border:'.5px solid '+NB.line, cursor:onImage?'zoom-in':'default', flexShrink:0 }} />}
          </div>
        </div>
      ))}
    </div>
  );
  // cards (default)
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
      {blocks.map(b => (
        <div key={b.id} style={{ display:'flex', gap:14, alignItems:'flex-start', flexDirection: b.imageSide==='left'?'row-reverse':'row', background:NB.faint, borderRadius:11, padding: b.image ? '11px 13px' : '0', border: b.image ? '.5px solid '+NB.line : 'none' }}>
          <div style={{ flex:1, minWidth:0 }}>
            {b.title && <div style={{ fontSize:14.5, fontWeight:700, color:NB.ink, marginBottom:3, letterSpacing:'-.01em' }}>{b.title}</div>}
            {b.text && <div style={{ fontSize:13, color:'#3a3a3e', lineHeight:1.55, whiteSpace:'pre-wrap' }}>{b.text}</div>}
          </div>
          {b.image && <img src={b.image.url} alt="" onClick={()=>onImage&&onImage(b.image)} style={{ width:128, height:96, objectFit:'cover', borderRadius:10, border:'.5px solid '+NB.line, cursor:onImage?'zoom-in':'default', flexShrink:0 }} />}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { NoteComposer, NoteContentView, NOTE_LAYOUTS, blankNoteBlock, blocksToText });