{
  "id": "web-panel-iframe",
  "name": "Web Panel",
  "category": "web",
  "tags": ["web", "iframe", "website", "browser", "panel", "external"],
  "description": "Embed any website in an iframe panel with URL toolbar and open-in-new-tab link.",
  "triggers": ["web panel", "website panel", "iframe", "load website", "show site", "embed site", "eBay", "YouTube", "Wikipedia"],
  "defaultSize": { "w": 6, "h": 6 },
  "source": "function WebPanel() {\n  const [url, setUrl] = React.useState('REPLACE_WITH_URL');\n  const [input, setInput] = React.useState('REPLACE_WITH_URL');\n  const [error, setError] = React.useState(false);\n\n  const go = () => {\n    let u = input.trim();\n    if (!u) return;\n    if (!u.startsWith('http')) u = 'https://' + u;\n    setUrl(u);\n    setError(false);\n  };\n\n  return (\n    <div style={{display:'flex',flexDirection:'column',height:'100%',fontFamily:'system-ui'}}>\n      <div style={{display:'flex',gap:8,padding:'8px 12px',background:'#f5f5f5',borderBottom:'1px solid #ddd'}}>\n        <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&go()}\n          style={{flex:1,padding:'6px 10px',borderRadius:6,border:'1px solid #ccc',fontSize:13}}\n          placeholder=\"Enter URL…\"/>\n        <button onClick={go}\n          style={{padding:'6px 14px',borderRadius:6,background:'#007AFF',color:'#fff',border:'none',cursor:'pointer',fontSize:13}}>\n          Go\n        </button>\n        <a href={url} target=\"_blank\" rel=\"noopener noreferrer\"\n          style={{padding:'6px 10px',borderRadius:6,background:'#fff',border:'1px solid #ccc',fontSize:13,color:'#333',textDecoration:'none'}}>\n          ↗ Open\n        </a>\n      </div>\n      <div style={{flex:1,position:'relative'}}>\n        <iframe\n          src={url}\n          style={{width:'100%',height:'100%',border:'none'}}\n          onError={()=>setError(true)}\n          sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\"\n        />\n        {error && (\n          <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',background:'#fff',padding:20}}>\n            <div style={{textAlign:'center'}}>\n              <div style={{fontSize:18,fontWeight:600,marginBottom:8}}>This site blocks framing</div>\n              <div style={{color:'#888',marginBottom:12}}>Try opening in a new tab instead.</div>\n              <a href={url} target=\"_blank\" rel=\"noopener noreferrer\"\n                style={{padding:'8px 16px',borderRadius:8,background:'#007AFF',color:'#fff',textDecoration:'none',display:'inline-block'}}>\n                Open {url}\n              </a>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\nrender(<WebPanel/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_URL", "description": "Website URL to embed", "default": "https://example.com" }
  ]
}