{
  "id": "post-composer",
  "name": "Post Composer",
  "category": "social",
  "tags": ["social", "composer", "writing"],
  "description": "Social media post composer with character counter.",
  "triggers": ["post composer", "write post", "social media", "compose"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function PostComposer() {\n  const [text, setText] = React.useState('');\n  const [platform, setPlatform] = React.useState('twitter');\n  const limits = { twitter: 280, threads: 500, mastodon: 500, bluesky: 300 };\n  const limit = limits[platform] || 280;\n  const remaining = limit - text.length;\n  const percent = Math.min((text.length / limit) * 100, 100);\n  const color = remaining < 0 ? '#ef4444' : remaining < 20 ? '#eab308' : '#22c55e';\n  const copy = () => { navigator.clipboard.writeText(text); };\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#fff', borderRadius: 12, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>\n      <h3 style={{ margin: '0 0 10px 0', fontSize: 16, color: '#222' }}>Post Composer</h3>\n      <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>\n        {Object.keys(limits).map((p) => (\n          <button key={p} onClick={() => setPlatform(p)} style={{ padding: '4px 10px', borderRadius: 99, border: '1px solid ' + (platform === p ? '#4f46e5' : '#ddd'), background: platform === p ? '#4f46e5' : '#fff', color: platform === p ? '#fff' : '#666', cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: 500, textTransform: 'capitalize' }}>\n            {p}\n          </button>\n        ))}\n      </div>\n      <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder=\"What's on your mind?\" style={{ resize: 'none', flex: 1, padding: 12, borderRadius: 10, border: '1px solid #ddd', fontFamily: 'inherit', fontSize: 14, lineHeight: 1.5, marginBottom: 10 }} />\n      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n          <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\">\n            <circle cx=\"14\" cy=\"14\" r=\"12\" fill=\"none\" stroke=\"#e5e7eb\" strokeWidth=\"3\" />\n            <circle cx=\"14\" cy=\"14\" r=\"12\" fill=\"none\" stroke={color} strokeWidth=\"3\" strokeLinecap=\"round\" strokeDasharray={`${percent * 0.754} 75.4`} transform=\"rotate(-90 14 14)\" />\n          </svg>\n          <span style={{ fontSize: 13, fontWeight: 600, color: remaining < 0 ? '#ef4444' : '#555' }}>{remaining}</span>\n        </div>\n        <button onClick={copy} disabled={!text.trim()} style={{ padding: '6px 14px', borderRadius: 8, border: 'none', background: '#4f46e5', color: '#fff', cursor: 'pointer', fontFamily: 'inherit', fontWeight: 500, opacity: text.trim() ? 1 : 0.5 }}>Copy</button>\n      </div>\n    </div>\n  );\n}\nrender(<PostComposer/>);",
  "placeholders": []
}