{
  "id": "base64-tool",
  "name": "Base64 Tool",
  "category": "utilities",
  "tags": ["base64", "encode", "decode", "text"],
  "description": "Encode/decode base64 with text input.",
  "triggers": ["base64", "encode", "decode", "base64 tool"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const Base64Tool = () => {\n  const [mode, setMode] = React.useState('encode');\n  const [input, setInput] = React.useState('');\n  const [output, setOutput] = React.useState('');\n  const [error, setError] = React.useState('');\n\n  const process = () => {\n    setError('');\n    if (!input) { setOutput(''); return; }\n    try {\n      if (mode === 'encode') {\n        setOutput(btoa(input));\n      } else {\n        setOutput(atob(input));\n      }\n    } catch (e) {\n      setError(mode === 'encode' ? 'Encoding failed' : 'Invalid base64 input');\n      setOutput('');\n    }\n  };\n\n  React.useEffect(() => {\n    process();\n  }, [input, mode]);\n\n  const copy = () => {\n    if (output) navigator.clipboard.writeText(output);\n  };\n\n  const clear = () => {\n    setInput('');\n    setOutput('');\n    setError('');\n  };\n\n  return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', padding: '16px', display: 'flex', flexDirection: 'column', gap: '14px', height: '100%', overflow: 'auto' } },\n    React.createElement('h3', { style: { margin: 0, fontSize: '16px', fontWeight: 600, color: '#111827' } }, 'Base64 Tool'),\n    React.createElement('div', { style: { display: 'flex', gap: '8px' } },\n      React.createElement('button', {\n        onClick: () => setMode('encode'),\n        style: {\n          flex: 1,\n          fontSize: '12px',\n          padding: '6px',\n          borderRadius: '4px',\n          border: '1px solid #d1d5db',\n          background: mode === 'encode' ? '#2563eb' : '#fff',\n          color: mode === 'encode' ? '#fff' : '#374151',\n          cursor: 'pointer',\n          fontWeight: 600\n        }\n      }, 'Encode'),\n      React.createElement('button', {\n        onClick: () => setMode('decode'),\n        style: {\n          flex: 1,\n          fontSize: '12px',\n          padding: '6px',\n          borderRadius: '4px',\n          border: '1px solid #d1d5db',\n          background: mode === 'decode' ? '#2563eb' : '#fff',\n          color: mode === 'decode' ? '#fff' : '#374151',\n          cursor: 'pointer',\n          fontWeight: 600\n        }\n      }, 'Decode')\n    ),\n    React.createElement('div', null,\n      React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, mode === 'encode' ? 'Text to encode' : 'Base64 to decode'),\n      React.createElement('textarea', {\n        value: input,\n        onChange: e => setInput(e.target.value),\n        placeholder: mode === 'encode' ? 'Enter text...' : 'Enter base64...',\n        style: { width: '100%', minHeight: '100px', fontSize: '13px', padding: '10px', borderRadius: '6px', border: '1px solid #d1d5db', resize: 'vertical', fontFamily: 'monospace', boxSizing: 'border-box' }\n      })\n    ),\n    React.createElement('div', null,\n      React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' } },\n        React.createElement('span', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280' } }, mode === 'encode' ? 'Base64 output' : 'Decoded text'),\n        React.createElement('div', { style: { display: 'flex', gap: '6px' } },\n          React.createElement('button', { onClick: copy, style: { fontSize: '11px', padding: '4px 8px', borderRadius: '4px', border: '1px solid #d1d5db', background: '#fff', cursor: 'pointer' } }, 'Copy'),\n          React.createElement('button', { onClick: clear, style: { fontSize: '11px', padding: '4px 8px', borderRadius: '4px', border: '1px solid #d1d5db', background: '#fff', cursor: 'pointer' } }, 'Clear')\n        )\n      ),\n      React.createElement('div', {\n        style: {\n          width: '100%',\n          minHeight: '100px',\n          fontSize: '13px',\n          padding: '10px',\n          borderRadius: '6px',\n          border: '1px solid ' + (error ? '#fca5a5' : '#d1d5db'),\n          background: error ? '#fef2f2' : '#f9fafb',\n          fontFamily: 'monospace',\n          wordBreak: 'break-all',\n          color: error ? '#dc2626' : '#111827',\n          boxSizing: 'border-box'\n        }\n      }, error || output || 'Result will appear here...')\n    )\n  );\n};\nrender(<Base64Tool/>);",
  "placeholders": []
}