{
  "id": "regex-tester",
  "name": "Regex Tester",
  "category": "utilities",
  "tags": ["regex", "regular expression", "pattern match", "tester"],
  "description": "Test regex patterns against input text with match highlighting.",
  "triggers": ["regex tester", "regular expression", "pattern match", "regex"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const RegexTester = () => {\n  const [pattern, setPattern] = React.useState('[A-Za-z]+');\n  const [flags, setFlags] = React.useState('g');\n  const [text, setText] = React.useState('Hello World! This is a test. Regex is powerful.');\n  const [error, setError] = React.useState('');\n  const [matches, setMatches] = React.useState([]);\n\n  React.useEffect(() => {\n    setError('');\n    setMatches([]);\n    if (!pattern) return;\n    try {\n      const re = new RegExp(pattern, flags);\n      const found = [];\n      let m;\n      if (flags.includes('g')) {\n        while ((m = re.exec(text)) !== null) {\n          if (m.index === re.lastIndex) re.lastIndex++;\n          found.push({ text: m[0], index: m.index, groups: m.slice(1) });\n        }\n      } else {\n        m = re.exec(text);\n        if (m) found.push({ text: m[0], index: m.index, groups: m.slice(1) });\n      }\n      setMatches(found);\n    } catch (e) {\n      setError(e.message);\n    }\n  }, [pattern, flags, text]);\n\n  const toggleFlag = (f) => {\n    setFlags(flags.includes(f) ? flags.replace(f, '') : flags + f);\n  };\n\n  const renderHighlighted = () => {\n    if (error || !pattern || !matches.length) return text;\n    const parts = [];\n    let last = 0;\n    matches.forEach((m, i) => {\n      if (m.index > last) parts.push(React.createElement('span', { key: 't' + i }, text.slice(last, m.index)));\n      parts.push(React.createElement('mark', { key: 'm' + i, style: { background: '#fde047', borderRadius: '2px', padding: '0 2px' } }, text.slice(m.index, m.index + m.text.length)));\n      last = m.index + m.text.length;\n    });\n    if (last < text.length) parts.push(React.createElement('span', { key: 'end' }, text.slice(last)));\n    return parts;\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' } }, 'Regex Tester'),\n    React.createElement('div', null,\n      React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, 'Pattern'),\n      React.createElement('div', { style: { display: 'flex', gap: '8px' } },\n        React.createElement('input', {\n          value: pattern,\n          onChange: e => setPattern(e.target.value),\n          placeholder: 'Enter regex pattern...',\n          style: { flex: 1, fontSize: '14px', padding: '8px 10px', borderRadius: '6px', border: '1px solid ' + (error ? '#fca5a5' : '#d1d5db'), fontFamily: 'monospace', outline: 'none' }\n        }),\n        React.createElement('span', { style: { fontSize: '18px', color: '#6b7280', alignSelf: 'center' } }, '/')\n      ),\n      error && React.createElement('div', { style: { fontSize: '12px', color: '#dc2626', marginTop: '4px' } }, error)\n    ),\n    React.createElement('div', null,\n      React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, 'Flags'),\n      React.createElement('div', { style: { display: 'flex', gap: '6px' } },\n        ['g', 'i', 'm', 's', 'u'].map(f => React.createElement('button', {\n          key: f,\n          onClick: () => toggleFlag(f),\n          style: {\n            fontSize: '12px',\n            padding: '4px 10px',\n            borderRadius: '4px',\n            border: '1px solid #d1d5db',\n            background: flags.includes(f) ? '#2563eb' : '#fff',\n            color: flags.includes(f) ? '#fff' : '#374151',\n            cursor: 'pointer',\n            fontWeight: 600\n          }\n        }, f))\n      )\n    ),\n    React.createElement('div', null,\n      React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, 'Test Text'),\n      React.createElement('textarea', {\n        value: text,\n        onChange: e => setText(e.target.value),\n        placeholder: 'Enter text to test against...',\n        style: { width: '100%', minHeight: '80px', 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: { fontSize: '11px', fontWeight: 600, color: '#6b7280', marginBottom: '4px' } }, 'Highlighted Matches (', matches.length, ')'),\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '6px', padding: '10px', border: '1px solid #e5e7eb', fontSize: '13px', fontFamily: 'monospace', lineHeight: 1.6, minHeight: '60px', wordBreak: 'break-word' } }, renderHighlighted())\n    ),\n    matches.length > 0 && React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '6px' } },\n      React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, color: '#6b7280' } }, 'Match Details'),\n      matches.slice(0, 10).map((m, i) => React.createElement('div', { key: i, style: { background: '#fff', borderRadius: '4px', padding: '6px 10px', border: '1px solid #e5e7eb', fontSize: '12px', fontFamily: 'monospace' } },\n        React.createElement('span', { style: { color: '#2563eb', fontWeight: 700 } }, m.text),\n        ' at index ', m.index,\n        m.groups.length > 0 && React.createElement('span', { style: { color: '#6b7280' } }, ' | groups: ', m.groups.map((g, j) => React.createElement('span', { key: j, style: { background: '#e0e7ff', padding: '1px 4px', borderRadius: '2px', marginLeft: '4px' } }, g || '(empty)')))\n      ))\n    )\n  );\n};\nrender(<RegexTester/>);",
  "placeholders": []
}