{
  "id": "social-poster",
  "name": "Social Poster",
  "category": "communication",
  "tags": ["social", "post", "twitter", "facebook", "linkedin", "share"],
  "description": "Compose and preview social media posts for multiple platforms.",
  "triggers": ["social poster", "post composer", "social media", "tweet composer", "linkedin post"],
  "defaultSize": { "w": 5, "h": 5 },
  "source": "function SocialPoster() {\n  const [text, setText] = React.useState('REPLACE_WITH_POST_TEXT');\n  const [platform, setPlatform] = React.useState('twitter');\n  const [scheduled, setScheduled] = React.useState([]);\n\n  const limits = {twitter:280,facebook:2200,linkedin:3000};\n  const len = text.length;\n  const remaining = limits[platform] - len;\n\n  const schedule = ()=>{\n    if(!text.trim())return;\n    setScheduled([{text,platform,time:new Date().toLocaleTimeString()},...scheduled]);\n    setText('');\n  };\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column'}}>\n      <div style={{fontSize:18,fontWeight:700,marginBottom:12}}>Social Poster</div>\n      <div style={{display:'flex',gap:6,marginBottom:10}}>\n        {Object.keys(limits).map(p=> (\n          <button key={p} onClick={()=>setPlatform(p)}\n            style={{padding:'6px 14px',borderRadius:8,border:'1px solid #ccc',background:platform===p?'#007AFF':'#fff',color:platform===p?'#fff':'#000',cursor:'pointer',fontSize:12,textTransform:'capitalize'}}>\n            {p}\n          </button>\n        ))}\n      </div>\n      <textarea value={text} onChange={e=>setText(e.target.value)}\n        style={{flex:1,padding:10,borderRadius:8,border:'1px solid #ccc',fontSize:14,resize:'none',marginBottom:8}}\n        placeholder=\"What's on your mind?\"/>\n      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>\n        <span style={{fontSize:12,color:remaining<0?'#FF3B30':remaining<20?'#FF9500':'#888'}}>\n          {remaining} remaining\n        </span>\n        <button onClick={schedule}\n          style={{padding:'8px 20px',borderRadius:8,background:'#34C759',color:'#fff',border:'none',cursor:'pointer',fontSize:14,fontWeight:600}}>\n          Schedule Post\n        </button>\n      </div>\n      <div style={{maxHeight:100,overflow:'auto'}}>\n        {scheduled.map((s,i)=> (\n          <div key={i} style={{padding:'6px 0',borderBottom:'1px solid #eee',fontSize:12}}>\n            <span style={{textTransform:'capitalize',fontWeight:600,color:'#007AFF'}}>{s.platform}</span>\n            <span style={{color:'#888',marginLeft:8}}>{s.time}</span>\n            <div style={{color:'#555',marginTop:2}}>{s.text.slice(0,60)}…</div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<SocialPoster/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_POST_TEXT", "description": "Default post text", "default": "Excited to share my latest project! 🚀" }
  ]
}