{
  "id": "screenshot-tool",
  "name": "Screenshot Tool",
  "category": "multi-modal",
  "tags": ["screenshot", "capture", "image", "URL"],
  "description": "Screenshot display panel with URL input and preview placeholder.",
  "triggers": ["screenshot", "capture screen", "screen grab", "snapshot"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function ScreenshotTool() {\n  const [url, setUrl] = React.useState('https://example.com');\n  const [capturing, setCapturing] = React.useState(false);\n  const [screenshot, setScreenshot] = React.useState(null);\n  const [history, setHistory] = React.useState([\n    { url: 'https://github.com', time: '2m ago' },\n    { url: 'https://news.ycombinator.com', time: '15m ago' }\n  ]);\n\n  function capture() {\n    if (!url.trim()) return;\n    setCapturing(true);\n    setScreenshot(null);\n    setTimeout(() => {\n      setScreenshot({ url, id: Math.random().toString(36).slice(2, 8) });\n      setHistory([{ url, time: 'just now' }, ...history]);\n      setCapturing(false);\n    }, 1200);\n  }\n\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      <h2 style={{ margin: '0 0 12px 0', fontSize: 18, color: '#1a1a1a' }}>Screenshot Tool</h2>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>\n        <input\n          value={url}\n          onChange={e => setUrl(e.target.value)}\n          placeholder=\"https://example.com\"\n          style={{ flex: 1, padding: '8px 12px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }}\n        />\n        <button\n          onClick={capture}\n          disabled={capturing}\n          style={{ padding: '8px 18px', borderRadius: 6, border: 'none', background: capturing ? '#9ca3af' : '#0d9488', color: '#fff', fontSize: 13, cursor: capturing ? 'not-allowed' : 'pointer' }}\n        >\n          {capturing ? 'Capturing...' : 'Capture'}\n        </button>\n      </div>\n      <div style={{ flex: 1, borderRadius: 8, background: '#f3f4f6', border: '1px solid #e5e7eb', display: 'flex', flexDirection: 'column', overflow: 'hidden', marginBottom: 12 }}>\n        <div style={{ padding: '6px 10px', background: '#e5e7eb', fontSize: 11, color: '#6b7280', display: 'flex', alignItems: 'center', gap: 6 }}>\n          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ef4444' }} />\n          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#f59e0b' }} />\n          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#22c55e' }} />\n          <span style={{ marginLeft: 6, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{screenshot ? screenshot.url : url}</span>\n        </div>\n        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>\n          {capturing ? (\n            <div style={{ textAlign: 'center', color: '#6b7280' }}>\n              <div style={{ width: 28, height: 28, border: '3px solid #e5e7eb', borderTopColor: '#0d9488', borderRadius: '50%', margin: '0 auto 8px' }} />\n              <div style={{ fontSize: 13 }}>Capturing screenshot...</div>\n            </div>\n          ) : screenshot ? (\n            <div style={{ textAlign: 'center', padding: 20 }}>\n              <div style={{ width: 160, height: 100, borderRadius: 6, background: 'linear-gradient(135deg, #99f6e4 0%, #5eead4 100%)', margin: '0 auto 10px', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>\n                <span style={{ fontSize: 40 }}>\\ud83d\\udcf7</span>\n              </div>\n              <div style={{ fontSize: 11, color: '#6b7280' }}>Screenshot ID: {screenshot.id}</div>\n            </div>\n          ) : (\n            <div style={{ color: '#9ca3af', fontSize: 13, textAlign: 'center' }}>Enter a URL and click Capture</div>\n          )}\n        </div>\n      </div>\n      <div style={{ maxHeight: 90, overflowY: 'auto' }}>\n        <div style={{ fontSize: 11, color: '#9ca3af', marginBottom: 4 }}>History</div>\n        {history.map((h, i) => (\n          <div\n            key={i}\n            onClick={() => setUrl(h.url)}\n            style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 10px', borderRadius: 6, background: '#f9fafb', marginBottom: 4, fontSize: 12, color: '#4b5563', cursor: 'pointer' }}\n          >\n            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{h.url}</span>\n            <span style={{ color: '#9ca3af', fontSize: 11, flexShrink: 0 }}>{h.time}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<ScreenshotTool/>);",
  "placeholders": []
}