Содержание

setContent({ kicker:'', title:'', subtitle:'' })}>Очистить

Надпись над заголовком {content.kicker.length}/40

Заголовок {content.title.length}/120

</div>
        <div className="field">
          <div className="field-label">
            <span>Подпись под заголовком</span>
            <span className="val">{content.subtitle.length}/160</span>
          </div>
          <textarea className="textarea" value={content.subtitle} onChange={ch('subtitle')}
            placeholder="Как маленькие студии меняют большой рынок"
            maxLength={160} rows={2}/>
        </div>
      </div>

<div className="sec">
        <div className="sec-hd">
          <h3>Украшения этого стиля</h3>
          <span className="sec-act" onClick={() => setDeco({...DECO_DEFAULTS})}>По умолчанию</span>
        </div>
        {usedFields.length === 0 ? (
          <p style={{fontSize:11.5, color:'var(--text-3)', margin:0}}>
            В этом стиле украшений нет.
          </p>
        ) : usedFields.map(k => {
          const meta = DECO_LABELS[k];
          return (
            <div className="field" key={k}>
              <div className="field-label">
                <span>{meta.label}</span>
                <span className="val">{(deco[k] || '').length}/{meta.max}</span>
              </div>
              <input className="input" value={deco[k] || ''} onChange={chDeco(k)}
                placeholder={meta.ph} maxLength={meta.max}/>
            </div>
          );
        })}
      </div>
    </>
  );
}

/* ============================================================
   Tab: Typography — per-field controls
   ============================================================ */
const FIELD_KEYS = [
  { key:'kicker',   label:'Надпись',  short:'К', desc:'Над заголовком' },
  { key:'title',    label:'Заголовок', short:'З', desc:'Основной текст' },
  { key:'subtitle', label:'Подпись',  short:'П', desc:'Под заголовком' },
];

return (
    <div className="field-card">
      <div className="field-card-hd" onClick={() => setOpen(!open)}>
        <div className="lbl">
          <span className="dotty">{short}</span>
          <span>{label}</span>
          <span style={{color:'var(--text-3)', fontWeight:500, fontSize:11.5}}>· {FONT_LABEL[cur.font]} · {cur.size.toFixed(1)}</span>
        </div>
        <Icon name={open ? 'chevron-d' : 'chevron'} sm/>
      </div>
      {open && (
        <div className="field-card-body">
          <div className="field">
            <div className="field-label"><span>Шрифт</span></div>
            <select className="select" value={cur.font} onChange={e => set({font: e.target.value})}>
              {Object.keys(FONT_LABEL).map(f => <option key={f} value={f}>{FONT_LABEL[f]}</option>)}
            </select>
          </div>
          <div className="row-2">
            <Slider label="Размер" value={cur.size} onChange={v => set({size: v})}
              min={1.5} max={22} step={0.1} suffix="" />
            <div className="field">
              <div className="field-label"><span>Жирность</span><span className="val">{cur.weight}</span></div>
              <select className="select" value={cur.weight} onChange={e => set({weight: parseInt(e.target.value)})}>
                {[200,300,400,500,600,700,800,900].map(w => <option key={w} value={w}>{w}</option>)}
              </select>
            </div>
          </div>
          <Slider label="Высота строки" value={cur.lh} onChange={v => set({lh: v})}
            min={0.8} max={1.8} step={0.01} suffix="" />
          <Slider label="Межбуквенный интервал" value={cur.tracking || 0}
            onChange={v => set({tracking: v})} min={-0.05} max={0.5} step={0.005} suffix="em" />
          <div className="field">
            <div className="field-label"><span>Регистр</span></div>
            <Seg value={cur.case || 'normal'} onChange={v => set({case: v})}
              options={[
                {value:'normal', label:'Aa'},
                {value:'upper', label:'AA'},
                {value:'lower', label:'aa'},
              ]}/>
          </div>
          <div className="field">
            <div className="field-label"><span>Цвет текста</span><code style={{fontSize:10.5,color:'var(--text-3)',fontFamily:'JetBrains Mono, monospace'}}>{cur.color}</code></div>
            <ColorChips value={cur.color} onChange={v => set({color: v})} palette={TEXT_COLOR_PALETTE}/>
          </div>
        </div>
      )}
    </div>
  );
}

function TabTypography({ presetId, overrides, setOverrides, layoutOverride, setLayoutOverride }) {
  const preset = PRESETS[presetId];
  return (
    <>
      <div className="sec">
        <div className="sec-hd">
          <h3>Расположение блока</h3>
          <span className="sec-act" onClick={() => setLayoutOverride({})}>Сбросить</span>
        </div>
        <div className="field">
          <div className="field-label"><span>По вертикали</span></div>
          <Seg value={layoutOverride.position || preset.layout.position}
            onChange={v => setLayoutOverride({...layoutOverride, position: v})}
            options={[
              {value:'top', icon:<Icon name="pos-t"/>, title:'Сверху'},
              {value:'center', icon:<Icon name="pos-c"/>, title:'По центру'},
              {value:'bottom', icon:<Icon name="pos-b"/>, title:'Снизу'},
            ]}/>
        </div>
        <div className="field">
          <div className="field-label"><span>Выравнивание текста</span></div>
          <Seg value={layoutOverride.align || preset.layout.align}
            onChange={v => setLayoutOverride({...layoutOverride, align: v})}
            options={[
              {value:'left', icon:<Icon name="align-l"/>, title:'По левому краю'},
              {value:'center', icon:<Icon name="align-c"/>, title:'По центру'},
              {value:'right', icon:<Icon name="align-r"/>, title:'По правому краю'},
            ]}/>
        </div>
      </div>
      <div className="sec">
        <div className="sec-hd">
          <h3>Настройки полей</h3>
          <span className="sec-act" onClick={() => setOverrides({})}>Сбросить</span>
        </div>
        {FIELD_KEYS.map(f => (
          <FieldCard key={f.key} k={f.key} label={f.label} desc={f.desc} short={f.short}
            preset={preset[f.key]}
            override={overrides[f.key]}
            setOverride={(v) => setOverrides({ ...overrides, [f.key]: v })}/>
        ))}
      </div>
    </>
  );
}

/* ============================================================
   Tab: Background
   ============================================================ */
const BG_MODES = [
  { id:'solid',    label:'Заливка',  icon:'palette' },
  { id:'gradient', label:'Градиент', icon:'gradient' },
  { id:'blocks',   label:'Блоки',    icon:'blocks' },
  { id:'photo',    label:'Фото',     icon:'image' },
  { id:'search',   label:'Сток',     icon:'search' },
  { id:'pattern',  label:'Паттерн',  icon:'pattern' },
];

const PATTERNS = ['dots','grid','lines'];

function TabBackground({ bg, setBg, presetId }) {
  const preset = PRESETS[presetId];
  const eff = bg || preset.bg;
  const mode = (bg && bg.mode === 'search') ? 'search' : (eff.mode || 'solid');

return (
    <>
      <div className="sec">
        <div className="sec-hd"><h3>Тип фона</h3>{bg && <span className="sec-act" onClick={() => setBg(null)}>К пресету</span>}</div>
        <div className="bg-modes">
          {BG_MODES.map(m => (
            <button key={m.id} className="bg-mode" aria-pressed={mode === m.id}
              onClick={() => switchTo(m.id)}>
              <Icon name={m.icon}/>
              <span>{m.label}</span>
            </button>
          ))}
        </div>

{mode === 'solid' && (
          <div className="field">
            <div className="field-label"><span>Цвет</span><code style={{fontSize:10.5,color:'var(--text-3)',fontFamily:'JetBrains Mono, monospace'}}>{eff.color}</code></div>
            <ColorChips value={eff.color} onChange={c => setBg({mode:'solid', color: c})}/>
          </div>
        )}

{mode === 'gradient' && (
          <>
            <div className="field">
              <div className="field-label"><span>Стартовый цвет</span></div>
              <div className="color-row">
                <div className="swatch" style={{background:eff.a}}/>
                <code>{eff.a}</code>
              </div>
              <div style={{height:6}}/>
              <ColorChips value={eff.a} onChange={c => setBg({...eff, a:c})}/>
            </div>
            <div className="field">
              <div className="field-label"><span>Конечный цвет</span></div>
              <div className="color-row">
                <div className="swatch" style={{background:eff.b}}/>
                <code>{eff.b}</code>
              </div>
              <div style={{height:6}}/>
              <ColorChips value={eff.b} onChange={c => setBg({...eff, b:c})}/>
            </div>
            <Slider label="Угол" value={eff.angle||135} onChange={v => setBg({...eff, angle: v})}
              min={0} max={360} step={1} suffix="°" />
          </>
        )}

{mode === 'photo' && (
          <PhotoUpload eff={eff} setBg={setBg}/>
        )}

{mode === 'search' && (
          <UnsplashSearch eff={eff} setBg={setBg}/>
        )}

{mode === 'pattern' && (
          <>
            <div className="field">
              <div className="field-label"><span>Узор</span></div>
              <div className="pattern-grid">
                {PATTERNS.map(p => (
                  <button key={p} className="pattern-card" aria-pressed={eff.pattern === p}
                    onClick={() => setBg({...eff, pattern: p})}
                    style={{
                      background:
                        p === 'dots' ? `${eff.bg} radial-gradient(circle at 1px 1px, ${eff.fg} 1px, transparent 0) 0 0/8px 8px` :
                        p === 'grid' ? `${eff.bg} linear-gradient(${eff.fg} 1px, transparent 1px) 0 0/8px 8px, linear-gradient(90deg, ${eff.fg} 1px, transparent 1px) 0 0/8px 8px` :
                        `${eff.bg} repeating-linear-gradient(45deg, ${eff.fg} 0 1px, transparent 1px 6px)`
                    }}/>
                ))}
              </div>
            </div>
            <Slider label="Масштаб" value={eff.scale||14} onChange={v => setBg({...eff, scale:v})}
              min={4} max={40} step={1} suffix="px"/>
            <div className="field">
              <div className="field-label"><span>Цвет фона</span></div>
              <ColorChips value={eff.bg} onChange={c => setBg({...eff, bg: c})}/>
            </div>
            <div className="field">
              <div className="field-label"><span>Цвет узора</span></div>
              <ColorChips value={eff.fg} onChange={c => setBg({...eff, fg: c})} palette={TEXT_COLOR_PALETTE}/>
            </div>
          </>
        )}

{mode === 'blocks' && (
          <BlocksEditor eff={eff} setBg={setBg}/>
        )}
      </div>
    </>
  );
}

/* ============================================================
   Tab: Templates
   ============================================================ */
const SAVED_TEMPLATES = [
  { id:'t1', name:'Дизайн-вестник', date:'вчера',
    presetId:'magazine', content:{kicker:'ВЫПУСК №24', title:'Тихая революция в дизайне', subtitle:'Как маленькие студии меняют рынок'} },
  { id:'t2', name:'Серия эссе', date:'2 дня',
    presetId:'book', content:{kicker:'ESSAYS', title:'О тишине', subtitle:'Заметки на полях недели'} },
  { id:'t3', name:'Tech Weekly', date:'3 дня',
    presetId:'tech', content:{kicker:'release · 04.06', title:'Линейный\nи быстрый', subtitle:'Новый редактор уже доступен в beta'} },
  { id:'t4', name:'Lookbook', date:'неделю',
    presetId:'gradient', content:{kicker:'LOOKBOOK', title:'Мягкий май', subtitle:'Палитра, которая возвращает дыхание'} },
  { id:'t5', name:'Editorial', date:'2 нед.',
    presetId:'editorial', content:{kicker:'ESSAY', title:'Anatomy of\na Quiet Year', subtitle:'на полях 2026 года'} },
  { id:'t6', name:'Punch!', date:'месяц',
    presetId:'brutalist', content:{kicker:'NEW DROP', title:'BIG NEWS', subtitle:'и громче не будет'} },
];

function TabTemplates({ apply, content, presetId }) {
  return (
    <>
      <div className="sec">
        <div className="sec-hd">
          <h3>Сохранённые шаблоны</h3>
          <span className="sec-act">+ Сохранить текущий</span>
        </div>
        <div className="tmpl-grid">
          {SAVED_TEMPLATES.map(t => (
            <div key={t.id} className="tmpl-card" onClick={() => apply(t)}>
              <div className="tmpl-thumb">
                <CoverPreview presetId={t.presetId} content={t.content} aspect="1:1" hideDeco/>
              </div>
              <div className="tmpl-meta">
                <span className="name">{t.name}</span>
                <span className="date">{t.date}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

/* ============================================================
   Blocks constructor — add / select / drag / recolor / delete
   ============================================================ */
const BLOCK_PALETTE = [
  '#5552E0','#F2C84B','#E2231A','#16A34A','#161616','#FFFFFF',
  '#FFB1A5','#9D9AFF','#1F3D2E','#C9B66E','#3B5BDB','#8B89F7',
];

function BlocksEditor({ eff, setBg }) {
  const shapes = eff.shapes || [];
  const [sel, setSel] = useState(0);
  const stageRef = useRef(null);
  // refs so the once-attached drag listener always reads the latest data
  const dragRef = useRef(null);
  const shapesRef = useRef(shapes);
  const effRef = useRef(eff);
  const setBgRef = useRef(setBg);
  shapesRef.current = shapes;
  effRef.current = eff;
  setBgRef.current = setBg;

const onDown = (i) => (e) => {
    e.stopPropagation();
    setSel(i);
    const rect = stageRef.current.getBoundingClientRect();
    const s = shapes[i];
    const sxPx = (s.x / 100) * rect.width;
    const syPx = (s.y / 100) * rect.height;
    dragRef.current = { i, dx: e.clientX - sxPx, dy: e.clientY - syPx };
  };

useEffect(() => {
    const onMove = (e) => {
      const d = dragRef.current;
      if (!d) return;
      const rect = stageRef.current.getBoundingClientRect();
      const s = shapesRef.current[d.i];
      if (!s) return;
      let x = ((e.clientX - d.dx) / rect.width) * 100;
      let y = ((e.clientY - d.dy) / rect.height) * 100;
      x = Math.max(0, Math.min(100 - s.w, x));
      y = Math.max(0, Math.min(100 - s.h, y));
      const next = shapesRef.current.slice();
      next[d.i] = { ...s, x, y };
      setBgRef.current({ ...effRef.current, shapes: next });
    };
    const onUp = () => { dragRef.current = null; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, []);

const cur = shapes[sel];

return (
    <>
      <div className="field">
        <div className="field-label">
          <span>Конструктор фигур</span>
          <span className="val">{shapes.length} шт.</span>
        </div>
        <div className="blocks-mini" ref={stageRef} style={{background: eff.bg}}>
          {shapes.map((s, i) => (
            <div key={i}
              className={'lay' + (i === sel ? ' sel' : '')}
              onMouseDown={onDown(i)}
              style={{
                left:`${s.x}%`, top:`${s.y}%`, width:`${s.w}%`, height:`${s.h}%`,
                background:s.color, borderRadius: s.r === 'circle' ? '50%' : (s.r||0)+'px',
                transform: s.rot ? `rotate(${s.rot}deg)` : 'none',
                userSelect:'none',
              }}/>
          ))}
        </div>
        <div className="blocks-pal">
          <button onClick={() => addShape('circle')}><Icon name="plus" sm/> Круг</button>
          <button onClick={() => addShape('rect')}><Icon name="plus" sm/> Прямоугольник</button>
          <button onClick={() => cur && removeShape(sel)}
            disabled={!cur} style={{marginLeft:'auto', opacity: cur ? 1 : 0.4}}>
            Удалить
          </button>
        </div>
      </div>

{cur && (
        <>
          <div className="field">
            <div className="field-label"><span>Цвет фигуры</span></div>
            <ColorChips value={cur.color} onChange={c => updateShape(sel, {color: c})}/>
          </div>
          <Slider label="Ширина" value={cur.w} onChange={v => updateShape(sel, {w: v})}
            min={5} max={100} step={1} suffix="%"/>
          <Slider label="Высота" value={cur.h} onChange={v => updateShape(sel, {h: v})}
            min={5} max={100} step={1} suffix="%"/>
          <Slider label="Поворот" value={cur.rot||0} onChange={v => updateShape(sel, {rot: v})}
            min={-180} max={180} step={1} suffix="°"/>
          {cur.r !== 'circle' && (
            <Slider label="Скругление" value={cur.r||0} onChange={v => updateShape(sel, {r: v})}
              min={0} max={50} step={1} suffix="px"/>
          )}
        </>
      )}

<div className="field">
        <div className="field-label"><span>Цвет фона</span></div>
        <ColorChips value={eff.bg} onChange={c => setBg({...eff, bg: c})}/>
      </div>
    </>
  );
}

/* ============================================================
   Photo upload (file or drag-drop, plus the picsum seed swatches)
   ============================================================ */
function PhotoUpload({ eff, setBg }) {
  const inputRef = React.useRef(null);

const onFile = (file) => {
    if (!file || !file.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = () => setBg({ mode:'photo', url: reader.result });
    reader.readAsDataURL(file);
  };

return (
    <>
      <div className="dropzone"
        onDragOver={e => e.preventDefault()}
        onDrop={e => { e.preventDefault(); onFile(e.dataTransfer.files?.[0]); }}>
        <div><b>Перетащите фото</b> или</div>
        <button className="btn outline" style={{marginTop:8}} onClick={() => inputRef.current?.click()}>
          <Icon name="upload"/> Выбрать файл
        </button>
        <input ref={inputRef} type="file" accept="image/*" style={{display:'none'}}
          onChange={e => onFile(e.target.files?.[0])}/>
        <div className="hint">JPG / PNG / WebP, до 10 МБ</div>
      </div>
      <div style={{height:10}}/>
      <div className="row-3">
        {['beauticard-1','beauticard-2','beauticard-3'].map(seed => (
          <button key={seed} className="preset-card"
            aria-pressed={eff.seed === seed && !eff.url}
            onClick={() => setBg({mode:'photo', seed})}
            style={{padding:0}}>
            <div style={{
              aspectRatio:'1', backgroundImage:`url(https://picsum.photos/seed/${seed}/240/240)`,
              backgroundSize:'cover', backgroundPosition:'center', borderRadius:7
            }}/>
          </button>
        ))}
      </div>
      <div style={{fontSize:11, color:'var(--text-3)', marginTop:8}}>
        Примеры с picsum.photos. Загруженный файл показывается в превью сразу.
      </div>
    </>
  );
}

/* ============================================================
   Unsplash search (real API; user supplies their own Access Key)
   ============================================================ */
function UnsplashSearch({ eff, setBg }) {
  const [key, setKey] = useState(localStorage.getItem('unsplash_key') || '');
  const [showKeyForm, setShowKeyForm] = useState(!key);
  const [query, setQuery] = useState(eff.query || '');
  const [results, setResults] = useState([]);
  const [status, setStatus] = useState('');

const saveKey = () => {
    const k = key.trim();
    if (!k) return;
    localStorage.setItem('unsplash_key', k);
    setShowKeyForm(false);
    setStatus('Ключ сохранён. Введите запрос.');
  };

if (showKeyForm) {
    return (
      <div className="field">
        <p style={{fontSize:11.5, color:'var(--text-3)', margin:'0 0 8px'}}>
          Нужен бесплатный Access Key с{' '}
          <a href="https://unsplash.com/oauth/applications" target="_blank" rel="noopener"
            style={{color:'var(--accent)'}}>unsplash.com/developers</a>. Ключ хранится в вашем браузере.
        </p>
        <input className="input" placeholder="Unsplash Access Key" value={key}
          onChange={e => setKey(e.target.value)} style={{marginBottom:6}}/>
        <button className="btn primary" style={{width:'100%'}} onClick={saveKey}>Сохранить ключ</button>
      </div>
    );
  }

return (
    <>
      <div className="search-box">
        <Icon name="search"/>
        <input value={query} onChange={e => setQuery(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') search(); }}
          placeholder="Например: горы, минимализм, кофе"/>
        <button className="btn outline" style={{height:22, fontSize:11, padding:'0 8px'}}
          onClick={() => search()}>Найти</button>
      </div>
      <div style={{display:'flex', gap:6, flexWrap:'wrap', marginTop:8}}>
        {['минимализм','горы','офис','кофе','город','природа'].map(q => (
          <button key={q} className="btn outline" style={{height:24, fontSize:11}}
            onClick={() => search(q)}>{q}</button>
        ))}
      </div>
      <div style={{display:'flex', justifyContent:'space-between', marginTop:10}}>
        <span style={{fontSize:11.5, color:'var(--text-3)'}}>{status}</span>
        <span className="sec-act" onClick={() => { localStorage.removeItem('unsplash_key'); setKey(''); setShowKeyForm(true); }}>
          сменить ключ
        </span>
      </div>
      {results.length > 0 && (
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6, marginTop:8, maxHeight:280, overflowY:'auto'}}>
          {results.map(p => (
            <button key={p.id} className="preset-card" style={{padding:0}}
              onClick={() => pick(p)} title={`Photo by ${p.user.name}`}>
              <div style={{
                aspectRatio:'1', backgroundImage:`url(${p.urls.thumb})`,
                backgroundSize:'cover', backgroundPosition:'center', borderRadius:7
              }}/>
            </button>
          ))}
        </div>
      )}
    </>
  );
}

Object.assign(window, {
  Icon, Slider, Seg, ColorChips,
  TabStyle, TabText, TabTypography, TabBackground, TabTemplates,
});

Стиль обложки

Соотношение сторон

Содержание