{
  "id": "reading-list",
  "name": "Reading List",
  "category": "lifestyle",
  "tags": ["books", "reading", "tracker", "productivity"],
  "description": "Track books you're reading with progress bars and status.",
  "triggers": ["reading list", "books", "reading tracker", "book list"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function ReadingList() {\n  const [books, setBooks] = React.useState([\n    { title: 'The Design of Everyday Things', author: 'Don Norman', progress: 65, status: 'reading' },\n    { title: 'Atomic Habits', author: 'James Clear', progress: 30, status: 'reading' },\n    { title: 'Deep Work', author: 'Cal Newport', progress: 100, status: 'finished' }\n  ]);\n  const [newTitle, setNewTitle] = React.useState('');\n  const [newAuthor, setNewAuthor] = React.useState('');\n\n  function addBook() {\n    if (!newTitle.trim()) return;\n    setBooks([...books, { title: newTitle, author: newAuthor || 'Unknown', progress: 0, status: 'reading' }]);\n    setNewTitle('');\n    setNewAuthor('');\n  }\n\n  function updateProgress(idx, delta) {\n    setBooks(books.map((b, i) => {\n      if (i !== idx) return b;\n      const p = Math.max(0, Math.min(100, b.progress + delta));\n      return { ...b, progress: p, status: p === 100 ? 'finished' : 'reading' };\n    }));\n  }\n\n  function removeBook(idx) {\n    setBooks(books.filter((_, i) => i !== idx));\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' }}>Reading List</h2>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>\n        <input placeholder=\"Title\" value={newTitle} onChange={e => setNewTitle(e.target.value)} style={{ flex: 1, padding: '6px 10px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }} />\n        <input placeholder=\"Author\" value={newAuthor} onChange={e => setNewAuthor(e.target.value)} style={{ flex: 1, padding: '6px 10px', borderRadius: 6, border: '1px solid #ddd', fontSize: 13 }} />\n        <button onClick={addBook} style={{ padding: '6px 14px', borderRadius: 6, border: 'none', background: '#2563eb', color: '#fff', fontSize: 13, cursor: 'pointer' }}>Add</button>\n      </div>\n      <div style={{ flex: 1, overflowY: 'auto' }}>\n        {books.map((book, i) => (\n          <div key={i} style={{ marginBottom: 12, padding: 12, borderRadius: 8, background: '#f8f9fa' }}>\n            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n              <div>\n                <div style={{ fontWeight: 600, fontSize: 14, color: '#1a1a1a' }}>{book.title}</div>\n                <div style={{ fontSize: 12, color: '#666' }}>{book.author}</div>\n              </div>\n              <button onClick={() => removeBook(i)} style={{ background: 'transparent', border: 'none', color: '#999', cursor: 'pointer', fontSize: 16 }}>x</button>\n            </div>\n            <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 8 }}>\n              <div style={{ flex: 1, height: 8, background: '#e5e7eb', borderRadius: 4, overflow: 'hidden' }}>\n                <div style={{ width: book.progress + '%', height: '100%', background: book.status === 'finished' ? '#22c55e' : '#2563eb', borderRadius: 4, transition: 'width 0.3s' }} />\n              </div>\n              <span style={{ fontSize: 12, color: '#555', minWidth: 32 }}>{book.progress}%</span>\n              <button onClick={() => updateProgress(i, -10)} style={{ padding: '2px 8px', borderRadius: 4, border: '1px solid #ddd', background: '#fff', cursor: 'pointer', fontSize: 12 }}>-</button>\n              <button onClick={() => updateProgress(i, 10)} style={{ padding: '2px 8px', borderRadius: 4, border: '1px solid #ddd', background: '#fff', cursor: 'pointer', fontSize: 12 }}>+</button>\n            </div>\n          </div>\n        ))}\n        {books.length === 0 && <div style={{ textAlign: 'center', color: '#999', fontSize: 13, padding: 20 }}>No books yet. Add one above!</div>}\n      </div>\n    </div>\n  );\n}\nrender(<ReadingList/>);",
  "placeholders": []
}