{
  "name": "regex-tester",
  "type": "registry:ui",
  "title": "Regex Tester",
  "description": "A pattern against a test string, with matches highlighted and capture groups listed. Zero-length matches are guarded — `/a*/g` matches empty at every position and hangs a naive exec loop.",
  "category": "Code Tools",
  "dependencies": [
    "lucide-react@^1.39.0"
  ],
  "registryDependencies": [
    "badge",
    "input",
    "label",
    "lib-motion",
    "lib-styles",
    "lib-utils",
    "textarea"
  ],
  "files": [
    {
      "path": "components/ui/regex-tester.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\nimport { useMemo, useState, type ComponentProps, type ReactNode } from 'react'\nimport { TriangleAlert } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Textarea } from '@/components/ui/textarea'\nimport { enterFade } from '@/lib/motion'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A regular expression against a test string, with matches highlighted.\n *\n * The pattern is compiled in a try/catch and the error is shown as you type. An\n * unfinished pattern is the normal state while typing, so a syntax error is a\n * hint, not a failure — the previous good match set is not thrown away.\n *\n * Zero-length matches are guarded. `/a*\\/g` matches empty at every position and\n * a naive `exec` loop over it never terminates; the index is advanced manually\n * when a match consumes nothing. This is the bug in most hand-rolled regex\n * testers.\n *\n * Named and numbered capture groups are listed per match. A pattern that\n * matches but captures the wrong thing is the failure people actually hit, and\n * a highlight alone cannot show it.\n */\nexport type RegexMatch = {\n  index: number\n  text: string\n  groups: { name: string; value: string | undefined }[]\n}\n\nconst FLAG_SET = ['g', 'i', 'm', 's', 'u', 'y'] as const\n\nfunction RegexTester({\n  pattern: patternProp,\n  onPatternChange,\n  flags: flagsProp,\n  onFlagsChange,\n  input: inputProp,\n  onInputChange,\n  patternLabel = 'Pattern',\n  flagsLabel = 'Flags',\n  inputLabel = 'Test string',\n  matchesLabel = 'Matches',\n  noMatchLabel = 'No matches',\n  groupsLabel = 'Groups',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'onChange' | 'children'> & {\n  pattern?: string\n  onPatternChange?: (pattern: string) => void\n  flags?: string\n  onFlagsChange?: (flags: string) => void\n  input?: string\n  onInputChange?: (input: string) => void\n  patternLabel?: ReactNode\n  flagsLabel?: ReactNode\n  inputLabel?: ReactNode\n  matchesLabel?: ReactNode\n  noMatchLabel?: ReactNode\n  groupsLabel?: ReactNode\n}) {\n  const [ownPattern, setOwnPattern] = useState(patternProp ?? '')\n  const [ownFlags, setOwnFlags] = useState(flagsProp ?? 'g')\n  const [ownInput, setOwnInput] = useState(inputProp ?? '')\n\n  const pattern = patternProp ?? ownPattern\n  const flags = flagsProp ?? ownFlags\n  const input = inputProp ?? ownInput\n\n  const { matches, error } = useMemo(() => {\n    if (!pattern) return { matches: [] as RegexMatch[], error: undefined }\n    let regex: RegExp\n    try {\n      regex = new RegExp(pattern, flags.includes('g') ? flags : `${flags}g`)\n    } catch (exception) {\n      return { matches: [] as RegexMatch[], error: (exception as Error).message }\n    }\n\n    const found: RegexMatch[] = []\n    let hit: RegExpExecArray | null\n    let guard = 0\n    while ((hit = regex.exec(input)) && guard++ < 5000) {\n      found.push({\n        index: hit.index,\n        text: hit[0],\n        groups: [\n          ...hit.slice(1).map((value, i) => ({ name: String(i + 1), value })),\n          ...Object.entries(hit.groups ?? {}).map(([name, value]) => ({ name, value })),\n        ],\n      })\n      // A zero-length match leaves lastIndex where it was; without this the\n      // loop never terminates.\n      if (hit[0] === '') regex.lastIndex++\n    }\n    return { matches: found, error: undefined }\n  }, [pattern, flags, input])\n\n  /** Splits the input into plain and matched runs for highlighting. */\n  const segments = useMemo(() => {\n    const out: { text: string; hit: boolean }[] = []\n    let cursor = 0\n    for (const match of matches) {\n      if (match.index > cursor) out.push({ text: input.slice(cursor, match.index), hit: false })\n      out.push({ text: match.text, hit: true })\n      cursor = match.index + match.text.length\n    }\n    if (cursor < input.length) out.push({ text: input.slice(cursor), hit: false })\n    return out\n  }, [matches, input])\n\n  const setPattern = (next: string) => {\n    if (patternProp === undefined) setOwnPattern(next)\n    onPatternChange?.(next)\n  }\n  const setFlags = (next: string) => {\n    if (flagsProp === undefined) setOwnFlags(next)\n    onFlagsChange?.(next)\n  }\n  const setInput = (next: string) => {\n    if (inputProp === undefined) setOwnInput(next)\n    onInputChange?.(next)\n  }\n\n  return (\n    <div\n      data-slot=\"regex-tester\"\n      className={cn(enterFade, surface, radius.surface, 'flex flex-col gap-3 p-4', className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-end gap-2\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n          <Label htmlFor=\"regex-pattern\">{patternLabel}</Label>\n          <Input\n            id=\"regex-pattern\"\n            value={pattern}\n            error={Boolean(error)}\n            placeholder=\"(\\w+)@(\\w+)\\.com\"\n            className=\"font-mono text-xs\"\n            onChange={(event) => setPattern(event.target.value)}\n          />\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <Label htmlFor=\"regex-flags\">{flagsLabel}</Label>\n          <Input\n            id=\"regex-flags\"\n            value={flags}\n            placeholder=\"gi\"\n            containerClassName=\"w-24\"\n            className=\"font-mono text-xs\"\n            onChange={(event) =>\n              setFlags([...new Set(event.target.value.split(''))]\n                .filter((f) => (FLAG_SET as readonly string[]).includes(f))\n                .join(''))\n            }\n          />\n        </div>\n      </div>\n\n      {error && (\n        <p className=\"flex items-start gap-1.5 text-xs text-[var(--destructive-soft-foreground)]\">\n          <TriangleAlert className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden=\"true\" />\n          {error}\n        </p>\n      )}\n\n      <div className=\"flex flex-col gap-1.5\">\n        <Label htmlFor=\"regex-input\">{inputLabel}</Label>\n        <Textarea\n          id=\"regex-input\"\n          rows={4}\n          value={input}\n          className=\"font-mono text-xs\"\n          onChange={(event) => setInput(event.target.value)}\n        />\n      </div>\n\n      <div className={cn('bg-secondary/60 p-3 font-mono text-xs whitespace-pre-wrap', radius.control)}>\n        {segments.length === 0 ? (\n          <span className=\"text-muted-foreground/60\">{noMatchLabel}</span>\n        ) : (\n          segments.map((segment, index) =>\n            segment.hit ? (\n              <mark\n                key={index}\n                className=\"bg-[color-mix(in_oklab,var(--amber)_35%,transparent)] text-foreground\"\n              >\n                {segment.text}\n              </mark>\n            ) : (\n              <span key={index}>{segment.text}</span>\n            ),\n          )\n        )}\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-muted-foreground flex items-center gap-2 text-xs font-medium\">\n          {matchesLabel}\n          <Badge size=\"sm\">{matches.length}</Badge>\n        </span>\n\n        {matches.length > 0 && (\n          <ul className=\"flex list-none flex-col gap-1.5\">\n            {matches.slice(0, 20).map((match, index) => (\n              <li key={index} className=\"flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xs\">\n                <span className=\"text-muted-foreground/60 w-8 shrink-0 text-end tabular-nums\">\n                  {match.index}\n                </span>\n                <code className=\"font-mono\">{match.text || '∅'}</code>\n                {/* A pattern that matches but captures the wrong thing is the\n                    failure people actually hit; a highlight cannot show it. */}\n                {match.groups.length > 0 && (\n                  <span className=\"text-muted-foreground flex flex-wrap gap-x-2\">\n                    <span className=\"opacity-70\">{groupsLabel}:</span>\n                    {match.groups.map((group) => (\n                      <span key={group.name} className=\"font-mono\">\n                        {group.name}={group.value === undefined ? '—' : `\"${group.value}\"`}\n                      </span>\n                    ))}\n                  </span>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { RegexTester }\n"
    }
  ]
}