{
  "id": "gradient-picker",
  "name": "Gradient Picker",
  "category": "creative",
  "tags": ["creative", "gradient", "css", "color"],
  "description": "Generate CSS gradients with adjustable colors, angle, and one-click copy.",
  "triggers": ["gradient picker", "gradient generator", "css gradient", "color gradient"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function GradientPicker() {\n  const [color1, setColor1] = React.useState('#3b82f6');\n  const [color2, setColor2] = React.useState('#8b5cf6');\n  const [angle, setAngle] = React.useState(135);\n  const [copied, setCopied] = React.useState(false);\n\n  const css = `linear-gradient(${angle}deg, ${color1}, ${color2})`;\n\n  const copy = () => {\n    navigator.clipboard.writeText(`background: ${css};`);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#ffffff', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column', color: '#1e293b' }}>\n      <h2 style={{ margin: '0 0 12px', fontSize: 18 }}>Gradient Picker</h2>\n      <div style={{ height: 100, borderRadius: 8, marginBottom: 12, background: css }} />\n      <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>\n        <div style={{ flex: 1 }}>\n          <label style={{ fontSize: 12, fontWeight: 500 }}>Color 1</label>\n          <input type=\"color\" value={color1} onChange={e => setColor1(e.target.value)} style={{ width: '100%', height: 36, border: 'none', cursor: 'pointer' }} />\n        </div>\n        <div style={{ flex: 1 }}>\n          <label style={{ fontSize: 12, fontWeight: 500 }}>Color 2</label>\n          <input type=\"color\" value={color2} onChange={e => setColor2(e.target.value)} style={{ width: '100%', height: 36, border: 'none', cursor: 'pointer' }} />\n        </div>\n      </div>\n      <label style={{ fontSize: 12, fontWeight: 500 }}>Angle: {angle}°</label>\n      <input type=\"range\" min=\"0\" max=\"360\" value={angle} onChange={e => setAngle(Number(e.target.value))} style={{ marginBottom: 12 }} />\n      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 'auto' }}>\n        <code style={{ flex: 1, background: '#f1f5f9', padding: 8, borderRadius: 6, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis' }}>{css}</code>\n        <button onClick={copy} style={{ padding: '8px 14px', borderRadius: 6, border: 'none', background: copied ? '#059669' : '#2563eb', color: '#fff', fontSize: 13, cursor: 'pointer' }}>{copied ? 'Copied!' : 'Copy'}</button>\n      </div>\n    </div>\n  );\n}\nrender(<GradientPicker/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_DEFAULT_ANGLE", "description": "Default gradient angle in degrees", "default": "135" }
  ]
}