{"manifest_version":3,"name":"CSS Gradient Generator","version":"1.0","permissions":["storage"],"action":{"default_popup":"popup.html"}}

<div id="gradient-preview"></div>
<div class="controls">
  <div class="gradient-type">
    <button class="type-btn active" data-type="linear">Linear</button>
    <button class="type-btn" data-type="radial">Radial</button>
    <button class="type-btn" data-type="conic">Conic</button>
  </div>
  <div class="color-stops" id="color-stops"></div>
  <button id="add-stop">+ Add Stop</button>
  <label>Angle: <span id="angle-value">90</span>° <input type="range" id="angle-slider" min="0" max="360" value="90"></label>
</div>
<pre id="css-output"></pre>
<button id="copy-btn">Copy CSS</button>

function renderColorStops() {
  const container = document.getElementById('color-stops');
  container.innerHTML = '';
  state.colorStops.forEach((stop, i) => {
    container.innerHTML += `<input type="color" value="${stop.color}" data-index="${i}">
      <input type="range" value="${stop.position}" min="0" max="100" data-index="${i}">
      <button class="remove-stop" data-index="${i}">×</button>`;
  });
}

const gradientTypes = { linear: a => `linear-gradient(${a}deg, {s})`, radial: () => `radial-gradient(circle, {s})`, conic: a => `conic-gradient(from ${a}deg, {s})` };
function buildGradientString() {
  const stops = state.colorStops.sort((a,b) => a.position-b.position).map(s => `${s.color} ${s.position}%`).join(', ');
  return gradientTypes[state.type](state.angle).replace('{s}', stops);
}

function updatePreview() {
  const gradient = buildGradientString();
  document.getElementById('gradient-preview').style.background = gradient;
  document.getElementById('css-output').textContent = `background: ${gradient};`;
}

document.getElementById('copy-btn').addEventListener('click', async () => {
  await navigator.clipboard.writeText(document.getElementById('css-output').textContent);
});

async function saveGradient() {
  const saved = (await chrome.storage.local.get('savedGradients')).savedGradients || [];
  saved.push({ ...state, name: `Gradient ${saved.length + 1}` });
  await chrome.storage.local.set({ savedGradients: saved });
}