/* ===== Tweaks panel ===== */
const Tweaks = ({ density, setDensity, onClose }) => {
  return (
    <div className="tweaks">
      <div className="tweaks__title">
        <span>Tweaks</span>
        <button className="btn btn--text btn--sm" onClick={onClose} style={{ padding: 0 }}><Icon name="x" size={14} /></button>
      </div>
      <div className="tweaks__row">
        <span className="tweaks__label">Density</span>
        <div className="segment">
          <button className="segment__btn" data-active={density === 'spacious'} onClick={() => setDensity('spacious')}>Spacious</button>
          <button className="segment__btn" data-active={density === 'compact'} onClick={() => setDensity('compact')}>Pro tool</button>
        </div>
      </div>
      <div className="muted" style={{ fontSize: 11, marginTop: 10, lineHeight: 1.4 }}>
        Spacious = editorial feel for first-timers. Pro tool = denser for power users working on multiple projects.
      </div>
    </div>
  );
};
Object.assign(window, { Tweaks });