function TweaksPanel({ tweaks, setTweaks, visible, onClose }) {
  if (!visible) return null;
  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  const Row = ({ label, k, opts }) => (
    <div className="tweaks-panel__row">
      <label className="tweaks-panel__label">{label}</label>
      <div className="tweaks-panel__opts">
        {opts.map(o => (
          <button key={o.v} className="tweaks-panel__opt" data-active={tweaks[k] === o.v} onClick={() => set(k, o.v)}>
            {o.l}
          </button>
        ))}
      </div>
    </div>
  );
  return (
    <div className="tweaks-panel">
      <div className="tweaks-panel__title">
        Tweaks
        <span className="tweaks-panel__close" onClick={onClose}>×</span>
      </div>
      <Row label="Paleta" k="palette" opts={[{v:'midnight',l:'Midnight'},{v:'light',l:'Light'},{v:'mono',l:'Mono'}]}/>
      <Row label="Tipografia" k="typeVariant" opts={[{v:'space',l:'Space'},{v:'inter',l:'Inter'},{v:'mono',l:'Mono'}]}/>
    </div>
  );
}

Object.assign(window, { TweaksPanel });