{
  "id": "color-palette",
  "name": "Color Palette Generator",
  "category": "creative",
  "tags": ["color", "palette", "design", "hex", "creative", "gradient"],
  "description": "Generate and explore color palettes with hex codes, lock colors, and copy to clipboard.",
  "triggers": ["color palette", "palette generator", "color scheme", "hex colors", "design colors", "color picker"],
  "defaultSize": { "w": 6, "h": 4 },
  "source": "function ColorPalette() {\n  const rand = () => '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6,'0');\n  const [colors, setColors] = React.useState([rand(),rand(),rand(),rand(),rand()]);\n  const [locked, setLocked] = React.useState(new Set());\n\n  const generate = () => {\n    setColors(prev => prev.map((c,i)=>locked.has(i)?c:rand()));\n  };\n\n  const copy = (hex) => {\n    navigator.clipboard?.writeText(hex);\n    alert('Copied ' + hex);\n  };\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column'}}>\n      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>\n        <span style={{fontSize:18,fontWeight:700}}>Color Palette</span>\n        <button onClick={generate}\n          style={{padding:'8px 16px',borderRadius:8,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer',fontSize:13}}>\n          Generate\n        </button>\n      </div>\n      <div style={{flex:1,display:'flex',gap:8,borderRadius:12,overflow:'hidden'}}>\n        {colors.map((hex,i)=> (\n          <div key={i} onClick={()=>copy(hex)}\n            style={{flex:1,background:hex,display:'flex',flexDirection:'column',justifyContent:'flex-end',alignItems:'center',paddingBottom:12,cursor:'pointer',position:'relative'}}>\n            <button onClick={(e)=>{e.stopPropagation();setLocked(p=>{const n=new Set(p);n.has(i)?n.delete(i):n.add(i);return n;});}}\n              style={{position:'absolute',top:8,background:'rgba(255,255,255,0.9)',border:'none',borderRadius:4,padding:'4px 8px',fontSize:12,cursor:'pointer'}}>\n              {locked.has(i)?'🔒':'🔓'}\n            </button>\n            <span style={{background:'rgba(0,0,0,0.5)',color:'#fff',padding:'4px 10px',borderRadius:6,fontSize:13,fontFamily:'monospace'}}>\n              {hex.toUpperCase()}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<ColorPalette/>);",
  "placeholders": []
}