From 95da448087583ea7a1a141ad902d2eb446ed4338 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 6 Sep 2025 04:31:59 -0400
Subject: [PATCH 01/98] test recorder WIP

current behavior:
- click the record button, it turns red
- on click in web view, selector is generated and sent to the extension process.
- extension gets the paused location; todo from here
---
 .../src/panel-controller/panel-router.ts      |  22 +++
 .../src/util/debug-session-tracker.ts         |  57 ++++---
 packages/web-view-vite/package.json           |   1 +
 packages/web-view-vite/src/App.tsx            |   3 +
 .../web-view-vite/src/components/Toolbar.tsx  |  16 +-
 .../web-view-vite/src/inspector/Inspector.tsx |   4 +-
 .../web-view-vite/src/lib/panel-client.ts     |   3 +-
 .../web-view-vite/src/recorder/recorder.ts    |  94 +++++++++++
 pnpm-lock.yaml                                | 148 ++++--------------
 9 files changed, 204 insertions(+), 144 deletions(-)
 create mode 100644 packages/web-view-vite/src/recorder/recorder.ts

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index de605ba..29b0f60 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -173,6 +173,28 @@ export const panelRouter = t.router({
     .mutation(async ({ ctx }) => {
       ctx.storage.set('stylePromptDismissed', false)
     }),
+
+  recordInputAsCode: t.procedure
+    .input(
+      z.object({
+        event: z.string(),
+        query: z.tuple([z.string(), z.array(z.unknown())]),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { event, query: [method, args] } = input
+      const code = `fireEvent.${method}(${args.map(arg => JSON.stringify(arg)).join(', ')})`
+
+      const pausedLocation = await ctx.sessionTracker.getPausedLocation()
+
+      console.log('code is ', code)
+      console.log('todo generate code at ', pausedLocation)
+
+      // const resultStr = await ctx.sessionTracker.runDebugExpression(
+      //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
+      // )
+      // ctx.flushPatches()
+    }),
 })
 
 export type PanelRouter = typeof panelRouter
diff --git a/packages/extension/src/util/debug-session-tracker.ts b/packages/extension/src/util/debug-session-tracker.ts
index 1f75c98..0c8a0ad 100644
--- a/packages/extension/src/util/debug-session-tracker.ts
+++ b/packages/extension/src/util/debug-session-tracker.ts
@@ -33,25 +33,8 @@ export function startDebugSessionTracker(
     },
   })
 
-  /**
-   * Find the UI test session based on whichever session is connected to a breakpoint.
-   * TODO find a better way to do this.
-   */
-  async function getUiTestSession() {
-    const bps = vscode.debug.breakpoints
-    for (const session of sessions) {
-      for (const bp of bps) {
-        const dbp = await session.getDebugProtocolBreakpoint(bp)
-        if (dbp && Reflect.get(dbp, 'verified') === true) {
-          return session
-        }
-      }
-    }
-    return null
-  }
-
   async function runDebugExpression(expression: string) {
-    const uiSession = await getUiTestSession()
+    const uiSession = vscode.debug.activeDebugSession
     if (!uiSession) {
       throw new Error('Internal extension error: Could not find UI test session')
     }
@@ -75,9 +58,45 @@ export function startDebugSessionTracker(
     return result
   }
 
+  interface DebugPauseLocation {
+    fileUri: string
+    lineNumber: number
+    indent: number
+  }
+
+  async function getPausedLocation(): Promise<DebugPauseLocation | null> {
+    const session = vscode.debug.activeDebugSession
+    if (!session) {
+      return null
+    }
+    try {
+      const response = await session.customRequest('stackTrace', {
+        threadId: 1, // TODO is this always the right threadId?
+        startFrame: 0,
+        levels: 1,
+      })
+      if (response.stackFrames && response.stackFrames.length > 0) {
+        const frame = response.stackFrames[0]
+        const fileUri = frame.source?.path
+        const lineNumber = frame.line
+        const indent = frame.column - 1
+        vscode.window.showInformationMessage(`Stopped at ${fileUri}:${lineNumber}`)
+        return { fileUri, lineNumber, indent }
+      }
+      else {
+        vscode.window.showInformationMessage('No stack frames')
+        return null
+      }
+    }
+    catch (error) {
+      vscode.window.showErrorMessage(`Error: ${error}`)
+      return null
+    }
+  }
+
   return {
-    getUiTestSession,
     runDebugExpression,
+    getPausedLocation,
     dispose: () => {
       frameIdTracker.dispose()
       onChangeActive.dispose()
diff --git a/packages/web-view-vite/package.json b/packages/web-view-vite/package.json
index 4114f71..88860a1 100644
--- a/packages/web-view-vite/package.json
+++ b/packages/web-view-vite/package.json
@@ -12,6 +12,7 @@
     "@solid-primitives/event-listener": "^2.4.3",
     "@solid-primitives/map": "^0.7.2",
     "@solid-primitives/mutation-observer": "^1.2.2",
+    "@testing-library/dom": "^10.4.1",
     "@trpc/client": "^11.5.0",
     "@trpc/server": "^11.5.0",
     "@vscode/webview-ui-toolkit": "^1.4.0",
diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index 06822d0..1f48018 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -6,6 +6,7 @@ import { createInspectorHeight } from './inspector/inspector-height'
 import { Toolbar } from './components/Toolbar'
 import { Inspector } from './inspector/Inspector'
 import { Resizer } from './inspector/Resizer'
+import { createRecorder } from './recorder/recorder'
 
 // Importing the router type from the server file
 
@@ -38,6 +39,8 @@ export const {
 
 export const inspector = createInspectorHeight()
 
+export const recorder = createRecorder(shadowHost)
+
 export function App() {
   return (
     <div class="fixed inset-0 flex flex-col">
diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index e6e39ef..9c6f66c 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -2,8 +2,9 @@ import Sun from 'lucide-solid/icons/sun'
 import Moon from 'lucide-solid/icons/moon'
 import RefreshCw from 'lucide-solid/icons/refresh-cw'
 import Code from 'lucide-solid/icons/code'
+import Circle from 'lucide-solid/icons/circle'
 import type { ParentProps } from 'solid-js'
-import { firstPatchReceived, inspector, refreshShadow, theme, toggleTheme } from '../App'
+import { firstPatchReceived, inspector, recorder, refreshShadow, theme, toggleTheme } from '../App'
 import { StyleIcon, StylePicker } from './StylePicker'
 import { Tooltip, TooltipContent, TooltipTrigger } from './solid-ui/tooltip'
 
@@ -42,6 +43,19 @@ export function Toolbar() {
           </ToolbarButton>
         )}
       />
+      <div class="h-10 w-10">
+        {/* Spacer */}
+      </div>
+      <ToolbarButton
+        onClick={() => recorder.toggle(!recorder.isRecording())}
+        label={recorder.isRecording() ? 'Stop recording' : '(Experimental) Record input as code'}
+      >
+        <div
+          class={`w-4 h-4 rounded-full ${
+            recorder.isRecording() ? 'bg-red-500' : 'bg-gray-500'
+          }`}
+        />
+      </ToolbarButton>
     </div>
   )
 }
diff --git a/packages/web-view-vite/src/inspector/Inspector.tsx b/packages/web-view-vite/src/inspector/Inspector.tsx
index 2201242..45208c1 100644
--- a/packages/web-view-vite/src/inspector/Inspector.tsx
+++ b/packages/web-view-vite/src/inspector/Inspector.tsx
@@ -2,7 +2,7 @@ import { makeEventListener } from '@solid-primitives/event-listener'
 import { ReactiveWeakMap } from '@solid-primitives/map'
 import { createMutationObserver } from '@solid-primitives/mutation-observer'
 import { Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
-import { shadowHost } from '../App'
+import { recorder, shadowHost } from '../App'
 import { type InspectedNode, getNewDomTree } from './inspector-dom-tree'
 import { createInspectorSearch } from './inspector-search'
 import { SearchToolbar } from './SearchToolbar'
@@ -101,7 +101,7 @@ export function Inspector() {
           </div>
         )}
       </Show>
-      <Show when={hoveredNode() ?? selectedNode()} keyed>
+      <Show when={!recorder.isRecording() && (hoveredNode() ?? selectedNode())} keyed>
         {(node) => {
           function newRect() {
             return node instanceof Text
diff --git a/packages/web-view-vite/src/lib/panel-client.ts b/packages/web-view-vite/src/lib/panel-client.ts
index 1959f70..f03dfdf 100644
--- a/packages/web-view-vite/src/lib/panel-client.ts
+++ b/packages/web-view-vite/src/lib/panel-client.ts
@@ -1,8 +1,7 @@
+import { makeEventListener } from '@solid-primitives/event-listener'
 import type { TRPCLink } from '@trpc/client'
 import { TRPCClientError, createTRPCProxyClient } from '@trpc/client'
 import { observable } from '@trpc/server/observable'
-
-import { makeEventListener } from '@solid-primitives/event-listener'
 import type { PanelRouter } from '../../../extension/src/panel-controller/panel-router'
 import { vscode } from './vscode'
 
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
new file mode 100644
index 0000000..31469c5
--- /dev/null
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -0,0 +1,94 @@
+import { createEffect, createSignal } from 'solid-js'
+import { createEventListener } from '@solid-primitives/event-listener'
+import type { QueryArgs } from '@testing-library/dom'
+import { getSuggestedQuery } from '@testing-library/dom'
+import { deepElementFromPoint } from '../inspector/util'
+import { client } from '../lib/panel-client'
+// import { SelectorComputer } from './selector-gen/SelectorComputer'
+
+export function createRecorder(shadowHost: HTMLDivElement) {
+  const [isRecording, setIsRecording] = createSignal(false)
+
+  createEffect(() => {
+    if (isRecording()) {
+      createEventListener(shadowHost.shadowRoot!, 'click', (e: Event) => {
+        if (!(e instanceof MouseEvent)) {
+          return
+        }
+        const clickedEl = (shadowHost.shadowRoot && deepElementFromPoint(shadowHost.shadowRoot, e.clientX, e.clientY)) ?? e.target
+        if (!(clickedEl instanceof Element)) {
+          return
+        }
+        emitEvent('click', clickedEl)
+      })
+    }
+  })
+
+  async function emitEvent(type: 'click', target: Element) {
+    console.log('target', target)
+
+    // TODO Do I need this?
+    // const selectors = selectorComputer.getSelectors(target)
+    // console.log('selector', selectors)
+
+    if (target instanceof HTMLElement) {
+      // Generate the selector
+      const suggestedQuery = getSuggestedQuery(target)
+      if (suggestedQuery) {
+        const queryArgs = serializeQueryArgs(suggestedQuery.queryArgs)
+        // Send the selector to the extension process to record as code
+        await client.recordInputAsCode.mutate({
+          event: type,
+          query: [
+            suggestedQuery.queryMethod,
+            queryArgs,
+          ],
+        })
+      }
+    }
+    if (type === 'click') {
+      console.log('click', target)
+    }
+  }
+
+  return {
+    isRecording,
+    toggle: (recording: boolean) => {
+      setIsRecording(recording)
+      console.log('recording:', recording)
+    },
+  }
+}
+
+// const selectorComputer = new SelectorComputer({
+//   getAccessibleName: (node: Node) => {
+//     if (node instanceof Element) {
+//       const label = node.getAttribute('aria-label')
+//       const labelledby = node.getAttribute('aria-labelledby')
+
+//       if (label) { return label }
+//       if (labelledby) { return document.getElementById(labelledby)?.textContent ?? '' }
+//     }
+//     return node.textContent ?? ''
+//   },
+//   getAccessibleRole: (node: Node) => {
+//     if (node instanceof Element) {
+//       return node.getAttribute('role') ?? ''
+//     }
+//     return ''
+//   },
+// })
+
+export function serializeQueryArgs(queryArgs: QueryArgs): [string, { [key: string]: string | boolean }?] {
+  const [query, options] = queryArgs
+  if (!options) { return [query] }
+  const serializedOptions = Object.entries(options).reduce((prev, curr) => {
+    const val = curr[1]
+    if (val !== undefined) {
+      prev[curr[0]] = String(curr[1])
+    }
+    return prev
+  }, {} as Record<string, string | boolean>)
+
+  return [query, serializedOptions]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 550f650..258783a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,10 +73,10 @@ importers:
         version: 6.8.0
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@testing-library/user-event':
         specifier: ^14.6.1
-        version: 14.6.1(@testing-library/dom@10.4.0)
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/jest':
         specifier: ^30.0.0
         version: 30.0.0
@@ -110,7 +110,7 @@ importers:
     devDependencies:
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@types/jest':
         specifier: ^30.0.0
         version: 30.0.0
@@ -147,7 +147,7 @@ importers:
         version: 6.8.0
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@types/jest':
         specifier: ^30.0.0
         version: 30.0.0
@@ -184,7 +184,7 @@ importers:
         version: 7.27.1(@babel/core@7.28.3)
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@types/jest':
         specifier: ^30.0.0
         version: 30.0.0
@@ -221,7 +221,7 @@ importers:
         version: 7.27.1(@babel/core@7.28.3)
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@types/jest':
         specifier: ^30.0.0
         version: 30.0.0
@@ -249,7 +249,7 @@ importers:
     devDependencies:
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@types/react':
         specifier: ^19.1.12
         version: 19.1.12
@@ -295,7 +295,7 @@ importers:
         version: 4.1.12(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass@1.91.0)(stylus@0.64.0)(yaml@2.4.2))
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@types/react':
         specifier: ^19.1.12
         version: 19.1.12
@@ -482,6 +482,9 @@ importers:
       '@solid-primitives/mutation-observer':
         specifier: ^1.2.2
         version: 1.2.2(solid-js@1.9.9)
+      '@testing-library/dom':
+        specifier: ^10.4.1
+        version: 10.4.1
       '@trpc/client':
         specifier: ^11.5.0
         version: 11.5.0(@trpc/server@11.5.0(typescript@5.9.2))(typescript@5.9.2)
@@ -672,14 +675,6 @@ packages:
     resolution: {integrity: sha512-lfZtncCSmKvW31Bh3iUBkeTf+Myt85YsamMkGNZ0ayTO5MirOGBgTa3BgUth0kWFBQuhZIRfi5B95INZ+ppkjw==}
     engines: {node: '>=16'}
 
-  '@babel/code-frame@7.23.5':
-    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/code-frame@7.24.2':
-    resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -845,14 +840,6 @@ packages:
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.22.20':
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.24.5':
-    resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-identifier@7.24.6':
     resolution: {integrity: sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==}
     engines: {node: '>=6.9.0'}
@@ -885,14 +872,6 @@ packages:
     resolution: {integrity: sha512-PTNtvUQihsAsDHMOP5pfobP8C6CM4JWXmP8DrEIt46c3r2bf87Ua1zoqevsMo9g+tWDwgWrFP5EIxuBx5RudAw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.23.4':
-    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/highlight@7.24.2':
-    resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/parser@7.24.1':
     resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==}
     engines: {node: '>=6.0.0'}
@@ -3528,8 +3507,8 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
-  '@testing-library/dom@10.4.0':
-    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
 
   '@testing-library/jest-dom@6.8.0':
@@ -4093,10 +4072,6 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -4385,10 +4360,6 @@ packages:
     resolution: {integrity: sha512-5nFxhUrX0PqtyogoYOA8IPswy5sZFTOsBFl/9bNsmDLgsxYTzSZQJDPppDnZPTQbzSEm0hqGjWPzRemQCYbD6A==}
     engines: {node: '>=18'}
 
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -4489,16 +4460,10 @@ packages:
   collect-v8-coverage@1.0.2:
     resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
 
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
@@ -5378,10 +5343,6 @@ packages:
   harmony-reflect@1.6.2:
     resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
 
-  has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -7255,10 +7216,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -8166,16 +8123,6 @@ snapshots:
       jsonwebtoken: 9.0.2
       uuid: 8.3.2
 
-  '@babel/code-frame@7.23.5':
-    dependencies:
-      '@babel/highlight': 7.23.4
-      chalk: 2.4.2
-
-  '@babel/code-frame@7.24.2':
-    dependencies:
-      '@babel/highlight': 7.24.2
-      picocolors: 1.1.1
-
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -8189,7 +8136,7 @@ snapshots:
   '@babel/core@7.24.3':
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.27.1
       '@babel/generator': 7.24.1
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.3)
@@ -8375,7 +8322,7 @@ snapshots:
       '@babel/helper-module-imports': 7.24.3
       '@babel/helper-simple-access': 7.24.5
       '@babel/helper-split-export-declaration': 7.24.5
-      '@babel/helper-validator-identifier': 7.24.5
+      '@babel/helper-validator-identifier': 7.27.1
 
   '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0)':
     dependencies:
@@ -8449,10 +8396,6 @@ snapshots:
 
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.22.20': {}
-
-  '@babel/helper-validator-identifier@7.24.5': {}
-
   '@babel/helper-validator-identifier@7.24.6': {}
 
   '@babel/helper-validator-identifier@7.27.1': {}
@@ -8487,19 +8430,6 @@ snapshots:
       '@babel/template': 7.27.2
       '@babel/types': 7.28.2
 
-  '@babel/highlight@7.23.4':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-
-  '@babel/highlight@7.24.2':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
   '@babel/parser@7.24.1':
     dependencies:
       '@babel/types': 7.24.5
@@ -9238,13 +9168,13 @@ snapshots:
 
   '@babel/template@7.22.15':
     dependencies:
-      '@babel/code-frame': 7.23.5
+      '@babel/code-frame': 7.27.1
       '@babel/parser': 7.24.5
       '@babel/types': 7.24.5
 
   '@babel/template@7.24.0':
     dependencies:
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.27.1
       '@babel/parser': 7.24.1
       '@babel/types': 7.24.0
 
@@ -9256,7 +9186,7 @@ snapshots:
 
   '@babel/traverse@7.24.1':
     dependencies:
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.27.1
       '@babel/generator': 7.24.1
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
@@ -9308,13 +9238,13 @@ snapshots:
   '@babel/types@7.24.0':
     dependencies:
       '@babel/helper-string-parser': 7.23.4
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-validator-identifier': 7.27.1
       to-fast-properties: 2.0.0
 
   '@babel/types@7.24.5':
     dependencies:
       '@babel/helper-string-parser': 7.24.1
-      '@babel/helper-validator-identifier': 7.24.5
+      '@babel/helper-validator-identifier': 7.27.1
       to-fast-properties: 2.0.0
 
   '@babel/types@7.27.6':
@@ -11242,15 +11172,15 @@ snapshots:
       tailwindcss: 4.1.12
       vite: 7.1.3(@types/node@24.3.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass@1.91.0)(stylus@0.64.0)(yaml@2.4.2)
 
-  '@testing-library/dom@10.4.0':
+  '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/runtime': 7.28.3
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
-      chalk: 4.1.2
       dom-accessibility-api: 0.5.16
       lz-string: 1.5.0
+      picocolors: 1.1.1
       pretty-format: 27.5.1
 
   '@testing-library/jest-dom@6.8.0':
@@ -11262,19 +11192,19 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+  '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@babel/runtime': 7.28.3
-      '@testing-library/dom': 10.4.0
+      '@testing-library/dom': 10.4.1
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
     optionalDependencies:
       '@types/react': 19.1.12
       '@types/react-dom': 18.3.0
 
-  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
-      '@testing-library/dom': 10.4.0
+      '@testing-library/dom': 10.4.1
 
   '@textlint/ast-node-types@15.2.0': {}
 
@@ -11913,10 +11843,6 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -12273,12 +12199,6 @@ snapshots:
       loupe: 3.2.0
       pathval: 2.0.1
 
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -12378,16 +12298,10 @@ snapshots:
 
   collect-v8-coverage@1.0.2: {}
 
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
-
   color-name@1.1.4: {}
 
   color-string@1.9.1:
@@ -13401,8 +13315,6 @@ snapshots:
 
   harmony-reflect@1.6.2: {}
 
-  has-flag@3.0.0: {}
-
   has-flag@4.0.0: {}
 
   has-property-descriptors@1.0.2:
@@ -13950,7 +13862,7 @@ snapshots:
 
   jest-message-util@29.7.0:
     dependencies:
-      '@babel/code-frame': 7.23.5
+      '@babel/code-frame': 7.27.1
       '@jest/types': 29.6.3
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
@@ -14913,7 +14825,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.27.1
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -15729,10 +15641,6 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  supports-color@5.5.0:
-    dependencies:
-      has-flag: 3.0.0
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0

From d8221ae5ef32110d87456bb6dc3f22d11375f770 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 6 Sep 2025 17:26:57 -0400
Subject: [PATCH 02/98] recorder WIP

- generated code is inserted before the breakpoint (needs rolling offset)
---
 .../src/panel-controller/panel-router.ts      | 52 +++++++++++++++++--
 .../src/util/debug-session-tracker.ts         |  6 +--
 .../web-view-vite/src/recorder/recorder.ts    | 13 ++---
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 29b0f60..b12b486 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -178,17 +178,59 @@ export const panelRouter = t.router({
     .input(
       z.object({
         event: z.string(),
-        query: z.tuple([z.string(), z.array(z.unknown())]),
+        query: z.tuple([
+          z.string(),
+          z.tuple([z.string(), z.optional(
+            z.record(z.string(), z.union([z.string(), z.boolean()])),
+          )]),
+        ]),
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const { event, query: [method, args] } = input
-      const code = `fireEvent.${method}(${args.map(arg => JSON.stringify(arg)).join(', ')})`
+      const { event, query: [method, [queryArg0, queryOptions]] } = input
+
+      const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
+        (result, entry) => {
+          const [key, val] = entry
+          result[key] = typeof val === 'string' ? new RegExp(val) : val
+          return result
+        },
+        {} as Record<string, RegExp | boolean>,
+      )
+
+      const queryArgsStr = (() => {
+        let result = `'${queryArg0}'`
+        if (!parsedQueryOptions) {
+          return result
+        }
+        const entries = Object.entries(parsedQueryOptions).map(([key, val]) => {
+          return `${key}: ${String(val)}`
+        })
+        let optionsStr = entries.join(', ')
+        if (entries.length > 0) {
+          optionsStr = `{ ${optionsStr} }`
+          result += `, ${optionsStr}`
+        }
+        return result
+      })()
+
+      const code = `fireEvent.${event}(${method}(${queryArgsStr}))`
 
       const pausedLocation = await ctx.sessionTracker.getPausedLocation()
 
-      console.log('code is ', code)
-      console.log('todo generate code at ', pausedLocation)
+      if (!pausedLocation) {
+        return
+      }
+
+      const editor = vscode.window.visibleTextEditors.find(
+        editor => editor.document.uri.path === pausedLocation.filePath.toString(),
+      )
+      if (editor && pausedLocation) {
+        const position = new vscode.Position(pausedLocation.lineNumber - 1, pausedLocation.indent)
+        await editor.edit((editBuilder) => {
+          editBuilder.insert(position, `${code}\n`)
+        })
+      }
 
       // const resultStr = await ctx.sessionTracker.runDebugExpression(
       //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
diff --git a/packages/extension/src/util/debug-session-tracker.ts b/packages/extension/src/util/debug-session-tracker.ts
index 0c8a0ad..03dba6e 100644
--- a/packages/extension/src/util/debug-session-tracker.ts
+++ b/packages/extension/src/util/debug-session-tracker.ts
@@ -59,7 +59,7 @@ export function startDebugSessionTracker(
   }
 
   interface DebugPauseLocation {
-    fileUri: string
+    filePath: string
     lineNumber: number
     indent: number
   }
@@ -80,8 +80,8 @@ export function startDebugSessionTracker(
         const fileUri = frame.source?.path
         const lineNumber = frame.line
         const indent = frame.column - 1
-        vscode.window.showInformationMessage(`Stopped at ${fileUri}:${lineNumber}`)
-        return { fileUri, lineNumber, indent }
+        const filePath = vscode.Uri.parse(fileUri).fsPath
+        return { filePath, lineNumber, indent }
       }
       else {
         vscode.window.showInformationMessage('No stack frames')
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 31469c5..2c60fda 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -35,14 +35,11 @@ export function createRecorder(shadowHost: HTMLDivElement) {
       // Generate the selector
       const suggestedQuery = getSuggestedQuery(target)
       if (suggestedQuery) {
-        const queryArgs = serializeQueryArgs(suggestedQuery.queryArgs)
+        const query = serializeQueryArgs(suggestedQuery.queryArgs)
         // Send the selector to the extension process to record as code
         await client.recordInputAsCode.mutate({
           event: type,
-          query: [
-            suggestedQuery.queryMethod,
-            queryArgs,
-          ],
+          query: [suggestedQuery.queryMethod, query],
         })
       }
     }
@@ -79,13 +76,17 @@ export function createRecorder(shadowHost: HTMLDivElement) {
 //   },
 // })
 
+/**
+ * Convert the queryArgs from testing-library to JSON to be sent to the extension process.
+ * Mainly to convert the RegExp to a string before sending it.
+ */
 export function serializeQueryArgs(queryArgs: QueryArgs): [string, { [key: string]: string | boolean }?] {
   const [query, options] = queryArgs
   if (!options) { return [query] }
   const serializedOptions = Object.entries(options).reduce((prev, curr) => {
     const val = curr[1]
     if (val !== undefined) {
-      prev[curr[0]] = String(curr[1])
+      prev[curr[0]] = val instanceof RegExp ? String(val) : val
     }
     return prev
   }, {} as Record<string, string | boolean>)

From ccbb6a0b4473067810754c59913df6fcdce66592 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 6 Sep 2025 18:45:09 -0400
Subject: [PATCH 03/98] recorder WIP

- make test framework/library info available to codegen
- refactor codegen into new file
---
 packages/extension/src/debug-config.ts        | 10 +---
 packages/extension/src/extension.ts           | 29 ++++++---
 .../{detect.ts => detect-test-framework.ts}   |  6 +-
 .../framework-support/detect-test-library.ts  | 35 +++++++++++
 .../src/framework-support/jest-support.ts     |  2 +-
 .../src/panel-controller/panel-controller.ts  |  9 ++-
 .../src/panel-controller/panel-router.ts      | 57 +++---------------
 .../src/recorder/record-input-as-code.ts      | 60 +++++++++++++++++++
 .../test/detect-test-framework.test.ts        |  2 +-
 9 files changed, 138 insertions(+), 72 deletions(-)
 rename packages/extension/src/framework-support/{detect.ts => detect-test-framework.ts} (96%)
 create mode 100644 packages/extension/src/framework-support/detect-test-library.ts
 create mode 100644 packages/extension/src/recorder/record-input-as-code.ts

diff --git a/packages/extension/src/debug-config.ts b/packages/extension/src/debug-config.ts
index f18e882..5b0adba 100644
--- a/packages/extension/src/debug-config.ts
+++ b/packages/extension/src/debug-config.ts
@@ -1,23 +1,19 @@
+import { findUp } from 'find-up'
 import path from 'pathe'
 import type vscode from 'vscode'
-import type { z } from 'zod/mini'
-import { findUp } from 'find-up'
-import type { zFrameworkSetting } from './extension'
-import { detectTestFramework } from './framework-support/detect'
+import type { TestFrameworkInfo } from './framework-support/detect-test-framework'
 import { jestDebugConfig } from './framework-support/jest-support'
 import { vitestDebugConfig } from './framework-support/vitest-support'
 
 const DEBUG_NAME = 'Visually Debug UI'
 
 export async function makeDebugConfig(
+  fwInfo: TestFrameworkInfo,
   testFile: string,
   testName: string,
-  frameworkSetting: z.infer<typeof zFrameworkSetting>,
   htmlUpdaterPort: number,
   testCssFiles?: string[],
 ) {
-  const fwInfo = await detectTestFramework(testFile, frameworkSetting)
-
   const pkgPath = await findUp('package.json', { cwd: testFile })
   if (!pkgPath) {
     throw new Error(`Could not find related package.json for test file ${testFile}`)
diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 4f92961..baf7af2 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -4,6 +4,7 @@ import { TelemetryReporter } from '@vscode/extension-telemetry'
 import path from 'pathe'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
+import once from 'lodash/once'
 import { autoSetFirstBreakpoint } from './auto-set-first-breakpoint'
 import { codeLensProvider } from './code-lens-provider'
 import { makeDebugConfig } from './debug-config'
@@ -12,6 +13,8 @@ import { startPanelController } from './panel-controller/panel-controller'
 import { startDebugSessionTracker } from './util/debug-session-tracker'
 import { extensionSetting } from './util/extension-setting'
 import { hotReload } from './util/hot-reload'
+import { detectTestFramework } from './framework-support/detect-test-framework'
+import { detectTestLibrary } from './framework-support/detect-test-library'
 
 const reporter = (() => {
   try {
@@ -104,10 +107,26 @@ export let visuallyDebugUI = async (
     throw new TypeError(`Expected string argument \"testName\", received ${testName}`)
   }
 
+  const frameworkSetting = (() => {
+    const parsed = zFrameworkSetting
+      .safeParse(extensionSetting('ui-test-visualizer.testFramework'))
+    return parsed.success ? parsed.data : 'autodetect'
+  })()
+
+  const fwInfo = await detectTestFramework(testFile, frameworkSetting)
+
   // Save the test file before starting the debug session
   await vscode.window.activeTextEditor?.document.save()
 
-  const panelController = await startPanelController(extensionContext, storage)
+  const testLibraryInfo = once(async () => {
+    const testingLibrary = await detectTestLibrary(testFile)
+    return {
+      framework: fwInfo.framework,
+      testingLibrary,
+    }
+  })
+
+  const panelController = await startPanelController(extensionContext, storage, testLibraryInfo)
 
   const onStartDebug = vscode.debug.onDidStartDebugSession(async (currentSession) => {
     onStartDebug.dispose()
@@ -144,16 +163,10 @@ export let visuallyDebugUI = async (
     )
   })
 
-  const frameworkSetting = (() => {
-    const parsed = zFrameworkSetting
-      .safeParse(extensionSetting('ui-test-visualizer.testFramework'))
-    return parsed.success ? parsed.data : 'autodetect'
-  })()
-
   const debugConfig = await makeDebugConfig(
+    fwInfo,
     testFile,
     testName,
-    frameworkSetting,
     panelController.htmlUpdaterPort,
     await storage.get('enabledCssFiles'),
   )
diff --git a/packages/extension/src/framework-support/detect.ts b/packages/extension/src/framework-support/detect-test-framework.ts
similarity index 96%
rename from packages/extension/src/framework-support/detect.ts
rename to packages/extension/src/framework-support/detect-test-framework.ts
index 73f6727..9dbab6e 100644
--- a/packages/extension/src/framework-support/detect.ts
+++ b/packages/extension/src/framework-support/detect-test-framework.ts
@@ -2,14 +2,16 @@ import path from 'pathe'
 import { findUp, findUpMultiple } from 'find-up'
 import { readInitialOptions } from 'jest-config'
 
+export type SupportedFramework = 'vitest' | 'jest'
+
 export interface TestFrameworkInfo {
-  framework: 'jest' | 'vitest'
+  framework: SupportedFramework
   configPath: string
 }
 
 export async function detectTestFramework(
   testFilePath: string,
-  frameworkSetting: 'autodetect' | 'vitest' | 'jest',
+  frameworkSetting: 'autodetect' | SupportedFramework,
 ): Promise<TestFrameworkInfo> {
   // auto detect test config files
 
diff --git a/packages/extension/src/framework-support/detect-test-library.ts b/packages/extension/src/framework-support/detect-test-library.ts
new file mode 100644
index 0000000..2996c8e
--- /dev/null
+++ b/packages/extension/src/framework-support/detect-test-library.ts
@@ -0,0 +1,35 @@
+import type { SupportedFramework } from './detect-test-framework'
+
+export const SUPPORTED_TESTING_LIBRARIES = [
+  '@solidjs/testing-library',
+  '@testing-library/react',
+  '@testing-library/dom',
+] as const
+
+export type TestingLibrary = typeof SUPPORTED_TESTING_LIBRARIES[number]
+
+export interface TestLibraryInfo {
+  framework: SupportedFramework
+  testingLibrary: TestingLibrary | null
+}
+
+export async function detectTestLibrary(testFilePath: string): Promise<TestingLibrary | null> {
+  // Lookup the test framework in node_modules
+  const detectedLibrary = (() => {
+    for (const testingLibrary of SUPPORTED_TESTING_LIBRARIES) {
+      const resolved = (() => {
+        try {
+          return require.resolve(testingLibrary, { paths: [testFilePath] })
+        }
+        catch {
+          return undefined
+        }
+      })()
+      if (resolved) {
+        return testingLibrary
+      }
+    }
+  })() ?? null
+
+  return detectedLibrary
+}
diff --git a/packages/extension/src/framework-support/jest-support.ts b/packages/extension/src/framework-support/jest-support.ts
index e78a72d..062a72c 100644
--- a/packages/extension/src/framework-support/jest-support.ts
+++ b/packages/extension/src/framework-support/jest-support.ts
@@ -2,7 +2,7 @@ import { findUp, findUpSync } from 'find-up'
 import { readInitialOptions } from 'jest-config'
 import path from 'pathe'
 import type * as vscode from 'vscode'
-import type { TestFrameworkInfo } from './detect'
+import type { TestFrameworkInfo } from './detect-test-framework'
 import { cleanTestNameForTerminal } from './util'
 
 function buildPath() {
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index 908d02e..5949226 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -1,9 +1,10 @@
-import path from 'pathe'
+import { TRPCError, callTRPCProcedure } from '@trpc/server'
 import getPort from 'get-port'
+import path from 'pathe'
+import type { HTMLPatch } from 'replicate-dom'
 import * as vscode from 'vscode'
 import type { Server as WsServer } from 'ws'
-import type { HTMLPatch } from 'replicate-dom'
-import { TRPCError, callTRPCProcedure } from '@trpc/server'
+import type { TestLibraryInfo } from '../framework-support/detect-test-library'
 import type { MyStorageType } from '../my-extension-storage'
 import type { DebugSessionTracker } from '../util/debug-session-tracker'
 import { type PanelRouterCtx, panelRouter } from './panel-router'
@@ -15,6 +16,7 @@ const Server = require('../../node_modules/ws/lib/websocket-server') as typeof W
 export async function startPanelController(
   extensionContext: vscode.ExtensionContext,
   storage: MyStorageType,
+  testLibraryInfo: () => Promise<TestLibraryInfo>,
 ) {
   const htmlUpdaterPort = await getPort()
   const viteDevServerPort = 5173
@@ -117,6 +119,7 @@ export async function startPanelController(
             sessionTracker,
             storage,
             flushPatches,
+            testLibraryInfo,
           }
           const result = await callTRPCProcedure({
             router: panelRouter,
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index b12b486..0820da1 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -1,15 +1,18 @@
+import { initTRPC } from '@trpc/server'
 import path from 'pathe'
 import * as vscode from 'vscode'
-import { initTRPC } from '@trpc/server'
 import { z } from 'zod/mini'
-import { workspaceCssFiles } from '../util/workspace-css-files'
+import type { TestLibraryInfo } from '../framework-support/detect-test-library'
 import type { MyStorageType } from '../my-extension-storage'
 import type { DebugSessionTracker } from '../util/debug-session-tracker'
+import { workspaceCssFiles } from '../util/workspace-css-files'
+import { recordInputAsCode } from '../recorder/record-input-as-code'
 
 export interface PanelRouterCtx {
   sessionTracker: DebugSessionTracker
   storage: MyStorageType
   flushPatches: () => void
+  testLibraryInfo: () => Promise<TestLibraryInfo>
 }
 
 const t = initTRPC.context<PanelRouterCtx>().create()
@@ -188,54 +191,8 @@ export const panelRouter = t.router({
     )
     .mutation(async ({ ctx, input }) => {
       const { event, query: [method, [queryArg0, queryOptions]] } = input
-
-      const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
-        (result, entry) => {
-          const [key, val] = entry
-          result[key] = typeof val === 'string' ? new RegExp(val) : val
-          return result
-        },
-        {} as Record<string, RegExp | boolean>,
-      )
-
-      const queryArgsStr = (() => {
-        let result = `'${queryArg0}'`
-        if (!parsedQueryOptions) {
-          return result
-        }
-        const entries = Object.entries(parsedQueryOptions).map(([key, val]) => {
-          return `${key}: ${String(val)}`
-        })
-        let optionsStr = entries.join(', ')
-        if (entries.length > 0) {
-          optionsStr = `{ ${optionsStr} }`
-          result += `, ${optionsStr}`
-        }
-        return result
-      })()
-
-      const code = `fireEvent.${event}(${method}(${queryArgsStr}))`
-
-      const pausedLocation = await ctx.sessionTracker.getPausedLocation()
-
-      if (!pausedLocation) {
-        return
-      }
-
-      const editor = vscode.window.visibleTextEditors.find(
-        editor => editor.document.uri.path === pausedLocation.filePath.toString(),
-      )
-      if (editor && pausedLocation) {
-        const position = new vscode.Position(pausedLocation.lineNumber - 1, pausedLocation.indent)
-        await editor.edit((editBuilder) => {
-          editBuilder.insert(position, `${code}\n`)
-        })
-      }
-
-      // const resultStr = await ctx.sessionTracker.runDebugExpression(
-      //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
-      // )
-      // ctx.flushPatches()
+      const testLibraryInfo = await ctx.testLibraryInfo()
+      await recordInputAsCode(ctx.sessionTracker, testLibraryInfo, event, method, queryArg0, queryOptions)
     }),
 })
 
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
new file mode 100644
index 0000000..042a043
--- /dev/null
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -0,0 +1,60 @@
+import * as vscode from 'vscode'
+import type { DebugSessionTracker } from '../util/debug-session-tracker'
+import type { TestLibraryInfo } from '../framework-support/detect-test-library'
+
+export async function recordInputAsCode(
+  sessionTracker: DebugSessionTracker,
+  testLibraryInfo: TestLibraryInfo,
+  event: string,
+  method: string,
+  queryArg0: string,
+  queryOptions: Record<string, string | boolean> | undefined,
+) {
+  const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
+    (result, entry) => {
+      const [key, val] = entry
+      result[key] = typeof val === 'string' ? new RegExp(val) : val
+      return result
+    },
+    {} as Record<string, RegExp | boolean>,
+  )
+
+  const queryArgsStr = (() => {
+    let result = `'${queryArg0}'`
+    if (!parsedQueryOptions) {
+      return result
+    }
+    const entries = Object.entries(parsedQueryOptions).map(([key, val]) => {
+      return `${key}: ${String(val)}`
+    })
+    let optionsStr = entries.join(', ')
+    if (entries.length > 0) {
+      optionsStr = `{ ${optionsStr} }`
+      result += `, ${optionsStr}`
+    }
+    return result
+  })()
+
+  const code = `fireEvent.${event}(${method}(${queryArgsStr}))`
+
+  const pausedLocation = await sessionTracker.getPausedLocation()
+
+  if (!pausedLocation) {
+    return
+  }
+
+  const editor = vscode.window.visibleTextEditors.find(
+    editor => editor.document.uri.path === pausedLocation.filePath.toString(),
+  )
+  if (editor && pausedLocation) {
+    const position = new vscode.Position(pausedLocation.lineNumber - 1, pausedLocation.indent)
+    await editor.edit((editBuilder) => {
+      editBuilder.insert(position, `${code}\n`)
+    })
+  }
+
+  // const resultStr = await ctx.sessionTracker.runDebugExpression(
+  //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
+  // )
+  // ctx.flushPatches()
+}
diff --git a/packages/extension/test/detect-test-framework.test.ts b/packages/extension/test/detect-test-framework.test.ts
index 7e87d0d..41534b8 100644
--- a/packages/extension/test/detect-test-framework.test.ts
+++ b/packages/extension/test/detect-test-framework.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import path from 'pathe'
-import { detectTestFramework } from '../src/framework-support/detect'
+import { detectTestFramework } from '../src/framework-support/detect-test-framework'
 
 const examplesPath = path.join(__dirname, '../../../examples')
 

From 6be81a81fdfa697ad71e2008d5ef085019f6f925 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 6 Sep 2025 20:10:29 -0400
Subject: [PATCH 04/98] recorder WIP

- setup recorder state retained during debug run
---
 packages/extension/src/extension.ts           | 12 ++---
 .../src/panel-controller/panel-controller.ts  |  5 +-
 .../src/panel-controller/panel-router.ts      |  8 ++--
 .../src/recorder/record-input-as-code.ts      | 47 ++++++++++++++-----
 .../src/util/debug-session-tracker.ts         |  4 +-
 5 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index baf7af2..6251749 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -15,6 +15,7 @@ import { extensionSetting } from './util/extension-setting'
 import { hotReload } from './util/hot-reload'
 import { detectTestFramework } from './framework-support/detect-test-framework'
 import { detectTestLibrary } from './framework-support/detect-test-library'
+import { initRecorderState } from './recorder/record-input-as-code'
 
 const reporter = (() => {
   try {
@@ -118,15 +119,10 @@ export let visuallyDebugUI = async (
   // Save the test file before starting the debug session
   await vscode.window.activeTextEditor?.document.save()
 
-  const testLibraryInfo = once(async () => {
-    const testingLibrary = await detectTestLibrary(testFile)
-    return {
-      framework: fwInfo.framework,
-      testingLibrary,
-    }
-  })
+  // Only initialize the recorder state once per debug session
+  const recorderState = once(() => initRecorderState(testFile, fwInfo.framework))
 
-  const panelController = await startPanelController(extensionContext, storage, testLibraryInfo)
+  const panelController = await startPanelController(extensionContext, storage, recorderState)
 
   const onStartDebug = vscode.debug.onDidStartDebugSession(async (currentSession) => {
     onStartDebug.dispose()
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index 5949226..2b14cce 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -7,6 +7,7 @@ import type { Server as WsServer } from 'ws'
 import type { TestLibraryInfo } from '../framework-support/detect-test-library'
 import type { MyStorageType } from '../my-extension-storage'
 import type { DebugSessionTracker } from '../util/debug-session-tracker'
+import type { RecorderState } from '../recorder/record-input-as-code'
 import { type PanelRouterCtx, panelRouter } from './panel-router'
 
 // Avoids import errors when importing in Vitest
@@ -16,7 +17,7 @@ const Server = require('../../node_modules/ws/lib/websocket-server') as typeof W
 export async function startPanelController(
   extensionContext: vscode.ExtensionContext,
   storage: MyStorageType,
-  testLibraryInfo: () => Promise<TestLibraryInfo>,
+  recorderState: () => Promise<RecorderState>,
 ) {
   const htmlUpdaterPort = await getPort()
   const viteDevServerPort = 5173
@@ -119,7 +120,7 @@ export async function startPanelController(
             sessionTracker,
             storage,
             flushPatches,
-            testLibraryInfo,
+            recorderState,
           }
           const result = await callTRPCProcedure({
             router: panelRouter,
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 0820da1..aff2c64 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -2,17 +2,17 @@ import { initTRPC } from '@trpc/server'
 import path from 'pathe'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
-import type { TestLibraryInfo } from '../framework-support/detect-test-library'
 import type { MyStorageType } from '../my-extension-storage'
 import type { DebugSessionTracker } from '../util/debug-session-tracker'
 import { workspaceCssFiles } from '../util/workspace-css-files'
+import type { RecorderState } from '../recorder/record-input-as-code'
 import { recordInputAsCode } from '../recorder/record-input-as-code'
 
 export interface PanelRouterCtx {
   sessionTracker: DebugSessionTracker
   storage: MyStorageType
   flushPatches: () => void
-  testLibraryInfo: () => Promise<TestLibraryInfo>
+  recorderState: () => Promise<RecorderState>
 }
 
 const t = initTRPC.context<PanelRouterCtx>().create()
@@ -191,8 +191,8 @@ export const panelRouter = t.router({
     )
     .mutation(async ({ ctx, input }) => {
       const { event, query: [method, [queryArg0, queryOptions]] } = input
-      const testLibraryInfo = await ctx.testLibraryInfo()
-      await recordInputAsCode(ctx.sessionTracker, testLibraryInfo, event, method, queryArg0, queryOptions)
+      const recorderState = await ctx.recorderState()
+      await recordInputAsCode(ctx.sessionTracker, recorderState, event, method, queryArg0, queryOptions)
     }),
 })
 
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 042a043..da92725 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,15 +1,40 @@
 import * as vscode from 'vscode'
+import type { SupportedFramework } from '../framework-support/detect-test-framework'
+import { detectTestLibrary } from '../framework-support/detect-test-library'
 import type { DebugSessionTracker } from '../util/debug-session-tracker'
-import type { TestLibraryInfo } from '../framework-support/detect-test-library'
+
+export type RecorderState = Awaited<ReturnType<typeof initRecorderState>>
+
+export async function initRecorderState(testFile: string, framework: SupportedFramework) {
+  return {
+    testLibraryInfo: {
+      framework,
+      testingLibrary: await detectTestLibrary(testFile),
+    },
+    offset: 0,
+  }
+}
 
 export async function recordInputAsCode(
   sessionTracker: DebugSessionTracker,
-  testLibraryInfo: TestLibraryInfo,
+  state: RecorderState,
   event: string,
-  method: string,
+  findMethod: string,
   queryArg0: string,
   queryOptions: Record<string, string | boolean> | undefined,
 ) {
+  const pausedLocation = await sessionTracker.getPausedLocation()
+  if (!pausedLocation) {
+    return
+  }
+
+  const editor = vscode.window.visibleTextEditors.find(
+    editor => editor.document.uri.path === pausedLocation.filePath.toString(),
+  )
+  if (!editor) {
+    return
+  }
+
   const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
     (result, entry) => {
       const [key, val] = entry
@@ -35,21 +60,17 @@ export async function recordInputAsCode(
     return result
   })()
 
-  const code = `fireEvent.${event}(${method}(${queryArgsStr}))`
-
-  const pausedLocation = await sessionTracker.getPausedLocation()
+  let code = `fireEvent.${event}(${findMethod}(${queryArgsStr}))`
 
-  if (!pausedLocation) {
-    return
-  }
+  const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
+  const indent = line.text.match(/^\s*/)?.[0] || ''
+  code = `${indent}${code}`
 
-  const editor = vscode.window.visibleTextEditors.find(
-    editor => editor.document.uri.path === pausedLocation.filePath.toString(),
-  )
   if (editor && pausedLocation) {
-    const position = new vscode.Position(pausedLocation.lineNumber - 1, pausedLocation.indent)
+    const position = new vscode.Position(pausedLocation.lineNumber - 1 + state.offset, 0)
     await editor.edit((editBuilder) => {
       editBuilder.insert(position, `${code}\n`)
+      state.offset += 1
     })
   }
 
diff --git a/packages/extension/src/util/debug-session-tracker.ts b/packages/extension/src/util/debug-session-tracker.ts
index 03dba6e..960bdd0 100644
--- a/packages/extension/src/util/debug-session-tracker.ts
+++ b/packages/extension/src/util/debug-session-tracker.ts
@@ -61,7 +61,6 @@ export function startDebugSessionTracker(
   interface DebugPauseLocation {
     filePath: string
     lineNumber: number
-    indent: number
   }
 
   async function getPausedLocation(): Promise<DebugPauseLocation | null> {
@@ -79,9 +78,8 @@ export function startDebugSessionTracker(
         const frame = response.stackFrames[0]
         const fileUri = frame.source?.path
         const lineNumber = frame.line
-        const indent = frame.column - 1
         const filePath = vscode.Uri.parse(fileUri).fsPath
-        return { filePath, lineNumber, indent }
+        return { filePath, lineNumber }
       }
       else {
         vscode.window.showInformationMessage('No stack frames')

From 9e75480690391b8d24e7dca6cf29f213d728b403 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 6 Sep 2025 20:34:48 -0400
Subject: [PATCH 05/98] fix tests

---
 packages/extension/test/compat.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/extension/test/compat.test.ts b/packages/extension/test/compat.test.ts
index 1170a14..4f8daa7 100644
--- a/packages/extension/test/compat.test.ts
+++ b/packages/extension/test/compat.test.ts
@@ -5,6 +5,7 @@ import path from 'pathe'
 import { beforeAll, describe, expect, it } from 'vitest'
 import type { Server as WsServer } from 'ws'
 import { makeDebugConfig } from '../src/debug-config'
+import { detectTestFramework } from '../src/framework-support/detect-test-framework'
 
 describe('tool compatibility', async () => {
   it('works with Jest + SWC + Nextjs', async () => {
@@ -105,10 +106,11 @@ describe('tool compatibility', async () => {
     testFile: string,
     testName: string,
   ) {
+    const fwInfo = await detectTestFramework(path.join(examplesPath, testFile), 'autodetect')
     const cfg = await makeDebugConfig(
+      fwInfo,
       path.join(examplesPath, testFile),
       testName,
-      'autodetect',
       htmlUpdaterPort,
       [],
     )

From 4d761eed887d311e8cd79207f46860e949c78e27 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 8 Sep 2025 01:38:55 -0400
Subject: [PATCH 06/98] fix type error

---
 packages/extension/src/recorder/record-input-as-code.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index da92725..2f4829b 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,7 +1,7 @@
 import * as vscode from 'vscode'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import { detectTestLibrary } from '../framework-support/detect-test-library'
-import type { DebugSessionTracker } from '../util/debug-session-tracker'
+import type { DebuggerTracker } from '../util/debugger-tracker'
 
 export type RecorderState = Awaited<ReturnType<typeof initRecorderState>>
 
@@ -16,7 +16,7 @@ export async function initRecorderState(testFile: string, framework: SupportedFr
 }
 
 export async function recordInputAsCode(
-  sessionTracker: DebugSessionTracker,
+  sessionTracker: DebuggerTracker,
   state: RecorderState,
   event: string,
   findMethod: string,

From 1b8c4332ae300908d6ed299497e5c2595903949d Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 11 Sep 2025 00:48:35 -0400
Subject: [PATCH 07/98] recorder WIP

- Clean up back-end recorder setup code
- Improve selector generation in front end code
---
 packages/extension/src/extension.ts           |  13 +-
 .../src/panel-controller/panel-controller.ts  |   8 +-
 .../src/panel-controller/panel-router.ts      |  16 +-
 .../src/recorder/record-input-as-code.ts      | 152 ++++++++++--------
 .../web-view-vite/src/recorder/recorder.ts    |  82 +++++-----
 5 files changed, 145 insertions(+), 126 deletions(-)

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 64b0dd5..0b91214 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -1,21 +1,20 @@
 import '@total-typescript/ts-reset'
 
 import { TelemetryReporter } from '@vscode/extension-telemetry'
+import once from 'lodash/once'
 import path from 'pathe'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
-import once from 'lodash/once'
 import { autoSetFirstBreakpoint } from './auto-set-first-breakpoint'
 import { codeLensProvider } from './code-lens-provider'
 import { makeDebugConfig } from './debug-config'
+import { detectTestFramework } from './framework-support/detect-test-framework'
 import { myExtensionStorage } from './my-extension-storage'
 import { startPanelController } from './panel-controller/panel-controller'
+import { startRecorderCodeGenSession } from './recorder/record-input-as-code'
 import { startDebuggerTracker } from './util/debugger-tracker'
 import { extensionSetting } from './util/extension-setting'
 import { hotReload } from './util/hot-reload'
-import { detectTestFramework } from './framework-support/detect-test-framework'
-import { detectTestLibrary } from './framework-support/detect-test-library'
-import { initRecorderState } from './recorder/record-input-as-code'
 
 const reporter = (() => {
   try {
@@ -120,14 +119,14 @@ export let visuallyDebugUI = async (
   await vscode.window.activeTextEditor?.document.save()
 
   // Only initialize the recorder state once per debug session
-  const recorderState = once(() => initRecorderState(testFile, fwInfo.framework))
+  const recorderCodeGenSession = once(() => startRecorderCodeGenSession(testFile, fwInfo.framework))
 
-  const panelController = await startPanelController(extensionContext, storage, recorderState)
+  const panelController = await startPanelController(extensionContext, storage, recorderCodeGenSession)
 
   const onStartDebug = vscode.debug.onDidStartDebugSession(async (currentSession) => {
     onStartDebug.dispose()
 
-    const sessionTracker = await startDebuggerTracker(
+    const sessionTracker = startDebuggerTracker(
       currentSession,
       {
         onFrameChange: () => panelController.flushPatches(),
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index d420f03..ddba5c7 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -5,7 +5,7 @@ import type { HTMLPatch } from 'replicate-dom'
 import * as vscode from 'vscode'
 import type { Server as WsServer } from 'ws'
 import type { MyStorageType } from '../my-extension-storage'
-import type { RecorderState } from '../recorder/record-input-as-code'
+import type { RecorderCodeGenSession } from '../recorder/record-input-as-code'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 import { type PanelRouterCtx, panelRouter } from './panel-router'
 
@@ -16,7 +16,7 @@ const Server = require('../../node_modules/ws/lib/websocket-server') as typeof W
 export async function startPanelController(
   extensionContext: vscode.ExtensionContext,
   storage: MyStorageType,
-  recorderState: () => Promise<RecorderState>,
+  recorderCodeGenSession: () => Promise<RecorderCodeGenSession>,
 ) {
   const htmlUpdaterPort = await getPort()
   const viteDevServerPort = 5173
@@ -115,7 +115,7 @@ export async function startPanelController(
           return prodHtml
         }
 
-        throw new Error('Unknown NODE_ENV')
+        throw new Error(`Unknown NODE_ENV ${process.env.NODE_ENV}`)
       })()
 
       panel.webview.html = html
@@ -128,7 +128,7 @@ export async function startPanelController(
             sessionTracker,
             storage,
             flushPatches,
-            recorderState,
+            recorderCodeGenSession,
           }
           const result = await callTRPCProcedure({
             router: panelRouter,
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index cb6e13a..68df437 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -3,8 +3,7 @@ import path from 'pathe'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
 import type { MyStorageType } from '../my-extension-storage'
-import type { RecorderState } from '../recorder/record-input-as-code'
-import { recordInputAsCode } from '../recorder/record-input-as-code'
+import { type RecorderCodeGenSession, zSerializedRegexp } from '../recorder/record-input-as-code'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 import { workspaceCssFiles } from '../util/workspace-css-files'
 
@@ -12,7 +11,7 @@ export interface PanelRouterCtx {
   sessionTracker: DebuggerTracker
   storage: MyStorageType
   flushPatches: () => void
-  recorderState: () => Promise<RecorderState>
+  recorderCodeGenSession: () => Promise<RecorderCodeGenSession>
 }
 
 const t = initTRPC.context<PanelRouterCtx>().create()
@@ -183,16 +182,17 @@ export const panelRouter = t.router({
         event: z.string(),
         query: z.tuple([
           z.string(),
-          z.tuple([z.string(), z.optional(
-            z.record(z.string(), z.union([z.string(), z.boolean()])),
-          )]),
+          z.tuple([
+            z.union([z.string(), zSerializedRegexp]),
+            z.optional(z.record(z.string(), z.union([z.string(), z.boolean(), zSerializedRegexp]))),
+          ]),
         ]),
       }),
     )
     .mutation(async ({ ctx, input }) => {
       const { event, query: [method, [queryArg0, queryOptions]] } = input
-      const recorderState = await ctx.recorderState()
-      await recordInputAsCode(ctx.sessionTracker, recorderState, event, method, queryArg0, queryOptions)
+      const recorderCodeGenSession = await ctx.recorderCodeGenSession()
+      await recorderCodeGenSession.recordInputAsCode(ctx.sessionTracker, event, method, queryArg0, queryOptions)
     }),
 })
 
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 2f4829b..8bc6036 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,81 +1,103 @@
 import * as vscode from 'vscode'
+import { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import { detectTestLibrary } from '../framework-support/detect-test-library'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 
-export type RecorderState = Awaited<ReturnType<typeof initRecorderState>>
+export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
-export async function initRecorderState(testFile: string, framework: SupportedFramework) {
-  return {
-    testLibraryInfo: {
-      framework,
-      testingLibrary: await detectTestLibrary(testFile),
-    },
-    offset: 0,
-  }
-}
+export type SerializedRegexp = z.infer<typeof zSerializedRegexp>
+export const zSerializedRegexp = z.object({
+  type: z.literal('regexp'),
+  value: z.string(),
+})
 
-export async function recordInputAsCode(
-  sessionTracker: DebuggerTracker,
-  state: RecorderState,
-  event: string,
-  findMethod: string,
-  queryArg0: string,
-  queryOptions: Record<string, string | boolean> | undefined,
+export async function startRecorderCodeGenSession(
+  testFile: string,
+  testFramework: SupportedFramework,
 ) {
-  const pausedLocation = await sessionTracker.getPausedLocation()
-  if (!pausedLocation) {
-    return
-  }
+  const testLibrary = await detectTestLibrary(testFile)
 
-  const editor = vscode.window.visibleTextEditors.find(
-    editor => editor.document.uri.path === pausedLocation.filePath.toString(),
-  )
-  if (!editor) {
-    return
-  }
+  let offset = 0
 
-  const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
-    (result, entry) => {
-      const [key, val] = entry
-      result[key] = typeof val === 'string' ? new RegExp(val) : val
-      return result
-    },
-    {} as Record<string, RegExp | boolean>,
-  )
+  const codeGenSession = {
+    recordInputAsCode: async (
+      sessionTracker: DebuggerTracker,
+      event: string,
+      findMethod: string,
+      queryArg0: string | SerializedRegexp,
+      queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
+    ) => {
+      const pausedLocation = await sessionTracker.getPausedLocation()
+      if (!pausedLocation) {
+        return
+      }
 
-  const queryArgsStr = (() => {
-    let result = `'${queryArg0}'`
-    if (!parsedQueryOptions) {
-      return result
-    }
-    const entries = Object.entries(parsedQueryOptions).map(([key, val]) => {
-      return `${key}: ${String(val)}`
-    })
-    let optionsStr = entries.join(', ')
-    if (entries.length > 0) {
-      optionsStr = `{ ${optionsStr} }`
-      result += `, ${optionsStr}`
-    }
-    return result
-  })()
+      const editor = vscode.window.visibleTextEditors.find(
+        editor => editor.document.uri.path === pausedLocation.filePath.toString(),
+      )
+      if (!editor) {
+        return
+      }
 
-  let code = `fireEvent.${event}(${findMethod}(${queryArgsStr}))`
+      const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
+        (result, entry) => {
+          const [key, val] = entry
+          result[key] = (() => {
+            if (typeof val === 'string') {
+              return new RegExp(val)
+            }
+            else if (typeof val === 'boolean') {
+              return val
+            }
+            else if (val.type === 'regexp') {
+              return new RegExp(val.value)
+            }
+            else {
+              return ''
+            }
+          })()
 
-  const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
-  const indent = line.text.match(/^\s*/)?.[0] || ''
-  code = `${indent}${code}`
+          return result
+        },
+        {} as Record<string, RegExp | boolean | string>,
+      )
 
-  if (editor && pausedLocation) {
-    const position = new vscode.Position(pausedLocation.lineNumber - 1 + state.offset, 0)
-    await editor.edit((editBuilder) => {
-      editBuilder.insert(position, `${code}\n`)
-      state.offset += 1
-    })
-  }
+      const queryArgsStr = (() => {
+        let result = typeof queryArg0 === 'string' ? `'${queryArg0}'` : queryArg0.value
+        if (!parsedQueryOptions) {
+          return result
+        }
+        const entries = Object.entries(parsedQueryOptions).map(([key, val]) => {
+          return `${key}: ${String(val)}`
+        })
+        let optionsStr = entries.join(', ')
+        if (entries.length > 0) {
+          optionsStr = `{ ${optionsStr} }`
+          result += `, ${optionsStr}`
+        }
+        return result
+      })()
+
+      let code = `fireEvent.${event}(${findMethod}(${queryArgsStr}))`
+
+      const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
+      const indent = line.text.match(/^\s*/)?.[0] || ''
+      code = `${indent}${code}`
 
-  // const resultStr = await ctx.sessionTracker.runDebugExpression(
-  //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
-  // )
-  // ctx.flushPatches()
+      if (editor && pausedLocation) {
+        const position = new vscode.Position(pausedLocation.lineNumber - 1 + offset, 0)
+        await editor.edit((editBuilder) => {
+          editBuilder.insert(position, `${code}\n`)
+          offset += 1
+        })
+      }
+
+      // const resultStr = await ctx.sessionTracker.runDebugExpression(
+      //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
+      // )
+      // ctx.flushPatches()
+    },
+  }
+  return codeGenSession
 }
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 2c60fda..28cc876 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,10 +1,9 @@
 import { createEffect, createSignal } from 'solid-js'
 import { createEventListener } from '@solid-primitives/event-listener'
-import type { QueryArgs } from '@testing-library/dom'
+import type { QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
-// import { SelectorComputer } from './selector-gen/SelectorComputer'
 
 export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
@@ -25,27 +24,35 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   })
 
   async function emitEvent(type: 'click', target: Element) {
-    console.log('target', target)
+    let suggestedQuery: Suggestion | undefined
 
-    // TODO Do I need this?
-    // const selectors = selectorComputer.getSelectors(target)
-    // console.log('selector', selectors)
-
-    if (target instanceof HTMLElement) {
-      // Generate the selector
-      const suggestedQuery = getSuggestedQuery(target)
-      if (suggestedQuery) {
-        const query = serializeQueryArgs(suggestedQuery.queryArgs)
-        // Send the selector to the extension process to record as code
-        await client.recordInputAsCode.mutate({
-          event: type,
-          query: [suggestedQuery.queryMethod, query],
-        })
+    // Generate the selector using the closest HTMLElement.
+    // e.g. if you click on an SVG, that doesn't count as an HTMLElement,
+    // so step up to the parent.
+    while (!suggestedQuery && target) {
+      if (target instanceof HTMLElement) {
+        suggestedQuery = getSuggestedQuery(target)
+      }
+      if (!suggestedQuery) {
+        if (target.parentElement) {
+          target = target.parentElement
+        }
+        else {
+          return
+        }
       }
     }
-    if (type === 'click') {
-      console.log('click', target)
+
+    if (!suggestedQuery) {
+      return
     }
+
+    const query = serializeQueryArgs(suggestedQuery.queryArgs)
+    // Send the selector to the extension process to record as code
+    await client.recordInputAsCode.mutate({
+      event: type,
+      query: [suggestedQuery.queryMethod, query],
+    })
   }
 
   return {
@@ -57,39 +64,30 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   }
 }
 
-// const selectorComputer = new SelectorComputer({
-//   getAccessibleName: (node: Node) => {
-//     if (node instanceof Element) {
-//       const label = node.getAttribute('aria-label')
-//       const labelledby = node.getAttribute('aria-labelledby')
-
-//       if (label) { return label }
-//       if (labelledby) { return document.getElementById(labelledby)?.textContent ?? '' }
-//     }
-//     return node.textContent ?? ''
-//   },
-//   getAccessibleRole: (node: Node) => {
-//     if (node instanceof Element) {
-//       return node.getAttribute('role') ?? ''
-//     }
-//     return ''
-//   },
-// })
-
 /**
  * Convert the queryArgs from testing-library to JSON to be sent to the extension process.
  * Mainly to convert the RegExp to a string before sending it.
  */
-export function serializeQueryArgs(queryArgs: QueryArgs): [string, { [key: string]: string | boolean }?] {
+export function serializeQueryArgs(queryArgs: QueryArgs): [string | SerializedRegexp, { [key: string]: string | boolean | SerializedRegexp }?] {
   const [query, options] = queryArgs
-  if (!options) { return [query] }
+  if (!options) {
+    // @ts-expect-error Not declared the testing library, but the query could be a RegExp:
+    const result = query instanceof RegExp ? serializeRegexp(query) : query
+    return [result]
+  }
   const serializedOptions = Object.entries(options).reduce((prev, curr) => {
     const val = curr[1]
     if (val !== undefined) {
-      prev[curr[0]] = val instanceof RegExp ? String(val) : val
+      prev[curr[0]] = val instanceof RegExp ? serializeRegexp(val) : val
     }
     return prev
-  }, {} as Record<string, string | boolean>)
+  }, {} as Record<string, string | boolean | SerializedRegexp>)
 
   return [query, serializedOptions]
 }
+
+export interface SerializedRegexp { type: 'regexp', value: string }
+
+function serializeRegexp(regexp: RegExp): SerializedRegexp {
+  return { type: 'regexp', value: regexp.toString() }
+}

From b06fb15c83b0473596b16fef20c89da887016ac8 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 11 Sep 2025 03:00:47 -0400
Subject: [PATCH 08/98] recorder WIP

handle more input event types (front end)
---
 .../components/FormExample.tsx                | 60 +++++++++++++++++++
 .../vitest-react-tailwind4/test/form.test.tsx | 13 ++++
 .../web-view-vite/src/recorder/recorder.ts    | 35 +++++++----
 3 files changed, 96 insertions(+), 12 deletions(-)
 create mode 100644 examples/vitest-react-tailwind4/components/FormExample.tsx
 create mode 100644 examples/vitest-react-tailwind4/test/form.test.tsx

diff --git a/examples/vitest-react-tailwind4/components/FormExample.tsx b/examples/vitest-react-tailwind4/components/FormExample.tsx
new file mode 100644
index 0000000..930c1e9
--- /dev/null
+++ b/examples/vitest-react-tailwind4/components/FormExample.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+
+const FormExample: React.FC = () => {
+  return (
+    <div className="p-4">
+      <h2 className="text-lg font-bold mb-2">Form Section</h2>
+      <div className="border border-gray-300 p-4 mb-4">
+        <form className="mb-4" onSubmit={e => e.preventDefault()}>
+          <label>
+            First input
+            <input
+              type="text"
+              className="border p-2 mr-2"
+              placeholder="First input"
+              aria-label="First input"
+            />
+          </label>
+          <label>
+            Second input
+            <input
+              type="text"
+              className="border p-2 mr-2"
+              placeholder="Second input"
+            />
+          </label>
+          <button type="submit" className="bg-blue-500 text-white p-2">
+            Submit
+          </button>
+        </form>
+      </div>
+      <h2 className="text-lg font-bold mb-2">Non-Form Section</h2>
+      <div className="border border-gray-300 p-4">
+        <label>
+          Outside input 1
+          <input
+            type="text"
+            className="border p-2 mr-2"
+            placeholder="Outside input 1"
+          />
+        </label>
+        <label>
+          Outside input 2
+          <input
+            type="text"
+            className="border p-2 mr-2"
+            placeholder="Outside input 2"
+          />
+        </label>
+        <button className="bg-green-500 text-white p-2">
+          Outside Button
+        </button>
+        <p className="mt-4">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default FormExample
diff --git a/examples/vitest-react-tailwind4/test/form.test.tsx b/examples/vitest-react-tailwind4/test/form.test.tsx
new file mode 100644
index 0000000..85ed3e1
--- /dev/null
+++ b/examples/vitest-react-tailwind4/test/form.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import FormExample from '../components/FormExample'
+
+it('renders FormExample with form and non-form sections', async () => {
+  render(<FormExample />)
+
+  // Fill form inputs and submit
+  fireEvent.change(screen.getByLabelText('First input'), { target: { value: 'Test Value 1' } })
+  fireEvent.change(screen.getByPlaceholderText('Second input'), { target: { value: 'Test Value 2' } })
+  fireEvent.click(screen.getByText('Submit'))
+  fireEvent.change(screen.getByPlaceholderText('Second input'), { target: { value: 'Test Value 2' } })
+})
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 28cc876..31b6fc7 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,29 +1,40 @@
 import { createEffect, createSignal } from 'solid-js'
-import { createEventListener } from '@solid-primitives/event-listener'
+import { makeEventListener } from '@solid-primitives/event-listener'
 import type { QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
 
+export type InputEventType = 'click' | 'input' | 'submit' | 'focus' | 'blur'
+
 export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
 
   createEffect(() => {
     if (isRecording()) {
-      createEventListener(shadowHost.shadowRoot!, 'click', (e: Event) => {
-        if (!(e instanceof MouseEvent)) {
-          return
-        }
-        const clickedEl = (shadowHost.shadowRoot && deepElementFromPoint(shadowHost.shadowRoot, e.clientX, e.clientY)) ?? e.target
-        if (!(clickedEl instanceof Element)) {
-          return
-        }
-        emitEvent('click', clickedEl)
-      })
+      for (const eventType of ['click', 'input', 'submit', 'focus', 'blur'] as const) {
+        makeEventListener(shadowHost.shadowRoot!, eventType, (e: Event) => {
+          let target = e.target
+
+          // When clicking, use deepElementFromPoint to get the right element if it's inside a shadow root.
+          if (e instanceof MouseEvent) {
+            const clickedEl = (shadowHost.shadowRoot && deepElementFromPoint(shadowHost.shadowRoot, e.clientX, e.clientY)) ?? e.target
+            if (!(clickedEl instanceof Element)) {
+              return
+            }
+            target = clickedEl
+          }
+
+          if (!(target instanceof Element)) {
+            return
+          }
+          emitEvent(eventType, target)
+        })
+      }
     }
   })
 
-  async function emitEvent(type: 'click', target: Element) {
+  async function emitEvent(type: InputEventType, target: Element) {
     let suggestedQuery: Suggestion | undefined
 
     // Generate the selector using the closest HTMLElement.

From 426e182d33f07e6a1a7534ec99d5faaaa66f2b10 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 11 Sep 2025 04:28:06 -0400
Subject: [PATCH 09/98] recorder WIP

improve codegen
add the codegen for missing imports needed for the new test code
---
 .../components/FormExample.tsx                | 88 +++++++++++--------
 .../src/recorder/record-input-as-code.ts      | 65 +++++++++++++-
 2 files changed, 112 insertions(+), 41 deletions(-)

diff --git a/examples/vitest-react-tailwind4/components/FormExample.tsx b/examples/vitest-react-tailwind4/components/FormExample.tsx
index 930c1e9..94538d7 100644
--- a/examples/vitest-react-tailwind4/components/FormExample.tsx
+++ b/examples/vitest-react-tailwind4/components/FormExample.tsx
@@ -1,57 +1,69 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 const FormExample: React.FC = () => {
+  const [submitCount, setSubmitCount] = useState(0)
   return (
-    <div className="p-4">
-      <h2 className="text-lg font-bold mb-2">Form Section</h2>
-      <div className="border border-gray-300 p-4 mb-4">
-        <form className="mb-4" onSubmit={e => e.preventDefault()}>
+    <div className="">
+      <div>
+        Submit Count: {submitCount}
+      </div>
+      <div className="p-4">
+        <h2 className="text-lg font-bold mb-2">Form Section</h2>
+        <div className="border border-gray-300 p-4 mb-4">
+          <form
+            className="mb-4"
+            onSubmit={(e) => {
+              e.preventDefault()
+              setSubmitCount(c => c + 1)
+            }}
+          >
+            <label>
+              First input
+              <input
+                type="text"
+                className="border p-2 mr-2"
+                placeholder="First input"
+                aria-label="First input"
+              />
+            </label>
+            <label>
+              Second input
+              <input
+                type="text"
+                className="border p-2 mr-2"
+                placeholder="Second input"
+              />
+            </label>
+            <button type="submit" className="bg-blue-500 text-white p-2">
+              Submit
+            </button>
+          </form>
+        </div>
+        <h2 className="text-lg font-bold mb-2">Non-Form Section</h2>
+        <div className="border border-gray-300 p-4">
           <label>
-            First input
+            Outside input 1
             <input
               type="text"
               className="border p-2 mr-2"
-              placeholder="First input"
-              aria-label="First input"
+              placeholder="Outside input 1"
             />
           </label>
           <label>
-            Second input
+            Outside input 2
             <input
               type="text"
               className="border p-2 mr-2"
-              placeholder="Second input"
+              placeholder="Outside input 2"
             />
           </label>
-          <button type="submit" className="bg-blue-500 text-white p-2">
-            Submit
+          <button className="bg-green-500 text-white p-2">
+            Outside Button
           </button>
-        </form>
-      </div>
-      <h2 className="text-lg font-bold mb-2">Non-Form Section</h2>
-      <div className="border border-gray-300 p-4">
-        <label>
-          Outside input 1
-          <input
-            type="text"
-            className="border p-2 mr-2"
-            placeholder="Outside input 1"
-          />
-        </label>
-        <label>
-          Outside input 2
-          <input
-            type="text"
-            className="border p-2 mr-2"
-            placeholder="Outside input 2"
-          />
-        </label>
-        <button className="bg-green-500 text-white p-2">
-          Outside Button
-        </button>
-        <p className="mt-4">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+          <p className="mt-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
       </div>
     </div>
   )
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 8bc6036..2313f07 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,5 +1,6 @@
 import * as vscode from 'vscode'
-import { z } from 'zod/mini'
+import { required, z } from 'zod/mini'
+import { walk } from 'estree-walker'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import { detectTestLibrary } from '../framework-support/detect-test-library'
 import type { DebuggerTracker } from '../util/debugger-tracker'
@@ -16,7 +17,10 @@ export async function startRecorderCodeGenSession(
   testFile: string,
   testFramework: SupportedFramework,
 ) {
-  const testLibrary = await detectTestLibrary(testFile)
+  const testLibrary = await detectTestLibrary(testFile) ?? '@testing-library/dom'
+
+  // @ts-expect-error import the wasm file directly
+  const { parseSync } = await import('@oxc-parser/binding-wasm32-wasi')
 
   let offset = 0
 
@@ -79,12 +83,49 @@ export async function startRecorderCodeGenSession(
         return result
       })()
 
-      let code = `fireEvent.${event}(${findMethod}(${queryArgsStr}))`
+      const fireEvent = 'fireEvent'
+      const screen = 'screen'
+
+      let code = `${fireEvent}.${event}(${screen}.${findMethod}(${queryArgsStr}))`
 
       const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
       const indent = line.text.match(/^\s*/)?.[0] || ''
       code = `${indent}${code}`
 
+      // Figure out which imports need to be added
+      const requiredImports = new Map<string, { from: string }>([
+        [fireEvent, { from: testLibrary }],
+        [findMethod, { from: testLibrary }],
+      ])
+      const importInsertionPoints = new Map<string, number>()
+      {
+        // TODO avoid re-parsing for every generated line of code
+        const parsed = parseSync(editor.document.fileName, editor.document.getText(), {})
+        const programJson = parsed.program
+        const program = JSON.parse(programJson)
+
+        walk(program, {
+          enter(node) {
+            if (node.type === 'ImportDeclaration') {
+              if (node.source.type === 'Literal') {
+                const endOfLastSpecifier = node.specifiers.at(-1)?.end
+                if (endOfLastSpecifier) {
+                  importInsertionPoints.set(node.source.value, endOfLastSpecifier)
+                }
+              }
+              for (const specifier of node.specifiers) {
+                if (['ImportSpecifier', 'ImportDefaultSpecifier', 'ImportNamespaceSpecifier'].includes(specifier.type)) {
+                  requiredImports.delete(specifier.local.name)
+                }
+              }
+            }
+          },
+        })
+      }
+
+      // Do the code edit
+
+      // Add the fireEvent code
       if (editor && pausedLocation) {
         const position = new vscode.Position(pausedLocation.lineNumber - 1 + offset, 0)
         await editor.edit((editBuilder) => {
@@ -93,6 +134,24 @@ export async function startRecorderCodeGenSession(
         })
       }
 
+      // Add missing imports
+      for (const [importName, { from }] of requiredImports) {
+        const insertionPoint = importInsertionPoints.get(from)
+        if (insertionPoint) {
+          const position = editor.document.positionAt(insertionPoint)
+          await editor.edit((editBuilder) => {
+            editBuilder.insert(position, `, ${importName}`)
+            offset += 1
+          })
+        }
+        else {
+          await editor.edit((editBuilder) => {
+            editBuilder.insert(new vscode.Position(0, 0), `import { ${importName} } from '${from}'\n`)
+            offset += 1
+          })
+        }
+      }
+
       // const resultStr = await ctx.sessionTracker.runDebugExpression(
       //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
       // )

From f1629c4d1b89f53fe7e6585d394368355c52b6e3 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 11 Sep 2025 20:18:32 -0400
Subject: [PATCH 10/98] recorder WIP

- disable from submission's default navigation behavior in the webview
- run code as debug expression before writing it to the file
---
 packages/extension/src/extension.ts           | 10 ++--
 .../src/panel-controller/panel-controller.ts  |  7 ++-
 .../src/panel-controller/panel-router.ts      |  8 +--
 .../src/recorder/record-input-as-code.ts      | 49 ++++++++++++++-----
 packages/web-view-vite/index.html             |  1 +
 .../web-view-vite/src/recorder/recorder.ts    | 21 ++++++--
 6 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 0b91214..4705f86 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -119,14 +119,16 @@ export let visuallyDebugUI = async (
   await vscode.window.activeTextEditor?.document.save()
 
   // Only initialize the recorder state once per debug session
-  const recorderCodeGenSession = once(() => startRecorderCodeGenSession(testFile, fwInfo.framework))
+  const recorderCodeGenSession = once(
+    () => startRecorderCodeGenSession(testFile, fwInfo.framework, panelController),
+  )
 
   const panelController = await startPanelController(extensionContext, storage, recorderCodeGenSession)
 
   const onStartDebug = vscode.debug.onDidStartDebugSession(async (currentSession) => {
     onStartDebug.dispose()
 
-    const sessionTracker = startDebuggerTracker(
+    const debuggerTracker = startDebuggerTracker(
       currentSession,
       {
         onFrameChange: () => panelController.flushPatches(),
@@ -145,7 +147,7 @@ export let visuallyDebugUI = async (
       catch {}
     })()
 
-    await panelController.openPanel(sessionTracker)
+    await panelController.openPanel(debuggerTracker)
 
     const onTerminate = vscode.debug.onDidTerminateDebugSession(
       (endedSession) => {
@@ -154,7 +156,7 @@ export let visuallyDebugUI = async (
         }
 
         autoBreakpoint?.dispose()
-        sessionTracker.dispose()
+        debuggerTracker.dispose()
         panelController.dispose()
         onTerminate.dispose()
       },
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index ddba5c7..7cab85b 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -13,6 +13,8 @@ import { type PanelRouterCtx, panelRouter } from './panel-router'
 // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
 const Server = require('../../node_modules/ws/lib/websocket-server') as typeof WsServer
 
+export type PanelController = Awaited<ReturnType<typeof startPanelController>>
+
 export async function startPanelController(
   extensionContext: vscode.ExtensionContext,
   storage: MyStorageType,
@@ -55,7 +57,7 @@ export async function startPanelController(
     flushPatches,
     notifyDebuggerRestarted,
     async openPanel(
-      sessionTracker: DebuggerTracker,
+      debuggerTracker: DebuggerTracker,
     ) {
       // Create the webview panel
       panel = vscode.window.createWebviewPanel(
@@ -104,6 +106,7 @@ export async function startPanelController(
               <head>
                 <link rel="icon" type="image/svg+xml" href="${icon}" />
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <meta http-equiv="Content-Security-Policy" content="form-action 'none';">
                 <script type="module" crossorigin src="${appJs}"></script>
                 <link rel="stylesheet" crossorigin href="${appCss}">
               </head>
@@ -125,7 +128,7 @@ export async function startPanelController(
 
         try {
           const ctx: PanelRouterCtx = {
-            sessionTracker,
+            debuggerTracker,
             storage,
             flushPatches,
             recorderCodeGenSession,
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 68df437..c060c04 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -8,7 +8,7 @@ import type { DebuggerTracker } from '../util/debugger-tracker'
 import { workspaceCssFiles } from '../util/workspace-css-files'
 
 export interface PanelRouterCtx {
-  sessionTracker: DebuggerTracker
+  debuggerTracker: DebuggerTracker
   storage: MyStorageType
   flushPatches: () => void
   recorderCodeGenSession: () => Promise<RecorderCodeGenSession>
@@ -20,7 +20,7 @@ const t = initTRPC.context<PanelRouterCtx>().create()
 export const panelRouter = t.router({
   serializeHtml: t.procedure
     .query(async ({ ctx }) => {
-      const html = await ctx.sessionTracker.runDebugExpression('globalThis.__serializeHtml()')
+      const html = await ctx.debuggerTracker.runDebugExpression('globalThis.__serializeHtml()')
       return html
     }),
 
@@ -107,7 +107,7 @@ export const panelRouter = t.router({
     .mutation(async ({ ctx }) => {
       const files = await ctx.storage.get('enabledCssFiles') ?? []
       const filesAsString = JSON.stringify(files)
-      const resultStr = await ctx.sessionTracker.runDebugExpression(
+      const resultStr = await ctx.debuggerTracker.runDebugExpression(
         `globalThis.__replaceStyles(${filesAsString})`,
       )
       ctx.flushPatches()
@@ -192,7 +192,7 @@ export const panelRouter = t.router({
     .mutation(async ({ ctx, input }) => {
       const { event, query: [method, [queryArg0, queryOptions]] } = input
       const recorderCodeGenSession = await ctx.recorderCodeGenSession()
-      await recorderCodeGenSession.recordInputAsCode(ctx.sessionTracker, event, method, queryArg0, queryOptions)
+      await recorderCodeGenSession.recordInputAsCode(ctx.debuggerTracker, event, method, queryArg0, queryOptions)
     }),
 })
 
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 2313f07..7b26e03 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,9 +1,10 @@
-import * as vscode from 'vscode'
-import { required, z } from 'zod/mini'
 import { walk } from 'estree-walker'
+import * as vscode from 'vscode'
+import { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import { detectTestLibrary } from '../framework-support/detect-test-library'
 import type { DebuggerTracker } from '../util/debugger-tracker'
+import type { PanelController } from '../panel-controller/panel-controller'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
@@ -16,6 +17,7 @@ export const zSerializedRegexp = z.object({
 export async function startRecorderCodeGenSession(
   testFile: string,
   testFramework: SupportedFramework,
+  panelController: PanelController,
 ) {
   const testLibrary = await detectTestLibrary(testFile) ?? '@testing-library/dom'
 
@@ -26,13 +28,13 @@ export async function startRecorderCodeGenSession(
 
   const codeGenSession = {
     recordInputAsCode: async (
-      sessionTracker: DebuggerTracker,
+      debuggerTracker: DebuggerTracker,
       event: string,
       findMethod: string,
       queryArg0: string | SerializedRegexp,
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
     ) => {
-      const pausedLocation = await sessionTracker.getPausedLocation()
+      const pausedLocation = await debuggerTracker.getPausedLocation()
       if (!pausedLocation) {
         return
       }
@@ -49,13 +51,13 @@ export async function startRecorderCodeGenSession(
           const [key, val] = entry
           result[key] = (() => {
             if (typeof val === 'string') {
-              return new RegExp(val)
+              return `'${val.replace(/'/g, '\\\'')}'`
             }
             else if (typeof val === 'boolean') {
               return val
             }
             else if (val.type === 'regexp') {
-              return new RegExp(val.value)
+              return val.value
             }
             else {
               return ''
@@ -86,7 +88,18 @@ export async function startRecorderCodeGenSession(
       const fireEvent = 'fireEvent'
       const screen = 'screen'
 
-      let code = `${fireEvent}.${event}(${screen}.${findMethod}(${queryArgsStr}))`
+      /**
+       * e.g. `screen.getByRole('button', { name: 'Submit' })`
+       * or just `document`
+       */
+      const selector = (() => {
+        if (queryArg0 === 'document') {
+          return 'document'
+        }
+        return `${screen}.${findMethod}(${queryArgsStr})`
+      })()
+
+      let code = `${fireEvent}.${event}(${selector})`
 
       const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
       const indent = line.text.match(/^\s*/)?.[0] || ''
@@ -95,8 +108,23 @@ export async function startRecorderCodeGenSession(
       // Figure out which imports need to be added
       const requiredImports = new Map<string, { from: string }>([
         [fireEvent, { from: testLibrary }],
-        [findMethod, { from: testLibrary }],
+        [screen, { from: testLibrary }],
       ])
+
+      // Replicate the input event from the webview to the test runtime.
+      // We do this through a debug expression, which is the same as running code through vscode's 'Debug Terminal'.
+      const debugExpression = `
+(() => {
+${[...requiredImports.entries()].map(([importName, { from }]) => `const { ${importName} } = require('${from}');`).join('\n')}
+${code};
+})()
+`
+
+      const resultStr = await debuggerTracker.runDebugExpression(
+        debugExpression,
+      )
+      panelController.flushPatches()
+
       const importInsertionPoints = new Map<string, number>()
       {
         // TODO avoid re-parsing for every generated line of code
@@ -151,11 +179,6 @@ export async function startRecorderCodeGenSession(
           })
         }
       }
-
-      // const resultStr = await ctx.sessionTracker.runDebugExpression(
-      //   `globalThis.__recordInputAsCode(${JSON.stringify(method)}, ${JSON.stringify(args)})`,
-      // )
-      // ctx.flushPatches()
     },
   }
   return codeGenSession
diff --git a/packages/web-view-vite/index.html b/packages/web-view-vite/index.html
index 110d016..d792321 100644
--- a/packages/web-view-vite/index.html
+++ b/packages/web-view-vite/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="form-action 'none';">
     <base href="http://localhost:5173/">
   </head>
   <body>
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 31b6fc7..3084948 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -28,6 +28,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
           if (!(target instanceof Element)) {
             return
           }
+
           emitEvent(eventType, target)
         })
       }
@@ -37,14 +38,28 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   async function emitEvent(type: InputEventType, target: Element) {
     let suggestedQuery: Suggestion | undefined
 
+    /**
+     * Sometimes testing-library can't find a good query to use.
+     * This fn checks if testing-library generated a useful query.
+     */
+    function hasQuery() {
+      if (!suggestedQuery) {
+        return false
+      }
+      if (suggestedQuery.queryArgs[0] === 'document') {
+        return false
+      }
+      return true
+    }
+
     // Generate the selector using the closest HTMLElement.
     // e.g. if you click on an SVG, that doesn't count as an HTMLElement,
     // so step up to the parent.
-    while (!suggestedQuery && target) {
+    while (!hasQuery() && target) {
       if (target instanceof HTMLElement) {
         suggestedQuery = getSuggestedQuery(target)
       }
-      if (!suggestedQuery) {
+      if (!hasQuery()) {
         if (target.parentElement) {
           target = target.parentElement
         }
@@ -54,7 +69,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
       }
     }
 
-    if (!suggestedQuery) {
+    if (!hasQuery() || !suggestedQuery) {
       return
     }
 

From 590c04b0b2224ef9fec5fbf78f237d9f4cb4f9de Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 13 Sep 2025 00:45:37 -0400
Subject: [PATCH 11/98] recorder WIP

- include the text in the generated 'change' event
- add initial right-click command to create UI test
---
 package.json                                  |  16 ++-
 packages/extension/src/extension.ts           |  34 ++++--
 .../framework-support/detect-test-library.ts  |   5 -
 .../src/panel-controller/panel-controller.ts  |   2 +-
 .../src/panel-controller/panel-router.ts      |  21 +++-
 .../src/recorder/create-ui-test-file.ts       | 112 ++++++++++++++++++
 .../src/recorder/record-input-as-code.ts      |  22 +++-
 .../web-view-vite/src/recorder/recorder.ts    | 103 ++++++++--------
 8 files changed, 235 insertions(+), 80 deletions(-)
 create mode 100644 packages/extension/src/recorder/create-ui-test-file.ts

diff --git a/package.json b/package.json
index a2c3560..68845fe 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,21 @@
           "description": "Test Framework: Vitest or Jest. Auto-detects by default by walking up directories from your test file."
         }
       }
-    }
+    },
+    "menus": {
+      "editor/context": [
+        {
+          "command": "ui-test-visualizer.createUiTest",
+          "when": "editorTextFocus && editorLangId =~ /typescript|javascript/"
+        }
+      ]
+    },
+    "commands": [
+      {
+        "command": "ui-test-visualizer.createUiTest",
+        "title": "Create UI test (UI Test Visualizer)"
+      }
+    ]
   },
   "scripts": {
     "dev": "rm -rf build-dev && pnpm run -r dev",
diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 4705f86..22bc5fd 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -15,6 +15,8 @@ import { startRecorderCodeGenSession } from './recorder/record-input-as-code'
 import { startDebuggerTracker } from './util/debugger-tracker'
 import { extensionSetting } from './util/extension-setting'
 import { hotReload } from './util/hot-reload'
+import { detectTestLibrary } from './framework-support/detect-test-library'
+import { createUiTestFile } from './recorder/create-ui-test-file'
 
 const reporter = (() => {
   try {
@@ -41,14 +43,16 @@ export async function activate(extensionContext: vscode.ExtensionContext) {
     })
   }
 
-  const debugTest = vscode.commands.registerCommand(
-    'ui-test-visualizer.visuallyDebugUI',
-    (testFile: unknown, testName: unknown, startAndEndLines: unknown, firstStatementStartLine: unknown) => visuallyDebugUI(
-      testFile,
-      testName,
-      startAndEndLines,
-      firstStatementStartLine,
-      extensionContext,
+  extensionContext.subscriptions.push(
+    vscode.commands.registerCommand(
+      'ui-test-visualizer.visuallyDebugUI',
+      (testFile: unknown, testName: unknown, startAndEndLines: unknown, firstStatementStartLine: unknown) => visuallyDebugUI(
+        testFile,
+        testName,
+        startAndEndLines,
+        firstStatementStartLine,
+        extensionContext,
+      ),
     ),
   )
 
@@ -85,7 +89,10 @@ export async function activate(extensionContext: vscode.ExtensionContext) {
     )
   }
 
-  extensionContext.subscriptions.push(debugTest)
+  // Right-click a component name and click "Create UI test" -> create a test file with the name of the component
+  extensionContext.subscriptions.push(
+    vscode.commands.registerCommand('ui-test-visualizer.createUiTest', () => createUiTestFile()),
+  )
 }
 
 export function deactivate() { }
@@ -113,14 +120,17 @@ export let visuallyDebugUI = async (
     return parsed.success ? parsed.data : 'autodetect'
   })()
 
-  const fwInfo = await detectTestFramework(testFile, frameworkSetting)
+  const frameworkInfo = await detectTestFramework(testFile, frameworkSetting)
+  const testLibrary = await detectTestLibrary(testFile)
 
   // Save the test file before starting the debug session
   await vscode.window.activeTextEditor?.document.save()
 
   // Only initialize the recorder state once per debug session
   const recorderCodeGenSession = once(
-    () => startRecorderCodeGenSession(testFile, fwInfo.framework, panelController),
+    async () => testLibrary
+      ? await startRecorderCodeGenSession(testFile, frameworkInfo.framework, testLibrary, panelController)
+      : null,
   )
 
   const panelController = await startPanelController(extensionContext, storage, recorderCodeGenSession)
@@ -164,7 +174,7 @@ export let visuallyDebugUI = async (
   })
 
   const debugConfig = await makeDebugConfig(
-    fwInfo,
+    frameworkInfo,
     testFile,
     testName,
     panelController.htmlUpdaterPort,
diff --git a/packages/extension/src/framework-support/detect-test-library.ts b/packages/extension/src/framework-support/detect-test-library.ts
index 2996c8e..19fcaf5 100644
--- a/packages/extension/src/framework-support/detect-test-library.ts
+++ b/packages/extension/src/framework-support/detect-test-library.ts
@@ -8,11 +8,6 @@ export const SUPPORTED_TESTING_LIBRARIES = [
 
 export type TestingLibrary = typeof SUPPORTED_TESTING_LIBRARIES[number]
 
-export interface TestLibraryInfo {
-  framework: SupportedFramework
-  testingLibrary: TestingLibrary | null
-}
-
 export async function detectTestLibrary(testFilePath: string): Promise<TestingLibrary | null> {
   // Lookup the test framework in node_modules
   const detectedLibrary = (() => {
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index 7cab85b..7f8e07b 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -18,7 +18,7 @@ export type PanelController = Awaited<ReturnType<typeof startPanelController>>
 export async function startPanelController(
   extensionContext: vscode.ExtensionContext,
   storage: MyStorageType,
-  recorderCodeGenSession: () => Promise<RecorderCodeGenSession>,
+  recorderCodeGenSession: () => Promise<RecorderCodeGenSession | null>,
 ) {
   const htmlUpdaterPort = await getPort()
   const viteDevServerPort = 5173
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index c060c04..b73d9f9 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -11,7 +11,7 @@ export interface PanelRouterCtx {
   debuggerTracker: DebuggerTracker
   storage: MyStorageType
   flushPatches: () => void
-  recorderCodeGenSession: () => Promise<RecorderCodeGenSession>
+  recorderCodeGenSession: () => Promise<RecorderCodeGenSession | null>
 }
 
 const t = initTRPC.context<PanelRouterCtx>().create()
@@ -180,19 +180,32 @@ export const panelRouter = t.router({
     .input(
       z.object({
         event: z.string(),
+        eventData: z.object({
+          text: z.optional(z.string()), // Used for change events
+        }),
         query: z.tuple([
           z.string(),
           z.tuple([
             z.union([z.string(), zSerializedRegexp]),
-            z.optional(z.record(z.string(), z.union([z.string(), z.boolean(), zSerializedRegexp]))),
+            z.optional(z.record(
+              z.string(),
+              z.union([z.string(), z.boolean(), zSerializedRegexp]),
+            )),
           ]),
         ]),
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const { event, query: [method, [queryArg0, queryOptions]] } = input
+      const { event, eventData, query: [method, [queryArg0, queryOptions]] } = input
       const recorderCodeGenSession = await ctx.recorderCodeGenSession()
-      await recorderCodeGenSession.recordInputAsCode(ctx.debuggerTracker, event, method, queryArg0, queryOptions)
+      await recorderCodeGenSession?.recordInputAsCode(
+        ctx.debuggerTracker,
+        event,
+        eventData,
+        method,
+        queryArg0,
+        queryOptions,
+      )
     }),
 })
 
diff --git a/packages/extension/src/recorder/create-ui-test-file.ts b/packages/extension/src/recorder/create-ui-test-file.ts
new file mode 100644
index 0000000..54274d0
--- /dev/null
+++ b/packages/extension/src/recorder/create-ui-test-file.ts
@@ -0,0 +1,112 @@
+import { Buffer } from 'node:buffer'
+import * as path from 'pathe'
+import * as vscode from 'vscode'
+import { walk } from 'estree-walker'
+import { zFrameworkSetting } from '../extension'
+import { extensionSetting } from '../util/extension-setting'
+import { detectTestFramework } from '../framework-support/detect-test-framework'
+import { SUPPORTED_TESTING_LIBRARIES, detectTestLibrary } from '../framework-support/detect-test-library'
+
+export async function createUiTestFile() {
+  // @ts-expect-error import the wasm file directly
+  const { parseSync } = await import('@oxc-parser/binding-wasm32-wasi')
+
+  const editor = vscode.window.activeTextEditor
+  if (!editor) {
+    return
+  }
+
+  const doc = editor.document
+
+  const selection = editor.selection
+  const wordRange = doc.getWordRangeAtPosition(selection.active, /\w+/)
+  if (!wordRange) {
+    return
+  }
+
+  const exportName = (() => {
+    const parsed = parseSync(doc.fileName, doc.getText(), {})
+    const programJson = parsed.program
+    const program = JSON.parse(programJson)
+
+    const wordStart = doc.offsetAt(wordRange.start)
+    const wordEnd = doc.offsetAt(wordRange.end)
+
+    let result: string | null = null
+    walk(program, {
+      enter(node) {
+        if (node.type === 'ExportNamedDeclaration' && node.start <= wordStart && node.end >= wordEnd) {
+          result = node.declaration?.id.name
+        }
+        if (node.type === 'ExportDefaultDeclaration' && node.declaration.type === 'FunctionDeclaration' && node.start <= wordStart && node.end >= wordEnd) {
+          result = node.declaration.id.name
+        }
+      },
+    })
+
+    return result as string | null
+  })()
+
+  const word = doc.getText(wordRange)
+
+  if (!exportName) {
+    vscode.window.showInformationMessage(
+      `No valid selection found. Must be an exported capitalized function name. Got ${word}`,
+    )
+    return
+  }
+
+  // React/Solid component convention: starts with capital letter
+  if (!/^[A-Z]/.test(exportName)) {
+    vscode.window.showInformationMessage(
+        `Selection must be a capitalized identifier, e.g. a React component name. Got "${word}".`,
+    )
+    return
+  }
+
+  const frameworkSetting = (() => {
+    const parsed = zFrameworkSetting
+      .safeParse(extensionSetting('ui-test-visualizer.testFramework'))
+    return parsed.success ? parsed.data : 'autodetect'
+  })()
+
+  const frameworkInfo = await detectTestFramework(editor.document.uri.fsPath, frameworkSetting)
+  const testingLibrary = await detectTestLibrary(editor.document.uri.fsPath)
+
+  if (!testingLibrary) {
+    vscode.window.showInformationMessage(`Could not detect a testing library for ${editor.document.uri.fsPath}. Supported testing libraries are ${SUPPORTED_TESTING_LIBRARIES.join(', ')}.`)
+    return
+  }
+
+  const currentDir = path.dirname(editor.document.uri.fsPath)
+  const testFileName = `${exportName}.test.tsx`
+  const testFileUri = vscode.Uri.file(path.join(currentDir, testFileName))
+
+  // Check if the test file already exists
+  try {
+    await vscode.workspace.fs.stat(testFileUri)
+    vscode.window.showInformationMessage(`Test file ${testFileName} already exists.`)
+    return
+  }
+  catch {
+    // File does not exist, proceed to create
+  }
+
+  // Create basic test content
+  const testContent = `import { describe, test } from '${frameworkInfo.framework}'
+import { render } from '${testingLibrary}'
+
+describe('${exportName}', () => {
+  test('basic usage', () => {
+    render(<${exportName} />)
+  })
+})
+`
+
+  // Write the file
+  await vscode.workspace.fs.writeFile(testFileUri, Buffer.from(testContent, 'utf8'))
+
+  // Open the new test file
+  const newDocument = await vscode.workspace.openTextDocument(testFileUri)
+  await vscode.window.showTextDocument(newDocument)
+}
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 7b26e03..c8c8436 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,10 +1,13 @@
+import type { inferProcedureInput } from '@trpc/server'
 import { walk } from 'estree-walker'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
+import type { TestingLibrary } from '../framework-support/detect-test-library'
 import { detectTestLibrary } from '../framework-support/detect-test-library'
-import type { DebuggerTracker } from '../util/debugger-tracker'
 import type { PanelController } from '../panel-controller/panel-controller'
+import type { panelRouter } from '../panel-controller/panel-router'
+import type { DebuggerTracker } from '../util/debugger-tracker'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
@@ -17,19 +20,19 @@ export const zSerializedRegexp = z.object({
 export async function startRecorderCodeGenSession(
   testFile: string,
   testFramework: SupportedFramework,
+  testLibrary: TestingLibrary,
   panelController: PanelController,
 ) {
-  const testLibrary = await detectTestLibrary(testFile) ?? '@testing-library/dom'
-
   // @ts-expect-error import the wasm file directly
   const { parseSync } = await import('@oxc-parser/binding-wasm32-wasi')
 
   let offset = 0
 
-  const codeGenSession = {
+  return {
     recordInputAsCode: async (
       debuggerTracker: DebuggerTracker,
       event: string,
+      eventData: inferProcedureInput<typeof panelRouter.recordInputAsCode>['eventData'],
       findMethod: string,
       queryArg0: string | SerializedRegexp,
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
@@ -99,7 +102,15 @@ export async function startRecorderCodeGenSession(
         return `${screen}.${findMethod}(${queryArgsStr})`
       })()
 
-      let code = `${fireEvent}.${event}(${selector})`
+      const fireEventArgs = (() => {
+        if (event === 'change' && eventData.text) {
+          const value = eventData.text.replace(/'/g, '\\\'')
+          return `, { target: { value: '${value}' } }`
+        }
+        return ''
+      })()
+
+      let code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
 
       const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
       const indent = line.text.match(/^\s*/)?.[0] || ''
@@ -181,5 +192,4 @@ ${code};
       }
     },
   }
-  return codeGenSession
 }
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 3084948..142fbba 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,18 +1,16 @@
-import { createEffect, createSignal } from 'solid-js'
 import { makeEventListener } from '@solid-primitives/event-listener'
 import type { QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
+import { createEffect, createSignal } from 'solid-js'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
 
-export type InputEventType = 'click' | 'input' | 'submit' | 'focus' | 'blur'
-
 export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
 
   createEffect(() => {
     if (isRecording()) {
-      for (const eventType of ['click', 'input', 'submit', 'focus', 'blur'] as const) {
+      for (const eventType of ['click', 'submit', 'focus', 'blur', 'change'] as const) {
         makeEventListener(shadowHost.shadowRoot!, eventType, (e: Event) => {
           let target = e.target
 
@@ -29,63 +27,66 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             return
           }
 
-          emitEvent(eventType, target)
-        })
-      }
-    }
-  })
+          let suggestedQuery: Suggestion | undefined
 
-  async function emitEvent(type: InputEventType, target: Element) {
-    let suggestedQuery: Suggestion | undefined
+          /**
+           * Sometimes testing-library can't find a good query to use.
+           * This fn checks if testing-library generated a useful query.
+           */
+          function hasQuery() {
+            if (!suggestedQuery) {
+              return false
+            }
+            if (suggestedQuery.queryArgs[0] === 'document') {
+              return false
+            }
+            return true
+          }
 
-    /**
-     * Sometimes testing-library can't find a good query to use.
-     * This fn checks if testing-library generated a useful query.
-     */
-    function hasQuery() {
-      if (!suggestedQuery) {
-        return false
-      }
-      if (suggestedQuery.queryArgs[0] === 'document') {
-        return false
-      }
-      return true
-    }
+          // Generate the selector using the closest HTMLElement.
+          // e.g. if you click on an SVG, that doesn't count as an HTMLElement,
+          // so step up to the parent.
+          while (!hasQuery() && target) {
+            if (target instanceof HTMLElement) {
+              suggestedQuery = getSuggestedQuery(target)
+            }
+            if (!hasQuery()) {
+              if (target instanceof Element && target.parentElement) {
+                target = target.parentElement
+              }
+              else {
+                return
+              }
+            }
+          }
 
-    // Generate the selector using the closest HTMLElement.
-    // e.g. if you click on an SVG, that doesn't count as an HTMLElement,
-    // so step up to the parent.
-    while (!hasQuery() && target) {
-      if (target instanceof HTMLElement) {
-        suggestedQuery = getSuggestedQuery(target)
-      }
-      if (!hasQuery()) {
-        if (target.parentElement) {
-          target = target.parentElement
-        }
-        else {
-          return
-        }
-      }
-    }
+          if (!hasQuery() || !suggestedQuery) {
+            return
+          }
 
-    if (!hasQuery() || !suggestedQuery) {
-      return
-    }
+          const eventData: Parameters<typeof client.recordInputAsCode.mutate>[0]['eventData'] = {}
 
-    const query = serializeQueryArgs(suggestedQuery.queryArgs)
-    // Send the selector to the extension process to record as code
-    await client.recordInputAsCode.mutate({
-      event: type,
-      query: [suggestedQuery.queryMethod, query],
-    })
-  }
+          if (eventType === 'change' && target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+            const text = target.value
+            eventData.text = text
+          }
+
+          const query = serializeQueryArgs(suggestedQuery.queryArgs)
+          // Send the selector to the extension process to record as code
+          void client.recordInputAsCode.mutate({
+            event: eventType,
+            query: [suggestedQuery.queryMethod, query],
+            eventData,
+          })
+        })
+      }
+    }
+  })
 
   return {
     isRecording,
     toggle: (recording: boolean) => {
       setIsRecording(recording)
-      console.log('recording:', recording)
     },
   }
 }

From 5240724a68249c30587852919e214f517ad8aa3a Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 13 Sep 2025 01:24:41 -0400
Subject: [PATCH 12/98] recorder WIP

Fix initial file create behavior for exported arrow functions
---
 examples/vitest-react-tailwind4/vite.config.ts   |  3 ++-
 .../src/recorder/create-ui-test-file.ts          | 16 ++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/examples/vitest-react-tailwind4/vite.config.ts b/examples/vitest-react-tailwind4/vite.config.ts
index 5066940..fa6a3f5 100644
--- a/examples/vitest-react-tailwind4/vite.config.ts
+++ b/examples/vitest-react-tailwind4/vite.config.ts
@@ -2,9 +2,10 @@
 
 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
 
 export default defineConfig({
-  plugins: [tailwindcss()],
+  plugins: [react(), tailwindcss()],
   test: {
     globals: true,
     environment: 'happy-dom',
diff --git a/packages/extension/src/recorder/create-ui-test-file.ts b/packages/extension/src/recorder/create-ui-test-file.ts
index 54274d0..0418774 100644
--- a/packages/extension/src/recorder/create-ui-test-file.ts
+++ b/packages/extension/src/recorder/create-ui-test-file.ts
@@ -35,11 +35,11 @@ export async function createUiTestFile() {
     let result: string | null = null
     walk(program, {
       enter(node) {
-        if (node.type === 'ExportNamedDeclaration' && node.start <= wordStart && node.end >= wordEnd) {
-          result = node.declaration?.id.name
-        }
-        if (node.type === 'ExportDefaultDeclaration' && node.declaration.type === 'FunctionDeclaration' && node.start <= wordStart && node.end >= wordEnd) {
-          result = node.declaration.id.name
+        if (
+          (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration')
+          && node.start <= wordStart && node.end >= wordEnd
+        ) {
+          result = node?.declaration?.id?.name ?? node?.declaration?.declarations?.[0]?.id?.name ?? null
         }
       },
     })
@@ -92,13 +92,17 @@ export async function createUiTestFile() {
     // File does not exist, proceed to create
   }
 
+  const relativePathToSrc = path.relative(currentDir, doc.fileName).replace(/\.[jt]sx?$/, '')
+
   // Create basic test content
+  const isArrowRender = testingLibrary === '@solidjs/testing-library'
   const testContent = `import { describe, test } from '${frameworkInfo.framework}'
 import { render } from '${testingLibrary}'
+import { ${exportName} } from './${relativePathToSrc}'
 
 describe('${exportName}', () => {
   test('basic usage', () => {
-    render(<${exportName} />)
+    render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
   })
 })
 `

From 18653b0206004d78a67ab34de3aa3609ff6e9249 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 13 Sep 2025 02:19:00 -0400
Subject: [PATCH 13/98] recorder WIP

- avoid multiple matches by using exact regex
---
 .../web-view-vite/src/recorder/recorder.ts    | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 142fbba..6e17678 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -66,7 +66,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
 
           const eventData: Parameters<typeof client.recordInputAsCode.mutate>[0]['eventData'] = {}
 
-          if (eventType === 'change' && target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+          if (eventType === 'change' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
             const text = target.value
             eventData.text = text
           }
@@ -99,13 +99,13 @@ export function serializeQueryArgs(queryArgs: QueryArgs): [string | SerializedRe
   const [query, options] = queryArgs
   if (!options) {
     // @ts-expect-error Not declared the testing library, but the query could be a RegExp:
-    const result = query instanceof RegExp ? serializeRegexp(query) : query
+    const result = query instanceof RegExp ? processRegexp(query) : query
     return [result]
   }
   const serializedOptions = Object.entries(options).reduce((prev, curr) => {
     const val = curr[1]
     if (val !== undefined) {
-      prev[curr[0]] = val instanceof RegExp ? serializeRegexp(val) : val
+      prev[curr[0]] = val instanceof RegExp ? processRegexp(val) : val
     }
     return prev
   }, {} as Record<string, string | boolean | SerializedRegexp>)
@@ -115,6 +115,17 @@ export function serializeQueryArgs(queryArgs: QueryArgs): [string | SerializedRe
 
 export interface SerializedRegexp { type: 'regexp', value: string }
 
-function serializeRegexp(regexp: RegExp): SerializedRegexp {
+function processRegexp(regexp: RegExp): SerializedRegexp {
+  // Make the regexp exact, to avoid multiple matches.
+  // e.g. when you have buttons aria-labeled "right" and "top right", then the regex /right/ would match both.
+  regexp = makeRegexpExact(regexp)
+
   return { type: 'regexp', value: regexp.toString() }
 }
+
+function makeRegexpExact(regexp: RegExp) {
+  const { source, flags } = regexp
+
+  // Wrap with ^ and $
+  return new RegExp(`^${source}$`, flags)
+}

From 1172292b895d872c181549455780742f7423d76b Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 17 Sep 2025 00:49:08 -0400
Subject: [PATCH 14/98] recorder WIP

- Add recorder panel UI
- code view on left half (using fake data atm)
- mouse event selection on right half
---
 .../src/recorder/record-input-as-code.ts      |   2 +-
 packages/web-view-vite/package.json           |   3 +
 packages/web-view-vite/src/App.tsx            |  39 ++-
 .../src/recorder/recorder-panel.tsx           | 103 ++++++
 .../web-view-vite/src/recorder/recorder.ts    |  26 +-
 pnpm-lock.yaml                                | 314 ++++++++++++++++++
 6 files changed, 471 insertions(+), 16 deletions(-)
 create mode 100644 packages/web-view-vite/src/recorder/recorder-panel.tsx

diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index c8c8436..b65f7f6 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -131,7 +131,7 @@ ${code};
 })()
 `
 
-      const resultStr = await debuggerTracker.runDebugExpression(
+      await debuggerTracker.runDebugExpression(
         debugExpression,
       )
       panelController.flushPatches()
diff --git a/packages/web-view-vite/package.json b/packages/web-view-vite/package.json
index 88860a1..0a1de1b 100644
--- a/packages/web-view-vite/package.json
+++ b/packages/web-view-vite/package.json
@@ -9,6 +9,8 @@
   "dependencies": {
     "@kobalte/core": "0.13.11",
     "@kobalte/utils": "^0.9.1",
+    "@shikijs/langs": "^3.12.2",
+    "@shikijs/themes": "^3.12.2",
     "@solid-primitives/event-listener": "^2.4.3",
     "@solid-primitives/map": "^0.7.2",
     "@solid-primitives/mutation-observer": "^1.2.2",
@@ -23,6 +25,7 @@
     "lodash": "^4.17.21",
     "lucide-solid": "^0.542.0",
     "replicate-dom": "workspace:*",
+    "shiki": "^3.12.2",
     "solid-js": "^1.9.9",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index 1f48018..af5a844 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -1,5 +1,5 @@
 import * as webviewToolkit from '@vscode/webview-ui-toolkit'
-import { ErrorBoundary, Show, createSignal } from 'solid-js'
+import { ErrorBoundary, Match, Show, Switch, createSignal } from 'solid-js'
 import { createColorTheme } from './lib/color-theme'
 import { createDomReplica } from './lib/create-dom-replica'
 import { createInspectorHeight } from './inspector/inspector-height'
@@ -7,8 +7,7 @@ import { Toolbar } from './components/Toolbar'
 import { Inspector } from './inspector/Inspector'
 import { Resizer } from './inspector/Resizer'
 import { createRecorder } from './recorder/recorder'
-
-// Importing the router type from the server file
+import { RecorderPanel } from './recorder/recorder-panel'
 
 // In order to use the Webview UI Toolkit web components they
 // must be registered with the browser (i.e. webview) using the
@@ -21,6 +20,7 @@ import { createRecorder } from './recorder/recorder'
     .register(webviewToolkit.vsCodeCheckbox({ prefix }))
     .register(webviewToolkit.vsCodeProgressRing({ prefix }))
     .register(webviewToolkit.vsCodeTextField({ prefix }))
+    .register(webviewToolkit.vsCodeRadio({ prefix }))
 }
 
 // TODO put these into a context provider
@@ -65,17 +65,32 @@ export function App() {
           >
             {shadowHost}
           </div>
-          <Show when={inspector.isOpen()}>
+          <Show when={inspector.isOpen() || recorder.isRecording()}>
             <div style={{ height: `${inspector.height()}px` }}>
               <Resizer onResize={inspector.updateHeight} />
-              <ErrorBoundary fallback={error => (
-                <div class="text-error-foreground p-4">
-                  Error showing the inspector{error instanceof Error ? `: ${error.message}` : ''}
-                </div>
-              )}
-              >
-                <Inspector />
-              </ErrorBoundary>
+              <Switch>
+                <Match when={recorder.isRecording()}>
+                  <ErrorBoundary fallback={error => (
+                    <div class="text-error-foreground p-4">
+                      Error showing the recorder UI{error instanceof Error ? `: ${error.message}` : ''}
+                    </div>
+                  )}
+                  >
+                    <RecorderPanel />
+                  </ErrorBoundary>
+
+                </Match>
+                <Match when={inspector.isOpen()}>
+                  <ErrorBoundary fallback={error => (
+                    <div class="text-error-foreground p-4">
+                      Error showing the inspector{error instanceof Error ? `: ${error.message}` : ''}
+                    </div>
+                  )}
+                  >
+                    <Inspector />
+                  </ErrorBoundary>
+                </Match>
+              </Switch>
             </div>
           </Show>
         </div>
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
new file mode 100644
index 0000000..44ea571
--- /dev/null
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -0,0 +1,103 @@
+import { For, Suspense, createResource, createSignal } from 'solid-js'
+import { createHighlighterCore, createJavaScriptRegexEngine } from 'shiki'
+import shikiDarkPlus from '@shikijs/themes/dark-plus'
+import shikiLightPlus from '@shikijs/themes/light-plus'
+import shikiTypescript from '@shikijs/langs/typescript'
+import { recorder } from '../App'
+import { MOUSE_EVENT_TYPES } from './recorder'
+
+export function RecorderPanel() {
+  const [codeHighlighter] = createResource(async () => await createHighlighterCore({
+    themes: [shikiDarkPlus, shikiLightPlus],
+    langs: [shikiTypescript],
+    engine: createJavaScriptRegexEngine(),
+  }))
+
+  // TODO show the actual generated code
+  const [mockGeneratedCode] = createSignal([
+    'console.log(\'click on button\')',
+    'console.log(\'type in input\')',
+    'console.log(\'hover over element\')',
+    'console.log(\'double click\')',
+    'console.log(\'right click\')',
+    'console.log(\'mouse down\')',
+    'console.log(\'mouse up\')',
+    'console.log(\'mouse enter\')',
+    'console.log(\'mouse leave\')',
+    'console.log(\'mouse move\')',
+  ])
+
+  function highlightedCode(code: string) {
+    const shikiTheme = document.body.classList.contains('vscode-light') ? 'light-plus' : 'dark-plus'
+
+    const html = codeHighlighter.error
+      ? null
+      // codeHighlighter() triggers Suspense
+      : codeHighlighter()?.codeToHtml(
+        code,
+        { lang: 'typescript', theme: shikiTheme },
+      )
+
+    if (!html) {
+      return code
+    }
+
+    return (
+      <div ref={(div) => {
+        div.innerHTML = html
+        // Remove shiki's default background colors from the generated elements.
+        for (const el of div.querySelectorAll('pre') ?? []) {
+          el.style.backgroundColor = 'transparent'
+        }
+        for (const el of div.querySelectorAll('code') ?? []) {
+          el.style.backgroundColor = 'transparent'
+        }
+      }}
+      />
+    )
+  }
+
+  return (
+    <div class="flex h-full">
+      <div class="w-1/2 p-4 border-r border-[--vscode-panel-border]">
+        <div>
+          <h2 class="text-lg font-semibold mb-2">Generated Code</h2>
+          <pre class="text-sm">
+            <For each={mockGeneratedCode()}>{code => (
+              <Suspense fallback={<div>{code}</div>}>
+                <>{highlightedCode(code)}</>
+              </Suspense>
+            )}
+            </For>
+          </pre>
+        </div>
+      </div>
+      <div class="w-1/2 p-4">
+        <div>
+          <h2 class="text-lg font-semibold mb-2">Choose Mouse Event</h2>
+          <div class="flex flex-wrap gap-1">
+            <For each={MOUSE_EVENT_TYPES}>{event => (
+              <label class="flex items-center bg-(--checkbox-background) px-2 py-1 rounded cursor-pointer">
+                <ui-test-visualizer-radio
+                  value={event}
+                  checked={recorder.mouseEvent() === event}
+                  onChange={(e: any) => {
+                    if (e.target.checked) {
+                      recorder.setMouseEvent(e.target.value)
+                      console.log('changed to', e)
+                    }
+                  }}
+                >
+                  <div class="pb-[3px]">
+                    {event}
+                  </div>
+                </ui-test-visualizer-radio>
+              </label>
+            )}
+            </For>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 6e17678..28cc0cd 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,16 +1,30 @@
 import { makeEventListener } from '@solid-primitives/event-listener'
-import type { QueryArgs, Suggestion } from '@testing-library/dom'
+import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
 import { createEffect, createSignal } from 'solid-js'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
 
+export const MOUSE_EVENT_TYPES: EventType[] = [
+  'click',
+  'dblClick',
+  'mouseDown',
+  'mouseUp',
+  'mouseEnter',
+  'mouseLeave',
+  'mouseMove',
+  'mouseOver',
+  'mouseOut',
+  'contextMenu',
+]
+
 export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
+  const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
 
   createEffect(() => {
     if (isRecording()) {
-      for (const eventType of ['click', 'submit', 'focus', 'blur', 'change'] as const) {
+      for (const eventType of ['click', 'submit', 'change'] as const) {
         makeEventListener(shadowHost.shadowRoot!, eventType, (e: Event) => {
           let target = e.target
 
@@ -71,10 +85,14 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             eventData.text = text
           }
 
+          const recordedEventType = eventType === 'click'
+            ? mouseEvent()
+            : eventType
+
           const query = serializeQueryArgs(suggestedQuery.queryArgs)
           // Send the selector to the extension process to record as code
           void client.recordInputAsCode.mutate({
-            event: eventType,
+            event: recordedEventType,
             query: [suggestedQuery.queryMethod, query],
             eventData,
           })
@@ -88,6 +106,8 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     toggle: (recording: boolean) => {
       setIsRecording(recording)
     },
+    mouseEvent,
+    setMouseEvent,
   }
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 258783a..c9068fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -473,6 +473,12 @@ importers:
       '@kobalte/utils':
         specifier: ^0.9.1
         version: 0.9.1(solid-js@1.9.9)
+      '@shikijs/langs':
+        specifier: ^3.12.2
+        version: 3.12.2
+      '@shikijs/themes':
+        specifier: ^3.12.2
+        version: 3.12.2
       '@solid-primitives/event-listener':
         specifier: ^2.4.3
         version: 2.4.3(solid-js@1.9.9)
@@ -515,6 +521,9 @@ importers:
       replicate-dom:
         specifier: workspace:*
         version: link:../replicate-dom
+      shiki:
+        specifier: ^3.12.2
+        version: 3.12.2
       solid-js:
         specifier: ^1.9.9
         version: 1.9.9
@@ -3263,6 +3272,27 @@ packages:
     resolution: {integrity: sha512-8fHvsBMQtibVDxHKCyjaxDdWStE6E063xwBqrBz1zl/VArzEVUzXF+NLNc/LdIuyVrgQ41BG7Bmvo5bbZQ+XEg==}
     engines: {node: '>=20.0.0'}
 
+  '@shikijs/core@3.12.2':
+    resolution: {integrity: sha512-L1Safnhra3tX/oJK5kYHaWmLEBJi1irASwewzY3taX5ibyXyMkkSDZlq01qigjryOBwrXSdFgTiZ3ryzSNeu7Q==}
+
+  '@shikijs/engine-javascript@3.12.2':
+    resolution: {integrity: sha512-Nm3/azSsaVS7hk6EwtHEnTythjQfwvrO5tKqMlaH9TwG1P+PNaR8M0EAKZ+GaH2DFwvcr4iSfTveyxMIvXEHMw==}
+
+  '@shikijs/engine-oniguruma@3.12.2':
+    resolution: {integrity: sha512-hozwnFHsLvujK4/CPVHNo3Bcg2EsnG8krI/ZQ2FlBlCRpPZW4XAEQmEwqegJsypsTAN9ehu2tEYe30lYKSZW/w==}
+
+  '@shikijs/langs@3.12.2':
+    resolution: {integrity: sha512-bVx5PfuZHDSHoBal+KzJZGheFuyH4qwwcwG/n+MsWno5cTlKmaNtTsGzJpHYQ8YPbB5BdEdKU1rga5/6JGY8ww==}
+
+  '@shikijs/themes@3.12.2':
+    resolution: {integrity: sha512-fTR3QAgnwYpfGczpIbzPjlRnxyONJOerguQv1iwpyQZ9QXX4qy/XFQqXlf17XTsorxnHoJGbH/LXBvwtqDsF5A==}
+
+  '@shikijs/types@3.12.2':
+    resolution: {integrity: sha512-K5UIBzxCyv0YoxN3LMrKB9zuhp1bV+LgewxuVwHdl4Gz5oePoUFrr9EfgJlGlDeXCU1b/yhdnXeuRvAnz8HN8Q==}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
@@ -3616,6 +3646,9 @@ packages:
   '@types/graceful-fs@4.1.9':
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -3643,6 +3676,9 @@ packages:
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
@@ -3673,6 +3709,9 @@ packages:
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/vscode-webview@1.57.5':
     resolution: {integrity: sha512-iBAUYNYkz+uk1kdsq05fEcoh8gJmwT3lqqFPN7MGyjQ3HVloViMdo7ZJ8DFIP8WOK74PjOEilosqAyxV2iUFUw==}
 
@@ -4352,6 +4391,9 @@ packages:
   caniuse-lite@1.0.30001737:
     resolution: {integrity: sha512-BiloLiXtQNrY5UyF0+1nSJLXUENuhka2pzy2Fx5pGxqavdrxSCW4U6Pn/PoG3Efspi2frRbHpBV2XsrPE6EDlw==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@5.2.0:
     resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
     engines: {node: '>=12'}
@@ -4372,9 +4414,15 @@ packages:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
   character-entities-legacy@1.1.4:
     resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
 
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   character-entities@1.2.4:
     resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
 
@@ -4478,6 +4526,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
@@ -4668,6 +4719,9 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -5366,6 +5420,12 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
@@ -5387,6 +5447,9 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   htmlparser2@10.0.0:
     resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
 
@@ -6195,6 +6258,9 @@ packages:
   mdast-util-from-markdown@0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
 
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
   mdast-util-to-string@2.0.0:
     resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
 
@@ -6212,6 +6278,21 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
   micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
 
@@ -6424,6 +6505,12 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.3:
+    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
+
   open@10.1.2:
     resolution: {integrity: sha512-cxN6aIDPz6rm8hbebcP7vrQNhvRcveZoJU72Y7vskh4oIm+BZwBECnx5nTmrlres1Qapvx27Qo1Auukpf8PKXw==}
     engines: {node: '>=18'}
@@ -6739,6 +6826,9 @@ packages:
     resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==}
     engines: {node: '>=18'}
 
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
@@ -6848,6 +6938,15 @@ packages:
   regenerate@1.4.2:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
   regexp-ast-analysis@0.7.1:
     resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -7009,6 +7108,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shiki@3.12.2:
+    resolution: {integrity: sha512-uIrKI+f9IPz1zDT+GMz+0RjzKJiijVr6WDWm9Pe3NNY6QigKCfifCEv9v9R2mDASKKjzjQ2QpFLcxaR3iHSnMA==}
+
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -7101,6 +7203,9 @@ packages:
     engines: {node: '>= 8'}
     deprecated: The work that was done in this beta branch won't be included in future versions
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   spawndamnit@3.0.1:
     resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
@@ -7151,6 +7256,9 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -7378,6 +7486,9 @@ packages:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
   ts-api-utils@1.3.0:
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
@@ -7512,9 +7623,24 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
   unist-util-stringify-position@2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
 
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
   universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
@@ -7574,6 +7700,12 @@ packages:
     resolution: {integrity: sha512-gjb0ARm9qlcBAonU4zPwkl9ecKkas+tC2CGwFfptTCWWIVTWY1YUbT2zZKsOAF1jR/tNxxyLwwG0cb42XlYcTg==}
     engines: {node: '>=4'}
 
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vite-node@2.1.8:
     resolution: {integrity: sha512-uPAwSr57kYjAUux+8E2j0q0Fxpn8M9VoyfGiRI8Kfktz9NcYMCenwY5RnZxnF1WTu3TGiYipirIzacLL3VVGFg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -7957,6 +8089,9 @@ packages:
   zod@4.1.5:
     resolution: {integrity: sha512-rcUUZqlLJgBC33IT3PNMgsCq6TzLQEG/Ei/KTCU0PedSWRMAXoOUN+4t/0H+Q8bdnLPdqUYnvboJT0bn/229qg==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@adobe/css-tools@4.3.3': {}
@@ -10921,6 +11056,39 @@ snapshots:
 
   '@secretlint/types@10.2.0': {}
 
+  '@shikijs/core@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.3
+
+  '@shikijs/engine-oniguruma@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+
+  '@shikijs/themes@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+
+  '@shikijs/types@3.12.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@sinclair/typebox@0.27.8': {}
 
   '@sinclair/typebox@0.34.37': {}
@@ -11302,6 +11470,10 @@ snapshots:
     dependencies:
       '@types/node': 24.3.0
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 2.0.10
+
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -11333,6 +11505,10 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.10
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/node@12.20.55': {}
 
   '@types/node@24.3.0':
@@ -11362,6 +11538,8 @@ snapshots:
 
   '@types/unist@2.0.10': {}
 
+  '@types/unist@3.0.3': {}
+
   '@types/vscode-webview@1.57.5': {}
 
   '@types/vscode@1.103.0': {}
@@ -12183,6 +12361,8 @@ snapshots:
 
   caniuse-lite@1.0.30001737: {}
 
+  ccount@2.0.1: {}
+
   chai@5.2.0:
     dependencies:
       assertion-error: 2.0.1
@@ -12208,8 +12388,12 @@ snapshots:
 
   char-regex@1.0.2: {}
 
+  character-entities-html4@2.1.0: {}
+
   character-entities-legacy@1.1.4: {}
 
+  character-entities-legacy@3.0.0: {}
+
   character-entities@1.2.4: {}
 
   character-reference-invalid@1.1.4: {}
@@ -12320,6 +12504,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@12.1.0: {}
 
   commander@4.1.1: {}
@@ -12458,6 +12644,10 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   didyoumean@1.2.2: {}
 
   diff-sequences@29.6.3: {}
@@ -13335,6 +13525,24 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   hosted-git-info@2.8.9: {}
 
   hosted-git-info@4.1.0:
@@ -13353,6 +13561,8 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
+  html-void-elements@3.0.0: {}
+
   htmlparser2@10.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -14520,6 +14730,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-to-hast@13.2.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
   mdast-util-to-string@2.0.0: {}
 
   mdurl@2.0.0: {}
@@ -14532,6 +14754,23 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
   micromark@2.11.4:
     dependencies:
       debug: 4.4.1
@@ -14736,6 +14975,14 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  oniguruma-parser@0.12.1: {}
+
+  oniguruma-to-es@4.3.3:
+    dependencies:
+      oniguruma-parser: 0.12.1
+      regex: 6.0.1
+      regex-recursion: 6.0.2
+
   open@10.1.2:
     dependencies:
       default-browser: 5.2.1
@@ -15044,6 +15291,8 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
+  property-information@7.1.0: {}
+
   prr@1.0.1:
     optional: true
 
@@ -15165,6 +15414,16 @@ snapshots:
 
   regenerate@1.4.2: {}
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.0.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexp-ast-analysis@0.7.1:
     dependencies:
       '@eslint-community/regexpp': 4.10.0
@@ -15420,6 +15679,17 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shiki@3.12.2:
+    dependencies:
+      '@shikijs/core': 3.12.2
+      '@shikijs/engine-javascript': 3.12.2
+      '@shikijs/engine-oniguruma': 3.12.2
+      '@shikijs/langs': 3.12.2
+      '@shikijs/themes': 3.12.2
+      '@shikijs/types': 3.12.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -15523,6 +15793,8 @@ snapshots:
     dependencies:
       whatwg-url: 7.1.0
 
+  space-separated-tokens@2.0.2: {}
+
   spawndamnit@3.0.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -15581,6 +15853,11 @@ snapshots:
       safe-buffer: 5.2.1
     optional: true
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -15819,6 +16096,8 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
+  trim-lines@3.0.1: {}
+
   ts-api-utils@1.3.0(typescript@5.9.2):
     dependencies:
       typescript: 5.9.2
@@ -15933,10 +16212,33 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
   unist-util-stringify-position@2.0.3:
     dependencies:
       '@types/unist': 2.0.10
 
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   universalify@0.1.2: {}
 
   universalify@2.0.1: {}
@@ -16016,6 +16318,16 @@ snapshots:
 
   version-range@4.14.0: {}
 
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   vite-node@2.1.8(@types/node@24.3.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.91.0)(stylus@0.64.0):
     dependencies:
       cac: 6.7.14
@@ -16435,3 +16747,5 @@ snapshots:
   yoctocolors@2.1.1: {}
 
   zod@4.1.5: {}
+
+  zwitch@2.0.4: {}

From ddbdc70dbf387ba73d614804fb1f3b947aced6bd Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 17 Sep 2025 01:24:15 -0400
Subject: [PATCH 15/98] recorder WIP

- fix panel sizing getting stuck
- fix radio button colors
---
 packages/web-view-vite/src/App.tsx                     | 7 +------
 packages/web-view-vite/src/recorder/recorder-panel.tsx | 9 ++++-----
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index af5a844..6ee1df8 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -58,11 +58,7 @@ export function App() {
           style={{ visibility: firstPatchReceived() ? 'visible' : 'hidden' }}
           class="absolute h-full w-full flex flex-col"
         >
-          <div
-            style={{
-              height: inspector.isOpen() ? `calc(100% - ${inspector.height()}px)` : '100%',
-            }}
-          >
+          <div class="flex-1">
             {shadowHost}
           </div>
           <Show when={inspector.isOpen() || recorder.isRecording()}>
@@ -78,7 +74,6 @@ export function App() {
                   >
                     <RecorderPanel />
                   </ErrorBoundary>
-
                 </Match>
                 <Match when={inspector.isOpen()}>
                   <ErrorBoundary fallback={error => (
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 44ea571..561bd97 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -58,8 +58,8 @@ export function RecorderPanel() {
   }
 
   return (
-    <div class="flex h-full">
-      <div class="w-1/2 p-4 border-r border-[--vscode-panel-border]">
+    <div class="flex h-full w-full">
+      <div class="w-1/2 h-full overflow-y-auto p-4 border-r border-[--vscode-panel-border]">
         <div>
           <h2 class="text-lg font-semibold mb-2">Generated Code</h2>
           <pre class="text-sm">
@@ -72,19 +72,18 @@ export function RecorderPanel() {
           </pre>
         </div>
       </div>
-      <div class="w-1/2 p-4">
+      <div class="w-1/2 h-full overflow-y-auto p-4">
         <div>
           <h2 class="text-lg font-semibold mb-2">Choose Mouse Event</h2>
           <div class="flex flex-wrap gap-1">
             <For each={MOUSE_EVENT_TYPES}>{event => (
-              <label class="flex items-center bg-(--checkbox-background) px-2 py-1 rounded cursor-pointer">
+              <label class="flex items-center bg-(--vscode-list-hoverBackground) px-2 py-1 rounded cursor-pointer">
                 <ui-test-visualizer-radio
                   value={event}
                   checked={recorder.mouseEvent() === event}
                   onChange={(e: any) => {
                     if (e.target.checked) {
                       recorder.setMouseEvent(e.target.value)
-                      console.log('changed to', e)
                     }
                   }}
                 >

From 9a19625df971a408ffc9892edbeb14628f40bdf6 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 17 Sep 2025 01:46:14 -0400
Subject: [PATCH 16/98] fix type error

---
 packages/web-view-vite/package.json                    | 1 +
 packages/web-view-vite/src/recorder/recorder-panel.tsx | 7 ++++---
 pnpm-lock.yaml                                         | 5 ++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/web-view-vite/package.json b/packages/web-view-vite/package.json
index 0a1de1b..4e27b2d 100644
--- a/packages/web-view-vite/package.json
+++ b/packages/web-view-vite/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@kobalte/core": "0.13.11",
     "@kobalte/utils": "^0.9.1",
+    "@shikijs/core": "^3.12.2",
     "@shikijs/langs": "^3.12.2",
     "@shikijs/themes": "^3.12.2",
     "@solid-primitives/event-listener": "^2.4.3",
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 561bd97..346fb5d 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -1,8 +1,9 @@
-import { For, Suspense, createResource, createSignal } from 'solid-js'
-import { createHighlighterCore, createJavaScriptRegexEngine } from 'shiki'
+import { createHighlighterCore } from '@shikijs/core'
+import shikiTypescript from '@shikijs/langs/typescript'
 import shikiDarkPlus from '@shikijs/themes/dark-plus'
 import shikiLightPlus from '@shikijs/themes/light-plus'
-import shikiTypescript from '@shikijs/langs/typescript'
+import { createJavaScriptRegexEngine } from 'shiki'
+import { For, Suspense, createResource, createSignal } from 'solid-js'
 import { recorder } from '../App'
 import { MOUSE_EVENT_TYPES } from './recorder'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c9068fa..7833d47 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -473,6 +473,9 @@ importers:
       '@kobalte/utils':
         specifier: ^0.9.1
         version: 0.9.1(solid-js@1.9.9)
+      '@shikijs/core':
+        specifier: ^3.12.2
+        version: 3.12.2
       '@shikijs/langs':
         specifier: ^3.12.2
         version: 3.12.2
@@ -11472,7 +11475,7 @@ snapshots:
 
   '@types/hast@3.0.4':
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
 
   '@types/istanbul-lib-coverage@2.0.6': {}
 

From 91181767c1644b22914adecf3d4b61c83c1ed153 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 17 Sep 2025 03:37:13 -0400
Subject: [PATCH 17/98] recorder WIP

- perform the edit when the debug session ends
- display the generated code grouped by line to insert at
---
 packages/extension/src/extension.ts           | 13 +--
 .../src/panel-controller/panel-controller.ts  |  2 +-
 .../src/panel-controller/panel-router.ts      | 13 +--
 .../src/recorder/record-input-as-code.ts      | 87 ++++++++++++-------
 .../extension/src/util/debugger-tracker.ts    | 15 +++-
 packages/extension/src/util/util.ts           | 30 +++++++
 .../src/recorder/recorder-panel.tsx           | 37 +++-----
 .../web-view-vite/src/recorder/recorder.ts    | 20 ++++-
 8 files changed, 146 insertions(+), 71 deletions(-)
 create mode 100644 packages/extension/src/util/util.ts

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 22bc5fd..54b8008 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -1,7 +1,6 @@
 import '@total-typescript/ts-reset'
 
 import { TelemetryReporter } from '@vscode/extension-telemetry'
-import once from 'lodash/once'
 import path from 'pathe'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
@@ -9,14 +8,15 @@ import { autoSetFirstBreakpoint } from './auto-set-first-breakpoint'
 import { codeLensProvider } from './code-lens-provider'
 import { makeDebugConfig } from './debug-config'
 import { detectTestFramework } from './framework-support/detect-test-framework'
+import { detectTestLibrary } from './framework-support/detect-test-library'
 import { myExtensionStorage } from './my-extension-storage'
 import { startPanelController } from './panel-controller/panel-controller'
+import { createUiTestFile } from './recorder/create-ui-test-file'
 import { startRecorderCodeGenSession } from './recorder/record-input-as-code'
 import { startDebuggerTracker } from './util/debugger-tracker'
 import { extensionSetting } from './util/extension-setting'
 import { hotReload } from './util/hot-reload'
-import { detectTestLibrary } from './framework-support/detect-test-library'
-import { createUiTestFile } from './recorder/create-ui-test-file'
+import { onceWithPeek } from './util/util'
 
 const reporter = (() => {
   try {
@@ -127,9 +127,9 @@ export let visuallyDebugUI = async (
   await vscode.window.activeTextEditor?.document.save()
 
   // Only initialize the recorder state once per debug session
-  const recorderCodeGenSession = once(
-    async () => testLibrary
-      ? await startRecorderCodeGenSession(testFile, frameworkInfo.framework, testLibrary, panelController)
+  const recorderCodeGenSession = onceWithPeek(
+    () => testLibrary
+      ? startRecorderCodeGenSession(testFile, frameworkInfo.framework, testLibrary, panelController)
       : null,
   )
 
@@ -143,6 +143,7 @@ export let visuallyDebugUI = async (
       {
         onFrameChange: () => panelController.flushPatches(),
         onDebugRestarted: () => panelController.notifyDebuggerRestarted(),
+        onDebugTerminated: async () => recorderCodeGenSession.peek()?.performEdit(),
       },
     )
 
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index 7f8e07b..f05039f 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -18,7 +18,7 @@ export type PanelController = Awaited<ReturnType<typeof startPanelController>>
 export async function startPanelController(
   extensionContext: vscode.ExtensionContext,
   storage: MyStorageType,
-  recorderCodeGenSession: () => Promise<RecorderCodeGenSession | null>,
+  recorderCodeGenSession: () => RecorderCodeGenSession | null,
 ) {
   const htmlUpdaterPort = await getPort()
   const viteDevServerPort = 5173
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index b73d9f9..3df1926 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -11,11 +11,15 @@ export interface PanelRouterCtx {
   debuggerTracker: DebuggerTracker
   storage: MyStorageType
   flushPatches: () => void
-  recorderCodeGenSession: () => Promise<RecorderCodeGenSession | null>
+  recorderCodeGenSession: () => RecorderCodeGenSession | null
 }
 
 const t = initTRPC.context<PanelRouterCtx>().create()
 
+export const zRecordedEventData = z.object({
+  text: z.optional(z.string()), // Used for change events
+})
+
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
 export const panelRouter = t.router({
   serializeHtml: t.procedure
@@ -180,9 +184,7 @@ export const panelRouter = t.router({
     .input(
       z.object({
         event: z.string(),
-        eventData: z.object({
-          text: z.optional(z.string()), // Used for change events
-        }),
+        eventData: zRecordedEventData,
         query: z.tuple([
           z.string(),
           z.tuple([
@@ -198,7 +200,7 @@ export const panelRouter = t.router({
     .mutation(async ({ ctx, input }) => {
       const { event, eventData, query: [method, [queryArg0, queryOptions]] } = input
       const recorderCodeGenSession = await ctx.recorderCodeGenSession()
-      await recorderCodeGenSession?.recordInputAsCode(
+      const insertion = recorderCodeGenSession?.recordInputAsCode(
         ctx.debuggerTracker,
         event,
         eventData,
@@ -206,6 +208,7 @@ export const panelRouter = t.router({
         queryArg0,
         queryOptions,
       )
+      return insertion
     }),
 })
 
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index b65f7f6..a34a277 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,12 +1,10 @@
-import type { inferProcedureInput } from '@trpc/server'
 import { walk } from 'estree-walker'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
-import { detectTestLibrary } from '../framework-support/detect-test-library'
 import type { PanelController } from '../panel-controller/panel-controller'
-import type { panelRouter } from '../panel-controller/panel-router'
+import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
@@ -17,36 +15,44 @@ export const zSerializedRegexp = z.object({
   value: z.string(),
 })
 
-export async function startRecorderCodeGenSession(
+export function startRecorderCodeGenSession(
   testFile: string,
   testFramework: SupportedFramework,
   testLibrary: TestingLibrary,
   panelController: PanelController,
 ) {
-  // @ts-expect-error import the wasm file directly
-  const { parseSync } = await import('@oxc-parser/binding-wasm32-wasi')
+  // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
+  const { parseSync } = require('@oxc-parser/binding-wasm32-wasi')
 
-  let offset = 0
+  const insertions: Record<number, string[]> = {}
+  function addInsertion(line: number, text: string) {
+    const lines = insertions[line] ?? (insertions[line] = [])
+    lines.push(text)
+  }
+
+  const requiredImports = new Map<string, { from: string }>()
+
+  let editor: vscode.TextEditor | undefined
 
   return {
     recordInputAsCode: async (
       debuggerTracker: DebuggerTracker,
       event: string,
-      eventData: inferProcedureInput<typeof panelRouter.recordInputAsCode>['eventData'],
+      eventData: z.infer<typeof zRecordedEventData>,
       findMethod: string,
       queryArg0: string | SerializedRegexp,
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
-    ) => {
+    ): Promise<[number, string] | null> => {
       const pausedLocation = await debuggerTracker.getPausedLocation()
       if (!pausedLocation) {
-        return
+        return null
       }
 
-      const editor = vscode.window.visibleTextEditors.find(
+      editor = vscode.window.visibleTextEditors.find(
         editor => editor.document.uri.path === pausedLocation.filePath.toString(),
-      )
+      ) ?? editor
       if (!editor) {
-        return
+        return null
       }
 
       const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
@@ -117,7 +123,7 @@ export async function startRecorderCodeGenSession(
       code = `${indent}${code}`
 
       // Figure out which imports need to be added
-      const requiredImports = new Map<string, { from: string }>([
+      const newRequiredImports = new Map<string, { from: string }>([
         [fireEvent, { from: testLibrary }],
         [screen, { from: testLibrary }],
       ])
@@ -126,19 +132,49 @@ export async function startRecorderCodeGenSession(
       // We do this through a debug expression, which is the same as running code through vscode's 'Debug Terminal'.
       const debugExpression = `
 (() => {
-${[...requiredImports.entries()].map(([importName, { from }]) => `const { ${importName} } = require('${from}');`).join('\n')}
+${[...newRequiredImports.entries()].map(([importName, { from }]) => `const { ${importName} } = require('${from}');`).join('\n')}
 ${code};
 })()
 `
 
-      await debuggerTracker.runDebugExpression(
-        debugExpression,
-      )
+      await debuggerTracker.runDebugExpression(debugExpression)
       panelController.flushPatches()
 
+      // Add the fireEvent code
+      addInsertion(pausedLocation.lineNumber, `${code}\n`)
+
+      return [pausedLocation.lineNumber, code] as const
+    },
+
+    performEdit: async () => {
+      if (Object.keys(insertions).length === 0) {
+        // No edits to perform
+        return
+      }
+
+      if (!editor) {
+        vscode.window.showInformationMessage('No editor found')
+        return
+      }
+
+      const reverseOrderInsertions = Object.entries(insertions)
+        .sort((a, b) => Number(b[0]) - Number(a[0]))
+
+      for (const [line, lines] of reverseOrderInsertions) {
+        const lineNumber = Number.parseInt(line)
+        const position = new vscode.Position(lineNumber - 1, 0)
+        await editor.edit((editBuilder) => {
+          for (const line of lines) {
+            editBuilder.insert(position, line)
+          }
+        })
+      }
+
+      // Figure out where to put each import statement
+      // Either add a new import, or edit an existing one to import something else
       const importInsertionPoints = new Map<string, number>()
       {
-        // TODO avoid re-parsing for every generated line of code
+        // TODO avoid re-parsing for every generated line of code?
         const parsed = parseSync(editor.document.fileName, editor.document.getText(), {})
         const programJson = parsed.program
         const program = JSON.parse(programJson)
@@ -162,17 +198,6 @@ ${code};
         })
       }
 
-      // Do the code edit
-
-      // Add the fireEvent code
-      if (editor && pausedLocation) {
-        const position = new vscode.Position(pausedLocation.lineNumber - 1 + offset, 0)
-        await editor.edit((editBuilder) => {
-          editBuilder.insert(position, `${code}\n`)
-          offset += 1
-        })
-      }
-
       // Add missing imports
       for (const [importName, { from }] of requiredImports) {
         const insertionPoint = importInsertionPoints.get(from)
@@ -180,13 +205,11 @@ ${code};
           const position = editor.document.positionAt(insertionPoint)
           await editor.edit((editBuilder) => {
             editBuilder.insert(position, `, ${importName}`)
-            offset += 1
           })
         }
         else {
           await editor.edit((editBuilder) => {
             editBuilder.insert(new vscode.Position(0, 0), `import { ${importName} } from '${from}'\n`)
-            offset += 1
           })
         }
       }
diff --git a/packages/extension/src/util/debugger-tracker.ts b/packages/extension/src/util/debugger-tracker.ts
index ceea474..33be664 100644
--- a/packages/extension/src/util/debugger-tracker.ts
+++ b/packages/extension/src/util/debugger-tracker.ts
@@ -12,7 +12,12 @@ export function startDebuggerTracker(
   {
     onFrameChange,
     onDebugRestarted,
-  }: { onFrameChange: () => void, onDebugRestarted: () => void },
+    onDebugTerminated,
+  }: {
+    onFrameChange: () => void
+    onDebugRestarted: () => void
+    onDebugTerminated: () => void
+  },
 ) {
   const disposables = new Set<vscode.Disposable>()
 
@@ -21,7 +26,13 @@ export function startDebuggerTracker(
     let hasHitFirstBreakpoint = false
     const startedSessions = new WeakSet<vscode.DebugSession>()
     disposables.add(vscode.debug.onDidStartDebugSession(session => startedSessions.add(session)))
-    disposables.add(vscode.debug.onDidTerminateDebugSession(session => startedSessions.delete(session)))
+    disposables.add(vscode.debug.onDidTerminateDebugSession((session) => {
+      startedSessions.delete(session)
+
+      if (session === rootSession) {
+        onDebugTerminated()
+      }
+    }))
     disposables.add(vscode.debug.onDidChangeActiveStackItem((stackItem) => {
       if (stackItem && startedSessions.has(stackItem?.session)) {
         if (hasHitFirstBreakpoint) {
diff --git a/packages/extension/src/util/util.ts b/packages/extension/src/util/util.ts
new file mode 100644
index 0000000..d6f6e2a
--- /dev/null
+++ b/packages/extension/src/util/util.ts
@@ -0,0 +1,30 @@
+/**
+ * Creates a function that is restricted to invoking func once.
+ * Repeat calls to the function return the value of the first call.
+ * The func is invoked with the this binding and arguments of the created function.
+ *
+ * You can peek at the result of the first call to the function by calling the peek() method.
+ *
+ * Copied and adapted from lodash's 'once' function.
+ */
+export function onceWithPeek<T extends (...args: any[]) => any>(fn: T): {
+  (): ReturnType<T>
+  peek: () => ReturnType<T> | undefined
+} {
+  let called = false
+  let result: ReturnType<T>
+
+  const wrapper = (...args: Parameters<T>): ReturnType<T> => {
+    if (!called) {
+      result = fn(...args)
+      called = true
+    }
+    return result
+  }
+
+  wrapper.peek = (): ReturnType<T> | undefined => {
+    return called ? result : undefined
+  }
+
+  return wrapper
+}
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 346fb5d..9645620 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -3,7 +3,7 @@ import shikiTypescript from '@shikijs/langs/typescript'
 import shikiDarkPlus from '@shikijs/themes/dark-plus'
 import shikiLightPlus from '@shikijs/themes/light-plus'
 import { createJavaScriptRegexEngine } from 'shiki'
-import { For, Suspense, createResource, createSignal } from 'solid-js'
+import { For, Suspense, createResource } from 'solid-js'
 import { recorder } from '../App'
 import { MOUSE_EVENT_TYPES } from './recorder'
 
@@ -14,20 +14,6 @@ export function RecorderPanel() {
     engine: createJavaScriptRegexEngine(),
   }))
 
-  // TODO show the actual generated code
-  const [mockGeneratedCode] = createSignal([
-    'console.log(\'click on button\')',
-    'console.log(\'type in input\')',
-    'console.log(\'hover over element\')',
-    'console.log(\'double click\')',
-    'console.log(\'right click\')',
-    'console.log(\'mouse down\')',
-    'console.log(\'mouse up\')',
-    'console.log(\'mouse enter\')',
-    'console.log(\'mouse leave\')',
-    'console.log(\'mouse move\')',
-  ])
-
   function highlightedCode(code: string) {
     const shikiTheme = document.body.classList.contains('vscode-light') ? 'light-plus' : 'dark-plus'
 
@@ -62,20 +48,25 @@ export function RecorderPanel() {
     <div class="flex h-full w-full">
       <div class="w-1/2 h-full overflow-y-auto p-4 border-r border-[--vscode-panel-border]">
         <div>
-          <h2 class="text-lg font-semibold mb-2">Generated Code</h2>
-          <pre class="text-sm">
-            <For each={mockGeneratedCode()}>{code => (
-              <Suspense fallback={<div>{code}</div>}>
-                <>{highlightedCode(code)}</>
-              </Suspense>
+          <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
+          <div class="text-sm flex flex-col gap-2">
+            <For each={Object.entries(recorder.insertions)}>{([lineNum, code]) => (
+              <div>
+                <h2>Insert at line: {lineNum}</h2>
+                <div class="pl-2">
+                  <Suspense fallback={<div>{code}</div>}>
+                    <>{highlightedCode(code.join('\n'))}</>
+                  </Suspense>
+                </div>
+              </div>
             )}
             </For>
-          </pre>
+          </div>
         </div>
       </div>
       <div class="w-1/2 h-full overflow-y-auto p-4">
         <div>
-          <h2 class="text-lg font-semibold mb-2">Choose Mouse Event</h2>
+          <h1 class="text-lg font-semibold mb-2">Choose Mouse Event</h1>
           <div class="flex flex-wrap gap-1">
             <For each={MOUSE_EVENT_TYPES}>{event => (
               <label class="flex items-center bg-(--vscode-list-hoverBackground) px-2 py-1 rounded cursor-pointer">
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 28cc0cd..0f213c6 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -2,6 +2,7 @@ import { makeEventListener } from '@solid-primitives/event-listener'
 import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
 import { createEffect, createSignal } from 'solid-js'
+import { createMutable } from 'solid-js/store'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
 
@@ -22,10 +23,20 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
   const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
 
+  // A copy of the insertions, replicated from the extension process to the webview here.
+  // TODO make this a CRDT owned by the extension process instead of re-creating it inside the webview?
+  const insertionsCopy = createMutable<Record<number, string[]>>({})
+  function addInsertion(line: number, text: string) {
+    if (!insertionsCopy[line]) {
+      insertionsCopy[line] = []
+    }
+    insertionsCopy[line].push(text)
+  }
+
   createEffect(() => {
     if (isRecording()) {
       for (const eventType of ['click', 'submit', 'change'] as const) {
-        makeEventListener(shadowHost.shadowRoot!, eventType, (e: Event) => {
+        makeEventListener(shadowHost.shadowRoot!, eventType, async (e: Event) => {
           let target = e.target
 
           // When clicking, use deepElementFromPoint to get the right element if it's inside a shadow root.
@@ -91,11 +102,15 @@ export function createRecorder(shadowHost: HTMLDivElement) {
 
           const query = serializeQueryArgs(suggestedQuery.queryArgs)
           // Send the selector to the extension process to record as code
-          void client.recordInputAsCode.mutate({
+          const insertion = await client.recordInputAsCode.mutate({
             event: recordedEventType,
             query: [suggestedQuery.queryMethod, query],
             eventData,
           })
+
+          if (insertion) {
+            addInsertion(insertion[0], insertion[1])
+          }
         })
       }
     }
@@ -108,6 +123,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     },
     mouseEvent,
     setMouseEvent,
+    insertions: insertionsCopy,
   }
 }
 

From b6886f20fb7d548681169439b28ce3767144808a Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 17 Sep 2025 23:01:44 -0400
Subject: [PATCH 18/98] fix test

---
 packages/web-view-vite/src/App.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index 6ee1df8..7bce3a3 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -58,7 +58,11 @@ export function App() {
           style={{ visibility: firstPatchReceived() ? 'visible' : 'hidden' }}
           class="absolute h-full w-full flex flex-col"
         >
-          <div class="flex-1">
+          <div
+            style={{
+              height: (inspector.isOpen() || recorder.isRecording()) ? `calc(100% - ${inspector.height()}px)` : '100%',
+            }}
+          >
             {shadowHost}
           </div>
           <Show when={inspector.isOpen() || recorder.isRecording()}>

From be8d745bfee6d13d27ca7835471a673c6b1edccf Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 18 Sep 2025 00:18:37 -0400
Subject: [PATCH 19/98] recorder WIP

- pass the whole set of code insertions to the client when the inserted code is changed
---
 .../src/panel-controller/panel-router.ts      |  6 +++---
 .../src/recorder/recorder-panel.tsx           |  4 ++--
 .../web-view-vite/src/recorder/recorder.ts    | 21 ++++---------------
 3 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 3df1926..73f8259 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -199,8 +199,8 @@ export const panelRouter = t.router({
     )
     .mutation(async ({ ctx, input }) => {
       const { event, eventData, query: [method, [queryArg0, queryOptions]] } = input
-      const recorderCodeGenSession = await ctx.recorderCodeGenSession()
-      const insertion = recorderCodeGenSession?.recordInputAsCode(
+      const recorderCodeGenSession = ctx.recorderCodeGenSession()
+      const _insertion = await recorderCodeGenSession?.recordInputAsCode(
         ctx.debuggerTracker,
         event,
         eventData,
@@ -208,7 +208,7 @@ export const panelRouter = t.router({
         queryArg0,
         queryOptions,
       )
-      return insertion
+      return recorderCodeGenSession?.insertions
     }),
 })
 
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 9645620..e811911 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -50,12 +50,12 @@ export function RecorderPanel() {
         <div>
           <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
           <div class="text-sm flex flex-col gap-2">
-            <For each={Object.entries(recorder.insertions)}>{([lineNum, code]) => (
+            <For each={Object.entries(recorder.codeInsertions() ?? {})}>{([lineNum, code]) => (
               <div>
                 <h2>Insert at line: {lineNum}</h2>
                 <div class="pl-2">
                   <Suspense fallback={<div>{code}</div>}>
-                    <>{highlightedCode(code.join('\n'))}</>
+                    <>{highlightedCode(code.map(it => it.trim()).join('\n'))}</>
                   </Suspense>
                 </div>
               </div>
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 0f213c6..6e37290 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -2,7 +2,6 @@ import { makeEventListener } from '@solid-primitives/event-listener'
 import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
 import { createEffect, createSignal } from 'solid-js'
-import { createMutable } from 'solid-js/store'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
 
@@ -22,16 +21,7 @@ export const MOUSE_EVENT_TYPES: EventType[] = [
 export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
   const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
-
-  // A copy of the insertions, replicated from the extension process to the webview here.
-  // TODO make this a CRDT owned by the extension process instead of re-creating it inside the webview?
-  const insertionsCopy = createMutable<Record<number, string[]>>({})
-  function addInsertion(line: number, text: string) {
-    if (!insertionsCopy[line]) {
-      insertionsCopy[line] = []
-    }
-    insertionsCopy[line].push(text)
-  }
+  const [codeInsertions, setCodeInsertions] = createSignal<Record<number, string[]> | undefined>()
 
   createEffect(() => {
     if (isRecording()) {
@@ -102,15 +92,12 @@ export function createRecorder(shadowHost: HTMLDivElement) {
 
           const query = serializeQueryArgs(suggestedQuery.queryArgs)
           // Send the selector to the extension process to record as code
-          const insertion = await client.recordInputAsCode.mutate({
+          const insertions = await client.recordInputAsCode.mutate({
             event: recordedEventType,
             query: [suggestedQuery.queryMethod, query],
             eventData,
           })
-
-          if (insertion) {
-            addInsertion(insertion[0], insertion[1])
-          }
+          setCodeInsertions(insertions)
         })
       }
     }
@@ -123,7 +110,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     },
     mouseEvent,
     setMouseEvent,
-    insertions: insertionsCopy,
+    codeInsertions,
   }
 }
 

From 58183b9c26750652568a27aad954cd527e578de4 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 18 Sep 2025 00:25:41 -0400
Subject: [PATCH 20/98] recorder WIP

- Show Code Lens in between lines of code to indicate where the generated code will go
---
 packages/extension/src/extension.ts           |  1 +
 .../src/recorder/record-input-as-code.ts      | 33 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 54b8008..19ec406 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -170,6 +170,7 @@ export let visuallyDebugUI = async (
         debuggerTracker.dispose()
         panelController.dispose()
         onTerminate.dispose()
+        recorderCodeGenSession.peek()?.dispose()
       },
     )
   })
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index a34a277..494d1cd 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -28,8 +28,35 @@ export function startRecorderCodeGenSession(
   function addInsertion(line: number, text: string) {
     const lines = insertions[line] ?? (insertions[line] = [])
     lines.push(text)
+    updateCodeLens.fire()
   }
 
+  const disposables = new Set<vscode.Disposable>()
+
+  // Show Code Lens in between lines of code to indicate where the generated code will go.
+  const updateCodeLens = new vscode.EventEmitter<void>()
+  disposables.add(vscode.languages.registerCodeLensProvider(
+    [{ pattern: testFile }],
+    {
+      provideCodeLenses(document: vscode.TextDocument): vscode.CodeLens[] {
+        const lenses: vscode.CodeLens[] = []
+        for (const [lineStr, _codeLines] of Object.entries(insertions)) {
+          const line = Number(lineStr) - 1
+          if (line >= 0 && line < document.lineCount) {
+            const lineText = document.lineAt(line).text
+            const range = new vscode.Range(line, 0, line, lineText.length)
+            const title = 'Code will be inserted here after the test'
+            lenses.push(new vscode.CodeLens(range, { title, command: '' }))
+          }
+        }
+        return lenses
+      },
+
+      // Weird trick to be able to manually trigger the code lens update.
+      onDidChangeCodeLenses: updateCodeLens.event,
+    },
+  ))
+
   const requiredImports = new Map<string, { from: string }>()
 
   let editor: vscode.TextEditor | undefined
@@ -214,5 +241,11 @@ ${code};
         }
       }
     },
+    insertions,
+    dispose: () => {
+      for (const disposable of disposables) {
+        disposable.dispose()
+      }
+    },
   }
 }

From cf3144e48eea2217b3bfb63be6db9a1bb125c7be Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 18 Sep 2025 00:59:47 -0400
Subject: [PATCH 21/98] recorder WIP

- add remove button to upcoming code insertions
---
 .../src/panel-controller/panel-router.ts      | 14 ++++++++
 .../src/recorder/record-input-as-code.ts      | 13 +++++++
 .../src/recorder/recorder-panel.tsx           | 35 ++++++++++++++++---
 .../web-view-vite/src/recorder/recorder.ts    |  4 +++
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 73f8259..6e84291 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -210,6 +210,20 @@ export const panelRouter = t.router({
       )
       return recorderCodeGenSession?.insertions
     }),
+
+  removeRecorderInsertion: t.procedure
+    .input(
+      z.object({
+        line: z.number(),
+        idx: z.optional(z.number()),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { line, idx } = input
+      const session = ctx.recorderCodeGenSession()
+      session?.removeInsertion(line, idx)
+      return session?.insertions
+    }),
 })
 
 export type PanelRouter = typeof panelRouter
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 494d1cd..7757ced 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -30,6 +30,18 @@ export function startRecorderCodeGenSession(
     lines.push(text)
     updateCodeLens.fire()
   }
+  function removeInsertion(line: number, idx?: number) {
+    if (idx === undefined) {
+      delete insertions[line]
+    }
+    else {
+      insertions[line]?.splice(idx, 1)
+      if (insertions[line]?.length === 0) {
+        delete insertions[line]
+      }
+    }
+    updateCodeLens.fire()
+  }
 
   const disposables = new Set<vscode.Disposable>()
 
@@ -242,6 +254,7 @@ ${code};
       }
     },
     insertions,
+    removeInsertion,
     dispose: () => {
       for (const disposable of disposables) {
         disposable.dispose()
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index e811911..81d264e 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -4,6 +4,7 @@ import shikiDarkPlus from '@shikijs/themes/dark-plus'
 import shikiLightPlus from '@shikijs/themes/light-plus'
 import { createJavaScriptRegexEngine } from 'shiki'
 import { For, Suspense, createResource } from 'solid-js'
+import X from 'lucide-solid/icons/x'
 import { recorder } from '../App'
 import { MOUSE_EVENT_TYPES } from './recorder'
 
@@ -50,13 +51,37 @@ export function RecorderPanel() {
         <div>
           <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
           <div class="text-sm flex flex-col gap-2">
-            <For each={Object.entries(recorder.codeInsertions() ?? {})}>{([lineNum, code]) => (
+            <For each={Object.entries(recorder.codeInsertions() ?? {})}>{([lineNum, codeLines]) => (
               <div>
-                <h2>Insert at line: {lineNum}</h2>
+                <div class="flex items-center gap-1">
+                  <ui-test-visualizer-button
+                    appearance="icon"
+                    onClick={async () => {
+                      await recorder.removeInsertion(Number(lineNum))
+                    }}
+                  >
+                    <X />
+                  </ui-test-visualizer-button>
+                  <h2>Insert at line: {lineNum}</h2>
+                </div>
                 <div class="pl-2">
-                  <Suspense fallback={<div>{code}</div>}>
-                    <>{highlightedCode(code.map(it => it.trim()).join('\n'))}</>
-                  </Suspense>
+                  <For each={codeLines}>
+                    {(code, idx) => (
+                      <div class="flex items-center gap-1">
+                        <ui-test-visualizer-button
+                          appearance="icon"
+                          onClick={async () => {
+                            await recorder.removeInsertion(Number(lineNum), idx())
+                          }}
+                        >
+                          <X />
+                        </ui-test-visualizer-button>
+                        <Suspense fallback={<div>{code}</div>}>
+                          <>{highlightedCode(code.trim())}</>
+                        </Suspense>
+                      </div>
+                    )}
+                  </For>
                 </div>
               </div>
             )}
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 6e37290..fb3a1bb 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -108,6 +108,10 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     toggle: (recording: boolean) => {
       setIsRecording(recording)
     },
+    removeInsertion: async (line: number, idx?: number) => {
+      const newInsertions = await client.removeRecorderInsertion.mutate({ line, idx })
+      setCodeInsertions(newInsertions)
+    },
     mouseEvent,
     setMouseEvent,
     codeInsertions,

From 48a98afe49fea21755d2848d65fed0dbe6cb63d1 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 18 Sep 2025 01:32:29 -0400
Subject: [PATCH 22/98] recorder WIP

- Make sure imports are properly generated into the test file
---
 .../src/recorder/record-input-as-code.ts      | 49 +++++++++++++------
 .../src/recorder/recorder-panel.tsx           |  2 +-
 .../web-view-vite/src/recorder/recorder.ts    |  3 +-
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 7757ced..0a8b758 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,6 +1,6 @@
 import { walk } from 'estree-walker'
 import * as vscode from 'vscode'
-import { z } from 'zod/mini'
+import { string, z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { PanelController } from '../panel-controller/panel-controller'
@@ -9,6 +9,8 @@ import type { DebuggerTracker } from '../util/debugger-tracker'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
+export type RecorderCodeInsertions = Record<number, [code: string, requiredImports: Record<string, string>][]>
+
 export type SerializedRegexp = z.infer<typeof zSerializedRegexp>
 export const zSerializedRegexp = z.object({
   type: z.literal('regexp'),
@@ -24,10 +26,10 @@ export function startRecorderCodeGenSession(
   // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
   const { parseSync } = require('@oxc-parser/binding-wasm32-wasi')
 
-  const insertions: Record<number, string[]> = {}
-  function addInsertion(line: number, text: string) {
+  const insertions: RecorderCodeInsertions = {}
+  function addInsertion(line: number, text: string, requiredImports: Record<string, string>) {
     const lines = insertions[line] ?? (insertions[line] = [])
-    lines.push(text)
+    lines.push([text, requiredImports])
     updateCodeLens.fire()
   }
   function removeInsertion(line: number, idx?: number) {
@@ -69,8 +71,6 @@ export function startRecorderCodeGenSession(
     },
   ))
 
-  const requiredImports = new Map<string, { from: string }>()
-
   let editor: vscode.TextEditor | undefined
 
   return {
@@ -162,16 +162,16 @@ export function startRecorderCodeGenSession(
       code = `${indent}${code}`
 
       // Figure out which imports need to be added
-      const newRequiredImports = new Map<string, { from: string }>([
-        [fireEvent, { from: testLibrary }],
-        [screen, { from: testLibrary }],
-      ])
+      const requiredImports: Record<string, string> = {
+        [fireEvent]: testLibrary,
+        [screen]: testLibrary,
+      }
 
       // Replicate the input event from the webview to the test runtime.
       // We do this through a debug expression, which is the same as running code through vscode's 'Debug Terminal'.
       const debugExpression = `
 (() => {
-${[...newRequiredImports.entries()].map(([importName, { from }]) => `const { ${importName} } = require('${from}');`).join('\n')}
+${Object.entries(requiredImports).map(([importName, from]) => `const { ${importName} } = require('${from}');`).join('\n')}
 ${code};
 })()
 `
@@ -180,7 +180,7 @@ ${code};
       panelController.flushPatches()
 
       // Add the fireEvent code
-      addInsertion(pausedLocation.lineNumber, `${code}\n`)
+      addInsertion(pausedLocation.lineNumber, `${code}\n`, requiredImports)
 
       return [pausedLocation.lineNumber, code] as const
     },
@@ -203,7 +203,7 @@ ${code};
         const lineNumber = Number.parseInt(line)
         const position = new vscode.Position(lineNumber - 1, 0)
         await editor.edit((editBuilder) => {
-          for (const line of lines) {
+          for (const [line, _requiredImports] of lines) {
             editBuilder.insert(position, line)
           }
         })
@@ -212,6 +212,7 @@ ${code};
       // Figure out where to put each import statement
       // Either add a new import, or edit an existing one to import something else
       const importInsertionPoints = new Map<string, number>()
+      const existingImports = new Set<string>()
       {
         // TODO avoid re-parsing for every generated line of code?
         const parsed = parseSync(editor.document.fileName, editor.document.getText(), {})
@@ -229,7 +230,7 @@ ${code};
               }
               for (const specifier of node.specifiers) {
                 if (['ImportSpecifier', 'ImportDefaultSpecifier', 'ImportNamespaceSpecifier'].includes(specifier.type)) {
-                  requiredImports.delete(specifier.local.name)
+                  existingImports.add(specifier.local.name)
                 }
               }
             }
@@ -237,8 +238,24 @@ ${code};
         })
       }
 
-      // Add missing imports
-      for (const [importName, { from }] of requiredImports) {
+      // Get the list of imports to add
+      const importList: { importName: string, from: string }[] = []
+      for (const [_lineNum, insertionGroup] of Object.entries(insertions)) {
+        for (const [_code, requiredImports] of insertionGroup) {
+          for (const [importName, from] of Object.entries(requiredImports)) {
+            if (existingImports.has(importName)) {
+              continue
+            }
+
+            importList.push({ importName, from })
+
+            existingImports.add(importName)
+          }
+        }
+      }
+
+      // Edit the imports into the file
+      for (const { importName, from } of importList) {
         const insertionPoint = importInsertionPoints.get(from)
         if (insertionPoint) {
           const position = editor.document.positionAt(insertionPoint)
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 81d264e..eb21efe 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -66,7 +66,7 @@ export function RecorderPanel() {
                 </div>
                 <div class="pl-2">
                   <For each={codeLines}>
-                    {(code, idx) => (
+                    {([code, _requiredImports], idx) => (
                       <div class="flex items-center gap-1">
                         <ui-test-visualizer-button
                           appearance="icon"
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index fb3a1bb..1c7e74b 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -4,6 +4,7 @@ import { getSuggestedQuery } from '@testing-library/dom'
 import { createEffect, createSignal } from 'solid-js'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
+import type { RecorderCodeInsertions } from '../../../extension/src/recorder/record-input-as-code'
 
 export const MOUSE_EVENT_TYPES: EventType[] = [
   'click',
@@ -21,7 +22,7 @@ export const MOUSE_EVENT_TYPES: EventType[] = [
 export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
   const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
-  const [codeInsertions, setCodeInsertions] = createSignal<Record<number, string[]> | undefined>()
+  const [codeInsertions, setCodeInsertions] = createSignal<RecorderCodeInsertions | undefined>()
 
   createEffect(() => {
     if (isRecording()) {

From 428065d63480b50d5b21cd566b34cb4ac6cbfbd9 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 18 Sep 2025 23:17:42 -0400
Subject: [PATCH 23/98] recorder WIP

- perform the code edit, and clear the ui codegen state on debugger restart.
- move performEdit to separate file
---
 packages/extension/src/extension.ts           |   3 +
 .../src/panel-controller/panel-controller.ts  |   5 +
 .../extension/src/recorder/perform-edit.ts    | 102 ++++++++++++++++
 .../src/recorder/record-input-as-code.ts      | 110 +++---------------
 .../web-view-vite/src/recorder/recorder.ts    |   7 ++
 5 files changed, 135 insertions(+), 92 deletions(-)
 create mode 100644 packages/extension/src/recorder/perform-edit.ts

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 19ec406..bf395c2 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -3,6 +3,7 @@ import '@total-typescript/ts-reset'
 import { TelemetryReporter } from '@vscode/extension-telemetry'
 import path from 'pathe'
 import * as vscode from 'vscode'
+import { en as zodEn } from 'zod/locales'
 import { z } from 'zod/mini'
 import { autoSetFirstBreakpoint } from './auto-set-first-breakpoint'
 import { codeLensProvider } from './code-lens-provider'
@@ -18,6 +19,8 @@ import { extensionSetting } from './util/extension-setting'
 import { hotReload } from './util/hot-reload'
 import { onceWithPeek } from './util/util'
 
+z.config(zodEn())
+
 const reporter = (() => {
   try {
     return new TelemetryReporter('InstrumentationKey=ffa9ad6b-9974-4d5c-9247-9ff01c0a4cc8;IngestionEndpoint=https://eastus-8.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/;ApplicationId=55f0d25f-492a-4af3-8487-d8abce8a41f6')
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index f05039f..22b299d 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -52,10 +52,15 @@ export async function startPanelController(
     panel?.webview.postMessage({ debuggerRestarted: true })
   }
 
+  function notifyRecorderEditPerformed() {
+    panel?.webview.postMessage({ recorderEditPerformed: true })
+  }
+
   return {
     htmlUpdaterPort,
     flushPatches,
     notifyDebuggerRestarted,
+    notifyRecorderEditPerformed,
     async openPanel(
       debuggerTracker: DebuggerTracker,
     ) {
diff --git a/packages/extension/src/recorder/perform-edit.ts b/packages/extension/src/recorder/perform-edit.ts
new file mode 100644
index 0000000..81d5448
--- /dev/null
+++ b/packages/extension/src/recorder/perform-edit.ts
@@ -0,0 +1,102 @@
+import { walk } from 'estree-walker'
+import * as vscode from 'vscode'
+import type { PanelController } from '../panel-controller/panel-controller'
+import type { RecorderCodeInsertions } from './record-input-as-code'
+
+export async function performEdit(
+  editor: vscode.TextEditor | undefined,
+  insertions: RecorderCodeInsertions,
+  panelController: PanelController,
+) {
+  if (Object.keys(insertions).length === 0) {
+    // No edits to perform
+    return
+  }
+
+  if (!editor) {
+    vscode.window.showInformationMessage('No editor found')
+    return
+  }
+
+  // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
+  const { parseSync } = require('@oxc-parser/binding-wasm32-wasi')
+
+  const reverseOrderInsertions = Object.entries(insertions)
+    .sort((a, b) => Number(b[0]) - Number(a[0]))
+
+  await editor.edit((editBuilder) => {
+    for (const [line, lines] of reverseOrderInsertions) {
+      const lineNumber = Number.parseInt(line)
+      const position = new vscode.Position(lineNumber - 1, 0)
+      for (const [line, _requiredImports] of lines) {
+        editBuilder.insert(position, line)
+      }
+    }
+
+    // Figure out where to put each import statement
+    // Either add a new import, or edit an existing one to import something else
+    const importInsertionPoints = new Map<string, number>()
+    const existingImports = new Set<string>()
+    {
+    // TODO avoid re-parsing for every generated line of code?
+      const parsed = parseSync(editor.document.fileName, editor.document.getText(), {})
+      const programJson = parsed.program
+      const program = JSON.parse(programJson)
+
+      walk(program, {
+        enter(node) {
+          if (node.type === 'ImportDeclaration') {
+            if (node.source.type === 'Literal') {
+              const endOfLastSpecifier = node.specifiers.at(-1)?.end
+              if (endOfLastSpecifier) {
+                importInsertionPoints.set(node.source.value, endOfLastSpecifier)
+              }
+            }
+            for (const specifier of node.specifiers) {
+              if (['ImportSpecifier', 'ImportDefaultSpecifier', 'ImportNamespaceSpecifier'].includes(specifier.type)) {
+                existingImports.add(specifier.local.name)
+              }
+            }
+          }
+        },
+      })
+    }
+
+    // Get the list of imports to add
+    const importList: { importName: string, from: string }[] = []
+    for (const [_lineNum, insertionGroup] of Object.entries(insertions)) {
+      for (const [_code, requiredImports] of insertionGroup) {
+        for (const [importName, from] of Object.entries(requiredImports)) {
+          if (existingImports.has(importName)) {
+            continue
+          }
+
+          importList.push({ importName, from })
+
+          existingImports.add(importName)
+        }
+      }
+    }
+
+    // Edit the imports into the file
+    for (const { importName, from } of importList) {
+      const insertionPoint = importInsertionPoints.get(from)
+      if (insertionPoint) {
+        const position = editor.document.positionAt(insertionPoint)
+        editBuilder.insert(position, `, ${importName}`)
+      }
+      else {
+        editBuilder.insert(new vscode.Position(0, 0), `import { ${importName} } from '${from}'\n`)
+      }
+    }
+  })
+
+  // Remove the insertions from the state after they've been inserted into the code
+  for (const line of Object.keys(insertions)) {
+    delete insertions[Number(line)]
+  }
+
+  panelController.notifyRecorderEditPerformed()
+
+  await editor.document.save()
+}
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/record-input-as-code.ts
index 0a8b758..b9bdd91 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/record-input-as-code.ts
@@ -1,11 +1,11 @@
-import { walk } from 'estree-walker'
 import * as vscode from 'vscode'
-import { string, z } from 'zod/mini'
+import { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { PanelController } from '../panel-controller/panel-controller'
 import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebuggerTracker } from '../util/debugger-tracker'
+import { performEdit } from './perform-edit'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
@@ -23,9 +23,6 @@ export function startRecorderCodeGenSession(
   testLibrary: TestingLibrary,
   panelController: PanelController,
 ) {
-  // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
-  const { parseSync } = require('@oxc-parser/binding-wasm32-wasi')
-
   const insertions: RecorderCodeInsertions = {}
   function addInsertion(line: number, text: string, requiredImports: Record<string, string>) {
     const lines = insertions[line] ?? (insertions[line] = [])
@@ -66,11 +63,25 @@ export function startRecorderCodeGenSession(
         return lenses
       },
 
-      // Weird trick to be able to manually trigger the code lens update.
+      // Weird trick to manually trigger the code lens update.
       onDidChangeCodeLenses: updateCodeLens.event,
     },
   ))
 
+  async function runPerformEdit() {
+    await performEdit(
+      editor,
+      insertions,
+      panelController,
+    )
+  }
+
+  disposables.add(vscode.debug.onDidChangeActiveStackItem((stackItem) => {
+    if (stackItem === undefined) {
+      runPerformEdit()
+    }
+  }))
+
   let editor: vscode.TextEditor | undefined
 
   return {
@@ -184,92 +195,7 @@ ${code};
 
       return [pausedLocation.lineNumber, code] as const
     },
-
-    performEdit: async () => {
-      if (Object.keys(insertions).length === 0) {
-        // No edits to perform
-        return
-      }
-
-      if (!editor) {
-        vscode.window.showInformationMessage('No editor found')
-        return
-      }
-
-      const reverseOrderInsertions = Object.entries(insertions)
-        .sort((a, b) => Number(b[0]) - Number(a[0]))
-
-      for (const [line, lines] of reverseOrderInsertions) {
-        const lineNumber = Number.parseInt(line)
-        const position = new vscode.Position(lineNumber - 1, 0)
-        await editor.edit((editBuilder) => {
-          for (const [line, _requiredImports] of lines) {
-            editBuilder.insert(position, line)
-          }
-        })
-      }
-
-      // Figure out where to put each import statement
-      // Either add a new import, or edit an existing one to import something else
-      const importInsertionPoints = new Map<string, number>()
-      const existingImports = new Set<string>()
-      {
-        // TODO avoid re-parsing for every generated line of code?
-        const parsed = parseSync(editor.document.fileName, editor.document.getText(), {})
-        const programJson = parsed.program
-        const program = JSON.parse(programJson)
-
-        walk(program, {
-          enter(node) {
-            if (node.type === 'ImportDeclaration') {
-              if (node.source.type === 'Literal') {
-                const endOfLastSpecifier = node.specifiers.at(-1)?.end
-                if (endOfLastSpecifier) {
-                  importInsertionPoints.set(node.source.value, endOfLastSpecifier)
-                }
-              }
-              for (const specifier of node.specifiers) {
-                if (['ImportSpecifier', 'ImportDefaultSpecifier', 'ImportNamespaceSpecifier'].includes(specifier.type)) {
-                  existingImports.add(specifier.local.name)
-                }
-              }
-            }
-          },
-        })
-      }
-
-      // Get the list of imports to add
-      const importList: { importName: string, from: string }[] = []
-      for (const [_lineNum, insertionGroup] of Object.entries(insertions)) {
-        for (const [_code, requiredImports] of insertionGroup) {
-          for (const [importName, from] of Object.entries(requiredImports)) {
-            if (existingImports.has(importName)) {
-              continue
-            }
-
-            importList.push({ importName, from })
-
-            existingImports.add(importName)
-          }
-        }
-      }
-
-      // Edit the imports into the file
-      for (const { importName, from } of importList) {
-        const insertionPoint = importInsertionPoints.get(from)
-        if (insertionPoint) {
-          const position = editor.document.positionAt(insertionPoint)
-          await editor.edit((editBuilder) => {
-            editBuilder.insert(position, `, ${importName}`)
-          })
-        }
-        else {
-          await editor.edit((editBuilder) => {
-            editBuilder.insert(new vscode.Position(0, 0), `import { ${importName} } from '${from}'\n`)
-          })
-        }
-      }
-    },
+    performEdit: runPerformEdit,
     insertions,
     removeInsertion,
     dispose: () => {
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 1c7e74b..3800714 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -24,6 +24,13 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
   const [codeInsertions, setCodeInsertions] = createSignal<RecorderCodeInsertions | undefined>()
 
+  // When the edit is performed, clear the recorder UI's insertions state
+  makeEventListener(window, 'message', (event) => {
+    if (event.data.recorderEditPerformed) {
+      setCodeInsertions(undefined)
+    }
+  })
+
   createEffect(() => {
     if (isRecording()) {
       for (const eventType of ['click', 'submit', 'change'] as const) {

From dc1d80a33277d235fc20574b140b0df27a639881 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Fri, 19 Sep 2025 00:25:04 -0400
Subject: [PATCH 24/98] recorder WIP

- move code gen into separate file, add useExpect flag on alt click
---
 packages/extension/src/extension.ts           |   2 +-
 .../src/panel-controller/panel-controller.ts  |   2 +-
 .../src/panel-controller/panel-router.ts      |   7 +-
 .../extension/src/recorder/generate-code.ts   | 108 ++++++++++++++++++
 .../extension/src/recorder/perform-edit.ts    |   2 +-
 ...as-code.ts => recorder-codegen-session.ts} |  92 ++-------------
 .../extension/src/util/debugger-tracker.ts    |  10 +-
 .../web-view-vite/src/recorder/recorder.ts    |   7 +-
 8 files changed, 139 insertions(+), 91 deletions(-)
 create mode 100644 packages/extension/src/recorder/generate-code.ts
 rename packages/extension/src/recorder/{record-input-as-code.ts => recorder-codegen-session.ts} (61%)

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index bf395c2..d3c8d10 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -13,7 +13,7 @@ import { detectTestLibrary } from './framework-support/detect-test-library'
 import { myExtensionStorage } from './my-extension-storage'
 import { startPanelController } from './panel-controller/panel-controller'
 import { createUiTestFile } from './recorder/create-ui-test-file'
-import { startRecorderCodeGenSession } from './recorder/record-input-as-code'
+import { startRecorderCodeGenSession } from './recorder/recorder-codegen-session'
 import { startDebuggerTracker } from './util/debugger-tracker'
 import { extensionSetting } from './util/extension-setting'
 import { hotReload } from './util/hot-reload'
diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index 22b299d..2c00bbf 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -5,7 +5,7 @@ import type { HTMLPatch } from 'replicate-dom'
 import * as vscode from 'vscode'
 import type { Server as WsServer } from 'ws'
 import type { MyStorageType } from '../my-extension-storage'
-import type { RecorderCodeGenSession } from '../recorder/record-input-as-code'
+import type { RecorderCodeGenSession } from '../recorder/recorder-codegen-session'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 import { type PanelRouterCtx, panelRouter } from './panel-router'
 
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 6e84291..d18befb 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -3,7 +3,7 @@ import path from 'pathe'
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
 import type { MyStorageType } from '../my-extension-storage'
-import { type RecorderCodeGenSession, zSerializedRegexp } from '../recorder/record-input-as-code'
+import { type RecorderCodeGenSession, zSerializedRegexp } from '../recorder/recorder-codegen-session'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 import { workspaceCssFiles } from '../util/workspace-css-files'
 
@@ -195,10 +195,12 @@ export const panelRouter = t.router({
             )),
           ]),
         ]),
+        // Whether to generate an 'expect' statement
+        useExpect: z.optional(z.boolean()),
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const { event, eventData, query: [method, [queryArg0, queryOptions]] } = input
+      const { event, eventData, query: [method, [queryArg0, queryOptions]], useExpect } = input
       const recorderCodeGenSession = ctx.recorderCodeGenSession()
       const _insertion = await recorderCodeGenSession?.recordInputAsCode(
         ctx.debuggerTracker,
@@ -207,6 +209,7 @@ export const panelRouter = t.router({
         method,
         queryArg0,
         queryOptions,
+        useExpect,
       )
       return recorderCodeGenSession?.insertions
     }),
diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
new file mode 100644
index 0000000..027a055
--- /dev/null
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -0,0 +1,108 @@
+import type { z } from 'zod/mini'
+import type * as vscode from 'vscode'
+import type { zRecordedEventData } from '../panel-controller/panel-router'
+import type { DebugPauseLocation } from '../util/debugger-tracker'
+import type { TestingLibrary } from '../framework-support/detect-test-library'
+import type { SerializedRegexp } from './recorder-codegen-session'
+
+export async function generateCode(
+  editor: vscode.TextEditor,
+  pausedLocation: DebugPauseLocation,
+  testLibrary: TestingLibrary,
+
+  event: string,
+  eventData: z.infer<typeof zRecordedEventData>,
+  findMethod: string,
+  queryArg0: string | SerializedRegexp,
+  queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
+
+  useExpect?: boolean,
+) {
+  const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
+    (result, entry) => {
+      const [key, val] = entry
+      result[key] = (() => {
+        if (typeof val === 'string') {
+          return `'${val.replace(/'/g, '\\\'')}'`
+        }
+        else if (typeof val === 'boolean') {
+          return val
+        }
+        else if (val.type === 'regexp') {
+          return val.value
+        }
+        else {
+          return ''
+        }
+      })()
+
+      return result
+    },
+    {} as Record<string, RegExp | boolean | string>,
+  )
+
+  const queryArgsStr = (() => {
+    let result = typeof queryArg0 === 'string' ? `'${queryArg0}'` : queryArg0.value
+    if (!parsedQueryOptions) {
+      return result
+    }
+    const entries = Object.entries(parsedQueryOptions).map(([key, val]) => {
+      return `${key}: ${String(val)}`
+    })
+    let optionsStr = entries.join(', ')
+    if (entries.length > 0) {
+      optionsStr = `{ ${optionsStr} }`
+      result += `, ${optionsStr}`
+    }
+    return result
+  })()
+
+  const fireEvent = 'fireEvent'
+  const screen = 'screen'
+
+  /**
+   * e.g. `screen.getByRole('button', { name: 'Submit' })`
+   * or just `document`
+   */
+  const selector = (() => {
+    if (queryArg0 === 'document') {
+      return 'document'
+    }
+    return `${screen}.${findMethod}(${queryArgsStr})`
+  })()
+
+  const fireEventArgs = (() => {
+    if (event === 'change' && eventData.text) {
+      const value = eventData.text.replace(/'/g, '\\\'')
+      return `, { target: { value: '${value}' } }`
+    }
+    return ''
+  })()
+
+  let code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
+
+  const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
+  const indent = line.text.match(/^\s*/)?.[0] || ''
+  code = `${indent}${code}`
+
+  // Figure out which imports need to be added
+  const requiredImports: Record<string, string> = {
+    [fireEvent]: testLibrary,
+    [screen]: testLibrary,
+  }
+
+  // Replicate the input event from the webview to the test runtime.
+  // We do this through a debug expression, which is the same as running code through vscode's 'Debug Terminal'.
+  const debugExpression = `
+(() => {
+${Object.entries(requiredImports).map(([importName, from]) => `const { ${importName} } = require('${from}');`).join('\n')}
+${code};
+})()
+`
+
+  return {
+    code,
+    debugExpression,
+    requiredImports,
+  }
+}
diff --git a/packages/extension/src/recorder/perform-edit.ts b/packages/extension/src/recorder/perform-edit.ts
index 81d5448..76fbd0f 100644
--- a/packages/extension/src/recorder/perform-edit.ts
+++ b/packages/extension/src/recorder/perform-edit.ts
@@ -1,7 +1,7 @@
 import { walk } from 'estree-walker'
 import * as vscode from 'vscode'
 import type { PanelController } from '../panel-controller/panel-controller'
-import type { RecorderCodeInsertions } from './record-input-as-code'
+import type { RecorderCodeInsertions } from './recorder-codegen-session'
 
 export async function performEdit(
   editor: vscode.TextEditor | undefined,
diff --git a/packages/extension/src/recorder/record-input-as-code.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
similarity index 61%
rename from packages/extension/src/recorder/record-input-as-code.ts
rename to packages/extension/src/recorder/recorder-codegen-session.ts
index b9bdd91..c0c0e96 100644
--- a/packages/extension/src/recorder/record-input-as-code.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -6,6 +6,7 @@ import type { PanelController } from '../panel-controller/panel-controller'
 import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 import { performEdit } from './perform-edit'
+import { generateCode } from './generate-code'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
@@ -92,6 +93,7 @@ export function startRecorderCodeGenSession(
       findMethod: string,
       queryArg0: string | SerializedRegexp,
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
+      useExpect?: boolean,
     ): Promise<[number, string] | null> => {
       const pausedLocation = await debuggerTracker.getPausedLocation()
       if (!pausedLocation) {
@@ -105,88 +107,18 @@ export function startRecorderCodeGenSession(
         return null
       }
 
-      const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
-        (result, entry) => {
-          const [key, val] = entry
-          result[key] = (() => {
-            if (typeof val === 'string') {
-              return `'${val.replace(/'/g, '\\\'')}'`
-            }
-            else if (typeof val === 'boolean') {
-              return val
-            }
-            else if (val.type === 'regexp') {
-              return val.value
-            }
-            else {
-              return ''
-            }
-          })()
-
-          return result
-        },
-        {} as Record<string, RegExp | boolean | string>,
+      const { code, debugExpression, requiredImports } = await generateCode(
+        editor,
+        pausedLocation,
+        testLibrary,
+        event,
+        eventData,
+        findMethod,
+        queryArg0,
+        queryOptions,
+        useExpect,
       )
 
-      const queryArgsStr = (() => {
-        let result = typeof queryArg0 === 'string' ? `'${queryArg0}'` : queryArg0.value
-        if (!parsedQueryOptions) {
-          return result
-        }
-        const entries = Object.entries(parsedQueryOptions).map(([key, val]) => {
-          return `${key}: ${String(val)}`
-        })
-        let optionsStr = entries.join(', ')
-        if (entries.length > 0) {
-          optionsStr = `{ ${optionsStr} }`
-          result += `, ${optionsStr}`
-        }
-        return result
-      })()
-
-      const fireEvent = 'fireEvent'
-      const screen = 'screen'
-
-      /**
-       * e.g. `screen.getByRole('button', { name: 'Submit' })`
-       * or just `document`
-       */
-      const selector = (() => {
-        if (queryArg0 === 'document') {
-          return 'document'
-        }
-        return `${screen}.${findMethod}(${queryArgsStr})`
-      })()
-
-      const fireEventArgs = (() => {
-        if (event === 'change' && eventData.text) {
-          const value = eventData.text.replace(/'/g, '\\\'')
-          return `, { target: { value: '${value}' } }`
-        }
-        return ''
-      })()
-
-      let code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
-
-      const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
-      const indent = line.text.match(/^\s*/)?.[0] || ''
-      code = `${indent}${code}`
-
-      // Figure out which imports need to be added
-      const requiredImports: Record<string, string> = {
-        [fireEvent]: testLibrary,
-        [screen]: testLibrary,
-      }
-
-      // Replicate the input event from the webview to the test runtime.
-      // We do this through a debug expression, which is the same as running code through vscode's 'Debug Terminal'.
-      const debugExpression = `
-(() => {
-${Object.entries(requiredImports).map(([importName, from]) => `const { ${importName} } = require('${from}');`).join('\n')}
-${code};
-})()
-`
-
       await debuggerTracker.runDebugExpression(debugExpression)
       panelController.flushPatches()
 
diff --git a/packages/extension/src/util/debugger-tracker.ts b/packages/extension/src/util/debugger-tracker.ts
index 33be664..23dbe59 100644
--- a/packages/extension/src/util/debugger-tracker.ts
+++ b/packages/extension/src/util/debugger-tracker.ts
@@ -2,6 +2,11 @@ import * as vscode from 'vscode'
 
 export type DebuggerTracker = ReturnType<typeof startDebuggerTracker>
 
+export interface DebugPauseLocation {
+  filePath: string
+  lineNumber: number
+}
+
 /**
  * Wrapper around the VSCode debug session with convenience methods.
  * Emits debugger-related events e.g. onFrameChange (Step Over) and onDebugRestarted (the Restart button is clicked).
@@ -90,11 +95,6 @@ export function startDebuggerTracker(
     return result
   }
 
-  interface DebugPauseLocation {
-    filePath: string
-    lineNumber: number
-  }
-
   async function getPausedLocation(): Promise<DebugPauseLocation | null> {
     const session = vscode.debug.activeDebugSession
     if (!session) {
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 3800714..4a67ad1 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -4,7 +4,7 @@ import { getSuggestedQuery } from '@testing-library/dom'
 import { createEffect, createSignal } from 'solid-js'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
-import type { RecorderCodeInsertions } from '../../../extension/src/recorder/record-input-as-code'
+import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 
 export const MOUSE_EVENT_TYPES: EventType[] = [
   'click',
@@ -99,11 +99,16 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             : eventType
 
           const query = serializeQueryArgs(suggestedQuery.queryArgs)
+
+          // When the 'alt' key is held while clicking, generate an 'expect' statement
+          const useExpect = eventType === 'click' && e instanceof MouseEvent && e.altKey
+
           // Send the selector to the extension process to record as code
           const insertions = await client.recordInputAsCode.mutate({
             event: recordedEventType,
             query: [suggestedQuery.queryMethod, query],
             eventData,
+            useExpect,
           })
           setCodeInsertions(insertions)
         })

From 213bc531f73df4c1e153591ab738c89835a73946 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Fri, 19 Sep 2025 02:01:58 -0400
Subject: [PATCH 25/98] recorder WIP

- generate expect statements on alt click
---
 .../extension/src/recorder/generate-code.ts   | 51 ++++++++++++++-----
 .../src/recorder/recorder-codegen-session.ts  |  2 +
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index 027a055..f6983cc 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -3,12 +3,14 @@ import type * as vscode from 'vscode'
 import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebugPauseLocation } from '../util/debugger-tracker'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
+import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { SerializedRegexp } from './recorder-codegen-session'
 
 export async function generateCode(
   editor: vscode.TextEditor,
   pausedLocation: DebugPauseLocation,
   testLibrary: TestingLibrary,
+  testFramework: SupportedFramework,
 
   event: string,
   eventData: z.infer<typeof zRecordedEventData>,
@@ -57,7 +59,6 @@ export async function generateCode(
     return result
   })()
 
-  const fireEvent = 'fireEvent'
   const screen = 'screen'
 
   /**
@@ -71,31 +72,53 @@ export async function generateCode(
     return `${screen}.${findMethod}(${queryArgsStr})`
   })()
 
-  const fireEventArgs = (() => {
-    if (event === 'change' && eventData.text) {
-      const value = eventData.text.replace(/'/g, '\\\'')
-      return `, { target: { value: '${value}' } }`
+  let code = ''
+  const requiredImports: Record<string, string> = {
+    [screen]: testLibrary,
+  }
+
+  // When 'useExpect' is true, generate an 'expect' statement
+  if (useExpect) {
+    const expect = 'expect'
+    code = `${expect}(${selector}).toBeTruthy()`
+    if (testFramework === 'vitest') {
+      requiredImports[expect] = testFramework
     }
-    return ''
-  })()
+  }
+  // Otherwise, generate a fireEvent call
+  else {
+    const fireEvent = 'fireEvent'
+
+    const fireEventArgs = (() => {
+      if (event === 'change' && eventData.text) {
+        const value = eventData.text.replace(/'/g, '\\\'')
+        return `, { target: { value: '${value}' } }`
+      }
+      return ''
+    })()
 
-  let code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
+    code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
+
+    // Figure out which imports need to be added
+    requiredImports[fireEvent] = testLibrary
+  }
 
   const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
   const indent = line.text.match(/^\s*/)?.[0] || ''
   code = `${indent}${code}`
 
-  // Figure out which imports need to be added
-  const requiredImports: Record<string, string> = {
-    [fireEvent]: testLibrary,
-    [screen]: testLibrary,
-  }
+  const importCode = Object.entries(requiredImports).map(([importName, from]) => {
+    if (from === 'vitest') {
+      from = 'vitest/dist/index.js'
+    }
+    return `const { ${importName} } = require('${from}');`
+  }).join('\n')
 
   // Replicate the input event from the webview to the test runtime.
   // We do this through a debug expression, which is the same as running code through vscode's 'Debug Terminal'.
   const debugExpression = `
 (() => {
-${Object.entries(requiredImports).map(([importName, from]) => `const { ${importName} } = require('${from}');`).join('\n')}
+${importCode}
 ${code};
 })()
 `
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index c0c0e96..116bf69 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -108,9 +108,11 @@ export function startRecorderCodeGenSession(
       }
 
       const { code, debugExpression, requiredImports } = await generateCode(
+        testFile,
         editor,
         pausedLocation,
         testLibrary,
+        testFramework,
         event,
         eventData,
         findMethod,

From 107ed76c314b6f43f28d269cdb9c46d8fcd0b4ff Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Fri, 19 Sep 2025 02:10:02 -0400
Subject: [PATCH 26/98] recorder WIP

- fix type error
---
 packages/extension/src/recorder/recorder-codegen-session.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index 116bf69..676f1f1 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -108,7 +108,6 @@ export function startRecorderCodeGenSession(
       }
 
       const { code, debugExpression, requiredImports } = await generateCode(
-        testFile,
         editor,
         pausedLocation,
         testLibrary,

From 9edd848720aeb710a1d108f7fba8e13ed52d49e1 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Fri, 19 Sep 2025 22:53:53 -0400
Subject: [PATCH 27/98] recorder WIP

- use userEvent library when available
---
 examples/vitest-react-tailwind4/package.json  |  1 +
 .../vitest-react-tailwind4/test/form.test.tsx | 30 ++++++++++---
 .../extension/src/recorder/generate-code.ts   | 44 +++++++++++++------
 .../src/recorder/recorder-codegen-session.ts  | 13 ++++++
 pnpm-lock.yaml                                |  3 ++
 5 files changed, 73 insertions(+), 18 deletions(-)

diff --git a/examples/vitest-react-tailwind4/package.json b/examples/vitest-react-tailwind4/package.json
index b4d78f5..2e316ce 100644
--- a/examples/vitest-react-tailwind4/package.json
+++ b/examples/vitest-react-tailwind4/package.json
@@ -11,6 +11,7 @@
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.12",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.12",
     "@vitejs/plugin-react": "^5.0.2",
     "happy-dom": "^14.11.4",
diff --git a/examples/vitest-react-tailwind4/test/form.test.tsx b/examples/vitest-react-tailwind4/test/form.test.tsx
index 85ed3e1..73f61b4 100644
--- a/examples/vitest-react-tailwind4/test/form.test.tsx
+++ b/examples/vitest-react-tailwind4/test/form.test.tsx
@@ -1,13 +1,33 @@
+import { expect } from 'vitest'
 import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import FormExample from '../components/FormExample'
 
 it('renders FormExample with form and non-form sections', async () => {
   render(<FormExample />)
 
   // Fill form inputs and submit
-  fireEvent.change(screen.getByLabelText('First input'), { target: { value: 'Test Value 1' } })
-  fireEvent.change(screen.getByPlaceholderText('Second input'), { target: { value: 'Test Value 2' } })
-  fireEvent.click(screen.getByText('Submit'))
-  fireEvent.change(screen.getByPlaceholderText('Second input'), { target: { value: 'Test Value 2' } })
+  const firstInput = screen.getByLabelText('First input')
+  await userEvent.type(firstInput, 'Test Value 1')
+  expect((firstInput as HTMLInputElement).value).toBe('Test Value 1')
+
+  await userEvent.click(screen.getByRole('heading', { name: /^form section$/i }))
+  await userEvent.click(screen.getByRole('heading', { name: /^non-form section$/i }))
+  await userEvent.click(screen.getByRole('heading', { name: /^form section$/i }))
+  await userEvent.click(screen.getByRole('heading', { name: /^non-form section$/i }))
+  await userEvent.click(screen.getByRole('textbox', { name: /^first input$/i }))
+  await userEvent.dblClick(screen.getByRole('textbox', { name: /^outside input 1$/i }))
+  await userEvent.dblClick(screen.getByRole('heading', { name: /^non-form section$/i }))
+  await userEvent.dblClick(screen.getByRole('textbox', { name: /^outside input 1$/i }))
+  await userEvent.type(screen.getByRole('textbox', { name: /^outside input 1$/i }), 'asdf')
+  await userEvent.type(screen.getByRole('textbox', { name: /^outside input 2$/i }), 'fdsa')
+  await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))
+  await userEvent.click(screen.getByRole('button', { name: /^outside button$/i }))
+  const secondInput = screen.getByPlaceholderText('Second input')
+  await userEvent.type(secondInput, 'Test Value 2')
+
+  expect((secondInput as HTMLInputElement).value).toBe('Test Value 2')
+
+  await userEvent.click(screen.getByText('Submit'))
 })
diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index f6983cc..9d0bd57 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -8,6 +8,7 @@ import type { SerializedRegexp } from './recorder-codegen-session'
 
 export async function generateCode(
   editor: vscode.TextEditor,
+  hasUserEventLib: boolean,
   pausedLocation: DebugPauseLocation,
   testLibrary: TestingLibrary,
   testFramework: SupportedFramework,
@@ -85,22 +86,39 @@ export async function generateCode(
       requiredImports[expect] = testFramework
     }
   }
-  // Otherwise, generate a fireEvent call
+  // Otherwise, generate a userEvent call
   else {
-    const fireEvent = 'fireEvent'
+    if (hasUserEventLib) {
+      const userEvent = 'userEvent'
+
+      const userEventArgs = (() => {
+        if (event === 'change' && eventData.text) {
+          event = 'type'
+          const value = eventData.text.replace(/'/g, '\\\'')
+          return `, '${value}'`
+        }
+        return ''
+      })()
+
+      code = `await ${userEvent}.${event}(${selector}${userEventArgs})`
+
+      requiredImports[userEvent] = '@testing-library/user-event'
+    }
+    else {
+      const fireEvent = 'fireEvent'
 
-    const fireEventArgs = (() => {
-      if (event === 'change' && eventData.text) {
-        const value = eventData.text.replace(/'/g, '\\\'')
-        return `, { target: { value: '${value}' } }`
-      }
-      return ''
-    })()
+      const fireEventArgs = (() => {
+        if (event === 'change' && eventData.text) {
+          const value = eventData.text.replace(/'/g, '\\\'')
+          return `, { target: { value: '${value}' } }`
+        }
+        return ''
+      })()
 
-    code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
+      code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
 
-    // Figure out which imports need to be added
-    requiredImports[fireEvent] = testLibrary
+      requiredImports[fireEvent] = testLibrary
+    }
   }
 
   const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
@@ -119,7 +137,7 @@ export async function generateCode(
   const debugExpression = `
 (() => {
 ${importCode}
-${code};
+${code.replace(/\s*await/, '') /* No 'awaits' allowed in debug expressions */};
 })()
 `
 
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index 676f1f1..207b2e6 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -1,5 +1,6 @@
 import * as vscode from 'vscode'
 import { z } from 'zod/mini'
+import path from 'pathe'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { PanelController } from '../panel-controller/panel-controller'
@@ -85,6 +86,16 @@ export function startRecorderCodeGenSession(
 
   let editor: vscode.TextEditor | undefined
 
+  const hasUserEventLib = (() => {
+    try {
+      require.resolve('@testing-library/user-event', { paths: [path.dirname(testFile)] })
+      return true
+    }
+    catch {
+      return false
+    }
+  })()
+
   return {
     recordInputAsCode: async (
       debuggerTracker: DebuggerTracker,
@@ -109,6 +120,7 @@ export function startRecorderCodeGenSession(
 
       const { code, debugExpression, requiredImports } = await generateCode(
         editor,
+        hasUserEventLib,
         pausedLocation,
         testLibrary,
         testFramework,
@@ -131,6 +143,7 @@ export function startRecorderCodeGenSession(
     performEdit: runPerformEdit,
     insertions,
     removeInsertion,
+    hasUserEventLib,
     dispose: () => {
       for (const disposable of disposables) {
         disposable.dispose()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7833d47..086bdf9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -296,6 +296,9 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.0)(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/react':
         specifier: ^19.1.12
         version: 19.1.12

From 81fbd015facd448ebddc7d67d2da0d732b1f9041 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 20 Sep 2025 00:09:52 -0400
Subject: [PATCH 28/98] recorder WIP

- split mouse events into 2 groups: userEvent and fireEvent
- handle 'clear' event for text inputs
---
 .../vitest-react-tailwind4/test/form.test.tsx | 14 -----
 .../src/panel-controller/panel-router.ts      |  7 ++-
 .../src/recorder/create-ui-test-file.ts       |  2 +-
 .../extension/src/recorder/generate-code.ts   | 18 +++++-
 .../src/recorder/recorder-codegen-session.ts  |  4 +-
 packages/web-view-vite/package.json           |  4 +-
 .../src/recorder/recorder-panel.tsx           | 55 +++++++++++--------
 .../web-view-vite/src/recorder/recorder.ts    | 22 +++++++-
 pnpm-lock.yaml                                |  6 ++
 9 files changed, 85 insertions(+), 47 deletions(-)

diff --git a/examples/vitest-react-tailwind4/test/form.test.tsx b/examples/vitest-react-tailwind4/test/form.test.tsx
index 73f61b4..b0e452a 100644
--- a/examples/vitest-react-tailwind4/test/form.test.tsx
+++ b/examples/vitest-react-tailwind4/test/form.test.tsx
@@ -12,22 +12,8 @@ it('renders FormExample with form and non-form sections', async () => {
   await userEvent.type(firstInput, 'Test Value 1')
   expect((firstInput as HTMLInputElement).value).toBe('Test Value 1')
 
-  await userEvent.click(screen.getByRole('heading', { name: /^form section$/i }))
-  await userEvent.click(screen.getByRole('heading', { name: /^non-form section$/i }))
-  await userEvent.click(screen.getByRole('heading', { name: /^form section$/i }))
-  await userEvent.click(screen.getByRole('heading', { name: /^non-form section$/i }))
-  await userEvent.click(screen.getByRole('textbox', { name: /^first input$/i }))
-  await userEvent.dblClick(screen.getByRole('textbox', { name: /^outside input 1$/i }))
-  await userEvent.dblClick(screen.getByRole('heading', { name: /^non-form section$/i }))
-  await userEvent.dblClick(screen.getByRole('textbox', { name: /^outside input 1$/i }))
-  await userEvent.type(screen.getByRole('textbox', { name: /^outside input 1$/i }), 'asdf')
-  await userEvent.type(screen.getByRole('textbox', { name: /^outside input 2$/i }), 'fdsa')
-  await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))
-  await userEvent.click(screen.getByRole('button', { name: /^outside button$/i }))
   const secondInput = screen.getByPlaceholderText('Second input')
   await userEvent.type(secondInput, 'Test Value 2')
 
   expect((secondInput as HTMLInputElement).value).toBe('Test Value 2')
-
-  await userEvent.click(screen.getByText('Submit'))
 })
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index d18befb..6ec3b8a 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -197,10 +197,12 @@ export const panelRouter = t.router({
         ]),
         // Whether to generate an 'expect' statement
         useExpect: z.optional(z.boolean()),
+        // Whether to use userEvent instead of fireEvent
+        useUserEvent: z.boolean(),
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const { event, eventData, query: [method, [queryArg0, queryOptions]], useExpect } = input
+      const { event, eventData, query: [method, [queryArg0, queryOptions]], useExpect, useUserEvent } = input
       const recorderCodeGenSession = ctx.recorderCodeGenSession()
       const _insertion = await recorderCodeGenSession?.recordInputAsCode(
         ctx.debuggerTracker,
@@ -209,7 +211,8 @@ export const panelRouter = t.router({
         method,
         queryArg0,
         queryOptions,
-        useExpect,
+        useExpect ?? false,
+        useUserEvent,
       )
       return recorderCodeGenSession?.insertions
     }),
diff --git a/packages/extension/src/recorder/create-ui-test-file.ts b/packages/extension/src/recorder/create-ui-test-file.ts
index 0418774..03a2b8f 100644
--- a/packages/extension/src/recorder/create-ui-test-file.ts
+++ b/packages/extension/src/recorder/create-ui-test-file.ts
@@ -101,7 +101,7 @@ import { render } from '${testingLibrary}'
 import { ${exportName} } from './${relativePathToSrc}'
 
 describe('${exportName}', () => {
-  test('basic usage', () => {
+  test('basic usage', async () => {
     render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
   })
 })
diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index 9d0bd57..1c0237f 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -19,7 +19,8 @@ export async function generateCode(
   queryArg0: string | SerializedRegexp,
   queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
 
-  useExpect?: boolean,
+  useExpect: boolean,
+  useUserEvent: boolean,
 ) {
   const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
     (result, entry) => {
@@ -88,11 +89,22 @@ export async function generateCode(
   }
   // Otherwise, generate a userEvent call
   else {
-    if (hasUserEventLib) {
+    if (useUserEvent) {
+      if (!hasUserEventLib) {
+        throw new Error('Cannot use userEvent without @testing-library/user-event installed')
+      }
       const userEvent = 'userEvent'
 
       const userEventArgs = (() => {
-        if (event === 'change' && eventData.text) {
+        // When using userEvent with text inputs, the method is either 'type' or 'clear'
+        if (event === 'change' && typeof eventData.text === 'string') {
+          // If the text is empty, use 'clear' instead of 'type'
+          if (eventData.text.length === 0) {
+            event = 'clear'
+            return ''
+          }
+
+          // Otherwise 'type' the text
           event = 'type'
           const value = eventData.text.replace(/'/g, '\\\'')
           return `, '${value}'`
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index 207b2e6..9db291c 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -104,7 +104,8 @@ export function startRecorderCodeGenSession(
       findMethod: string,
       queryArg0: string | SerializedRegexp,
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
-      useExpect?: boolean,
+      useExpect: boolean,
+      useUserEvent: boolean,
     ): Promise<[number, string] | null> => {
       const pausedLocation = await debuggerTracker.getPausedLocation()
       if (!pausedLocation) {
@@ -130,6 +131,7 @@ export function startRecorderCodeGenSession(
         queryArg0,
         queryOptions,
         useExpect,
+        useUserEvent,
       )
 
       await debuggerTracker.runDebugExpression(debugExpression)
diff --git a/packages/web-view-vite/package.json b/packages/web-view-vite/package.json
index 4e27b2d..51299eb 100644
--- a/packages/web-view-vite/package.json
+++ b/packages/web-view-vite/package.json
@@ -16,6 +16,7 @@
     "@solid-primitives/map": "^0.7.2",
     "@solid-primitives/mutation-observer": "^1.2.2",
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/user-event": "^14.6.1",
     "@trpc/client": "^11.5.0",
     "@trpc/server": "^11.5.0",
     "@vscode/webview-ui-toolkit": "^1.4.0",
@@ -30,7 +31,8 @@
     "solid-js": "^1.9.9",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
-    "ws": "^8.18.3"
+    "ws": "^8.18.3",
+    "zod": "^4.1.5"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.12",
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index eb21efe..457a541 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -6,7 +6,7 @@ import { createJavaScriptRegexEngine } from 'shiki'
 import { For, Suspense, createResource } from 'solid-js'
 import X from 'lucide-solid/icons/x'
 import { recorder } from '../App'
-import { MOUSE_EVENT_TYPES } from './recorder'
+import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
 
 export function RecorderPanel() {
   const [codeHighlighter] = createResource(async () => await createHighlighterCore({
@@ -90,28 +90,39 @@ export function RecorderPanel() {
         </div>
       </div>
       <div class="w-1/2 h-full overflow-y-auto p-4">
-        <div>
-          <h1 class="text-lg font-semibold mb-2">Choose Mouse Event</h1>
-          <div class="flex flex-wrap gap-1">
-            <For each={MOUSE_EVENT_TYPES}>{event => (
-              <label class="flex items-center bg-(--vscode-list-hoverBackground) px-2 py-1 rounded cursor-pointer">
-                <ui-test-visualizer-radio
-                  value={event}
-                  checked={recorder.mouseEvent() === event}
-                  onChange={(e: any) => {
-                    if (e.target.checked) {
-                      recorder.setMouseEvent(e.target.value)
-                    }
-                  }}
-                >
-                  <div class="pb-[3px]">
-                    {event}
-                  </div>
-                </ui-test-visualizer-radio>
-              </label>
+        <div class="flex flex-col gap-2">
+          <For each={[
+            { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, name: 'user-event', useUserEvent: true },
+            { eventTypes: FIREEVENT_MOUSE_EVENT_TYPES, name: 'fireEvent', useUserEvent: false },
+          ]}
+          >
+            {section => (
+              <div>
+                <h1 class="text-lg font-semibold mb-2">Choose Mouse Event ({section.name})</h1>
+                <div class="flex flex-wrap gap-1">
+                  <For each={section.eventTypes}>{event => (
+                    <label class="flex items-center bg-(--vscode-list-hoverBackground) px-2 py-1 rounded cursor-pointer">
+                      <ui-test-visualizer-radio
+                        value={event}
+                        checked={recorder.mouseEvent() === event && recorder.useUserEvent() === section.useUserEvent}
+                        onChange={(e: any) => {
+                          if (e.target.checked) {
+                            recorder.setMouseEvent(e.target.value)
+                            recorder.setUseUserEvent(section.useUserEvent)
+                          }
+                        }}
+                      >
+                        <div class="pb-[3px]">
+                          {event}
+                        </div>
+                      </ui-test-visualizer-radio>
+                    </label>
+                  )}
+                  </For>
+                </div>
+              </div>
             )}
-            </For>
-          </div>
+          </For>
         </div>
       </div>
     </div>
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 4a67ad1..e44003c 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,12 +1,24 @@
 import { makeEventListener } from '@solid-primitives/event-listener'
 import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
+import type { userEvent } from '@testing-library/user-event'
 import { createEffect, createSignal } from 'solid-js'
+import type { z } from 'zod'
+import type { zRecordedEventData } from '../../../extension/src/panel-controller/panel-router'
+import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
-import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 
-export const MOUSE_EVENT_TYPES: EventType[] = [
+export const USEREVENT_MOUSE_EVENT_TYPES: (keyof typeof userEvent)[] = [
+  'click',
+  'dblClick',
+  'tripleClick',
+  'hover',
+  'unhover',
+  'clear',
+]
+
+export const FIREEVENT_MOUSE_EVENT_TYPES: EventType[] = [
   'click',
   'dblClick',
   'mouseDown',
@@ -22,6 +34,7 @@ export const MOUSE_EVENT_TYPES: EventType[] = [
 export function createRecorder(shadowHost: HTMLDivElement) {
   const [isRecording, setIsRecording] = createSignal(false)
   const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
+  const [useUserEvent, setUseUserEvent] = createSignal(true)
   const [codeInsertions, setCodeInsertions] = createSignal<RecorderCodeInsertions | undefined>()
 
   // When the edit is performed, clear the recorder UI's insertions state
@@ -87,7 +100,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             return
           }
 
-          const eventData: Parameters<typeof client.recordInputAsCode.mutate>[0]['eventData'] = {}
+          const eventData: z.infer<typeof zRecordedEventData> = {}
 
           if (eventType === 'change' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
             const text = target.value
@@ -109,6 +122,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             query: [suggestedQuery.queryMethod, query],
             eventData,
             useExpect,
+            useUserEvent: useUserEvent(),
           })
           setCodeInsertions(insertions)
         })
@@ -127,6 +141,8 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     },
     mouseEvent,
     setMouseEvent,
+    useUserEvent,
+    setUseUserEvent,
     codeInsertions,
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 086bdf9..6ae368e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -497,6 +497,9 @@ importers:
       '@testing-library/dom':
         specifier: ^10.4.1
         version: 10.4.1
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@trpc/client':
         specifier: ^11.5.0
         version: 11.5.0(@trpc/server@11.5.0(typescript@5.9.2))(typescript@5.9.2)
@@ -542,6 +545,9 @@ importers:
       ws:
         specifier: ^8.18.3
         version: 8.18.3
+      zod:
+        specifier: ^4.1.5
+        version: 4.1.5
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.12

From 1e315c7a2bc9990cbf9c5131226a1e39d66eb11e Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 20 Sep 2025 00:57:49 -0400
Subject: [PATCH 29/98] recorder WIP

- handle selectOptions events with userEvent
---
 .../components/FormExample.tsx                    |  9 +++++++++
 .../src/panel-controller/panel-router.ts          |  1 +
 packages/extension/src/recorder/generate-code.ts  |  4 ++++
 packages/web-view-vite/src/recorder/recorder.ts   | 15 ++++++++++++---
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/examples/vitest-react-tailwind4/components/FormExample.tsx b/examples/vitest-react-tailwind4/components/FormExample.tsx
index 94538d7..6edbeb8 100644
--- a/examples/vitest-react-tailwind4/components/FormExample.tsx
+++ b/examples/vitest-react-tailwind4/components/FormExample.tsx
@@ -34,6 +34,15 @@ const FormExample: React.FC = () => {
                 placeholder="Second input"
               />
             </label>
+            <label>
+              Select menu
+              <select className="border p-2 mr-2" aria-label="Select menu">
+                <option value="">Choose an option</option>
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+              </select>
+            </label>
             <button type="submit" className="bg-blue-500 text-white p-2">
               Submit
             </button>
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 6ec3b8a..9129b2c 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -18,6 +18,7 @@ const t = initTRPC.context<PanelRouterCtx>().create()
 
 export const zRecordedEventData = z.object({
   text: z.optional(z.string()), // Used for change events
+  options: z.optional(z.array(z.string())), // Used for selectOptions events
 })
 
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index 1c0237f..6af0672 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -1,5 +1,6 @@
 import type { z } from 'zod/mini'
 import type * as vscode from 'vscode'
+import { mapValues } from 'lodash'
 import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebugPauseLocation } from '../util/debugger-tracker'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
@@ -109,6 +110,9 @@ export async function generateCode(
           const value = eventData.text.replace(/'/g, '\\\'')
           return `, '${value}'`
         }
+        if (event === 'selectOptions' && eventData.options) {
+          return `, [${eventData.options.map(it => `'${it.replace(/'/g, '\\\'')}'`).join(', ')}]`
+        }
         return ''
       })()
 
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index e44003c..117fc80 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -107,9 +107,18 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             eventData.text = text
           }
 
-          const recordedEventType = eventType === 'click'
-            ? mouseEvent()
-            : eventType
+          const recordedEventType = (() => {
+            if (eventType === 'click') {
+              return mouseEvent()
+            }
+
+            if (eventType === 'change' && target instanceof HTMLSelectElement) {
+              eventData.options = [target.value]
+              return 'selectOptions'
+            }
+
+            return eventType
+          })()
 
           const query = serializeQueryArgs(suggestedQuery.queryArgs)
 

From 716f361da18503a629fa82e7310c5a8605db2c18 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 20 Sep 2025 01:05:43 -0400
Subject: [PATCH 30/98] recorder WIP

- support select menus with fireEvent
---
 packages/extension/src/recorder/generate-code.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index 6af0672..4a616c8 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -128,6 +128,9 @@ export async function generateCode(
           const value = eventData.text.replace(/'/g, '\\\'')
           return `, { target: { value: '${value}' } }`
         }
+        if (event === 'selectOptions' && eventData.options) {
+          return `, { target: { value: '${eventData.options[0]}' } }`
+        }
         return ''
       })()
 

From b3e701c0ebce75314739f005dacde7fa9dab10e6 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 21 Sep 2025 00:45:47 -0400
Subject: [PATCH 31/98] recorder WIP

- insert 'async' keyword at start of test if needed
---
 packages/extension/src/code-lens-provider.ts  | 10 ++++-
 .../extension/src/recorder/perform-edit.ts    | 43 +++++++++++++++++--
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/packages/extension/src/code-lens-provider.ts b/packages/extension/src/code-lens-provider.ts
index 7dcec54..7fc91f9 100644
--- a/packages/extension/src/code-lens-provider.ts
+++ b/packages/extension/src/code-lens-provider.ts
@@ -46,8 +46,16 @@ export const codeLensProvider: vscode.CodeLensProvider = {
       walk(program, {
         enter(node) {
           if (node.type === 'CallExpression' && ['it', 'fit', 'test'].includes(node?.callee.name)) {
+            const functionNode = (() => {
+              for (const argNode of node.arguments) {
+                if (['FunctionDeclaration', 'FunctionExpression', 'ArrowFunctionExpression'].includes(argNode?.type ?? '')) {
+                  return argNode
+                }
+              }
+            })()
+
             const name = node?.arguments?.[0]?.value
-            let firstStatementStartChar: number | null = Number(node?.arguments?.[1]?.body?.body?.[0]?.start ?? undefined)
+            let firstStatementStartChar: number | null = Number(functionNode?.body?.body?.[0]?.start ?? undefined)
             if (Number.isNaN(firstStatementStartChar)) {
               firstStatementStartChar = null
             }
diff --git a/packages/extension/src/recorder/perform-edit.ts b/packages/extension/src/recorder/perform-edit.ts
index 76fbd0f..35a9d32 100644
--- a/packages/extension/src/recorder/perform-edit.ts
+++ b/packages/extension/src/recorder/perform-edit.ts
@@ -21,6 +21,18 @@ export async function performEdit(
   // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
   const { parseSync } = require('@oxc-parser/binding-wasm32-wasi')
 
+  // Convert insertion line numbers to character indexes
+  const insertionCharIndexes: number[] = []
+  for (const line in insertions) {
+    const lineNumber = Number.parseInt(line) - 1 // 0-based
+    const position = new vscode.Position(lineNumber, 0)
+    const offset = editor.document.offsetAt(position)
+    insertionCharIndexes.push(offset)
+  }
+
+  const requiresAsync = Object.keys(insertions)
+    .some(lineNum => insertions[Number(lineNum)]?.some(line => /\s*await*/.test(line[0])))
+
   const reverseOrderInsertions = Object.entries(insertions)
     .sort((a, b) => Number(b[0]) - Number(a[0]))
 
@@ -28,8 +40,8 @@ export async function performEdit(
     for (const [line, lines] of reverseOrderInsertions) {
       const lineNumber = Number.parseInt(line)
       const position = new vscode.Position(lineNumber - 1, 0)
-      for (const [line, _requiredImports] of lines) {
-        editBuilder.insert(position, line)
+      for (const [code, _requiredImports] of lines) {
+        editBuilder.insert(position, code)
       }
     }
 
@@ -38,7 +50,6 @@ export async function performEdit(
     const importInsertionPoints = new Map<string, number>()
     const existingImports = new Set<string>()
     {
-    // TODO avoid re-parsing for every generated line of code?
       const parsed = parseSync(editor.document.fileName, editor.document.getText(), {})
       const programJson = parsed.program
       const program = JSON.parse(programJson)
@@ -58,6 +69,30 @@ export async function performEdit(
               }
             }
           }
+
+          // When the test needs to be async, insert the 'async' keyword if it's missing
+          if (
+            requiresAsync
+            // Find the running test
+            && node.type === 'CallExpression' && ['it', 'fit', 'test'].includes(node?.callee.name)
+          ) {
+            for (const argNode of node.arguments) {
+              // Find the arrow function containing the insertion char indexes
+              if (
+                ['FunctionDeclaration', 'FunctionExpression', 'ArrowFunctionExpression'].includes(argNode?.type ?? '')
+                && argNode?.async === false
+                && insertionCharIndexes.some(charIndex => charIndex >= argNode.start && charIndex <= argNode.end)
+              ) {
+                // Check if the function node contains any insertion char indexes
+                for (const charIndex of insertionCharIndexes) {
+                  if (charIndex >= argNode.start && charIndex <= argNode.end) {
+                    const position = editor.document.positionAt(argNode.start)
+                    editBuilder.insert(position, 'async ')
+                  }
+                }
+              }
+            }
+          }
         },
       })
     }
@@ -92,7 +127,7 @@ export async function performEdit(
   })
 
   // Remove the insertions from the state after they've been inserted into the code
-  for (const line of Object.keys(insertions)) {
+  for (const line in insertions) {
     delete insertions[Number(line)]
   }
 

From 031e72afc175126f9c0648eaf9f2c7d079f4e294 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 21 Sep 2025 02:32:50 -0400
Subject: [PATCH 32/98] recorder WIP

- Add info button and tooltips
---
 .../web-view-vite/src/components/Toolbar.tsx  | 74 +++++++++++++++----
 .../src/recorder/recorder-panel.tsx           | 22 ++++--
 2 files changed, 76 insertions(+), 20 deletions(-)

diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index 9c6f66c..da13b05 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -1,14 +1,16 @@
-import Sun from 'lucide-solid/icons/sun'
+import Code from 'lucide-solid/icons/code'
+import Info from 'lucide-solid/icons/info'
 import Moon from 'lucide-solid/icons/moon'
 import RefreshCw from 'lucide-solid/icons/refresh-cw'
-import Code from 'lucide-solid/icons/code'
-import Circle from 'lucide-solid/icons/circle'
-import type { ParentProps } from 'solid-js'
+import Sun from 'lucide-solid/icons/sun'
+import { type ParentProps, Show, createSignal } from 'solid-js'
 import { firstPatchReceived, inspector, recorder, refreshShadow, theme, toggleTheme } from '../App'
 import { StyleIcon, StylePicker } from './StylePicker'
+import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from './solid-ui/popover'
 import { Tooltip, TooltipContent, TooltipTrigger } from './solid-ui/tooltip'
 
 export function Toolbar() {
+  const [recorderPopoverOpen, setRecorderPopoverOpen] = createSignal(false)
   return (
     <div
       class="flex gap-2 p-2 bg-(--vscode-panel-background)"
@@ -46,16 +48,57 @@ export function Toolbar() {
       <div class="h-10 w-10">
         {/* Spacer */}
       </div>
-      <ToolbarButton
-        onClick={() => recorder.toggle(!recorder.isRecording())}
-        label={recorder.isRecording() ? 'Stop recording' : '(Experimental) Record input as code'}
-      >
-        <div
-          class={`w-4 h-4 rounded-full ${
-            recorder.isRecording() ? 'bg-red-500' : 'bg-gray-500'
-          }`}
-        />
-      </ToolbarButton>
+      <div class="flex">
+        <ToolbarButton
+          onClick={() => recorder.toggle(!recorder.isRecording())}
+          label={recorder.isRecording() ? 'Stop recording' : '(Experimental) Record input as code'}
+        >
+          <div
+            class={`w-4 h-4 rounded-full ${
+                recorder.isRecording() ? 'bg-red-500' : 'bg-gray-500'
+            }`}
+          />
+        </ToolbarButton>
+        <Show when={recorder.isRecording()}>
+          <Popover
+            open={recorderPopoverOpen()}
+            onOpenChange={open => setRecorderPopoverOpen(open)}
+          >
+            <PopoverTrigger>
+              <ToolbarButton
+                appearance="icon"
+                label="Test Recorder Info"
+              >
+                <Info class="w-6 h-6" />
+              </ToolbarButton>
+            </PopoverTrigger>
+            <PopoverContent class="w-[450px] flex flex-col gap-1">
+              <PopoverArrow />
+              <h1 class="text-lg font-semibold mb-2">Test Recorder Info</h1>
+              <ul class="list-disc list-inside space-y-1">
+                <li>'Step Over' with the debugger to where you want to generate new code.</li>
+                <li>Click on an element or change a text input to generate code.</li>
+                <li>Alt+Click on an element to generate an 'expect' statement.</li>
+                <li>When you end or restart the test, the generated code is inserted into the test file.</li>
+                <li>
+                  Note: Your UI is not actually running in this panel, so certain interactions might not behave as expected.
+                  Your UI is running in your test process as usual, and this panel shows a live replica.
+                  When you interact here, the generated testing-library code is executed in the test process.
+                </li>
+              </ul>
+              <div class="flex justify-center">
+                <ui-test-visualizer-button
+                  appearance="primary"
+                  title="Apply styles"
+                  onClick={() => setRecorderPopoverOpen(false)}
+                >
+                  OK
+                </ui-test-visualizer-button>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </Show>
+      </div>
     </div>
   )
 }
@@ -63,6 +106,7 @@ export function Toolbar() {
 interface ToolbarButtonProps extends ParentProps {
   label: string
   onClick?: () => void
+  appearance?: string
 }
 
 function ToolbarButton(props: ToolbarButtonProps) {
@@ -71,7 +115,7 @@ function ToolbarButton(props: ToolbarButtonProps) {
       <TooltipTrigger>
         <ui-test-visualizer-button
           class="h-10 w-10"
-          appearance="secondary"
+          appearance={props.appearance ?? 'secondary'}
           onClick={props.onClick}
           aria-label={props.label}
         >
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 457a541..bdfd824 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -5,7 +5,9 @@ import shikiLightPlus from '@shikijs/themes/light-plus'
 import { createJavaScriptRegexEngine } from 'shiki'
 import { For, Suspense, createResource } from 'solid-js'
 import X from 'lucide-solid/icons/x'
+import Info from 'lucide-solid/icons/info'
 import { recorder } from '../App'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../components/solid-ui/tooltip'
 import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
 
 export function RecorderPanel() {
@@ -47,7 +49,7 @@ export function RecorderPanel() {
 
   return (
     <div class="flex h-full w-full">
-      <div class="w-1/2 h-full overflow-y-auto p-4 border-r border-[--vscode-panel-border]">
+      <div class="w-1/2 h-full overflow-y-auto p-4 border-r border-[var(--vscode-panel-border)]">
         <div>
           <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
           <div class="text-sm flex flex-col gap-2">
@@ -90,15 +92,25 @@ export function RecorderPanel() {
         </div>
       </div>
       <div class="w-1/2 h-full overflow-y-auto p-4">
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-3">
           <For each={[
-            { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, name: 'user-event', useUserEvent: true },
-            { eventTypes: FIREEVENT_MOUSE_EVENT_TYPES, name: 'fireEvent', useUserEvent: false },
+            { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, name: 'user-event', useUserEvent: true, tooltip: 'Uses @testing-library/user-event' },
+            { eventTypes: FIREEVENT_MOUSE_EVENT_TYPES, name: 'fireEvent', useUserEvent: false, tooltip: 'Uses testing-library\'s fireEvent' },
           ]}
           >
             {section => (
               <div>
-                <h1 class="text-lg font-semibold mb-2">Choose Mouse Event ({section.name})</h1>
+                <div class="flex gap-2">
+                  <h1 class="text-lg font-semibold mb-1">Choose Mouse Event ({section.name})</h1>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <Info class="w-5 h-5 mb-1" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {section.tooltip}
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
                 <div class="flex flex-wrap gap-1">
                   <For each={section.eventTypes}>{event => (
                     <label class="flex items-center bg-(--vscode-list-hoverBackground) px-2 py-1 rounded cursor-pointer">

From 54bb3b58f77fa3d8f2f5daece36c631c4c144adc Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 22 Sep 2025 00:36:39 -0400
Subject: [PATCH 33/98] recorder WIP

add e2e tests
---
 .../components/FormExample.tsx                |   4 +-
 .../test/form-test-for-e2e.test.tsx           |  14 ++
 examples/vitest-react-tailwind4/tsconfig.json |   2 +-
 package.json                                  |   1 +
 .../src/recorder/create-ui-test-file.ts       |  39 +++---
 pnpm-lock.yaml                                |   3 +
 test/e2e-recorder.test.ts                     | 122 ++++++++++++++++++
 7 files changed, 164 insertions(+), 21 deletions(-)
 create mode 100644 examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
 create mode 100644 test/e2e-recorder.test.ts

diff --git a/examples/vitest-react-tailwind4/components/FormExample.tsx b/examples/vitest-react-tailwind4/components/FormExample.tsx
index 6edbeb8..293db11 100644
--- a/examples/vitest-react-tailwind4/components/FormExample.tsx
+++ b/examples/vitest-react-tailwind4/components/FormExample.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-const FormExample: React.FC = () => {
+export const FormExample: React.FC = () => {
   const [submitCount, setSubmitCount] = useState(0)
   return (
     <div className="">
@@ -77,5 +77,3 @@ const FormExample: React.FC = () => {
     </div>
   )
 }
-
-export default FormExample
diff --git a/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx b/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
new file mode 100644
index 0000000..da2c682
--- /dev/null
+++ b/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
@@ -0,0 +1,14 @@
+import { describe, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { FormExample } from '../components/FormExample'
+
+describe('form test for e2e', () => {
+  it('basic usage', async () => {
+    setupUi()
+    expect(screen.getByLabelText('First input')).toBeTruthy()
+  })
+})
+
+function setupUi() {
+  render(<FormExample />)
+}
diff --git a/examples/vitest-react-tailwind4/tsconfig.json b/examples/vitest-react-tailwind4/tsconfig.json
index 0068949..06568a5 100644
--- a/examples/vitest-react-tailwind4/tsconfig.json
+++ b/examples/vitest-react-tailwind4/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "Preserve",
     "moduleResolution": "bundler",
     "types": ["vitest/globals"],
diff --git a/package.json b/package.json
index 68845fe..fea1e9e 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "@vscode/vsce": "^3.6.0",
     "eslint": "^9.34.0",
     "ovsx": "^0.10.5",
+    "pathe": "^2.0.3",
     "tsup": "^8.5.0",
     "type-fest": "^4.41.0",
     "typescript": "^5.9.2",
diff --git a/packages/extension/src/recorder/create-ui-test-file.ts b/packages/extension/src/recorder/create-ui-test-file.ts
index 03a2b8f..2bfd05a 100644
--- a/packages/extension/src/recorder/create-ui-test-file.ts
+++ b/packages/extension/src/recorder/create-ui-test-file.ts
@@ -20,38 +20,43 @@ export async function createUiTestFile() {
 
   const selection = editor.selection
   const wordRange = doc.getWordRangeAtPosition(selection.active, /\w+/)
-  if (!wordRange) {
+  const word = doc.getText(wordRange)
+
+  if (!wordRange || !word) {
+    vscode.window.showInformationMessage(
+      `No valid identifier found. Must be an exported capitalized function name. Got ${word}`,
+    )
     return
   }
 
-  const exportName = (() => {
+  const { exportName, isDefaultExport } = (() => {
     const parsed = parseSync(doc.fileName, doc.getText(), {})
     const programJson = parsed.program
     const program = JSON.parse(programJson)
 
-    const wordStart = doc.offsetAt(wordRange.start)
-    const wordEnd = doc.offsetAt(wordRange.end)
-
     let result: string | null = null
+    let isDefaultExport = false
     walk(program, {
       enter(node) {
-        if (
-          (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration')
-          && node.start <= wordStart && node.end >= wordEnd
-        ) {
-          result = node?.declaration?.id?.name ?? node?.declaration?.declarations?.[0]?.id?.name ?? null
+        if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') {
+          const nodeName = node?.declaration?.name
+            ?? node?.declaration?.id?.name
+            ?? node?.declaration?.declarations?.[0]?.id?.name
+            ?? node?.declaration?.declarations?.[0]?.name
+          if (nodeName === word) {
+            result = nodeName ?? null
+            isDefaultExport = node.type === 'ExportDefaultDeclaration'
+          }
         }
       },
     })
 
-    return result as string | null
+    return { exportName: result as string | null, isDefaultExport }
   })()
 
-  const word = doc.getText(wordRange)
-
   if (!exportName) {
     vscode.window.showInformationMessage(
-      `No valid selection found. Must be an exported capitalized function name. Got ${word}`,
+      `No valid export found. Must be an exported capitalized function name. Got ${word}`,
     )
     return
   }
@@ -96,12 +101,12 @@ export async function createUiTestFile() {
 
   // Create basic test content
   const isArrowRender = testingLibrary === '@solidjs/testing-library'
-  const testContent = `import { describe, test } from '${frameworkInfo.framework}'
+  const testContent = `import { describe, it } from '${frameworkInfo.framework}'
 import { render } from '${testingLibrary}'
-import { ${exportName} } from './${relativePathToSrc}'
+import ${isDefaultExport ? exportName : `{ ${exportName} }`} from './${relativePathToSrc}'
 
 describe('${exportName}', () => {
-  test('basic usage', async () => {
+  it('basic usage', async () => {
     render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
   })
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ae368e..20bcf20 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ importers:
       ovsx:
         specifier: ^0.10.5
         version: 0.10.5
+      pathe:
+        specifier: ^2.0.3
+        version: 2.0.3
       tsup:
         specifier: ^8.5.0
         version: 8.5.0(jiti@2.5.1)(postcss@8.5.6)(typescript@5.9.2)(yaml@2.4.2)
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
new file mode 100644
index 0000000..6868c24
--- /dev/null
+++ b/test/e2e-recorder.test.ts
@@ -0,0 +1,122 @@
+import fs from 'node:fs/promises'
+import { test } from '@playwright/test'
+import path from 'pathe'
+import { DebuggerHelper } from './debugger-helper'
+
+// Undo changes made to the e2e test file that gets edited
+{
+  const e2eTestTestPath = path.join(__dirname, '../examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx')
+  let e2eTestTestOriginalContent: string
+  test.beforeEach(async () => {
+    e2eTestTestOriginalContent = await fs.readFile(e2eTestTestPath, 'utf8')
+  })
+  test.afterEach(async () => {
+  // Undo changes made to the e2e test file
+    await fs.writeFile(e2eTestTestPath, e2eTestTestOriginalContent, 'utf8')
+  })
+}
+
+test.afterEach(async () => {
+  // Delete the generated test file
+  const generatedFilePath = path.join(__dirname, '../examples/vitest-react-tailwind4/components/FormExample.test.tsx')
+  try {
+    await fs.access(generatedFilePath)
+    await fs.unlink(generatedFilePath)
+  }
+  catch {
+    // ignore
+  }
+})
+
+test('Create a UI test file', async ({ browser }) => {
+  const page = await browser.newPage()
+
+  await page.goto('http://localhost:8080/?folder=/source/examples/vitest-react-tailwind4')
+
+  // Open FormExample.tsx
+  await page.locator('.search-label').click()
+  await page.locator('.monaco-findInput > .monaco-inputbox > .ibwrapper > .input').clear()
+  await page.locator('.monaco-findInput > .monaco-inputbox > .ibwrapper > .input').type('FormExample.tsx')
+  await page.locator('.highlight').first().click()
+
+  // Create the test file
+  await page.getByText('FormExample', { exact: true }).click({
+    button: 'right',
+  })
+  await page.getByRole('menuitem', { name: 'Create UI test (UI Test' }).click()
+
+  // FormExample.test.tsx should open on its own here
+
+  // Hide the bottom panel to get more space
+  const hideButton = page.getByRole('button', { name: 'Hide Panel' })
+  if (await hideButton.isVisible()) {
+    await hideButton.click()
+  }
+
+  // Wait for the text "render(<FormExample />)" to appear anywhere on the page
+  await page.getByText('render(<FormExample />)').waitFor()
+})
+
+test('Record a UI test', async ({ browser }) => {
+  const page = await browser.newPage()
+
+  await page.goto('http://localhost:8080/?folder=/source/examples/vitest-react-tailwind4')
+
+  // Open form-test-for-e2e.test.tsx
+  await page.locator('.search-label').click()
+  await page.locator('.monaco-findInput > .monaco-inputbox > .ibwrapper > .input').clear()
+  await page.locator('.monaco-findInput > .monaco-inputbox > .ibwrapper > .input').type('form-test-for-e2e.test.tsx')
+  await page.locator('.highlight').first().click()
+
+  // Hide the bottom panel to get more space
+  const hideButton = page.getByRole('button', { name: 'Hide Panel' })
+  if (await hideButton.isVisible()) {
+    await hideButton.click()
+  }
+
+  // Start the visual debug
+  await page.getByRole('button', { name: 'Visually Debug UI' }).click()
+  await page.getByText('Tested UI').waitFor()
+
+  const replicaPanel = page
+    .frameLocator('iframe.webview.ready')
+    .frameLocator('iframe[title="Tested UI"]')
+
+  // Click the OK button on the initial style prompt
+  await replicaPanel.locator('ui-test-visualizer-button[title="Dismiss style prompt"]').click()
+
+  // Wait until the debugger is paused on breakpoint
+  await page.getByText('Paused on breakpoint').waitFor()
+
+  const debugHelper = new DebuggerHelper(page)
+  await debugHelper.debugStep()
+
+  // Start recording
+  await replicaPanel.getByRole('button', { name: '(Experimental) Record input' }).first().click()
+
+  // Fill in the first input
+  await replicaPanel.getByRole('textbox', { name: 'First input' }).click()
+  await replicaPanel.getByRole('textbox', { name: 'First input' }).fill('test input 1')
+  await page.getByText(`await userEvent.type(screen.getByRole('textbox', { name: /^first input$/i }), 'test input 1')`)
+
+  // Fill in the second input
+  await replicaPanel.getByRole('textbox', { name: 'Second input' }).click()
+  await replicaPanel.getByRole('textbox', { name: 'Second input' }).fill('test input 2')
+  await page.getByText(`await userEvent.type(screen.getByRole('textbox', { name: /^second input$/i }), 'test input 2')`)
+
+  // Select an option from the select menu
+  await replicaPanel.getByRole('combobox', { name: 'Select menu' }).selectOption('option2')
+  await page.getByText(`await userEvent.selectOptions(screen.getByRole('combobox', { name: /^select menu$/i }), ['option2'])`)
+
+  // Submit the form
+  await replicaPanel.getByRole('button', { name: 'Submit' }).click()
+  await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`)
+
+  // Finish the test
+  await page.getByRole('button', { name: 'Continue (F5)' }).click()
+  // Wait for replica panel to be closed
+  await page.frameLocator('iframe.webview.ready').locator('iframe[title="Tested UI"]').waitFor({ state: 'detached' })
+
+  // Check for the generated code
+  await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`)
+})

From 9d744a11796b6e7aa7eeb8f73a6d21fcbc1ba8a2 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Tue, 23 Sep 2025 04:09:25 -0400
Subject: [PATCH 34/98] recorder WIP

- Fix userEvent statements not running in the debugger. Use @testing/library/user-event v13's non-async methods when running the debug expressions.
- Added the alt-click `expect` generation to the e2e test
---
 .../components/FormExample.tsx                |  4 +--
 packages/extension/package.json               |  1 +
 .../extension/src/recorder/generate-code.ts   | 31 ++++++++++++++++---
 packages/extension/tsup.config.ts             |  5 +++
 .../web-view-vite/src/recorder/recorder.ts    |  1 -
 pnpm-lock.yaml                                | 14 +++++++++
 test/e2e-recorder.test.ts                     | 15 ++++++++-
 7 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/examples/vitest-react-tailwind4/components/FormExample.tsx b/examples/vitest-react-tailwind4/components/FormExample.tsx
index 293db11..cdf93b1 100644
--- a/examples/vitest-react-tailwind4/components/FormExample.tsx
+++ b/examples/vitest-react-tailwind4/components/FormExample.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
-export const FormExample: React.FC = () => {
+export function FormExample() {
   const [submitCount, setSubmitCount] = useState(0)
   return (
     <div className="">
diff --git a/packages/extension/package.json b/packages/extension/package.json
index 7f34d70..0b45d4d 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -26,6 +26,7 @@
     "zod": "^4.1.5"
   },
   "devDependencies": {
+    "@testing-library/user-event": "^13.5.0",
     "@types/less": "^3.0.8",
     "@types/lodash": "^4.17.20",
     "@types/node": "^24.3.0",
diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index 4a616c8..6c00df6 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -1,10 +1,10 @@
-import type { z } from 'zod/mini'
+import path from 'pathe'
 import type * as vscode from 'vscode'
-import { mapValues } from 'lodash'
+import type { z } from 'zod/mini'
+import type { SupportedFramework } from '../framework-support/detect-test-framework'
+import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebugPauseLocation } from '../util/debugger-tracker'
-import type { TestingLibrary } from '../framework-support/detect-test-library'
-import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { SerializedRegexp } from './recorder-codegen-session'
 
 export async function generateCode(
@@ -148,15 +148,36 @@ export async function generateCode(
     if (from === 'vitest') {
       from = 'vitest/dist/index.js'
     }
+
+    // user-event v13 is used when running the debug expressions, because it's the last version
+    // where the methods were synchronous e.g. `userEvent.click(...);`.
+    // Newer versions use async code e.g. `await userEvent.click(...);`,
+    // which fail when running through the debugger's 'evaluate' request.
+    if (from === '@testing-library/user-event') {
+      from = path.join(__dirname, 'user-event-13.js')
+      return `const ${importName} = require('${from}').default;`
+    }
     return `const { ${importName} } = require('${from}');`
   }).join('\n')
 
+  // The fireEvent or userEvent statement to run in the debugger.
+  // May be slightly different than the code that is actually generated for the user.
+  const debugEventStatement = (() => {
+    const result = code.replace(/\s*await/, '') // No 'awaits' allowed in debug expressions
+
+    // When writing react tests with userEvent v13, wrap in 'act'.
+    if (testLibrary === '@testing-library/react' && useUserEvent) {
+      return `require('react').act(() => { ${result} });`
+    }
+    return result
+  })()
+
   // Replicate the input event from the webview to the test runtime.
   // We do this through a debug expression, which is the same as running code through vscode's 'Debug Terminal'.
   const debugExpression = `
 (() => {
 ${importCode}
-${code.replace(/\s*await/, '') /* No 'awaits' allowed in debug expressions */};
+${debugEventStatement}
 })()
 `
 
diff --git a/packages/extension/tsup.config.ts b/packages/extension/tsup.config.ts
index e692016..02f21c1 100644
--- a/packages/extension/tsup.config.ts
+++ b/packages/extension/tsup.config.ts
@@ -23,6 +23,11 @@ export default defineConfig((options) => {
       'ui-test-visualizer-cli-setup': '../test-setup/src/vitest-cli-setup.ts',
       'ui-test-visualizer-test-setup': '../test-setup/src/test-setup.ts',
       'transform-css': './src/transform-css/transform-css.ts',
+
+      // user-event v13 is used when running the recorder's generated code as debug expressions, because it's the last version
+      // where the methods were synchronous e.g. `userEvent.click(...);`. Newer versions use async code like `await userEvent.click(...);`
+      // which fail when running through the debugger's 'evaluate' request.
+      'user-event-13': './node_modules/@testing-library/user-event/dist/index.js',
     },
     outDir,
     external: ['vscode', 'jest-resolve/build/default_resolver', 'jiti', './transform-css', 'babel-jest', '@babel/core'],
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 117fc80..49e3f8d 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -12,7 +12,6 @@ import { client } from '../lib/panel-client'
 export const USEREVENT_MOUSE_EVENT_TYPES: (keyof typeof userEvent)[] = [
   'click',
   'dblClick',
-  'tripleClick',
   'hover',
   'unhover',
   'clear',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 20bcf20..fa731a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -375,6 +375,9 @@ importers:
         specifier: ^4.1.5
         version: 4.1.5
     devDependencies:
+      '@testing-library/user-event':
+        specifier: ^13.5.0
+        version: 13.5.0(@testing-library/dom@10.4.1)
       '@types/less':
         specifier: ^3.0.8
         version: 3.0.8
@@ -3575,6 +3578,12 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@testing-library/user-event@13.5.0':
+    resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@testing-library/user-event@14.6.1':
     resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
     engines: {node: '>=12', npm: '>=6'}
@@ -11385,6 +11394,11 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 18.3.0
 
+  '@testing-library/user-event@13.5.0(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@babel/runtime': 7.28.3
+      '@testing-library/dom': 10.4.1
+
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
       '@testing-library/dom': 10.4.1
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 6868c24..378320f 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -94,6 +94,9 @@ test('Record a UI test', async ({ browser }) => {
   // Start recording
   await replicaPanel.getByRole('button', { name: '(Experimental) Record input' }).first().click()
 
+  // Check that the submission count starts at 0
+  await replicaPanel.getByText(`Submit Count: 0`)
+
   // Fill in the first input
   await replicaPanel.getByRole('textbox', { name: 'First input' }).click()
   await replicaPanel.getByRole('textbox', { name: 'First input' }).fill('test input 1')
@@ -112,11 +115,21 @@ test('Record a UI test', async ({ browser }) => {
   await replicaPanel.getByRole('button', { name: 'Submit' }).click()
   await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`)
 
+  // Alt-click the submit count to generate the `expect` statement
+  await replicaPanel.getByText('Submit Count:').click({
+    modifiers: ['Alt'],
+  })
+  // Check that the submission count increased due to the click, which causes the userEvent code to run in the debugger
+  await replicaPanel.getByText(`Submit Count: 1`)
+  await replicaPanel.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`)
+
   // Finish the test
   await page.getByRole('button', { name: 'Continue (F5)' }).click()
+
   // Wait for replica panel to be closed
   await page.frameLocator('iframe.webview.ready').locator('iframe[title="Tested UI"]').waitFor({ state: 'detached' })
 
-  // Check for the generated code
+  // Check for the generated code in the editor
   await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`)
+  await page.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`)
 })

From 981386cf4d4f5aa6e19a23c254c2fc30e0cfa291 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Tue, 23 Sep 2025 19:09:06 -0400
Subject: [PATCH 35/98] recorder WIP

- fix some colors
- use string union for recorder/inspector open state
- increase playwright timeout
---
 packages/web-view-vite/src/App.tsx                   | 12 ++++++++++--
 packages/web-view-vite/src/components/Toolbar.tsx    |  8 +++++---
 .../web-view-vite/src/inspector/inspector-height.ts  | 11 ++++++-----
 packages/web-view-vite/src/recorder/recorder.ts      |  7 +++++--
 playwright.config.ts                                 |  2 +-
 test/e2e-recorder.test.ts                            |  2 +-
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index 7bce3a3..be91236 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -37,6 +37,14 @@ export const {
   stylesAreLoading,
 } = createDomReplica()
 
+export const STORAGE_KEY_INSPECTOR_IS_OPEN = 'ui-test-visualizer.inspector-is-open'
+const inspectorWasOpen = Boolean(localStorage.getItem(STORAGE_KEY_INSPECTOR_IS_OPEN))
+
+export type Panel = 'inspector' | 'recorder'
+export const [openPanel, setOpenPanel] = createSignal<Panel | null>(
+  inspectorWasOpen ? 'inspector' : null,
+)
+
 export const inspector = createInspectorHeight()
 
 export const recorder = createRecorder(shadowHost)
@@ -69,7 +77,7 @@ export function App() {
             <div style={{ height: `${inspector.height()}px` }}>
               <Resizer onResize={inspector.updateHeight} />
               <Switch>
-                <Match when={recorder.isRecording()}>
+                <Match when={openPanel() === 'recorder'}>
                   <ErrorBoundary fallback={error => (
                     <div class="text-error-foreground p-4">
                       Error showing the recorder UI{error instanceof Error ? `: ${error.message}` : ''}
@@ -79,7 +87,7 @@ export function App() {
                     <RecorderPanel />
                   </ErrorBoundary>
                 </Match>
-                <Match when={inspector.isOpen()}>
+                <Match when={openPanel() === 'inspector'}>
                   <ErrorBoundary fallback={error => (
                     <div class="text-error-foreground p-4">
                       Error showing the inspector{error instanceof Error ? `: ${error.message}` : ''}
diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index da13b05..c8ece68 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -20,7 +20,9 @@ export function Toolbar() {
         onClick={inspector.toggle}
         label="Toggle Inspector"
       >
-        <Code />
+        <Code
+          classList={{ 'text-[#75beff]': inspector.isOpen() }}
+        />
       </ToolbarButton>
       <ToolbarButton
         onClick={refreshShadow}
@@ -51,11 +53,11 @@ export function Toolbar() {
       <div class="flex">
         <ToolbarButton
           onClick={() => recorder.toggle(!recorder.isRecording())}
-          label={recorder.isRecording() ? 'Stop recording' : '(Experimental) Record input as code'}
+          label={recorder.isRecording() ? 'Stop recording' : 'Record input as code (Experimental)'}
         >
           <div
             class={`w-4 h-4 rounded-full ${
-                recorder.isRecording() ? 'bg-red-500' : 'bg-gray-500'
+                recorder.isRecording() ? 'bg-red-500' : 'bg-gray-400'
             }`}
           />
         </ToolbarButton>
diff --git a/packages/web-view-vite/src/inspector/inspector-height.ts b/packages/web-view-vite/src/inspector/inspector-height.ts
index febef5d..905b04c 100644
--- a/packages/web-view-vite/src/inspector/inspector-height.ts
+++ b/packages/web-view-vite/src/inspector/inspector-height.ts
@@ -1,18 +1,19 @@
 import { createSignal } from 'solid-js'
 import debounce from 'lodash/debounce'
+import { STORAGE_KEY_INSPECTOR_IS_OPEN, openPanel, setOpenPanel } from '../App'
 
 const STORAGE_KEY_INSPECTOR_HEIGHT = 'ui-test-visualizer.inspector-height'
-const STORAGE_KEY_INSPECTOR_IS_OPEN = 'ui-test-visualizer.inspector-is-open'
 const DEFAULT_HEIGHT = 300
 
 export function createInspectorHeight() {
-  const initialIsOpen = Boolean(localStorage.getItem(STORAGE_KEY_INSPECTOR_IS_OPEN))
-  const [isOpen, setIsOpen] = createSignal(initialIsOpen)
-
   // Get initial height from storage or use default
   const initialHeight = Number(localStorage.getItem(STORAGE_KEY_INSPECTOR_HEIGHT)) || DEFAULT_HEIGHT
   const [height, setHeight] = createSignal(initialHeight)
 
+  function isOpen() {
+    return openPanel() === 'inspector'
+  }
+
   // Wrapper for setHeight that also persists to storage
   function updateHeight(newHeight: number) {
     // Clamp height between 0 and 80% of viewport height
@@ -22,7 +23,7 @@ export function createInspectorHeight() {
   }
 
   function toggle() {
-    setIsOpen(!isOpen())
+    setOpenPanel(isOpen() ? null : 'inspector')
     localStorage.setItem(STORAGE_KEY_INSPECTOR_IS_OPEN, isOpen() ? 'true' : '')
   }
 
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 49e3f8d..ff255ef 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -8,6 +8,7 @@ import type { zRecordedEventData } from '../../../extension/src/panel-controller
 import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
+import { openPanel, setOpenPanel } from '../App'
 
 export const USEREVENT_MOUSE_EVENT_TYPES: (keyof typeof userEvent)[] = [
   'click',
@@ -31,7 +32,9 @@ export const FIREEVENT_MOUSE_EVENT_TYPES: EventType[] = [
 ]
 
 export function createRecorder(shadowHost: HTMLDivElement) {
-  const [isRecording, setIsRecording] = createSignal(false)
+  function isRecording() {
+    return openPanel() === 'recorder'
+  }
   const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
   const [useUserEvent, setUseUserEvent] = createSignal(true)
   const [codeInsertions, setCodeInsertions] = createSignal<RecorderCodeInsertions | undefined>()
@@ -141,7 +144,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   return {
     isRecording,
     toggle: (recording: boolean) => {
-      setIsRecording(recording)
+      setOpenPanel(recording ? 'recorder' : null)
     },
     removeInsertion: async (line: number, idx?: number) => {
       const newInsertions = await client.removeRecorderInsertion.mutate({ line, idx })
diff --git a/playwright.config.ts b/playwright.config.ts
index 35ff30e..46a9d46 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -16,6 +16,6 @@ export default defineConfig({
     headless: !!process.env.CI || !!process.env.PLAYWRIGHT_HEADLESS,
     viewport: { width: 1600, height: 800 },
   },
-  timeout: 60_000,
+  timeout: 90_000,
   retries: process.env.CI ? 1 : 0,
 })
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 378320f..ffbc190 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -92,7 +92,7 @@ test('Record a UI test', async ({ browser }) => {
   await debugHelper.debugStep()
 
   // Start recording
-  await replicaPanel.getByRole('button', { name: '(Experimental) Record input' }).first().click()
+  await replicaPanel.getByRole('button', { name: 'Record input as code (Experimental)' }).first().click()
 
   // Check that the submission count starts at 0
   await replicaPanel.getByText(`Submit Count: 0`)

From bac990ea1c957cebb5a8480c7b62c7b4831d5f74 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 25 Sep 2025 14:00:10 -0400
Subject: [PATCH 36/98] recorder WIP

- fix generated code indent
---
 packages/extension/src/recorder/generate-code.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index 6c00df6..ed280be 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -140,8 +140,20 @@ export async function generateCode(
     }
   }
 
-  const line = editor.document.lineAt(pausedLocation.lineNumber - 1)
-  const indent = line.text.match(/^\s*/)?.[0] || ''
+  const indent: string = (() => {
+    // Indent should be the longest indentation between the paused line and the previous line.
+    // This is to make sure the right indent is used when paused at the end of the test.
+    // e.g.
+    // test('click button', () => {
+    //   const button = screen.getByRole('button')
+    //   button.click() <-- when paused here, use this line's indent.
+    // }) <-- when paused here, use previous line's indent.
+
+    const line1 = editor.document.lineAt(pausedLocation.lineNumber - 1)
+    const line2 = editor.document.lineAt(pausedLocation.lineNumber - 2)
+    return [line1, line2].map(it => it.text.match(/^\s*/)?.[0] || '').sort((a, b) => b.length - a.length)[0] || ''
+  })()
+
   code = `${indent}${code}`
 
   const importCode = Object.entries(requiredImports).map(([importName, from]) => {

From 2717b73780547e1e577c63a14f2935dfafad34cd Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 25 Sep 2025 14:00:58 -0400
Subject: [PATCH 37/98] recorder WIP

- show a message when there are pending input changes
---
 packages/web-view-vite/src/index.css          |  2 +-
 .../src/recorder/recorder-panel.tsx           |  7 ++-
 .../web-view-vite/src/recorder/recorder.ts    | 45 +++++++++++++++++++
 packages/web-view-vite/ui.preset.js           |  2 +-
 4 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/packages/web-view-vite/src/index.css b/packages/web-view-vite/src/index.css
index f88ff51..5beb6c7 100644
--- a/packages/web-view-vite/src/index.css
+++ b/packages/web-view-vite/src/index.css
@@ -44,7 +44,7 @@
     --success-foreground: 160 84% 39%;
 
     --warning: 48 96% 89%;
-    --warning-foreground: 25 95% 53%;
+    --warning-foreground: var(--vscode-editorWarning-foreground);
 
     --error: 0 93% 94%;
     --error-foreground: var(--vscode-list-errorForeground);
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index bdfd824..0ee47a2 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -3,7 +3,7 @@ import shikiTypescript from '@shikijs/langs/typescript'
 import shikiDarkPlus from '@shikijs/themes/dark-plus'
 import shikiLightPlus from '@shikijs/themes/light-plus'
 import { createJavaScriptRegexEngine } from 'shiki'
-import { For, Suspense, createResource } from 'solid-js'
+import { For, Show, Suspense, createResource } from 'solid-js'
 import X from 'lucide-solid/icons/x'
 import Info from 'lucide-solid/icons/info'
 import { recorder } from '../App'
@@ -52,6 +52,11 @@ export function RecorderPanel() {
       <div class="w-1/2 h-full overflow-y-auto p-4 border-r border-[var(--vscode-panel-border)]">
         <div>
           <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
+          <Show when={recorder.hasPendingInputChange()}>
+            <div class="text-warning-foreground mb-2">
+              Input 'change' code generates after unfocusing the input
+            </div>
+          </Show>
           <div class="text-sm flex flex-col gap-2">
             <For each={Object.entries(recorder.codeInsertions() ?? {})}>{([lineNum, codeLines]) => (
               <div>
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index ff255ef..f1e7d1b 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,9 +1,11 @@
 import { makeEventListener } from '@solid-primitives/event-listener'
+import { ReactiveMap } from '@solid-primitives/map'
 import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
 import type { userEvent } from '@testing-library/user-event'
 import { createEffect, createSignal } from 'solid-js'
 import type { z } from 'zod'
+import { createMutationObserver } from '@solid-primitives/mutation-observer'
 import type { zRecordedEventData } from '../../../extension/src/panel-controller/panel-router'
 import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 import { deepElementFromPoint } from '../inspector/util'
@@ -46,6 +48,8 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     }
   })
 
+  const { hasPendingInputChange } = trackPendingInputChanges(shadowHost, isRecording)
+
   createEffect(() => {
     if (isRecording()) {
       for (const eventType of ['click', 'submit', 'change'] as const) {
@@ -155,6 +159,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     useUserEvent,
     setUseUserEvent,
     codeInsertions,
+    hasPendingInputChange,
   }
 }
 
@@ -196,3 +201,43 @@ function makeRegexpExact(regexp: RegExp) {
   // Wrap with ^ and $
   return new RegExp(`^${source}$`, flags)
 }
+
+function trackPendingInputChanges(shadowHost: HTMLDivElement, isRecording: () => boolean) {
+  const isPendingInputChange = new ReactiveMap<Node, boolean>()
+  function hasPendingInputChange() {
+    return isPendingInputChange.size > 0
+  }
+
+  makeEventListener(shadowHost.shadowRoot!, 'input', (e) => {
+    if (!(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+      return
+    }
+    isPendingInputChange.set(e.target, true)
+  })
+  makeEventListener(shadowHost.shadowRoot!, 'change', (e) => {
+    if (!(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+      return
+    }
+    isPendingInputChange.delete(e.target)
+  })
+
+  const shadowHtml = shadowHost.shadowRoot?.children[0]
+  if (shadowHtml) {
+    createMutationObserver(shadowHtml, { subtree: true, childList: true }, (mutations) => {
+      for (const mutation of mutations) {
+        for (const removedNode of mutation.removedNodes) {
+          isPendingInputChange.delete(removedNode)
+        }
+      }
+    })
+  }
+  createEffect(() => {
+    if (!isRecording()) {
+      isPendingInputChange.clear()
+    }
+  })
+
+  return {
+    hasPendingInputChange,
+  }
+}
diff --git a/packages/web-view-vite/ui.preset.js b/packages/web-view-vite/ui.preset.js
index 133efcb..ebd696c 100644
--- a/packages/web-view-vite/ui.preset.js
+++ b/packages/web-view-vite/ui.preset.js
@@ -41,7 +41,7 @@ module.exports = {
         },
         warning: {
           DEFAULT: 'hsl(var(--warning))',
-          foreground: 'hsl(var(--warning-foreground))',
+          foreground: 'var(--warning-foreground)',
         },
         error: {
           DEFAULT: 'hsl(var(--error))',

From eade3b7da51629b079dceca4731acc309d42b8b0 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 25 Sep 2025 15:13:24 -0400
Subject: [PATCH 38/98] recorder WIP

- Block changing inputs when not recording
---
 packages/web-view-vite/src/recorder/recorder.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index f1e7d1b..48ab00d 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -51,9 +51,13 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   const { hasPendingInputChange } = trackPendingInputChanges(shadowHost, isRecording)
 
   createEffect(() => {
+    const shadowHtml = shadowHost.shadowRoot?.children[0]
+    if (!shadowHtml) {
+      return
+    }
     if (isRecording()) {
       for (const eventType of ['click', 'submit', 'change'] as const) {
-        makeEventListener(shadowHost.shadowRoot!, eventType, async (e: Event) => {
+        makeEventListener(shadowHtml, eventType, async (e: Event) => {
           let target = e.target
 
           // When clicking, use deepElementFromPoint to get the right element if it's inside a shadow root.
@@ -143,6 +147,12 @@ export function createRecorder(shadowHost: HTMLDivElement) {
         })
       }
     }
+    else {
+      makeEventListener(shadowHtml, 'beforeinput', (e) => {
+        // Block changing inputs when not recording
+        e.preventDefault()
+      })
+    }
   })
 
   return {

From 16fc75629e9e166e71f49831a1f2ca3521c391cb Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 18 Oct 2025 01:02:08 -0400
Subject: [PATCH 39/98] re-add meta tag for forms

---
 packages/extension/src/panel-controller/panel-controller.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index b9408d7..64fe958 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -84,6 +84,7 @@ export async function startPanelController(
         <head>
           <link rel="icon" type="image/svg+xml" href="${icon}" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <meta http-equiv="Content-Security-Policy" content="form-action 'none';">
           <script type="module" crossorigin src="${appJs}"></script>
           <link rel="stylesheet" crossorigin href="${appCss}">
         </head>

From 7022ec300a949a9c5d7e0a5b929b788ac28905e1 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 18 Oct 2025 18:56:32 -0400
Subject: [PATCH 40/98] recorder WIP

fix recorder's debug expressions in jest and bun runners
---
 examples/bun-react/src/Counter.tsx                     | 2 +-
 examples/jest-react/components/Counter.tsx             | 2 +-
 packages/extension/src/recorder/create-ui-test-file.ts | 4 +++-
 packages/extension/src/recorder/generate-code.ts       | 9 ++++++---
 packages/test-setup/src/test-runtime-setup.ts          | 5 +++++
 packages/web-view-vite/src/recorder/recorder-panel.tsx | 3 +++
 6 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/examples/bun-react/src/Counter.tsx b/examples/bun-react/src/Counter.tsx
index c1c3883..0a53cb9 100644
--- a/examples/bun-react/src/Counter.tsx
+++ b/examples/bun-react/src/Counter.tsx
@@ -14,7 +14,7 @@ export function Counter() {
   return (
     <div>
       <h1>Counter</h1>
-      <p>Count: {count}</p>
+      <div>Count: {count}</div>
       <button onClick={increment}>Increment</button>
       <button onClick={decrement}>Decrement</button>
     </div>
diff --git a/examples/jest-react/components/Counter.tsx b/examples/jest-react/components/Counter.tsx
index c1c3883..54f7f73 100644
--- a/examples/jest-react/components/Counter.tsx
+++ b/examples/jest-react/components/Counter.tsx
@@ -14,7 +14,7 @@ export function Counter() {
   return (
     <div>
       <h1>Counter</h1>
-      <p>Count: {count}</p>
+      <p aria-label="count-display">Count: {count}</p>
       <button onClick={increment}>Increment</button>
       <button onClick={decrement}>Decrement</button>
     </div>
diff --git a/packages/extension/src/recorder/create-ui-test-file.ts b/packages/extension/src/recorder/create-ui-test-file.ts
index 2bfd05a..96d16b6 100644
--- a/packages/extension/src/recorder/create-ui-test-file.ts
+++ b/packages/extension/src/recorder/create-ui-test-file.ts
@@ -99,9 +99,11 @@ export async function createUiTestFile() {
 
   const relativePathToSrc = path.relative(currentDir, doc.fileName).replace(/\.[jt]sx?$/, '')
 
+  const fwImport = frameworkInfo.framework === 'bun' ? 'bun:test' : frameworkInfo.framework
+
   // Create basic test content
   const isArrowRender = testingLibrary === '@solidjs/testing-library'
-  const testContent = `import { describe, it } from '${frameworkInfo.framework}'
+  const testContent = `import { describe, it } from '${fwImport}'
 import { render } from '${testingLibrary}'
 import ${isDefaultExport ? exportName : `{ ${exportName} }`} from './${relativePathToSrc}'
 
diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code.ts
index ed280be..b7d2c5e 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code.ts
@@ -87,6 +87,9 @@ export async function generateCode(
     if (testFramework === 'vitest') {
       requiredImports[expect] = testFramework
     }
+    if (testFramework === 'bun') {
+      requiredImports[expect] = 'bun:test'
+    }
   }
   // Otherwise, generate a userEvent call
   else {
@@ -167,9 +170,9 @@ export async function generateCode(
     // which fail when running through the debugger's 'evaluate' request.
     if (from === '@testing-library/user-event') {
       from = path.join(__dirname, 'user-event-13.js')
-      return `const ${importName} = require('${from}').default;`
+      return `const ${importName} = globalThis.require('${from}').default;`
     }
-    return `const { ${importName} } = require('${from}');`
+    return `const { ${importName} } = globalThis.require('${from}');`
   }).join('\n')
 
   // The fireEvent or userEvent statement to run in the debugger.
@@ -179,7 +182,7 @@ export async function generateCode(
 
     // When writing react tests with userEvent v13, wrap in 'act'.
     if (testLibrary === '@testing-library/react' && useUserEvent) {
-      return `require('react').act(() => { ${result} });`
+      return `globalThis.require('react').act(() => { ${result} });`
     }
     return result
   })()
diff --git a/packages/test-setup/src/test-runtime-setup.ts b/packages/test-setup/src/test-runtime-setup.ts
index faf2fd0..5c9fc9f 100644
--- a/packages/test-setup/src/test-runtime-setup.ts
+++ b/packages/test-setup/src/test-runtime-setup.ts
@@ -1,6 +1,7 @@
 // Run this script at the beginning of the test process
 
 import { log, error as logError } from 'node:console'
+import { createRequire } from 'node:module'
 import { initPrimaryDom, serializeDomNode } from 'replicate-dom'
 import difference from 'lodash/difference'
 import shadowCss from './shadow.css.txt'
@@ -178,6 +179,10 @@ if (process.env.TEST_FRAMEWORK === 'jest') {
   module.exports = preTest
 }
 
+// Make 'require' available in debug expressions for the recorder.
+// May be undefined when running in Bun and Jest.
+globalThis.require ??= createRequire(process.env.TEST_FILE_PATH!)
+
 function validateStringArray(value: unknown): string[] | null {
   if (!Array.isArray(value)) {
     logError(`Invalid CSS files: ${JSON.stringify(value)} ( ${String(value)} )`)
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 7c054b2..9e35380 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -140,6 +140,9 @@ export function RecorderPanel() {
               </div>
             )}
           </For>
+          <div>
+            <h2 class="text-lg font-semibold mb-1">Alt+Click to generate 'expect' statement</h2>
+          </div>
         </div>
       </div>
     </div>

From c07443cbf7a541301f417ca769c562d0315fb310 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 18 Oct 2025 20:04:13 -0400
Subject: [PATCH 41/98] recorder WIP

test the code to create new ui test
---
 packages/extension/package.json               |   1 +
 packages/extension/src/extension.ts           |   2 +-
 .../create-ui-test-code.ts                    |  62 ++++++
 .../create-ui-test-file.ts                    |  84 +++++++++
 .../src/recorder/create-ui-test-file.ts       | 123 ------------
 ...te-code.ts => generate-code-from-input.ts} |   2 +-
 .../src/recorder/recorder-codegen-session.ts  |   4 +-
 .../test/create-ui-test-code.test.ts          |  76 ++++++++
 pnpm-lock.yaml                                | 178 ++++++++++++++++++
 9 files changed, 405 insertions(+), 127 deletions(-)
 create mode 100644 packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
 create mode 100644 packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts
 delete mode 100644 packages/extension/src/recorder/create-ui-test-file.ts
 rename packages/extension/src/recorder/{generate-code.ts => generate-code-from-input.ts} (99%)
 create mode 100644 packages/extension/test/create-ui-test-code.test.ts

diff --git a/packages/extension/package.json b/packages/extension/package.json
index 97914fb..f38b2bc 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -39,6 +39,7 @@
     "esbuild": "^0.25.10",
     "execa": "^9.6.0",
     "less": "^4.4.1",
+    "oxc-parser": "^0.95.0",
     "sass": "^1.93.2",
     "stylus": "^0.64.0",
     "vitest": "^3.2.4",
diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index 34ed3e5..a6d6c8f 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -11,7 +11,7 @@ import { detectTestFramework } from './framework-support/detect-test-framework'
 import { detectTestLibrary } from './framework-support/detect-test-library'
 import { myExtensionStorage } from './my-extension-storage'
 import { startPanelController } from './panel-controller/panel-controller'
-import { createUiTestFile } from './recorder/create-ui-test-file'
+import { createUiTestFile } from './recorder/create-new-test-file/create-ui-test-file'
 import { startRecorderCodeGenSession } from './recorder/recorder-codegen-session'
 import { startDebuggerTracker } from './util/debugger-tracker'
 import { extensionSetting } from './util/extension-setting'
diff --git a/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
new file mode 100644
index 0000000..072c799
--- /dev/null
+++ b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
@@ -0,0 +1,62 @@
+import { walk } from 'estree-walker'
+import type { ParseResult } from 'oxc-parser'
+import type { TestFrameworkInfo } from '../../framework-support/detect-test-framework'
+import type { TestingLibrary } from '../../framework-support/detect-test-library'
+
+export function createUITestCode(
+  { program, word, frameworkInfo, testingLibrary, relativePathToSrc }:
+  {
+    program: ParseResult
+    word: string
+    frameworkInfo: TestFrameworkInfo
+    testingLibrary: TestingLibrary
+    relativePathToSrc: string
+  },
+): [Error, null] | [null, { exportName: string, testContent: string }] {
+  const { exportName, isDefaultExport } = (() => {
+    let result: string | null = null
+    let isDefaultExport = false
+    walk(program, {
+      enter(node) {
+        if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') {
+          const nodeName = node?.declaration?.name
+            ?? node?.declaration?.id?.name
+            ?? node?.declaration?.declarations?.[0]?.id?.name
+            ?? node?.declaration?.declarations?.[0]?.name
+          if (nodeName === word) {
+            result = nodeName ?? null
+            isDefaultExport = node.type === 'ExportDefaultDeclaration'
+          }
+        }
+      },
+    })
+
+    return { exportName: result as string | null, isDefaultExport }
+  })()
+
+  if (!exportName) {
+    return [new Error(`No valid export found. Must be an exported capitalized function name. Got ${word}`), null]
+  }
+
+  // React/Solid component convention: starts with capital letter
+  if (!/^[A-Z]/.test(exportName)) {
+    return [new Error(`Selection must be a capitalized identifier, e.g. a React component name. Got "${word}".`), null]
+  }
+
+  const fwImport = frameworkInfo.framework === 'bun' ? 'bun:test' : frameworkInfo.framework
+
+  const isArrowRender = testingLibrary === '@solidjs/testing-library'
+
+  // Create basic test content
+  const testContent = `import { describe, it } from '${fwImport}'
+import { render } from '${testingLibrary}'
+import ${isDefaultExport ? exportName : `{ ${exportName} }`} from './${relativePathToSrc}'
+
+describe('${exportName}', () => {
+  it('basic usage', async () => {
+    render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
+  })
+})
+`
+  return [null, { exportName, testContent }]
+}
diff --git a/packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts b/packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts
new file mode 100644
index 0000000..e68de25
--- /dev/null
+++ b/packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts
@@ -0,0 +1,84 @@
+import { Buffer } from 'node:buffer'
+import type { ParseResult } from 'oxc-parser'
+import * as path from 'pathe'
+import * as vscode from 'vscode'
+import { zFrameworkSetting } from '../../extension'
+import { detectTestFramework } from '../../framework-support/detect-test-framework'
+import { SUPPORTED_TESTING_LIBRARIES, detectTestLibrary } from '../../framework-support/detect-test-library'
+import { extensionSetting } from '../../util/extension-setting'
+import { createUITestCode } from './create-ui-test-code'
+
+export async function createUiTestFile() {
+  const editor = vscode.window.activeTextEditor
+  if (!editor) {
+    return
+  }
+
+  const doc = editor.document
+
+  const selection = editor.selection
+  const wordRange = doc.getWordRangeAtPosition(selection.active, /\w+/)
+  const word = doc.getText(wordRange)
+
+  if (!wordRange || !word) {
+    vscode.window.showInformationMessage(
+      `No valid identifier found. Must be an exported capitalized function name. Got ${word}`,
+    )
+    return
+  }
+
+  const docFileName = doc.fileName
+  const docText = doc.getText()
+
+  const frameworkSetting = (() => {
+    const parsed = zFrameworkSetting
+      .safeParse(extensionSetting('ui-test-visualizer.testFramework'))
+    return parsed.success ? parsed.data : 'autodetect'
+  })()
+
+  const frameworkInfo = await detectTestFramework(editor.document.uri.fsPath, frameworkSetting)
+  const testingLibrary = await detectTestLibrary(editor.document.uri.fsPath)
+
+  if (!testingLibrary) {
+    vscode.window.showInformationMessage(`Could not detect a testing library for ${editor.document.uri.fsPath}. Supported testing libraries are ${SUPPORTED_TESTING_LIBRARIES.join(', ')}.`)
+    return
+  }
+
+  const currentDir = path.dirname(editor.document.uri.fsPath)
+
+  const relativePathToSrc = path.relative(currentDir, doc.fileName).replace(/\.[jt]sx?$/, '')
+
+  // @ts-expect-error import the wasm file directly
+  const { parseSync } = (await import('@oxc-parser/binding-wasm32-wasi')) as typeof import('oxc-parser')
+
+  let program: ParseResult = parseSync(docFileName, docText, {}).program
+  // @ts-expect-error needs to be JSON.parse'd when using the wasm parser
+  program = JSON.parse(program)
+
+  const [error, result] = await createUITestCode({ program, word, frameworkInfo, testingLibrary, relativePathToSrc })
+  if (error) {
+    vscode.window.showInformationMessage(error.message)
+    return
+  }
+  const { exportName, testContent } = result
+
+  const testFileName = `${exportName}.test.tsx`
+  const testFileUri = vscode.Uri.file(path.join(currentDir, testFileName))
+
+  // Check if the test file already exists
+  try {
+    await vscode.workspace.fs.stat(testFileUri)
+    vscode.window.showInformationMessage(`Test file ${testFileName} already exists.`)
+    return
+  }
+  catch {
+    // File does not exist, proceed to create
+  }
+
+  // Write the file
+  await vscode.workspace.fs.writeFile(testFileUri, Buffer.from(testContent, 'utf8'))
+
+  // Open the new test file
+  const newDocument = await vscode.workspace.openTextDocument(testFileUri)
+  await vscode.window.showTextDocument(newDocument)
+}
diff --git a/packages/extension/src/recorder/create-ui-test-file.ts b/packages/extension/src/recorder/create-ui-test-file.ts
deleted file mode 100644
index 96d16b6..0000000
--- a/packages/extension/src/recorder/create-ui-test-file.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Buffer } from 'node:buffer'
-import * as path from 'pathe'
-import * as vscode from 'vscode'
-import { walk } from 'estree-walker'
-import { zFrameworkSetting } from '../extension'
-import { extensionSetting } from '../util/extension-setting'
-import { detectTestFramework } from '../framework-support/detect-test-framework'
-import { SUPPORTED_TESTING_LIBRARIES, detectTestLibrary } from '../framework-support/detect-test-library'
-
-export async function createUiTestFile() {
-  // @ts-expect-error import the wasm file directly
-  const { parseSync } = await import('@oxc-parser/binding-wasm32-wasi')
-
-  const editor = vscode.window.activeTextEditor
-  if (!editor) {
-    return
-  }
-
-  const doc = editor.document
-
-  const selection = editor.selection
-  const wordRange = doc.getWordRangeAtPosition(selection.active, /\w+/)
-  const word = doc.getText(wordRange)
-
-  if (!wordRange || !word) {
-    vscode.window.showInformationMessage(
-      `No valid identifier found. Must be an exported capitalized function name. Got ${word}`,
-    )
-    return
-  }
-
-  const { exportName, isDefaultExport } = (() => {
-    const parsed = parseSync(doc.fileName, doc.getText(), {})
-    const programJson = parsed.program
-    const program = JSON.parse(programJson)
-
-    let result: string | null = null
-    let isDefaultExport = false
-    walk(program, {
-      enter(node) {
-        if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') {
-          const nodeName = node?.declaration?.name
-            ?? node?.declaration?.id?.name
-            ?? node?.declaration?.declarations?.[0]?.id?.name
-            ?? node?.declaration?.declarations?.[0]?.name
-          if (nodeName === word) {
-            result = nodeName ?? null
-            isDefaultExport = node.type === 'ExportDefaultDeclaration'
-          }
-        }
-      },
-    })
-
-    return { exportName: result as string | null, isDefaultExport }
-  })()
-
-  if (!exportName) {
-    vscode.window.showInformationMessage(
-      `No valid export found. Must be an exported capitalized function name. Got ${word}`,
-    )
-    return
-  }
-
-  // React/Solid component convention: starts with capital letter
-  if (!/^[A-Z]/.test(exportName)) {
-    vscode.window.showInformationMessage(
-        `Selection must be a capitalized identifier, e.g. a React component name. Got "${word}".`,
-    )
-    return
-  }
-
-  const frameworkSetting = (() => {
-    const parsed = zFrameworkSetting
-      .safeParse(extensionSetting('ui-test-visualizer.testFramework'))
-    return parsed.success ? parsed.data : 'autodetect'
-  })()
-
-  const frameworkInfo = await detectTestFramework(editor.document.uri.fsPath, frameworkSetting)
-  const testingLibrary = await detectTestLibrary(editor.document.uri.fsPath)
-
-  if (!testingLibrary) {
-    vscode.window.showInformationMessage(`Could not detect a testing library for ${editor.document.uri.fsPath}. Supported testing libraries are ${SUPPORTED_TESTING_LIBRARIES.join(', ')}.`)
-    return
-  }
-
-  const currentDir = path.dirname(editor.document.uri.fsPath)
-  const testFileName = `${exportName}.test.tsx`
-  const testFileUri = vscode.Uri.file(path.join(currentDir, testFileName))
-
-  // Check if the test file already exists
-  try {
-    await vscode.workspace.fs.stat(testFileUri)
-    vscode.window.showInformationMessage(`Test file ${testFileName} already exists.`)
-    return
-  }
-  catch {
-    // File does not exist, proceed to create
-  }
-
-  const relativePathToSrc = path.relative(currentDir, doc.fileName).replace(/\.[jt]sx?$/, '')
-
-  const fwImport = frameworkInfo.framework === 'bun' ? 'bun:test' : frameworkInfo.framework
-
-  // Create basic test content
-  const isArrowRender = testingLibrary === '@solidjs/testing-library'
-  const testContent = `import { describe, it } from '${fwImport}'
-import { render } from '${testingLibrary}'
-import ${isDefaultExport ? exportName : `{ ${exportName} }`} from './${relativePathToSrc}'
-
-describe('${exportName}', () => {
-  it('basic usage', async () => {
-    render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
-  })
-})
-`
-
-  // Write the file
-  await vscode.workspace.fs.writeFile(testFileUri, Buffer.from(testContent, 'utf8'))
-
-  // Open the new test file
-  const newDocument = await vscode.workspace.openTextDocument(testFileUri)
-  await vscode.window.showTextDocument(newDocument)
-}
diff --git a/packages/extension/src/recorder/generate-code.ts b/packages/extension/src/recorder/generate-code-from-input.ts
similarity index 99%
rename from packages/extension/src/recorder/generate-code.ts
rename to packages/extension/src/recorder/generate-code-from-input.ts
index b7d2c5e..95ff374 100644
--- a/packages/extension/src/recorder/generate-code.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -7,7 +7,7 @@ import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebugPauseLocation } from '../util/debugger-tracker'
 import type { SerializedRegexp } from './recorder-codegen-session'
 
-export async function generateCode(
+export async function generateCodeFromInput(
   editor: vscode.TextEditor,
   hasUserEventLib: boolean,
   pausedLocation: DebugPauseLocation,
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index b2b8df1..bc243ca 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -7,7 +7,7 @@ import type { PanelController } from '../panel-controller/panel-controller'
 import type { zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 import { performEdit } from './perform-edit'
-import { generateCode } from './generate-code'
+import { generateCodeFromInput } from './generate-code-from-input'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
@@ -119,7 +119,7 @@ export function startRecorderCodeGenSession(
         return null
       }
 
-      const { code, debugExpression, requiredImports } = await generateCode(
+      const { code, debugExpression, requiredImports } = await generateCodeFromInput(
         editor,
         hasUserEventLib,
         pausedLocation,
diff --git a/packages/extension/test/create-ui-test-code.test.ts b/packages/extension/test/create-ui-test-code.test.ts
new file mode 100644
index 0000000..235a702
--- /dev/null
+++ b/packages/extension/test/create-ui-test-code.test.ts
@@ -0,0 +1,76 @@
+import { parseSync } from 'oxc-parser'
+import { describe, expect, it } from 'vitest'
+import type { SupportedFramework } from '../src/framework-support/detect-test-framework'
+import type { TestingLibrary } from '../src/framework-support/detect-test-library'
+import { createUITestCode } from '../src/recorder/create-new-test-file/create-ui-test-code'
+
+const program = parseSync('my-component.ts', 'export function MyComponent() {}', {}).program
+
+function input(
+  framework: SupportedFramework,
+  testingLibrary: TestingLibrary,
+): Parameters<typeof createUITestCode>[0] {
+  return {
+    program,
+    word: 'MyComponent',
+    frameworkInfo: {
+      framework,
+      configPath: '',
+    },
+    relativePathToSrc: 'my-component',
+    testingLibrary,
+  }
+}
+
+describe('createUITestCode', () => {
+  it('jest+react', () => {
+    const [_, result] = createUITestCode(input('jest', '@testing-library/react'))
+    expect(result).toEqual({
+      exportName: 'MyComponent',
+      testContent: `import { describe, it } from 'jest'
+import { render } from '@testing-library/react'
+import { MyComponent } from './my-component'
+
+describe('MyComponent', () => {
+  it('basic usage', async () => {
+    render(<MyComponent />)
+  })
+})
+`,
+    })
+  })
+
+  it('vitest+solid', () => {
+    const [_, result] = createUITestCode(input('vitest', '@solidjs/testing-library'))
+    expect(result).toEqual({
+      exportName: 'MyComponent',
+      testContent: `import { describe, it } from 'vitest'
+import { render } from '@solidjs/testing-library'
+import { MyComponent } from './my-component'
+
+describe('MyComponent', () => {
+  it('basic usage', async () => {
+    render(() => <MyComponent />)
+  })
+})
+`,
+    })
+  })
+
+  it('bun+react', () => {
+    const [_, result] = createUITestCode(input('bun', '@testing-library/react'))
+    expect(result).toEqual({
+      exportName: 'MyComponent',
+      testContent: `import { describe, it } from 'bun:test'
+import { render } from '@testing-library/react'
+import { MyComponent } from './my-component'
+
+describe('MyComponent', () => {
+  it('basic usage', async () => {
+    render(<MyComponent />)
+  })
+})
+`,
+    })
+  })
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e87815f..689e5ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -436,6 +436,9 @@ importers:
       less:
         specifier: ^4.4.1
         version: 4.4.1
+      oxc-parser:
+        specifier: ^0.95.0
+        version: 0.95.0
       sass:
         specifier: ^1.93.2
         version: 1.93.2
@@ -2466,6 +2469,9 @@ packages:
   '@napi-rs/wasm-runtime@1.0.5':
     resolution: {integrity: sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==}
 
+  '@napi-rs/wasm-runtime@1.0.7':
+    resolution: {integrity: sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==}
+
   '@nevware21/ts-async@0.5.4':
     resolution: {integrity: sha512-IBTyj29GwGlxfzXw2NPnzty+w0Adx61Eze1/lknH/XIVdxtF9UnOpk76tnrHXWa6j84a1RR9hsOcHQPFv9qJjA==}
 
@@ -2622,11 +2628,103 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@oxc-parser/binding-android-arm64@0.95.0':
+    resolution: {integrity: sha512-dZyxhhvJigwWL1wgnLlqyEiSeuqO0WdDH9H+if0dPcBM4fKa5fjVkaUcJT1jBMcBTnkjxMwTXYZy5TK60N0fjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.95.0':
+    resolution: {integrity: sha512-zun9+V33kyCtNec9oUSWwb0qi3fB8pXwum1yGFECPEr55g/CrWju6/Jv4hwwNBeW2tK9Ch/PRstEtYmOLMhHpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.95.0':
+    resolution: {integrity: sha512-9djMQ/t6Ns/UXtziwUe562uVJMbhtuLtCj+Xav+HMVT/rhV9gWO8PQOG7AwDLUBjJanItsrfqrGtqhNxtZ701w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.95.0':
+    resolution: {integrity: sha512-GK6k0PgCVkkeRZtHgcosCYbXIRySpJpuPw/OInfLGFh8f3x9gp2l8Fbcfx+YO+ZOHFBCd2NNedGqw8wMgouxfA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.95.0':
+    resolution: {integrity: sha512-+g/lFITtyHHEk69cunOHuiT5cX+mpUTcbGYNe8suguZ7FqgNwai+PnGv0ctCvtgxBPVfckfUK8c3RvFKo+vi/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.95.0':
+    resolution: {integrity: sha512-SXNasDtPw8ycNV7VEvFxb4LETmykvWKUhHR7K3us818coXYpDj54P8WEx8hJobP/9skuuiFuKHmtYLdjX8wntA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
+    resolution: {integrity: sha512-0LzebARTU0ROfD6pDK4h1pFn+09meErCZ0MA2TaW08G72+GNneEsksPufOuI+9AxVSRa+jKE3fu0wavvhZgSkg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.95.0':
+    resolution: {integrity: sha512-Pvi1lGe/G+mJZ3hUojMP/aAHAzHA25AEtVr8/iuz7UV72t/15NOgJYr9kELMUMNjPqpr3vKUgXTFmTtAxp11Qw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
+    resolution: {integrity: sha512-pUEVHIOVNDfhk4sTlLhn6mrNENhE4/dAwemxIfqpcSyBlYG0xYZND1F3jjR2yWY6DakXZ6VSuDbtiv1LPNlOLw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
+    resolution: {integrity: sha512-5+olaepHTE3J/+w7g0tr3nocvv5BKilAJnzj4L8tWBCLEZbL6olJcGVoldUO+3cgg1SO1xJywP5BuLhT0mDUDw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.95.0':
+    resolution: {integrity: sha512-8huzHlK/N98wrnYKxIcYsK8ZGBWomQchu/Mzi6m+CtbhjWOv9DmK0jQ2fUWImtluQVpTwS0uZT06d3g7XIkJrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-musl@0.95.0':
+    resolution: {integrity: sha512-bWnrLfGDcx/fab0+UQnFbVFbiykof/btImbYf+cI2pU/1Egb2x+OKSmM5Qt0nEUiIpM5fgJmYXxTopybSZOKYA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-parser/binding-wasm32-wasi@0.93.0':
     resolution: {integrity: sha512-EXyCyY4GJO+SNTQJPPmJJwYbPkPOzw2nxSRMmUlwG19WKO7QHzHyL6u+4hXpp5IwgIWvgQgoix2/pB9JF+EA7w==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-parser/binding-wasm32-wasi@0.95.0':
+    resolution: {integrity: sha512-0JLyqkZu1HnQIZ4e5LBGOtzqua1QwFEUOoMSycdoerXqayd4LK2b7WMfAx8eCIf+jGm1Uj6f3R00nlsx8g1faQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.95.0':
+    resolution: {integrity: sha512-RWvaA6s1SYlBj9CxwHfNn0CRlkPdv9fEUAXfZkGQPdP5e1ppIaO2KYE0sUov/zzp9hPTMMsTMHl4dcIbb+pHCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.95.0':
+    resolution: {integrity: sha512-BQpgl7rDjFvCIHudmUR0dCwc4ylBYZl4CPVinlD3NhkMif4WD5dADckoo5ES/KOpFyvwcbKZX+grP63cjHi26g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.95.0':
+    resolution: {integrity: sha512-vACy7vhpMPhjEJhULNxrdR0D943TkA/MigMpJCHmBHvMXxRStRi/dPtTlfQ3uDwWSzRpT8z+7ImjZVf8JWBocQ==}
+
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -6165,6 +6263,10 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
+  oxc-parser@0.95.0:
+    resolution: {integrity: sha512-Te8fE/SmiiKWIrwBwxz5Dod87uYvsbcZ9JAL5ylPg1DevyKgTkxCXnPEaewk1Su2qpfNmry5RHoN+NywWFCG+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
   p-filter@2.1.0:
     resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
     engines: {node: '>=8'}
@@ -9896,6 +9998,13 @@ snapshots:
       '@emnapi/runtime': 1.5.0
       '@tybys/wasm-util': 0.10.1
 
+  '@napi-rs/wasm-runtime@1.0.7':
+    dependencies:
+      '@emnapi/core': 1.5.0
+      '@emnapi/runtime': 1.5.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
   '@nevware21/ts-async@0.5.4':
     dependencies:
       '@nevware21/ts-utils': 0.12.5
@@ -10001,10 +10110,59 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@oxc-parser/binding-android-arm64@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.95.0':
+    optional: true
+
   '@oxc-parser/binding-wasm32-wasi@0.93.0':
     dependencies:
       '@napi-rs/wasm-runtime': 1.0.5
 
+  '@oxc-parser/binding-wasm32-wasi@0.95.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.0.7
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.95.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.95.0':
+    optional: true
+
+  '@oxc-project/types@0.95.0': {}
+
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -13910,6 +14068,26 @@ snapshots:
       - debug
       - supports-color
 
+  oxc-parser@0.95.0:
+    dependencies:
+      '@oxc-project/types': 0.95.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm64': 0.95.0
+      '@oxc-parser/binding-darwin-arm64': 0.95.0
+      '@oxc-parser/binding-darwin-x64': 0.95.0
+      '@oxc-parser/binding-freebsd-x64': 0.95.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.95.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.95.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.95.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.95.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.95.0
+      '@oxc-parser/binding-linux-x64-musl': 0.95.0
+      '@oxc-parser/binding-wasm32-wasi': 0.95.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.95.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.95.0
+
   p-filter@2.1.0:
     dependencies:
       p-map: 2.1.0

From a80ee75ad4fb2c14681f9833786bd549807cb804 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 18 Oct 2025 20:23:37 -0400
Subject: [PATCH 42/98] dep updates

---
 examples/jest-babel-nextjs/package.json      |    6 +-
 examples/jest-nextjs-minimal/package.json    |    6 +-
 examples/jest-nextjs-ts-node/package.json    |    6 +-
 examples/vitest-react-tailwind3/package.json |    2 +-
 examples/vitest-react-tailwind4/package.json |    8 +-
 package.json                                 |   10 +-
 packages/extension/package.json              |   20 +-
 packages/web-view-vite/package.json          |   20 +-
 pnpm-lock.yaml                               | 1779 ++++++++----------
 9 files changed, 869 insertions(+), 988 deletions(-)

diff --git a/examples/jest-babel-nextjs/package.json b/examples/jest-babel-nextjs/package.json
index 68ef533..698ac70 100644
--- a/examples/jest-babel-nextjs/package.json
+++ b/examples/jest-babel-nextjs/package.json
@@ -5,13 +5,13 @@
     "test": "jest"
   },
   "dependencies": {
-    "next": "^15.5.4",
+    "next": "^15.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.28.4",
-    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
@@ -20,6 +20,6 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   }
 }
diff --git a/examples/jest-nextjs-minimal/package.json b/examples/jest-nextjs-minimal/package.json
index 81b7591..1891167 100644
--- a/examples/jest-nextjs-minimal/package.json
+++ b/examples/jest-nextjs-minimal/package.json
@@ -5,18 +5,18 @@
     "test": "jest"
   },
   "dependencies": {
-    "next": "^15.5.4",
+    "next": "^15.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "server-only": "^0.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.2",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   }
 }
diff --git a/examples/jest-nextjs-ts-node/package.json b/examples/jest-nextjs-ts-node/package.json
index f50e020..893cb80 100644
--- a/examples/jest-nextjs-ts-node/package.json
+++ b/examples/jest-nextjs-ts-node/package.json
@@ -5,19 +5,19 @@
     "test": "jest"
   },
   "dependencies": {
-    "next": "^15.5.4",
+    "next": "^15.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "server-only": "^0.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.2",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   }
 }
diff --git a/examples/vitest-react-tailwind3/package.json b/examples/vitest-react-tailwind3/package.json
index b044293..cee6479 100644
--- a/examples/vitest-react-tailwind3/package.json
+++ b/examples/vitest-react-tailwind3/package.json
@@ -13,7 +13,7 @@
     "@vitejs/plugin-react": "^5.0.4",
     "autoprefixer": "^10.4.21",
     "happy-dom": "^14.11.4",
-    "less": "^4.4.1",
+    "less": "^4.4.2",
     "postcss": "^8.5.6",
     "sass": "^1.93.2",
     "stylus": "^0.64.0",
diff --git a/examples/vitest-react-tailwind4/package.json b/examples/vitest-react-tailwind4/package.json
index 5e746cb..d06845f 100644
--- a/examples/vitest-react-tailwind4/package.json
+++ b/examples/vitest-react-tailwind4/package.json
@@ -9,15 +9,15 @@
     "react": "^19.2.0"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.14",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.2",
     "@vitejs/plugin-react": "^5.0.4",
     "happy-dom": "^14.11.4",
     "sass": "^1.93.2",
-    "tailwindcss": "^4.1.13",
-    "vite": "^7.1.7",
-    "vitest": "^4.0.0-beta.8"
+    "tailwindcss": "^4.1.14",
+    "vite": "^7.1.10",
+    "vitest": "^4.0.0-beta.18"
   }
 }
diff --git a/package.json b/package.json
index 17ca2d7..f3ce9cc 100644
--- a/package.json
+++ b/package.json
@@ -100,17 +100,17 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.19.1",
     "@changesets/cli": "^2.29.7",
-    "@playwright/test": "^1.55.1",
+    "@playwright/test": "^1.56.1",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/node": "^24.6.0",
+    "@types/node": "^24.8.1",
     "@vitest/expect": "^3.2.4",
     "@vscode/vsce": "^3.6.2",
-    "eslint": "^9.36.0",
+    "eslint": "^9.38.0",
     "ovsx": "^0.10.6",
     "pathe": "^2.0.3",
     "tsup": "^8.5.0",
     "type-fest": "^5.0.1",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "vitest": "^3.2.4"
   },
   "pnpm": {
@@ -118,5 +118,5 @@
       "jest-config@30.2.0": "patches/jest-config@30.2.0.patch"
     }
   },
-  "packageManager": "pnpm@10.17.1"
+  "packageManager": "pnpm@10.18.3"
 }
diff --git a/packages/extension/package.json b/packages/extension/package.json
index f38b2bc..b80d2e1 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -9,11 +9,11 @@
     "build": "tsup --minify"
   },
   "dependencies": {
-    "@napi-rs/wasm-runtime": "^1.0.5",
-    "@oxc-parser/binding-wasm32-wasi": "^0.93.0",
-    "@tailwindcss/oxide-wasm32-wasi": "^4.1.13",
+    "@napi-rs/wasm-runtime": "^1.0.7",
+    "@oxc-parser/binding-wasm32-wasi": "^0.95.0",
+    "@tailwindcss/oxide-wasm32-wasi": "^4.1.14",
     "@trpc/server": "^11.6.0",
-    "@vscode/extension-telemetry": "^1.0.0",
+    "@vscode/extension-telemetry": "^1.1.0",
     "enhanced-resolve": "^5.18.3",
     "estree-walker": "^3.0.3",
     "find-up": "^8.0.0",
@@ -24,21 +24,21 @@
     "postcss": "^8.5.6",
     "postcss-load-config": "^6.0.1",
     "replicate-dom": "workspace:*",
-    "zod": "^4.1.11"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@testing-library/user-event": "^13.5.0",
     "@types/less": "^3.0.8",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^24.6.0",
+    "@types/node": "^24.8.1",
     "@types/stylus": "^0.48.43",
-    "@types/vscode": "^1.104.0",
+    "@types/vscode": "^1.105.0",
     "@types/ws": "^8.18.1",
     "@vitest/expect": "^3.2.4",
-    "@vscode/codicons": "^0.0.40",
-    "esbuild": "^0.25.10",
+    "@vscode/codicons": "^0.0.41",
+    "esbuild": "^0.25.11",
     "execa": "^9.6.0",
-    "less": "^4.4.1",
+    "less": "^4.4.2",
     "oxc-parser": "^0.95.0",
     "sass": "^1.93.2",
     "stylus": "^0.64.0",
diff --git a/packages/web-view-vite/package.json b/packages/web-view-vite/package.json
index 03d073a..4fe4041 100644
--- a/packages/web-view-vite/package.json
+++ b/packages/web-view-vite/package.json
@@ -9,9 +9,9 @@
   "dependencies": {
     "@kobalte/core": "0.13.11",
     "@kobalte/utils": "^0.9.1",
-    "@shikijs/core": "^3.12.2",
-    "@shikijs/langs": "^3.12.2",
-    "@shikijs/themes": "^3.12.2",
+    "@shikijs/core": "^3.13.0",
+    "@shikijs/langs": "^3.13.0",
+    "@shikijs/themes": "^3.13.0",
     "@solid-primitives/event-listener": "^2.4.3",
     "@solid-primitives/map": "^0.7.2",
     "@solid-primitives/mutation-observer": "^1.2.2",
@@ -25,22 +25,22 @@
     "csstype": "^3.1.3",
     "kagekiri": "^2.0.0",
     "lodash": "^4.17.21",
-    "lucide-solid": "^0.544.0",
+    "lucide-solid": "^0.546.0",
     "replicate-dom": "workspace:*",
-    "shiki": "^3.12.2",
+    "shiki": "^3.13.0",
     "solid-js": "^1.9.9",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "ws": "^8.18.3",
-    "zod": "^4.1.5"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.14",
     "@types/lodash": "^4.17.20",
     "@types/vscode-webview": "^1.57.5",
     "@types/ws": "^8.18.1",
-    "tailwindcss": "^4.1.13",
-    "vite": "^7.1.7",
-    "vite-plugin-solid": "^2.11.8"
+    "tailwindcss": "^4.1.14",
+    "vite": "^7.1.10",
+    "vite-plugin-solid": "^2.11.9"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 689e5ca..f7fb191 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,19 +15,19 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^2.19.1
-        version: 2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)(vitest@3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+        version: 2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       '@changesets/cli':
         specifier: ^2.29.7
-        version: 2.29.7(@types/node@24.6.0)
+        version: 2.29.7(@types/node@24.8.1)
       '@playwright/test':
-        specifier: ^1.55.1
-        version: 1.55.1
+        specifier: ^1.56.1
+        version: 1.56.1
       '@total-typescript/ts-reset':
         specifier: ^0.6.1
         version: 0.6.1
       '@types/node':
-        specifier: ^24.6.0
-        version: 24.6.0
+        specifier: ^24.8.1
+        version: 24.8.1
       '@vitest/expect':
         specifier: ^3.2.4
         version: 3.2.4
@@ -35,8 +35,8 @@ importers:
         specifier: ^3.6.2
         version: 3.6.2
       eslint:
-        specifier: ^9.36.0
-        version: 9.36.0(jiti@2.6.0)
+        specifier: ^9.38.0
+        version: 9.38.0(jiti@2.6.1)
       ovsx:
         specifier: ^0.10.6
         version: 0.10.6
@@ -45,22 +45,22 @@ importers:
         version: 2.0.3
       tsup:
         specifier: ^8.5.0
-        version: 8.5.0(jiti@2.6.0)(postcss@8.5.6)(typescript@5.9.2)(yaml@2.4.2)
+        version: 8.5.0(jiti@2.6.1)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.4.2)
       type-fest:
         specifier: ^5.0.1
         version: 5.0.1
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: ^5.9.3
+        version: 5.9.3
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
   examples/jest-babel-nextjs:
     dependencies:
       next:
-        specifier: ^15.5.4
-        version: 15.5.4(@babel/core@7.28.4)(@playwright/test@1.55.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2)
+        specifier: ^15.5.6
+        version: 15.5.6(@babel/core@7.28.4)(@playwright/test@1.56.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2)
       react:
         specifier: ^19.2.0
         version: 19.2.0
@@ -72,8 +72,8 @@ importers:
         specifier: ^7.28.4
         version: 7.28.4
       '@testing-library/jest-dom':
-        specifier: ^6.9.0
-        version: 6.9.0
+        specifier: ^6.9.1
+        version: 6.9.1
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -94,13 +94,13 @@ importers:
         version: 3.0.0
       jest:
         specifier: ^30.2.0
-        version: 30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-environment-jsdom:
         specifier: ^30.2.0
         version: 30.2.0
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: ^5.9.3
+        version: 5.9.3
 
   examples/jest-monorepo:
     dependencies:
@@ -119,7 +119,7 @@ importers:
         version: 19.2.2
       jest:
         specifier: ^30.2.0
-        version: 30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-environment-jsdom:
         specifier: ^30.2.0
         version: 30.2.0
@@ -127,8 +127,8 @@ importers:
   examples/jest-nextjs-minimal:
     dependencies:
       next:
-        specifier: ^15.5.4
-        version: 15.5.4(@babel/core@7.28.4)(@playwright/test@1.55.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2)
+        specifier: ^15.5.6
+        version: 15.5.6(@babel/core@7.28.4)(@playwright/test@1.56.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2)
       react:
         specifier: ^19.2.0
         version: 19.2.0
@@ -140,8 +140,8 @@ importers:
         version: 0.0.1
     devDependencies:
       '@testing-library/jest-dom':
-        specifier: ^6.9.0
-        version: 6.9.0
+        specifier: ^6.9.1
+        version: 6.9.1
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -153,19 +153,19 @@ importers:
         version: 19.2.2
       jest:
         specifier: ^30.2.0
-        version: 30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-environment-jsdom:
         specifier: ^30.2.0
         version: 30.2.0
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: ^5.9.3
+        version: 5.9.3
 
   examples/jest-nextjs-ts-node:
     dependencies:
       next:
-        specifier: ^15.5.4
-        version: 15.5.4(@babel/core@7.28.4)(@playwright/test@1.55.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2)
+        specifier: ^15.5.6
+        version: 15.5.6(@babel/core@7.28.4)(@playwright/test@1.56.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2)
       react:
         specifier: ^19.2.0
         version: 19.2.0
@@ -177,8 +177,8 @@ importers:
         version: 0.0.1
     devDependencies:
       '@testing-library/jest-dom':
-        specifier: ^6.9.0
-        version: 6.9.0
+        specifier: ^6.9.1
+        version: 6.9.1
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -190,16 +190,16 @@ importers:
         version: 19.2.2
       jest:
         specifier: ^30.2.0
-        version: 30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-environment-jsdom:
         specifier: ^30.2.0
         version: 30.2.0
       ts-node:
         specifier: ^10.9.2
-        version: 10.9.2(@types/node@24.6.0)(typescript@5.9.2)
+        version: 10.9.2(@types/node@24.8.1)(typescript@5.9.3)
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: ^5.9.3
+        version: 5.9.3
 
   examples/jest-react:
     dependencies:
@@ -227,7 +227,7 @@ importers:
         version: 19.2.2
       jest:
         specifier: ^30.2.0
-        version: 30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-canvas-mock:
         specifier: ^2.5.2
         version: 2.5.2
@@ -261,7 +261,7 @@ importers:
         version: 19.2.2
       jest:
         specifier: ^30.2.0
-        version: 30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-canvas-mock:
         specifier: ^2.5.2
         version: 2.5.2
@@ -283,7 +283,7 @@ importers:
         version: 19.2.2
       '@vitejs/plugin-react':
         specifier: ^5.0.4
-        version: 5.0.4(vite@5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))
+        version: 5.0.4(vite@5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -291,8 +291,8 @@ importers:
         specifier: ^14.11.4
         version: 14.12.3
       less:
-        specifier: ^4.4.1
-        version: 4.4.1
+        specifier: ^4.4.2
+        version: 4.4.2
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
@@ -304,13 +304,13 @@ importers:
         version: 0.64.0
       tailwindcss:
         specifier: 3.4.17
-        version: 3.4.17(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 3.4.17(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       vite:
         specifier: ^5.4.19
-        version: 5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
+        version: 5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
       vitest:
         specifier: 2.1.8
-        version: 2.1.8(@types/node@24.6.0)(happy-dom@14.12.3)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
+        version: 2.1.8(@types/node@24.8.1)(happy-dom@14.12.3)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
 
   examples/vitest-react-tailwind4:
     dependencies:
@@ -319,8 +319,8 @@ importers:
         version: 19.2.0
     devDependencies:
       '@tailwindcss/vite':
-        specifier: ^4.1.13
-        version: 4.1.13(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+        specifier: ^4.1.14
+        version: 4.1.14(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -332,7 +332,7 @@ importers:
         version: 19.2.2
       '@vitejs/plugin-react':
         specifier: ^5.0.4
-        version: 5.0.4(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+        version: 5.0.4(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       happy-dom:
         specifier: ^14.11.4
         version: 14.12.3
@@ -340,32 +340,32 @@ importers:
         specifier: ^1.93.2
         version: 1.93.2
       tailwindcss:
-        specifier: ^4.1.13
-        version: 4.1.13
+        specifier: ^4.1.14
+        version: 4.1.14
       vite:
-        specifier: ^7.1.7
-        version: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        specifier: ^7.1.10
+        version: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
       vitest:
-        specifier: ^4.0.0-beta.8
-        version: 4.0.0-beta.8(@types/node@24.6.0)(happy-dom@14.12.3)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        specifier: ^4.0.0-beta.18
+        version: 4.0.0-beta.18(@types/node@24.8.1)(happy-dom@14.12.3)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
   packages/extension:
     dependencies:
       '@napi-rs/wasm-runtime':
-        specifier: ^1.0.5
-        version: 1.0.5
+        specifier: ^1.0.7
+        version: 1.0.7
       '@oxc-parser/binding-wasm32-wasi':
-        specifier: ^0.93.0
-        version: 0.93.0
+        specifier: ^0.95.0
+        version: 0.95.0
       '@tailwindcss/oxide-wasm32-wasi':
-        specifier: ^4.1.13
-        version: 4.1.13
+        specifier: ^4.1.14
+        version: 4.1.14
       '@trpc/server':
         specifier: ^11.6.0
-        version: 11.6.0(typescript@5.9.2)
+        version: 11.6.0(typescript@5.9.3)
       '@vscode/extension-telemetry':
-        specifier: ^1.0.0
-        version: 1.0.0(tslib@2.8.1)
+        specifier: ^1.1.0
+        version: 1.1.0(tslib@2.8.1)
       enhanced-resolve:
         specifier: ^5.18.3
         version: 5.18.3
@@ -380,7 +380,7 @@ importers:
         version: 7.1.0
       jest-config:
         specifier: 30.2.0
-        version: 30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+        version: 30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -392,13 +392,13 @@ importers:
         version: 8.5.6
       postcss-load-config:
         specifier: ^6.0.1
-        version: 6.0.1(jiti@2.6.0)(postcss@8.5.6)(yaml@2.4.2)
+        version: 6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.4.2)
       replicate-dom:
         specifier: workspace:*
         version: link:../replicate-dom
       zod:
-        specifier: ^4.1.11
-        version: 4.1.11
+        specifier: ^4.1.12
+        version: 4.1.12
     devDependencies:
       '@testing-library/user-event':
         specifier: ^13.5.0
@@ -410,14 +410,14 @@ importers:
         specifier: ^4.17.20
         version: 4.17.20
       '@types/node':
-        specifier: ^24.6.0
-        version: 24.6.0
+        specifier: ^24.8.1
+        version: 24.8.1
       '@types/stylus':
         specifier: ^0.48.43
         version: 0.48.43
       '@types/vscode':
-        specifier: ^1.104.0
-        version: 1.104.0
+        specifier: ^1.105.0
+        version: 1.105.0
       '@types/ws':
         specifier: ^8.18.1
         version: 8.18.1
@@ -425,17 +425,17 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4
       '@vscode/codicons':
-        specifier: ^0.0.40
-        version: 0.0.40
+        specifier: ^0.0.41
+        version: 0.0.41
       esbuild:
-        specifier: ^0.25.10
-        version: 0.25.10
+        specifier: ^0.25.11
+        version: 0.25.11
       execa:
         specifier: ^9.6.0
         version: 9.6.0
       less:
-        specifier: ^4.4.1
-        version: 4.4.1
+        specifier: ^4.4.2
+        version: 4.4.2
       oxc-parser:
         specifier: ^0.95.0
         version: 0.95.0
@@ -447,7 +447,7 @@ importers:
         version: 0.64.0
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
       ws:
         specifier: ^8.18.3
         version: 8.18.3
@@ -475,7 +475,7 @@ importers:
         version: 26.1.0
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.6.0)(happy-dom@14.6.2)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        version: 3.2.4(@types/node@24.8.1)(happy-dom@14.6.2)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
   packages/test-setup:
     dependencies:
@@ -508,14 +508,14 @@ importers:
         specifier: ^0.9.1
         version: 0.9.1(solid-js@1.9.9)
       '@shikijs/core':
-        specifier: ^3.12.2
-        version: 3.12.2
+        specifier: ^3.13.0
+        version: 3.13.0
       '@shikijs/langs':
-        specifier: ^3.12.2
-        version: 3.12.2
+        specifier: ^3.13.0
+        version: 3.13.0
       '@shikijs/themes':
-        specifier: ^3.12.2
-        version: 3.12.2
+        specifier: ^3.13.0
+        version: 3.13.0
       '@solid-primitives/event-listener':
         specifier: ^2.4.3
         version: 2.4.3(solid-js@1.9.9)
@@ -533,10 +533,10 @@ importers:
         version: 14.6.1(@testing-library/dom@10.4.1)
       '@trpc/client':
         specifier: ^11.6.0
-        version: 11.6.0(@trpc/server@11.6.0(typescript@5.9.2))(typescript@5.9.2)
+        version: 11.6.0(@trpc/server@11.6.0(typescript@5.9.3))(typescript@5.9.3)
       '@trpc/server':
         specifier: ^11.6.0
-        version: 11.6.0(typescript@5.9.2)
+        version: 11.6.0(typescript@5.9.3)
       '@vscode/webview-ui-toolkit':
         specifier: ^1.4.0
         version: 1.4.0(react@19.2.0)
@@ -556,14 +556,14 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       lucide-solid:
-        specifier: ^0.544.0
-        version: 0.544.0(solid-js@1.9.9)
+        specifier: ^0.546.0
+        version: 0.546.0(solid-js@1.9.9)
       replicate-dom:
         specifier: workspace:*
         version: link:../replicate-dom
       shiki:
-        specifier: ^3.12.2
-        version: 3.12.2
+        specifier: ^3.13.0
+        version: 3.13.0
       solid-js:
         specifier: ^1.9.9
         version: 1.9.9
@@ -572,17 +572,17 @@ importers:
         version: 3.3.1
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.1.13)
+        version: 1.0.7(tailwindcss@4.1.14)
       ws:
         specifier: ^8.18.3
         version: 8.18.3
       zod:
-        specifier: ^4.1.5
-        version: 4.1.11
+        specifier: ^4.1.12
+        version: 4.1.12
     devDependencies:
       '@tailwindcss/vite':
-        specifier: ^4.1.13
-        version: 4.1.13(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+        specifier: ^4.1.14
+        version: 4.1.14(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       '@types/lodash':
         specifier: ^4.17.20
         version: 4.17.20
@@ -593,14 +593,14 @@ importers:
         specifier: ^8.18.1
         version: 8.18.1
       tailwindcss:
-        specifier: ^4.1.13
-        version: 4.1.13
+        specifier: ^4.1.14
+        version: 4.1.14
       vite:
-        specifier: ^7.1.7
-        version: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        specifier: ^7.1.10
+        version: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
       vite-plugin-solid:
-        specifier: ^2.11.8
-        version: 2.11.8(@testing-library/jest-dom@6.9.0)(solid-js@1.9.9)(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+        specifier: ^2.11.9
+        version: 2.11.9(@testing-library/jest-dom@6.9.1)(solid-js@1.9.9)(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
 
 packages:
 
@@ -614,10 +614,6 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
   '@antfu/eslint-config@2.19.1':
     resolution: {integrity: sha512-gtiyWxoBnk39Vgf23xJiSQrq3esEGYesv7Q4IZXEJJaYSpyiJWHMYxlC6dFr4V9tAczDa7bZjR9E6XWEiU7VEA==}
     hasBin: true
@@ -731,18 +727,10 @@ packages:
     resolution: {integrity: sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.28.0':
-    resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/core@7.28.4':
     resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.28.0':
-    resolution: {integrity: sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/generator@7.28.3':
     resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
     engines: {node: '>=6.9.0'}
@@ -850,10 +838,6 @@ packages:
     resolution: {integrity: sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.27.6':
-    resolution: {integrity: sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helpers@7.28.4':
     resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
     engines: {node: '>=6.9.0'}
@@ -863,11 +847,6 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@7.28.0':
-    resolution: {integrity: sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.28.3':
     resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
     engines: {node: '>=6.0.0'}
@@ -1404,10 +1383,6 @@ packages:
     resolution: {integrity: sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.28.0':
-    resolution: {integrity: sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.28.3':
     resolution: {integrity: sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==}
     engines: {node: '>=6.9.0'}
@@ -1420,10 +1395,6 @@ packages:
     resolution: {integrity: sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.28.0':
-    resolution: {integrity: sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.28.2':
     resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
     engines: {node: '>=6.9.0'}
@@ -1554,8 +1525,8 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.25.10':
-    resolution: {integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==}
+  '@esbuild/aix-ppc64@0.25.11':
+    resolution: {integrity: sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
@@ -1572,8 +1543,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.25.10':
-    resolution: {integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==}
+  '@esbuild/android-arm64@0.25.11':
+    resolution: {integrity: sha512-9slpyFBc4FPPz48+f6jyiXOx/Y4v34TUeDDXJpZqAWQn/08lKGeD8aDp9TMn9jDz2CiEuHwfhRmGBvpnd/PWIQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
@@ -1590,8 +1561,8 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.25.10':
-    resolution: {integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==}
+  '@esbuild/android-arm@0.25.11':
+    resolution: {integrity: sha512-uoa7dU+Dt3HYsethkJ1k6Z9YdcHjTrSb5NUy66ZfZaSV8hEYGD5ZHbEMXnqLFlbBflLsl89Zke7CAdDJ4JI+Gg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
@@ -1608,8 +1579,8 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.25.10':
-    resolution: {integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==}
+  '@esbuild/android-x64@0.25.11':
+    resolution: {integrity: sha512-Sgiab4xBjPU1QoPEIqS3Xx+R2lezu0LKIEcYe6pftr56PqPygbB7+szVnzoShbx64MUupqoE0KyRlN7gezbl8g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
@@ -1626,8 +1597,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.25.10':
-    resolution: {integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==}
+  '@esbuild/darwin-arm64@0.25.11':
+    resolution: {integrity: sha512-VekY0PBCukppoQrycFxUqkCojnTQhdec0vevUL/EDOCnXd9LKWqD/bHwMPzigIJXPhC59Vd1WFIL57SKs2mg4w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
@@ -1644,8 +1615,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.10':
-    resolution: {integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==}
+  '@esbuild/darwin-x64@0.25.11':
+    resolution: {integrity: sha512-+hfp3yfBalNEpTGp9loYgbknjR695HkqtY3d3/JjSRUyPg/xd6q+mQqIb5qdywnDxRZykIHs3axEqU6l1+oWEQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
@@ -1662,8 +1633,8 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.25.10':
-    resolution: {integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==}
+  '@esbuild/freebsd-arm64@0.25.11':
+    resolution: {integrity: sha512-CmKjrnayyTJF2eVuO//uSjl/K3KsMIeYeyN7FyDBjsR3lnSJHaXlVoAK8DZa7lXWChbuOk7NjAc7ygAwrnPBhA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
@@ -1680,8 +1651,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.10':
-    resolution: {integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==}
+  '@esbuild/freebsd-x64@0.25.11':
+    resolution: {integrity: sha512-Dyq+5oscTJvMaYPvW3x3FLpi2+gSZTCE/1ffdwuM6G1ARang/mb3jvjxs0mw6n3Lsw84ocfo9CrNMqc5lTfGOw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
@@ -1698,8 +1669,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.25.10':
-    resolution: {integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==}
+  '@esbuild/linux-arm64@0.25.11':
+    resolution: {integrity: sha512-Qr8AzcplUhGvdyUF08A1kHU3Vr2O88xxP0Tm8GcdVOUm25XYcMPp2YqSVHbLuXzYQMf9Bh/iKx7YPqECs6ffLA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
@@ -1716,8 +1687,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.10':
-    resolution: {integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==}
+  '@esbuild/linux-arm@0.25.11':
+    resolution: {integrity: sha512-TBMv6B4kCfrGJ8cUPo7vd6NECZH/8hPpBHHlYI3qzoYFvWu2AdTvZNuU/7hsbKWqu/COU7NIK12dHAAqBLLXgw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
@@ -1734,8 +1705,8 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.10':
-    resolution: {integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==}
+  '@esbuild/linux-ia32@0.25.11':
+    resolution: {integrity: sha512-TmnJg8BMGPehs5JKrCLqyWTVAvielc615jbkOirATQvWWB1NMXY77oLMzsUjRLa0+ngecEmDGqt5jiDC6bfvOw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
@@ -1752,8 +1723,8 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.10':
-    resolution: {integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==}
+  '@esbuild/linux-loong64@0.25.11':
+    resolution: {integrity: sha512-DIGXL2+gvDaXlaq8xruNXUJdT5tF+SBbJQKbWy/0J7OhU8gOHOzKmGIlfTTl6nHaCOoipxQbuJi7O++ldrxgMw==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
@@ -1770,8 +1741,8 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.10':
-    resolution: {integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==}
+  '@esbuild/linux-mips64el@0.25.11':
+    resolution: {integrity: sha512-Osx1nALUJu4pU43o9OyjSCXokFkFbyzjXb6VhGIJZQ5JZi8ylCQ9/LFagolPsHtgw6himDSyb5ETSfmp4rpiKQ==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
@@ -1788,8 +1759,8 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.10':
-    resolution: {integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==}
+  '@esbuild/linux-ppc64@0.25.11':
+    resolution: {integrity: sha512-nbLFgsQQEsBa8XSgSTSlrnBSrpoWh7ioFDUmwo158gIm5NNP+17IYmNWzaIzWmgCxq56vfr34xGkOcZ7jX6CPw==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
@@ -1806,8 +1777,8 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.10':
-    resolution: {integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==}
+  '@esbuild/linux-riscv64@0.25.11':
+    resolution: {integrity: sha512-HfyAmqZi9uBAbgKYP1yGuI7tSREXwIb438q0nqvlpxAOs3XnZ8RsisRfmVsgV486NdjD7Mw2UrFSw51lzUk1ww==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
@@ -1824,8 +1795,8 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.10':
-    resolution: {integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==}
+  '@esbuild/linux-s390x@0.25.11':
+    resolution: {integrity: sha512-HjLqVgSSYnVXRisyfmzsH6mXqyvj0SA7pG5g+9W7ESgwA70AXYNpfKBqh1KbTxmQVaYxpzA/SvlB9oclGPbApw==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
@@ -1842,8 +1813,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.10':
-    resolution: {integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==}
+  '@esbuild/linux-x64@0.25.11':
+    resolution: {integrity: sha512-HSFAT4+WYjIhrHxKBwGmOOSpphjYkcswF449j6EjsjbinTZbp8PJtjsVK1XFJStdzXdy/jaddAep2FGY+wyFAQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
@@ -1854,8 +1825,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.25.10':
-    resolution: {integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==}
+  '@esbuild/netbsd-arm64@0.25.11':
+    resolution: {integrity: sha512-hr9Oxj1Fa4r04dNpWr3P8QKVVsjQhqrMSUzZzf+LZcYjZNqhA3IAfPQdEh1FLVUJSiu6sgAwp3OmwBfbFgG2Xg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
@@ -1872,8 +1843,8 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.10':
-    resolution: {integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==}
+  '@esbuild/netbsd-x64@0.25.11':
+    resolution: {integrity: sha512-u7tKA+qbzBydyj0vgpu+5h5AeudxOAGncb8N6C9Kh1N4n7wU1Xw1JDApsRjpShRpXRQlJLb9wY28ELpwdPcZ7A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
@@ -1884,8 +1855,8 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.25.10':
-    resolution: {integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==}
+  '@esbuild/openbsd-arm64@0.25.11':
+    resolution: {integrity: sha512-Qq6YHhayieor3DxFOoYM1q0q1uMFYb7cSpLD2qzDSvK1NAvqFi8Xgivv0cFC6J+hWVw2teCYltyy9/m/14ryHg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
@@ -1902,8 +1873,8 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.10':
-    resolution: {integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==}
+  '@esbuild/openbsd-x64@0.25.11':
+    resolution: {integrity: sha512-CN+7c++kkbrckTOz5hrehxWN7uIhFFlmS/hqziSFVWpAzpWrQoAG4chH+nN3Be+Kzv/uuo7zhX716x3Sn2Jduw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
@@ -1914,8 +1885,8 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.25.10':
-    resolution: {integrity: sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==}
+  '@esbuild/openharmony-arm64@0.25.11':
+    resolution: {integrity: sha512-rOREuNIQgaiR+9QuNkbkxubbp8MSO9rONmwP5nKncnWJ9v5jQ4JxFnLu4zDSRPf3x4u+2VN4pM4RdyIzDty/wQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
@@ -1932,8 +1903,8 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.25.10':
-    resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
+  '@esbuild/sunos-x64@0.25.11':
+    resolution: {integrity: sha512-nq2xdYaWxyg9DcIyXkZhcYulC6pQ2FuCgem3LI92IwMgIZ69KHeY8T4Y88pcwoLIjbed8n36CyKoYRDygNSGhA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
@@ -1950,8 +1921,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.25.10':
-    resolution: {integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==}
+  '@esbuild/win32-arm64@0.25.11':
+    resolution: {integrity: sha512-3XxECOWJq1qMZ3MN8srCJ/QfoLpL+VaxD/WfNRm1O3B4+AZ/BnLVgFbUV3eiRYDMXetciH16dwPbbHqwe1uU0Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
@@ -1968,8 +1939,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.10':
-    resolution: {integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==}
+  '@esbuild/win32-ia32@0.25.11':
+    resolution: {integrity: sha512-3ukss6gb9XZ8TlRyJlgLn17ecsK4NSQTmdIXRASVsiS2sQ6zPPZklNJT5GR5tE/MUarymmy8kCEf5xPCNCqVOA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
@@ -1986,8 +1957,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.10':
-    resolution: {integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==}
+  '@esbuild/win32-x64@0.25.11':
+    resolution: {integrity: sha512-D7Hpz6A2L4hzsRpPaCYkQnGOotdUpDzSGRIv9I+1ITdHROSFUWW95ZPZWQmGka1Fg7W3zFJowyn9WGwMJ0+KPA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
@@ -2018,16 +1989,16 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/config-array@0.21.0':
-    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.3.1':
-    resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
+  '@eslint/config-helpers@0.4.1':
+    resolution: {integrity: sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.15.2':
-    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
+  '@eslint/core@0.16.0':
+    resolution: {integrity: sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@3.1.0':
@@ -2038,16 +2009,16 @@ packages:
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.36.0':
-    resolution: {integrity: sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==}
+  '@eslint/js@9.38.0':
+    resolution: {integrity: sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/object-schema@2.1.6':
-    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.3.5':
-    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+  '@eslint/plugin-kit@0.4.0':
+    resolution: {integrity: sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.7.3':
@@ -2348,9 +2319,6 @@ packages:
     resolution: {integrity: sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jridgewell/gen-mapping@0.3.12':
-    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -2358,10 +2326,6 @@ packages:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/gen-mapping@0.3.8':
-    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/remapping@2.3.5':
     resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
 
@@ -2417,32 +2381,32 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@microsoft/1ds-core-js@4.3.8':
-    resolution: {integrity: sha512-5y7pmcqoYmh+461xyUog4aQAZ2ZIoYlAg7VkHU0G+dpOwAmwN3WECnsO/8RNagNiVwsFOBeN5e2OxKm3vruJWw==}
+  '@microsoft/1ds-core-js@4.3.10':
+    resolution: {integrity: sha512-5fSZmkGwWkH+mrIA5M1GYPZdPM+SjXwCCl2Am7VhFoVwOBJNhRnwvIpAdzw6sFjiebN/rz+/YH0NdxztGZSa9Q==}
 
-  '@microsoft/1ds-post-js@4.3.8':
-    resolution: {integrity: sha512-9Jq6PqEs/wImx246xhOU6WyrhBVMLZPp1MGCKKGexxOQKhHSbK6RzOguSYKT15nfO7JVDde3+nCGc6EPxAagaA==}
+  '@microsoft/1ds-post-js@4.3.10':
+    resolution: {integrity: sha512-VSLjc9cT+Y+eTiSfYltJHJCejn8oYr0E6Pq2BMhOEO7F6IyLGYIxzKKvo78ze9x+iHX7KPTATcZ+PFgjGXuNqg==}
 
-  '@microsoft/applicationinsights-channel-js@3.3.8':
-    resolution: {integrity: sha512-uj60YhHTxcHLjLUHRPe2Y9VVdDOcam4/pdBBCbJ6/hkBWh6KZznnM3vb6JRbBVwD69Iq6tdGNWJRSCWNpZhLaA==}
+  '@microsoft/applicationinsights-channel-js@3.3.10':
+    resolution: {integrity: sha512-iolFLz1ocWAzIQqHIEjjov3gNTPkgFQ4ArHnBcJEYoffOGWlJt6copaevS5YPI5rHzmbySsengZ8cLJJBBrXzQ==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
-  '@microsoft/applicationinsights-common@3.3.8':
-    resolution: {integrity: sha512-yfcU3g05Z36S3r4SDtV+LGkoubT3px6Yt4fwINIGDixbTJB6VZXQxLwkTAzWxKwxuvBX2L8PP9O1LY4D7gGrrA==}
+  '@microsoft/applicationinsights-common@3.3.10':
+    resolution: {integrity: sha512-RVIenPIvNgZCbjJdALvLM4rNHgAFuHI7faFzHCgnI6S2WCUNGHeXlQTs9EUUrL+n2TPp9/cd0KKMILU5VVyYiA==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
-  '@microsoft/applicationinsights-core-js@3.3.8':
-    resolution: {integrity: sha512-k1uQCRSbV0aUF4DxgTFAbbk1IlsihLoldgQCMIVwHdnS3X80NjtSDWQPy0n+Hbw1XNlpky9p8jxNDJlZ9PoFDg==}
+  '@microsoft/applicationinsights-core-js@3.3.10':
+    resolution: {integrity: sha512-5yKeyassZTq2l+SAO4npu6LPnbS++UD+M+Ghjm9uRzoBwD8tumFx0/F8AkSVqbniSREd+ztH/2q2foewa2RZyg==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
   '@microsoft/applicationinsights-shims@3.0.1':
     resolution: {integrity: sha512-DKwboF47H1nb33rSUfjqI6ryX29v+2QWcTrRvcQDA32AZr5Ilkr7whOOSsD1aBzwqX0RJEIP1Z81jfE3NBm/Lg==}
 
-  '@microsoft/applicationinsights-web-basic@3.3.8':
-    resolution: {integrity: sha512-etHqbg6zwDxObY7GUF1CZZtoNIzzfjzvJyOEvixwnio4ehHyxZLQXBTavoUL424/A2MgWTBQjj6AV2ezayoz4A==}
+  '@microsoft/applicationinsights-web-basic@3.3.10':
+    resolution: {integrity: sha512-AZib5DAT3NU0VT0nLWEwXrnoMDDgZ/5S4dso01CNU5ELNxLdg+1fvchstlVdMy4FrAnxzs8Wf/GIQNFYOVgpAw==}
     peerDependencies:
       tslib: '>= 1.0.0'
 
@@ -2466,9 +2430,6 @@ packages:
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
-  '@napi-rs/wasm-runtime@1.0.5':
-    resolution: {integrity: sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==}
-
   '@napi-rs/wasm-runtime@1.0.7':
     resolution: {integrity: sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==}
 
@@ -2478,53 +2439,53 @@ packages:
   '@nevware21/ts-utils@0.12.5':
     resolution: {integrity: sha512-JPQZWPKQJjj7kAftdEZL0XDFfbMgXCGiUAZe0d7EhLC3QlXTlZdSckGqqRIQ2QNl0VTEZyZUvRBw6Ednw089Fw==}
 
-  '@next/env@15.5.4':
-    resolution: {integrity: sha512-27SQhYp5QryzIT5uO8hq99C69eLQ7qkzkDPsk3N+GuS2XgOgoYEeOav7Pf8Tn4drECOVDsDg8oj+/DVy8qQL2A==}
+  '@next/env@15.5.6':
+    resolution: {integrity: sha512-3qBGRW+sCGzgbpc5TS1a0p7eNxnOarGVQhZxfvTdnV0gFI61lX7QNtQ4V1TSREctXzYn5NetbUsLvyqwLFJM6Q==}
 
-  '@next/swc-darwin-arm64@15.5.4':
-    resolution: {integrity: sha512-nopqz+Ov6uvorej8ndRX6HlxCYWCO3AHLfKK2TYvxoSB2scETOcfm/HSS3piPqc3A+MUgyHoqE6je4wnkjfrOA==}
+  '@next/swc-darwin-arm64@15.5.6':
+    resolution: {integrity: sha512-ES3nRz7N+L5Umz4KoGfZ4XX6gwHplwPhioVRc25+QNsDa7RtUF/z8wJcbuQ2Tffm5RZwuN2A063eapoJ1u4nPg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@15.5.4':
-    resolution: {integrity: sha512-QOTCFq8b09ghfjRJKfb68kU9k2K+2wsC4A67psOiMn849K9ZXgCSRQr0oVHfmKnoqCbEmQWG1f2h1T2vtJJ9mA==}
+  '@next/swc-darwin-x64@15.5.6':
+    resolution: {integrity: sha512-JIGcytAyk9LQp2/nuVZPAtj8uaJ/zZhsKOASTjxDug0SPU9LAM3wy6nPU735M1OqacR4U20LHVF5v5Wnl9ptTA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@15.5.4':
-    resolution: {integrity: sha512-eRD5zkts6jS3VfE/J0Kt1VxdFqTnMc3QgO5lFE5GKN3KDI/uUpSyK3CjQHmfEkYR4wCOl0R0XrsjpxfWEA++XA==}
+  '@next/swc-linux-arm64-gnu@15.5.6':
+    resolution: {integrity: sha512-qvz4SVKQ0P3/Im9zcS2RmfFL/UCQnsJKJwQSkissbngnB/12c6bZTCB0gHTexz1s6d/mD0+egPKXAIRFVS7hQg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@15.5.4':
-    resolution: {integrity: sha512-TOK7iTxmXFc45UrtKqWdZ1shfxuL4tnVAOuuJK4S88rX3oyVV4ZkLjtMT85wQkfBrOOvU55aLty+MV8xmcJR8A==}
+  '@next/swc-linux-arm64-musl@15.5.6':
+    resolution: {integrity: sha512-FsbGVw3SJz1hZlvnWD+T6GFgV9/NYDeLTNQB2MXoPN5u9VA9OEDy6fJEfePfsUKAhJufFbZLgp0cPxMuV6SV0w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@15.5.4':
-    resolution: {integrity: sha512-7HKolaj+481FSW/5lL0BcTkA4Ueam9SPYWyN/ib/WGAFZf0DGAN8frNpNZYFHtM4ZstrHZS3LY3vrwlIQfsiMA==}
+  '@next/swc-linux-x64-gnu@15.5.6':
+    resolution: {integrity: sha512-3QnHGFWlnvAgyxFxt2Ny8PTpXtQD7kVEeaFat5oPAHHI192WKYB+VIKZijtHLGdBBvc16tiAkPTDmQNOQ0dyrA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@15.5.4':
-    resolution: {integrity: sha512-nlQQ6nfgN0nCO/KuyEUwwOdwQIGjOs4WNMjEUtpIQJPR2NUfmGpW2wkJln1d4nJ7oUzd1g4GivH5GoEPBgfsdw==}
+  '@next/swc-linux-x64-musl@15.5.6':
+    resolution: {integrity: sha512-OsGX148sL+TqMK9YFaPFPoIaJKbFJJxFzkXZljIgA9hjMjdruKht6xDCEv1HLtlLNfkx3c5w2GLKhj7veBQizQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@15.5.4':
-    resolution: {integrity: sha512-PcR2bN7FlM32XM6eumklmyWLLbu2vs+D7nJX8OAIoWy69Kef8mfiN4e8TUv2KohprwifdpFKPzIP1njuCjD0YA==}
+  '@next/swc-win32-arm64-msvc@15.5.6':
+    resolution: {integrity: sha512-ONOMrqWxdzXDJNh2n60H6gGyKed42Ieu6UTVPZteXpuKbLZTH4G4eBMsr5qWgOBA+s7F+uB4OJbZnrkEDnZ5Fg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@15.5.4':
-    resolution: {integrity: sha512-1ur2tSHZj8Px/KMAthmuI9FMp/YFusMMGoRNJaRZMOlSkgvLjzosSdQI0cJAKogdHl3qXUQKL9MGaYvKwA7DXg==}
+  '@next/swc-win32-x64-msvc@15.5.6':
+    resolution: {integrity: sha512-pxK4VIjFRx1MY92UycLOOw7dTdvccWsNETQ0kDHkBlcFH1GrTLUjSiHU1ohrznnux6TqRHgv5oflhfIWZwVROQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -2700,11 +2661,6 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@oxc-parser/binding-wasm32-wasi@0.93.0':
-    resolution: {integrity: sha512-EXyCyY4GJO+SNTQJPPmJJwYbPkPOzw2nxSRMmUlwG19WKO7QHzHyL6u+4hXpp5IwgIWvgQgoix2/pB9JF+EA7w==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
   '@oxc-parser/binding-wasm32-wasi@0.95.0':
     resolution: {integrity: sha512-0JLyqkZu1HnQIZ4e5LBGOtzqua1QwFEUOoMSycdoerXqayd4LK2b7WMfAx8eCIf+jGm1Uj6f3R00nlsx8g1faQ==}
     engines: {node: '>=14.0.0'}
@@ -2815,8 +2771,8 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@playwright/test@1.55.1':
-    resolution: {integrity: sha512-IVAh/nOJaw6W9g+RJVlIQJ6gSiER+ae6mKQ5CX1bERzQgbC1VSeBlwdvczT7pxb0GWiyrxH4TGKbMfDb4Sq/ig==}
+  '@playwright/test@1.56.1':
+    resolution: {integrity: sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -3166,23 +3122,23 @@ packages:
     resolution: {integrity: sha512-Nqc90v4lWCXyakD6xNyNACBJNJ0tNCwj2WNk/7ivyacYHxiITVgmLUFXTBOeCdy79iz6HtN9Y31uw/jbLrdOAg==}
     engines: {node: '>=20.0.0'}
 
-  '@shikijs/core@3.12.2':
-    resolution: {integrity: sha512-L1Safnhra3tX/oJK5kYHaWmLEBJi1irASwewzY3taX5ibyXyMkkSDZlq01qigjryOBwrXSdFgTiZ3ryzSNeu7Q==}
+  '@shikijs/core@3.13.0':
+    resolution: {integrity: sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA==}
 
-  '@shikijs/engine-javascript@3.12.2':
-    resolution: {integrity: sha512-Nm3/azSsaVS7hk6EwtHEnTythjQfwvrO5tKqMlaH9TwG1P+PNaR8M0EAKZ+GaH2DFwvcr4iSfTveyxMIvXEHMw==}
+  '@shikijs/engine-javascript@3.13.0':
+    resolution: {integrity: sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==}
 
-  '@shikijs/engine-oniguruma@3.12.2':
-    resolution: {integrity: sha512-hozwnFHsLvujK4/CPVHNo3Bcg2EsnG8krI/ZQ2FlBlCRpPZW4XAEQmEwqegJsypsTAN9ehu2tEYe30lYKSZW/w==}
+  '@shikijs/engine-oniguruma@3.13.0':
+    resolution: {integrity: sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg==}
 
-  '@shikijs/langs@3.12.2':
-    resolution: {integrity: sha512-bVx5PfuZHDSHoBal+KzJZGheFuyH4qwwcwG/n+MsWno5cTlKmaNtTsGzJpHYQ8YPbB5BdEdKU1rga5/6JGY8ww==}
+  '@shikijs/langs@3.13.0':
+    resolution: {integrity: sha512-672c3WAETDYHwrRP0yLy3W1QYB89Hbpj+pO4KhxK6FzIrDI2FoEXNiNCut6BQmEApYLfuYfpgOZaqbY+E9b8wQ==}
 
-  '@shikijs/themes@3.12.2':
-    resolution: {integrity: sha512-fTR3QAgnwYpfGczpIbzPjlRnxyONJOerguQv1iwpyQZ9QXX4qy/XFQqXlf17XTsorxnHoJGbH/LXBvwtqDsF5A==}
+  '@shikijs/themes@3.13.0':
+    resolution: {integrity: sha512-Vxw1Nm1/Od8jyA7QuAenaV78BG2nSr3/gCGdBkLpfLscddCkzkL36Q5b67SrLLfvAJTOUzW39x4FHVCFriPVgg==}
 
-  '@shikijs/types@3.12.2':
-    resolution: {integrity: sha512-K5UIBzxCyv0YoxN3LMrKB9zuhp1bV+LgewxuVwHdl4Gz5oePoUFrr9EfgJlGlDeXCU1b/yhdnXeuRvAnz8HN8Q==}
+  '@shikijs/types@3.13.0':
+    resolution: {integrity: sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==}
 
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
@@ -3297,6 +3253,9 @@ packages:
     peerDependencies:
       solid-js: ^1.6.12
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@stylistic/eslint-plugin-js@2.1.0':
     resolution: {integrity: sha512-gdXUjGNSsnY6nPyqxu6lmDTtVrwCOjun4x8PUn0x04d5ucLI74N3MT1Q0UhdcOR9No3bo5PGDyBgXK+KmD787A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3332,65 +3291,65 @@ packages:
   '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
-  '@tailwindcss/node@4.1.13':
-    resolution: {integrity: sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==}
+  '@tailwindcss/node@4.1.14':
+    resolution: {integrity: sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==}
 
-  '@tailwindcss/oxide-android-arm64@4.1.13':
-    resolution: {integrity: sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==}
+  '@tailwindcss/oxide-android-arm64@4.1.14':
+    resolution: {integrity: sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.13':
-    resolution: {integrity: sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.14':
+    resolution: {integrity: sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.13':
-    resolution: {integrity: sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==}
+  '@tailwindcss/oxide-darwin-x64@4.1.14':
+    resolution: {integrity: sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.13':
-    resolution: {integrity: sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.14':
+    resolution: {integrity: sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
-    resolution: {integrity: sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14':
+    resolution: {integrity: sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
-    resolution: {integrity: sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
+    resolution: {integrity: sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
-    resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
+    resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
-    resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
+    resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
-    resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.14':
+    resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
-    resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
+  '@tailwindcss/oxide-wasm32-wasi@4.1.14':
+    resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
     bundledDependencies:
@@ -3401,24 +3360,24 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
-    resolution: {integrity: sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.14':
+    resolution: {integrity: sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
-    resolution: {integrity: sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.14':
+    resolution: {integrity: sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.13':
-    resolution: {integrity: sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==}
+  '@tailwindcss/oxide@4.1.14':
+    resolution: {integrity: sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==}
     engines: {node: '>= 10'}
 
-  '@tailwindcss/vite@4.1.13':
-    resolution: {integrity: sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ==}
+  '@tailwindcss/vite@4.1.14':
+    resolution: {integrity: sha512-BoFUoU0XqgCUS1UXWhmDJroKKhNXeDzD7/XwabjkDIAbMnc4ULn5e2FuEuBbhZ6ENZoSYzKlzvZ44Yr6EUDUSA==}
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
@@ -3426,8 +3385,8 @@ packages:
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
 
-  '@testing-library/jest-dom@6.9.0':
-    resolution: {integrity: sha512-QHdxYMJ0YPGKYofMc6zYvo7LOViVhdc6nPg/OtM2cf9MQrwEcTxFCs7d/GJ5eSyPkHzOiBkc/KfLdFJBHzldtQ==}
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
   '@testing-library/react@16.3.0':
@@ -3570,11 +3529,11 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@20.19.21':
-    resolution: {integrity: sha512-CsGG2P3I5y48RPMfprQGfy4JPRZ6csfC3ltBZSRItG3ngggmNY/qs2uZKp4p9VbrpqNNSMzUZNFZKzgOGnd/VA==}
+  '@types/node@20.19.22':
+    resolution: {integrity: sha512-hRnu+5qggKDSyWHlnmThnUqg62l29Aj/6vcYgUaSFL9oc7DVjeWEQN3PRgdSc6F8d9QRMWkf36CLMch1Do/+RQ==}
 
-  '@types/node@24.6.0':
-    resolution: {integrity: sha512-F1CBxgqwOMc4GKJ7eY22hWhBVQuMYTtqI8L0FcszYcpYX0fzfDGpez22Xau8Mgm7O9fI+zA/TYIdq3tGWfweBA==}
+  '@types/node@24.8.1':
+    resolution: {integrity: sha512-alv65KGRadQVfVcG69MuB4IzdYVpRwMG/mq8KWOaoOdyY617P5ivaDiMCGOFDWD2sAn5Q0mR3mRtUOgm99hL9Q==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -3608,8 +3567,8 @@ packages:
   '@types/vscode-webview@1.57.5':
     resolution: {integrity: sha512-iBAUYNYkz+uk1kdsq05fEcoh8gJmwT3lqqFPN7MGyjQ3HVloViMdo7ZJ8DFIP8WOK74PjOEilosqAyxV2iUFUw==}
 
-  '@types/vscode@1.104.0':
-    resolution: {integrity: sha512-0KwoU2rZ2ecsTGFxo4K1+f+AErRsYW0fsp6A0zufzGuhyczc2IoKqYqcwXidKXmy2u8YB2GsYsOtiI9Izx3Tig==}
+  '@types/vscode@1.105.0':
+    resolution: {integrity: sha512-Lotk3CTFlGZN8ray4VxJE7axIyLZZETQJVWi/lYoUVQuqfRxlQhVOfoejsD2V3dVXPSbS15ov5ZyowMAzgUqcw==}
 
   '@types/whatwg-mimetype@3.0.2':
     resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
@@ -3795,8 +3754,8 @@ packages:
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/expect@4.0.0-beta.8':
-    resolution: {integrity: sha512-40DZ7nl5AkASkDNaVR7TqsbeJCs5D+dyQNM5cIvgjG3KK+ATeWxtXJbmRNqgdbq+FL3v/pchnrJM1R9BFkTdUQ==}
+  '@vitest/expect@4.0.0-beta.18':
+    resolution: {integrity: sha512-dP38ctyRhGj4DTz4azK7sKR7BULMdVdgmR4Flzmul9wE3GdKUSr4zNd2RVNHhrb7l0NK0GN5/kRquaQmv9krGQ==}
 
   '@vitest/mocker@2.1.8':
     resolution: {integrity: sha512-7guJ/47I6uqfttp33mgo6ga5Gr1VnL58rcqYKyShoRK9ebu8T5Rs6HN3s1NABiBeVTdWNrwUMcHH54uXZBN4zA==}
@@ -3820,8 +3779,8 @@ packages:
       vite:
         optional: true
 
-  '@vitest/mocker@4.0.0-beta.8':
-    resolution: {integrity: sha512-a5ynR/Fsrciuq17i8lzS5NH3ICxwFZMlQ4bXPzGV+KlIcVHu20a/8q6KekqUaVBxCbmohORLFXFx9IptHS9gXA==}
+  '@vitest/mocker@4.0.0-beta.18':
+    resolution: {integrity: sha512-vwvvqj4zNaV+uQSBJHhGP72UL4fluU2gLI1Q+hT4e4ruJOF5TWD/UuWnWCpzHjGotfDTNSztypYkZ3ZottPFvA==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^6.0.0 || ^7.0.0-0
@@ -3840,8 +3799,8 @@ packages:
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/pretty-format@4.0.0-beta.8':
-    resolution: {integrity: sha512-sr5HPeeRff4gTpDwI2Kvz8dS2CmDCCZ1PRu3IOeLTcSJjhEWmk3IJILjqaA8yyj+QzWjnqAxr2rmZNpO0h/5Vw==}
+  '@vitest/pretty-format@4.0.0-beta.18':
+    resolution: {integrity: sha512-LzgQxcQ6QxhjDfYGMT/fFH3hdzJaq2KsG0R2CGkhYUNFvAml2nvFAxzQKYtxDDk0olOxk3j29QPvv3j8D4hONg==}
 
   '@vitest/runner@2.1.8':
     resolution: {integrity: sha512-17ub8vQstRnRlIU5k50bG+QOMLHRhYPAna5tw8tYbj+jzjcspnwnwtPtiOlkuKC4+ixDPTuLZiqiWWQ2PSXHVg==}
@@ -3849,8 +3808,8 @@ packages:
   '@vitest/runner@3.2.4':
     resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
 
-  '@vitest/runner@4.0.0-beta.8':
-    resolution: {integrity: sha512-m7jrT+KMEgONclBI7y3ptUD+/uhRzzHLblws84fo+WesCjS8WT8q7RoPMgqymj5kmzIF5sTh6NOvrNEE5LaLCQ==}
+  '@vitest/runner@4.0.0-beta.18':
+    resolution: {integrity: sha512-HpEaHsxNKJYeKApkxbrGT6OZA9Ty+BLXIc4rxo6xzo+f4zlUGluy4RjQs9GQIzEpQSPP5ehUIcUZbOi7thB49g==}
 
   '@vitest/snapshot@2.1.8':
     resolution: {integrity: sha512-20T7xRFbmnkfcmgVEz+z3AU/3b0cEzZOt/zmnvZEctg64/QZbSDJEVm9fLnnlSi74KibmRsO9/Qabi+t0vCRPg==}
@@ -3858,8 +3817,8 @@ packages:
   '@vitest/snapshot@3.2.4':
     resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
 
-  '@vitest/snapshot@4.0.0-beta.8':
-    resolution: {integrity: sha512-2hzc/ksGlZ8Rcg11VD/AhTwSaPEsdtrNA+TCV4w6tuZ7I2X+XJXimfk/Cehz5zMgfFuV8tFmGimb/BpyIbNiMg==}
+  '@vitest/snapshot@4.0.0-beta.18':
+    resolution: {integrity: sha512-ruWnM+5xVR5mhiTW5c66JRwxni6riPxupaXNPqdkOHzBuxxz79Cf56yzuYapT/TSRHVwkIyldfKLcZTY18CWig==}
 
   '@vitest/spy@2.1.8':
     resolution: {integrity: sha512-5swjf2q95gXeYPevtW0BLk6H8+bPlMb4Vw/9Em4hFxDcaOxS+e0LOX4yqNxoHzMR2akEB2xfpnWUzkZokmgWDg==}
@@ -3867,8 +3826,8 @@ packages:
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/spy@4.0.0-beta.8':
-    resolution: {integrity: sha512-WfHF35GCf5xx3B1oRrhWMVAfcBBYO4WHAYLbeeaZ1ZSW5/VBXJ/M37bLxRRKnXcgffwcsWA7xpjWnL0dQ1q5NA==}
+  '@vitest/spy@4.0.0-beta.18':
+    resolution: {integrity: sha512-KHxVrn/e1PhcylP3waDajDZ7o5ut9BnN+QDCgz6uMev1cqVHLE1EBaz8qUcxaRH6qFNKcTm8T4x+FIIYSGS/xw==}
 
   '@vitest/utils@2.1.8':
     resolution: {integrity: sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==}
@@ -3876,14 +3835,14 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@vitest/utils@4.0.0-beta.8':
-    resolution: {integrity: sha512-+eV3yrDooGMnHHVQ1aqzPJIBlxEsaQg/5BVFRSkbBgfiKqM9HZbqYK736s0D8tfdMLOjeB+7u7Tw0emd/h3MlQ==}
+  '@vitest/utils@4.0.0-beta.18':
+    resolution: {integrity: sha512-Z7r82xwG8G6J755DqWpoP/XEuKMhxVFlIPVunD609iH8wjLJ6VD+vd9cojalhrW/tqHfdnaBpS+hxDLwSrfw3Q==}
 
-  '@vscode/codicons@0.0.40':
-    resolution: {integrity: sha512-R8sEDXthD86JHsk3xERrMcTN6sMovbk1AXYB5/tGoEYCE8DWwya6al5VLrAmQYXC1bQhUHIfHALj8ijQUs11cQ==}
+  '@vscode/codicons@0.0.41':
+    resolution: {integrity: sha512-v6/8nx76zau3Joxjzi3eN/FVw+7jKBq4j7LTZY5FhFhq2g0OoFebZ3vRZbv/pUopGpbCnJJ4FOz+NzbjVsmoiw==}
 
-  '@vscode/extension-telemetry@1.0.0':
-    resolution: {integrity: sha512-vaTZE65zigWwSWYB6yaZUAyVC/Ux+6U82hnzy/ejuS/KpFifO+0oORNd5yAoPeIRnYjvllM6ES3YlX4K5tUuww==}
+  '@vscode/extension-telemetry@1.1.0':
+    resolution: {integrity: sha512-y3cFCDell/xVn3b2/FdpJSwpspfUzBvVtjAQnD94Z38RXHCsYRZXJOJLZNuFxFgcSihjYZNnL8VPgOzWNiE9/g==}
     engines: {vscode: ^1.75.0}
 
   '@vscode/vsce-sign-alpine-arm64@2.0.6':
@@ -4253,8 +4212,8 @@ packages:
   caniuse-lite@1.0.30001735:
     resolution: {integrity: sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w==}
 
-  caniuse-lite@1.0.30001746:
-    resolution: {integrity: sha512-eA7Ys/DGw+pnkWWSE/id29f2IcPHVoE8wxtvE5JdvD2V28VTDPy1yEeo11Guz0sJ4ZeGRcm3uaTcAqK1LXaphA==}
+  caniuse-lite@1.0.30001751:
+    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -4263,8 +4222,8 @@ packages:
     resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
     engines: {node: '>=12'}
 
-  chai@5.2.1:
-    resolution: {integrity: sha512-5nFxhUrX0PqtyogoYOA8IPswy5sZFTOsBFl/9bNsmDLgsxYTzSZQJDPppDnZPTQbzSEm0hqGjWPzRemQCYbD6A==}
+  chai@6.2.0:
+    resolution: {integrity: sha512-aUTnJc/JipRzJrNADXVvpVqi6CO0dn3nx4EVPxijri+fj3LUUDyZQOgVeW54Ob3Y1Xh9Iz8f+CgaCl8v0mn9bA==}
     engines: {node: '>=18'}
 
   chalk@4.1.2:
@@ -4571,6 +4530,10 @@ packages:
     resolution: {integrity: sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==}
     engines: {node: '>=8'}
 
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
   detect-newline@3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
@@ -4709,8 +4672,8 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  esbuild@0.25.10:
-    resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
+  esbuild@0.25.11:
+    resolution: {integrity: sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -4916,8 +4879,8 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.36.0:
-    resolution: {integrity: sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==}
+  eslint@9.38.0:
+    resolution: {integrity: sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -5688,8 +5651,8 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
-  jiti@2.6.0:
-    resolution: {integrity: sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==}
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
   joycon@3.1.1:
@@ -5789,8 +5752,8 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  less@4.4.1:
-    resolution: {integrity: sha512-X9HKyiXPi0f/ed0XhgUlBeFfxrlDP3xR4M7768Zl+WXLUViuL9AOPPJP4nCV0tgRWvTYvpNmN0SFhZOQzy16PA==}
+  less@4.4.2:
+    resolution: {integrity: sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -5946,9 +5909,6 @@ packages:
   loupe@3.1.4:
     resolution: {integrity: sha512-wJzkKwJrheKtknCOKNEtDK4iqg/MxmZheEMtSTYvnzRdEYaZzmgH976nenp8WdJRdx5Vc1X/9MO0Oszl6ezeXg==}
 
-  loupe@3.2.0:
-    resolution: {integrity: sha512-2NCfZcT5VGVNX9mSZIxLRkEAegDGBpuQZBy13desuHeVORmBDyAET4TkJr4SjqQy3A8JDofMN6LpkK8Xcm/dlw==}
-
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -5963,8 +5923,8 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
-  lucide-solid@0.544.0:
-    resolution: {integrity: sha512-BQ4hysggShgAFE66U2AStAyOdD0U2Oraec1P35+m5b+SDuh2mWf8kTGbtMmZEmy0MKKQoKP5PEU77FrADbAQTw==}
+  lucide-solid@0.546.0:
+    resolution: {integrity: sha512-zJX9x7rlOwqsB6eNMWOrzS+vuvZThPFksPVryiXMmC6QGAD6vRihEZHe+r4JSppAGhOaPRBnMhg8XNZ/qLslvA==}
     peerDependencies:
       solid-js: ^1.4.7
 
@@ -6145,8 +6105,8 @@ packages:
     engines: {node: '>= 4.4.x'}
     hasBin: true
 
-  next@15.5.4:
-    resolution: {integrity: sha512-xH4Yjhb82sFYQfY3vbkJfgSDgXvBB6a8xPs9i35k6oZJRoQRihZH+4s9Yo2qsWpzBmZ3lPXaJ2KPXLfkvW4LnA==}
+  next@15.5.6:
+    resolution: {integrity: sha512-zTxsnI3LQo3c9HSdSf91O1jMNsEzIXDShXd4wVdg9y5shwLqBXi4ZtUUJyB86KGVSJLZx0PFONvO54aheGX8QQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
     peerDependencies:
@@ -6448,13 +6408,13 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  playwright-core@1.55.1:
-    resolution: {integrity: sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==}
+  playwright-core@1.56.1:
+    resolution: {integrity: sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.55.1:
-    resolution: {integrity: sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==}
+  playwright@1.56.1:
+    resolution: {integrity: sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -6804,6 +6764,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   seroval-plugins@1.3.2:
     resolution: {integrity: sha512-0QvCV2lM3aj/U3YozDiVwx9zpH0q8A60CTWIv4Jszj/givcudPb48B+rkU5D51NJ0pTpweGMttHjboPa9/zoIQ==}
     engines: {node: '>=10'}
@@ -6829,8 +6794,8 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@3.12.2:
-    resolution: {integrity: sha512-uIrKI+f9IPz1zDT+GMz+0RjzKJiijVr6WDWm9Pe3NNY6QigKCfifCEv9v9R2mDASKKjzjQ2QpFLcxaR3iHSnMA==}
+  shiki@3.13.0:
+    resolution: {integrity: sha512-aZW4l8Og16CokuCLf8CF8kq+KK2yOygapU5m3+hoGw0Mdosc6fPitjM+ujYarppj5ZIKGyPDPP1vqmQhr+5/0g==}
 
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
@@ -7097,8 +7062,8 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tailwindcss@4.1.13:
-    resolution: {integrity: sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==}
+  tailwindcss@4.1.14:
+    resolution: {integrity: sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==}
 
   tapable@2.2.2:
     resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
@@ -7159,6 +7124,10 @@ packages:
     resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
+  tinypool@2.0.0:
+    resolution: {integrity: sha512-/RX9RzeH2xU5ADE7n2Ykvmi9ED3FBGPAjw9u3zucrNNaEBIO0HPSYgL0NT7+3p147ojeSdaVu08F6hjpv31HJg==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
   tinyrainbow@1.2.0:
     resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
@@ -7167,6 +7136,10 @@ packages:
     resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+    engines: {node: '>=14.0.0'}
+
   tinyspy@3.0.2:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
@@ -7305,8 +7278,8 @@ packages:
   typed-rest-client@1.8.11:
     resolution: {integrity: sha512-5UvfMpd1oelmUPRbbaVnq+rHP7ng2cE4qoQkQeAqxRL6PklkxsM0g32/HL0yfvruK6ojQ5x8EE+HF4YV6DtuCA==}
 
-  typescript@5.9.2:
-    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -7325,8 +7298,8 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici-types@7.13.0:
-    resolution: {integrity: sha512-Ov2Rr9Sx+fRgagJ5AX0qvItZG/JKKoBRAVITs1zk7IqZGTJUwgUr7qoYBpWwakpWilTZFM98rG/AFRocu10iIQ==}
+  undici-types@7.14.0:
+    resolution: {integrity: sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==}
 
   undici@7.16.0:
     resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
@@ -7356,8 +7329,8 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
-  unist-util-is@6.0.0:
-    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
 
   unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
@@ -7368,8 +7341,8 @@ packages:
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
-  unist-util-visit-parents@6.0.1:
-    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
 
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
@@ -7449,8 +7422,8 @@ packages:
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
-  vite-plugin-solid@2.11.8:
-    resolution: {integrity: sha512-hFrCxBfv3B1BmFqnJF4JOCYpjrmi/zwyeKjcomQ0khh8HFyQ8SbuBWQ7zGojfrz6HUOBFrJBNySDi/JgAHytWg==}
+  vite-plugin-solid@2.11.9:
+    resolution: {integrity: sha512-bTA6p+bspXZsuulSd2y6aTzegF8xGaJYcq1Uyh/mv+W4DQtzCgL9nN6n2fsTaxp/dMk+ZHHKgGndlNeooqHLKw==}
     peerDependencies:
       '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
       solid-js: ^1.7.2
@@ -7490,8 +7463,8 @@ packages:
       terser:
         optional: true
 
-  vite@7.1.3:
-    resolution: {integrity: sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==}
+  vite@7.1.10:
+    resolution: {integrity: sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -7530,8 +7503,8 @@ packages:
       yaml:
         optional: true
 
-  vite@7.1.7:
-    resolution: {integrity: sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==}
+  vite@7.1.3:
+    resolution: {integrity: sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -7631,16 +7604,18 @@ packages:
       jsdom:
         optional: true
 
-  vitest@4.0.0-beta.8:
-    resolution: {integrity: sha512-wN/RDeCd5uXHV6tELw4AJzeP5rxR4YWXN3ems+59ZummmiovNjlfwG+CEZp5GitlxDQu7muoY4VPrSUxPzzKiQ==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+  vitest@4.0.0-beta.18:
+    resolution: {integrity: sha512-zWvKMoebACjaOZADoHugNLC2GO8rnY4ERj052BunaJ9u/re6RmdIu4xu3mQ7yz97a1jmpSjeGr2tUz4kF1TrLA==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/debug': ^4.1.12
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 4.0.0-beta.8
-      '@vitest/ui': 4.0.0-beta.8
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.0.0-beta.18
+      '@vitest/browser-preview': 4.0.0-beta.18
+      '@vitest/browser-webdriverio': 4.0.0-beta.18
+      '@vitest/ui': 4.0.0-beta.18
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -7650,7 +7625,11 @@ packages:
         optional: true
       '@types/node':
         optional: true
-      '@vitest/browser':
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
         optional: true
       '@vitest/ui':
         optional: true
@@ -7819,8 +7798,8 @@ packages:
     resolution: {integrity: sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==}
     engines: {node: '>=18'}
 
-  zod@4.1.11:
-    resolution: {integrity: sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==}
+  zod@4.1.12:
+    resolution: {integrity: sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==}
 
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
@@ -7833,47 +7812,42 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.29
-
-  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)(vitest@3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
+  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
     dependencies:
       '@antfu/install-pkg': 0.3.3
       '@clack/prompts': 0.7.0
-      '@stylistic/eslint-plugin': 2.1.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/parser': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      eslint: 9.36.0(jiti@2.6.0)
+      '@stylistic/eslint-plugin': 2.1.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-config-flat-gitignore: 0.1.5
       eslint-flat-config-utils: 0.2.5
-      eslint-merge-processors: 0.1.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-antfu: 2.3.3(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-command: 0.2.3(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-eslint-comments: 3.2.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-import-x: 0.5.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      eslint-plugin-jsdoc: 48.2.7(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-jsonc: 2.16.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-markdown: 5.0.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-n: 17.7.0(eslint@9.36.0(jiti@2.6.0))
+      eslint-merge-processors: 0.1.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-antfu: 2.3.3(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-command: 0.2.3(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-eslint-comments: 3.2.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-import-x: 0.5.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-jsdoc: 48.2.7(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-jsonc: 2.16.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-markdown: 5.0.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-n: 17.7.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-perfectionist: 2.10.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)(vue-eslint-parser@9.4.2(eslint@9.36.0(jiti@2.6.0)))
-      eslint-plugin-regexp: 2.6.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-toml: 0.11.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-unicorn: 53.0.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-unused-imports: 3.2.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)(vitest@3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
-      eslint-plugin-vue: 9.26.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-plugin-yml: 1.14.0(eslint@9.36.0(jiti@2.6.0))
-      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.34)(eslint@9.36.0(jiti@2.6.0))
+      eslint-plugin-perfectionist: 2.10.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vue-eslint-parser@9.4.2(eslint@9.38.0(jiti@2.6.1)))
+      eslint-plugin-regexp: 2.6.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-toml: 0.11.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-unicorn: 53.0.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-unused-imports: 3.2.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+      eslint-plugin-vue: 9.26.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-yml: 1.14.0(eslint@9.38.0(jiti@2.6.1))
+      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))
       globals: 15.3.0
       jsonc-eslint-parser: 2.4.0
       local-pkg: 0.5.0
       parse-gitignore: 2.0.0
       picocolors: 1.1.1
       toml-eslint-parser: 0.9.3
-      vue-eslint-parser: 9.4.2(eslint@9.36.0(jiti@2.6.0))
+      vue-eslint-parser: 9.4.2(eslint@9.38.0(jiti@2.6.1))
       yaml-eslint-parser: 1.2.3
       yargs: 17.7.2
     transitivePeerDependencies:
@@ -7994,26 +7968,6 @@ snapshots:
 
   '@babel/compat-data@7.28.0': {}
 
-  '@babel/core@7.28.0':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helpers': 7.27.6
-      '@babel/parser': 7.28.0
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.0
-      convert-source-map: 2.0.0
-      debug: 4.4.1
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/core@7.28.4':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -8034,14 +7988,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.28.0':
-    dependencies:
-      '@babel/parser': 7.28.0
-      '@babel/types': 7.28.0
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
-      jsesc: 3.1.0
-
   '@babel/generator@7.28.3':
     dependencies:
       '@babel/parser': 7.28.3
@@ -8117,7 +8063,7 @@ snapshots:
 
   '@babel/helper-module-imports@7.18.6':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.4
 
   '@babel/helper-module-imports@7.27.1':
     dependencies:
@@ -8126,15 +8072,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.27.4
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
@@ -8200,11 +8137,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helpers@7.27.6':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.27.6
-
   '@babel/helpers@7.28.4':
     dependencies:
       '@babel/template': 7.27.2
@@ -8214,10 +8146,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.27.6
 
-  '@babel/parser@7.28.0':
-    dependencies:
-      '@babel/types': 7.28.0
-
   '@babel/parser@7.28.3':
     dependencies:
       '@babel/types': 7.28.2
@@ -8305,11 +8233,6 @@ snapshots:
       '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
@@ -8877,18 +8800,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/traverse@7.28.0':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.0
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.0
-      debug: 4.4.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/traverse@7.28.3':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -8918,11 +8829,6 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
-  '@babel/types@7.28.0':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-
   '@babel/types@7.28.2':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -8964,7 +8870,7 @@ snapshots:
     dependencies:
       '@changesets/types': 6.1.0
 
-  '@changesets/cli@2.29.7(@types/node@24.6.0)':
+  '@changesets/cli@2.29.7(@types/node@24.8.1)':
     dependencies:
       '@changesets/apply-release-plan': 7.0.13
       '@changesets/assemble-release-plan': 6.0.9
@@ -8980,7 +8886,7 @@ snapshots:
       '@changesets/should-skip-package': 0.1.2
       '@changesets/types': 6.1.0
       '@changesets/write': 0.4.0
-      '@inquirer/external-editor': 1.0.2(@types/node@24.6.0)
+      '@inquirer/external-editor': 1.0.2(@types/node@24.8.1)
       '@manypkg/get-packages': 1.1.3
       ansi-colors: 4.1.3
       ci-info: 3.9.0
@@ -9144,7 +9050,7 @@ snapshots:
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
-  '@esbuild/aix-ppc64@0.25.10':
+  '@esbuild/aix-ppc64@0.25.11':
     optional: true
 
   '@esbuild/aix-ppc64@0.25.6':
@@ -9153,7 +9059,7 @@ snapshots:
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
-  '@esbuild/android-arm64@0.25.10':
+  '@esbuild/android-arm64@0.25.11':
     optional: true
 
   '@esbuild/android-arm64@0.25.6':
@@ -9162,7 +9068,7 @@ snapshots:
   '@esbuild/android-arm@0.21.5':
     optional: true
 
-  '@esbuild/android-arm@0.25.10':
+  '@esbuild/android-arm@0.25.11':
     optional: true
 
   '@esbuild/android-arm@0.25.6':
@@ -9171,7 +9077,7 @@ snapshots:
   '@esbuild/android-x64@0.21.5':
     optional: true
 
-  '@esbuild/android-x64@0.25.10':
+  '@esbuild/android-x64@0.25.11':
     optional: true
 
   '@esbuild/android-x64@0.25.6':
@@ -9180,7 +9086,7 @@ snapshots:
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.10':
+  '@esbuild/darwin-arm64@0.25.11':
     optional: true
 
   '@esbuild/darwin-arm64@0.25.6':
@@ -9189,7 +9095,7 @@ snapshots:
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.10':
+  '@esbuild/darwin-x64@0.25.11':
     optional: true
 
   '@esbuild/darwin-x64@0.25.6':
@@ -9198,7 +9104,7 @@ snapshots:
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.10':
+  '@esbuild/freebsd-arm64@0.25.11':
     optional: true
 
   '@esbuild/freebsd-arm64@0.25.6':
@@ -9207,7 +9113,7 @@ snapshots:
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.10':
+  '@esbuild/freebsd-x64@0.25.11':
     optional: true
 
   '@esbuild/freebsd-x64@0.25.6':
@@ -9216,7 +9122,7 @@ snapshots:
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.10':
+  '@esbuild/linux-arm64@0.25.11':
     optional: true
 
   '@esbuild/linux-arm64@0.25.6':
@@ -9225,7 +9131,7 @@ snapshots:
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
-  '@esbuild/linux-arm@0.25.10':
+  '@esbuild/linux-arm@0.25.11':
     optional: true
 
   '@esbuild/linux-arm@0.25.6':
@@ -9234,7 +9140,7 @@ snapshots:
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.10':
+  '@esbuild/linux-ia32@0.25.11':
     optional: true
 
   '@esbuild/linux-ia32@0.25.6':
@@ -9243,7 +9149,7 @@ snapshots:
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.10':
+  '@esbuild/linux-loong64@0.25.11':
     optional: true
 
   '@esbuild/linux-loong64@0.25.6':
@@ -9252,7 +9158,7 @@ snapshots:
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.10':
+  '@esbuild/linux-mips64el@0.25.11':
     optional: true
 
   '@esbuild/linux-mips64el@0.25.6':
@@ -9261,7 +9167,7 @@ snapshots:
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.10':
+  '@esbuild/linux-ppc64@0.25.11':
     optional: true
 
   '@esbuild/linux-ppc64@0.25.6':
@@ -9270,7 +9176,7 @@ snapshots:
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.10':
+  '@esbuild/linux-riscv64@0.25.11':
     optional: true
 
   '@esbuild/linux-riscv64@0.25.6':
@@ -9279,7 +9185,7 @@ snapshots:
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.10':
+  '@esbuild/linux-s390x@0.25.11':
     optional: true
 
   '@esbuild/linux-s390x@0.25.6':
@@ -9288,13 +9194,13 @@ snapshots:
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
-  '@esbuild/linux-x64@0.25.10':
+  '@esbuild/linux-x64@0.25.11':
     optional: true
 
   '@esbuild/linux-x64@0.25.6':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.10':
+  '@esbuild/netbsd-arm64@0.25.11':
     optional: true
 
   '@esbuild/netbsd-arm64@0.25.6':
@@ -9303,13 +9209,13 @@ snapshots:
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.10':
+  '@esbuild/netbsd-x64@0.25.11':
     optional: true
 
   '@esbuild/netbsd-x64@0.25.6':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.10':
+  '@esbuild/openbsd-arm64@0.25.11':
     optional: true
 
   '@esbuild/openbsd-arm64@0.25.6':
@@ -9318,13 +9224,13 @@ snapshots:
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.10':
+  '@esbuild/openbsd-x64@0.25.11':
     optional: true
 
   '@esbuild/openbsd-x64@0.25.6':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.25.10':
+  '@esbuild/openharmony-arm64@0.25.11':
     optional: true
 
   '@esbuild/openharmony-arm64@0.25.6':
@@ -9333,7 +9239,7 @@ snapshots:
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.10':
+  '@esbuild/sunos-x64@0.25.11':
     optional: true
 
   '@esbuild/sunos-x64@0.25.6':
@@ -9342,7 +9248,7 @@ snapshots:
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.10':
+  '@esbuild/win32-arm64@0.25.11':
     optional: true
 
   '@esbuild/win32-arm64@0.25.6':
@@ -9351,7 +9257,7 @@ snapshots:
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.10':
+  '@esbuild/win32-ia32@0.25.11':
     optional: true
 
   '@esbuild/win32-ia32@0.25.6':
@@ -9360,37 +9266,39 @@ snapshots:
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
-  '@esbuild/win32-x64@0.25.10':
+  '@esbuild/win32-x64@0.25.11':
     optional: true
 
   '@esbuild/win32-x64@0.25.6':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.36.0(jiti@2.6.0))':
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.38.0(jiti@2.6.1))':
     dependencies:
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.36.0(jiti@2.6.0))':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.38.0(jiti@2.6.1))':
     dependencies:
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.10.0': {}
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/config-array@0.21.0':
+  '@eslint/config-array@0.21.1':
     dependencies:
-      '@eslint/object-schema': 2.1.6
+      '@eslint/object-schema': 2.1.7
       debug: 4.4.3
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.3.1': {}
+  '@eslint/config-helpers@0.4.1':
+    dependencies:
+      '@eslint/core': 0.16.0
 
-  '@eslint/core@0.15.2':
+  '@eslint/core@0.16.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
@@ -9422,13 +9330,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.36.0': {}
+  '@eslint/js@9.38.0': {}
 
-  '@eslint/object-schema@2.1.6': {}
+  '@eslint/object-schema@2.1.7': {}
 
-  '@eslint/plugin-kit@0.3.5':
+  '@eslint/plugin-kit@0.4.0':
     dependencies:
-      '@eslint/core': 0.15.2
+      '@eslint/core': 0.16.0
       levn: 0.4.1
 
   '@floating-ui/core@1.7.3':
@@ -9542,12 +9450,12 @@ snapshots:
   '@img/sharp-win32-x64@0.34.4':
     optional: true
 
-  '@inquirer/external-editor@1.0.2(@types/node@24.6.0)':
+  '@inquirer/external-editor@1.0.2(@types/node@24.8.1)':
     dependencies:
       chardet: 2.1.0
       iconv-lite: 0.7.0
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
 
   '@internationalized/date@3.8.2':
     dependencies:
@@ -9589,13 +9497,13 @@ snapshots:
   '@jest/console@30.2.0':
     dependencies:
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       chalk: 4.1.2
       jest-message-util: 30.2.0
       jest-util: 30.2.0
       slash: 3.0.0
 
-  '@jest/core@30.2.0(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))':
+  '@jest/core@30.2.0(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))':
     dependencies:
       '@jest/console': 30.2.0
       '@jest/pattern': 30.0.1
@@ -9603,14 +9511,14 @@ snapshots:
       '@jest/test-result': 30.2.0
       '@jest/transform': 30.2.0
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 4.3.0
       exit-x: 0.2.2
       graceful-fs: 4.2.11
       jest-changed-files: 30.2.0
-      jest-config: 30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+      jest-config: 30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-haste-map: 30.2.0
       jest-message-util: 30.2.0
       jest-regex-util: 30.0.1
@@ -9639,7 +9547,7 @@ snapshots:
       '@jest/fake-timers': 30.2.0
       '@jest/types': 30.2.0
       '@types/jsdom': 21.1.7
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jest-mock: 30.2.0
       jest-util: 30.2.0
       jsdom: 26.1.0
@@ -9648,7 +9556,7 @@ snapshots:
     dependencies:
       '@jest/fake-timers': 30.2.0
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jest-mock: 30.2.0
 
   '@jest/expect-utils@30.0.4':
@@ -9670,7 +9578,7 @@ snapshots:
     dependencies:
       '@jest/types': 30.2.0
       '@sinonjs/fake-timers': 13.0.5
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jest-message-util: 30.2.0
       jest-mock: 30.2.0
       jest-util: 30.2.0
@@ -9690,7 +9598,7 @@ snapshots:
 
   '@jest/pattern@30.0.1':
     dependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jest-regex-util: 30.0.1
 
   '@jest/reporters@30.2.0':
@@ -9701,7 +9609,7 @@ snapshots:
       '@jest/transform': 30.2.0
       '@jest/types': 30.2.0
       '@jridgewell/trace-mapping': 0.3.31
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit-x: 0.2.2
@@ -9782,7 +9690,7 @@ snapshots:
       '@jest/schemas': 30.0.1
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
@@ -9792,15 +9700,10 @@ snapshots:
       '@jest/schemas': 30.0.5
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@jridgewell/gen-mapping@0.3.12':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.4
-      '@jridgewell/trace-mapping': 0.3.29
-
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -9812,12 +9715,6 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.29
 
-  '@jridgewell/gen-mapping@0.3.8':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.4
-      '@jridgewell/trace-mapping': 0.3.29
-
   '@jridgewell/remapping@2.3.5':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -9901,9 +9798,9 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@microsoft/1ds-core-js@4.3.8(tslib@2.8.1)':
+  '@microsoft/1ds-core-js@4.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-core-js': 3.3.8(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
@@ -9911,9 +9808,9 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
-  '@microsoft/1ds-post-js@4.3.8(tslib@2.8.1)':
+  '@microsoft/1ds-post-js@4.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/1ds-core-js': 4.3.8(tslib@2.8.1)
+      '@microsoft/1ds-core-js': 4.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
@@ -9921,25 +9818,25 @@ snapshots:
     transitivePeerDependencies:
       - tslib
 
-  '@microsoft/applicationinsights-channel-js@3.3.8(tslib@2.8.1)':
+  '@microsoft/applicationinsights-channel-js@3.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-common': 3.3.8(tslib@2.8.1)
-      '@microsoft/applicationinsights-core-js': 3.3.8(tslib@2.8.1)
+      '@microsoft/applicationinsights-common': 3.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
       '@nevware21/ts-utils': 0.12.5
       tslib: 2.8.1
 
-  '@microsoft/applicationinsights-common@3.3.8(tslib@2.8.1)':
+  '@microsoft/applicationinsights-common@3.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-core-js': 3.3.8(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-utils': 0.12.5
       tslib: 2.8.1
 
-  '@microsoft/applicationinsights-core-js@3.3.8(tslib@2.8.1)':
+  '@microsoft/applicationinsights-core-js@3.3.10(tslib@2.8.1)':
     dependencies:
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
@@ -9951,11 +9848,11 @@ snapshots:
     dependencies:
       '@nevware21/ts-utils': 0.12.5
 
-  '@microsoft/applicationinsights-web-basic@3.3.8(tslib@2.8.1)':
+  '@microsoft/applicationinsights-web-basic@3.3.10(tslib@2.8.1)':
     dependencies:
-      '@microsoft/applicationinsights-channel-js': 3.3.8(tslib@2.8.1)
-      '@microsoft/applicationinsights-common': 3.3.8(tslib@2.8.1)
-      '@microsoft/applicationinsights-core-js': 3.3.8(tslib@2.8.1)
+      '@microsoft/applicationinsights-channel-js': 3.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-common': 3.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-core-js': 3.3.10(tslib@2.8.1)
       '@microsoft/applicationinsights-shims': 3.0.1
       '@microsoft/dynamicproto-js': 2.0.3
       '@nevware21/ts-async': 0.5.4
@@ -9992,18 +9889,11 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@napi-rs/wasm-runtime@1.0.5':
-    dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
-      '@tybys/wasm-util': 0.10.1
-
   '@napi-rs/wasm-runtime@1.0.7':
     dependencies:
       '@emnapi/core': 1.5.0
       '@emnapi/runtime': 1.5.0
       '@tybys/wasm-util': 0.10.1
-    optional: true
 
   '@nevware21/ts-async@0.5.4':
     dependencies:
@@ -10011,30 +9901,30 @@ snapshots:
 
   '@nevware21/ts-utils@0.12.5': {}
 
-  '@next/env@15.5.4': {}
+  '@next/env@15.5.6': {}
 
-  '@next/swc-darwin-arm64@15.5.4':
+  '@next/swc-darwin-arm64@15.5.6':
     optional: true
 
-  '@next/swc-darwin-x64@15.5.4':
+  '@next/swc-darwin-x64@15.5.6':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@15.5.4':
+  '@next/swc-linux-arm64-gnu@15.5.6':
     optional: true
 
-  '@next/swc-linux-arm64-musl@15.5.4':
+  '@next/swc-linux-arm64-musl@15.5.6':
     optional: true
 
-  '@next/swc-linux-x64-gnu@15.5.4':
+  '@next/swc-linux-x64-gnu@15.5.6':
     optional: true
 
-  '@next/swc-linux-x64-musl@15.5.4':
+  '@next/swc-linux-x64-musl@15.5.6':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@15.5.4':
+  '@next/swc-win32-arm64-msvc@15.5.6':
     optional: true
 
-  '@next/swc-win32-x64-msvc@15.5.4':
+  '@next/swc-win32-x64-msvc@15.5.6':
     optional: true
 
   '@node-rs/crc32-android-arm-eabi@1.10.6':
@@ -10146,14 +10036,9 @@ snapshots:
   '@oxc-parser/binding-linux-x64-musl@0.95.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.93.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.0.5
-
   '@oxc-parser/binding-wasm32-wasi@0.95.0':
     dependencies:
       '@napi-rs/wasm-runtime': 1.0.7
-    optional: true
 
   '@oxc-parser/binding-win32-arm64-msvc@0.95.0':
     optional: true
@@ -10229,9 +10114,9 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
-  '@playwright/test@1.55.1':
+  '@playwright/test@1.56.1':
     dependencies:
-      playwright: 1.55.1
+      playwright: 1.56.1
 
   '@rolldown/pluginutils@1.0.0-beta.38': {}
 
@@ -10488,33 +10373,33 @@ snapshots:
 
   '@secretlint/types@10.2.2': {}
 
-  '@shikijs/core@3.12.2':
+  '@shikijs/core@3.13.0':
     dependencies:
-      '@shikijs/types': 3.12.2
+      '@shikijs/types': 3.13.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
-  '@shikijs/engine-javascript@3.12.2':
+  '@shikijs/engine-javascript@3.13.0':
     dependencies:
-      '@shikijs/types': 3.12.2
+      '@shikijs/types': 3.13.0
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 4.3.3
 
-  '@shikijs/engine-oniguruma@3.12.2':
+  '@shikijs/engine-oniguruma@3.13.0':
     dependencies:
-      '@shikijs/types': 3.12.2
+      '@shikijs/types': 3.13.0
       '@shikijs/vscode-textmate': 10.0.2
 
-  '@shikijs/langs@3.12.2':
+  '@shikijs/langs@3.13.0':
     dependencies:
-      '@shikijs/types': 3.12.2
+      '@shikijs/types': 3.13.0
 
-  '@shikijs/themes@3.12.2':
+  '@shikijs/themes@3.13.0':
     dependencies:
-      '@shikijs/types': 3.12.2
+      '@shikijs/types': 3.13.0
 
-  '@shikijs/types@3.12.2':
+  '@shikijs/types@3.13.0':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
@@ -10630,49 +10515,51 @@ snapshots:
     dependencies:
       solid-js: 1.9.9
 
-  '@stylistic/eslint-plugin-js@2.1.0(eslint@9.36.0(jiti@2.6.0))':
+  '@standard-schema/spec@1.0.0': {}
+
+  '@stylistic/eslint-plugin-js@2.1.0(eslint@9.38.0(jiti@2.6.1))':
     dependencies:
       '@types/eslint': 8.56.10
       acorn: 8.15.0
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-visitor-keys: 4.0.0
       espree: 10.0.1
 
-  '@stylistic/eslint-plugin-jsx@2.1.0(eslint@9.36.0(jiti@2.6.0))':
+  '@stylistic/eslint-plugin-jsx@2.1.0(eslint@9.38.0(jiti@2.6.1))':
     dependencies:
-      '@stylistic/eslint-plugin-js': 2.1.0(eslint@9.36.0(jiti@2.6.0))
+      '@stylistic/eslint-plugin-js': 2.1.0(eslint@9.38.0(jiti@2.6.1))
       '@types/eslint': 8.56.10
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       estraverse: 5.3.0
       picomatch: 4.0.2
 
-  '@stylistic/eslint-plugin-plus@2.1.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
+  '@stylistic/eslint-plugin-plus@2.1.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@types/eslint': 8.56.10
-      '@typescript-eslint/utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      eslint: 9.36.0(jiti@2.6.0)
+      '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@stylistic/eslint-plugin-ts@2.1.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
+  '@stylistic/eslint-plugin-ts@2.1.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@stylistic/eslint-plugin-js': 2.1.0(eslint@9.36.0(jiti@2.6.0))
+      '@stylistic/eslint-plugin-js': 2.1.0(eslint@9.38.0(jiti@2.6.1))
       '@types/eslint': 8.56.10
-      '@typescript-eslint/utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      eslint: 9.36.0(jiti@2.6.0)
+      '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@stylistic/eslint-plugin@2.1.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
+  '@stylistic/eslint-plugin@2.1.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@stylistic/eslint-plugin-js': 2.1.0(eslint@9.36.0(jiti@2.6.0))
-      '@stylistic/eslint-plugin-jsx': 2.1.0(eslint@9.36.0(jiti@2.6.0))
-      '@stylistic/eslint-plugin-plus': 2.1.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      '@stylistic/eslint-plugin-ts': 2.1.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
+      '@stylistic/eslint-plugin-js': 2.1.0(eslint@9.38.0(jiti@2.6.1))
+      '@stylistic/eslint-plugin-jsx': 2.1.0(eslint@9.38.0(jiti@2.6.1))
+      '@stylistic/eslint-plugin-plus': 2.1.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@stylistic/eslint-plugin-ts': 2.1.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       '@types/eslint': 8.56.10
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -10685,75 +10572,75 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/node@4.1.13':
+  '@tailwindcss/node@4.1.14':
     dependencies:
       '@jridgewell/remapping': 2.3.5
       enhanced-resolve: 5.18.3
-      jiti: 2.6.0
+      jiti: 2.6.1
       lightningcss: 1.30.1
       magic-string: 0.30.19
       source-map-js: 1.2.1
-      tailwindcss: 4.1.13
+      tailwindcss: 4.1.14
 
-  '@tailwindcss/oxide-android-arm64@4.1.13':
+  '@tailwindcss/oxide-android-arm64@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+  '@tailwindcss/oxide-darwin-arm64@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.13':
+  '@tailwindcss/oxide-darwin-x64@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+  '@tailwindcss/oxide-freebsd-x64@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.13': {}
+  '@tailwindcss/oxide-wasm32-wasi@4.1.14': {}
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.14':
     optional: true
 
-  '@tailwindcss/oxide@4.1.13':
+  '@tailwindcss/oxide@4.1.14':
     dependencies:
-      detect-libc: 2.1.1
+      detect-libc: 2.1.2
       tar: 7.5.1
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.13
-      '@tailwindcss/oxide-darwin-arm64': 4.1.13
-      '@tailwindcss/oxide-darwin-x64': 4.1.13
-      '@tailwindcss/oxide-freebsd-x64': 4.1.13
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.13
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.13
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.13
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.13
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.13
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.13
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.13
-
-  '@tailwindcss/vite@4.1.13(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
-    dependencies:
-      '@tailwindcss/node': 4.1.13
-      '@tailwindcss/oxide': 4.1.13
-      tailwindcss: 4.1.13
-      vite: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      '@tailwindcss/oxide-android-arm64': 4.1.14
+      '@tailwindcss/oxide-darwin-arm64': 4.1.14
+      '@tailwindcss/oxide-darwin-x64': 4.1.14
+      '@tailwindcss/oxide-freebsd-x64': 4.1.14
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.14
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.14
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.14
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.14
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.14
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.14
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.14
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.14
+
+  '@tailwindcss/vite@4.1.14(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
+    dependencies:
+      '@tailwindcss/node': 4.1.14
+      '@tailwindcss/oxide': 4.1.14
+      tailwindcss: 4.1.14
+      vite: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
   '@testing-library/dom@10.4.1':
     dependencies:
@@ -10766,7 +10653,7 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.9.0':
+  '@testing-library/jest-dom@6.9.1':
     dependencies:
       '@adobe/css-tools': 4.4.4
       aria-query: 5.3.2
@@ -10825,14 +10712,14 @@ snapshots:
 
   '@total-typescript/ts-reset@0.6.1': {}
 
-  '@trpc/client@11.6.0(@trpc/server@11.6.0(typescript@5.9.2))(typescript@5.9.2)':
+  '@trpc/client@11.6.0(@trpc/server@11.6.0(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
-      '@trpc/server': 11.6.0(typescript@5.9.2)
-      typescript: 5.9.2
+      '@trpc/server': 11.6.0(typescript@5.9.3)
+      typescript: 5.9.3
 
-  '@trpc/server@11.6.0(typescript@5.9.2)':
+  '@trpc/server@11.6.0(typescript@5.9.3)':
     dependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
   '@tsconfig/node10@1.0.9': {}
 
@@ -10907,7 +10794,7 @@ snapshots:
 
   '@types/jsdom@21.1.7':
     dependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       '@types/tough-cookie': 4.0.5
       parse5: 7.2.1
 
@@ -10927,14 +10814,14 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@20.19.21':
+  '@types/node@20.19.22':
     dependencies:
       undici-types: 6.21.0
     optional: true
 
-  '@types/node@24.6.0':
+  '@types/node@24.8.1':
     dependencies:
-      undici-types: 7.13.0
+      undici-types: 7.14.0
 
   '@types/normalize-package-data@2.4.4': {}
 
@@ -10953,7 +10840,7 @@ snapshots:
 
   '@types/stylus@0.48.43':
     dependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
 
   '@types/tough-cookie@4.0.5': {}
 
@@ -10963,14 +10850,14 @@ snapshots:
 
   '@types/vscode-webview@1.57.5': {}
 
-  '@types/vscode@1.104.0': {}
+  '@types/vscode@1.105.0': {}
 
   '@types/whatwg-mimetype@3.0.2':
     optional: true
 
   '@types/ws@8.18.1':
     dependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
 
   '@types/yargs-parser@21.0.3': {}
 
@@ -10978,34 +10865,34 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
+      '@typescript-eslint/parser': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 7.11.0
-      '@typescript-eslint/type-utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      '@typescript-eslint/utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
+      '@typescript-eslint/type-utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 7.11.0
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.9.2)
+      ts-api-utils: 1.3.0(typescript@5.9.3)
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
+  '@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.11.0
       '@typescript-eslint/types': 7.11.0
-      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 7.11.0
       debug: 4.4.1
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
@@ -11014,21 +10901,21 @@ snapshots:
       '@typescript-eslint/types': 7.11.0
       '@typescript-eslint/visitor-keys': 7.11.0
 
-  '@typescript-eslint/type-utils@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
+  '@typescript-eslint/type-utils@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.1
-      eslint: 9.36.0(jiti@2.6.0)
-      ts-api-utils: 1.3.0(typescript@5.9.2)
+      eslint: 9.38.0(jiti@2.6.1)
+      ts-api-utils: 1.3.0(typescript@5.9.3)
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@7.11.0': {}
 
-  '@typescript-eslint/typescript-estree@7.11.0(typescript@5.9.2)':
+  '@typescript-eslint/typescript-estree@7.11.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 7.11.0
       '@typescript-eslint/visitor-keys': 7.11.0
@@ -11037,19 +10924,19 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.7.2
-      ts-api-utils: 1.3.0(typescript@5.9.2)
+      ts-api-utils: 1.3.0(typescript@5.9.3)
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)':
+  '@typescript-eslint/utils@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.36.0(jiti@2.6.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.38.0(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 7.11.0
       '@typescript-eslint/types': 7.11.0
-      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.9.2)
-      eslint: 9.36.0(jiti@2.6.0)
+      '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -11128,7 +11015,7 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vitejs/plugin-react@5.0.4(vite@5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))':
+  '@vitejs/plugin-react@5.0.4(vite@5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.4)
@@ -11136,11 +11023,11 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.38
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
+      vite: 5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@5.0.4(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
+  '@vitejs/plugin-react@5.0.4(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.4)
@@ -11148,7 +11035,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.38
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -11167,37 +11054,38 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/expect@4.0.0-beta.8':
+  '@vitest/expect@4.0.0-beta.18':
     dependencies:
+      '@standard-schema/spec': 1.0.0
       '@types/chai': 5.2.2
-      '@vitest/spy': 4.0.0-beta.8
-      '@vitest/utils': 4.0.0-beta.8
-      chai: 5.2.1
-      tinyrainbow: 2.0.0
+      '@vitest/spy': 4.0.0-beta.18
+      '@vitest/utils': 4.0.0-beta.18
+      chai: 6.2.0
+      tinyrainbow: 3.0.3
 
-  '@vitest/mocker@2.1.8(vite@5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))':
+  '@vitest/mocker@2.1.8(vite@5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))':
     dependencies:
       '@vitest/spy': 2.1.8
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
+      vite: 5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
 
-  '@vitest/mocker@3.2.4(vite@7.1.3(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
+  '@vitest/mocker@3.2.4(vite@7.1.3(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 7.1.3(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite: 7.1.3(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
-  '@vitest/mocker@4.0.0-beta.8(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
+  '@vitest/mocker@4.0.0-beta.18(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
     dependencies:
-      '@vitest/spy': 4.0.0-beta.8
+      '@vitest/spy': 4.0.0-beta.18
       estree-walker: 3.0.3
-      magic-string: 0.30.17
+      magic-string: 0.30.19
     optionalDependencies:
-      vite: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
   '@vitest/pretty-format@2.1.8':
     dependencies:
@@ -11211,9 +11099,9 @@ snapshots:
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/pretty-format@4.0.0-beta.8':
+  '@vitest/pretty-format@4.0.0-beta.18':
     dependencies:
-      tinyrainbow: 2.0.0
+      tinyrainbow: 3.0.3
 
   '@vitest/runner@2.1.8':
     dependencies:
@@ -11226,11 +11114,10 @@ snapshots:
       pathe: 2.0.3
       strip-literal: 3.0.0
 
-  '@vitest/runner@4.0.0-beta.8':
+  '@vitest/runner@4.0.0-beta.18':
     dependencies:
-      '@vitest/utils': 4.0.0-beta.8
+      '@vitest/utils': 4.0.0-beta.18
       pathe: 2.0.3
-      strip-literal: 3.0.0
 
   '@vitest/snapshot@2.1.8':
     dependencies:
@@ -11244,10 +11131,10 @@ snapshots:
       magic-string: 0.30.17
       pathe: 2.0.3
 
-  '@vitest/snapshot@4.0.0-beta.8':
+  '@vitest/snapshot@4.0.0-beta.18':
     dependencies:
-      '@vitest/pretty-format': 4.0.0-beta.8
-      magic-string: 0.30.17
+      '@vitest/pretty-format': 4.0.0-beta.18
+      magic-string: 0.30.19
       pathe: 2.0.3
 
   '@vitest/spy@2.1.8':
@@ -11258,7 +11145,7 @@ snapshots:
     dependencies:
       tinyspy: 4.0.3
 
-  '@vitest/spy@4.0.0-beta.8': {}
+  '@vitest/spy@4.0.0-beta.18': {}
 
   '@vitest/utils@2.1.8':
     dependencies:
@@ -11272,19 +11159,18 @@ snapshots:
       loupe: 3.1.4
       tinyrainbow: 2.0.0
 
-  '@vitest/utils@4.0.0-beta.8':
+  '@vitest/utils@4.0.0-beta.18':
     dependencies:
-      '@vitest/pretty-format': 4.0.0-beta.8
-      loupe: 3.2.0
-      tinyrainbow: 2.0.0
+      '@vitest/pretty-format': 4.0.0-beta.18
+      tinyrainbow: 3.0.3
 
-  '@vscode/codicons@0.0.40': {}
+  '@vscode/codicons@0.0.41': {}
 
-  '@vscode/extension-telemetry@1.0.0(tslib@2.8.1)':
+  '@vscode/extension-telemetry@1.1.0(tslib@2.8.1)':
     dependencies:
-      '@microsoft/1ds-core-js': 4.3.8(tslib@2.8.1)
-      '@microsoft/1ds-post-js': 4.3.8(tslib@2.8.1)
-      '@microsoft/applicationinsights-web-basic': 3.3.8(tslib@2.8.1)
+      '@microsoft/1ds-core-js': 4.3.10(tslib@2.8.1)
+      '@microsoft/1ds-post-js': 4.3.10(tslib@2.8.1)
+      '@microsoft/applicationinsights-web-basic': 3.3.10(tslib@2.8.1)
     transitivePeerDependencies:
       - tslib
 
@@ -11526,12 +11412,12 @@ snapshots:
     dependencies:
       '@types/babel__core': 7.20.5
 
-  babel-plugin-jsx-dom-expressions@0.40.1(@babel/core@7.28.0):
+  babel-plugin-jsx-dom-expressions@0.40.1(@babel/core@7.28.4):
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.28.4
       '@babel/helper-module-imports': 7.18.6
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/types': 7.28.2
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/types': 7.28.4
       html-entities: 2.3.3
       parse5: 7.3.0
       validate-html-nesting: 1.2.3
@@ -11585,10 +11471,10 @@ snapshots:
       babel-plugin-jest-hoist: 30.2.0
       babel-preset-current-node-syntax: 1.2.0(@babel/core@7.28.4)
 
-  babel-preset-solid@1.9.9(@babel/core@7.28.0)(solid-js@1.9.9):
+  babel-preset-solid@1.9.9(@babel/core@7.28.4)(solid-js@1.9.9):
     dependencies:
-      '@babel/core': 7.28.0
-      babel-plugin-jsx-dom-expressions: 0.40.1(@babel/core@7.28.0)
+      '@babel/core': 7.28.4
+      babel-plugin-jsx-dom-expressions: 0.40.1(@babel/core@7.28.4)
     optionalDependencies:
       solid-js: 1.9.9
 
@@ -11711,7 +11597,7 @@ snapshots:
 
   caniuse-lite@1.0.30001735: {}
 
-  caniuse-lite@1.0.30001746: {}
+  caniuse-lite@1.0.30001751: {}
 
   ccount@2.0.1: {}
 
@@ -11723,13 +11609,7 @@ snapshots:
       loupe: 3.1.4
       pathval: 2.0.1
 
-  chai@5.2.1:
-    dependencies:
-      assertion-error: 2.0.1
-      check-error: 2.1.1
-      deep-eql: 5.0.2
-      loupe: 3.2.0
-      pathval: 2.0.1
+  chai@6.2.0: {}
 
   chalk@4.1.2:
     dependencies:
@@ -11980,7 +11860,10 @@ snapshots:
   detect-libc@1.0.3:
     optional: true
 
-  detect-libc@2.1.1: {}
+  detect-libc@2.1.1:
+    optional: true
+
+  detect-libc@2.1.2: {}
 
   detect-newline@3.1.0: {}
 
@@ -12135,34 +12018,34 @@ snapshots:
       '@esbuild/win32-ia32': 0.21.5
       '@esbuild/win32-x64': 0.21.5
 
-  esbuild@0.25.10:
+  esbuild@0.25.11:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.10
-      '@esbuild/android-arm': 0.25.10
-      '@esbuild/android-arm64': 0.25.10
-      '@esbuild/android-x64': 0.25.10
-      '@esbuild/darwin-arm64': 0.25.10
-      '@esbuild/darwin-x64': 0.25.10
-      '@esbuild/freebsd-arm64': 0.25.10
-      '@esbuild/freebsd-x64': 0.25.10
-      '@esbuild/linux-arm': 0.25.10
-      '@esbuild/linux-arm64': 0.25.10
-      '@esbuild/linux-ia32': 0.25.10
-      '@esbuild/linux-loong64': 0.25.10
-      '@esbuild/linux-mips64el': 0.25.10
-      '@esbuild/linux-ppc64': 0.25.10
-      '@esbuild/linux-riscv64': 0.25.10
-      '@esbuild/linux-s390x': 0.25.10
-      '@esbuild/linux-x64': 0.25.10
-      '@esbuild/netbsd-arm64': 0.25.10
-      '@esbuild/netbsd-x64': 0.25.10
-      '@esbuild/openbsd-arm64': 0.25.10
-      '@esbuild/openbsd-x64': 0.25.10
-      '@esbuild/openharmony-arm64': 0.25.10
-      '@esbuild/sunos-x64': 0.25.10
-      '@esbuild/win32-arm64': 0.25.10
-      '@esbuild/win32-ia32': 0.25.10
-      '@esbuild/win32-x64': 0.25.10
+      '@esbuild/aix-ppc64': 0.25.11
+      '@esbuild/android-arm': 0.25.11
+      '@esbuild/android-arm64': 0.25.11
+      '@esbuild/android-x64': 0.25.11
+      '@esbuild/darwin-arm64': 0.25.11
+      '@esbuild/darwin-x64': 0.25.11
+      '@esbuild/freebsd-arm64': 0.25.11
+      '@esbuild/freebsd-x64': 0.25.11
+      '@esbuild/linux-arm': 0.25.11
+      '@esbuild/linux-arm64': 0.25.11
+      '@esbuild/linux-ia32': 0.25.11
+      '@esbuild/linux-loong64': 0.25.11
+      '@esbuild/linux-mips64el': 0.25.11
+      '@esbuild/linux-ppc64': 0.25.11
+      '@esbuild/linux-riscv64': 0.25.11
+      '@esbuild/linux-s390x': 0.25.11
+      '@esbuild/linux-x64': 0.25.11
+      '@esbuild/netbsd-arm64': 0.25.11
+      '@esbuild/netbsd-x64': 0.25.11
+      '@esbuild/openbsd-arm64': 0.25.11
+      '@esbuild/openbsd-x64': 0.25.11
+      '@esbuild/openharmony-arm64': 0.25.11
+      '@esbuild/sunos-x64': 0.25.11
+      '@esbuild/win32-arm64': 0.25.11
+      '@esbuild/win32-ia32': 0.25.11
+      '@esbuild/win32-x64': 0.25.11
 
   esbuild@0.25.6:
     optionalDependencies:
@@ -12203,9 +12086,9 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-compat-utils@0.5.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-compat-utils@0.5.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       semver: 7.7.2
 
   eslint-config-flat-gitignore@0.1.5:
@@ -12226,39 +12109,39 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-merge-processors@0.1.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-merge-processors@0.1.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
 
-  eslint-plugin-antfu@2.3.3(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-antfu@2.3.3(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@antfu/utils': 0.7.8
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
 
-  eslint-plugin-command@0.2.3(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-command@0.2.3(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.43.1
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
 
-  eslint-plugin-es-x@7.6.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-es-x@7.6.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.36.0(jiti@2.6.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.10.0
-      eslint: 9.36.0(jiti@2.6.0)
-      eslint-compat-utils: 0.5.0(eslint@9.36.0(jiti@2.6.0))
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-compat-utils: 0.5.0(eslint@9.38.0(jiti@2.6.1))
 
-  eslint-plugin-eslint-comments@3.2.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-eslint-comments@3.2.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       ignore: 5.3.1
 
-  eslint-plugin-import-x@0.5.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2):
+  eslint-plugin-import-x@0.5.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
+      '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.1
       doctrine: 3.0.0
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.7.5
       is-glob: 4.0.3
@@ -12269,44 +12152,44 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-jsdoc@48.2.7(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-jsdoc@48.2.7(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.43.1
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.4.1
       escape-string-regexp: 4.0.0
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       esquery: 1.5.0
       semver: 7.7.2
       spdx-expression-parse: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsonc@2.16.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-jsonc@2.16.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.36.0(jiti@2.6.0))
-      eslint: 9.36.0(jiti@2.6.0)
-      eslint-compat-utils: 0.5.0(eslint@9.36.0(jiti@2.6.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.38.0(jiti@2.6.1))
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-compat-utils: 0.5.0(eslint@9.38.0(jiti@2.6.1))
       espree: 9.6.1
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.0
       natural-compare: 1.4.0
       synckit: 0.6.2
 
-  eslint-plugin-markdown@5.0.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-markdown@5.0.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       mdast-util-from-markdown: 0.8.5
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-n@17.7.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-n@17.7.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.36.0(jiti@2.6.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.38.0(jiti@2.6.1))
       enhanced-resolve: 5.18.2
-      eslint: 9.36.0(jiti@2.6.0)
-      eslint-plugin-es-x: 7.6.0(eslint@9.36.0(jiti@2.6.0))
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-plugin-es-x: 7.6.0(eslint@9.38.0(jiti@2.6.1))
       get-tsconfig: 4.7.5
       globals: 15.3.0
       ignore: 5.3.1
@@ -12315,48 +12198,48 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.1.0: {}
 
-  eslint-plugin-perfectionist@2.10.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)(vue-eslint-parser@9.4.2(eslint@9.36.0(jiti@2.6.0))):
+  eslint-plugin-perfectionist@2.10.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vue-eslint-parser@9.4.2(eslint@9.38.0(jiti@2.6.1))):
     dependencies:
-      '@typescript-eslint/utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      eslint: 9.36.0(jiti@2.6.0)
+      '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
       minimatch: 9.0.4
       natural-compare-lite: 1.4.0
     optionalDependencies:
-      vue-eslint-parser: 9.4.2(eslint@9.36.0(jiti@2.6.0))
+      vue-eslint-parser: 9.4.2(eslint@9.38.0(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-regexp@2.6.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-regexp@2.6.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.36.0(jiti@2.6.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.10.0
       comment-parser: 1.4.1
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       jsdoc-type-pratt-parser: 4.0.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-toml@0.11.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-toml@0.11.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.1
-      eslint: 9.36.0(jiti@2.6.0)
-      eslint-compat-utils: 0.5.0(eslint@9.36.0(jiti@2.6.0))
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-compat-utils: 0.5.0(eslint@9.38.0(jiti@2.6.1))
       lodash: 4.17.21
       toml-eslint-parser: 0.9.3
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@53.0.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-unicorn@53.0.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.24.6
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.36.0(jiti@2.6.0))
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint/eslintrc': 3.1.0
       ci-info: 4.0.0
       clean-regexp: 1.0.0
       core-js-compat: 3.37.1
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       esquery: 1.5.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
@@ -12370,53 +12253,53 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unused-imports@3.2.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-unused-imports@3.2.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-rule-composer: 0.3.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)(vitest@3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
     dependencies:
-      '@typescript-eslint/utils': 7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      eslint: 9.36.0(jiti@2.6.0)
+      '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.2)
-      vitest: 3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      vitest: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-vue@9.26.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-vue@9.26.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.36.0(jiti@2.6.0))
-      eslint: 9.36.0(jiti@2.6.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.38.0(jiti@2.6.1))
+      eslint: 9.38.0(jiti@2.6.1)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.0
       semver: 7.7.2
-      vue-eslint-parser: 9.4.2(eslint@9.36.0(jiti@2.6.0))
+      vue-eslint-parser: 9.4.2(eslint@9.38.0(jiti@2.6.1))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-yml@1.14.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-yml@1.14.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.1
-      eslint: 9.36.0(jiti@2.6.0)
-      eslint-compat-utils: 0.5.0(eslint@9.36.0(jiti@2.6.0))
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-compat-utils: 0.5.0(eslint@9.38.0(jiti@2.6.1))
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.2.3
     transitivePeerDependencies:
       - supports-color
 
-  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.4.34)(eslint@9.36.0(jiti@2.6.0)):
+  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       '@vue/compiler-sfc': 3.4.34
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
 
   eslint-rule-composer@0.3.0: {}
 
@@ -12436,21 +12319,20 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.36.0(jiti@2.6.0):
+  eslint@9.38.0(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0(jiti@2.6.0))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.21.0
-      '@eslint/config-helpers': 0.3.1
-      '@eslint/core': 0.15.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.1
+      '@eslint/core': 0.16.0
       '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.36.0
-      '@eslint/plugin-kit': 0.3.5
+      '@eslint/js': 9.38.0
+      '@eslint/plugin-kit': 0.4.0
       '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
       '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
@@ -12474,7 +12356,7 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
-      jiti: 2.6.0
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -12830,7 +12712,7 @@ snapshots:
 
   happy-dom@20.0.0:
     dependencies:
-      '@types/node': 20.19.21
+      '@types/node': 20.19.22
       '@types/whatwg-mimetype': 3.0.2
       whatwg-mimetype: 3.0.0
     optional: true
@@ -13124,7 +13006,7 @@ snapshots:
       '@jest/expect': 30.2.0
       '@jest/test-result': 30.2.0
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.7.0
@@ -13144,15 +13026,15 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2)):
+  jest-cli@30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3)):
     dependencies:
-      '@jest/core': 30.2.0(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+      '@jest/core': 30.2.0(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       '@jest/test-result': 30.2.0
       '@jest/types': 30.2.0
       chalk: 4.1.2
       exit-x: 0.2.2
       import-local: 3.2.0
-      jest-config: 30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+      jest-config: 30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       jest-util: 30.2.0
       jest-validate: 30.2.0
       yargs: 17.7.2
@@ -13163,7 +13045,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2)):
+  jest-config@30.2.0(patch_hash=7183ebeb461331a42f7b4be95c553b6304fa99af85998b66f7f8c91aa96e8d46)(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3)):
     dependencies:
       '@babel/core': 7.28.4
       '@jest/get-type': 30.1.0
@@ -13190,8 +13072,8 @@ snapshots:
       slash: 3.0.0
       strip-json-comments: 3.1.1
     optionalDependencies:
-      '@types/node': 24.6.0
-      ts-node: 10.9.2(@types/node@24.6.0)(typescript@5.9.2)
+      '@types/node': 24.8.1
+      ts-node: 10.9.2(@types/node@24.8.1)(typescript@5.9.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -13227,7 +13109,7 @@ snapshots:
       '@jest/environment': 30.2.0
       '@jest/environment-jsdom-abstract': 30.2.0(jsdom@26.1.0)
       '@types/jsdom': 21.1.7
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jsdom: 26.1.0
     transitivePeerDependencies:
       - bufferutil
@@ -13239,7 +13121,7 @@ snapshots:
       '@jest/environment': 30.2.0
       '@jest/fake-timers': 30.2.0
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jest-mock: 30.2.0
       jest-util: 30.2.0
       jest-validate: 30.2.0
@@ -13247,7 +13129,7 @@ snapshots:
   jest-haste-map@30.2.0:
     dependencies:
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -13305,13 +13187,13 @@ snapshots:
   jest-mock@30.0.2:
     dependencies:
       '@jest/types': 30.0.1
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jest-util: 30.0.2
 
   jest-mock@30.2.0:
     dependencies:
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       jest-util: 30.2.0
 
   jest-pnp-resolver@1.2.3(jest-resolve@30.2.0):
@@ -13345,7 +13227,7 @@ snapshots:
       '@jest/test-result': 30.2.0
       '@jest/transform': 30.2.0
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       chalk: 4.1.2
       emittery: 0.13.1
       exit-x: 0.2.2
@@ -13374,7 +13256,7 @@ snapshots:
       '@jest/test-result': 30.2.0
       '@jest/transform': 30.2.0
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       chalk: 4.1.2
       cjs-module-lexer: 2.1.0
       collect-v8-coverage: 1.0.2
@@ -13421,7 +13303,7 @@ snapshots:
   jest-util@30.0.2:
     dependencies:
       '@jest/types': 30.0.1
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       chalk: 4.1.2
       ci-info: 4.3.0
       graceful-fs: 4.2.11
@@ -13430,7 +13312,7 @@ snapshots:
   jest-util@30.2.0:
     dependencies:
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       chalk: 4.1.2
       ci-info: 4.3.0
       graceful-fs: 4.2.11
@@ -13449,7 +13331,7 @@ snapshots:
     dependencies:
       '@jest/test-result': 30.2.0
       '@jest/types': 30.2.0
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -13458,18 +13340,18 @@ snapshots:
 
   jest-worker@30.2.0:
     dependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       '@ungap/structured-clone': 1.3.0
       jest-util: 30.2.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2)):
+  jest@30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3)):
     dependencies:
-      '@jest/core': 30.2.0(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+      '@jest/core': 30.2.0(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       '@jest/types': 30.2.0
       import-local: 3.2.0
-      jest-cli: 30.2.0(@types/node@24.6.0)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+      jest-cli: 30.2.0(@types/node@24.8.1)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -13479,7 +13361,7 @@ snapshots:
 
   jiti@1.21.7: {}
 
-  jiti@2.6.0: {}
+  jiti@2.6.1: {}
 
   joycon@3.1.1: {}
 
@@ -13598,7 +13480,7 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
-  less@4.4.1:
+  less@4.4.2:
     dependencies:
       copy-anything: 2.0.6
       parse-node-version: 1.0.1
@@ -13651,7 +13533,7 @@ snapshots:
 
   lightningcss@1.30.1:
     dependencies:
-      detect-libc: 2.1.1
+      detect-libc: 2.1.2
     optionalDependencies:
       lightningcss-darwin-arm64: 1.30.1
       lightningcss-darwin-x64: 1.30.1
@@ -13725,8 +13607,6 @@ snapshots:
 
   loupe@3.1.4: {}
 
-  loupe@3.2.0: {}
-
   lru-cache@10.4.3: {}
 
   lru-cache@11.2.2: {}
@@ -13739,7 +13619,7 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  lucide-solid@0.544.0(solid-js@1.9.9):
+  lucide-solid@0.546.0(solid-js@1.9.9):
     dependencies:
       solid-js: 1.9.9
 
@@ -13761,7 +13641,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   make-error@1.3.6: {}
 
@@ -13933,25 +13813,25 @@ snapshots:
       sax: 1.4.1
     optional: true
 
-  next@15.5.4(@babel/core@7.28.4)(@playwright/test@1.55.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2):
+  next@15.5.6(@babel/core@7.28.4)(@playwright/test@1.56.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.93.2):
     dependencies:
-      '@next/env': 15.5.4
+      '@next/env': 15.5.6
       '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001746
+      caniuse-lite: 1.0.30001751
       postcss: 8.4.31
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
       styled-jsx: 5.1.6(@babel/core@7.28.4)(react@19.2.0)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 15.5.4
-      '@next/swc-darwin-x64': 15.5.4
-      '@next/swc-linux-arm64-gnu': 15.5.4
-      '@next/swc-linux-arm64-musl': 15.5.4
-      '@next/swc-linux-x64-gnu': 15.5.4
-      '@next/swc-linux-x64-musl': 15.5.4
-      '@next/swc-win32-arm64-msvc': 15.5.4
-      '@next/swc-win32-x64-msvc': 15.5.4
-      '@playwright/test': 1.55.1
+      '@next/swc-darwin-arm64': 15.5.6
+      '@next/swc-darwin-x64': 15.5.6
+      '@next/swc-linux-arm64-gnu': 15.5.6
+      '@next/swc-linux-arm64-musl': 15.5.6
+      '@next/swc-linux-x64-gnu': 15.5.6
+      '@next/swc-linux-x64-musl': 15.5.6
+      '@next/swc-win32-arm64-msvc': 15.5.6
+      '@next/swc-win32-x64-msvc': 15.5.6
+      '@playwright/test': 1.56.1
       sass: 1.93.2
       sharp: 0.34.4
     transitivePeerDependencies:
@@ -14247,11 +14127,11 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.3
 
-  playwright-core@1.55.1: {}
+  playwright-core@1.56.1: {}
 
-  playwright@1.55.1:
+  playwright@1.56.1:
     dependencies:
-      playwright-core: 1.55.1
+      playwright-core: 1.56.1
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -14271,19 +14151,19 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.5.6
 
-  postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2)):
+  postcss-load-config@4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3)):
     dependencies:
       lilconfig: 3.1.3
       yaml: 2.4.2
     optionalDependencies:
       postcss: 8.5.6
-      ts-node: 10.9.2(@types/node@24.6.0)(typescript@5.9.2)
+      ts-node: 10.9.2(@types/node@24.8.1)(typescript@5.9.3)
 
-  postcss-load-config@6.0.1(jiti@2.6.0)(postcss@8.5.6)(yaml@2.4.2):
+  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.4.2):
     dependencies:
       lilconfig: 3.1.1
     optionalDependencies:
-      jiti: 2.6.0
+      jiti: 2.6.1
       postcss: 8.5.6
       yaml: 2.4.2
 
@@ -14670,6 +14550,8 @@ snapshots:
 
   semver@7.7.2: {}
 
+  semver@7.7.3: {}
+
   seroval-plugins@1.3.2(seroval@1.3.2):
     dependencies:
       seroval: 1.3.2
@@ -14681,8 +14563,8 @@ snapshots:
   sharp@0.34.4:
     dependencies:
       '@img/colour': 1.0.0
-      detect-libc: 2.1.1
-      semver: 7.7.2
+      detect-libc: 2.1.2
+      semver: 7.7.3
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.34.4
       '@img/sharp-darwin-x64': 0.34.4
@@ -14714,14 +14596,14 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@3.12.2:
+  shiki@3.13.0:
     dependencies:
-      '@shikijs/core': 3.12.2
-      '@shikijs/engine-javascript': 3.12.2
-      '@shikijs/engine-oniguruma': 3.12.2
-      '@shikijs/langs': 3.12.2
-      '@shikijs/themes': 3.12.2
-      '@shikijs/types': 3.12.2
+      '@shikijs/core': 3.13.0
+      '@shikijs/engine-javascript': 3.13.0
+      '@shikijs/engine-oniguruma': 3.13.0
+      '@shikijs/langs': 3.13.0
+      '@shikijs/themes': 3.13.0
+      '@shikijs/types': 3.13.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
@@ -14801,9 +14683,9 @@ snapshots:
 
   solid-refresh@0.6.3(solid-js@1.9.9):
     dependencies:
-      '@babel/generator': 7.28.0
+      '@babel/generator': 7.28.3
       '@babel/helper-module-imports': 7.27.1
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.4
       solid-js: 1.9.9
     transitivePeerDependencies:
       - supports-color
@@ -14991,11 +14873,11 @@ snapshots:
 
   tailwind-merge@3.3.1: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@4.1.13):
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.14):
     dependencies:
-      tailwindcss: 4.1.13
+      tailwindcss: 4.1.14
 
-  tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2)):
+  tailwindcss@3.4.17(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -15014,7 +14896,7 @@ snapshots:
       postcss: 8.5.6
       postcss-import: 15.1.0(postcss@8.5.6)
       postcss-js: 4.0.1(postcss@8.5.6)
-      postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2))
+      postcss-load-config: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3))
       postcss-nested: 6.2.0(postcss@8.5.6)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.10
@@ -15022,7 +14904,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@4.1.13: {}
+  tailwindcss@4.1.14: {}
 
   tapable@2.2.2: {}
 
@@ -15094,10 +14976,14 @@ snapshots:
 
   tinypool@1.1.1: {}
 
+  tinypool@2.0.0: {}
+
   tinyrainbow@1.2.0: {}
 
   tinyrainbow@2.0.0: {}
 
+  tinyrainbow@3.0.3: {}
+
   tinyspy@3.0.2: {}
 
   tinyspy@4.0.3: {}
@@ -15136,27 +15022,27 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
-  ts-api-utils@1.3.0(typescript@5.9.2):
+  ts-api-utils@1.3.0(typescript@5.9.3):
     dependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
   ts-interface-checker@0.1.13: {}
 
-  ts-node@10.9.2(@types/node@24.6.0)(typescript@5.9.2):
+  ts-node@10.9.2(@types/node@24.8.1)(typescript@5.9.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.9
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       acorn: 8.15.0
       acorn-walk: 8.3.2
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 5.9.2
+      typescript: 5.9.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
@@ -15164,7 +15050,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.5.0(jiti@2.6.0)(postcss@8.5.6)(typescript@5.9.2)(yaml@2.4.2):
+  tsup@8.5.0(jiti@2.6.1)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.4.2):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.6)
       cac: 6.7.14
@@ -15175,7 +15061,7 @@ snapshots:
       fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.0)(postcss@8.5.6)(yaml@2.4.2)
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.4.2)
       resolve-from: 5.0.0
       rollup: 4.42.0
       source-map: 0.8.0-beta.0
@@ -15185,7 +15071,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       postcss: 8.5.6
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - jiti
       - supports-color
@@ -15225,7 +15111,7 @@ snapshots:
       tunnel: 0.0.6
       underscore: 1.13.7
 
-  typescript@5.9.2: {}
+  typescript@5.9.3: {}
 
   uc.micro@2.1.0: {}
 
@@ -15238,7 +15124,7 @@ snapshots:
   undici-types@6.21.0:
     optional: true
 
-  undici-types@7.13.0: {}
+  undici-types@7.14.0: {}
 
   undici@7.16.0: {}
 
@@ -15257,7 +15143,7 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
-  unist-util-is@6.0.0:
+  unist-util-is@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
 
@@ -15273,16 +15159,16 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  unist-util-visit-parents@6.0.1:
+  unist-util-visit-parents@6.0.2:
     dependencies:
       '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
+      unist-util-is: 6.0.1
 
   unist-util-visit@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
-      unist-util-is: 6.0.0
-      unist-util-visit-parents: 6.0.1
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
 
   universalify@0.1.2: {}
 
@@ -15367,13 +15253,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-node@2.1.8(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0):
+  vite-node@2.1.8(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 1.1.2
-      vite: 5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
+      vite: 5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -15385,16 +15271,15 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.2.4(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vite-node@3.2.4(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite: 5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
     transitivePeerDependencies:
       - '@types/node'
-      - jiti
       - less
       - lightningcss
       - sass
@@ -15403,81 +15288,79 @@ snapshots:
       - sugarss
       - supports-color
       - terser
-      - tsx
-      - yaml
 
-  vite-plugin-solid@2.11.8(@testing-library/jest-dom@6.9.0)(solid-js@1.9.9)(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
+  vite-plugin-solid@2.11.9(@testing-library/jest-dom@6.9.1)(solid-js@1.9.9)(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
     dependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.28.4
       '@types/babel__core': 7.20.5
-      babel-preset-solid: 1.9.9(@babel/core@7.28.0)(solid-js@1.9.9)
+      babel-preset-solid: 1.9.9(@babel/core@7.28.4)(solid-js@1.9.9)
       merge-anything: 5.1.7
       solid-js: 1.9.9
       solid-refresh: 0.6.3(solid-js@1.9.9)
-      vite: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
-      vitefu: 1.1.1(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+      vite: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vitefu: 1.1.1(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
     optionalDependencies:
-      '@testing-library/jest-dom': 6.9.0
+      '@testing-library/jest-dom': 6.9.1
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0):
+  vite@5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
       rollup: 4.32.0
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       fsevents: 2.3.3
-      less: 4.4.1
+      less: 4.4.2
       lightningcss: 1.30.1
       sass: 1.93.2
       stylus: 0.64.0
 
-  vite@7.1.3(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
     dependencies:
-      esbuild: 0.25.10
+      esbuild: 0.25.11
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
       rollup: 4.49.0
-      tinyglobby: 0.2.14
+      tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       fsevents: 2.3.3
-      jiti: 2.6.0
-      less: 4.4.1
+      jiti: 2.6.1
+      less: 4.4.2
       lightningcss: 1.30.1
       sass: 1.93.2
       stylus: 0.64.0
       yaml: 2.4.2
 
-  vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vite@7.1.3(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
     dependencies:
-      esbuild: 0.25.10
+      esbuild: 0.25.11
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
       rollup: 4.49.0
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.14
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       fsevents: 2.3.3
-      jiti: 2.6.0
-      less: 4.4.1
+      jiti: 2.6.1
+      less: 4.4.2
       lightningcss: 1.30.1
       sass: 1.93.2
       stylus: 0.64.0
       yaml: 2.4.2
 
-  vitefu@1.1.1(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
+  vitefu@1.1.1(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
     optionalDependencies:
-      vite: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
-  vitest@2.1.8(@types/node@24.6.0)(happy-dom@14.12.3)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0):
+  vitest@2.1.8(@types/node@24.8.1)(happy-dom@14.12.3)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0):
     dependencies:
       '@vitest/expect': 2.1.8
-      '@vitest/mocker': 2.1.8(vite@5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))
+      '@vitest/mocker': 2.1.8(vite@5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.8
       '@vitest/snapshot': 2.1.8
@@ -15493,11 +15376,11 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.1.1
       tinyrainbow: 1.2.0
-      vite: 5.4.19(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
-      vite-node: 2.1.8(@types/node@24.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
+      vite: 5.4.19(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
+      vite-node: 2.1.8(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       happy-dom: 14.12.3
       jsdom: 26.1.0
     transitivePeerDependencies:
@@ -15511,11 +15394,11 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@3.2.4(@types/node@24.6.0)(happy-dom@14.6.2)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vitest@3.2.4(@types/node@24.8.1)(happy-dom@14.6.2)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.3(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+      '@vitest/mocker': 3.2.4(vite@7.1.3(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -15533,11 +15416,11 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.3(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
-      vite-node: 3.2.4(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite: 7.1.3(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite-node: 3.2.4(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       happy-dom: 14.6.2
       jsdom: 26.1.0
     transitivePeerDependencies:
@@ -15554,11 +15437,11 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/node@24.6.0)(happy-dom@20.0.0)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.3(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+      '@vitest/mocker': 3.2.4(vite@7.1.3(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -15576,11 +15459,11 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.3(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
-      vite-node: 3.2.4(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite: 7.1.3(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vite-node: 3.2.4(@types/node@24.8.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       happy-dom: 20.0.0
       jsdom: 26.1.0
     transitivePeerDependencies:
@@ -15597,33 +15480,31 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.0.0-beta.8(@types/node@24.6.0)(happy-dom@14.12.3)(jiti@2.6.0)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vitest@4.0.0-beta.18(@types/node@24.8.1)(happy-dom@14.12.3)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
     dependencies:
-      '@types/chai': 5.2.2
-      '@vitest/expect': 4.0.0-beta.8
-      '@vitest/mocker': 4.0.0-beta.8(vite@7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
-      '@vitest/pretty-format': 4.0.0-beta.8
-      '@vitest/runner': 4.0.0-beta.8
-      '@vitest/snapshot': 4.0.0-beta.8
-      '@vitest/spy': 4.0.0-beta.8
-      '@vitest/utils': 4.0.0-beta.8
-      chai: 5.2.1
-      debug: 4.4.1
+      '@vitest/expect': 4.0.0-beta.18
+      '@vitest/mocker': 4.0.0-beta.18(vite@7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+      '@vitest/pretty-format': 4.0.0-beta.18
+      '@vitest/runner': 4.0.0-beta.18
+      '@vitest/snapshot': 4.0.0-beta.18
+      '@vitest/spy': 4.0.0-beta.18
+      '@vitest/utils': 4.0.0-beta.18
+      debug: 4.4.3
       es-module-lexer: 1.7.0
       expect-type: 1.2.2
-      magic-string: 0.30.17
+      magic-string: 0.30.19
       pathe: 2.0.3
       picomatch: 4.0.3
       std-env: 3.9.0
       tinybench: 2.9.0
       tinyexec: 0.3.2
-      tinyglobby: 0.2.14
-      tinypool: 1.1.1
-      tinyrainbow: 2.0.0
-      vite: 7.1.7(@types/node@24.6.0)(jiti@2.6.0)(less@4.4.1)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      tinyglobby: 0.2.15
+      tinypool: 2.0.0
+      tinyrainbow: 3.0.3
+      vite: 7.1.10(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 24.6.0
+      '@types/node': 24.8.1
       happy-dom: 14.12.3
       jsdom: 26.1.0
     transitivePeerDependencies:
@@ -15640,10 +15521,10 @@ snapshots:
       - tsx
       - yaml
 
-  vue-eslint-parser@9.4.2(eslint@9.36.0(jiti@2.6.0)):
+  vue-eslint-parser@9.4.2(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
       debug: 4.4.1
-      eslint: 9.36.0(jiti@2.6.0)
+      eslint: 9.38.0(jiti@2.6.1)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -15784,6 +15665,6 @@ snapshots:
 
   yoctocolors@2.1.1: {}
 
-  zod@4.1.11: {}
+  zod@4.1.12: {}
 
   zwitch@2.0.4: {}

From 27a6b251d670637f5a7043156356bf100249b113 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 18 Oct 2025 21:27:12 -0400
Subject: [PATCH 43/98] recorder WIP

jest recorder test
---
 .../jest-react/components/FormExample.tsx     | 54 +++++++++++++++++++
 examples/jest-react/package.json              |  1 +
 .../test/form-test-for-e2e.test.tsx           | 10 ++++
 .../web-view-vite/src/components/Toolbar.tsx  |  2 +-
 pnpm-lock.yaml                                |  3 ++
 test/e2e-recorder.test.ts                     | 29 ++++++----
 6 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 examples/jest-react/components/FormExample.tsx
 create mode 100644 examples/jest-react/test/form-test-for-e2e.test.tsx

diff --git a/examples/jest-react/components/FormExample.tsx b/examples/jest-react/components/FormExample.tsx
new file mode 100644
index 0000000..d4762a4
--- /dev/null
+++ b/examples/jest-react/components/FormExample.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+
+export function FormExample() {
+  const [submitCount, setSubmitCount] = useState(0)
+  return (
+    <div className="">
+      <div>
+        Submit Count: {submitCount}
+      </div>
+      <div className="p-4">
+        <h2 className="text-lg font-bold mb-2">Form Section</h2>
+        <div className="border border-gray-300 p-4 mb-4">
+          <form
+            className="mb-4"
+            onSubmit={(e) => {
+              e.preventDefault()
+              setSubmitCount(c => c + 1)
+            }}
+          >
+            <label>
+              First input
+              <input
+                type="text"
+                className="border p-2 mr-2"
+                placeholder="First input"
+                aria-label="First input"
+              />
+            </label>
+            <label>
+              Second input
+              <input
+                type="text"
+                className="border p-2 mr-2"
+                placeholder="Second input"
+              />
+            </label>
+            <label>
+              Select menu
+              <select className="border p-2 mr-2" aria-label="Select menu">
+                <option value="">Choose an option</option>
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+              </select>
+            </label>
+            <button type="submit" className="bg-blue-500 text-white p-2">
+              Submit
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/jest-react/package.json b/examples/jest-react/package.json
index 3afaa89..5016deb 100644
--- a/examples/jest-react/package.json
+++ b/examples/jest-react/package.json
@@ -12,6 +12,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.2",
     "jest": "^30.2.0",
diff --git a/examples/jest-react/test/form-test-for-e2e.test.tsx b/examples/jest-react/test/form-test-for-e2e.test.tsx
new file mode 100644
index 0000000..7e3ffd8
--- /dev/null
+++ b/examples/jest-react/test/form-test-for-e2e.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { FormExample } from '../components/FormExample'
+
+describe('form test for e2e', () => {
+  it('basic usage', async () => {
+    render(<FormExample />)
+    expect(screen.getByLabelText('First input')).toBeTruthy()
+  })
+})
diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index c8ece68..d95ef7a 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -53,7 +53,7 @@ export function Toolbar() {
       <div class="flex">
         <ToolbarButton
           onClick={() => recorder.toggle(!recorder.isRecording())}
-          label={recorder.isRecording() ? 'Stop recording' : 'Record input as code (Experimental)'}
+          label={recorder.isRecording() ? 'Stop recording' : 'Record input as code'}
         >
           <div
             class={`w-4 h-4 rounded-full ${
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f7fb191..2885f8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -219,6 +219,9 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/jest':
         specifier: ^30.0.0
         version: 30.0.0
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index ffbc190..5144ce5 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -1,17 +1,18 @@
 import fs from 'node:fs/promises'
+import type { Browser } from '@playwright/test'
 import { test } from '@playwright/test'
 import path from 'pathe'
 import { DebuggerHelper } from './debugger-helper'
 
 // Undo changes made to the e2e test file that gets edited
-{
-  const e2eTestTestPath = path.join(__dirname, '../examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx')
+for (const exampleFolder of ['vitest-react-tailwind4', 'jest-react']) {
+  const e2eTestTestPath = path.join(__dirname, `../examples/${exampleFolder}/test/form-test-for-e2e.test.tsx`)
   let e2eTestTestOriginalContent: string
   test.beforeEach(async () => {
     e2eTestTestOriginalContent = await fs.readFile(e2eTestTestPath, 'utf8')
   })
   test.afterEach(async () => {
-  // Undo changes made to the e2e test file
+    // Undo changes made to the e2e test file
     await fs.writeFile(e2eTestTestPath, e2eTestTestOriginalContent, 'utf8')
   })
 }
@@ -57,10 +58,18 @@ test('Create a UI test file', async ({ browser }) => {
   await page.getByText('render(<FormExample />)').waitFor()
 })
 
-test('Record a UI test', async ({ browser }) => {
+test('Record a UI test, Vitest + React + Tailwind4', async ({ browser }) => {
+  await runRecorderTest(browser, 'vitest-react-tailwind4', true)
+})
+
+test('Record a UI test, Jest + React + Tailwind4', async ({ browser }) => {
+  await runRecorderTest(browser, 'jest-react')
+})
+
+async function runRecorderTest(browser: Browser, exampleFolder: string, dismissStylePrompt = false) {
   const page = await browser.newPage()
 
-  await page.goto('http://localhost:8080/?folder=/source/examples/vitest-react-tailwind4')
+  await page.goto(`http://localhost:8080/?folder=/source/examples/${exampleFolder}`)
 
   // Open form-test-for-e2e.test.tsx
   await page.locator('.search-label').click()
@@ -82,8 +91,10 @@ test('Record a UI test', async ({ browser }) => {
     .frameLocator('iframe.webview.ready')
     .frameLocator('iframe[title="Tested UI"]')
 
-  // Click the OK button on the initial style prompt
-  await replicaPanel.locator('ui-test-visualizer-button[title="Dismiss style prompt"]').click()
+  if (dismissStylePrompt) {
+    // Click the OK button on the initial style prompt
+    await replicaPanel.locator('ui-test-visualizer-button[title="Dismiss style prompt"]').click()
+  }
 
   // Wait until the debugger is paused on breakpoint
   await page.getByText('Paused on breakpoint').waitFor()
@@ -92,7 +103,7 @@ test('Record a UI test', async ({ browser }) => {
   await debugHelper.debugStep()
 
   // Start recording
-  await replicaPanel.getByRole('button', { name: 'Record input as code (Experimental)' }).first().click()
+  await replicaPanel.getByRole('button', { name: 'Record input as code' }).first().click()
 
   // Check that the submission count starts at 0
   await replicaPanel.getByText(`Submit Count: 0`)
@@ -132,4 +143,4 @@ test('Record a UI test', async ({ browser }) => {
   // Check for the generated code in the editor
   await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`)
   await page.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`)
-})
+}

From 48a3147c7ad92e257109e0b0001ee1046d76f0a2 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 18 Oct 2025 21:40:46 -0400
Subject: [PATCH 44/98] recorder WIP

don't build in the beforeAll in the compat tests
---
 .github/workflows/main.yml             |  2 ++
 packages/extension/test/compat.test.ts | 22 ----------------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 633b564..4d9100f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -84,5 +84,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - run: pnpm run build
+
       # Just run the "extension" tests to make sure the paths are detected correctly on Windows
       - run: pnpm run --filter ./packages/extension test
diff --git a/packages/extension/test/compat.test.ts b/packages/extension/test/compat.test.ts
index 224d026..d54cc0f 100644
--- a/packages/extension/test/compat.test.ts
+++ b/packages/extension/test/compat.test.ts
@@ -90,28 +90,6 @@ describe('tool compatibility', async () => {
   let fakeHtmlUpdaterServer: WsServer
 
   beforeAll(async () => {
-    // These tests require the "build-prod" folder to exist
-    {
-      const buildDir = await findUp(
-        'build-prod',
-        { cwd: examplesPath, type: 'directory' },
-      )
-      if (!buildDir) {
-        const pnpmLock = await findUp(
-          'pnpm-lock.yaml',
-          { cwd: __dirname },
-        )
-        if (!pnpmLock) {
-          throw new Error(`Could not find project root from ${__dirname}`)
-        }
-        console.log('These tests requires the "build-prod" folder to exist. Building it...')
-        await execa({
-          cwd: path.dirname(pnpmLock),
-          stdout: ['pipe', 'inherit'],
-        })`pnpm run build`
-      }
-    }
-
     htmlUpdaterPort = await getPort()
     fakeHtmlUpdaterServer = new Server({ port: htmlUpdaterPort })
 

From e72cd9320b4ee79eb35a79b05737e1d1c73d0d19 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 00:23:14 -0400
Subject: [PATCH 45/98] recorder WIP

use bun-types instead of @types/bun
---
 examples/bun-react/bun.lock        | 16 +++++++++-------
 examples/bun-react/bunfig.toml     |  3 ---
 examples/bun-react/package.json    |  2 +-
 examples/bun-react/src/Counter.tsx |  2 +-
 examples/bun-react/tsconfig.json   |  4 +++-
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/examples/bun-react/bun.lock b/examples/bun-react/bun.lock
index 3ba0289..81316bc 100644
--- a/examples/bun-react/bun.lock
+++ b/examples/bun-react/bun.lock
@@ -10,9 +10,9 @@
         "react-dom": "^19.2.0",
       },
       "devDependencies": {
-        "@types/bun": "^1.3.0",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.1",
+        "bun-types": "^1.3.0",
       },
     },
   },
@@ -31,9 +31,7 @@
 
     "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
 
-    "@types/bun": ["@types/bun@1.3.0", "", { "dependencies": { "bun-types": "1.3.0" } }, "sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA=="],
-
-    "@types/node": ["@types/node@20.19.21", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-CsGG2P3I5y48RPMfprQGfy4JPRZ6csfC3ltBZSRItG3ngggmNY/qs2uZKp4p9VbrpqNNSMzUZNFZKzgOGnd/VA=="],
+    "@types/node": ["@types/node@24.7.2", "", { "dependencies": { "undici-types": "~7.14.0" } }, "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA=="],
 
     "@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],
 
@@ -73,12 +71,16 @@
 
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
-    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+    "undici-types": ["undici-types@7.14.0", "", {}, "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA=="],
 
     "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
 
-    "bun-types/@types/node": ["@types/node@24.7.2", "", { "dependencies": { "undici-types": "~7.14.0" } }, "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA=="],
+    "@happy-dom/global-registrator/@types/node": ["@types/node@20.19.21", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-CsGG2P3I5y48RPMfprQGfy4JPRZ6csfC3ltBZSRItG3ngggmNY/qs2uZKp4p9VbrpqNNSMzUZNFZKzgOGnd/VA=="],
+
+    "happy-dom/@types/node": ["@types/node@20.19.21", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-CsGG2P3I5y48RPMfprQGfy4JPRZ6csfC3ltBZSRItG3ngggmNY/qs2uZKp4p9VbrpqNNSMzUZNFZKzgOGnd/VA=="],
+
+    "@happy-dom/global-registrator/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
-    "bun-types/@types/node/undici-types": ["undici-types@7.14.0", "", {}, "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA=="],
+    "happy-dom/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
   }
 }
diff --git a/examples/bun-react/bunfig.toml b/examples/bun-react/bunfig.toml
index ec27f0f..c08e690 100644
--- a/examples/bun-react/bunfig.toml
+++ b/examples/bun-react/bunfig.toml
@@ -1,6 +1,3 @@
-[serve.static]
-env = "BUN_PUBLIC_*"
-
 [install]
 linker = "isolated"
 
diff --git a/examples/bun-react/package.json b/examples/bun-react/package.json
index 079abf6..9df88fc 100644
--- a/examples/bun-react/package.json
+++ b/examples/bun-react/package.json
@@ -14,6 +14,6 @@
   "devDependencies": {
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
-    "@types/bun": "^1.3.0"
+    "bun-types": "^1.3.0"
   }
 }
diff --git a/examples/bun-react/src/Counter.tsx b/examples/bun-react/src/Counter.tsx
index 0a53cb9..e9c4449 100644
--- a/examples/bun-react/src/Counter.tsx
+++ b/examples/bun-react/src/Counter.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 export function Counter() {
   const [count, setCount] = useState(0)
diff --git a/examples/bun-react/tsconfig.json b/examples/bun-react/tsconfig.json
index 632a36f..08dec4b 100644
--- a/examples/bun-react/tsconfig.json
+++ b/examples/bun-react/tsconfig.json
@@ -29,7 +29,9 @@
     // Some stricter flags (disabled by default)
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
+    "noPropertyAccessFromIndexSignature": false,
+
+    "types": ["bun-types"]
   },
 
   "exclude": ["dist", "node_modules"]

From f859d02cfc16bf4dd7540c1119f5136b2d4dd624 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 00:24:57 -0400
Subject: [PATCH 46/98] recorder WIP

add bun + solid example package
---
 .vscode/launch.json                           |  13 +-
 examples/bun-solid/.gitignore                 |  34 +++
 examples/bun-solid/README.md                  |  15 ++
 examples/bun-solid/bun.lock                   | 207 ++++++++++++++++++
 examples/bun-solid/bunfig.toml                |   7 +
 examples/bun-solid/index.ts                   |   1 +
 examples/bun-solid/package.json               |  24 ++
 examples/bun-solid/src/Counter.tsx            |  22 ++
 examples/bun-solid/src/FormExample.tsx        |  54 +++++
 examples/bun-solid/src/blue-title.css         |   3 +
 examples/bun-solid/test/basic.test.tsx        |  13 ++
 .../bun-solid/test/form-test-for-e2e.test.tsx |  10 +
 examples/bun-solid/test/test-setup.ts         |  31 +++
 examples/bun-solid/tsconfig.json              |  31 +++
 .../test/form-test-for-e2e.test.tsx           |   2 +-
 .../test/form-test-for-e2e.test.tsx           |   2 +-
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  99 +++++++--
 pnpm-workspace.yaml                           |   1 +
 19 files changed, 548 insertions(+), 23 deletions(-)
 create mode 100644 examples/bun-solid/.gitignore
 create mode 100644 examples/bun-solid/README.md
 create mode 100644 examples/bun-solid/bun.lock
 create mode 100644 examples/bun-solid/bunfig.toml
 create mode 100644 examples/bun-solid/index.ts
 create mode 100644 examples/bun-solid/package.json
 create mode 100644 examples/bun-solid/src/Counter.tsx
 create mode 100644 examples/bun-solid/src/FormExample.tsx
 create mode 100644 examples/bun-solid/src/blue-title.css
 create mode 100644 examples/bun-solid/test/basic.test.tsx
 create mode 100644 examples/bun-solid/test/form-test-for-e2e.test.tsx
 create mode 100644 examples/bun-solid/test/test-setup.ts
 create mode 100644 examples/bun-solid/tsconfig.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
index b264dba..7ae4d97 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -90,7 +90,7 @@
       "sourceMaps": true
     },
     {
-      "name": "Bun Test Runner Example",
+      "name": "Bun + React Example",
       "type": "extensionHost",
       "request": "launch",
       "args": [
@@ -100,6 +100,17 @@
       "outFiles": ["${workspaceFolder}/build-dev/**/*.js"],
       "sourceMaps": true
     },
+    {
+      "name": "Bun + Solid Example",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/build-dev",
+        "${workspaceFolder}/examples/bun-solid"
+      ],
+      "outFiles": ["${workspaceFolder}/build-dev/**/*.js"],
+      "sourceMaps": true
+    },
     {
       "name": "All examples",
       "type": "extensionHost",
diff --git a/examples/bun-solid/.gitignore b/examples/bun-solid/.gitignore
new file mode 100644
index 0000000..a14702c
--- /dev/null
+++ b/examples/bun-solid/.gitignore
@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
diff --git a/examples/bun-solid/README.md b/examples/bun-solid/README.md
new file mode 100644
index 0000000..54a7261
--- /dev/null
+++ b/examples/bun-solid/README.md
@@ -0,0 +1,15 @@
+# bun-solid
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.0. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
diff --git a/examples/bun-solid/bun.lock b/examples/bun-solid/bun.lock
new file mode 100644
index 0000000..349ad68
--- /dev/null
+++ b/examples/bun-solid/bun.lock
@@ -0,0 +1,207 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "bun-solid",
+      "dependencies": {
+        "solid-js": "^1.9.9",
+      },
+      "devDependencies": {
+        "@babel/core": "^7.28.4",
+        "@babel/plugin-transform-react-jsx": "^7.27.1",
+        "@babel/preset-typescript": "^7.27.1",
+        "@happy-dom/global-registrator": "^20.0.5",
+        "@solidjs/testing-library": "^0.8.10",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/babel__core": "^7.20.5",
+        "babel-preset-solid": "^1.9.9",
+        "bun-types": "^1.3.0",
+        "happy-dom": "^20.0.5",
+        "typescript": "^5.9.3",
+      },
+    },
+  },
+  "packages": {
+    "@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],
+
+    "@babel/compat-data": ["@babel/compat-data@7.28.4", "", {}, "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw=="],
+
+    "@babel/core": ["@babel/core@7.28.4", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.28.3", "@babel/helpers": "^7.28.4", "@babel/parser": "^7.28.4", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.4", "@babel/types": "^7.28.4", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA=="],
+
+    "@babel/generator": ["@babel/generator@7.28.3", "", { "dependencies": { "@babel/parser": "^7.28.3", "@babel/types": "^7.28.2", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw=="],
+
+    "@babel/helper-annotate-as-pure": ["@babel/helper-annotate-as-pure@7.27.3", "", { "dependencies": { "@babel/types": "^7.27.3" } }, "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg=="],
+
+    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.27.2", "", { "dependencies": { "@babel/compat-data": "^7.27.2", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ=="],
+
+    "@babel/helper-create-class-features-plugin": ["@babel/helper-create-class-features-plugin@7.28.3", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-member-expression-to-functions": "^7.27.1", "@babel/helper-optimise-call-expression": "^7.27.1", "@babel/helper-replace-supers": "^7.27.1", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1", "@babel/traverse": "^7.28.3", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg=="],
+
+    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
+
+    "@babel/helper-member-expression-to-functions": ["@babel/helper-member-expression-to-functions@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA=="],
+
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+
+    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", "@babel/traverse": "^7.28.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw=="],
+
+    "@babel/helper-optimise-call-expression": ["@babel/helper-optimise-call-expression@7.27.1", "", { "dependencies": { "@babel/types": "^7.27.1" } }, "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw=="],
+
+    "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.27.1", "", {}, "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw=="],
+
+    "@babel/helper-replace-supers": ["@babel/helper-replace-supers@7.27.1", "", { "dependencies": { "@babel/helper-member-expression-to-functions": "^7.27.1", "@babel/helper-optimise-call-expression": "^7.27.1", "@babel/traverse": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers": ["@babel/helper-skip-transparent-expression-wrappers@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.27.1", "", {}, "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="],
+
+    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
+
+    "@babel/helpers": ["@babel/helpers@7.28.4", "", { "dependencies": { "@babel/template": "^7.27.2", "@babel/types": "^7.28.4" } }, "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w=="],
+
+    "@babel/parser": ["@babel/parser@7.28.4", "", { "dependencies": { "@babel/types": "^7.28.4" }, "bin": "./bin/babel-parser.js" }, "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg=="],
+
+    "@babel/plugin-syntax-jsx": ["@babel/plugin-syntax-jsx@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w=="],
+
+    "@babel/plugin-syntax-typescript": ["@babel/plugin-syntax-typescript@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ=="],
+
+    "@babel/plugin-transform-modules-commonjs": ["@babel/plugin-transform-modules-commonjs@7.27.1", "", { "dependencies": { "@babel/helper-module-transforms": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw=="],
+
+    "@babel/plugin-transform-react-jsx": ["@babel/plugin-transform-react-jsx@7.27.1", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "@babel/helper-module-imports": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/types": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw=="],
+
+    "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.28.0", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-create-class-features-plugin": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1", "@babel/plugin-syntax-typescript": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg=="],
+
+    "@babel/preset-typescript": ["@babel/preset-typescript@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-validator-option": "^7.27.1", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/plugin-transform-modules-commonjs": "^7.27.1", "@babel/plugin-transform-typescript": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ=="],
+
+    "@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
+
+    "@babel/template": ["@babel/template@7.27.2", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", "@babel/types": "^7.27.1" } }, "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw=="],
+
+    "@babel/traverse": ["@babel/traverse@7.28.4", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.4", "@babel/template": "^7.27.2", "@babel/types": "^7.28.4", "debug": "^4.3.1" } }, "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ=="],
+
+    "@babel/types": ["@babel/types@7.28.4", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q=="],
+
+    "@happy-dom/global-registrator": ["@happy-dom/global-registrator@20.0.5", "", { "dependencies": { "@types/node": "^20.0.0", "happy-dom": "^20.0.5" } }, "sha512-RWQ85on4fiYKw5D1xk0nU2YGCYsJEJ5iXmZHTRyeYft4OCN4IRMFZ3uX91/Tncf/9K4tPOnU1HiEOtLs2Zxukw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@solidjs/testing-library": ["@solidjs/testing-library@0.8.10", "", { "dependencies": { "@testing-library/dom": "^10.4.0" }, "peerDependencies": { "@solidjs/router": ">=0.9.0", "solid-js": ">=1.0.0" }, "optionalPeers": ["@solidjs/router"] }, "sha512-qdeuIerwyq7oQTIrrKvV0aL9aFeuwTd86VYD3afdq5HYEwoox1OBTJy4y8A3TFZr8oAR0nujYgCzY/8wgHGfeQ=="],
+
+    "@testing-library/dom": ["@testing-library/dom@10.4.1", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.3.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "picocolors": "1.1.1", "pretty-format": "^27.0.2" } }, "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg=="],
+
+    "@testing-library/user-event": ["@testing-library/user-event@14.6.1", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw=="],
+
+    "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
+
+    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
+
+    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
+
+    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
+
+    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
+
+    "@types/node": ["@types/node@20.19.22", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-hRnu+5qggKDSyWHlnmThnUqg62l29Aj/6vcYgUaSFL9oc7DVjeWEQN3PRgdSc6F8d9QRMWkf36CLMch1Do/+RQ=="],
+
+    "@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],
+
+    "@types/whatwg-mimetype": ["@types/whatwg-mimetype@3.0.2", "", {}, "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="],
+
+    "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
+
+    "aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
+
+    "babel-plugin-jsx-dom-expressions": ["babel-plugin-jsx-dom-expressions@0.40.1", "", { "dependencies": { "@babel/helper-module-imports": "7.18.6", "@babel/plugin-syntax-jsx": "^7.18.6", "@babel/types": "^7.20.7", "html-entities": "2.3.3", "parse5": "^7.1.2", "validate-html-nesting": "^1.2.1" }, "peerDependencies": { "@babel/core": "^7.20.12" } }, "sha512-b4iHuirqK7RgaMzB2Lsl7MqrlDgQtVRSSazyrmx7wB3T759ggGjod5Rkok5MfHjQXhR7tRPmdwoeGPqBnW2KfA=="],
+
+    "babel-preset-solid": ["babel-preset-solid@1.9.9", "", { "dependencies": { "babel-plugin-jsx-dom-expressions": "^0.40.1" }, "peerDependencies": { "@babel/core": "^7.0.0", "solid-js": "^1.9.8" }, "optionalPeers": ["solid-js"] }, "sha512-pCnxWrciluXCeli/dj5PIEHgbNzim3evtTn12snjqqg8QZWJNMjH1AWIp4iG/tbVjqQ72aBEymMSagvmgxubXw=="],
+
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.8.18", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-UYmTpOBwgPScZpS4A+YbapwWuBwasxvO/2IOHArSsAhL/+ZdmATBXTex3t+l2hXwLVYK382ibr/nKoY9GKe86w=="],
+
+    "browserslist": ["browserslist@4.26.3", "", { "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", "electron-to-chromium": "^1.5.227", "node-releases": "^2.0.21", "update-browserslist-db": "^1.1.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w=="],
+
+    "bun-types": ["bun-types@1.3.0", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001751", "", {}, "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw=="],
+
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
+    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
+    "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.237", "", {}, "sha512-icUt1NvfhGLar5lSWH3tHNzablaA5js3HVHacQimfP8ViEBOQv+L7DKEuHdbTZ0SKCO1ogTJTIL1Gwk9S6Qvcg=="],
+
+    "entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
+
+    "happy-dom": ["happy-dom@20.0.5", "", { "dependencies": { "@types/node": "^20.0.0", "@types/whatwg-mimetype": "^3.0.2", "whatwg-mimetype": "^3.0.0" } }, "sha512-AiqA0rfS7WR1kihXt9W9aA5LFLaOKzwiL+QoI7BkOQ0r21C7VHTOf4k8QNlnWYaHLhpI2tZzJPLV1lY1obDTmw=="],
+
+    "html-entities": ["html-entities@2.3.3", "", {}, "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="],
+
+    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
+
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
+    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
+
+    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
+    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "node-releases": ["node-releases@2.0.25", "", {}, "sha512-4auku8B/vw5psvTiiN9j1dAOsXvMoGqJuKJcR+dTdqiXEK20mMTk1UEo3HS16LeGQsVG6+qKTPM9u/qQ2LqATA=="],
+
+    "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
+
+    "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+
+    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "seroval": ["seroval@1.3.2", "", {}, "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ=="],
+
+    "seroval-plugins": ["seroval-plugins@1.3.3", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w=="],
+
+    "solid-js": ["solid-js@1.9.9", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "~1.3.0", "seroval-plugins": "~1.3.0" } }, "sha512-A0ZBPJQldAeGCTW0YRYJmt7RCeh5rbFfPZ2aOttgYnctHE7HgKeHCBB/PVc2P7eOfmNXqMFFFoYYdm3S4dcbkA=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.1.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw=="],
+
+    "validate-html-nesting": ["validate-html-nesting@1.2.3", "", {}, "sha512-kdkWdCl6eCeLlRShJKbjVOU2kFKxMF8Ghu50n+crEoyx+VKm3FxAxF9z4DCy6+bbTOqNW0+jcIYRnjoIRzigRw=="],
+
+    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
+
+    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+
+    "babel-plugin-jsx-dom-expressions/@babel/helper-module-imports": ["@babel/helper-module-imports@7.18.6", "", { "dependencies": { "@babel/types": "^7.18.6" } }, "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA=="],
+
+    "bun-types/@types/node": ["@types/node@24.8.1", "", { "dependencies": { "undici-types": "~7.14.0" } }, "sha512-alv65KGRadQVfVcG69MuB4IzdYVpRwMG/mq8KWOaoOdyY617P5ivaDiMCGOFDWD2sAn5Q0mR3mRtUOgm99hL9Q=="],
+
+    "bun-types/@types/node/undici-types": ["undici-types@7.14.0", "", {}, "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA=="],
+  }
+}
diff --git a/examples/bun-solid/bunfig.toml b/examples/bun-solid/bunfig.toml
new file mode 100644
index 0000000..81650dd
--- /dev/null
+++ b/examples/bun-solid/bunfig.toml
@@ -0,0 +1,7 @@
+jsx = "solid"
+
+[install]
+linker = "isolated"
+
+[test]
+preload = "./test/test-setup.ts"
diff --git a/examples/bun-solid/index.ts b/examples/bun-solid/index.ts
new file mode 100644
index 0000000..f67b2c6
--- /dev/null
+++ b/examples/bun-solid/index.ts
@@ -0,0 +1 @@
+console.log("Hello via Bun!");
\ No newline at end of file
diff --git a/examples/bun-solid/package.json b/examples/bun-solid/package.json
new file mode 100644
index 0000000..988ab03
--- /dev/null
+++ b/examples/bun-solid/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "bun-solid",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "bun test --conditions=browser"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@happy-dom/global-registrator": "^20.0.5",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/babel__core": "^7.20.5",
+    "babel-preset-solid": "^1.9.9",
+    "bun-types": "^1.3.0",
+    "happy-dom": "^20.0.5",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.9"
+  }
+}
diff --git a/examples/bun-solid/src/Counter.tsx b/examples/bun-solid/src/Counter.tsx
new file mode 100644
index 0000000..fc05b20
--- /dev/null
+++ b/examples/bun-solid/src/Counter.tsx
@@ -0,0 +1,22 @@
+import { createSignal } from 'solid-js'
+
+export function Counter() {
+  const [count, setCount] = createSignal(0)
+
+  function increment() {
+    setCount(count() + 1)
+  };
+
+  function decrement() {
+    setCount(count() - 1)
+  };
+
+  return (
+    <div>
+      <h1>Counter</h1>
+      <div>Count: {count()}</div>
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+    </div>
+  )
+}
diff --git a/examples/bun-solid/src/FormExample.tsx b/examples/bun-solid/src/FormExample.tsx
new file mode 100644
index 0000000..21bcf6b
--- /dev/null
+++ b/examples/bun-solid/src/FormExample.tsx
@@ -0,0 +1,54 @@
+import { createSignal } from 'solid-js'
+
+export function FormExample() {
+  const [submitCount, setSubmitCount] = createSignal(0)
+  return (
+    <div className="">
+      <div>
+        Submit Count: {submitCount()}
+      </div>
+      <div className="p-4">
+        <h2 className="text-lg font-bold mb-2">Form Section</h2>
+        <div className="border border-gray-300 p-4 mb-4">
+          <form
+            className="mb-4"
+            onSubmit={(e) => {
+              e.preventDefault()
+              setSubmitCount(c => c + 1)
+            }}
+          >
+            <label>
+              First input
+              <input
+                type="text"
+                className="border p-2 mr-2"
+                placeholder="First input"
+                aria-label="First input"
+              />
+            </label>
+            <label>
+              Second input
+              <input
+                type="text"
+                className="border p-2 mr-2"
+                placeholder="Second input"
+              />
+            </label>
+            <label>
+              Select menu
+              <select className="border p-2 mr-2" aria-label="Select menu">
+                <option value="">Choose an option</option>
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+              </select>
+            </label>
+            <button type="submit" className="bg-blue-500 text-white p-2">
+              Submit
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/bun-solid/src/blue-title.css b/examples/bun-solid/src/blue-title.css
new file mode 100644
index 0000000..ccf22a0
--- /dev/null
+++ b/examples/bun-solid/src/blue-title.css
@@ -0,0 +1,3 @@
+h1 {
+  color: blue;
+}
diff --git a/examples/bun-solid/test/basic.test.tsx b/examples/bun-solid/test/basic.test.tsx
new file mode 100644
index 0000000..aafbc65
--- /dev/null
+++ b/examples/bun-solid/test/basic.test.tsx
@@ -0,0 +1,13 @@
+import { expect, it } from 'bun:test'
+import { fireEvent, render, screen } from '@solidjs/testing-library'
+import { Counter } from '../src/Counter'
+
+it('simple react testing library test', () => {
+  render(() => <Counter />)
+
+  fireEvent.click(screen.getByText('Increment'))
+  fireEvent.click(screen.getByText('Increment'))
+  fireEvent.click(screen.getByText('Decrement'))
+
+  expect(screen.getByText('Count: 1')).toBeTruthy()
+})
diff --git a/examples/bun-solid/test/form-test-for-e2e.test.tsx b/examples/bun-solid/test/form-test-for-e2e.test.tsx
new file mode 100644
index 0000000..498633d
--- /dev/null
+++ b/examples/bun-solid/test/form-test-for-e2e.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@solidjs/testing-library'
+import { describe, expect, it } from 'bun:test'
+import { FormExample } from '../src/FormExample'
+
+describe('form test for e2e test', () => {
+  it('basic usage', async () => {
+    render(() => <FormExample />)
+    expect(screen.getByLabelText('First input')).toBeTruthy()
+  })
+})
diff --git a/examples/bun-solid/test/test-setup.ts b/examples/bun-solid/test/test-setup.ts
new file mode 100644
index 0000000..41c193d
--- /dev/null
+++ b/examples/bun-solid/test/test-setup.ts
@@ -0,0 +1,31 @@
+import { transformAsync } from '@babel/core'
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+
+// @ts-expect-error no types
+import solid from 'babel-preset-solid'
+// @ts-expect-error no types
+import ts from '@babel/preset-typescript'
+
+GlobalRegistrator.register()
+
+await Bun.plugin({
+  name: 'bun-plugin-solid',
+  setup: (build) => {
+    build.onLoad({ filter: /\.(js|ts)x$/ }, async (args) => {
+      const code = await Bun.file(args.path).text()
+      const transforms = await transformAsync(code, {
+        filename: args.path,
+        presets: [
+          [solid, { generate: 'dom', debug: true }],
+          [ts, {}],
+        ],
+        retainLines: true,
+      })
+
+      return {
+        contents: transforms!.code!,
+        loader: 'js',
+      }
+    })
+  },
+})
diff --git a/examples/bun-solid/tsconfig.json b/examples/bun-solid/tsconfig.json
new file mode 100644
index 0000000..b8f7753
--- /dev/null
+++ b/examples/bun-solid/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "preserve",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+
+    "types": ["bun-types", "@babel/types"]
+  }
+}
diff --git a/examples/jest-react/test/form-test-for-e2e.test.tsx b/examples/jest-react/test/form-test-for-e2e.test.tsx
index 7e3ffd8..e5ddbf0 100644
--- a/examples/jest-react/test/form-test-for-e2e.test.tsx
+++ b/examples/jest-react/test/form-test-for-e2e.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import React from 'react'
 import { FormExample } from '../components/FormExample'
 
-describe('form test for e2e', () => {
+describe('form test for e2e test', () => {
   it('basic usage', async () => {
     render(<FormExample />)
     expect(screen.getByLabelText('First input')).toBeTruthy()
diff --git a/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx b/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
index da2c682..175d9e7 100644
--- a/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
+++ b/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
@@ -2,7 +2,7 @@ import { describe, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { FormExample } from '../components/FormExample'
 
-describe('form test for e2e', () => {
+describe('form test for e2e test', () => {
   it('basic usage', async () => {
     setupUi()
     expect(screen.getByLabelText('First input')).toBeTruthy()
diff --git a/package.json b/package.json
index f3ce9cc..d85eef1 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     ]
   },
   "scripts": {
-    "prepare": "which bun && bun install --cwd ./examples/bun-react || true",
+    "prepare": "which bun && (bun install --cwd ./examples/bun-react) && (bun install --cwd ./examples/bun-solid)",
     "dev": "rm -rf build-dev && pnpm run -r dev",
     "build": "rm -rf build-prod && pnpm run -r build && (cd build-prod && npx vsce package --allow-missing-repository --skip-license --out ./extension.vsix)",
     "lint": "tsc",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2885f8e..c900fcf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,7 +15,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^2.19.1
-        version: 2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+        version: 2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       '@changesets/cli':
         specifier: ^2.29.7
         version: 2.29.7(@types/node@24.8.1)
@@ -54,7 +54,45 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+
+  examples/bun-react:
+    dependencies:
+      '@happy-dom/global-registrator':
+        specifier: ^20.0.0
+        version: 20.0.5
+      '@testing-library/react':
+        specifier: ^16.3.0
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react:
+        specifier: '^19.2.0 '
+        version: 19.2.0
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.0(react@19.2.0)
+    devDependencies:
+      '@types/react':
+        specifier: ^19.2.2
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19.2.1
+        version: 19.2.1(@types/react@19.2.2)
+      bun-types:
+        specifier: ^1.3.0
+        version: 1.3.0(@types/react@19.2.2)
+
+  examples/bun-solid:
+    dependencies:
+      bun-types:
+        specifier: ^1.3.0
+        version: 1.3.0(@types/react@19.2.2)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+    devDependencies:
+      '@types/bun':
+        specifier: latest
+        version: 1.3.0(@types/react@19.2.2)
 
   examples/jest-babel-nextjs:
     dependencies:
@@ -450,7 +488,7 @@ importers:
         version: 0.64.0
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
       ws:
         specifier: ^8.18.3
         version: 8.18.3
@@ -2033,6 +2071,10 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@happy-dom/global-registrator@20.0.5':
+    resolution: {integrity: sha512-RWQ85on4fiYKw5D1xk0nU2YGCYsJEJ5iXmZHTRyeYft4OCN4IRMFZ3uX91/Tncf/9K4tPOnU1HiEOtLs2Zxukw==}
+    engines: {node: '>=20.0.0'}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -3478,6 +3520,9 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/bun@1.3.0':
+    resolution: {integrity: sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA==}
+
   '@types/chai@5.2.2':
     resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
@@ -4165,6 +4210,11 @@ packages:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
 
+  bun-types@1.3.0:
+    resolution: {integrity: sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ==}
+    peerDependencies:
+      '@types/react': ^19
+
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -5197,8 +5247,8 @@ packages:
     resolution: {integrity: sha512-yiaVI0Da/tGrBD6QwmXkJZH9RPW1/TCxqadbwkp0MgwRTTDNyBC09Ow+nppVLhbG4Ws2Z6t29Vzbbd6C0y7LCQ==}
     engines: {node: '>=16.0.0'}
 
-  happy-dom@20.0.0:
-    resolution: {integrity: sha512-GkWnwIFxVGCf2raNrxImLo397RdGhLapj5cT3R2PT7FwL62Ze1DROhzmYW7+J3p9105DYMVenEejEbnq5wA37w==}
+  happy-dom@20.0.5:
+    resolution: {integrity: sha512-AiqA0rfS7WR1kihXt9W9aA5LFLaOKzwiL+QoI7BkOQ0r21C7VHTOf4k8QNlnWYaHLhpI2tZzJPLV1lY1obDTmw==}
     engines: {node: '>=20.0.0'}
 
   harmony-reflect@1.6.2:
@@ -7815,7 +7865,7 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
+  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
     dependencies:
       '@antfu/install-pkg': 0.3.3
       '@clack/prompts': 0.7.0
@@ -7840,7 +7890,7 @@ snapshots:
       eslint-plugin-toml: 0.11.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-unicorn: 53.0.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-unused-imports: 3.2.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
-      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       eslint-plugin-vue: 9.26.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-yml: 1.14.0(eslint@9.38.0(jiti@2.6.1))
       eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))
@@ -9353,6 +9403,11 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@happy-dom/global-registrator@20.0.5':
+    dependencies:
+      '@types/node': 20.19.22
+      happy-dom: 20.0.5
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -10759,6 +10814,12 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.2
 
+  '@types/bun@1.3.0(@types/react@19.2.2)':
+    dependencies:
+      bun-types: 1.3.0(@types/react@19.2.2)
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@types/chai@5.2.2':
     dependencies:
       '@types/deep-eql': 4.0.2
@@ -10820,7 +10881,6 @@ snapshots:
   '@types/node@20.19.22':
     dependencies:
       undici-types: 6.21.0
-    optional: true
 
   '@types/node@24.8.1':
     dependencies:
@@ -10831,7 +10891,6 @@ snapshots:
   '@types/react-dom@19.2.1(@types/react@19.2.2)':
     dependencies:
       '@types/react': 19.2.2
-    optional: true
 
   '@types/react@19.2.2':
     dependencies:
@@ -10855,8 +10914,7 @@ snapshots:
 
   '@types/vscode@1.105.0': {}
 
-  '@types/whatwg-mimetype@3.0.2':
-    optional: true
+  '@types/whatwg-mimetype@3.0.2': {}
 
   '@types/ws@8.18.1':
     dependencies:
@@ -11563,6 +11621,11 @@ snapshots:
 
   builtin-modules@3.3.0: {}
 
+  bun-types@1.3.0(@types/react@19.2.2):
+    dependencies:
+      '@types/node': 24.8.1
+      '@types/react': 19.2.2
+
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
@@ -12263,13 +12326,13 @@ snapshots:
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
     dependencies:
       '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.38.0(jiti@2.6.1)
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      vitest: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vitest: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -12713,12 +12776,11 @@ snapshots:
       webidl-conversions: 7.0.0
       whatwg-mimetype: 3.0.0
 
-  happy-dom@20.0.0:
+  happy-dom@20.0.5:
     dependencies:
       '@types/node': 20.19.22
       '@types/whatwg-mimetype': 3.0.2
       whatwg-mimetype: 3.0.0
-    optional: true
 
   harmony-reflect@1.6.2: {}
 
@@ -15124,8 +15186,7 @@ snapshots:
 
   underscore@1.13.7: {}
 
-  undici-types@6.21.0:
-    optional: true
+  undici-types@6.21.0: {}
 
   undici-types@7.14.0: {}
 
@@ -15440,7 +15501,7 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.0)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
@@ -15467,7 +15528,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.8.1
-      happy-dom: 20.0.0
+      happy-dom: 20.0.5
       jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e7ae1eb..00c5245 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,3 +2,4 @@ packages:
   - .
   - 'packages/*'
   - examples/!(bun-react)
+  - examples/!(bun-solid)

From 08d82c80e3e6479bf319f622336392747becc007 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 00:26:37 -0400
Subject: [PATCH 47/98] recorder WIP

fix workspaces file and lockfile
---
 pnpm-lock.yaml      | 142 ++++++++++----------------------------------
 pnpm-workspace.yaml |   3 +-
 2 files changed, 33 insertions(+), 112 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c900fcf..9bda83e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,44 +56,6 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
-  examples/bun-react:
-    dependencies:
-      '@happy-dom/global-registrator':
-        specifier: ^20.0.0
-        version: 20.0.5
-      '@testing-library/react':
-        specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react:
-        specifier: '^19.2.0 '
-        version: 19.2.0
-      react-dom:
-        specifier: ^19.2.0
-        version: 19.2.0(react@19.2.0)
-    devDependencies:
-      '@types/react':
-        specifier: ^19.2.2
-        version: 19.2.2
-      '@types/react-dom':
-        specifier: ^19.2.1
-        version: 19.2.1(@types/react@19.2.2)
-      bun-types:
-        specifier: ^1.3.0
-        version: 1.3.0(@types/react@19.2.2)
-
-  examples/bun-solid:
-    dependencies:
-      bun-types:
-        specifier: ^1.3.0
-        version: 1.3.0(@types/react@19.2.2)
-      typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
-    devDependencies:
-      '@types/bun':
-        specifier: latest
-        version: 1.3.0(@types/react@19.2.2)
-
   examples/jest-babel-nextjs:
     dependencies:
       next:
@@ -883,11 +845,6 @@ packages:
     resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.27.5':
-    resolution: {integrity: sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.28.3':
     resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
     engines: {node: '>=6.0.0'}
@@ -2071,10 +2028,6 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
-  '@happy-dom/global-registrator@20.0.5':
-    resolution: {integrity: sha512-RWQ85on4fiYKw5D1xk0nU2YGCYsJEJ5iXmZHTRyeYft4OCN4IRMFZ3uX91/Tncf/9K4tPOnU1HiEOtLs2Zxukw==}
-    engines: {node: '>=20.0.0'}
-
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -2397,9 +2350,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.29':
     resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
 
-  '@jridgewell/trace-mapping@0.3.30':
-    resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
-
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
@@ -3520,9 +3470,6 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
-  '@types/bun@1.3.0':
-    resolution: {integrity: sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA==}
-
   '@types/chai@5.2.2':
     resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
@@ -4210,11 +4157,6 @@ packages:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
 
-  bun-types@1.3.0:
-    resolution: {integrity: sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ==}
-    peerDependencies:
-      '@types/react': ^19
-
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -8043,15 +7985,15 @@ snapshots:
 
   '@babel/generator@7.28.3':
     dependencies:
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
       '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
-      '@babel/types': 7.27.6
+      '@babel/types': 7.28.4
 
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
@@ -8109,8 +8051,8 @@ snapshots:
 
   '@babel/helper-member-expression-to-functions@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
@@ -8120,8 +8062,8 @@ snapshots:
 
   '@babel/helper-module-imports@7.27.1':
     dependencies:
-      '@babel/traverse': 7.27.4
-      '@babel/types': 7.27.6
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
@@ -8145,7 +8087,7 @@ snapshots:
 
   '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.4
 
   '@babel/helper-plugin-utils@7.27.1': {}
 
@@ -8185,8 +8127,8 @@ snapshots:
   '@babel/helper-wrap-function@7.28.3':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.3
-      '@babel/types': 7.28.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
@@ -8195,13 +8137,9 @@ snapshots:
       '@babel/template': 7.27.2
       '@babel/types': 7.28.4
 
-  '@babel/parser@7.27.5':
-    dependencies:
-      '@babel/types': 7.27.6
-
   '@babel/parser@7.28.3':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.4
 
   '@babel/parser@7.28.4':
     dependencies:
@@ -8637,7 +8575,7 @@ snapshots:
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
-      '@babel/types': 7.27.6
+      '@babel/types': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
@@ -8838,17 +8776,17 @@ snapshots:
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.27.5
-      '@babel/types': 7.27.6
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
 
   '@babel/traverse@7.27.4':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/generator': 7.28.3
-      '@babel/parser': 7.28.3
+      '@babel/parser': 7.28.4
       '@babel/template': 7.27.2
-      '@babel/types': 7.27.6
-      debug: 4.4.1
+      '@babel/types': 7.28.4
+      debug: 4.4.3
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -9403,11 +9341,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
-  '@happy-dom/global-registrator@20.0.5':
-    dependencies:
-      '@types/node': 20.19.22
-      happy-dom: 20.0.5
-
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -9765,7 +9698,7 @@ snapshots:
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
@@ -9795,11 +9728,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.4
 
-  '@jridgewell/trace-mapping@0.3.30':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -10795,30 +10723,24 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
       '@types/babel__generator': 7.27.0
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.28.0
 
   '@types/babel__generator@7.27.0':
     dependencies:
-      '@babel/types': 7.28.2
+      '@babel/types': 7.28.4
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.28.3
-      '@babel/types': 7.28.2
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
 
   '@types/babel__traverse@7.28.0':
     dependencies:
-      '@babel/types': 7.28.2
-
-  '@types/bun@1.3.0(@types/react@19.2.2)':
-    dependencies:
-      bun-types: 1.3.0(@types/react@19.2.2)
-    transitivePeerDependencies:
-      - '@types/react'
+      '@babel/types': 7.28.4
 
   '@types/chai@5.2.2':
     dependencies:
@@ -10881,6 +10803,7 @@ snapshots:
   '@types/node@20.19.22':
     dependencies:
       undici-types: 6.21.0
+    optional: true
 
   '@types/node@24.8.1':
     dependencies:
@@ -10891,6 +10814,7 @@ snapshots:
   '@types/react-dom@19.2.1(@types/react@19.2.2)':
     dependencies:
       '@types/react': 19.2.2
+    optional: true
 
   '@types/react@19.2.2':
     dependencies:
@@ -10914,7 +10838,8 @@ snapshots:
 
   '@types/vscode@1.105.0': {}
 
-  '@types/whatwg-mimetype@3.0.2': {}
+  '@types/whatwg-mimetype@3.0.2':
+    optional: true
 
   '@types/ws@8.18.1':
     dependencies:
@@ -11621,11 +11546,6 @@ snapshots:
 
   builtin-modules@3.3.0: {}
 
-  bun-types@1.3.0(@types/react@19.2.2):
-    dependencies:
-      '@types/node': 24.8.1
-      '@types/react': 19.2.2
-
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
@@ -12781,6 +12701,7 @@ snapshots:
       '@types/node': 20.19.22
       '@types/whatwg-mimetype': 3.0.2
       whatwg-mimetype: 3.0.0
+    optional: true
 
   harmony-reflect@1.6.2: {}
 
@@ -15186,7 +15107,8 @@ snapshots:
 
   underscore@1.13.7: {}
 
-  undici-types@6.21.0: {}
+  undici-types@6.21.0:
+    optional: true
 
   undici-types@7.14.0: {}
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 00c5245..b1088d5 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,4 @@
 packages:
   - .
   - 'packages/*'
-  - examples/!(bun-react)
-  - examples/!(bun-solid)
+  - examples/!(bun-react|bun-solid)

From a47abf5a40d83ddf16475be2c8a566a5d99ace98 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 01:55:44 -0400
Subject: [PATCH 48/98] recorder WIP

- add e2e test with bun-solid example.
- update docker setup to install bun, simplified node install
---
 README.md                 |  1 +
 test/Dockerfile           | 16 ++++++++--------
 test/docker-compose.yml   |  3 ++-
 test/e2e-recorder.test.ts |  6 +++++-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 004bc01..966c904 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ This is a VSCode extension: no code changes should be required to watch your UI
 
 - [Vitest](https://vitest.dev/) or [Jest v28+](https://jestjs.io/) or [Bun Test Runner](https://bun.com/docs/test/dom)
   - Your test framework is auto-detected by walking up the directories from your test file until it finds `vitest.config.{ts,js}`, `vite.config.{ts,js}`, `jest.config.{ts,js,json}`, or `bun.lock`
+  - The [Bun VSCode extension](https://marketplace.visualstudio.com/items?itemName=oven.bun-vscode) is required for Bun tests
 - [jsdom](https://github.com/jsdom/jsdom) or [happy-dom](https://github.com/capricorn86/happy-dom) test environment (what you're probably already using for UI in Vitest or Jest)
 
 ## Usage
diff --git a/test/Dockerfile b/test/Dockerfile
index f456894..00b2986 100644
--- a/test/Dockerfile
+++ b/test/Dockerfile
@@ -1,15 +1,15 @@
+FROM node:22.20.0 AS node-stage
+FROM oven/bun:1.3.0 AS bun-stage
+
 FROM codercom/code-server:4.104.2
 
-ENV NODE_VERSION=22.20.0
-# installs NVM (Node Version Manager)
-RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
-ENV NVM_DIR=/home/coder/.nvm
+# Copy Node and Bun from their stages
+COPY --from=bun-stage /usr/local/bin/bun /usr/local/bin/bun
+COPY --from=node-stage /usr/local /usr/local
 
 USER coder
 
-# download and install Node.js
-RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
-RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
-RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
+# Install Bun VSCode extension
+RUN code-server --install-extension oven.bun-vscode@0.0.31
 
 COPY --chown=coder ./.vscode/settings.json /home/coder/.local/share/code-server/User/settings.json
diff --git a/test/docker-compose.yml b/test/docker-compose.yml
index 39eafcd..ec7b3a8 100644
--- a/test/docker-compose.yml
+++ b/test/docker-compose.yml
@@ -1,7 +1,8 @@
 services:
   code-server:
     # Use the pushed image instead of building it locally, to save time in the CI pipeline
-    image: poffm/vscode-server-with-node:4.104.2-22.20.0
+    # The version numbers refer to the versions of (code-server)-(node)-(bun)
+    image: poffm/vscode-server-with-node:4.104.2-22.20.0-1.3.0
     # build:
     #   context: ..
     #   dockerfile: ./test/Dockerfile
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 5144ce5..051f844 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -62,10 +62,14 @@ test('Record a UI test, Vitest + React + Tailwind4', async ({ browser }) => {
   await runRecorderTest(browser, 'vitest-react-tailwind4', true)
 })
 
-test('Record a UI test, Jest + React + Tailwind4', async ({ browser }) => {
+test('Record a UI test, Jest + React', async ({ browser }) => {
   await runRecorderTest(browser, 'jest-react')
 })
 
+test('Record a UI test, Bun + Solid', async ({ browser }) => {
+  await runRecorderTest(browser, 'bun-solid', true)
+})
+
 async function runRecorderTest(browser: Browser, exampleFolder: string, dismissStylePrompt = false) {
   const page = await browser.newPage()
 

From a862f0d06463388c14a7445522c9357692078f44 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 18:00:09 -0400
Subject: [PATCH 49/98] recorder wip

reduce zod bundle size
---
 packages/extension/src/extension.ts             | 3 ++-
 packages/web-view-vite/src/recorder/recorder.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/extension.ts b/packages/extension/src/extension.ts
index a6d6c8f..93be27a 100644
--- a/packages/extension/src/extension.ts
+++ b/packages/extension/src/extension.ts
@@ -3,6 +3,7 @@ import '@total-typescript/ts-reset'
 import { TelemetryReporter } from '@vscode/extension-telemetry'
 import * as vscode from 'vscode'
 import * as z from 'zod/mini'
+import zodEn from 'zod/v4/locales/en.js'
 import getPort from 'get-port'
 import { autoSetFirstBreakpoint } from './auto-set-first-breakpoint'
 import { codeLensProvider } from './code-lens-provider'
@@ -18,7 +19,7 @@ import { extensionSetting } from './util/extension-setting'
 import { onceWithPeek } from './util/util'
 import { enableHotReload } from './util/hot-reload'
 
-z.config(z.locales.en())
+z.config(zodEn())
 
 const reporter = (() => {
   try {
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index ddccb44..c048286 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -4,7 +4,7 @@ import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery } from '@testing-library/dom'
 import type { userEvent } from '@testing-library/user-event'
 import { createEffect, createSignal } from 'solid-js'
-import type { z } from 'zod'
+import type { z } from 'zod/mini'
 import { createMutationObserver } from '@solid-primitives/mutation-observer'
 import type { zRecordedEventData } from '../../../extension/src/panel-controller/panel-router'
 import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'

From a2968f76ef5997ee1145ee219ad7f0935fd6c3db Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 18:45:19 -0400
Subject: [PATCH 50/98] add resizable components from solid-ui

---
 .../src/components/solid-ui/resizable.tsx     | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 packages/web-view-vite/src/components/solid-ui/resizable.tsx

diff --git a/packages/web-view-vite/src/components/solid-ui/resizable.tsx b/packages/web-view-vite/src/components/solid-ui/resizable.tsx
new file mode 100644
index 0000000..4a4d780
--- /dev/null
+++ b/packages/web-view-vite/src/components/solid-ui/resizable.tsx
@@ -0,0 +1,63 @@
+import type { ValidComponent } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+
+import type { DynamicProps, HandleProps, RootProps } from '@corvu/resizable'
+import ResizablePrimitive from '@corvu/resizable'
+
+import { cn } from './utils'
+
+type ResizableProps<T extends ValidComponent = 'div'> = RootProps<T> & { class?: string }
+
+function Resizable<T extends ValidComponent = 'div'>(props: DynamicProps<T, ResizableProps<T>>) {
+  const [, rest] = splitProps(props as ResizableProps, ['class'])
+  return (
+    <ResizablePrimitive
+      class={cn('flex size-full data-[orientation=vertical]:flex-col', props.class)}
+      {...rest}
+    />
+  )
+}
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+type ResizableHandleProps<T extends ValidComponent = 'button'> = HandleProps<T> & {
+  class?: string
+  withHandle?: boolean
+}
+
+function ResizableHandle<T extends ValidComponent = 'button'>(props: DynamicProps<T, ResizableHandleProps<T>>) {
+  const [, rest] = splitProps(props as ResizableHandleProps, ['class', 'withHandle'])
+  return (
+    <ResizablePrimitive.Handle
+      class={cn(
+        'relative flex w-px shrink-0 items-center justify-center bg-[var(--vscode-panel-border)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
+        props.class,
+      )}
+      {...rest}
+    >
+      <Show when={props.withHandle}>
+        <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-[var(--vscode-panel-border)]">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-2.5"
+          >
+            <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          </svg>
+        </div>
+      </Show>
+    </ResizablePrimitive.Handle>
+  )
+}
+
+export { Resizable, ResizablePanel, ResizableHandle }

From 615289b79320f848dfcf75b618fa395044cd4d7d Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 20:16:48 -0400
Subject: [PATCH 51/98] recorder WIP

use resizable component from solid-ui
---
 packages/web-view-vite/package.json           |   1 +
 packages/web-view-vite/src/App.tsx            | 137 ++++++++++--------
 .../web-view-vite/src/components/Toolbar.tsx  |   6 +-
 .../src/components/solid-ui/resizable.tsx     |   2 +-
 packages/web-view-vite/src/index.tsx          |  18 ++-
 .../web-view-vite/src/inspector/Resizer.tsx   |  43 ------
 .../src/inspector/SearchToolbar.tsx           |   4 +-
 .../src/inspector/inspector-height.ts         |  40 -----
 .../src/recorder/recorder-panel.tsx           |  13 +-
 .../web-view-vite/src/recorder/recorder.ts    |   4 +-
 pnpm-lock.yaml                                |  13 ++
 11 files changed, 129 insertions(+), 152 deletions(-)
 delete mode 100644 packages/web-view-vite/src/inspector/Resizer.tsx
 delete mode 100644 packages/web-view-vite/src/inspector/inspector-height.ts

diff --git a/packages/web-view-vite/package.json b/packages/web-view-vite/package.json
index 4fe4041..5f7494b 100644
--- a/packages/web-view-vite/package.json
+++ b/packages/web-view-vite/package.json
@@ -7,6 +7,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@corvu/resizable": "^0.2.5",
     "@kobalte/core": "0.13.11",
     "@kobalte/utils": "^0.9.1",
     "@shikijs/core": "^3.13.0",
diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index be91236..44af28b 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -1,30 +1,15 @@
-import * as webviewToolkit from '@vscode/webview-ui-toolkit'
+import clamp from 'lodash/clamp'
+import debounce from 'lodash/debounce'
 import { ErrorBoundary, Match, Show, Switch, createSignal } from 'solid-js'
-import { createColorTheme } from './lib/color-theme'
-import { createDomReplica } from './lib/create-dom-replica'
-import { createInspectorHeight } from './inspector/inspector-height'
+import { Resizable, ResizableHandle, ResizablePanel } from './components/solid-ui/resizable'
 import { Toolbar } from './components/Toolbar'
 import { Inspector } from './inspector/Inspector'
-import { Resizer } from './inspector/Resizer'
+import { createColorTheme } from './lib/color-theme'
+import { createDomReplica } from './lib/create-dom-replica'
 import { createRecorder } from './recorder/recorder'
 import { RecorderPanel } from './recorder/recorder-panel'
 
-// In order to use the Webview UI Toolkit web components they
-// must be registered with the browser (i.e. webview) using the
-// syntax below.
-{
-  const prefix = 'ui-test-visualizer'
-  webviewToolkit
-    .provideVSCodeDesignSystem()
-    .register(webviewToolkit.vsCodeButton({ prefix }))
-    .register(webviewToolkit.vsCodeCheckbox({ prefix }))
-    .register(webviewToolkit.vsCodeProgressRing({ prefix }))
-    .register(webviewToolkit.vsCodeTextField({ prefix }))
-    .register(webviewToolkit.vsCodeRadio({ prefix }))
-}
-
 // TODO put these into a context provider
-
 export const [replicaHtmlEl, setReplicaHtmlEl] = createSignal<HTMLHtmlElement>()
 export const [theme, toggleTheme] = createColorTheme(
   replicaHtmlEl,
@@ -38,18 +23,26 @@ export const {
 } = createDomReplica()
 
 export const STORAGE_KEY_INSPECTOR_IS_OPEN = 'ui-test-visualizer.inspector-is-open'
-const inspectorWasOpen = Boolean(localStorage.getItem(STORAGE_KEY_INSPECTOR_IS_OPEN))
+const inspectorWasOpen = localStorage.getItem(STORAGE_KEY_INSPECTOR_IS_OPEN) === 'true'
 
 export type Panel = 'inspector' | 'recorder'
-export const [openPanel, setOpenPanel] = createSignal<Panel | null>(
+const [openPanel, _setOpenPanel] = createSignal<Panel | null>(
   inspectorWasOpen ? 'inspector' : null,
 )
+export { openPanel }
 
-export const inspector = createInspectorHeight()
+export function updateOpenPanel(newPanel: Panel | null) {
+  _setOpenPanel(newPanel)
+  if (newPanel === 'inspector' || newPanel === null) {
+    localStorage.setItem(STORAGE_KEY_INSPECTOR_IS_OPEN, newPanel === 'inspector' ? 'true' : 'false')
+  }
+}
 
 export const recorder = createRecorder(shadowHost)
 
 export function App() {
+  const { panelSizes, updateBottomPanelHeight } = createBottomPanelHeight()
+
   return (
     <div class="fixed inset-0 flex flex-col">
       <div class="z-60" style={{ visibility: firstPatchReceived() ? 'visible' : 'hidden' }}>
@@ -64,44 +57,74 @@ export function App() {
         </div>
         <div
           style={{ visibility: firstPatchReceived() ? 'visible' : 'hidden' }}
-          class="absolute h-full w-full flex flex-col"
+          class="absolute h-full w-full"
         >
-          <div
-            style={{
-              height: (inspector.isOpen() || recorder.isRecording()) ? `calc(100% - ${inspector.height()}px)` : '100%',
-            }}
+          <Resizable
+            orientation="vertical"
+            sizes={panelSizes()}
+            onSizesChange={sizes => sizes[1] && updateBottomPanelHeight(sizes[1])}
           >
-            {shadowHost}
-          </div>
-          <Show when={inspector.isOpen() || recorder.isRecording()}>
-            <div style={{ height: `${inspector.height()}px` }}>
-              <Resizer onResize={inspector.updateHeight} />
-              <Switch>
-                <Match when={openPanel() === 'recorder'}>
-                  <ErrorBoundary fallback={error => (
-                    <div class="text-error-foreground p-4">
-                      Error showing the recorder UI{error instanceof Error ? `: ${error.message}` : ''}
-                    </div>
-                  )}
-                  >
-                    <RecorderPanel />
-                  </ErrorBoundary>
-                </Match>
-                <Match when={openPanel() === 'inspector'}>
-                  <ErrorBoundary fallback={error => (
-                    <div class="text-error-foreground p-4">
-                      Error showing the inspector{error instanceof Error ? `: ${error.message}` : ''}
-                    </div>
-                  )}
-                  >
-                    <Inspector />
-                  </ErrorBoundary>
-                </Match>
-              </Switch>
-            </div>
-          </Show>
+            <ResizablePanel class="overflow-y-auto">
+              <div class="h-full w-full">
+                {shadowHost}
+              </div>
+            </ResizablePanel>
+            <Show when={openPanel()}>
+              <ResizableHandle />
+              <ResizablePanel class="overflow-y-auto">
+                <Switch>
+                  <Match when={openPanel() === 'recorder'}>
+                    <ErrorBoundary fallback={error => (
+                      <div class="text-error-foreground p-4">
+                        Error showing the recorder UI{error instanceof Error ? `: ${error.message}` : ''}
+                      </div>
+                    )}
+                    >
+                      <RecorderPanel />
+                    </ErrorBoundary>
+                  </Match>
+                  <Match when={openPanel() === 'inspector'}>
+                    <ErrorBoundary fallback={error => (
+                      <div class="text-error-foreground p-4">
+                        Error showing the inspector{error instanceof Error ? `: ${error.message}` : ''}
+                      </div>
+                    )}
+                    >
+                      <Inspector />
+                    </ErrorBoundary>
+                  </Match>
+                </Switch>
+              </ResizablePanel>
+            </Show>
+          </Resizable>
         </div>
       </div>
     </div>
   )
 }
+
+/** Store the bottom panel size in localStorage and return a signal for the panel layout sizes. */
+function createBottomPanelHeight() {
+  const BOTTOMPANEL_SIZE_KEY = 'ui-test-visualizer.bottom-panel-size'
+  const BOTTOMPANEL_DEFAULT_SIZE = 0.4
+  const persistPanelSize = debounce((size: number) => {
+    localStorage.setItem(BOTTOMPANEL_SIZE_KEY, size.toString())
+  }, 200)
+  const storedBottomPanelSize = Number(localStorage.getItem(BOTTOMPANEL_SIZE_KEY)) || BOTTOMPANEL_DEFAULT_SIZE
+
+  const [bottomPanelHeight, _setBottomPanelHeight] = createSignal(BOTTOMPANEL_DEFAULT_SIZE)
+  function updateBottomPanelHeight(newHeight: number) {
+    newHeight = clamp(newHeight, 0.15, 0.8)
+    _setBottomPanelHeight(newHeight)
+    persistPanelSize(newHeight)
+  }
+  updateBottomPanelHeight(storedBottomPanelSize)
+
+  function panelSizes() {
+    return openPanel()
+      ? [1 - bottomPanelHeight(), bottomPanelHeight()]
+      : [1, 0]
+  }
+
+  return { panelSizes, updateBottomPanelHeight }
+}
diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index d95ef7a..fe15a9e 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -4,7 +4,7 @@ import Moon from 'lucide-solid/icons/moon'
 import RefreshCw from 'lucide-solid/icons/refresh-cw'
 import Sun from 'lucide-solid/icons/sun'
 import { type ParentProps, Show, createSignal } from 'solid-js'
-import { firstPatchReceived, inspector, recorder, refreshShadow, theme, toggleTheme } from '../App'
+import { firstPatchReceived, openPanel, recorder, refreshShadow, theme, toggleTheme, updateOpenPanel } from '../App'
 import { StyleIcon, StylePicker } from './StylePicker'
 import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from './solid-ui/popover'
 import { Tooltip, TooltipContent, TooltipTrigger } from './solid-ui/tooltip'
@@ -17,11 +17,11 @@ export function Toolbar() {
       style={{ visibility: firstPatchReceived() ? 'visible' : 'hidden' }}
     >
       <ToolbarButton
-        onClick={inspector.toggle}
+        onClick={() => updateOpenPanel(openPanel() === 'inspector' ? null : 'inspector')}
         label="Toggle Inspector"
       >
         <Code
-          classList={{ 'text-[#75beff]': inspector.isOpen() }}
+          classList={{ 'text-[#75beff]': openPanel() === 'inspector' }}
         />
       </ToolbarButton>
       <ToolbarButton
diff --git a/packages/web-view-vite/src/components/solid-ui/resizable.tsx b/packages/web-view-vite/src/components/solid-ui/resizable.tsx
index 4a4d780..b34884f 100644
--- a/packages/web-view-vite/src/components/solid-ui/resizable.tsx
+++ b/packages/web-view-vite/src/components/solid-ui/resizable.tsx
@@ -30,7 +30,7 @@ function ResizableHandle<T extends ValidComponent = 'button'>(props: DynamicProp
   return (
     <ResizablePrimitive.Handle
       class={cn(
-        'relative flex w-px shrink-0 items-center justify-center bg-[var(--vscode-panel-border)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
+        'relative flex w-[2px] shrink-0 items-center justify-center bg-[var(--vscode-panel-border)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-[2px] data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-3 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90 z-70',
         props.class,
       )}
       {...rest}
diff --git a/packages/web-view-vite/src/index.tsx b/packages/web-view-vite/src/index.tsx
index 0305992..20d30d9 100644
--- a/packages/web-view-vite/src/index.tsx
+++ b/packages/web-view-vite/src/index.tsx
@@ -1,8 +1,24 @@
 /* @refresh reload */
+
+import * as webviewToolkit from '@vscode/webview-ui-toolkit'
 import { render } from 'solid-js/web'
+import { App } from './App'
 
 import './index.css'
-import { App } from './App'
+
+// In order to use the Webview UI Toolkit web components they
+// must be registered with the browser (i.e. webview) using the
+// syntax below.
+{
+  const prefix = 'ui-test-visualizer'
+  webviewToolkit
+    .provideVSCodeDesignSystem()
+    .register(webviewToolkit.vsCodeButton({ prefix }))
+    .register(webviewToolkit.vsCodeCheckbox({ prefix }))
+    .register(webviewToolkit.vsCodeProgressRing({ prefix }))
+    .register(webviewToolkit.vsCodeTextField({ prefix }))
+    .register(webviewToolkit.vsCodeRadio({ prefix }))
+}
 
 const root = document.getElementById('root')
 
diff --git a/packages/web-view-vite/src/inspector/Resizer.tsx b/packages/web-view-vite/src/inspector/Resizer.tsx
deleted file mode 100644
index 9f4a787..0000000
--- a/packages/web-view-vite/src/inspector/Resizer.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { createSignal } from 'solid-js'
-import { makeEventListener } from '@solid-primitives/event-listener'
-
-interface ResizerProps {
-  onResize: (height: number) => void
-}
-
-export function Resizer(props: ResizerProps) {
-  const [isDragging, setIsDragging] = createSignal(false)
-
-  function handleMouseDown(e: MouseEvent) {
-    setIsDragging(true)
-    e.preventDefault()
-  }
-
-  // Use makeEventListener for mousemove
-  makeEventListener(document, 'mousemove', (e) => {
-    if (!isDragging()) { return }
-    props.onResize(window.innerHeight - e.clientY)
-  })
-
-  // Use makeEventListener for mouseup
-  makeEventListener(document, 'mouseup', () => {
-    setIsDragging(false)
-  })
-
-  makeEventListener(document, 'mouseleave', () => {
-    setIsDragging(false)
-  })
-
-  return (
-    // invisible line to divide the 2 sections
-    <div
-      class="relative z-70 h-0"
-      style={{ 'background-color': 'transparent' }}
-    >
-      {/* invisible drag handle with bigger hitbox than the visible line */}
-      <div class="absolute w-full h-3 -top-1.5 cursor-ns-resize flex flex-col justify-center" onMouseDown={handleMouseDown} />
-      {/* visible drag handle line */}
-      <hr class="h-[2px] bg-[var(--vscode-panel-border)]" />
-    </div>
-  )
-}
diff --git a/packages/web-view-vite/src/inspector/SearchToolbar.tsx b/packages/web-view-vite/src/inspector/SearchToolbar.tsx
index ae4c0f4..0674105 100644
--- a/packages/web-view-vite/src/inspector/SearchToolbar.tsx
+++ b/packages/web-view-vite/src/inspector/SearchToolbar.tsx
@@ -2,7 +2,7 @@ import ChevronDown from 'lucide-solid/icons/chevron-down'
 import ChevronUp from 'lucide-solid/icons/chevron-up'
 import Search from 'lucide-solid/icons/search'
 import X from 'lucide-solid/icons/x'
-import { inspector } from '../App'
+import { updateOpenPanel } from '../App'
 import { search } from './Inspector'
 import type { InspectedNode } from './inspector-dom-tree'
 
@@ -70,7 +70,7 @@ export function SearchToolbar(props: { tree: InspectedNode }) {
         appearance="icon"
         aria-label="Close inspector"
         title="Close inspector"
-        onClick={() => inspector.toggle()}
+        onClick={() => updateOpenPanel(null)}
       >
         <X class="h-4 w-4" />
       </ui-test-visualizer-button>
diff --git a/packages/web-view-vite/src/inspector/inspector-height.ts b/packages/web-view-vite/src/inspector/inspector-height.ts
deleted file mode 100644
index 905b04c..0000000
--- a/packages/web-view-vite/src/inspector/inspector-height.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createSignal } from 'solid-js'
-import debounce from 'lodash/debounce'
-import { STORAGE_KEY_INSPECTOR_IS_OPEN, openPanel, setOpenPanel } from '../App'
-
-const STORAGE_KEY_INSPECTOR_HEIGHT = 'ui-test-visualizer.inspector-height'
-const DEFAULT_HEIGHT = 300
-
-export function createInspectorHeight() {
-  // Get initial height from storage or use default
-  const initialHeight = Number(localStorage.getItem(STORAGE_KEY_INSPECTOR_HEIGHT)) || DEFAULT_HEIGHT
-  const [height, setHeight] = createSignal(initialHeight)
-
-  function isOpen() {
-    return openPanel() === 'inspector'
-  }
-
-  // Wrapper for setHeight that also persists to storage
-  function updateHeight(newHeight: number) {
-    // Clamp height between 0 and 80% of viewport height
-    const clampedHeight = Math.max(50, Math.min(newHeight, window.innerHeight * 0.8))
-    setHeight(clampedHeight)
-    persistHeight(clampedHeight)
-  }
-
-  function toggle() {
-    setOpenPanel(isOpen() ? null : 'inspector')
-    localStorage.setItem(STORAGE_KEY_INSPECTOR_IS_OPEN, isOpen() ? 'true' : '')
-  }
-
-  return {
-    isOpen,
-    height,
-    updateHeight,
-    toggle,
-  }
-}
-
-const persistHeight = debounce((height: number) => {
-  localStorage.setItem(STORAGE_KEY_INSPECTOR_HEIGHT, height.toString())
-}, 200)
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 9e35380..a57f7ab 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -2,10 +2,10 @@ import { createHighlighterCore } from '@shikijs/core'
 import shikiTypescript from '@shikijs/langs/typescript'
 import shikiDarkPlus from '@shikijs/themes/dark-plus'
 import shikiLightPlus from '@shikijs/themes/light-plus'
+import Info from 'lucide-solid/icons/info'
+import X from 'lucide-solid/icons/x'
 import { createJavaScriptRegexEngine } from 'shiki'
 import { For, Show, Suspense, createResource } from 'solid-js'
-import X from 'lucide-solid/icons/x'
-import Info from 'lucide-solid/icons/info'
 import { recorder } from '../App'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../components/solid-ui/tooltip'
 import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
@@ -58,7 +58,14 @@ export function RecorderPanel() {
             </div>
           </Show>
           <div class="text-sm flex flex-col gap-2">
-            <For each={Object.entries(recorder.codeInsertions() ?? {})}>{([lineNum, codeLines]) => (
+            <For
+              fallback={(
+                <div class="text-muted-foreground">
+                  None yet
+                </div>
+              )}
+              each={Object.entries(recorder.codeInsertions() ?? {})}
+            >{([lineNum, codeLines]) => (
               <div>
                 <div class="flex items-center gap-1">
                   <ui-test-visualizer-button
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index c048286..1fc21f3 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -10,7 +10,7 @@ import type { zRecordedEventData } from '../../../extension/src/panel-controller
 import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
-import { openPanel, setOpenPanel } from '../App'
+import { openPanel, updateOpenPanel } from '../App'
 
 export const USEREVENT_MOUSE_EVENT_TYPES: (keyof typeof userEvent)[] = [
   'click',
@@ -165,7 +165,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   return {
     isRecording,
     toggle: (recording: boolean) => {
-      setOpenPanel(recording ? 'recorder' : null)
+      updateOpenPanel(recording ? 'recorder' : null)
     },
     removeInsertion: async (line: number, idx?: number) => {
       const newInsertions = await client.removeRecorderInsertion.mutate({ line, idx })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9bda83e..50c4ed0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -504,6 +504,9 @@ importers:
 
   packages/web-view-vite:
     dependencies:
+      '@corvu/resizable':
+        specifier: ^0.2.5
+        version: 0.2.5(solid-js@1.9.9)
       '@kobalte/core':
         specifier: 0.13.11
         version: 0.13.11(solid-js@1.9.9)
@@ -1467,6 +1470,11 @@ packages:
     bundledDependencies:
       - is-unicode-supported
 
+  '@corvu/resizable@0.2.5':
+    resolution: {integrity: sha512-psax38DraM9SXtaNh/sfvizGO6xLCL4sqT4rWYlMZP5ZsUM05Q30tvXgnTo2roQFNOz2e06WofhDsBXTjY6g4A==}
+    peerDependencies:
+      solid-js: ^1.8
+
   '@corvu/utils@0.4.2':
     resolution: {integrity: sha512-Ox2kYyxy7NoXdKWdHeDEjZxClwzO4SKM8plAaVwmAJPxHMqA0rLOoAsa+hBDwRLpctf+ZRnAd/ykguuJidnaTA==}
     peerDependencies:
@@ -8987,6 +8995,11 @@ snapshots:
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
+  '@corvu/resizable@0.2.5(solid-js@1.9.9)':
+    dependencies:
+      '@corvu/utils': 0.4.2(solid-js@1.9.9)
+      solid-js: 1.9.9
+
   '@corvu/utils@0.4.2(solid-js@1.9.9)':
     dependencies:
       '@floating-ui/dom': 1.7.3

From ea2cf9377ceccea9aefb6d2b2d8467bc2fdf9730 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 20:35:09 -0400
Subject: [PATCH 52/98] recorder WIP

fix type error
---
 packages/web-view-vite/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index 44af28b..de3489b 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -62,7 +62,7 @@ export function App() {
           <Resizable
             orientation="vertical"
             sizes={panelSizes()}
-            onSizesChange={sizes => sizes[1] && updateBottomPanelHeight(sizes[1])}
+            onSizesChange={(sizes: number[]) => sizes[1] && updateBottomPanelHeight(sizes[1])}
           >
             <ResizablePanel class="overflow-y-auto">
               <div class="h-full w-full">

From b697edf35ede50d1545a63d79f41f9f0e8ad7d18 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 20:46:52 -0400
Subject: [PATCH 53/98] recorder WIP

make the recorder panel into a resizable layout
---
 .../src/recorder/recorder-panel.tsx            | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index a57f7ab..83b50d1 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -8,6 +8,7 @@ import { createJavaScriptRegexEngine } from 'shiki'
 import { For, Show, Suspense, createResource } from 'solid-js'
 import { recorder } from '../App'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../components/solid-ui/tooltip'
+import { Resizable, ResizableHandle, ResizablePanel } from '../components/solid-ui/resizable'
 import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
 
 export function RecorderPanel() {
@@ -48,8 +49,8 @@ export function RecorderPanel() {
   }
 
   return (
-    <div class="flex h-full w-full">
-      <div class="w-1/2 h-full overflow-y-auto p-4 border-r border-[var(--vscode-panel-border)]">
+    <Resizable orientation="horizontal">
+      <ResizablePanel class="overflow-auto p-4">
         <div>
           <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
           <Show when={recorder.hasPendingInputChange()}>
@@ -102,8 +103,9 @@ export function RecorderPanel() {
             </For>
           </div>
         </div>
-      </div>
-      <div class="w-1/2 h-full overflow-y-auto p-4">
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel class="overflow-y-auto p-4">
         <div class="flex flex-col gap-3">
           <For each={[
             { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, name: 'user-event', useUserEvent: true, tooltip: 'Uses @testing-library/user-event' },
@@ -113,7 +115,7 @@ export function RecorderPanel() {
             {section => (
               <div>
                 <div class="flex gap-2">
-                  <h1 class="text-lg font-semibold mb-1">Choose Mouse Event ({section.name})</h1>
+                  <h1 class="text-lg font-semibold whitespace-nowrap mb-1">Choose Mouse Event ({section.name})</h1>
                   <Tooltip>
                     <TooltipTrigger>
                       <Info class="w-5 h-5 mb-1" />
@@ -148,10 +150,10 @@ export function RecorderPanel() {
             )}
           </For>
           <div>
-            <h2 class="text-lg font-semibold mb-1">Alt+Click to generate 'expect' statement</h2>
+            <h2 class="text-lg font-semibold whitespace-nowrap mb-1">Alt+Click to generate 'expect' statement</h2>
           </div>
         </div>
-      </div>
-    </div>
+      </ResizablePanel>
+    </Resizable>
   )
 }

From 4aed4ba2e39ec21e06d5d418bb0da17d2b26c8eb Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 21:56:26 -0400
Subject: [PATCH 54/98] recorder WIP

fix vitest imports in debug expressions
---
 packages/extension/src/framework-support/vitest-support.ts  | 1 +
 packages/extension/src/recorder/generate-code-from-input.ts | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/extension/src/framework-support/vitest-support.ts b/packages/extension/src/framework-support/vitest-support.ts
index 21686a7..152b26a 100644
--- a/packages/extension/src/framework-support/vitest-support.ts
+++ b/packages/extension/src/framework-support/vitest-support.ts
@@ -24,6 +24,7 @@ export async function vitestDebugConfig(
       filePath,
       '-t',
       cleanTestNameForTerminal(testName),
+      '--globals', // Needed for the recorder's generated 'expect' statements
       // Use child process instead of the default threads.
       '--pool',
       'forks',
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index 95ff374..6cb7556 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -161,7 +161,10 @@ export async function generateCodeFromInput(
 
   const importCode = Object.entries(requiredImports).map(([importName, from]) => {
     if (from === 'vitest') {
-      from = 'vitest/dist/index.js'
+      // Workaround: we can't import vitest in the debug expressions because it can't be imported with 'require',
+      // so run the global 'expect' function (using `vitest --globals` flag),
+      // but still generate the import code after the recording session.
+      return ''
     }
 
     // user-event v13 is used when running the debug expressions, because it's the last version

From 3f859154493b0a3784ac270b6ea87b35f0267e67 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 21:56:34 -0400
Subject: [PATCH 55/98] fix recorder test

---
 test/e2e-recorder.test.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 051f844..c3f6389 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -110,33 +110,36 @@ async function runRecorderTest(browser: Browser, exampleFolder: string, dismissS
   await replicaPanel.getByRole('button', { name: 'Record input as code' }).first().click()
 
   // Check that the submission count starts at 0
-  await replicaPanel.getByText(`Submit Count: 0`)
+  await replicaPanel.getByText(`Submit Count: 0`).waitFor()
 
   // Fill in the first input
   await replicaPanel.getByRole('textbox', { name: 'First input' }).click()
   await replicaPanel.getByRole('textbox', { name: 'First input' }).fill('test input 1')
-  await page.getByText(`await userEvent.type(screen.getByRole('textbox', { name: /^first input$/i }), 'test input 1')`)
 
   // Fill in the second input
   await replicaPanel.getByRole('textbox', { name: 'Second input' }).click()
   await replicaPanel.getByRole('textbox', { name: 'Second input' }).fill('test input 2')
-  await page.getByText(`await userEvent.type(screen.getByRole('textbox', { name: /^second input$/i }), 'test input 2')`)
 
   // Select an option from the select menu
+  await replicaPanel.getByRole('combobox', { name: 'Select menu' }).click()
   await replicaPanel.getByRole('combobox', { name: 'Select menu' }).selectOption('option2')
-  await page.getByText(`await userEvent.selectOptions(screen.getByRole('combobox', { name: /^select menu$/i }), ['option2'])`)
+
+  // Check the code is generated for the userEvent calls
+  await replicaPanel.getByText(`await userEvent.type(screen.getByRole('textbox', { name: /^first input$/i }), 'test input 1')`).waitFor()
+  await replicaPanel.getByText(`await userEvent.type(screen.getByRole('textbox', { name: /^second input$/i }), 'test input 2')`).waitFor()
+  await replicaPanel.getByText(`await userEvent.selectOptions(screen.getByRole('combobox', { name: /^select menu$/i }), ['option2'])`).waitFor()
 
   // Submit the form
   await replicaPanel.getByRole('button', { name: 'Submit' }).click()
-  await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`)
+  await replicaPanel.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`).waitFor()
 
   // Alt-click the submit count to generate the `expect` statement
   await replicaPanel.getByText('Submit Count:').click({
     modifiers: ['Alt'],
   })
   // Check that the submission count increased due to the click, which causes the userEvent code to run in the debugger
-  await replicaPanel.getByText(`Submit Count: 1`)
-  await replicaPanel.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`)
+  await replicaPanel.getByText(`Submit Count: 1`).waitFor()
+  await replicaPanel.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`).waitFor()
 
   // Finish the test
   await page.getByRole('button', { name: 'Continue (F5)' }).click()
@@ -145,6 +148,6 @@ async function runRecorderTest(browser: Browser, exampleFolder: string, dismissS
   await page.frameLocator('iframe.webview.ready').locator('iframe[title="Tested UI"]').waitFor({ state: 'detached' })
 
   // Check for the generated code in the editor
-  await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`)
-  await page.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`)
+  await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`).waitFor()
+  await page.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`).waitFor()
 }

From aaefb453eed44909fb59758402636f5f4c778f97 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 21:56:56 -0400
Subject: [PATCH 56/98] recorder WIP

prevent default when alt clicking in the recorder
---
 packages/web-view-vite/src/recorder/recorder.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 1fc21f3..6c87a73 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -141,6 +141,9 @@ export function createRecorder(shadowHost: HTMLDivElement) {
 
           // When the 'alt' key is held while clicking, generate an 'expect' statement
           const useExpect = eventType === 'click' && e instanceof MouseEvent && e.altKey
+          if (useExpect) {
+            e.preventDefault()
+          }
 
           // Send the selector to the extension process to record as code
           const insertions = await client.recordInputAsCode.mutate({

From e8ac73498ea8e902ff0b0a288196e3b14701a26a Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 22:15:12 -0400
Subject: [PATCH 57/98] recorder WIP

- fix replication error when getHTML is called on the primary end
- wrap applyDomPatch in try/catch so it doesn't block subsequent patches
---
 .../src/primary/ignored-node-methods.ts           |  1 +
 .../web-view-vite/src/lib/create-dom-replica.tsx  | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/replicate-dom/src/primary/ignored-node-methods.ts b/packages/replicate-dom/src/primary/ignored-node-methods.ts
index d85f56e..da6fb10 100644
--- a/packages/replicate-dom/src/primary/ignored-node-methods.ts
+++ b/packages/replicate-dom/src/primary/ignored-node-methods.ts
@@ -227,6 +227,7 @@ export const IGNORED_NODE_METHODS: {
   getEnclosureList: true,
   getIntersectionList: true,
   getScreenCTM: true,
+  getHTML: true,
 
   querySelector: true,
   querySelectorAll: true,
diff --git a/packages/web-view-vite/src/lib/create-dom-replica.tsx b/packages/web-view-vite/src/lib/create-dom-replica.tsx
index 2cb00dd..c29c9f8 100644
--- a/packages/web-view-vite/src/lib/create-dom-replica.tsx
+++ b/packages/web-view-vite/src/lib/create-dom-replica.tsx
@@ -25,11 +25,16 @@ export function createDomReplica() {
 
   function flushHtmlPatches() {
     for (const patch of patches) {
-      applyDomPatch(
-        shadow,
-        patch,
-        window,
-      )
+      try {
+        applyDomPatch(
+          shadow,
+          patch,
+          window,
+        )
+      }
+      catch (error) {
+        console.error(error)
+      }
     }
     patches = []
   }

From e3d495421d285cb0928e0c7d70276d07da3fccbb Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 22:23:43 -0400
Subject: [PATCH 58/98] recorder WIP

increase predicate timeouts in the e2e tests
---
 test/e2e-misc-features.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e-misc-features.test.ts b/test/e2e-misc-features.test.ts
index 4658aad..919806a 100644
--- a/test/e2e-misc-features.test.ts
+++ b/test/e2e-misc-features.test.ts
@@ -59,7 +59,7 @@ test('Load an external css file', async () => {
       .evaluate(
         button => window.getComputedStyle(button).getPropertyValue('background-color'),
       ),
-    { timeout: 20_000 },
+    { timeout: 40_000 },
   ).toBe('rgb(128, 0, 128)')
 
   // Disable the external css file
@@ -73,7 +73,7 @@ test('Load an external css file', async () => {
       .evaluate(
         button => window.getComputedStyle(button).getPropertyValue('background-color'),
       ),
-    { timeout: 20_000 },
+    { timeout: 40_000 },
   ).toBe('rgb(239, 239, 239)')
 })
 

From 8715d99f85d934960d9ef4f5bfc5ad71895c3017 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 19 Oct 2025 22:45:39 -0400
Subject: [PATCH 59/98] [skip ci]

update readme for recorder
---
 README.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/README.md b/README.md
index 966c904..a4fe81e 100644
--- a/README.md
+++ b/README.md
@@ -17,8 +17,36 @@ This is a VSCode extension: no code changes should be required to watch your UI
 
 ## Usage
 
+### Visualizing tests
+
 Click the "Visually Debug UI" button above your test. If there's no breakpoint in your test already, the extension will add one automatically. A side panel should open, and render your UI as you step through with the debugger.
 
+### Record Input as Code
+
+You can also write tests by recording your input as you interact with your UI.
+
+**Project Requirements:**
+- Test runner: Vitest, Jest, or Bun
+- Testing libraries:
+  - `@testing-library/react` or `@solidjs/testing-library`
+  - `@testing-library/user-event`
+
+Steps:
+
+- *Optional*: Generate a starter test file for a React or Solid component by right-clicking the component name in the editor (e.g. MyForm) and clicking "Create UI test".
+
+- Click the "Visually Debug UI" button to start your test
+
+- Click "Step Over" until you get your UI into the state where you want to generate new code.
+
+- Click the "Record input as code" button in the side panel, and you'll see the recorder panel appear.
+
+- Click your UI elements, or change text inputs, and the extension will generate code for you to use in your test.
+
+- Alt+click to generate an `expect` statement for that element.
+
+- The generated code is inserted into your test file when the test is ended or restarted.
+
 ## UI Framework Compatibility
 
 Since this extension hooks into the DOM API directly, you should be able to use any DOM-based UI framework, including React, Solid, Angular, Vue, Svelte, jQuery, etc.

From 12d5b34daccde00796a482e84a4c4b6266f8eee7 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Tue, 21 Oct 2025 21:20:07 -0400
Subject: [PATCH 60/98] recoder WIP

use 'test' instead of 'it'

[skip ci]
---
 .../create-ui-test-code.ts                    |  8 +++----
 .../test/create-ui-test-code.test.ts          | 24 +++++++------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
index 072c799..ec0e422 100644
--- a/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
+++ b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
@@ -48,14 +48,12 @@ export function createUITestCode(
   const isArrowRender = testingLibrary === '@solidjs/testing-library'
 
   // Create basic test content
-  const testContent = `import { describe, it } from '${fwImport}'
+  const testContent = `import { test } from '${fwImport}'
 import { render } from '${testingLibrary}'
 import ${isDefaultExport ? exportName : `{ ${exportName} }`} from './${relativePathToSrc}'
 
-describe('${exportName}', () => {
-  it('basic usage', async () => {
-    render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
-  })
+test('basic usage', async () => {
+  render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
 })
 `
   return [null, { exportName, testContent }]
diff --git a/packages/extension/test/create-ui-test-code.test.ts b/packages/extension/test/create-ui-test-code.test.ts
index 235a702..7ae5251 100644
--- a/packages/extension/test/create-ui-test-code.test.ts
+++ b/packages/extension/test/create-ui-test-code.test.ts
@@ -27,14 +27,12 @@ describe('createUITestCode', () => {
     const [_, result] = createUITestCode(input('jest', '@testing-library/react'))
     expect(result).toEqual({
       exportName: 'MyComponent',
-      testContent: `import { describe, it } from 'jest'
+      testContent: `import { test } from 'jest'
 import { render } from '@testing-library/react'
 import { MyComponent } from './my-component'
 
-describe('MyComponent', () => {
-  it('basic usage', async () => {
-    render(<MyComponent />)
-  })
+test('basic usage', async () => {
+  render(<MyComponent />)
 })
 `,
     })
@@ -44,14 +42,12 @@ describe('MyComponent', () => {
     const [_, result] = createUITestCode(input('vitest', '@solidjs/testing-library'))
     expect(result).toEqual({
       exportName: 'MyComponent',
-      testContent: `import { describe, it } from 'vitest'
+      testContent: `import { test } from 'vitest'
 import { render } from '@solidjs/testing-library'
 import { MyComponent } from './my-component'
 
-describe('MyComponent', () => {
-  it('basic usage', async () => {
-    render(() => <MyComponent />)
-  })
+test('basic usage', async () => {
+  render(() => <MyComponent />)
 })
 `,
     })
@@ -61,14 +57,12 @@ describe('MyComponent', () => {
     const [_, result] = createUITestCode(input('bun', '@testing-library/react'))
     expect(result).toEqual({
       exportName: 'MyComponent',
-      testContent: `import { describe, it } from 'bun:test'
+      testContent: `import { test } from 'bun:test'
 import { render } from '@testing-library/react'
 import { MyComponent } from './my-component'
 
-describe('MyComponent', () => {
-  it('basic usage', async () => {
-    render(<MyComponent />)
-  })
+test('basic usage', async () => {
+  render(<MyComponent />)
 })
 `,
     })

From 5e8847945bb841a4ed3aa5e514b2df43388c2356 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Tue, 21 Oct 2025 21:38:03 -0400
Subject: [PATCH 61/98] recorder WIP

remove unnecessary toBeTruthy() calls
---
 examples/bun-react/test/basic.test.tsx                        | 2 +-
 examples/bun-solid/test/basic.test.tsx                        | 2 +-
 examples/bun-solid/test/form-test-for-e2e.test.tsx            | 2 +-
 .../jest-monorepo/packages/inner-package/test/basic.test.tsx  | 2 +-
 examples/jest-nextjs-ts-node/app/counter.test.tsx             | 2 +-
 .../jest-react-with-packagejson-config/test/basic.test.tsx    | 2 +-
 examples/jest-react/test/basic.test.tsx                       | 2 +-
 examples/jest-react/test/form-test-for-e2e.test.tsx           | 2 +-
 examples/vitest-react-tailwind3/test/basic.test.tsx           | 2 +-
 examples/vitest-react-tailwind4/test/basic.test.tsx           | 2 +-
 .../vitest-react-tailwind4/test/form-test-for-e2e.test.tsx    | 2 +-
 examples/vitest-react-tailwind4/test/inspector-demo.test.tsx  | 2 +-
 packages/extension/src/recorder/generate-code-from-input.ts   | 2 +-
 test/e2e-recorder.test.ts                                     | 4 ++--
 14 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/examples/bun-react/test/basic.test.tsx b/examples/bun-react/test/basic.test.tsx
index 59480b8..cf59e7b 100644
--- a/examples/bun-react/test/basic.test.tsx
+++ b/examples/bun-react/test/basic.test.tsx
@@ -9,5 +9,5 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
diff --git a/examples/bun-solid/test/basic.test.tsx b/examples/bun-solid/test/basic.test.tsx
index aafbc65..a65db18 100644
--- a/examples/bun-solid/test/basic.test.tsx
+++ b/examples/bun-solid/test/basic.test.tsx
@@ -9,5 +9,5 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
diff --git a/examples/bun-solid/test/form-test-for-e2e.test.tsx b/examples/bun-solid/test/form-test-for-e2e.test.tsx
index 498633d..ec0317d 100644
--- a/examples/bun-solid/test/form-test-for-e2e.test.tsx
+++ b/examples/bun-solid/test/form-test-for-e2e.test.tsx
@@ -5,6 +5,6 @@ import { FormExample } from '../src/FormExample'
 describe('form test for e2e test', () => {
   it('basic usage', async () => {
     render(() => <FormExample />)
-    expect(screen.getByLabelText('First input')).toBeTruthy()
+    expect(screen.getByLabelText('First input'))
   })
 })
diff --git a/examples/jest-monorepo/packages/inner-package/test/basic.test.tsx b/examples/jest-monorepo/packages/inner-package/test/basic.test.tsx
index cc68005..e098e49 100644
--- a/examples/jest-monorepo/packages/inner-package/test/basic.test.tsx
+++ b/examples/jest-monorepo/packages/inner-package/test/basic.test.tsx
@@ -9,5 +9,5 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
diff --git a/examples/jest-nextjs-ts-node/app/counter.test.tsx b/examples/jest-nextjs-ts-node/app/counter.test.tsx
index 70dbe57..314b5b3 100644
--- a/examples/jest-nextjs-ts-node/app/counter.test.tsx
+++ b/examples/jest-nextjs-ts-node/app/counter.test.tsx
@@ -10,7 +10,7 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
 
 // For some reason calling 'render' in the test block needs multiple
diff --git a/examples/jest-react-with-packagejson-config/test/basic.test.tsx b/examples/jest-react-with-packagejson-config/test/basic.test.tsx
index cc68005..e098e49 100644
--- a/examples/jest-react-with-packagejson-config/test/basic.test.tsx
+++ b/examples/jest-react-with-packagejson-config/test/basic.test.tsx
@@ -9,5 +9,5 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
diff --git a/examples/jest-react/test/basic.test.tsx b/examples/jest-react/test/basic.test.tsx
index cc68005..e098e49 100644
--- a/examples/jest-react/test/basic.test.tsx
+++ b/examples/jest-react/test/basic.test.tsx
@@ -9,5 +9,5 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
diff --git a/examples/jest-react/test/form-test-for-e2e.test.tsx b/examples/jest-react/test/form-test-for-e2e.test.tsx
index e5ddbf0..c3ba43f 100644
--- a/examples/jest-react/test/form-test-for-e2e.test.tsx
+++ b/examples/jest-react/test/form-test-for-e2e.test.tsx
@@ -5,6 +5,6 @@ import { FormExample } from '../components/FormExample'
 describe('form test for e2e test', () => {
   it('basic usage', async () => {
     render(<FormExample />)
-    expect(screen.getByLabelText('First input')).toBeTruthy()
+    expect(screen.getByLabelText('First input'))
   })
 })
diff --git a/examples/vitest-react-tailwind3/test/basic.test.tsx b/examples/vitest-react-tailwind3/test/basic.test.tsx
index c8b5763..5bb8ee9 100644
--- a/examples/vitest-react-tailwind3/test/basic.test.tsx
+++ b/examples/vitest-react-tailwind3/test/basic.test.tsx
@@ -9,5 +9,5 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
diff --git a/examples/vitest-react-tailwind4/test/basic.test.tsx b/examples/vitest-react-tailwind4/test/basic.test.tsx
index a16124a..e4258ad 100644
--- a/examples/vitest-react-tailwind4/test/basic.test.tsx
+++ b/examples/vitest-react-tailwind4/test/basic.test.tsx
@@ -9,7 +9,7 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
 
 function setupUi() {
diff --git a/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx b/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
index 175d9e7..08b0168 100644
--- a/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
+++ b/examples/vitest-react-tailwind4/test/form-test-for-e2e.test.tsx
@@ -5,7 +5,7 @@ import { FormExample } from '../components/FormExample'
 describe('form test for e2e test', () => {
   it('basic usage', async () => {
     setupUi()
-    expect(screen.getByLabelText('First input')).toBeTruthy()
+    expect(screen.getByLabelText('First input'))
   })
 })
 
diff --git a/examples/vitest-react-tailwind4/test/inspector-demo.test.tsx b/examples/vitest-react-tailwind4/test/inspector-demo.test.tsx
index 00edef6..ac7f5cc 100644
--- a/examples/vitest-react-tailwind4/test/inspector-demo.test.tsx
+++ b/examples/vitest-react-tailwind4/test/inspector-demo.test.tsx
@@ -5,7 +5,7 @@ import { Counter } from '../../jest-react/components/Counter'
 it('example ui test to be run within the e2e test', async () => {
   setupUi()
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })
 
 function setupUi() {
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index 6cb7556..b9f0e25 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -83,7 +83,7 @@ export async function generateCodeFromInput(
   // When 'useExpect' is true, generate an 'expect' statement
   if (useExpect) {
     const expect = 'expect'
-    code = `${expect}(${selector}).toBeTruthy()`
+    code = `${expect}(${selector})`
     if (testFramework === 'vitest') {
       requiredImports[expect] = testFramework
     }
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index c3f6389..e751399 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -139,7 +139,7 @@ async function runRecorderTest(browser: Browser, exampleFolder: string, dismissS
   })
   // Check that the submission count increased due to the click, which causes the userEvent code to run in the debugger
   await replicaPanel.getByText(`Submit Count: 1`).waitFor()
-  await replicaPanel.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`).waitFor()
+  await replicaPanel.getByText(`expect(screen.getByText(/^submit count: 1$/i))`).waitFor()
 
   // Finish the test
   await page.getByRole('button', { name: 'Continue (F5)' }).click()
@@ -149,5 +149,5 @@ async function runRecorderTest(browser: Browser, exampleFolder: string, dismissS
 
   // Check for the generated code in the editor
   await page.getByText(`await userEvent.click(screen.getByRole('button', { name: /^submit$/i }))`).waitFor()
-  await page.getByText(`expect(screen.getByText(/^submit count: 1$/i)).toBeTruthy()`).waitFor()
+  await page.getByText(`expect(screen.getByText(/^submit count: 1$/i))`).waitFor()
 }

From 1170de4e03b0e292265b96ca339771a2e6b5967a Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 16:29:55 -0400
Subject: [PATCH 62/98] update pnpm

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d85eef1..5df3293 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,5 @@
       "jest-config@30.2.0": "patches/jest-config@30.2.0.patch"
     }
   },
-  "packageManager": "pnpm@10.18.3"
+  "packageManager": "pnpm@10.19.0+sha512.c9fc7236e92adf5c8af42fd5bf1612df99c2ceb62f27047032f4720b33f8eacdde311865e91c411f2774f618d82f320808ecb51718bfa82c060c4ba7c76a32b8"
 }

From 61dc9bcdbfef84b46d9da5ba605bb9dd9898414c Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 16:30:23 -0400
Subject: [PATCH 63/98] recorder

change button visual
---
 .../web-view-vite/src/components/Toolbar.tsx   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index fe15a9e..73b2d2e 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -50,16 +50,22 @@ export function Toolbar() {
       <div class="h-10 w-10">
         {/* Spacer */}
       </div>
-      <div class="flex">
+      <div class="flex [--button-padding-horizontal:0px] [--button-padding-vertical:0px]">
         <ToolbarButton
           onClick={() => recorder.toggle(!recorder.isRecording())}
           label={recorder.isRecording() ? 'Stop recording' : 'Record input as code'}
         >
-          <div
-            class={`w-4 h-4 rounded-full ${
-                recorder.isRecording() ? 'bg-red-500' : 'bg-gray-400'
-            }`}
-          />
+          <div class="flex flex-col items-center">
+            <div class="font-medium -mt-0.5">REC</div>
+            <div
+              class="w-4 aspect-square rounded-full bg-gray-300"
+              classList={{
+                'bg-red-500': recorder.isRecording(),
+                'bg-gray-400': !recorder.isRecording(),
+              }}
+            >
+            </div>
+          </div>
         </ToolbarButton>
         <Show when={recorder.isRecording()}>
           <Popover

From 6ca75fdf2936f9e88349b9b2e70ee9231bf2decb Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 18:35:58 -0400
Subject: [PATCH 64/98] recorder

wrap generated render fn in iife so you don't have to click 'Step Over' multiple times
---
 .../recorder/create-new-test-file/create-ui-test-code.ts    | 2 +-
 packages/extension/test/create-ui-test-code.test.ts         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
index ec0e422..66fa755 100644
--- a/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
+++ b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
@@ -53,7 +53,7 @@ import { render } from '${testingLibrary}'
 import ${isDefaultExport ? exportName : `{ ${exportName} }`} from './${relativePathToSrc}'
 
 test('basic usage', async () => {
-  render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`})
+  (() => render(${isArrowRender ? `() => <${exportName} />` : `<${exportName} />`}))()
 })
 `
   return [null, { exportName, testContent }]
diff --git a/packages/extension/test/create-ui-test-code.test.ts b/packages/extension/test/create-ui-test-code.test.ts
index 7ae5251..e23f6a9 100644
--- a/packages/extension/test/create-ui-test-code.test.ts
+++ b/packages/extension/test/create-ui-test-code.test.ts
@@ -32,7 +32,7 @@ import { render } from '@testing-library/react'
 import { MyComponent } from './my-component'
 
 test('basic usage', async () => {
-  render(<MyComponent />)
+  (() => render(<MyComponent />))()
 })
 `,
     })
@@ -47,7 +47,7 @@ import { render } from '@solidjs/testing-library'
 import { MyComponent } from './my-component'
 
 test('basic usage', async () => {
-  render(() => <MyComponent />)
+  (() => render(() => <MyComponent />))()
 })
 `,
     })
@@ -62,7 +62,7 @@ import { render } from '@testing-library/react'
 import { MyComponent } from './my-component'
 
 test('basic usage', async () => {
-  render(<MyComponent />)
+  (() => render(<MyComponent />))()
 })
 `,
     })

From 66bb6a07edfd5018c396573b7cadcd56df5651c8 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 18:36:15 -0400
Subject: [PATCH 65/98] eslint: allow 'test' block

---
 eslint.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/eslint.config.js b/eslint.config.js
index 9766bea..894efd6 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -16,5 +16,6 @@ module.exports = config({
     // Convenient for this project
     'node/prefer-global/process': 'off',
     'antfu/no-import-node-modules-by-path': 'off',
+    'test/consistent-test-it': 'off',
   },
 })

From 9246e5780ea1406674bf4cdebde90b64a11817db Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 18:36:28 -0400
Subject: [PATCH 66/98] fix import

---
 examples/vitest-react-tailwind4/test/form.test.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/examples/vitest-react-tailwind4/test/form.test.tsx b/examples/vitest-react-tailwind4/test/form.test.tsx
index b0e452a..7412410 100644
--- a/examples/vitest-react-tailwind4/test/form.test.tsx
+++ b/examples/vitest-react-tailwind4/test/form.test.tsx
@@ -1,11 +1,10 @@
 import { expect } from 'vitest'
-import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import FormExample from '../components/FormExample'
+import { FormExample } from '../components/FormExample'
 
 it('renders FormExample with form and non-form sections', async () => {
-  render(<FormExample />)
+  (() => render(<FormExample />))()
 
   // Fill form inputs and submit
   const firstInput = screen.getByLabelText('First input')

From 2fb61ff5acd20fca5d6484843bd5abd0bd1209ca Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 19:25:00 -0400
Subject: [PATCH 67/98] recorder

don't import 'test' from jest
---
 .../src/recorder/create-new-test-file/create-ui-test-code.ts  | 4 ++--
 packages/extension/test/create-ui-test-code.test.ts           | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
index 66fa755..1fde14d 100644
--- a/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
+++ b/packages/extension/src/recorder/create-new-test-file/create-ui-test-code.ts
@@ -44,12 +44,12 @@ export function createUITestCode(
   }
 
   const fwImport = frameworkInfo.framework === 'bun' ? 'bun:test' : frameworkInfo.framework
+  const testImport = frameworkInfo.framework === 'jest' ? '' : `import { test } from '${fwImport}'\n`
 
   const isArrowRender = testingLibrary === '@solidjs/testing-library'
 
   // Create basic test content
-  const testContent = `import { test } from '${fwImport}'
-import { render } from '${testingLibrary}'
+  const testContent = `${testImport}import { render } from '${testingLibrary}'
 import ${isDefaultExport ? exportName : `{ ${exportName} }`} from './${relativePathToSrc}'
 
 test('basic usage', async () => {
diff --git a/packages/extension/test/create-ui-test-code.test.ts b/packages/extension/test/create-ui-test-code.test.ts
index e23f6a9..7edd9d5 100644
--- a/packages/extension/test/create-ui-test-code.test.ts
+++ b/packages/extension/test/create-ui-test-code.test.ts
@@ -27,8 +27,7 @@ describe('createUITestCode', () => {
     const [_, result] = createUITestCode(input('jest', '@testing-library/react'))
     expect(result).toEqual({
       exportName: 'MyComponent',
-      testContent: `import { test } from 'jest'
-import { render } from '@testing-library/react'
+      testContent: `import { render } from '@testing-library/react'
 import { MyComponent } from './my-component'
 
 test('basic usage', async () => {

From 77475d76c18829d79b42eef8692773e23f28ae3a Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 21:03:06 -0400
Subject: [PATCH 68/98] recorder

- handle enter key press
- allow interacting with elements that don't have a unique selector i.e. use getByAll query with index
---
 .../jest-nextjs-minimal/app/TodoList.test.tsx |  6 ++
 examples/jest-nextjs-minimal/app/TodoList.tsx | 87 +++++++++++++++++++
 examples/jest-nextjs-minimal/package.json     |  2 +
 .../jest-nextjs-minimal/styles/global.css     |  2 +
 .../src/panel-controller/panel-router.ts      |  2 +
 .../src/recorder/generate-code-from-input.ts  | 11 ++-
 packages/web-view-vite/package.json           |  2 +
 .../web-view-vite/src/recorder/recorder.ts    | 47 ++++++++--
 pnpm-lock.yaml                                | 58 +++++++++----
 9 files changed, 193 insertions(+), 24 deletions(-)
 create mode 100644 examples/jest-nextjs-minimal/app/TodoList.test.tsx
 create mode 100644 examples/jest-nextjs-minimal/app/TodoList.tsx

diff --git a/examples/jest-nextjs-minimal/app/TodoList.test.tsx b/examples/jest-nextjs-minimal/app/TodoList.test.tsx
new file mode 100644
index 0000000..dcb5476
--- /dev/null
+++ b/examples/jest-nextjs-minimal/app/TodoList.test.tsx
@@ -0,0 +1,6 @@
+import { render } from '@testing-library/react'
+import { TodoList } from './TodoList'
+
+test('basic usage', async () => {
+  (() => render(<TodoList />))()
+})
diff --git a/examples/jest-nextjs-minimal/app/TodoList.tsx b/examples/jest-nextjs-minimal/app/TodoList.tsx
new file mode 100644
index 0000000..505eebc
--- /dev/null
+++ b/examples/jest-nextjs-minimal/app/TodoList.tsx
@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+
+interface Todo {
+  id: number
+  text: string
+  completed: boolean
+}
+
+export function TodoList() {
+  const [todos, setTodos] = useState<Todo[]>([])
+  const [input, setInput] = useState('')
+
+  const addTodo = () => {
+    if (input.trim()) {
+      setTodos([...todos, { id: Date.now(), text: input, completed: false }])
+      setInput('')
+    }
+  }
+
+  const toggleTodo = (id: number) => {
+    setTodos(todos.map(todo => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)))
+  }
+
+  const deleteTodo = (id: number) => {
+    setTodos(todos.filter(todo => todo.id !== id))
+  }
+
+  const doneCount = todos.filter(todo => todo.completed).length
+  const notDoneCount = todos.filter(todo => !todo.completed).length
+
+  return (
+    <div className="w-full max-w-md">
+      <div className="mb-8">
+        <h1 className="text-2xl font-medium text-white">Todos</h1>
+        <div className="text-sm text-gray-400 mt-1 space-y-0.5">
+          <div>{doneCount} done</div>
+          <div>{notDoneCount} not done</div>
+        </div>
+      </div>
+
+      <div className="flex gap-2 mb-6">
+        <input
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && addTodo()}
+          placeholder="Add a new todo"
+          className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-600"
+        />
+        <button
+          onClick={addTodo}
+          className="bg-white text-black hover:bg-gray-200 px-4 py-2 rounded text-sm font-medium transition-colors"
+        >
+          Add
+        </button>
+      </div>
+
+      <div className="space-y-2">
+        {todos.map(todo => (
+          <div key={todo.id} className="flex items-center gap-3 p-3 bg-gray-800 rounded border border-gray-700 group">
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={() => toggleTodo(todo.id)}
+              className="h-4 w-4 rounded border-gray-600 cursor-pointer"
+            />
+            <span className={`flex-1 text-sm ${todo.completed ? 'line-through text-gray-400' : 'text-white'}`}>
+              {todo.text}
+            </span>
+            <button
+              onClick={() => deleteTodo(todo.id)}
+              className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 flex items-center justify-center hover:bg-muted rounded"
+            >
+              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {todos.length === 0 && (
+        <p className="text-center text-gray-400 text-sm mt-8">No todos yet. Add one to get started.</p>
+      )}
+    </div>
+  )
+}
diff --git a/examples/jest-nextjs-minimal/package.json b/examples/jest-nextjs-minimal/package.json
index 1891167..5fec0dd 100644
--- a/examples/jest-nextjs-minimal/package.json
+++ b/examples/jest-nextjs-minimal/package.json
@@ -13,10 +13,12 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.2",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
+    "tailwindcss": "^4.1.16",
     "typescript": "^5.9.3"
   }
 }
diff --git a/examples/jest-nextjs-minimal/styles/global.css b/examples/jest-nextjs-minimal/styles/global.css
index 4d03bee..05a2710 100644
--- a/examples/jest-nextjs-minimal/styles/global.css
+++ b/examples/jest-nextjs-minimal/styles/global.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 html,
 body {
   padding: 0;
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index a4ca257..7047190 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -20,6 +20,8 @@ const t = initTRPC.context<PanelRouterCtx>().create()
 export const zRecordedEventData = z.object({
   text: z.optional(z.string()), // Used for change events
   options: z.optional(z.array(z.string())), // Used for selectOptions events
+  enterKeyPressed: z.optional(z.boolean()), // Used for Enter keydown events
+  indexIfMultipleFound: z.optional(z.number()), // Used when there are multiple elements for the same query
 })
 
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index b9f0e25..16cc2ad 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -72,7 +72,12 @@ export async function generateCodeFromInput(
     if (queryArg0 === 'document') {
       return 'document'
     }
-    return `${screen}.${findMethod}(${queryArgsStr})`
+    let index = ''
+    if (eventData.indexIfMultipleFound !== undefined) {
+      findMethod = findMethod.replace(/^getBy/, 'getAllBy')
+      index = `[${eventData.indexIfMultipleFound}]`
+    }
+    return `${screen}.${findMethod}(${queryArgsStr})${index}`
   })()
 
   let code = ''
@@ -121,6 +126,10 @@ export async function generateCodeFromInput(
 
       code = `await ${userEvent}.${event}(${selector}${userEventArgs})`
 
+      if (event === 'keydown' && eventData.enterKeyPressed) {
+        code = `await ${userEvent}.keyboard('{enter}')`
+      }
+
       requiredImports[userEvent] = '@testing-library/user-event'
     }
     else {
diff --git a/packages/web-view-vite/package.json b/packages/web-view-vite/package.json
index 5f7494b..d142902 100644
--- a/packages/web-view-vite/package.json
+++ b/packages/web-view-vite/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@corvu/resizable": "^0.2.5",
+    "@happy-dom/global-registrator": "^20.0.8",
     "@kobalte/core": "0.13.11",
     "@kobalte/utils": "^0.9.1",
     "@shikijs/core": "^3.13.0",
@@ -24,6 +25,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
+    "happy-dom": "^20.0.8",
     "kagekiri": "^2.0.0",
     "lodash": "^4.17.21",
     "lucide-solid": "^0.546.0",
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 6c87a73..0d2af12 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,7 +1,7 @@
 import { makeEventListener } from '@solid-primitives/event-listener'
 import { ReactiveMap } from '@solid-primitives/map'
 import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
-import { getSuggestedQuery } from '@testing-library/dom'
+import { getSuggestedQuery, queries } from '@testing-library/dom'
 import type { userEvent } from '@testing-library/user-event'
 import { createEffect, createSignal } from 'solid-js'
 import type { z } from 'zod/mini'
@@ -63,7 +63,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
       return
     }
     if (isRecording()) {
-      for (const eventType of ['click', 'submit', 'change'] as const) {
+      for (const eventType of ['click', 'submit', 'change', 'keydown'] as const) {
         makeEventListener(root, eventType, async (e: Event) => {
           let target = e.target
 
@@ -119,11 +119,48 @@ export function createRecorder(shadowHost: HTMLDivElement) {
 
           const eventData: z.infer<typeof zRecordedEventData> = {}
 
-          if (eventType === 'change' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
-            const text = target.value
-            eventData.text = text
+          // On text input change
+          if (eventType === 'change') {
+            if (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement) {
+              if (target.type === 'text') {
+                const text = target.value
+                eventData.text = text
+              }
+              if (target.type === 'checkbox' || target.type === 'radio') {
+                e.preventDefault()
+                return // generate code for the 'click' event, not 'change'
+              }
+            }
           }
 
+          if (eventType === 'keydown') {
+            if (e instanceof KeyboardEvent && target instanceof HTMLInputElement && e.key === 'Enter') {
+              eventData.enterKeyPressed = true
+              target.blur()
+              await new Promise(resolve => setTimeout(resolve, 0))
+              target.focus()
+            }
+            else {
+              // Ignore other key presses
+              return
+            }
+          }
+
+          // Check if the query returns multiple elements
+          await (async () => {
+            try {
+              const method = `findAllBy${suggestedQuery.queryName}`
+              // @ts-expect-error Method should exist
+              const results = await queries[method](root, ...suggestedQuery.queryArgs)
+              if (results.length > 1) {
+                eventData.indexIfMultipleFound = results.indexOf(target)
+              }
+            }
+            catch (error) {
+              // Do nothing?
+            }
+          })()
+
           const recordedEventType = (() => {
             if (eventType === 'click') {
               return mouseEvent()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 50c4ed0..ff9a349 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,7 +15,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^2.19.1
-        version: 2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+        version: 2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       '@changesets/cli':
         specifier: ^2.29.7
         version: 2.29.7(@types/node@24.8.1)
@@ -54,7 +54,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
 
   examples/jest-babel-nextjs:
     dependencies:
@@ -145,6 +145,9 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/jest':
         specifier: ^30.0.0
         version: 30.0.0
@@ -157,6 +160,9 @@ importers:
       jest-environment-jsdom:
         specifier: ^30.2.0
         version: 30.2.0
+      tailwindcss:
+        specifier: ^4.1.16
+        version: 4.1.16
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -450,7 +456,7 @@ importers:
         version: 0.64.0
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+        version: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
       ws:
         specifier: ^8.18.3
         version: 8.18.3
@@ -507,6 +513,9 @@ importers:
       '@corvu/resizable':
         specifier: ^0.2.5
         version: 0.2.5(solid-js@1.9.9)
+      '@happy-dom/global-registrator':
+        specifier: ^20.0.8
+        version: 20.0.8
       '@kobalte/core':
         specifier: 0.13.11
         version: 0.13.11(solid-js@1.9.9)
@@ -555,6 +564,9 @@ importers:
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
+      happy-dom:
+        specifier: ^20.0.8
+        version: 20.0.8
       kagekiri:
         specifier: ^2.0.0
         version: 2.0.0
@@ -2036,6 +2048,10 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@happy-dom/global-registrator@20.0.8':
+    resolution: {integrity: sha512-6XJ7BGO3tz3yLZcrQF1JIQAEZ6u3mJ2EYfLSZDuZPC5EVdGtz5O2R/RlWgLYATc2tbkPnuxb9qHWHdT4TlzeOw==}
+    engines: {node: '>=20.0.0'}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -5197,8 +5213,8 @@ packages:
     resolution: {integrity: sha512-yiaVI0Da/tGrBD6QwmXkJZH9RPW1/TCxqadbwkp0MgwRTTDNyBC09Ow+nppVLhbG4Ws2Z6t29Vzbbd6C0y7LCQ==}
     engines: {node: '>=16.0.0'}
 
-  happy-dom@20.0.5:
-    resolution: {integrity: sha512-AiqA0rfS7WR1kihXt9W9aA5LFLaOKzwiL+QoI7BkOQ0r21C7VHTOf4k8QNlnWYaHLhpI2tZzJPLV1lY1obDTmw==}
+  happy-dom@20.0.8:
+    resolution: {integrity: sha512-TlYaNQNtzsZ97rNMBAm8U+e2cUQXNithgfCizkDgc11lgmN4j9CKMhO3FPGKWQYPwwkFcPpoXYF/CqEPLgzfOg==}
     engines: {node: '>=20.0.0'}
 
   harmony-reflect@1.6.2:
@@ -7068,6 +7084,9 @@ packages:
   tailwindcss@4.1.14:
     resolution: {integrity: sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==}
 
+  tailwindcss@4.1.16:
+    resolution: {integrity: sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==}
+
   tapable@2.2.2:
     resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
     engines: {node: '>=6'}
@@ -7815,7 +7834,7 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
+  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))':
     dependencies:
       '@antfu/install-pkg': 0.3.3
       '@clack/prompts': 0.7.0
@@ -7840,7 +7859,7 @@ snapshots:
       eslint-plugin-toml: 0.11.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-unicorn: 53.0.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-unused-imports: 3.2.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
-      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
+      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2))
       eslint-plugin-vue: 9.26.0(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-yml: 1.14.0(eslint@9.38.0(jiti@2.6.1))
       eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.34)(eslint@9.38.0(jiti@2.6.1))
@@ -9354,6 +9373,11 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@happy-dom/global-registrator@20.0.8':
+    dependencies:
+      '@types/node': 20.19.22
+      happy-dom: 20.0.8
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -10816,7 +10840,6 @@ snapshots:
   '@types/node@20.19.22':
     dependencies:
       undici-types: 6.21.0
-    optional: true
 
   '@types/node@24.8.1':
     dependencies:
@@ -10851,8 +10874,7 @@ snapshots:
 
   '@types/vscode@1.105.0': {}
 
-  '@types/whatwg-mimetype@3.0.2':
-    optional: true
+  '@types/whatwg-mimetype@3.0.2': {}
 
   '@types/ws@8.18.1':
     dependencies:
@@ -12259,13 +12281,13 @@ snapshots:
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)):
     dependencies:
       '@typescript-eslint/utils': 7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.38.0(jiti@2.6.1)
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      vitest: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
+      vitest: 3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -12709,12 +12731,11 @@ snapshots:
       webidl-conversions: 7.0.0
       whatwg-mimetype: 3.0.0
 
-  happy-dom@20.0.5:
+  happy-dom@20.0.8:
     dependencies:
       '@types/node': 20.19.22
       '@types/whatwg-mimetype': 3.0.2
       whatwg-mimetype: 3.0.0
-    optional: true
 
   harmony-reflect@1.6.2: {}
 
@@ -14905,6 +14926,8 @@ snapshots:
 
   tailwindcss@4.1.14: {}
 
+  tailwindcss@4.1.16: {}
+
   tapable@2.2.2: {}
 
   tar-fs@2.1.4:
@@ -15120,8 +15143,7 @@ snapshots:
 
   underscore@1.13.7: {}
 
-  undici-types@6.21.0:
-    optional: true
+  undici-types@6.21.0: {}
 
   undici-types@7.14.0: {}
 
@@ -15436,7 +15458,7 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.5)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
+  vitest@3.2.4(@types/node@24.8.1)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(less@4.4.2)(lightningcss@1.30.1)(sass@1.93.2)(stylus@0.64.0)(yaml@2.4.2):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
@@ -15463,7 +15485,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.8.1
-      happy-dom: 20.0.5
+      happy-dom: 20.0.8
       jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti

From 3e64b904545b3f72e8720522fbb495acf98711b8 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 21:54:30 -0400
Subject: [PATCH 69/98] recorder

add recorder tests using TodoList component
---
 .../{app => components}/TodoList.test.tsx     |  0
 .../{app => components}/TodoList.tsx          |  4 +-
 test/e2e-recorder.test.ts                     | 93 +++++++++++++++++--
 3 files changed, 89 insertions(+), 8 deletions(-)
 rename examples/jest-nextjs-minimal/{app => components}/TodoList.test.tsx (100%)
 rename examples/jest-nextjs-minimal/{app => components}/TodoList.tsx (96%)

diff --git a/examples/jest-nextjs-minimal/app/TodoList.test.tsx b/examples/jest-nextjs-minimal/components/TodoList.test.tsx
similarity index 100%
rename from examples/jest-nextjs-minimal/app/TodoList.test.tsx
rename to examples/jest-nextjs-minimal/components/TodoList.test.tsx
diff --git a/examples/jest-nextjs-minimal/app/TodoList.tsx b/examples/jest-nextjs-minimal/components/TodoList.tsx
similarity index 96%
rename from examples/jest-nextjs-minimal/app/TodoList.tsx
rename to examples/jest-nextjs-minimal/components/TodoList.tsx
index 505eebc..ff2659d 100644
--- a/examples/jest-nextjs-minimal/app/TodoList.tsx
+++ b/examples/jest-nextjs-minimal/components/TodoList.tsx
@@ -34,7 +34,7 @@ export function TodoList() {
         <h1 className="text-2xl font-medium text-white">Todos</h1>
         <div className="text-sm text-gray-400 mt-1 space-y-0.5">
           <div>{doneCount} done</div>
-          <div>{notDoneCount} not done</div>
+          <div>{notDoneCount} in progress</div>
         </div>
       </div>
 
@@ -62,6 +62,7 @@ export function TodoList() {
               checked={todo.completed}
               onChange={() => toggleTodo(todo.id)}
               className="h-4 w-4 rounded border-gray-600 cursor-pointer"
+              aria-label="Toggle done"
             />
             <span className={`flex-1 text-sm ${todo.completed ? 'line-through text-gray-400' : 'text-white'}`}>
               {todo.text}
@@ -69,6 +70,7 @@ export function TodoList() {
             <button
               onClick={() => deleteTodo(todo.id)}
               className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 flex items-center justify-center hover:bg-muted rounded"
+              aria-label="Delete"
             >
               <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <line x1="18" y1="6" x2="6" y2="18"></line>
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index e751399..96eff0b 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -1,14 +1,15 @@
 import fs from 'node:fs/promises'
+import { pathToFileURL } from 'node:url'
 import type { Browser } from '@playwright/test'
 import { test } from '@playwright/test'
 import path from 'pathe'
 import { DebuggerHelper } from './debugger-helper'
 
 // Undo changes made to the e2e test file that gets edited
-for (const exampleFolder of ['vitest-react-tailwind4', 'jest-react']) {
+for (const exampleFolder of ['vitest-react-tailwind4', 'jest-react', 'bun-solid']) {
   const e2eTestTestPath = path.join(__dirname, `../examples/${exampleFolder}/test/form-test-for-e2e.test.tsx`)
   let e2eTestTestOriginalContent: string
-  test.beforeEach(async () => {
+  test.beforeAll(async () => {
     e2eTestTestOriginalContent = await fs.readFile(e2eTestTestPath, 'utf8')
   })
   test.afterEach(async () => {
@@ -17,6 +18,19 @@ for (const exampleFolder of ['vitest-react-tailwind4', 'jest-react']) {
   })
 }
 
+// Undo changes made to the TodoList.test.tsx file that gets edited
+{
+  const todoListTestPath = path.join(__dirname, '../examples/jest-nextjs-minimal/components/TodoList.test.tsx')
+  let todoListTestOriginalContent: string = ''
+  test.beforeAll(async () => {
+    todoListTestOriginalContent = await fs.readFile(todoListTestPath, 'utf8')
+  })
+  test.afterEach(async () => {
+  // Undo changes made to the TodoList.test.tsx file
+    await fs.writeFile(todoListTestPath, todoListTestOriginalContent, 'utf8')
+  })
+}
+
 test.afterEach(async () => {
   // Delete the generated test file
   const generatedFilePath = path.join(__dirname, '../examples/vitest-react-tailwind4/components/FormExample.test.tsx')
@@ -59,18 +73,67 @@ test('Create a UI test file', async ({ browser }) => {
 })
 
 test('Record a UI test, Vitest + React + Tailwind4', async ({ browser }) => {
-  await runRecorderTest(browser, 'vitest-react-tailwind4', true)
+  await recordFormTest(browser, 'vitest-react-tailwind4', 'form-test-for-e2e.test.tsx', true)
 })
 
 test('Record a UI test, Jest + React', async ({ browser }) => {
-  await runRecorderTest(browser, 'jest-react')
+  test.skip(!!process.env.CI, 'Rely on the other Jest + React recorder test to save time in CI')
+  await recordFormTest(browser, 'jest-react', 'form-test-for-e2e.test.tsx')
 })
 
 test('Record a UI test, Bun + Solid', async ({ browser }) => {
-  await runRecorderTest(browser, 'bun-solid', true)
+  await recordFormTest(browser, 'bun-solid', 'form-test-for-e2e.test.tsx', true)
+})
+
+test('Record TodoList test, Jest + React', async ({ browser }) => {
+  const { page, replicaPanel } = await startRecorderTest(browser, 'jest-nextjs-minimal', 'TodoList.test.tsx', true)
+
+  // Add todos
+  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).click()
+  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 1')
+  await page.keyboard.press('Enter')
+  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 2')
+  await page.keyboard.press('Enter')
+  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 3')
+  await page.keyboard.press('Enter')
+
+  // Initial text
+  await replicaPanel.getByText('0 done').waitFor()
+  await replicaPanel.getByText('3 in progress').waitFor()
+
+  // Toggle todos
+  await replicaPanel.getByRole('checkbox', { name: 'Toggle done' }).nth(1).check()
+  await replicaPanel.getByRole('checkbox', { name: 'Toggle done' }).nth(2).check()
+  await replicaPanel.getByText('2 done').waitFor()
+  await replicaPanel.getByText('1 in progress').waitFor()
+
+  // Delete todos
+  await replicaPanel.getByRole('button', { name: 'Delete' }).first().click()
+  await replicaPanel.getByRole('button', { name: 'Delete' }).nth(1).click()
+  await replicaPanel.getByText('1 done').waitFor()
+  await replicaPanel.getByText('0 in progress').waitFor()
+
+  // Generate 'expect' statements
+  await replicaPanel.getByText(/^1 done$/).first().click({
+    modifiers: ['Alt'],
+  })
+  await replicaPanel.getByText(/^0 in progress$/).first().click({
+    modifiers: ['Alt'],
+  })
+
+  // End the test
+  await page.getByRole('button', { name: 'Continue (F5)' }).click()
+
+  // Wait for replica panel to be closed
+  await page.frameLocator('iframe.webview.ready').locator('iframe[title="Tested UI"]').waitFor({ state: 'detached' })
+
+  // Check for the generated code in the editor; Make sure indexes are used for the checkboxes and buttons
+  await page.getByText(`await userEvent.click(screen.getAllByRole('checkbox', { name: /^toggle done$/i })[1])`).waitFor()
+  await page.getByText(`await userEvent.click(screen.getAllByRole('button', { name: /^delete$/i })[0])`).waitFor()
+  await page.getByText(`expect(screen.getByText(/^1 done$/i))`).waitFor()
 })
 
-async function runRecorderTest(browser: Browser, exampleFolder: string, dismissStylePrompt = false) {
+async function startRecorderTest(browser: Browser, exampleFolder: string, testFileSearch: string, dismissStylePrompt = false) {
   const page = await browser.newPage()
 
   await page.goto(`http://localhost:8080/?folder=/source/examples/${exampleFolder}`)
@@ -78,7 +141,7 @@ async function runRecorderTest(browser: Browser, exampleFolder: string, dismissS
   // Open form-test-for-e2e.test.tsx
   await page.locator('.search-label').click()
   await page.locator('.monaco-findInput > .monaco-inputbox > .ibwrapper > .input').clear()
-  await page.locator('.monaco-findInput > .monaco-inputbox > .ibwrapper > .input').type('form-test-for-e2e.test.tsx')
+  await page.locator('.monaco-findInput > .monaco-inputbox > .ibwrapper > .input').type(testFileSearch)
   await page.locator('.highlight').first().click()
 
   // Hide the bottom panel to get more space
@@ -109,6 +172,22 @@ async function runRecorderTest(browser: Browser, exampleFolder: string, dismissS
   // Start recording
   await replicaPanel.getByRole('button', { name: 'Record input as code' }).first().click()
 
+  return { page, replicaPanel, debugHelper }
+}
+
+async function recordFormTest(
+  browser: Browser,
+  exampleFolder: string,
+  testFileSearch: string,
+  dismissStylePrompt = false,
+) {
+  const { page, replicaPanel } = await startRecorderTest(
+    browser,
+    exampleFolder,
+    testFileSearch,
+    dismissStylePrompt,
+  )
+
   // Check that the submission count starts at 0
   await replicaPanel.getByText(`Submit Count: 0`).waitFor()
 

From ce4a6e6ab45679cac7da2c71599598e665368b9c Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 22:09:46 -0400
Subject: [PATCH 70/98] improve jest debug console text color

---
 packages/extension/src/framework-support/jest-support.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/extension/src/framework-support/jest-support.ts b/packages/extension/src/framework-support/jest-support.ts
index 27b5846..8dd994c 100644
--- a/packages/extension/src/framework-support/jest-support.ts
+++ b/packages/extension/src/framework-support/jest-support.ts
@@ -59,6 +59,7 @@ export async function jestDebugConfig(
       '--detectOpenHandles',
       // TODO find out why Jest doesn't exit on its own
       '--forceExit',
+      '--colors', // Show green text for the 'pass text' TODO find out why the rest is always red
     ],
     autoAttachChildProcesses: true,
   }

From c95cbe7646a6be27e30c6911877030b889aa3e44 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sun, 26 Oct 2025 22:16:37 -0400
Subject: [PATCH 71/98] recorder

tweaks
---
 .../components/TodoList.tsx                   | 104 +++++++++---------
 .../src/framework-support/jest-support.ts     |   2 +-
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/examples/jest-nextjs-minimal/components/TodoList.tsx b/examples/jest-nextjs-minimal/components/TodoList.tsx
index ff2659d..a23551d 100644
--- a/examples/jest-nextjs-minimal/components/TodoList.tsx
+++ b/examples/jest-nextjs-minimal/components/TodoList.tsx
@@ -29,61 +29,63 @@ export function TodoList() {
   const notDoneCount = todos.filter(todo => !todo.completed).length
 
   return (
-    <div className="w-full max-w-md">
-      <div className="mb-8">
-        <h1 className="text-2xl font-medium text-white">Todos</h1>
-        <div className="text-sm text-gray-400 mt-1 space-y-0.5">
-          <div>{doneCount} done</div>
-          <div>{notDoneCount} in progress</div>
+    <div className="flex justify-center">
+      <div className="w-full max-w-md">
+        <div className="mb-8">
+          <h1 className="text-2xl font-medium text-white">Todos</h1>
+          <div className="text-sm text-gray-400 mt-1 space-y-0.5">
+            <div>{doneCount} done</div>
+            <div>{notDoneCount} in progress</div>
+          </div>
         </div>
-      </div>
 
-      <div className="flex gap-2 mb-6">
-        <input
-          value={input}
-          onChange={e => setInput(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && addTodo()}
-          placeholder="Add a new todo"
-          className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-600"
-        />
-        <button
-          onClick={addTodo}
-          className="bg-white text-black hover:bg-gray-200 px-4 py-2 rounded text-sm font-medium transition-colors"
-        >
-          Add
-        </button>
-      </div>
+        <div className="flex gap-2 mb-6">
+          <input
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && addTodo()}
+            placeholder="Add a new todo"
+            className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-600"
+          />
+          <button
+            onClick={addTodo}
+            className="bg-white text-black hover:bg-gray-200 px-4 py-2 rounded text-sm font-medium transition-colors"
+          >
+            Add
+          </button>
+        </div>
 
-      <div className="space-y-2">
-        {todos.map(todo => (
-          <div key={todo.id} className="flex items-center gap-3 p-3 bg-gray-800 rounded border border-gray-700 group">
-            <input
-              type="checkbox"
-              checked={todo.completed}
-              onChange={() => toggleTodo(todo.id)}
-              className="h-4 w-4 rounded border-gray-600 cursor-pointer"
-              aria-label="Toggle done"
-            />
-            <span className={`flex-1 text-sm ${todo.completed ? 'line-through text-gray-400' : 'text-white'}`}>
-              {todo.text}
-            </span>
-            <button
-              onClick={() => deleteTodo(todo.id)}
-              className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 flex items-center justify-center hover:bg-muted rounded"
-              aria-label="Delete"
-            >
-              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-          </div>
-        ))}
-      </div>
+        <div className="space-y-2">
+          {todos.map(todo => (
+            <div key={todo.id} className="flex items-center gap-3 p-3 bg-gray-800 rounded border border-gray-700 group">
+              <input
+                type="checkbox"
+                checked={todo.completed}
+                onChange={() => toggleTodo(todo.id)}
+                className="h-4 w-4 rounded border-gray-600 cursor-pointer"
+                aria-label="Toggle done"
+              />
+              <span className={`flex-1 text-sm ${todo.completed ? 'line-through text-gray-400' : 'text-white'}`}>
+                {todo.text}
+              </span>
+              <button
+                onClick={() => deleteTodo(todo.id)}
+                className="opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8 flex items-center justify-center hover:bg-muted rounded"
+                aria-label="Delete"
+              >
+                <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+          ))}
+        </div>
 
-      {todos.length === 0 && (
-        <p className="text-center text-gray-400 text-sm mt-8">No todos yet. Add one to get started.</p>
-      )}
+        {todos.length === 0 && (
+          <p className="text-center text-gray-400 text-sm mt-8">No todos yet. Add one to get started.</p>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/packages/extension/src/framework-support/jest-support.ts b/packages/extension/src/framework-support/jest-support.ts
index 8dd994c..cccc4ad 100644
--- a/packages/extension/src/framework-support/jest-support.ts
+++ b/packages/extension/src/framework-support/jest-support.ts
@@ -59,7 +59,7 @@ export async function jestDebugConfig(
       '--detectOpenHandles',
       // TODO find out why Jest doesn't exit on its own
       '--forceExit',
-      '--colors', // Show green text for the 'pass text' TODO find out why the rest is always red
+      '--colors', // Show green text for the 'pass' text. TODO find out why the rest of the output is red text
     ],
     autoAttachChildProcesses: true,
   }

From 2f33e9d5d51b5025aceb74123d2ac132c2fa8951 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 27 Oct 2025 19:53:16 -0400
Subject: [PATCH 72/98] recorder

make sure the recorder still works when the editor isnt open. re-open the editor if closed on finish test
---
 .../create-ui-test-file.ts                    |  8 +++---
 .../src/recorder/generate-code-from-input.ts  | 20 ---------------
 .../extension/src/recorder/perform-edit.ts    | 25 ++++++++++++++++---
 .../src/recorder/recorder-codegen-session.ts  | 13 +---------
 .../extension/src/util/debugger-tracker.ts    |  2 +-
 packages/extension/src/util/util.ts           | 16 ++++++++++++
 6 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts b/packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts
index e68de25..bf19e9a 100644
--- a/packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts
+++ b/packages/extension/src/recorder/create-new-test-file/create-ui-test-file.ts
@@ -21,7 +21,7 @@ export async function createUiTestFile() {
   const word = doc.getText(wordRange)
 
   if (!wordRange || !word) {
-    vscode.window.showInformationMessage(
+    vscode.window.showErrorMessage(
       `No valid identifier found. Must be an exported capitalized function name. Got ${word}`,
     )
     return
@@ -40,7 +40,7 @@ export async function createUiTestFile() {
   const testingLibrary = await detectTestLibrary(editor.document.uri.fsPath)
 
   if (!testingLibrary) {
-    vscode.window.showInformationMessage(`Could not detect a testing library for ${editor.document.uri.fsPath}. Supported testing libraries are ${SUPPORTED_TESTING_LIBRARIES.join(', ')}.`)
+    vscode.window.showErrorMessage(`Could not detect a testing library for ${editor.document.uri.fsPath}. Supported testing libraries are ${SUPPORTED_TESTING_LIBRARIES.join(', ')}.`)
     return
   }
 
@@ -57,7 +57,7 @@ export async function createUiTestFile() {
 
   const [error, result] = await createUITestCode({ program, word, frameworkInfo, testingLibrary, relativePathToSrc })
   if (error) {
-    vscode.window.showInformationMessage(error.message)
+    vscode.window.showErrorMessage(error.message)
     return
   }
   const { exportName, testContent } = result
@@ -68,7 +68,7 @@ export async function createUiTestFile() {
   // Check if the test file already exists
   try {
     await vscode.workspace.fs.stat(testFileUri)
-    vscode.window.showInformationMessage(`Test file ${testFileName} already exists.`)
+    vscode.window.showErrorMessage(`Test file ${testFileName} already exists.`)
     return
   }
   catch {
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index 16cc2ad..f1813ba 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -1,16 +1,12 @@
 import path from 'pathe'
-import type * as vscode from 'vscode'
 import type { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { zRecordedEventData } from '../panel-controller/panel-router'
-import type { DebugPauseLocation } from '../util/debugger-tracker'
 import type { SerializedRegexp } from './recorder-codegen-session'
 
 export async function generateCodeFromInput(
-  editor: vscode.TextEditor,
   hasUserEventLib: boolean,
-  pausedLocation: DebugPauseLocation,
   testLibrary: TestingLibrary,
   testFramework: SupportedFramework,
 
@@ -152,22 +148,6 @@ export async function generateCodeFromInput(
     }
   }
 
-  const indent: string = (() => {
-    // Indent should be the longest indentation between the paused line and the previous line.
-    // This is to make sure the right indent is used when paused at the end of the test.
-    // e.g.
-    // test('click button', () => {
-    //   const button = screen.getByRole('button')
-    //   button.click() <-- when paused here, use this line's indent.
-    // }) <-- when paused here, use previous line's indent.
-
-    const line1 = editor.document.lineAt(pausedLocation.lineNumber - 1)
-    const line2 = editor.document.lineAt(pausedLocation.lineNumber - 2)
-    return [line1, line2].map(it => it.text.match(/^\s*/)?.[0] || '').sort((a, b) => b.length - a.length)[0] || ''
-  })()
-
-  code = `${indent}${code}`
-
   const importCode = Object.entries(requiredImports).map(([importName, from]) => {
     if (from === 'vitest') {
       // Workaround: we can't import vitest in the debug expressions because it can't be imported with 'require',
diff --git a/packages/extension/src/recorder/perform-edit.ts b/packages/extension/src/recorder/perform-edit.ts
index 35a9d32..9267c4f 100644
--- a/packages/extension/src/recorder/perform-edit.ts
+++ b/packages/extension/src/recorder/perform-edit.ts
@@ -1,10 +1,11 @@
 import { walk } from 'estree-walker'
 import * as vscode from 'vscode'
 import type { PanelController } from '../panel-controller/panel-controller'
+import { getOrOpenEditor } from '../util/util'
 import type { RecorderCodeInsertions } from './recorder-codegen-session'
 
 export async function performEdit(
-  editor: vscode.TextEditor | undefined,
+  filePath: string,
   insertions: RecorderCodeInsertions,
   panelController: PanelController,
 ) {
@@ -13,8 +14,10 @@ export async function performEdit(
     return
   }
 
+  const editor = await getOrOpenEditor(filePath)
+
   if (!editor) {
-    vscode.window.showInformationMessage('No editor found')
+    vscode.window.showErrorMessage(`No editor found for ${filePath.split('/').pop()}`)
     return
   }
 
@@ -40,7 +43,23 @@ export async function performEdit(
     for (const [line, lines] of reverseOrderInsertions) {
       const lineNumber = Number.parseInt(line)
       const position = new vscode.Position(lineNumber - 1, 0)
-      for (const [code, _requiredImports] of lines) {
+      for (let [code, _requiredImports] of lines) {
+        const indent: string = (() => {
+          // Indent should be the longest indentation between the paused line and the previous line.
+          // This is to make sure the right indent is used when paused at the end of the test.
+          // e.g.
+          // test('click button', () => {
+          //   const button = screen.getByRole('button')
+          //   button.click() <-- when paused here, use this line's indent.
+          // }) <-- when paused here, use previous line's indent.
+
+          const line1 = editor.document.lineAt(lineNumber - 1)
+          const line2 = editor.document.lineAt(lineNumber - 2)
+          return [line1, line2].map(it => it.text.match(/^\s*/)?.[0] || '').sort((a, b) => b.length - a.length)[0] || ''
+        })()
+
+        code = `${indent}${code}`
+
         editBuilder.insert(position, code)
       }
     }
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index bc243ca..9e15bcf 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -72,7 +72,7 @@ export function startRecorderCodeGenSession(
 
   async function runPerformEdit() {
     await performEdit(
-      editor,
+      testFile,
       insertions,
       panelController,
     )
@@ -84,8 +84,6 @@ export function startRecorderCodeGenSession(
     }
   }))
 
-  let editor: vscode.TextEditor | undefined
-
   const hasUserEventLib = (() => {
     try {
       require.resolve('@testing-library/user-event', { paths: [path.dirname(testFile)] })
@@ -112,17 +110,8 @@ export function startRecorderCodeGenSession(
         return null
       }
 
-      editor = vscode.window.visibleTextEditors.find(
-        editor => editor.document.uri.path === pausedLocation.filePath.toString(),
-      ) ?? editor
-      if (!editor) {
-        return null
-      }
-
       const { code, debugExpression, requiredImports } = await generateCodeFromInput(
-        editor,
         hasUserEventLib,
-        pausedLocation,
         testLibrary,
         testFramework,
         event,
diff --git a/packages/extension/src/util/debugger-tracker.ts b/packages/extension/src/util/debugger-tracker.ts
index d02ea24..4e5269d 100644
--- a/packages/extension/src/util/debugger-tracker.ts
+++ b/packages/extension/src/util/debugger-tracker.ts
@@ -114,7 +114,7 @@ export function startDebuggerTracker(
         return { filePath, lineNumber }
       }
       else {
-        vscode.window.showInformationMessage('No stack frames')
+        vscode.window.showErrorMessage('No stack frames')
         return null
       }
     }
diff --git a/packages/extension/src/util/util.ts b/packages/extension/src/util/util.ts
index d6f6e2a..8b06621 100644
--- a/packages/extension/src/util/util.ts
+++ b/packages/extension/src/util/util.ts
@@ -1,3 +1,5 @@
+import * as vscode from 'vscode'
+
 /**
  * Creates a function that is restricted to invoking func once.
  * Repeat calls to the function return the value of the first call.
@@ -28,3 +30,17 @@ export function onceWithPeek<T extends (...args: any[]) => any>(fn: T): {
 
   return wrapper
 }
+
+/**
+ * Returns the editor for the given file path, or opens a new editor if it doesn't exist.
+ */
+export async function getOrOpenEditor(filePath: string) {
+  let editor = vscode.window.visibleTextEditors.find(
+    editor => editor.document.uri.path === filePath,
+  )
+  if (!editor) {
+    const document = await vscode.workspace.openTextDocument(vscode.Uri.file(filePath))
+    editor = await vscode.window.showTextDocument(document, vscode.ViewColumn.One)
+  }
+  return editor
+}

From 0ab1925a584f5d6b7edfeea5ae70c6ebda1c06a2 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 27 Oct 2025 20:12:02 -0400
Subject: [PATCH 73/98] improve error messages

---
 packages/extension/src/panel-controller/panel-controller.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index 64fe958..417affb 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -114,11 +114,11 @@ export async function startPanelController(
     }
     catch (error) {
       console.log(error)
-      if (error instanceof TRPCError) {
-        vscode.window.showErrorMessage(String(error.cause))
+      if (error instanceof TRPCError && error.cause) {
+        vscode.window.showErrorMessage(`Error sending message from webview to extension: ${String(error.cause.message)}`)
       }
       else if (error instanceof Error) {
-        vscode.window.showErrorMessage(String(error))
+        vscode.window.showErrorMessage(`Error sending message from webview to extension: ${error.message}`)
       }
       panel.webview.postMessage({
         id,

From 569b1f305bf4404a881de3a5196a4bb922766a63 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 27 Oct 2025 20:54:59 -0400
Subject: [PATCH 74/98] recorder

scroll to bottom on new code line added
---
 .../components/TodoList.tsx                   |  2 +-
 .../src/recorder/recorder-panel.tsx           | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/examples/jest-nextjs-minimal/components/TodoList.tsx b/examples/jest-nextjs-minimal/components/TodoList.tsx
index a23551d..64da8a9 100644
--- a/examples/jest-nextjs-minimal/components/TodoList.tsx
+++ b/examples/jest-nextjs-minimal/components/TodoList.tsx
@@ -49,7 +49,7 @@ export function TodoList() {
           />
           <button
             onClick={addTodo}
-            className="bg-white text-black hover:bg-gray-200 px-4 py-2 rounded text-sm font-medium transition-colors"
+            className="bg-white text-black hover:bg-gray-200 px-4 py-2 rounded text-sm font-medium transition-colors cursor-pointer"
           >
             Add
           </button>
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 83b50d1..103fffe 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -5,10 +5,11 @@ import shikiLightPlus from '@shikijs/themes/light-plus'
 import Info from 'lucide-solid/icons/info'
 import X from 'lucide-solid/icons/x'
 import { createJavaScriptRegexEngine } from 'shiki'
-import { For, Show, Suspense, createResource } from 'solid-js'
+import { For, Show, Suspense, createEffect, createResource, on } from 'solid-js'
+import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 import { recorder } from '../App'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../components/solid-ui/tooltip'
 import { Resizable, ResizableHandle, ResizablePanel } from '../components/solid-ui/resizable'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../components/solid-ui/tooltip'
 import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
 
 export function RecorderPanel() {
@@ -50,7 +51,7 @@ export function RecorderPanel() {
 
   return (
     <Resizable orientation="horizontal">
-      <ResizablePanel class="overflow-auto p-4">
+      <ResizablePanel class="overflow-auto p-4" ref={setupCodePanel}>
         <div>
           <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
           <Show when={recorder.hasPendingInputChange()}>
@@ -157,3 +158,20 @@ export function RecorderPanel() {
     </Resizable>
   )
 }
+
+/** When a new code line is added, scroll to it. */
+function setupCodePanel(el: HTMLDivElement) {
+  createEffect(on(recorder.codeInsertions, (current, prev) => {
+    if (current && prev) {
+      for (const lineNum of Object.keys(current)) {
+        const currentLen = current[Number(lineNum)]?.length ?? 0
+        const prevLen = prev[Number(lineNum)]?.length ?? 0
+        if (currentLen > prevLen) {
+          queueMicrotask(() => {
+            el.scrollTop = el.scrollHeight
+          })
+        }
+      }
+    }
+  }))
+}

From 5e293ad664d63c7e2bf2c14931fe6ba756e51cc9 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 02:16:27 -0400
Subject: [PATCH 75/98] recorder

replace recorder mouse event panel with right-click context menu
---
 .../components/TodoList.tsx                   |   4 +-
 .../src/panel-controller/panel-router.ts      |   8 +-
 .../src/recorder/generate-code-from-input.ts  |  42 ++--
 .../src/recorder/recorder-codegen-session.ts  |   4 +-
 packages/web-view-vite/src/App.tsx            |   6 +-
 .../web-view-vite/src/components/Toolbar.tsx  |   3 +-
 .../src/components/solid-ui/context-menu.tsx  | 233 ++++++++++++++++++
 .../src/recorder/recorder-context-menu.tsx    |  89 +++++++
 .../src/recorder/recorder-panel.tsx           | 157 ++++--------
 .../web-view-vite/src/recorder/recorder.ts    | 225 ++++++++++-------
 10 files changed, 536 insertions(+), 235 deletions(-)
 create mode 100644 packages/web-view-vite/src/components/solid-ui/context-menu.tsx
 create mode 100644 packages/web-view-vite/src/recorder/recorder-context-menu.tsx

diff --git a/examples/jest-nextjs-minimal/components/TodoList.tsx b/examples/jest-nextjs-minimal/components/TodoList.tsx
index 64da8a9..df58216 100644
--- a/examples/jest-nextjs-minimal/components/TodoList.tsx
+++ b/examples/jest-nextjs-minimal/components/TodoList.tsx
@@ -32,7 +32,7 @@ export function TodoList() {
     <div className="flex justify-center">
       <div className="w-full max-w-md">
         <div className="mb-8">
-          <h1 className="text-2xl font-medium text-white">Todos</h1>
+          <h1 className="text-2xl font-medium text-white">Todo List</h1>
           <div className="text-sm text-gray-400 mt-1 space-y-0.5">
             <div>{doneCount} done</div>
             <div>{notDoneCount} in progress</div>
@@ -83,7 +83,7 @@ export function TodoList() {
         </div>
 
         {todos.length === 0 && (
-          <p className="text-center text-gray-400 text-sm mt-8">No todos yet. Add one to get started.</p>
+          <p aria-label="no-todos-message" className="text-center text-gray-400 text-sm mt-8">No todos yet. Add one to get started.</p>
         )}
       </div>
     </div>
diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 7047190..5179e12 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -206,12 +206,12 @@ export const panelRouter = t.router({
         ]),
         // Whether to generate an 'expect' statement
         useExpect: z.optional(z.boolean()),
-        // Whether to use userEvent instead of fireEvent
-        useUserEvent: z.boolean(),
+        // Whether to use fireEvent instead of userEvent
+        useFireEvent: z.optional(z.boolean()),
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const { event, eventData, query: [method, [queryArg0, queryOptions]], useExpect, useUserEvent } = input
+      const { event, eventData, query: [method, [queryArg0, queryOptions]], useExpect, useFireEvent } = input
       const recorderCodeGenSession = ctx.recorderCodeGenSession()
       const _insertion = await recorderCodeGenSession?.recordInputAsCode(
         ctx.debuggerTracker,
@@ -221,7 +221,7 @@ export const panelRouter = t.router({
         queryArg0,
         queryOptions,
         useExpect ?? false,
-        useUserEvent,
+        useFireEvent,
       )
       return recorderCodeGenSession?.insertions
     }),
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index f1813ba..d94a15d 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -17,7 +17,7 @@ export async function generateCodeFromInput(
   queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
 
   useExpect: boolean,
-  useUserEvent: boolean,
+  useFireEvent: boolean | undefined,
 ) {
   const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
     (result, entry) => {
@@ -94,7 +94,25 @@ export async function generateCodeFromInput(
   }
   // Otherwise, generate a userEvent call
   else {
-    if (useUserEvent) {
+    if (useFireEvent) {
+      const fireEvent = 'fireEvent'
+
+      const fireEventArgs = (() => {
+        if (event === 'change' && eventData.text) {
+          const value = eventData.text.replace(/'/g, '\\\'')
+          return `, { target: { value: '${value}' } }`
+        }
+        if (event === 'selectOptions' && eventData.options) {
+          return `, { target: { value: '${eventData.options[0]}' } }`
+        }
+        return ''
+      })()
+
+      code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
+
+      requiredImports[fireEvent] = testLibrary
+    }
+    else {
       if (!hasUserEventLib) {
         throw new Error('Cannot use userEvent without @testing-library/user-event installed')
       }
@@ -128,24 +146,6 @@ export async function generateCodeFromInput(
 
       requiredImports[userEvent] = '@testing-library/user-event'
     }
-    else {
-      const fireEvent = 'fireEvent'
-
-      const fireEventArgs = (() => {
-        if (event === 'change' && eventData.text) {
-          const value = eventData.text.replace(/'/g, '\\\'')
-          return `, { target: { value: '${value}' } }`
-        }
-        if (event === 'selectOptions' && eventData.options) {
-          return `, { target: { value: '${eventData.options[0]}' } }`
-        }
-        return ''
-      })()
-
-      code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
-
-      requiredImports[fireEvent] = testLibrary
-    }
   }
 
   const importCode = Object.entries(requiredImports).map(([importName, from]) => {
@@ -173,7 +173,7 @@ export async function generateCodeFromInput(
     const result = code.replace(/\s*await/, '') // No 'awaits' allowed in debug expressions
 
     // When writing react tests with userEvent v13, wrap in 'act'.
-    if (testLibrary === '@testing-library/react' && useUserEvent) {
+    if (testLibrary === '@testing-library/react' && !useFireEvent) {
       return `globalThis.require('react').act(() => { ${result} });`
     }
     return result
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index 9e15bcf..6806392 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -103,7 +103,7 @@ export function startRecorderCodeGenSession(
       queryArg0: string | SerializedRegexp,
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
       useExpect: boolean,
-      useUserEvent: boolean,
+      useFireEvent: boolean | undefined,
     ): Promise<[number, string] | null> => {
       const pausedLocation = await debuggerTracker.getPausedLocation()
       if (!pausedLocation) {
@@ -120,7 +120,7 @@ export function startRecorderCodeGenSession(
         queryArg0,
         queryOptions,
         useExpect,
-        useUserEvent,
+        useFireEvent,
       )
 
       await debuggerTracker.runDebugExpression(debugExpression)
diff --git a/packages/web-view-vite/src/App.tsx b/packages/web-view-vite/src/App.tsx
index de3489b..4f26e6f 100644
--- a/packages/web-view-vite/src/App.tsx
+++ b/packages/web-view-vite/src/App.tsx
@@ -8,6 +8,8 @@ import { createColorTheme } from './lib/color-theme'
 import { createDomReplica } from './lib/create-dom-replica'
 import { createRecorder } from './recorder/recorder'
 import { RecorderPanel } from './recorder/recorder-panel'
+import { ContextMenu } from './components/solid-ui/context-menu'
+import { RecorderContextMenuProvider } from './recorder/recorder-context-menu'
 
 // TODO put these into a context provider
 export const [replicaHtmlEl, setReplicaHtmlEl] = createSignal<HTMLHtmlElement>()
@@ -65,9 +67,9 @@ export function App() {
             onSizesChange={(sizes: number[]) => sizes[1] && updateBottomPanelHeight(sizes[1])}
           >
             <ResizablePanel class="overflow-y-auto">
-              <div class="h-full w-full">
+              <RecorderContextMenuProvider class="h-full w-full">
                 {shadowHost}
-              </div>
+              </RecorderContextMenuProvider>
             </ResizablePanel>
             <Show when={openPanel()}>
               <ResizableHandle />
diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index 73b2d2e..16decda 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -85,7 +85,8 @@ export function Toolbar() {
               <h1 class="text-lg font-semibold mb-2">Test Recorder Info</h1>
               <ul class="list-disc list-inside space-y-1">
                 <li>'Step Over' with the debugger to where you want to generate new code.</li>
-                <li>Click on an element or change a text input to generate code.</li>
+                <li>Left-click an element or change a text input to generate code.</li>
+                <li>Right-click an element to generate other mouse events.</li>
                 <li>Alt+Click on an element to generate an 'expect' statement.</li>
                 <li>When you end or restart the test, the generated code is inserted into the test file.</li>
                 <li>
diff --git a/packages/web-view-vite/src/components/solid-ui/context-menu.tsx b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
new file mode 100644
index 0000000..3a2e456
--- /dev/null
+++ b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
@@ -0,0 +1,233 @@
+import type { Component, ComponentProps, JSX, ValidComponent } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import * as ContextMenuPrimitive from '@kobalte/core/context-menu'
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
+
+import { cn } from './utils'
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (props) => {
+  return <ContextMenuPrimitive.Root gutter={4} {...props} />
+}
+
+type ContextMenuContentProps<T extends ValidComponent = 'div'> =
+  ContextMenuPrimitive.ContextMenuContentProps<T> & {
+    class?: string | undefined
+  }
+
+function ContextMenuContent<T extends ValidComponent = 'div'>(props: PolymorphicProps<T, ContextMenuContentProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuContentProps, ['class'])
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        class={cn(
+          'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in',
+          local.class,
+        )}
+        {...others}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+type ContextMenuItemProps<T extends ValidComponent = 'div'> =
+  ContextMenuPrimitive.ContextMenuItemProps<T> & {
+    class?: string | undefined
+  }
+
+function ContextMenuItem<T extends ValidComponent = 'div'>(props: PolymorphicProps<T, ContextMenuItemProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuItemProps, ['class'])
+  return (
+    <ContextMenuPrimitive.Item
+      class={cn(
+        'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1 text-sm outline-none focus:bg-(--vscode-menu-selectionBackground) focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        local.class,
+      )}
+      {...others}
+    />
+  )
+}
+
+const ContextMenuShortcut: Component<ComponentProps<'span'>> = (props) => {
+  const [local, others] = splitProps(props, ['class'])
+  return <span class={cn('ml-auto text-xs tracking-widest opacity-60', local.class)} {...others} />
+}
+
+type ContextMenuSeparatorProps<T extends ValidComponent = 'hr'> =
+  ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {
+    class?: string | undefined
+  }
+
+function ContextMenuSeparator<T extends ValidComponent = 'hr'>(props: PolymorphicProps<T, ContextMenuSeparatorProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuSeparatorProps, ['class'])
+  return (
+    <ContextMenuPrimitive.Separator
+      class={cn('-mx-1 my-1 h-px bg-muted', local.class)}
+      {...others}
+    />
+  )
+}
+
+type ContextMenuSubTriggerProps<T extends ValidComponent = 'div'> =
+  ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {
+    class?: string | undefined
+    children?: JSX.Element
+  }
+
+function ContextMenuSubTrigger<T extends ValidComponent = 'div'>(props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuSubTriggerProps, ['class', 'children'])
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      class={cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        local.class,
+      )}
+      {...others}
+    >
+      {local.children}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="ml-auto size-4"
+      >
+        <path d="M9 6l6 6l-6 6" />
+      </svg>
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+type ContextMenuSubContentProps<T extends ValidComponent = 'div'> =
+  ContextMenuPrimitive.ContextMenuSubContentProps<T> & {
+    class?: string | undefined
+  }
+
+function ContextMenuSubContent<T extends ValidComponent = 'div'>(props: PolymorphicProps<T, ContextMenuSubContentProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuSubContentProps, ['class'])
+  return (
+    <ContextMenuPrimitive.SubContent
+      class={cn(
+        'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in',
+        local.class,
+      )}
+      {...others}
+    />
+  )
+}
+
+type ContextMenuCheckboxItemProps<T extends ValidComponent = 'div'> =
+  ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {
+    class?: string | undefined
+    children?: JSX.Element
+  }
+
+function ContextMenuCheckboxItem<T extends ValidComponent = 'div'>(props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, ['class', 'children'])
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      class={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        local.class,
+      )}
+      {...others}
+    >
+      <span class="absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <path d="M5 12l5 5l10 -10" />
+          </svg>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+type ContextMenuGroupLabelProps<T extends ValidComponent = 'span'> =
+  ContextMenuPrimitive.ContextMenuGroupLabelProps<T> & {
+    class?: string | undefined
+  }
+
+function ContextMenuGroupLabel<T extends ValidComponent = 'span'>(props: PolymorphicProps<T, ContextMenuGroupLabelProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuGroupLabelProps, ['class'])
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      class={cn('px-2 py-1.5 text-sm font-semibold', local.class)}
+      {...others}
+    />
+  )
+}
+
+type ContextMenuRadioItemProps<T extends ValidComponent = 'div'> =
+  ContextMenuPrimitive.ContextMenuRadioItemProps<T> & {
+    class?: string | undefined
+    children?: JSX.Element
+  }
+
+function ContextMenuRadioItem<T extends ValidComponent = 'div'>(props: PolymorphicProps<T, ContextMenuRadioItemProps<T>>) {
+  const [local, others] = splitProps(props as ContextMenuRadioItemProps, ['class', 'children'])
+  return (
+    <ContextMenuPrimitive.RadioItem
+      class={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        local.class,
+      )}
+      {...others}
+    >
+      <span class="absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-2 fill-current"
+          >
+            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+          </svg>
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuShortcut,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuCheckboxItem,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+}
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
new file mode 100644
index 0000000..8c47445
--- /dev/null
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -0,0 +1,89 @@
+import type { JSX } from 'solid-js'
+import { For, createSignal } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { recorder, shadowHost } from '../App'
+import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger } from '../components/solid-ui/context-menu'
+import { deepElementFromPoint } from '../inspector/util'
+import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
+
+export function RecorderContextMenuProvider(
+  props: { children: JSX.Element, class?: string },
+) {
+  return (
+    <Dynamic
+      // Only enable the context menu when recording
+      component={recorder.isRecording() ? RecorderContextMenu : 'div'}
+      class={props.class}
+    >
+      {props.children}
+    </Dynamic>
+  )
+}
+
+function RecorderContextMenu(
+  props: { children: JSX.Element, class?: string },
+) {
+  const [targetElement, setTargetElement] = createSignal<Element | null>(null)
+  function updateTargetElement(e: MouseEvent) {
+    const clickedEl = (shadowHost.shadowRoot && deepElementFromPoint(shadowHost.shadowRoot, e.clientX, e.clientY)) ?? e.target
+    if (!(clickedEl instanceof Element)) {
+      return
+    }
+    setTargetElement(clickedEl)
+  }
+
+  function submitRecorderInputEvent(
+    eventType: string,
+    { useExpect, useFireEvent }: {
+      useExpect?: boolean
+      useFireEvent: boolean
+    },
+  ) {
+    const target = targetElement()
+    if (!target) {
+      return
+    }
+    recorder.submitRecorderInputEvent(target, eventType, { useExpect, useFireEvent })
+  }
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger
+        class="w-full h-full"
+        // on right click, update the target element
+        onMouseDown={e => e.button === 2 && updateTargetElement(e)}
+      >
+        {props.children}
+      </ContextMenuTrigger>
+      <ContextMenuPortal>
+        <ContextMenuContent class="w-48">
+          <For each={[
+            { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, title: 'Mouse Event (user-event)', useFireEvent: false, tooltip: 'Uses @testing-library/user-event' },
+            { eventTypes: FIREEVENT_MOUSE_EVENT_TYPES, title: 'Mouse Event (fireEvent)', useFireEvent: true, tooltip: 'Uses testing-library\'s fireEvent' },
+          ]}
+          >{(section, idx) => (
+            <>
+              {idx() > 0 && <ContextMenuSeparator />}
+              <ContextMenuGroup>
+                <ContextMenuGroupLabel>{section.title}</ContextMenuGroupLabel>
+                <For each={section.eventTypes}>
+                  {eventType => (
+                    <ContextMenuItem
+                      onClick={() => submitRecorderInputEvent(
+                        eventType,
+                        { useFireEvent: section.useFireEvent },
+                      )}
+                    >
+                      <span>{eventType}</span>
+                    </ContextMenuItem>
+                  )}
+                </For>
+              </ContextMenuGroup>
+            </>
+          )}
+          </For>
+        </ContextMenuContent>
+      </ContextMenuPortal>
+    </ContextMenu>
+  )
+}
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 103fffe..2ecbab7 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -2,15 +2,10 @@ import { createHighlighterCore } from '@shikijs/core'
 import shikiTypescript from '@shikijs/langs/typescript'
 import shikiDarkPlus from '@shikijs/themes/dark-plus'
 import shikiLightPlus from '@shikijs/themes/light-plus'
-import Info from 'lucide-solid/icons/info'
 import X from 'lucide-solid/icons/x'
 import { createJavaScriptRegexEngine } from 'shiki'
 import { For, Show, Suspense, createEffect, createResource, on } from 'solid-js'
-import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 import { recorder } from '../App'
-import { Resizable, ResizableHandle, ResizablePanel } from '../components/solid-ui/resizable'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../components/solid-ui/tooltip'
-import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
 
 export function RecorderPanel() {
   const [codeHighlighter] = createResource(async () => await createHighlighterCore({
@@ -50,112 +45,58 @@ export function RecorderPanel() {
   }
 
   return (
-    <Resizable orientation="horizontal">
-      <ResizablePanel class="overflow-auto p-4" ref={setupCodePanel}>
-        <div>
-          <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
-          <Show when={recorder.hasPendingInputChange()}>
-            <div class="text-warning-foreground mb-2">
-              'change' event code generates after unfocusing the input
-            </div>
-          </Show>
-          <div class="text-sm flex flex-col gap-2">
-            <For
-              fallback={(
-                <div class="text-muted-foreground">
-                  None yet
-                </div>
-              )}
-              each={Object.entries(recorder.codeInsertions() ?? {})}
-            >{([lineNum, codeLines]) => (
-              <div>
-                <div class="flex items-center gap-1">
-                  <ui-test-visualizer-button
-                    appearance="icon"
-                    onClick={async () => {
-                      await recorder.removeInsertion(Number(lineNum))
-                    }}
-                  >
-                    <X />
-                  </ui-test-visualizer-button>
-                  <h2>Insert at line: {lineNum}</h2>
-                </div>
-                <div class="pl-2">
-                  <For each={codeLines}>
-                    {([code, _requiredImports], idx) => (
-                      <div class="flex items-center gap-1">
-                        <ui-test-visualizer-button
-                          appearance="icon"
-                          onClick={async () => {
-                            await recorder.removeInsertion(Number(lineNum), idx())
-                          }}
-                        >
-                          <X />
-                        </ui-test-visualizer-button>
-                        <Suspense fallback={<div>{code}</div>}>
-                          <>{highlightedCode(code.trim())}</>
-                        </Suspense>
-                      </div>
-                    )}
-                  </For>
-                </div>
-              </div>
-            )}
-            </For>
-          </div>
+    <div class="h-full w-full overflow-auto px-4 py-2" ref={setupCodePanel}>
+      <h1 class="text-lg font-semibold mb-2">Generated Code</h1>
+      <Show when={recorder.hasPendingInputChange()}>
+        <div class="text-warning-foreground mb-2">
+          'change' event code generates after unfocusing the input
         </div>
-      </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel class="overflow-y-auto p-4">
-        <div class="flex flex-col gap-3">
-          <For each={[
-            { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, name: 'user-event', useUserEvent: true, tooltip: 'Uses @testing-library/user-event' },
-            { eventTypes: FIREEVENT_MOUSE_EVENT_TYPES, name: 'fireEvent', useUserEvent: false, tooltip: 'Uses testing-library\'s fireEvent' },
-          ]}
-          >
-            {section => (
-              <div>
-                <div class="flex gap-2">
-                  <h1 class="text-lg font-semibold whitespace-nowrap mb-1">Choose Mouse Event ({section.name})</h1>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Info class="w-5 h-5 mb-1" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {section.tooltip}
-                    </TooltipContent>
-                  </Tooltip>
-                </div>
-                <div class="flex flex-wrap gap-1">
-                  <For each={section.eventTypes}>{event => (
-                    <label class="flex items-center bg-(--vscode-list-hoverBackground) px-2 py-1 rounded cursor-pointer">
-                      <ui-test-visualizer-radio
-                        value={event}
-                        checked={recorder.mouseEvent() === event && recorder.useUserEvent() === section.useUserEvent}
-                        onChange={(e: any) => {
-                          if (e.target.checked) {
-                            recorder.setMouseEvent(e.target.value)
-                            recorder.setUseUserEvent(section.useUserEvent)
-                          }
-                        }}
-                      >
-                        <div class="pb-[3px]">
-                          {event}
-                        </div>
-                      </ui-test-visualizer-radio>
-                    </label>
-                  )}
-                  </For>
-                </div>
-              </div>
-            )}
-          </For>
+      </Show>
+      <div class="text-sm flex flex-col gap-2">
+        <For
+          fallback={(
+            <div class="text-muted-foreground">
+              None yet
+            </div>
+          )}
+          each={Object.entries(recorder.codeInsertions() ?? {})}
+        >{([lineNum, codeLines]) => (
           <div>
-            <h2 class="text-lg font-semibold whitespace-nowrap mb-1">Alt+Click to generate 'expect' statement</h2>
+            <div class="flex items-center gap-1">
+              <ui-test-visualizer-button
+                appearance="icon"
+                onClick={async () => {
+                  await recorder.removeInsertion(Number(lineNum))
+                }}
+              >
+                <X />
+              </ui-test-visualizer-button>
+              <h2>Insert at line: {lineNum}</h2>
+            </div>
+            <div class="pl-2">
+              <For each={codeLines}>
+                {([code, _requiredImports], idx) => (
+                  <div class="flex items-center gap-1">
+                    <ui-test-visualizer-button
+                      appearance="icon"
+                      onClick={async () => {
+                        await recorder.removeInsertion(Number(lineNum), idx())
+                      }}
+                    >
+                      <X />
+                    </ui-test-visualizer-button>
+                    <Suspense fallback={<div>{code}</div>}>
+                      <>{highlightedCode(code.trim())}</>
+                    </Suspense>
+                  </div>
+                )}
+              </For>
+            </div>
           </div>
-        </div>
-      </ResizablePanel>
-    </Resizable>
+        )}
+        </For>
+      </div>
+    </div>
   )
 }
 
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 0d2af12..cecfd04 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -38,7 +38,6 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     return openPanel() === 'recorder'
   }
   const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
-  const [useUserEvent, setUseUserEvent] = createSignal(true)
   const [codeInsertions, setCodeInsertions] = createSignal<RecorderCodeInsertions | undefined>()
 
   // When the edit is performed, clear the recorder UI's insertions state
@@ -57,6 +56,118 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     setRootElement(shadowHost.shadowRoot?.children[0] ?? null)
   })
 
+  /** Generate a line of test code for the given user input event. */
+  async function submitRecorderInputEvent(
+    target: Element,
+    eventType: string,
+    { useExpect, enterKeyPressed, useFireEvent }: {
+      useExpect?: boolean
+      enterKeyPressed?: boolean
+      useFireEvent?: boolean
+    } = {},
+  ) {
+    let suggestedQuery: Suggestion | undefined
+
+    /**
+     * Sometimes testing-library can't find a good query to use.
+     * This fn checks if testing-library generated a useful query.
+     */
+    function hasQuery() {
+      if (!suggestedQuery) {
+        return false
+      }
+      if (suggestedQuery.queryArgs[0] === 'document') {
+        return false
+      }
+      return true
+    }
+
+    // Generate the selector using the closest HTMLElement.
+    // e.g. if you click on an SVG, that doesn't count as an HTMLElement,
+    // so step up to the parent.
+    while (!hasQuery() && target) {
+      if (target instanceof HTMLElement) {
+        suggestedQuery = getSuggestedQuery(target)
+      }
+      if (!hasQuery()) {
+        if (target instanceof Element && target.parentElement) {
+          target = target.parentElement
+        }
+        else {
+          return
+        }
+      }
+    }
+
+    if (!hasQuery() || !suggestedQuery) {
+      return
+    }
+
+    const eventData: z.infer<typeof zRecordedEventData> = {}
+    if (enterKeyPressed) {
+      eventData.enterKeyPressed = true
+    }
+
+    // On text input change
+    if (eventType === 'change') {
+      if (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement) {
+        if (target.type === 'text') {
+          const text = target.value
+          eventData.text = text
+        }
+      }
+    }
+
+    const root = rootElement()
+    if (!root) {
+      return
+    }
+
+    // Check if the query returns multiple elements
+    await (async () => {
+      try {
+        const method = `findAllBy${suggestedQuery.queryName}`
+        // @ts-expect-error Method should exist
+        const results = await queries[method](
+          root,
+          ...suggestedQuery.queryArgs,
+        )
+        if (results.length > 1) {
+          eventData.indexIfMultipleFound = results.indexOf(target)
+        }
+      }
+      catch (error) {
+        // Do nothing?
+      }
+    })()
+
+    const recordedEventType = (() => {
+      if (eventType === 'click') {
+        return mouseEvent()
+      }
+
+      if (eventType === 'change' && target instanceof HTMLSelectElement) {
+        eventData.options = [target.value]
+        return 'selectOptions'
+      }
+
+      return eventType
+    })()
+
+    const query = serializeQueryArgs(suggestedQuery.queryArgs)
+
+    // Send the selector to the extension process to record as code
+    const insertions = await client.recordInputAsCode.mutate({
+      event: recordedEventType,
+      query: [suggestedQuery.queryMethod, query],
+      eventData,
+      useExpect,
+      useFireEvent,
+    })
+    setCodeInsertions(insertions)
+  }
+
+  // When recording, listen to events in the shadow root and generate code for them.
   createEffect(() => {
     const root = rootElement()
     if (!root) {
@@ -80,62 +191,19 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             return
           }
 
-          let suggestedQuery: Suggestion | undefined
-
-          /**
-           * Sometimes testing-library can't find a good query to use.
-           * This fn checks if testing-library generated a useful query.
-           */
-          function hasQuery() {
-            if (!suggestedQuery) {
-              return false
-            }
-            if (suggestedQuery.queryArgs[0] === 'document') {
-              return false
-            }
-            return true
-          }
-
-          // Generate the selector using the closest HTMLElement.
-          // e.g. if you click on an SVG, that doesn't count as an HTMLElement,
-          // so step up to the parent.
-          while (!hasQuery() && target) {
-            if (target instanceof HTMLElement) {
-              suggestedQuery = getSuggestedQuery(target)
-            }
-            if (!hasQuery()) {
-              if (target instanceof Element && target.parentElement) {
-                target = target.parentElement
-              }
-              else {
-                return
-              }
-            }
-          }
-
-          if (!hasQuery() || !suggestedQuery) {
-            return
-          }
-
-          const eventData: z.infer<typeof zRecordedEventData> = {}
-
-          // On text input change
-          if (eventType === 'change') {
-            if (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement) {
-              if (target.type === 'text') {
-                const text = target.value
-                eventData.text = text
-              }
-              if (target.type === 'checkbox' || target.type === 'radio') {
-                e.preventDefault()
-                return // generate code for the 'click' event, not 'change'
-              }
-            }
+          if (
+            (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement)
+            && (target.type === 'checkbox' || target.type === 'radio')
+            && eventType === 'change'
+          ) {
+            e.preventDefault()
+            return // generate code for the 'click' event, not 'change'
           }
 
+          let enterKeyPressed = false
           if (eventType === 'keydown') {
             if (e instanceof KeyboardEvent && target instanceof HTMLInputElement && e.key === 'Enter') {
-              eventData.enterKeyPressed = true
+              enterKeyPressed = true
               target.blur()
               await new Promise(resolve => setTimeout(resolve, 0))
               target.focus()
@@ -146,51 +214,13 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             }
           }
 
-          // Check if the query returns multiple elements
-          await (async () => {
-            try {
-              const method = `findAllBy${suggestedQuery.queryName}`
-              // @ts-expect-error Method should exist
-              const results = await queries[method](root, ...suggestedQuery.queryArgs)
-              if (results.length > 1) {
-                eventData.indexIfMultipleFound = results.indexOf(target)
-              }
-            }
-            catch (error) {
-              // Do nothing?
-            }
-          })()
-
-          const recordedEventType = (() => {
-            if (eventType === 'click') {
-              return mouseEvent()
-            }
-
-            if (eventType === 'change' && target instanceof HTMLSelectElement) {
-              eventData.options = [target.value]
-              return 'selectOptions'
-            }
-
-            return eventType
-          })()
-
-          const query = serializeQueryArgs(suggestedQuery.queryArgs)
-
-          // When the 'alt' key is held while clicking, generate an 'expect' statement
           const useExpect = eventType === 'click' && e instanceof MouseEvent && e.altKey
+          // When the 'alt' key is held while clicking, generate an 'expect' statement
           if (useExpect) {
             e.preventDefault()
           }
 
-          // Send the selector to the extension process to record as code
-          const insertions = await client.recordInputAsCode.mutate({
-            event: recordedEventType,
-            query: [suggestedQuery.queryMethod, query],
-            eventData,
-            useExpect,
-            useUserEvent: useUserEvent(),
-          })
-          setCodeInsertions(insertions)
+          await submitRecorderInputEvent(target, eventType, { useExpect, enterKeyPressed })
         })
       }
     }
@@ -199,6 +229,12 @@ export function createRecorder(shadowHost: HTMLDivElement) {
         // Block changing inputs when not recording
         e.preventDefault()
       })
+      makeEventListener(root, 'click', (e) => {
+        if (e.target instanceof HTMLInputElement) {
+          // Block changing inputs like checkboxes and radios when not recording
+          e.preventDefault()
+        }
+      })
     }
   })
 
@@ -213,10 +249,9 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     },
     mouseEvent,
     setMouseEvent,
-    useUserEvent,
-    setUseUserEvent,
     codeInsertions,
     hasPendingInputChange,
+    submitRecorderInputEvent,
   }
 }
 

From 4137ca65151325e328d6a1f516f9dec17e7cde9d Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 03:05:20 -0400
Subject: [PATCH 76/98] recorder

add 'expect' statement to context menu
---
 .../src/components/solid-ui/context-menu.tsx  |  2 +-
 .../src/recorder/recorder-context-menu.tsx    | 26 +++++++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/web-view-vite/src/components/solid-ui/context-menu.tsx b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
index 3a2e456..1b06f53 100644
--- a/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
+++ b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
@@ -56,7 +56,7 @@ function ContextMenuItem<T extends ValidComponent = 'div'>(props: PolymorphicPro
 
 const ContextMenuShortcut: Component<ComponentProps<'span'>> = (props) => {
   const [local, others] = splitProps(props, ['class'])
-  return <span class={cn('ml-auto text-xs tracking-widest opacity-60', local.class)} {...others} />
+  return <span class={cn('ml-auto opacity-60', local.class)} {...others} />
 }
 
 type ContextMenuSeparatorProps<T extends ValidComponent = 'hr'> =
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index 8c47445..03943b2 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -2,7 +2,7 @@ import type { JSX } from 'solid-js'
 import { For, createSignal } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import { recorder, shadowHost } from '../App'
-import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger } from '../components/solid-ui/context-menu'
+import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from '../components/solid-ui/context-menu'
 import { deepElementFromPoint } from '../inspector/util'
 import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
 
@@ -32,18 +32,18 @@ function RecorderContextMenu(
     setTargetElement(clickedEl)
   }
 
-  function submitRecorderInputEvent(
+  async function submitRecorderInputEvent(
     eventType: string,
     { useExpect, useFireEvent }: {
       useExpect?: boolean
-      useFireEvent: boolean
+      useFireEvent?: boolean
     },
   ) {
     const target = targetElement()
     if (!target) {
       return
     }
-    recorder.submitRecorderInputEvent(target, eventType, { useExpect, useFireEvent })
+    await recorder.submitRecorderInputEvent(target, eventType, { useExpect, useFireEvent })
   }
 
   return (
@@ -56,7 +56,23 @@ function RecorderContextMenu(
         {props.children}
       </ContextMenuTrigger>
       <ContextMenuPortal>
-        <ContextMenuContent class="w-48">
+        <ContextMenuContent class="w-50">
+          {/* 'Expect' statements */}
+          <ContextMenuGroup>
+            <ContextMenuGroupLabel>'Expect' Statement</ContextMenuGroupLabel>
+            <ContextMenuItem
+              onClick={() => submitRecorderInputEvent(
+                'click',
+                { useExpect: true },
+              )}
+            >
+              <span>expect(element)</span>
+              <ContextMenuShortcut>Alt+Click</ContextMenuShortcut>
+            </ContextMenuItem>
+          </ContextMenuGroup>
+          <ContextMenuSeparator />
+
+          {/* Mouse events */}
           <For each={[
             { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, title: 'Mouse Event (user-event)', useFireEvent: false, tooltip: 'Uses @testing-library/user-event' },
             { eventTypes: FIREEVENT_MOUSE_EVENT_TYPES, title: 'Mouse Event (fireEvent)', useFireEvent: true, tooltip: 'Uses testing-library\'s fireEvent' },

From 3f055bd5e9cd022a0c8ea9109b528f64b07b785b Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 03:45:44 -0400
Subject: [PATCH 77/98] recorder

remove unused mouseEvent signal
---
 packages/web-view-vite/src/recorder/recorder.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index cecfd04..1136a97 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -37,7 +37,6 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   function isRecording() {
     return openPanel() === 'recorder'
   }
-  const [mouseEvent, setMouseEvent] = createSignal<EventType>('click')
   const [codeInsertions, setCodeInsertions] = createSignal<RecorderCodeInsertions | undefined>()
 
   // When the edit is performed, clear the recorder UI's insertions state
@@ -142,10 +141,6 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     })()
 
     const recordedEventType = (() => {
-      if (eventType === 'click') {
-        return mouseEvent()
-      }
-
       if (eventType === 'change' && target instanceof HTMLSelectElement) {
         eventData.options = [target.value]
         return 'selectOptions'
@@ -247,8 +242,6 @@ export function createRecorder(shadowHost: HTMLDivElement) {
       const newInsertions = await client.removeRecorderInsertion.mutate({ line, idx })
       setCodeInsertions(newInsertions)
     },
-    mouseEvent,
-    setMouseEvent,
     codeInsertions,
     hasPendingInputChange,
     submitRecorderInputEvent,

From 777d82f22c13791005aaf71bd0de8dcedcf61054 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 16:31:22 -0400
Subject: [PATCH 78/98] recorder

shorten trpc error messages
---
 packages/extension/src/panel-controller/panel-controller.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-controller.ts b/packages/extension/src/panel-controller/panel-controller.ts
index 417affb..668f9d1 100644
--- a/packages/extension/src/panel-controller/panel-controller.ts
+++ b/packages/extension/src/panel-controller/panel-controller.ts
@@ -115,10 +115,10 @@ export async function startPanelController(
     catch (error) {
       console.log(error)
       if (error instanceof TRPCError && error.cause) {
-        vscode.window.showErrorMessage(`Error sending message from webview to extension: ${String(error.cause.message)}`)
+        vscode.window.showErrorMessage(error.cause.message)
       }
       else if (error instanceof Error) {
-        vscode.window.showErrorMessage(`Error sending message from webview to extension: ${error.message}`)
+        vscode.window.showErrorMessage(error.message)
       }
       panel.webview.postMessage({
         id,

From af247097b342920e09b9bbce35a09a7748e11e4c Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 18:55:14 -0400
Subject: [PATCH 79/98] recorder

enable more expect statement types
---
 .../src/panel-controller/panel-router.ts      |  7 +++--
 .../src/recorder/generate-code-from-input.ts  | 17 +++++++---
 .../src/recorder/recorder-codegen-session.ts  |  4 +--
 .../src/recorder/recorder-context-menu.tsx    | 31 +++++++++++++------
 .../web-view-vite/src/recorder/recorder.ts    | 10 ++++--
 5 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 5179e12..5cc2d3f 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -24,6 +24,9 @@ export const zRecordedEventData = z.object({
   indexIfMultipleFound: z.optional(z.number()), // Used when there are multiple elements for the same query
 })
 
+const zExpectStatementType = z.enum(['minimal'])
+export type ExpectStatementType = z.infer<typeof zExpectStatementType>
+
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
 export const panelRouter = t.router({
   setWebviewIsReady: t.procedure
@@ -205,7 +208,7 @@ export const panelRouter = t.router({
           ]),
         ]),
         // Whether to generate an 'expect' statement
-        useExpect: z.optional(z.boolean()),
+        useExpect: z.optional(zExpectStatementType),
         // Whether to use fireEvent instead of userEvent
         useFireEvent: z.optional(z.boolean()),
       }),
@@ -220,7 +223,7 @@ export const panelRouter = t.router({
         method,
         queryArg0,
         queryOptions,
-        useExpect ?? false,
+        useExpect ?? undefined,
         useFireEvent,
       )
       return recorderCodeGenSession?.insertions
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index d94a15d..abc4a3d 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -2,7 +2,7 @@ import path from 'pathe'
 import type { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
-import type { zRecordedEventData } from '../panel-controller/panel-router'
+import type { ExpectStatementType, zRecordedEventData } from '../panel-controller/panel-router'
 import type { SerializedRegexp } from './recorder-codegen-session'
 
 export async function generateCodeFromInput(
@@ -16,7 +16,7 @@ export async function generateCodeFromInput(
   queryArg0: string | SerializedRegexp,
   queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
 
-  useExpect: boolean,
+  useExpect: ExpectStatementType | undefined,
   useFireEvent: boolean | undefined,
 ) {
   const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
@@ -81,10 +81,19 @@ export async function generateCodeFromInput(
     [screen]: testLibrary,
   }
 
-  // When 'useExpect' is true, generate an 'expect' statement
+  // When 'useExpect' is defined, generate an 'expect' statement
   if (useExpect) {
     const expect = 'expect'
-    code = `${expect}(${selector})`
+
+    // Generate an 'expect' statement based on the selected type
+    code = (() => {
+      switch (useExpect) {
+        case 'minimal':
+        default:
+          return `${expect}(${selector})`
+      }
+    })()
+
     if (testFramework === 'vitest') {
       requiredImports[expect] = testFramework
     }
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index 6806392..0c2461c 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -4,7 +4,7 @@ import path from 'pathe'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { PanelController } from '../panel-controller/panel-controller'
-import type { zRecordedEventData } from '../panel-controller/panel-router'
+import type { ExpectStatementType, zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebuggerTracker } from '../util/debugger-tracker'
 import { performEdit } from './perform-edit'
 import { generateCodeFromInput } from './generate-code-from-input'
@@ -102,7 +102,7 @@ export function startRecorderCodeGenSession(
       findMethod: string,
       queryArg0: string | SerializedRegexp,
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
-      useExpect: boolean,
+      useExpect: ExpectStatementType | undefined,
       useFireEvent: boolean | undefined,
     ): Promise<[number, string] | null> => {
       const pausedLocation = await debuggerTracker.getPausedLocation()
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index 03943b2..d924f54 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -1,6 +1,7 @@
 import type { JSX } from 'solid-js'
 import { For, createSignal } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
+import type { ExpectStatementType } from '../../../extension/src/panel-controller/panel-router'
 import { recorder, shadowHost } from '../App'
 import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from '../components/solid-ui/context-menu'
 import { deepElementFromPoint } from '../inspector/util'
@@ -35,7 +36,7 @@ function RecorderContextMenu(
   async function submitRecorderInputEvent(
     eventType: string,
     { useExpect, useFireEvent }: {
-      useExpect?: boolean
+      useExpect?: ExpectStatementType
       useFireEvent?: boolean
     },
   ) {
@@ -60,15 +61,19 @@ function RecorderContextMenu(
           {/* 'Expect' statements */}
           <ContextMenuGroup>
             <ContextMenuGroupLabel>'Expect' Statement</ContextMenuGroupLabel>
-            <ContextMenuItem
-              onClick={() => submitRecorderInputEvent(
-                'click',
-                { useExpect: true },
+            <For each={EXPECT_STATEMENTS}>
+              {statement => (
+                <ContextMenuItem
+                  onClick={() => submitRecorderInputEvent(
+                    'click',
+                    { useExpect: statement.type },
+                  )}
+                >
+                  <span>{statement.title}</span>
+                  {statement.shortcut && <ContextMenuShortcut>{statement.shortcut}</ContextMenuShortcut>}
+                </ContextMenuItem>
               )}
-            >
-              <span>expect(element)</span>
-              <ContextMenuShortcut>Alt+Click</ContextMenuShortcut>
-            </ContextMenuItem>
+            </For>
           </ContextMenuGroup>
           <ContextMenuSeparator />
 
@@ -103,3 +108,11 @@ function RecorderContextMenu(
     </ContextMenu>
   )
 }
+
+const EXPECT_STATEMENTS: { title: string, type: ExpectStatementType, shortcut?: JSX.Element }[] = [
+  {
+    title: 'expect(element)',
+    type: 'minimal',
+    shortcut: 'Alt+Click',
+  },
+]
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 1136a97..5c8c210 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -6,7 +6,7 @@ import type { userEvent } from '@testing-library/user-event'
 import { createEffect, createSignal } from 'solid-js'
 import type { z } from 'zod/mini'
 import { createMutationObserver } from '@solid-primitives/mutation-observer'
-import type { zRecordedEventData } from '../../../extension/src/panel-controller/panel-router'
+import type { ExpectStatementType, zRecordedEventData } from '../../../extension/src/panel-controller/panel-router'
 import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
@@ -60,7 +60,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     target: Element,
     eventType: string,
     { useExpect, enterKeyPressed, useFireEvent }: {
-      useExpect?: boolean
+      useExpect?: ExpectStatementType
       enterKeyPressed?: boolean
       useFireEvent?: boolean
     } = {},
@@ -209,7 +209,11 @@ export function createRecorder(shadowHost: HTMLDivElement) {
             }
           }
 
-          const useExpect = eventType === 'click' && e instanceof MouseEvent && e.altKey
+          // On alt-click, generate the 'minimal' expect statement
+          // e.g. `expect(screen.getByRole('button'))`
+          const useExpect = (eventType === 'click' && e instanceof MouseEvent && e.altKey)
+            ? 'minimal'
+            : undefined
           // When the 'alt' key is held while clicking, generate an 'expect' statement
           if (useExpect) {
             e.preventDefault()

From b4c69d88ea5a2b6481c9e08a57b8cfbb1fbc0309 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 21:15:59 -0400
Subject: [PATCH 80/98] recorder

- allow custom behavior per 'expect' menu item.
- add toHaveValue expect command
---
 .../src/panel-controller/panel-router.ts      | 25 ++++---
 .../src/recorder/generate-code-from-input.ts  |  6 ++
 .../src/components/solid-ui/context-menu.tsx  |  2 +-
 .../src/recorder/recorder-context-menu.tsx    | 72 +++++++++++++------
 .../web-view-vite/src/recorder/recorder.ts    | 27 ++++---
 5 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 5cc2d3f..f5ee8c4 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -17,6 +17,18 @@ export interface PanelRouterCtx {
 
 const t = initTRPC.context<PanelRouterCtx>().create()
 
+const zTestingLibraryQueryArgs = z.tuple([
+  z.string(),
+  z.tuple([
+    z.union([z.string(), zSerializedRegexp]),
+    z.optional(z.record(
+      z.string(),
+      z.union([z.string(), z.boolean(), zSerializedRegexp]),
+    )),
+  ]),
+])
+export type TestingLibraryQueryArgs = z.infer<typeof zTestingLibraryQueryArgs>
+
 export const zRecordedEventData = z.object({
   text: z.optional(z.string()), // Used for change events
   options: z.optional(z.array(z.string())), // Used for selectOptions events
@@ -24,7 +36,7 @@ export const zRecordedEventData = z.object({
   indexIfMultipleFound: z.optional(z.number()), // Used when there are multiple elements for the same query
 })
 
-const zExpectStatementType = z.enum(['minimal'])
+const zExpectStatementType = z.enum(['minimal', 'toHaveValue'])
 export type ExpectStatementType = z.infer<typeof zExpectStatementType>
 
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
@@ -197,16 +209,7 @@ export const panelRouter = t.router({
       z.object({
         event: z.string(),
         eventData: zRecordedEventData,
-        query: z.tuple([
-          z.string(),
-          z.tuple([
-            z.union([z.string(), zSerializedRegexp]),
-            z.optional(z.record(
-              z.string(),
-              z.union([z.string(), z.boolean(), zSerializedRegexp]),
-            )),
-          ]),
-        ]),
+        query: zTestingLibraryQueryArgs,
         // Whether to generate an 'expect' statement
         useExpect: z.optional(zExpectStatementType),
         // Whether to use fireEvent instead of userEvent
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index abc4a3d..cc3906a 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -88,6 +88,12 @@ export async function generateCodeFromInput(
     // Generate an 'expect' statement based on the selected type
     code = (() => {
       switch (useExpect) {
+        case 'toHaveValue': {
+          const value = (eventData.text ?? '').replaceAll(/['\\]/g, (match) => {
+            return `\\${match}`
+          })
+          return `${expect}(${selector}).toHaveValue('${value}')`
+        }
         case 'minimal':
         default:
           return `${expect}(${selector})`
diff --git a/packages/web-view-vite/src/components/solid-ui/context-menu.tsx b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
index 1b06f53..e026783 100644
--- a/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
+++ b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
@@ -27,7 +27,7 @@ function ContextMenuContent<T extends ValidComponent = 'div'>(props: Polymorphic
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         class={cn(
-          'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in',
+          'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in outline-none',
           local.class,
         )}
         {...others}
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index d924f54..e55e422 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -1,7 +1,8 @@
 import type { JSX } from 'solid-js'
-import { For, createSignal } from 'solid-js'
+import { For, Show, createSignal } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
-import type { ExpectStatementType } from '../../../extension/src/panel-controller/panel-router'
+import type { inferProcedureInput } from '@trpc/server'
+import type { ExpectStatementType, PanelRouter } from '../../../extension/src/panel-controller/panel-router'
 import { recorder, shadowHost } from '../App'
 import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from '../components/solid-ui/context-menu'
 import { deepElementFromPoint } from '../inspector/util'
@@ -35,16 +36,17 @@ function RecorderContextMenu(
 
   async function submitRecorderInputEvent(
     eventType: string,
-    { useExpect, useFireEvent }: {
+    { useExpect, useFireEvent, processInput }: {
       useExpect?: ExpectStatementType
       useFireEvent?: boolean
+      processInput?: (input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>
     },
   ) {
     const target = targetElement()
     if (!target) {
       return
     }
-    await recorder.submitRecorderInputEvent(target, eventType, { useExpect, useFireEvent })
+    await recorder.submitRecorderInputEvent(target, eventType, { useExpect, useFireEvent, processInput })
   }
 
   return (
@@ -59,22 +61,33 @@ function RecorderContextMenu(
       <ContextMenuPortal>
         <ContextMenuContent class="w-50">
           {/* 'Expect' statements */}
-          <ContextMenuGroup>
-            <ContextMenuGroupLabel>'Expect' Statement</ContextMenuGroupLabel>
-            <For each={EXPECT_STATEMENTS}>
-              {statement => (
-                <ContextMenuItem
-                  onClick={() => submitRecorderInputEvent(
-                    'click',
-                    { useExpect: statement.type },
+          <Show when={targetElement()}>
+            {targetElement => (
+              <ContextMenuGroup>
+                <ContextMenuGroupLabel>'Expect' Statement</ContextMenuGroupLabel>
+                <For each={EXPECT_STATEMENTS}>
+                  {statement => (
+                    <Show when={statement.handler ? statement.handler(targetElement()) : true} keyed>
+                      {processInput => (
+                        <ContextMenuItem
+                          onClick={() => submitRecorderInputEvent(
+                            'click',
+                            {
+                              useExpect: statement.type,
+                              processInput: typeof processInput === 'function' ? processInput : undefined,
+                            },
+                          )}
+                        >
+                          <span>{statement.title}</span>
+                          {statement.shortcut && <ContextMenuShortcut>{statement.shortcut}</ContextMenuShortcut>}
+                        </ContextMenuItem>
+                      )}
+                    </Show>
                   )}
-                >
-                  <span>{statement.title}</span>
-                  {statement.shortcut && <ContextMenuShortcut>{statement.shortcut}</ContextMenuShortcut>}
-                </ContextMenuItem>
-              )}
-            </For>
-          </ContextMenuGroup>
+                </For>
+              </ContextMenuGroup>
+            )}
+          </Show>
           <ContextMenuSeparator />
 
           {/* Mouse events */}
@@ -109,10 +122,29 @@ function RecorderContextMenu(
   )
 }
 
-const EXPECT_STATEMENTS: { title: string, type: ExpectStatementType, shortcut?: JSX.Element }[] = [
+interface ExpectDef {
+  title: string
+  type: ExpectStatementType
+  shortcut?: JSX.Element
+  handler?: (e: Element) => (((input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>) | void)
+}
+
+const EXPECT_STATEMENTS: ExpectDef[] = [
   {
     title: 'expect(element)',
     type: 'minimal',
     shortcut: 'Alt+Click',
   },
+  {
+    title: '.toHaveValue',
+    type: 'toHaveValue',
+    handler: (el) => {
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        return (input) => {
+          input.eventData.text = el.value
+          return input
+        }
+      }
+    },
+  },
 ]
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 5c8c210..32ecb4c 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -1,16 +1,17 @@
 import { makeEventListener } from '@solid-primitives/event-listener'
 import { ReactiveMap } from '@solid-primitives/map'
+import { createMutationObserver } from '@solid-primitives/mutation-observer'
 import type { EventType, QueryArgs, Suggestion } from '@testing-library/dom'
 import { getSuggestedQuery, queries } from '@testing-library/dom'
 import type { userEvent } from '@testing-library/user-event'
+import type { inferProcedureInput } from '@trpc/server'
 import { createEffect, createSignal } from 'solid-js'
 import type { z } from 'zod/mini'
-import { createMutationObserver } from '@solid-primitives/mutation-observer'
-import type { ExpectStatementType, zRecordedEventData } from '../../../extension/src/panel-controller/panel-router'
+import type { ExpectStatementType, PanelRouter, TestingLibraryQueryArgs, zRecordedEventData } from '../../../extension/src/panel-controller/panel-router'
 import type { RecorderCodeInsertions } from '../../../extension/src/recorder/recorder-codegen-session'
+import { openPanel, updateOpenPanel } from '../App'
 import { deepElementFromPoint } from '../inspector/util'
 import { client } from '../lib/panel-client'
-import { openPanel, updateOpenPanel } from '../App'
 
 export const USEREVENT_MOUSE_EVENT_TYPES: (keyof typeof userEvent)[] = [
   'click',
@@ -59,10 +60,11 @@ export function createRecorder(shadowHost: HTMLDivElement) {
   async function submitRecorderInputEvent(
     target: Element,
     eventType: string,
-    { useExpect, enterKeyPressed, useFireEvent }: {
+    { useExpect, enterKeyPressed, useFireEvent, processInput }: {
       useExpect?: ExpectStatementType
       enterKeyPressed?: boolean
       useFireEvent?: boolean
+      processInput?: (input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>
     } = {},
   ) {
     let suggestedQuery: Suggestion | undefined
@@ -149,16 +151,23 @@ export function createRecorder(shadowHost: HTMLDivElement) {
       return eventType
     })()
 
-    const query = serializeQueryArgs(suggestedQuery.queryArgs)
+    const queryArgs: TestingLibraryQueryArgs = [
+      suggestedQuery.queryMethod,
+      serializeQueryArgs(suggestedQuery.queryArgs),
+    ]
 
-    // Send the selector to the extension process to record as code
-    const insertions = await client.recordInputAsCode.mutate({
+    let input: inferProcedureInput<PanelRouter['recordInputAsCode']> = {
       event: recordedEventType,
-      query: [suggestedQuery.queryMethod, query],
+      query: queryArgs,
       eventData,
       useExpect,
       useFireEvent,
-    })
+    }
+
+    input = processInput?.(input) ?? input
+
+    // Send the selector to the extension process to record as code
+    const insertions = await client.recordInputAsCode.mutate(input)
     setCodeInsertions(insertions)
   }
 

From 2426bfed9e0af0e95358dc156c7909fdcff59f5e Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 21:33:26 -0400
Subject: [PATCH 81/98] recorder

fix before/after hooks in recorder test
---
 test/e2e-recorder.test.ts | 119 +++++++++++++++++++-------------------
 1 file changed, 60 insertions(+), 59 deletions(-)

diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 96eff0b..87493a0 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -1,5 +1,4 @@
 import fs from 'node:fs/promises'
-import { pathToFileURL } from 'node:url'
 import type { Browser } from '@playwright/test'
 import { test } from '@playwright/test'
 import path from 'pathe'
@@ -18,19 +17,6 @@ for (const exampleFolder of ['vitest-react-tailwind4', 'jest-react', 'bun-solid'
   })
 }
 
-// Undo changes made to the TodoList.test.tsx file that gets edited
-{
-  const todoListTestPath = path.join(__dirname, '../examples/jest-nextjs-minimal/components/TodoList.test.tsx')
-  let todoListTestOriginalContent: string = ''
-  test.beforeAll(async () => {
-    todoListTestOriginalContent = await fs.readFile(todoListTestPath, 'utf8')
-  })
-  test.afterEach(async () => {
-  // Undo changes made to the TodoList.test.tsx file
-    await fs.writeFile(todoListTestPath, todoListTestOriginalContent, 'utf8')
-  })
-}
-
 test.afterEach(async () => {
   // Delete the generated test file
   const generatedFilePath = path.join(__dirname, '../examples/vitest-react-tailwind4/components/FormExample.test.tsx')
@@ -85,52 +71,67 @@ test('Record a UI test, Bun + Solid', async ({ browser }) => {
   await recordFormTest(browser, 'bun-solid', 'form-test-for-e2e.test.tsx', true)
 })
 
-test('Record TodoList test, Jest + React', async ({ browser }) => {
-  const { page, replicaPanel } = await startRecorderTest(browser, 'jest-nextjs-minimal', 'TodoList.test.tsx', true)
-
-  // Add todos
-  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).click()
-  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 1')
-  await page.keyboard.press('Enter')
-  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 2')
-  await page.keyboard.press('Enter')
-  await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 3')
-  await page.keyboard.press('Enter')
-
-  // Initial text
-  await replicaPanel.getByText('0 done').waitFor()
-  await replicaPanel.getByText('3 in progress').waitFor()
-
-  // Toggle todos
-  await replicaPanel.getByRole('checkbox', { name: 'Toggle done' }).nth(1).check()
-  await replicaPanel.getByRole('checkbox', { name: 'Toggle done' }).nth(2).check()
-  await replicaPanel.getByText('2 done').waitFor()
-  await replicaPanel.getByText('1 in progress').waitFor()
-
-  // Delete todos
-  await replicaPanel.getByRole('button', { name: 'Delete' }).first().click()
-  await replicaPanel.getByRole('button', { name: 'Delete' }).nth(1).click()
-  await replicaPanel.getByText('1 done').waitFor()
-  await replicaPanel.getByText('0 in progress').waitFor()
-
-  // Generate 'expect' statements
-  await replicaPanel.getByText(/^1 done$/).first().click({
-    modifiers: ['Alt'],
-  })
-  await replicaPanel.getByText(/^0 in progress$/).first().click({
-    modifiers: ['Alt'],
-  })
-
-  // End the test
-  await page.getByRole('button', { name: 'Continue (F5)' }).click()
-
-  // Wait for replica panel to be closed
-  await page.frameLocator('iframe.webview.ready').locator('iframe[title="Tested UI"]').waitFor({ state: 'detached' })
+test.describe('Record TodoList test, Jest + React', () => {
+  // Undo changes made to the TodoList.test.tsx file that gets edited
+  {
+    const todoListTestPath = path.join(__dirname, '../examples/jest-nextjs-minimal/components/TodoList.test.tsx')
+    let todoListTestOriginalContent: string = ''
+    test.beforeAll(async () => {
+      todoListTestOriginalContent = await fs.readFile(todoListTestPath, 'utf8')
+    })
+    test.afterEach(async () => {
+      // Undo changes made to the TodoList.test.tsx file
+      await fs.writeFile(todoListTestPath, todoListTestOriginalContent, 'utf8')
+    })
+  }
 
-  // Check for the generated code in the editor; Make sure indexes are used for the checkboxes and buttons
-  await page.getByText(`await userEvent.click(screen.getAllByRole('checkbox', { name: /^toggle done$/i })[1])`).waitFor()
-  await page.getByText(`await userEvent.click(screen.getAllByRole('button', { name: /^delete$/i })[0])`).waitFor()
-  await page.getByText(`expect(screen.getByText(/^1 done$/i))`).waitFor()
+  test('Record TodoList test, Jest + React', async ({ browser }) => {
+    const { page, replicaPanel } = await startRecorderTest(browser, 'jest-nextjs-minimal', 'TodoList.test.tsx', true)
+
+    // Add todos
+    await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).click()
+    await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 1')
+    await page.keyboard.press('Enter')
+    await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 2')
+    await page.keyboard.press('Enter')
+    await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 3')
+    await page.keyboard.press('Enter')
+
+    // Initial text
+    await replicaPanel.getByText('0 done').waitFor()
+    await replicaPanel.getByText('3 in progress').waitFor()
+
+    // Toggle todos
+    await replicaPanel.getByRole('checkbox', { name: 'Toggle done' }).nth(1).check()
+    await replicaPanel.getByRole('checkbox', { name: 'Toggle done' }).nth(2).check()
+    await replicaPanel.getByText('2 done').waitFor()
+    await replicaPanel.getByText('1 in progress').waitFor()
+
+    // Delete todos
+    await replicaPanel.getByRole('button', { name: 'Delete' }).first().click()
+    await replicaPanel.getByRole('button', { name: 'Delete' }).nth(1).click()
+    await replicaPanel.getByText('1 done').waitFor()
+    await replicaPanel.getByText('0 in progress').waitFor()
+
+    // Generate 'expect' statements
+    await replicaPanel.getByText(/^1 done$/).first().click({
+      modifiers: ['Alt'],
+    })
+    await replicaPanel.getByText(/^0 in progress$/).first().click({
+      modifiers: ['Alt'],
+    })
+
+    // End the test
+    await page.getByRole('button', { name: 'Continue (F5)' }).click()
+
+    // Wait for replica panel to be closed
+    await page.frameLocator('iframe.webview.ready').locator('iframe[title="Tested UI"]').waitFor({ state: 'detached' })
+
+    // Check for the generated code in the editor; Make sure indexes are used for the checkboxes and buttons
+    await page.getByText(`await userEvent.click(screen.getAllByRole('checkbox', { name: /^toggle done$/i })[1])`).waitFor()
+    await page.getByText(`await userEvent.click(screen.getAllByRole('button', { name: /^delete$/i })[0])`).waitFor()
+    await page.getByText(`expect(screen.getByText(/^1 done$/i))`).waitFor()
+  })
 })
 
 async function startRecorderTest(browser: Browser, exampleFolder: string, testFileSearch: string, dismissStylePrompt = false) {

From 98ab84c871027656aa99c2a2db7d66421a319654 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 22:00:14 -0400
Subject: [PATCH 82/98] recorder

increase timeouts
---
 test/e2e-core.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/e2e-core.test.ts b/test/e2e-core.test.ts
index fa7a076..52975e9 100644
--- a/test/e2e-core.test.ts
+++ b/test/e2e-core.test.ts
@@ -48,6 +48,7 @@ test('Steps through the Vitest+React+Tailwind@4 Counter example', async ({ brows
       .evaluate(
         button => window.getComputedStyle(button).getPropertyValue('background-color'),
       ),
+    { timeout: 20_000 },
   ).toBe('oklch(0.448 0.119 151.328)') // green
 
   await debugHelper.debugStep()
@@ -111,6 +112,7 @@ test('Steps through the Vitest+React+Tailwind@3 Counter example', async ({ brows
       .evaluate(
         button => window.getComputedStyle(button).getPropertyValue('background-color'),
       ),
+    { timeout: 20_000 },
   ).toBe('rgb(22, 101, 52)') // green
 
   await debugHelper.debugStep()

From 5b777e2011c244a9375c48b697cae082c37548fe Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Wed, 29 Oct 2025 22:36:39 -0400
Subject: [PATCH 83/98] recorder

- add toBeEnabled command
- move fireEvent options into sub-category
---
 .../src/panel-controller/panel-router.ts      |  2 +-
 .../src/recorder/generate-code-from-input.ts  |  3 +
 .../src/recorder/recorder-context-menu.tsx    | 67 +++++++++++++------
 3 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index f5ee8c4..eabddcf 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -36,7 +36,7 @@ export const zRecordedEventData = z.object({
   indexIfMultipleFound: z.optional(z.number()), // Used when there are multiple elements for the same query
 })
 
-const zExpectStatementType = z.enum(['minimal', 'toHaveValue'])
+const zExpectStatementType = z.enum(['minimal', 'toHaveValue', 'toBeEnabled'])
 export type ExpectStatementType = z.infer<typeof zExpectStatementType>
 
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index cc3906a..93c32d8 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -94,6 +94,9 @@ export async function generateCodeFromInput(
           })
           return `${expect}(${selector}).toHaveValue('${value}')`
         }
+        case 'toBeEnabled': {
+          return `${expect}(${selector}).toBeEnabled()`
+        }
         case 'minimal':
         default:
           return `${expect}(${selector})`
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index e55e422..b90ee14 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -4,7 +4,7 @@ import { Dynamic } from 'solid-js/web'
 import type { inferProcedureInput } from '@trpc/server'
 import type { ExpectStatementType, PanelRouter } from '../../../extension/src/panel-controller/panel-router'
 import { recorder, shadowHost } from '../App'
-import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from '../components/solid-ui/context-menu'
+import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from '../components/solid-ui/context-menu'
 import { deepElementFromPoint } from '../inspector/util'
 import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
 
@@ -40,7 +40,7 @@ function RecorderContextMenu(
       useExpect?: ExpectStatementType
       useFireEvent?: boolean
       processInput?: (input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>
-    },
+    } = {},
   ) {
     const target = targetElement()
     if (!target) {
@@ -50,7 +50,9 @@ function RecorderContextMenu(
   }
 
   return (
-    <ContextMenu>
+    <ContextMenu
+      onOpenChange={isOpen => !isOpen && setTargetElement(null)}
+    >
       <ContextMenuTrigger
         class="w-full h-full"
         // on right click, update the target element
@@ -91,31 +93,44 @@ function RecorderContextMenu(
           <ContextMenuSeparator />
 
           {/* Mouse events */}
-          <For each={[
-            { eventTypes: USEREVENT_MOUSE_EVENT_TYPES, title: 'Mouse Event (user-event)', useFireEvent: false, tooltip: 'Uses @testing-library/user-event' },
-            { eventTypes: FIREEVENT_MOUSE_EVENT_TYPES, title: 'Mouse Event (fireEvent)', useFireEvent: true, tooltip: 'Uses testing-library\'s fireEvent' },
-          ]}
-          >{(section, idx) => (
-            <>
-              {idx() > 0 && <ContextMenuSeparator />}
-              <ContextMenuGroup>
-                <ContextMenuGroupLabel>{section.title}</ContextMenuGroupLabel>
-                <For each={section.eventTypes}>
+          <ContextMenuGroup>
+            <ContextMenuGroupLabel>Mouse Event (userEvent)</ContextMenuGroupLabel>
+            <For each={USEREVENT_MOUSE_EVENT_TYPES}>
+              {eventType => (
+                <ContextMenuItem
+                  onClick={() => submitRecorderInputEvent(eventType)}
+                >
+                  <span>{eventType}</span>
+                </ContextMenuItem>
+              )}
+            </For>
+          </ContextMenuGroup>
+
+          <ContextMenuSeparator />
+          <ContextMenuSub overlap>
+            <ContextMenuSubTrigger>
+              <span class="text-sm font-semibold whitespace-nowrap">
+                Mouse Event (fireEvent)
+              </span>
+            </ContextMenuSubTrigger>
+            <ContextMenuPortal>
+              <ContextMenuSubContent>
+                <For each={FIREEVENT_MOUSE_EVENT_TYPES}>
                   {eventType => (
                     <ContextMenuItem
                       onClick={() => submitRecorderInputEvent(
                         eventType,
-                        { useFireEvent: section.useFireEvent },
+                        { useFireEvent: true },
                       )}
                     >
                       <span>{eventType}</span>
                     </ContextMenuItem>
                   )}
                 </For>
-              </ContextMenuGroup>
-            </>
-          )}
-          </For>
+              </ContextMenuSubContent>
+            </ContextMenuPortal>
+          </ContextMenuSub>
+
         </ContextMenuContent>
       </ContextMenuPortal>
     </ContextMenu>
@@ -126,7 +141,7 @@ interface ExpectDef {
   title: string
   type: ExpectStatementType
   shortcut?: JSX.Element
-  handler?: (e: Element) => (((input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>) | void)
+  handler?: (e: Element) => (((input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>) | void) | boolean
 }
 
 const EXPECT_STATEMENTS: ExpectDef[] = [
@@ -136,7 +151,7 @@ const EXPECT_STATEMENTS: ExpectDef[] = [
     shortcut: 'Alt+Click',
   },
   {
-    title: '.toHaveValue',
+    title: `.toHaveValue(...)`,
     type: 'toHaveValue',
     handler: (el) => {
       if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
@@ -147,4 +162,16 @@ const EXPECT_STATEMENTS: ExpectDef[] = [
       }
     },
   },
+  {
+    title: '.toBeEnabled()',
+    type: 'toBeEnabled',
+    handler: (el) => {
+      if (el instanceof HTMLInputElement
+        || el instanceof HTMLTextAreaElement
+        || el instanceof HTMLSelectElement
+        || el instanceof HTMLButtonElement) {
+        return true
+      }
+    },
+  },
 ]

From a0fa82ad2d6f436caebe3cd3c1d28752f5814b9e Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 30 Oct 2025 00:20:08 -0400
Subject: [PATCH 84/98] recorder

- highlight the right-clicked node
- close the context menu on right click
---
 .../src/components/HighlightedNode.tsx        |  39 ++++
 .../web-view-vite/src/inspector/Inspector.tsx |  39 +---
 .../src/recorder/recorder-context-menu.tsx    | 185 ++++++++++--------
 3 files changed, 146 insertions(+), 117 deletions(-)
 create mode 100644 packages/web-view-vite/src/components/HighlightedNode.tsx

diff --git a/packages/web-view-vite/src/components/HighlightedNode.tsx b/packages/web-view-vite/src/components/HighlightedNode.tsx
new file mode 100644
index 0000000..fa4d043
--- /dev/null
+++ b/packages/web-view-vite/src/components/HighlightedNode.tsx
@@ -0,0 +1,39 @@
+import { makeEventListener } from '@solid-primitives/event-listener'
+import { createSignal } from 'solid-js'
+
+/** Shows a highlight overlay over the given node */
+export function HighlightedNode(props: { node: Node }) {
+  function newRect() {
+    return props.node instanceof Text
+      ? (() => {
+          const range = document.createRange()
+          range.selectNodeContents(props.node)
+          return range.getBoundingClientRect()
+        })()
+      : props.node instanceof Element
+        ? props.node.getBoundingClientRect()
+        : props.node.parentElement?.getBoundingClientRect()
+  }
+
+  const [rect, setRect] = createSignal(newRect())
+
+  // Update the rect on scroll, click, etc
+  makeEventListener(window, 'resize', () => setRect(newRect()))
+  makeEventListener(window, 'scroll', () => setRect(newRect()))
+  makeEventListener(window, 'wheel', () => setRect(newRect()))
+  makeEventListener(window, 'mousedown', () => setRect(newRect()))
+  makeEventListener(window, 'mouseup', () => setRect(newRect()))
+  makeEventListener(window, 'click', () => setRect(newRect()))
+
+  return (
+    <div
+      class="fixed z-50 pointer-events-none bg-[var(--vscode-editorLightBulbAutoFix-foreground)] opacity-60 transition-all duration-100 min-h-[1px] min-w-[1px]"
+      style={{
+        top: `${rect()?.top}px`,
+        left: `${rect()?.left}px`,
+        width: `${rect()?.width}px`,
+        height: `${rect()?.height}px`,
+      }}
+    />
+  )
+}
diff --git a/packages/web-view-vite/src/inspector/Inspector.tsx b/packages/web-view-vite/src/inspector/Inspector.tsx
index 45208c1..92a5ceb 100644
--- a/packages/web-view-vite/src/inspector/Inspector.tsx
+++ b/packages/web-view-vite/src/inspector/Inspector.tsx
@@ -3,6 +3,7 @@ import { ReactiveWeakMap } from '@solid-primitives/map'
 import { createMutationObserver } from '@solid-primitives/mutation-observer'
 import { Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
 import { recorder, shadowHost } from '../App'
+import { HighlightedNode } from '../components/HighlightedNode'
 import { type InspectedNode, getNewDomTree } from './inspector-dom-tree'
 import { createInspectorSearch } from './inspector-search'
 import { SearchToolbar } from './SearchToolbar'
@@ -102,41 +103,9 @@ export function Inspector() {
         )}
       </Show>
       <Show when={!recorder.isRecording() && (hoveredNode() ?? selectedNode())} keyed>
-        {(node) => {
-          function newRect() {
-            return node instanceof Text
-              ? (() => {
-                  const range = document.createRange()
-                  range.selectNodeContents(node)
-                  return range.getBoundingClientRect()
-                })()
-              : node instanceof Element
-                ? node.getBoundingClientRect()
-                : node.parentElement?.getBoundingClientRect()
-          }
-
-          const [rect, setRect] = createSignal(newRect())
-
-          // Update the rect on scroll, click, etc
-          makeEventListener(window, 'resize', () => setRect(newRect()))
-          makeEventListener(window, 'scroll', () => setRect(newRect()))
-          makeEventListener(window, 'wheel', () => setRect(newRect()))
-          makeEventListener(window, 'mousedown', () => setRect(newRect()))
-          makeEventListener(window, 'mouseup', () => setRect(newRect()))
-          makeEventListener(window, 'click', () => setRect(newRect()))
-
-          return (
-            <div
-              class="fixed z-50 pointer-events-none bg-[var(--vscode-editorLightBulbAutoFix-foreground)] opacity-60 transition-all duration-100 min-h-[1px] min-w-[1px]"
-              style={{
-                top: `${rect()?.top}px`,
-                left: `${rect()?.left}px`,
-                width: `${rect()?.width}px`,
-                height: `${rect()?.height}px`,
-              }}
-            />
-          )
-        }}
+        {node => (
+          <HighlightedNode node={node} />
+        )}
       </Show>
     </div>
   )
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index b90ee14..86e3f0b 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -1,9 +1,10 @@
+import type { inferProcedureInput } from '@trpc/server'
 import type { JSX } from 'solid-js'
 import { For, Show, createSignal } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
-import type { inferProcedureInput } from '@trpc/server'
 import type { ExpectStatementType, PanelRouter } from '../../../extension/src/panel-controller/panel-router'
 import { recorder, shadowHost } from '../App'
+import { HighlightedNode } from '../components/HighlightedNode'
 import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from '../components/solid-ui/context-menu'
 import { deepElementFromPoint } from '../inspector/util'
 import { FIREEVENT_MOUSE_EVENT_TYPES, USEREVENT_MOUSE_EVENT_TYPES } from './recorder'
@@ -50,100 +51,120 @@ function RecorderContextMenu(
   }
 
   return (
-    <ContextMenu
-      onOpenChange={isOpen => !isOpen && setTargetElement(null)}
-    >
-      <ContextMenuTrigger
-        class="w-full h-full"
-        // on right click, update the target element
-        onMouseDown={e => e.button === 2 && updateTargetElement(e)}
-      >
-        {props.children}
-      </ContextMenuTrigger>
-      <ContextMenuPortal>
-        <ContextMenuContent class="w-50">
-          {/* 'Expect' statements */}
-          <Show when={targetElement()}>
-            {targetElement => (
-              <ContextMenuGroup>
-                <ContextMenuGroupLabel>'Expect' Statement</ContextMenuGroupLabel>
-                <For each={EXPECT_STATEMENTS}>
-                  {statement => (
-                    <Show when={statement.handler ? statement.handler(targetElement()) : true} keyed>
-                      {processInput => (
-                        <ContextMenuItem
-                          onClick={() => submitRecorderInputEvent(
-                            'click',
-                            {
-                              useExpect: statement.type,
-                              processInput: typeof processInput === 'function' ? processInput : undefined,
-                            },
-                          )}
-                        >
-                          <span>{statement.title}</span>
-                          {statement.shortcut && <ContextMenuShortcut>{statement.shortcut}</ContextMenuShortcut>}
-                        </ContextMenuItem>
-                      )}
-                    </Show>
-                  )}
-                </For>
-              </ContextMenuGroup>
-            )}
-          </Show>
-          <ContextMenuSeparator />
+    <>
+      <ContextMenu
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            setTargetElement(null)
+          }
 
-          {/* Mouse events */}
-          <ContextMenuGroup>
-            <ContextMenuGroupLabel>Mouse Event (userEvent)</ContextMenuGroupLabel>
-            <For each={USEREVENT_MOUSE_EVENT_TYPES}>
-              {eventType => (
-                <ContextMenuItem
-                  onClick={() => submitRecorderInputEvent(eventType)}
-                >
-                  <span>{eventType}</span>
-                </ContextMenuItem>
+          // Don't allow the context menu to open if there is no target element
+          if (isOpen && !targetElement()) {
+            // Dispatch 'escape' key press to close the context menu
+            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+          }
+        }}
+      >
+        <ContextMenuTrigger
+          class="w-full h-full"
+          // on right click, update the target element
+          onMouseDown={e => e.button === 2 && updateTargetElement(e)}
+        >
+          {props.children}
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent class="w-50">
+            {/* 'Expect' statements */}
+            <Show when={targetElement()}>
+              {targetElement => (
+                <ContextMenuGroup>
+                  <ContextMenuGroupLabel>'Expect' Statement</ContextMenuGroupLabel>
+                  <For each={EXPECT_STATEMENTS}>
+                    {statement => (
+                      <Show when={statement.handler ? statement.handler(targetElement()) : true} keyed>
+                        {processInput => (
+                          <ContextMenuItem
+                            onClick={() => submitRecorderInputEvent(
+                              'click',
+                              {
+                                useExpect: statement.type,
+                                processInput: typeof processInput === 'function' ? processInput : undefined,
+                              },
+                            )}
+                          >
+                            <span>{statement.title}</span>
+                            {statement.shortcut && <ContextMenuShortcut>{statement.shortcut}</ContextMenuShortcut>}
+                          </ContextMenuItem>
+                        )}
+                      </Show>
+                    )}
+                  </For>
+                </ContextMenuGroup>
               )}
-            </For>
-          </ContextMenuGroup>
+            </Show>
+            <ContextMenuSeparator />
+
+            {/* Mouse events */}
+            <ContextMenuGroup>
+              <ContextMenuGroupLabel>Mouse Event (userEvent)</ContextMenuGroupLabel>
+              <For each={USEREVENT_MOUSE_EVENT_TYPES}>
+                {eventType => (
+                  <ContextMenuItem
+                    onClick={() => submitRecorderInputEvent(eventType)}
+                  >
+                    <span>{eventType}</span>
+                  </ContextMenuItem>
+                )}
+              </For>
+            </ContextMenuGroup>
 
-          <ContextMenuSeparator />
-          <ContextMenuSub overlap>
-            <ContextMenuSubTrigger>
-              <span class="text-sm font-semibold whitespace-nowrap">
-                Mouse Event (fireEvent)
-              </span>
-            </ContextMenuSubTrigger>
-            <ContextMenuPortal>
-              <ContextMenuSubContent>
-                <For each={FIREEVENT_MOUSE_EVENT_TYPES}>
-                  {eventType => (
-                    <ContextMenuItem
-                      onClick={() => submitRecorderInputEvent(
-                        eventType,
-                        { useFireEvent: true },
-                      )}
-                    >
-                      <span>{eventType}</span>
-                    </ContextMenuItem>
-                  )}
-                </For>
-              </ContextMenuSubContent>
-            </ContextMenuPortal>
-          </ContextMenuSub>
+            <ContextMenuSeparator />
+            <ContextMenuSub overlap>
+              <ContextMenuSubTrigger>
+                <span class="text-sm font-semibold whitespace-nowrap">
+                  Mouse Event (fireEvent)
+                </span>
+              </ContextMenuSubTrigger>
+              <ContextMenuPortal>
+                <ContextMenuSubContent>
+                  <For each={FIREEVENT_MOUSE_EVENT_TYPES}>
+                    {eventType => (
+                      <ContextMenuItem
+                        onClick={() => submitRecorderInputEvent(
+                          eventType,
+                          { useFireEvent: true },
+                        )}
+                      >
+                        <span>{eventType}</span>
+                      </ContextMenuItem>
+                    )}
+                  </For>
+                </ContextMenuSubContent>
+              </ContextMenuPortal>
+            </ContextMenuSub>
 
-        </ContextMenuContent>
-      </ContextMenuPortal>
-    </ContextMenu>
+          </ContextMenuContent>
+        </ContextMenuPortal>
+      </ContextMenu>
+      <Show when={targetElement()} keyed>
+        {target => (
+          <HighlightedNode node={target} />
+        )}
+      </Show>
+    </>
   )
 }
 
+type RecorderInputChanger = (input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>
+
 interface ExpectDef {
   title: string
   type: ExpectStatementType
   shortcut?: JSX.Element
-  handler?: (e: Element) => (((input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>) | void) | boolean
+  handler?: (e: Element) => (RecorderInputChanger | void) | boolean
 }
 
+/** Definitions of expect statements you can pick from in the context menu */
 const EXPECT_STATEMENTS: ExpectDef[] = [
   {
     title: 'expect(element)',

From 618ee09ff9618999ffc32ea4f6b3ef1d7a7a6c09 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 30 Oct 2025 02:04:06 -0400
Subject: [PATCH 85/98] recorder

- workaround to allow right-clicking outside the menu
---
 .../src/components/solid-ui/context-menu.tsx  |   1 +
 .../src/recorder/recorder-context-menu.tsx    | 118 ++++++++++++++----
 2 files changed, 92 insertions(+), 27 deletions(-)

diff --git a/packages/web-view-vite/src/components/solid-ui/context-menu.tsx b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
index e026783..ab95072 100644
--- a/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
+++ b/packages/web-view-vite/src/components/solid-ui/context-menu.tsx
@@ -120,6 +120,7 @@ function ContextMenuSubContent<T extends ValidComponent = 'div'>(props: Polymorp
         'z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in',
         local.class,
       )}
+      data-ui-test-visualizer-menu-subcontent
       {...others}
     />
   )
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index 86e3f0b..b44cd8d 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -1,3 +1,4 @@
+import { createInteractOutside } from '@kobalte/core'
 import type { inferProcedureInput } from '@trpc/server'
 import type { JSX } from 'solid-js'
 import { For, Show, createSignal } from 'solid-js'
@@ -27,7 +28,12 @@ function RecorderContextMenu(
   props: { children: JSX.Element, class?: string },
 ) {
   const [targetElement, setTargetElement] = createSignal<Element | null>(null)
-  function updateTargetElement(e: MouseEvent) {
+  function updateTargetElement(e: MouseEvent | null) {
+    if (!e) {
+      setTargetElement(null)
+      return
+    }
+
     const clickedEl = (shadowHost.shadowRoot && deepElementFromPoint(shadowHost.shadowRoot, e.clientX, e.clientY)) ?? e.target
     if (!(clickedEl instanceof Element)) {
       return
@@ -47,23 +53,39 @@ function RecorderContextMenu(
     if (!target) {
       return
     }
+    close()
     await recorder.submitRecorderInputEvent(target, eventType, { useExpect, useFireEvent, processInput })
   }
 
+  const { setupMenuRef, isOpen, setOpenIfTrue, close } = enableSelectingDifferentNodeWhileMenuIsOpen(
+    updateTargetElement,
+  )
+
+  function submitExpectStatement(
+    statement: ExpectStatementDef,
+    processInput: RecorderInputChanger | boolean | void,
+  ) {
+    submitRecorderInputEvent(
+      'click',
+      {
+        useExpect: statement.type,
+        processInput: typeof processInput === 'function' ? processInput : undefined,
+      },
+    )
+    close()
+  }
+
+  function submitInputEvent(eventType: string, useFireEvent?: boolean) {
+    submitRecorderInputEvent(eventType, { useFireEvent })
+    close()
+  }
+
   return (
     <>
       <ContextMenu
-        onOpenChange={(isOpen) => {
-          if (!isOpen) {
-            setTargetElement(null)
-          }
-
-          // Don't allow the context menu to open if there is no target element
-          if (isOpen && !targetElement()) {
-            // Dispatch 'escape' key press to close the context menu
-            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
-          }
-        }}
+        // @ts-expect-error This is a valid prop
+        open={isOpen()}
+        onOpenChange={setOpenIfTrue}
       >
         <ContextMenuTrigger
           class="w-full h-full"
@@ -73,7 +95,7 @@ function RecorderContextMenu(
           {props.children}
         </ContextMenuTrigger>
         <ContextMenuPortal>
-          <ContextMenuContent class="w-50">
+          <ContextMenuContent class="w-50" ref={setupMenuRef}>
             {/* 'Expect' statements */}
             <Show when={targetElement()}>
               {targetElement => (
@@ -84,13 +106,7 @@ function RecorderContextMenu(
                       <Show when={statement.handler ? statement.handler(targetElement()) : true} keyed>
                         {processInput => (
                           <ContextMenuItem
-                            onClick={() => submitRecorderInputEvent(
-                              'click',
-                              {
-                                useExpect: statement.type,
-                                processInput: typeof processInput === 'function' ? processInput : undefined,
-                              },
-                            )}
+                            onClick={() => submitExpectStatement(statement, processInput)}
                           >
                             <span>{statement.title}</span>
                             {statement.shortcut && <ContextMenuShortcut>{statement.shortcut}</ContextMenuShortcut>}
@@ -110,7 +126,7 @@ function RecorderContextMenu(
               <For each={USEREVENT_MOUSE_EVENT_TYPES}>
                 {eventType => (
                   <ContextMenuItem
-                    onClick={() => submitRecorderInputEvent(eventType)}
+                    onClick={() => submitInputEvent(eventType)}
                   >
                     <span>{eventType}</span>
                   </ContextMenuItem>
@@ -130,10 +146,7 @@ function RecorderContextMenu(
                   <For each={FIREEVENT_MOUSE_EVENT_TYPES}>
                     {eventType => (
                       <ContextMenuItem
-                        onClick={() => submitRecorderInputEvent(
-                          eventType,
-                          { useFireEvent: true },
-                        )}
+                        onClick={() => submitInputEvent(eventType, true)}
                       >
                         <span>{eventType}</span>
                       </ContextMenuItem>
@@ -157,7 +170,7 @@ function RecorderContextMenu(
 
 type RecorderInputChanger = (input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>
 
-interface ExpectDef {
+interface ExpectStatementDef {
   title: string
   type: ExpectStatementType
   shortcut?: JSX.Element
@@ -165,7 +178,7 @@ interface ExpectDef {
 }
 
 /** Definitions of expect statements you can pick from in the context menu */
-const EXPECT_STATEMENTS: ExpectDef[] = [
+const EXPECT_STATEMENTS: ExpectStatementDef[] = [
   {
     title: 'expect(element)',
     type: 'minimal',
@@ -196,3 +209,54 @@ const EXPECT_STATEMENTS: ExpectDef[] = [
     },
   },
 ]
+
+/**
+ * Messy workaround to allow right-clicking outside the menu
+ * to re-open it for a different target element
+ */
+function enableSelectingDifferentNodeWhileMenuIsOpen(
+  updateTargetElement: (pointerEvent: PointerEvent | null) => void,
+) {
+  function setupMenuRef(ref: HTMLElement) {
+    createInteractOutside({
+      onPointerDownOutside: (customEvent) => {
+        const target = customEvent.target
+        if (target instanceof HTMLElement && target.closest('[data-ui-test-visualizer-menu-subcontent]')) {
+          return
+        }
+
+        setOpen(false)
+        updateTargetElement(null)
+        const { originalEvent } = customEvent.detail
+        if (originalEvent.button === 2) {
+          queueMicrotask(() => {
+            updateTargetElement(originalEvent)
+          })
+        }
+      },
+    }, () => ref)
+  }
+
+  const [isOpen, setOpen] = createSignal(false)
+
+  function setOpenIfTrue(newVal: boolean) {
+    if (newVal) {
+      setOpen(newVal)
+    }
+  }
+
+  function close() {
+    // Send an escape key event to close the context menu
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+
+    setOpen(false)
+    updateTargetElement(null)
+  }
+
+  return {
+    setupMenuRef,
+    isOpen,
+    setOpenIfTrue,
+    close,
+  }
+}

From 5f5bd7ea8f14f86abb34704a2ff24fc1f7eb8484 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 30 Oct 2025 17:06:20 -0400
Subject: [PATCH 86/98] recorder

- when changing a pre-filled value, clear first
---
 .../src/panel-controller/panel-router.ts      |   1 +
 .../src/recorder/generate-code-from-input.ts  | 104 +++++++++---------
 .../extension/src/recorder/perform-edit.ts    |   2 +-
 .../src/recorder/recorder-codegen-session.ts  |   6 +-
 .../web-view-vite/src/recorder/recorder.ts    |  15 +++
 test/e2e-recorder.test.ts                     |   2 +-
 6 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index eabddcf..80e833c 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -34,6 +34,7 @@ export const zRecordedEventData = z.object({
   options: z.optional(z.array(z.string())), // Used for selectOptions events
   enterKeyPressed: z.optional(z.boolean()), // Used for Enter keydown events
   indexIfMultipleFound: z.optional(z.number()), // Used when there are multiple elements for the same query
+  clearBeforeType: z.optional(z.boolean()), // Clear the input before typing
 })
 
 const zExpectStatementType = z.enum(['minimal', 'toHaveValue', 'toBeEnabled'])
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index 93c32d8..a8c4347 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -59,6 +59,9 @@ export async function generateCodeFromInput(
   })()
 
   const screen = 'screen'
+  const fireEvent = 'fireEvent'
+  const userEvent = 'userEvent'
+  const expect = 'expect'
 
   /**
    * e.g. `screen.getByRole('button', { name: 'Submit' })`
@@ -76,17 +79,15 @@ export async function generateCodeFromInput(
     return `${screen}.${findMethod}(${queryArgsStr})${index}`
   })()
 
-  let code = ''
+  let mainLine = ''
   const requiredImports: Record<string, string> = {
     [screen]: testLibrary,
   }
 
   // When 'useExpect' is defined, generate an 'expect' statement
   if (useExpect) {
-    const expect = 'expect'
-
     // Generate an 'expect' statement based on the selected type
-    code = (() => {
+    mainLine = (() => {
       switch (useExpect) {
         case 'toHaveValue': {
           const value = (eventData.text ?? '').replaceAll(/['\\]/g, (match) => {
@@ -111,59 +112,53 @@ export async function generateCodeFromInput(
     }
   }
   // Otherwise, generate a userEvent call
-  else {
-    if (useFireEvent) {
-      const fireEvent = 'fireEvent'
-
-      const fireEventArgs = (() => {
-        if (event === 'change' && eventData.text) {
-          const value = eventData.text.replace(/'/g, '\\\'')
-          return `, { target: { value: '${value}' } }`
-        }
-        if (event === 'selectOptions' && eventData.options) {
-          return `, { target: { value: '${eventData.options[0]}' } }`
-        }
-        return ''
-      })()
+  else if (useFireEvent) {
+    const fireEventArgs = (() => {
+      if (event === 'change' && eventData.text) {
+        const value = eventData.text.replace(/'/g, '\\\'')
+        return `, { target: { value: '${value}' } }`
+      }
+      if (event === 'selectOptions' && eventData.options) {
+        return `, { target: { value: '${eventData.options[0]}' } }`
+      }
+      return ''
+    })()
 
-      code = `${fireEvent}.${event}(${selector}${fireEventArgs})`
+    mainLine = `${fireEvent}.${event}(${selector}${fireEventArgs})`
 
-      requiredImports[fireEvent] = testLibrary
-    }
-    else {
-      if (!hasUserEventLib) {
-        throw new Error('Cannot use userEvent without @testing-library/user-event installed')
-      }
-      const userEvent = 'userEvent'
-
-      const userEventArgs = (() => {
-        // When using userEvent with text inputs, the method is either 'type' or 'clear'
-        if (event === 'change' && typeof eventData.text === 'string') {
-          // If the text is empty, use 'clear' instead of 'type'
-          if (eventData.text.length === 0) {
-            event = 'clear'
-            return ''
-          }
-
-          // Otherwise 'type' the text
-          event = 'type'
-          const value = eventData.text.replace(/'/g, '\\\'')
-          return `, '${value}'`
-        }
-        if (event === 'selectOptions' && eventData.options) {
-          return `, [${eventData.options.map(it => `'${it.replace(/'/g, '\\\'')}'`).join(', ')}]`
+    requiredImports[fireEvent] = testLibrary
+  }
+  else if (!hasUserEventLib) {
+    throw new Error('Cannot use userEvent without @testing-library/user-event installed')
+  }
+  else {
+    const userEventArgs = (() => {
+      // When using userEvent with text inputs, the method is either 'type' or 'clear'
+      if (event === 'change' && typeof eventData.text === 'string') {
+        // If the text is empty, use 'clear' instead of 'type'
+        if (eventData.text.length === 0) {
+          event = 'clear'
+          return ''
         }
-        return ''
-      })()
 
-      code = `await ${userEvent}.${event}(${selector}${userEventArgs})`
-
-      if (event === 'keydown' && eventData.enterKeyPressed) {
-        code = `await ${userEvent}.keyboard('{enter}')`
+        // Otherwise 'type' the text
+        event = 'type'
+        const value = eventData.text.replace(/'/g, '\\\'')
+        return `, '${value}'`
+      }
+      if (event === 'selectOptions' && eventData.options) {
+        return `, [${eventData.options.map(it => `'${it.replace(/'/g, '\\\'')}'`).join(', ')}]`
       }
+      return ''
+    })()
+
+    mainLine = `await ${userEvent}.${event}(${selector}${userEventArgs})`
 
-      requiredImports[userEvent] = '@testing-library/user-event'
+    if (event === 'keydown' && eventData.enterKeyPressed) {
+      mainLine = `await ${userEvent}.keyboard('{enter}')`
     }
+
+    requiredImports[userEvent] = '@testing-library/user-event'
   }
 
   const importCode = Object.entries(requiredImports).map(([importName, from]) => {
@@ -185,10 +180,17 @@ export async function generateCodeFromInput(
     return `const { ${importName} } = globalThis.require('${from}');`
   }).join('\n')
 
+  const code = [mainLine]
+
+  // Clear the input before typing when the 'clearBeforeType' flag is set
+  if (event === 'type' && eventData.clearBeforeType) {
+    code.unshift(`await ${userEvent}.clear(${selector})`)
+  }
+
   // The fireEvent or userEvent statement to run in the debugger.
   // May be slightly different than the code that is actually generated for the user.
   const debugEventStatement = (() => {
-    const result = code.replace(/\s*await/, '') // No 'awaits' allowed in debug expressions
+    const result = code.map(line => line.replace(/\s*await/, '')).join('\n') // No 'awaits' allowed in debug expressions
 
     // When writing react tests with userEvent v13, wrap in 'act'.
     if (testLibrary === '@testing-library/react' && !useFireEvent) {
diff --git a/packages/extension/src/recorder/perform-edit.ts b/packages/extension/src/recorder/perform-edit.ts
index 9267c4f..8e19d64 100644
--- a/packages/extension/src/recorder/perform-edit.ts
+++ b/packages/extension/src/recorder/perform-edit.ts
@@ -58,7 +58,7 @@ export async function performEdit(
           return [line1, line2].map(it => it.text.match(/^\s*/)?.[0] || '').sort((a, b) => b.length - a.length)[0] || ''
         })()
 
-        code = `${indent}${code}`
+        code = `${indent}${code}\n`
 
         editBuilder.insert(position, code)
       }
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index 0c2461c..d9eb8e7 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -104,7 +104,7 @@ export function startRecorderCodeGenSession(
       queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
       useExpect: ExpectStatementType | undefined,
       useFireEvent: boolean | undefined,
-    ): Promise<[number, string] | null> => {
+    ): Promise<[number, string[]] | null> => {
       const pausedLocation = await debuggerTracker.getPausedLocation()
       if (!pausedLocation) {
         return null
@@ -127,7 +127,9 @@ export function startRecorderCodeGenSession(
       panelController.flushPatches()
 
       // Add the fireEvent code
-      addInsertion(pausedLocation.lineNumber, `${code}\n`, requiredImports)
+      for (const line of code) {
+        addInsertion(pausedLocation.lineNumber, line, requiredImports)
+      }
 
       return [pausedLocation.lineNumber, code] as const
     },
diff --git a/packages/web-view-vite/src/recorder/recorder.ts b/packages/web-view-vite/src/recorder/recorder.ts
index 32ecb4c..c1e47a7 100644
--- a/packages/web-view-vite/src/recorder/recorder.ts
+++ b/packages/web-view-vite/src/recorder/recorder.ts
@@ -115,6 +115,7 @@ export function createRecorder(shadowHost: HTMLDivElement) {
         if (target.type === 'text') {
           const text = target.value
           eventData.text = text
+          eventData.clearBeforeType = focusedInputHadText
         }
       }
     }
@@ -171,6 +172,8 @@ export function createRecorder(shadowHost: HTMLDivElement) {
     setCodeInsertions(insertions)
   }
 
+  let focusedInputHadText = false
+
   // When recording, listen to events in the shadow root and generate code for them.
   createEffect(() => {
     const root = rootElement()
@@ -178,6 +181,18 @@ export function createRecorder(shadowHost: HTMLDivElement) {
       return
     }
     if (isRecording()) {
+      // Check if a focused input has text before you start typing into it
+      makeEventListener(root, 'focus', (e: Event) => {
+        const target = e.target
+        if (
+          (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
+          && target.value
+        ) {
+          focusedInputHadText = true
+        }
+      }, { capture: true })
+
+      // Capture input events to be recorded as test code
       for (const eventType of ['click', 'submit', 'change', 'keydown'] as const) {
         makeEventListener(root, eventType, async (e: Event) => {
           let target = e.target
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 87493a0..8c4be87 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -129,7 +129,7 @@ test.describe('Record TodoList test, Jest + React', () => {
 
     // Check for the generated code in the editor; Make sure indexes are used for the checkboxes and buttons
     await page.getByText(`await userEvent.click(screen.getAllByRole('checkbox', { name: /^toggle done$/i })[1])`).waitFor()
-    await page.getByText(`await userEvent.click(screen.getAllByRole('button', { name: /^delete$/i })[0])`).waitFor()
+    await page.getByText(`await userEvent.click(screen.getAllByRole('button', { name: /^delete$/i })[0])`).first().waitFor()
     await page.getByText(`expect(screen.getByText(/^1 done$/i))`).waitFor()
   })
 })

From aae76302a914cff8468971213c96389cfe9e94a7 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 30 Oct 2025 17:30:07 -0400
Subject: [PATCH 87/98] recorder

- move fn params into object
---
 .../src/recorder/generate-code-from-input.ts  | 22 +++++++-------
 .../src/recorder/recorder-codegen-session.ts  | 30 +++++++++----------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index a8c4347..910299e 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -1,23 +1,21 @@
 import path from 'pathe'
-import type { z } from 'zod/mini'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
-import type { ExpectStatementType, zRecordedEventData } from '../panel-controller/panel-router'
-import type { SerializedRegexp } from './recorder-codegen-session'
+import type { RecordInputAsCodeParams } from './recorder-codegen-session'
 
 export async function generateCodeFromInput(
   hasUserEventLib: boolean,
   testLibrary: TestingLibrary,
   testFramework: SupportedFramework,
-
-  event: string,
-  eventData: z.infer<typeof zRecordedEventData>,
-  findMethod: string,
-  queryArg0: string | SerializedRegexp,
-  queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
-
-  useExpect: ExpectStatementType | undefined,
-  useFireEvent: boolean | undefined,
+  {
+    event,
+    eventData,
+    findMethod,
+    queryArg0,
+    queryOptions,
+    useExpect,
+    useFireEvent,
+  }: RecordInputAsCodeParams,
 ) {
   const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
     (result, entry) => {
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index d9eb8e7..67bbec4 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -1,13 +1,13 @@
+import path from 'pathe'
 import * as vscode from 'vscode'
 import * as z from 'zod/mini'
-import path from 'pathe'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { PanelController } from '../panel-controller/panel-controller'
 import type { ExpectStatementType, zRecordedEventData } from '../panel-controller/panel-router'
 import type { DebuggerTracker } from '../util/debugger-tracker'
-import { performEdit } from './perform-edit'
 import { generateCodeFromInput } from './generate-code-from-input'
+import { performEdit } from './perform-edit'
 
 export type RecorderCodeGenSession = Awaited<ReturnType<typeof startRecorderCodeGenSession>>
 
@@ -19,6 +19,16 @@ export const zSerializedRegexp = z.object({
   value: z.string(),
 })
 
+export interface RecordInputAsCodeParams {
+  event: string
+  eventData: z.infer<typeof zRecordedEventData>
+  findMethod: string
+  queryArg0: string | SerializedRegexp
+  queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined
+  useExpect: ExpectStatementType | undefined
+  useFireEvent: boolean | undefined
+}
+
 export function startRecorderCodeGenSession(
   testFile: string,
   testFramework: SupportedFramework,
@@ -97,13 +107,7 @@ export function startRecorderCodeGenSession(
   return {
     recordInputAsCode: async (
       debuggerTracker: DebuggerTracker,
-      event: string,
-      eventData: z.infer<typeof zRecordedEventData>,
-      findMethod: string,
-      queryArg0: string | SerializedRegexp,
-      queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined,
-      useExpect: ExpectStatementType | undefined,
-      useFireEvent: boolean | undefined,
+      recordInputAsCodeParams: RecordInputAsCodeParams,
     ): Promise<[number, string[]] | null> => {
       const pausedLocation = await debuggerTracker.getPausedLocation()
       if (!pausedLocation) {
@@ -114,13 +118,7 @@ export function startRecorderCodeGenSession(
         hasUserEventLib,
         testLibrary,
         testFramework,
-        event,
-        eventData,
-        findMethod,
-        queryArg0,
-        queryOptions,
-        useExpect,
-        useFireEvent,
+        recordInputAsCodeParams,
       )
 
       await debuggerTracker.runDebugExpression(debugExpression)

From 8289e46bb5e27d1c790ac7b2852cc9d17f5685f2 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 30 Oct 2025 17:35:29 -0400
Subject: [PATCH 88/98] fix type error

---
 .../src/panel-controller/panel-router.ts       | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 80e833c..d4eaccc 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -218,17 +218,19 @@ export const panelRouter = t.router({
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const { event, eventData, query: [method, [queryArg0, queryOptions]], useExpect, useFireEvent } = input
+      const { event, eventData, query: [findMethod, [queryArg0, queryOptions]], useExpect, useFireEvent } = input
       const recorderCodeGenSession = ctx.recorderCodeGenSession()
       const _insertion = await recorderCodeGenSession?.recordInputAsCode(
         ctx.debuggerTracker,
-        event,
-        eventData,
-        method,
-        queryArg0,
-        queryOptions,
-        useExpect ?? undefined,
-        useFireEvent,
+        {
+          event,
+          eventData,
+          findMethod,
+          queryArg0,
+          queryOptions,
+          useExpect,
+          useFireEvent,
+        },
       )
       return recorderCodeGenSession?.insertions
     }),

From 653da6b7ac6fba45d2acbb831d984f2de80fc9ba Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 30 Oct 2025 19:39:05 -0400
Subject: [PATCH 89/98] recorder

add unit tests for recorder codegen
---
 .../src/recorder/generate-code-from-input.ts  |  20 +-
 .../src/recorder/recorder-codegen-session.ts  |   9 +-
 packages/extension/test/compat.test.ts        |   1 -
 .../create-ui-test-code.test.ts               |   6 +-
 .../recorder/generate-code-from-input.test.ts | 218 ++++++++++++++++++
 5 files changed, 239 insertions(+), 15 deletions(-)
 rename packages/extension/test/{ => recorder}/create-ui-test-code.test.ts (86%)
 create mode 100644 packages/extension/test/recorder/generate-code-from-input.test.ts

diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index 910299e..a67b63b 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -1,12 +1,18 @@
-import path from 'pathe'
 import type { SupportedFramework } from '../framework-support/detect-test-framework'
 import type { TestingLibrary } from '../framework-support/detect-test-library'
 import type { RecordInputAsCodeParams } from './recorder-codegen-session'
 
-export async function generateCodeFromInput(
+export interface RecorderGeneratedCode {
+  code: string[]
+  debugExpression: string
+  requiredImports: Record<string, string>
+}
+
+export function generateCodeFromInput(
   hasUserEventLib: boolean,
   testLibrary: TestingLibrary,
   testFramework: SupportedFramework,
+  userEventLibPath: string,
   {
     event,
     eventData,
@@ -16,7 +22,7 @@ export async function generateCodeFromInput(
     useExpect,
     useFireEvent,
   }: RecordInputAsCodeParams,
-) {
+): RecorderGeneratedCode {
   const parsedQueryOptions = queryOptions && Object.entries(queryOptions).reduce(
     (result, entry) => {
       const [key, val] = entry
@@ -172,11 +178,11 @@ export async function generateCodeFromInput(
     // Newer versions use async code e.g. `await userEvent.click(...);`,
     // which fail when running through the debugger's 'evaluate' request.
     if (from === '@testing-library/user-event') {
-      from = path.join(__dirname, 'user-event-13.js')
+      from = userEventLibPath
       return `const ${importName} = globalThis.require('${from}').default;`
     }
     return `const { ${importName} } = globalThis.require('${from}');`
-  }).join('\n')
+  }).filter(Boolean).join('\n')
 
   const code = [mainLine]
 
@@ -188,10 +194,10 @@ export async function generateCodeFromInput(
   // The fireEvent or userEvent statement to run in the debugger.
   // May be slightly different than the code that is actually generated for the user.
   const debugEventStatement = (() => {
-    const result = code.map(line => line.replace(/\s*await/, '')).join('\n') // No 'awaits' allowed in debug expressions
+    const result = code.map(line => line.replace(/\s*await\s*/, '')).join('\n') // No 'awaits' allowed in debug expressions
 
     // When writing react tests with userEvent v13, wrap in 'act'.
-    if (testLibrary === '@testing-library/react' && !useFireEvent) {
+    if (testLibrary === '@testing-library/react' && !useFireEvent && !useExpect) {
       return `globalThis.require('react').act(() => { ${result} });`
     }
     return result
diff --git a/packages/extension/src/recorder/recorder-codegen-session.ts b/packages/extension/src/recorder/recorder-codegen-session.ts
index 67bbec4..ae6fcfe 100644
--- a/packages/extension/src/recorder/recorder-codegen-session.ts
+++ b/packages/extension/src/recorder/recorder-codegen-session.ts
@@ -24,9 +24,9 @@ export interface RecordInputAsCodeParams {
   eventData: z.infer<typeof zRecordedEventData>
   findMethod: string
   queryArg0: string | SerializedRegexp
-  queryOptions: Record<string, string | boolean | SerializedRegexp> | undefined
-  useExpect: ExpectStatementType | undefined
-  useFireEvent: boolean | undefined
+  queryOptions?: Record<string, string | boolean | SerializedRegexp>
+  useExpect?: ExpectStatementType
+  useFireEvent?: boolean
 }
 
 export function startRecorderCodeGenSession(
@@ -114,10 +114,11 @@ export function startRecorderCodeGenSession(
         return null
       }
 
-      const { code, debugExpression, requiredImports } = await generateCodeFromInput(
+      const { code, debugExpression, requiredImports } = generateCodeFromInput(
         hasUserEventLib,
         testLibrary,
         testFramework,
+        path.join(__dirname, 'user-event-13.js'),
         recordInputAsCodeParams,
       )
 
diff --git a/packages/extension/test/compat.test.ts b/packages/extension/test/compat.test.ts
index d54cc0f..d2c7460 100644
--- a/packages/extension/test/compat.test.ts
+++ b/packages/extension/test/compat.test.ts
@@ -1,5 +1,4 @@
 import { execa } from 'execa'
-import { findUp } from 'find-up'
 import getPort from 'get-port'
 import path from 'pathe'
 import { beforeAll, describe, expect, it } from 'vitest'
diff --git a/packages/extension/test/create-ui-test-code.test.ts b/packages/extension/test/recorder/create-ui-test-code.test.ts
similarity index 86%
rename from packages/extension/test/create-ui-test-code.test.ts
rename to packages/extension/test/recorder/create-ui-test-code.test.ts
index 7edd9d5..6c3efb6 100644
--- a/packages/extension/test/create-ui-test-code.test.ts
+++ b/packages/extension/test/recorder/create-ui-test-code.test.ts
@@ -1,8 +1,8 @@
 import { parseSync } from 'oxc-parser'
 import { describe, expect, it } from 'vitest'
-import type { SupportedFramework } from '../src/framework-support/detect-test-framework'
-import type { TestingLibrary } from '../src/framework-support/detect-test-library'
-import { createUITestCode } from '../src/recorder/create-new-test-file/create-ui-test-code'
+import { createUITestCode } from '../../src/recorder/create-new-test-file/create-ui-test-code'
+import type { SupportedFramework } from '../../src/framework-support/detect-test-framework'
+import type { TestingLibrary } from '../../src/framework-support/detect-test-library'
 
 const program = parseSync('my-component.ts', 'export function MyComponent() {}', {}).program
 
diff --git a/packages/extension/test/recorder/generate-code-from-input.test.ts b/packages/extension/test/recorder/generate-code-from-input.test.ts
new file mode 100644
index 0000000..e4cf254
--- /dev/null
+++ b/packages/extension/test/recorder/generate-code-from-input.test.ts
@@ -0,0 +1,218 @@
+import { expect, test } from 'vitest'
+import type { RecorderGeneratedCode } from '../../src/recorder/generate-code-from-input'
+import { generateCodeFromInput } from '../../src/recorder/generate-code-from-input'
+
+const userEventLibPath = '/fakepath/user-event-13.js'
+
+test('change an empty text input: vitest', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'change',
+      eventData: { text: 'test-input' },
+      findMethod: 'getByRole',
+      queryArg0: 'textbox',
+      queryOptions: { name: { type: 'regexp', value: '/^my-input$/i' } },
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      `await userEvent.type(screen.getByRole('textbox', { name: /^my-input$/i }), 'test-input')`,
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+const userEvent = globalThis.require('/fakepath/user-event-13.js').default;
+globalThis.require('react').act(() => { userEvent.type(screen.getByRole('textbox', { name: /^my-input$/i }), 'test-input') });
+})()
+`,
+    requiredImports: {
+      screen: '@testing-library/react',
+      userEvent: '@testing-library/user-event',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('change a pre-filled text input', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'change',
+      eventData: { text: 'test-input', clearBeforeType: true },
+      findMethod: 'getByRole',
+      queryArg0: 'textbox',
+      queryOptions: { name: { type: 'regexp', value: '/^my-input$/i' } },
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      `await userEvent.clear(screen.getByRole('textbox', { name: /^my-input$/i }))`,
+      `await userEvent.type(screen.getByRole('textbox', { name: /^my-input$/i }), 'test-input')`,
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+const userEvent = globalThis.require('/fakepath/user-event-13.js').default;
+globalThis.require('react').act(() => { userEvent.clear(screen.getByRole('textbox', { name: /^my-input$/i }))
+userEvent.type(screen.getByRole('textbox', { name: /^my-input$/i }), 'test-input') });
+})()
+`,
+    requiredImports: {
+      screen: '@testing-library/react',
+      userEvent: '@testing-library/user-event',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('generate an expect statement: vitest', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: {},
+      findMethod: 'getByRole',
+      queryArg0: 'button',
+      queryOptions: { name: 'my-button' },
+      useExpect: 'toBeEnabled',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'button\', { name: \'my-button\' })).toBeEnabled()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+expect(screen.getByRole('button', { name: 'my-button' })).toBeEnabled()
+})()
+`,
+    requiredImports: {
+      expect: 'vitest',
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('generate an expect statement: jest', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'jest',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: {},
+      findMethod: 'getByRole',
+      queryArg0: 'button',
+      queryOptions: { name: 'my-button' },
+      useExpect: 'toBeEnabled',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'button\', { name: \'my-button\' })).toBeEnabled()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+expect(screen.getByRole('button', { name: 'my-button' })).toBeEnabled()
+})()
+`,
+    requiredImports: {
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('generate an expect statement: bun test api', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'bun',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: {},
+      findMethod: 'getByRole',
+      queryArg0: 'button',
+      queryOptions: { name: 'my-button' },
+      useExpect: 'toBeEnabled',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'button\', { name: \'my-button\' })).toBeEnabled()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+const { expect } = globalThis.require('bun:test');
+expect(screen.getByRole('button', { name: 'my-button' })).toBeEnabled()
+})()
+`,
+    requiredImports: {
+      expect: 'bun:test',
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('generate a mouseup event with fireEvent', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'mouseUp',
+      eventData: {},
+      findMethod: 'getByRole',
+      queryArg0: 'button',
+      queryOptions: { name: 'my-button' },
+      useFireEvent: true,
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'fireEvent.mouseUp(screen.getByRole(\'button\', { name: \'my-button\' }))',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+const { fireEvent } = globalThis.require('@testing-library/react');
+fireEvent.mouseUp(screen.getByRole('button', { name: 'my-button' }))
+})()
+`,
+    requiredImports: {
+      fireEvent: '@testing-library/react',
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})

From 34e9c57af2b17016b285bd5a6f613e0367bef579 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Thu, 30 Oct 2025 20:18:59 -0400
Subject: [PATCH 90/98] recorder

tests
---
 .../recorder/generate-code-from-input.test.ts | 72 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/packages/extension/test/recorder/generate-code-from-input.test.ts b/packages/extension/test/recorder/generate-code-from-input.test.ts
index e4cf254..83532bb 100644
--- a/packages/extension/test/recorder/generate-code-from-input.test.ts
+++ b/packages/extension/test/recorder/generate-code-from-input.test.ts
@@ -4,7 +4,7 @@ import { generateCodeFromInput } from '../../src/recorder/generate-code-from-inp
 
 const userEventLibPath = '/fakepath/user-event-13.js'
 
-test('change an empty text input: vitest', () => {
+test('change an empty text input: vitest + react', () => {
   const result = generateCodeFromInput(
     true,
     '@testing-library/react',
@@ -39,6 +39,41 @@ globalThis.require('react').act(() => { userEvent.type(screen.getByRole('textbox
   expect(result).toEqual(expected)
 })
 
+test('change an empty text input: vitest + solid', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@solidjs/testing-library',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'change',
+      eventData: { text: 'test-input' },
+      findMethod: 'getByRole',
+      queryArg0: 'textbox',
+      queryOptions: { name: { type: 'regexp', value: '/^my-input$/i' } },
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      `await userEvent.type(screen.getByRole('textbox', { name: /^my-input$/i }), 'test-input')`,
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@solidjs/testing-library');
+const userEvent = globalThis.require('/fakepath/user-event-13.js').default;
+userEvent.type(screen.getByRole('textbox', { name: /^my-input$/i }), 'test-input')
+})()
+`,
+    requiredImports: {
+      screen: '@solidjs/testing-library',
+      userEvent: '@testing-library/user-event',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
 test('change a pre-filled text input', () => {
   const result = generateCodeFromInput(
     true,
@@ -111,6 +146,41 @@ expect(screen.getByRole('button', { name: 'my-button' })).toBeEnabled()
   expect(result).toEqual(expected)
 })
 
+test('generate an expect statement: vitest + solid', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@solidjs/testing-library',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: {},
+      findMethod: 'getByRole',
+      queryArg0: 'button',
+      queryOptions: { name: 'my-button' },
+      useExpect: 'toBeEnabled',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'button\', { name: \'my-button\' })).toBeEnabled()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@solidjs/testing-library');
+expect(screen.getByRole('button', { name: 'my-button' })).toBeEnabled()
+})()
+`,
+    requiredImports: {
+      expect: 'vitest',
+      screen: '@solidjs/testing-library',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
 test('generate an expect statement: jest', () => {
   const result = generateCodeFromInput(
     true,

From acea464ebd290f5658c431dca071e92bad03ed32 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 3 Nov 2025 21:42:18 -0500
Subject: [PATCH 91/98] recorder

add 'toHaveTextContent' expect statement to menu
---
 .../src/panel-controller/panel-router.ts      |  2 +-
 .../src/recorder/generate-code-from-input.ts  | 13 ++++++++---
 .../src/recorder/recorder-context-menu.tsx    | 22 ++++++++++++++-----
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index d4eaccc..5234f4e 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -37,7 +37,7 @@ export const zRecordedEventData = z.object({
   clearBeforeType: z.optional(z.boolean()), // Clear the input before typing
 })
 
-const zExpectStatementType = z.enum(['minimal', 'toHaveValue', 'toBeEnabled'])
+const zExpectStatementType = z.enum(['minimal', 'toHaveValue', 'toBeEnabled', 'toHaveTextContent'])
 export type ExpectStatementType = z.infer<typeof zExpectStatementType>
 
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index a67b63b..0757819 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -92,11 +92,18 @@ export function generateCodeFromInput(
   if (useExpect) {
     // Generate an 'expect' statement based on the selected type
     mainLine = (() => {
+      function escapeQuotes(str: string) {
+        return str.replaceAll(/['\\]/g, (match) => {
+          return `\\${match}`
+        })
+      }
       switch (useExpect) {
+        case 'toHaveTextContent': {
+          const textContent = escapeQuotes(eventData.text ?? '')
+          return `${expect}(${selector}).toHaveTextContent('${textContent}')`
+        }
         case 'toHaveValue': {
-          const value = (eventData.text ?? '').replaceAll(/['\\]/g, (match) => {
-            return `\\${match}`
-          })
+          const value = escapeQuotes(eventData.text ?? '')
           return `${expect}(${selector}).toHaveValue('${value}')`
         }
         case 'toBeEnabled': {
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index b44cd8d..88e3826 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -46,7 +46,7 @@ function RecorderContextMenu(
     { useExpect, useFireEvent, processInput }: {
       useExpect?: ExpectStatementType
       useFireEvent?: boolean
-      processInput?: (input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>
+      processInput?: (input: RecorderInput) => RecorderInput
     } = {},
   ) {
     const target = targetElement()
@@ -109,7 +109,7 @@ function RecorderContextMenu(
                             onClick={() => submitExpectStatement(statement, processInput)}
                           >
                             <span>{statement.title}</span>
-                            {statement.shortcut && <ContextMenuShortcut>{statement.shortcut}</ContextMenuShortcut>}
+                            {statement.shortcutLabel && <ContextMenuShortcut>{statement.shortcutLabel}</ContextMenuShortcut>}
                           </ContextMenuItem>
                         )}
                       </Show>
@@ -168,12 +168,14 @@ function RecorderContextMenu(
   )
 }
 
-type RecorderInputChanger = (input: inferProcedureInput<PanelRouter['recordInputAsCode']>) => inferProcedureInput<PanelRouter['recordInputAsCode']>
+type RecorderInput = inferProcedureInput<PanelRouter['recordInputAsCode']>
+
+type RecorderInputChanger = (input: RecorderInput) => RecorderInput
 
 interface ExpectStatementDef {
   title: string
   type: ExpectStatementType
-  shortcut?: JSX.Element
+  shortcutLabel?: JSX.Element
   handler?: (e: Element) => (RecorderInputChanger | void) | boolean
 }
 
@@ -182,7 +184,17 @@ const EXPECT_STATEMENTS: ExpectStatementDef[] = [
   {
     title: 'expect(element)',
     type: 'minimal',
-    shortcut: 'Alt+Click',
+    shortcutLabel: 'Alt+Click',
+  },
+  {
+    title: '.toHaveTextContent(...)',
+    type: 'toHaveTextContent',
+    handler: (el) => {
+      return (input) => {
+        input.eventData.text = el.textContent
+        return input
+      }
+    },
   },
   {
     title: `.toHaveValue(...)`,

From 35bc3d1a65801902346039a6934b154c08953322 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 3 Nov 2025 22:06:10 -0500
Subject: [PATCH 92/98] recorder

generate an 'expect' statement in the e2e test
---
 test/e2e-recorder.test.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 8c4be87..2e34718 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -88,6 +88,12 @@ test.describe('Record TodoList test, Jest + React', () => {
   test('Record TodoList test, Jest + React', async ({ browser }) => {
     const { page, replicaPanel } = await startRecorderTest(browser, 'jest-nextjs-minimal', 'TodoList.test.tsx', true)
 
+    // Generate an 'expect/toHaveTextContent' statement for the initial no-todos-message <p> tag
+    await replicaPanel.getByLabel('no-todos-message').click({
+      button: 'right',
+    })
+    await replicaPanel.getByText('.toHaveTextContent(...)').click()
+
     // Add todos
     await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).click()
     await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 1')
@@ -97,7 +103,7 @@ test.describe('Record TodoList test, Jest + React', () => {
     await replicaPanel.getByRole('textbox', { name: 'Add a new todo' }).fill('todo 3')
     await page.keyboard.press('Enter')
 
-    // Initial text
+    // Text after adding 3 todos
     await replicaPanel.getByText('0 done').waitFor()
     await replicaPanel.getByText('3 in progress').waitFor()
 
@@ -130,6 +136,7 @@ test.describe('Record TodoList test, Jest + React', () => {
     // Check for the generated code in the editor; Make sure indexes are used for the checkboxes and buttons
     await page.getByText(`await userEvent.click(screen.getAllByRole('checkbox', { name: /^toggle done$/i })[1])`).waitFor()
     await page.getByText(`await userEvent.click(screen.getAllByRole('button', { name: /^delete$/i })[0])`).first().waitFor()
+    await page.getByText(`expect(screen.getByRole('paragraph', { name: /^no\\-todos\\-message$/i })).toHaveTextContent('No todos yet. Add one to get started.')`).first().waitFor()
     await page.getByText(`expect(screen.getByText(/^1 done$/i))`).waitFor()
   })
 })

From 60801ea251330763050c0ab874afdb924eaa4e0d Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 3 Nov 2025 22:11:32 -0500
Subject: [PATCH 93/98] recorder tweaks

---
 packages/web-view-vite/src/components/Toolbar.tsx      | 3 +--
 packages/web-view-vite/src/recorder/recorder-panel.tsx | 4 ++++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index 16decda..c53ee5b 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -86,8 +86,7 @@ export function Toolbar() {
               <ul class="list-disc list-inside space-y-1">
                 <li>'Step Over' with the debugger to where you want to generate new code.</li>
                 <li>Left-click an element or change a text input to generate code.</li>
-                <li>Right-click an element to generate other mouse events.</li>
-                <li>Alt+Click on an element to generate an 'expect' statement.</li>
+                <li>Right-click an element to generate 'expect' statements or other mouse events.</li>
                 <li>When you end or restart the test, the generated code is inserted into the test file.</li>
                 <li>
                   Note: Your UI is not actually running in this panel, so certain interactions might not behave as expected.
diff --git a/packages/web-view-vite/src/recorder/recorder-panel.tsx b/packages/web-view-vite/src/recorder/recorder-panel.tsx
index 2ecbab7..6e3eb36 100644
--- a/packages/web-view-vite/src/recorder/recorder-panel.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-panel.tsx
@@ -102,6 +102,10 @@ export function RecorderPanel() {
 
 /** When a new code line is added, scroll to it. */
 function setupCodePanel(el: HTMLDivElement) {
+  queueMicrotask(() => {
+    el.scrollTop = el.scrollHeight
+  })
+
   createEffect(on(recorder.codeInsertions, (current, prev) => {
     if (current && prev) {
       for (const lineNum of Object.keys(current)) {

From c9cfddea32f073a525507796742790c16cb15efc Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 3 Nov 2025 23:11:19 -0500
Subject: [PATCH 94/98] recorder

- add 'toBeChecked' expect statement
- add 'not' version of 'checked' and 'enabled' expect statements
- add a hack to allow right-clicking on the disabled buttons in the recorder
---
 .../src/panel-controller/panel-router.ts      |   4 +-
 .../src/recorder/generate-code-from-input.ts  |   7 +-
 .../recorder/generate-code-from-input.test.ts | 140 ++++++++++++++++++
 .../src/recorder/recorder-context-menu.tsx    |  45 +++++-
 4 files changed, 189 insertions(+), 7 deletions(-)

diff --git a/packages/extension/src/panel-controller/panel-router.ts b/packages/extension/src/panel-controller/panel-router.ts
index 5234f4e..7c2eeff 100644
--- a/packages/extension/src/panel-controller/panel-router.ts
+++ b/packages/extension/src/panel-controller/panel-router.ts
@@ -35,9 +35,11 @@ export const zRecordedEventData = z.object({
   enterKeyPressed: z.optional(z.boolean()), // Used for Enter keydown events
   indexIfMultipleFound: z.optional(z.number()), // Used when there are multiple elements for the same query
   clearBeforeType: z.optional(z.boolean()), // Clear the input before typing
+  checked: z.optional(z.boolean()), // Used for expect/toBeChecked statements
+  enabled: z.optional(z.boolean()), // Used for expect/toBeEnabled statements
 })
 
-const zExpectStatementType = z.enum(['minimal', 'toHaveValue', 'toBeEnabled', 'toHaveTextContent'])
+const zExpectStatementType = z.enum(['minimal', 'toHaveValue', 'toBeEnabled', 'toHaveTextContent', 'toBeChecked'])
 export type ExpectStatementType = z.infer<typeof zExpectStatementType>
 
 /** Defines RPCs callable from the WebView to the VSCode Extension. */
diff --git a/packages/extension/src/recorder/generate-code-from-input.ts b/packages/extension/src/recorder/generate-code-from-input.ts
index 0757819..3a715de 100644
--- a/packages/extension/src/recorder/generate-code-from-input.ts
+++ b/packages/extension/src/recorder/generate-code-from-input.ts
@@ -107,7 +107,12 @@ export function generateCodeFromInput(
           return `${expect}(${selector}).toHaveValue('${value}')`
         }
         case 'toBeEnabled': {
-          return `${expect}(${selector}).toBeEnabled()`
+          const not = eventData.enabled ? '' : 'not.'
+          return `${expect}(${selector}).${not}toBeEnabled()`
+        }
+        case 'toBeChecked': {
+          const not = eventData.checked ? '' : 'not.'
+          return `${expect}(${selector}).${not}toBeChecked()`
         }
         case 'minimal':
         default:
diff --git a/packages/extension/test/recorder/generate-code-from-input.test.ts b/packages/extension/test/recorder/generate-code-from-input.test.ts
index 83532bb..948103c 100644
--- a/packages/extension/test/recorder/generate-code-from-input.test.ts
+++ b/packages/extension/test/recorder/generate-code-from-input.test.ts
@@ -286,3 +286,143 @@ fireEvent.mouseUp(screen.getByRole('button', { name: 'my-button' }))
 
   expect(result).toEqual(expected)
 })
+
+test('generate toBeChecked expect statement', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: { checked: true },
+      findMethod: 'getByRole',
+      queryArg0: 'checkbox',
+      queryOptions: { name: 'my-checkbox' },
+      useExpect: 'toBeChecked',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'checkbox\', { name: \'my-checkbox\' })).toBeChecked()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+expect(screen.getByRole('checkbox', { name: 'my-checkbox' })).toBeChecked()
+})()
+`,
+    requiredImports: {
+      expect: 'vitest',
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('generate not.toBeChecked expect statement', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: { checked: false },
+      findMethod: 'getByRole',
+      queryArg0: 'checkbox',
+      queryOptions: { name: 'my-checkbox' },
+      useExpect: 'toBeChecked',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'checkbox\', { name: \'my-checkbox\' })).not.toBeChecked()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+expect(screen.getByRole('checkbox', { name: 'my-checkbox' })).not.toBeChecked()
+})()
+`,
+    requiredImports: {
+      expect: 'vitest',
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('generate toBeEnabled expect statement', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: { enabled: true },
+      findMethod: 'getByRole',
+      queryArg0: 'button',
+      queryOptions: { name: 'my-button' },
+      useExpect: 'toBeEnabled',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'button\', { name: \'my-button\' })).toBeEnabled()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+expect(screen.getByRole('button', { name: 'my-button' })).toBeEnabled()
+})()
+`,
+    requiredImports: {
+      expect: 'vitest',
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
+
+test('generate not.toBeEnabled expect statement', () => {
+  const result = generateCodeFromInput(
+    true,
+    '@testing-library/react',
+    'vitest',
+    userEventLibPath,
+    {
+      event: 'click',
+      eventData: { enabled: false },
+      findMethod: 'getByRole',
+      queryArg0: 'button',
+      queryOptions: { name: 'my-button' },
+      useExpect: 'toBeEnabled',
+    },
+  )
+
+  const expected: RecorderGeneratedCode = {
+    code: [
+      'expect(screen.getByRole(\'button\', { name: \'my-button\' })).not.toBeEnabled()',
+    ],
+    debugExpression: `
+(() => {
+const { screen } = globalThis.require('@testing-library/react');
+expect(screen.getByRole('button', { name: 'my-button' })).not.toBeEnabled()
+})()
+`,
+    requiredImports: {
+      expect: 'vitest',
+      screen: '@testing-library/react',
+    },
+  }
+
+  expect(result).toEqual(expected)
+})
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index 88e3826..f3dac72 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -3,6 +3,7 @@ import type { inferProcedureInput } from '@trpc/server'
 import type { JSX } from 'solid-js'
 import { For, Show, createSignal } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
+import { makeEventListener } from '@solid-primitives/event-listener'
 import type { ExpectStatementType, PanelRouter } from '../../../extension/src/panel-controller/panel-router'
 import { recorder, shadowHost } from '../App'
 import { HighlightedNode } from '../components/HighlightedNode'
@@ -80,6 +81,19 @@ function RecorderContextMenu(
     close()
   }
 
+  // Allow right-clicking on disabled button and input elements
+  if (shadowHost.shadowRoot) {
+    makeEventListener(shadowHost.shadowRoot, 'contextmenu', (e) => {
+      if (e instanceof MouseEvent && e.target instanceof Element) {
+        const element = e.target.closest('button:disabled, input:disabled')
+        if (element) {
+          e.preventDefault()
+          updateTargetElement(e)
+        }
+      }
+    })
+  }
+
   return (
     <>
       <ContextMenu
@@ -108,7 +122,7 @@ function RecorderContextMenu(
                           <ContextMenuItem
                             onClick={() => submitExpectStatement(statement, processInput)}
                           >
-                            <span>{statement.title}</span>
+                            <span>{typeof statement.title === 'function' ? statement.title(targetElement()) : statement.title}</span>
                             {statement.shortcutLabel && <ContextMenuShortcut>{statement.shortcutLabel}</ContextMenuShortcut>}
                           </ContextMenuItem>
                         )}
@@ -173,13 +187,13 @@ type RecorderInput = inferProcedureInput<PanelRouter['recordInputAsCode']>
 type RecorderInputChanger = (input: RecorderInput) => RecorderInput
 
 interface ExpectStatementDef {
-  title: string
+  title: string | ((el: Element) => string)
   type: ExpectStatementType
   shortcutLabel?: JSX.Element
   handler?: (e: Element) => (RecorderInputChanger | void) | boolean
 }
 
-/** Definitions of expect statements you can pick from in the context menu */
+/** Definitions of expect statements you can pick from in the context menu. */
 const EXPECT_STATEMENTS: ExpectStatementDef[] = [
   {
     title: 'expect(element)',
@@ -209,14 +223,33 @@ const EXPECT_STATEMENTS: ExpectStatementDef[] = [
     },
   },
   {
-    title: '.toBeEnabled()',
+    title: el => ((el instanceof HTMLInputElement || el instanceof HTMLButtonElement) && !el.disabled)
+      ? '.toBeEnabled()'
+      : '.not.toBeEnabled()',
     type: 'toBeEnabled',
     handler: (el) => {
       if (el instanceof HTMLInputElement
         || el instanceof HTMLTextAreaElement
         || el instanceof HTMLSelectElement
         || el instanceof HTMLButtonElement) {
-        return true
+        return (input) => {
+          input.eventData.enabled = !el.disabled
+          return input
+        }
+      }
+    },
+  },
+  {
+    title: el => (el instanceof HTMLInputElement && el.checked)
+      ? '.toBeChecked()'
+      : '.not.toBeChecked()',
+    type: 'toBeChecked',
+    handler: (el) => {
+      if (el instanceof HTMLInputElement && el.type === 'checkbox') {
+        return (input) => {
+          input.eventData.checked = el.checked
+          return input
+        }
       }
     },
   },
@@ -233,6 +266,8 @@ function enableSelectingDifferentNodeWhileMenuIsOpen(
     createInteractOutside({
       onPointerDownOutside: (customEvent) => {
         const target = customEvent.target
+
+        // Behave as usual when cliking on a context sub-menu
         if (target instanceof HTMLElement && target.closest('[data-ui-test-visualizer-menu-subcontent]')) {
           return
         }

From 440804c0281d12b89adb292c6a9042e1a667799c Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Mon, 3 Nov 2025 23:19:35 -0500
Subject: [PATCH 95/98] recorder

fix tests
---
 .../test/recorder/generate-code-from-input.test.ts        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/extension/test/recorder/generate-code-from-input.test.ts b/packages/extension/test/recorder/generate-code-from-input.test.ts
index 948103c..165d3fe 100644
--- a/packages/extension/test/recorder/generate-code-from-input.test.ts
+++ b/packages/extension/test/recorder/generate-code-from-input.test.ts
@@ -119,7 +119,7 @@ test('generate an expect statement: vitest', () => {
     userEventLibPath,
     {
       event: 'click',
-      eventData: {},
+      eventData: { enabled: true },
       findMethod: 'getByRole',
       queryArg0: 'button',
       queryOptions: { name: 'my-button' },
@@ -154,7 +154,7 @@ test('generate an expect statement: vitest + solid', () => {
     userEventLibPath,
     {
       event: 'click',
-      eventData: {},
+      eventData: { enabled: true },
       findMethod: 'getByRole',
       queryArg0: 'button',
       queryOptions: { name: 'my-button' },
@@ -189,7 +189,7 @@ test('generate an expect statement: jest', () => {
     userEventLibPath,
     {
       event: 'click',
-      eventData: {},
+      eventData: { enabled: true },
       findMethod: 'getByRole',
       queryArg0: 'button',
       queryOptions: { name: 'my-button' },
@@ -223,7 +223,7 @@ test('generate an expect statement: bun test api', () => {
     userEventLibPath,
     {
       event: 'click',
-      eventData: {},
+      eventData: { enabled: true },
       findMethod: 'getByRole',
       queryArg0: 'button',
       queryOptions: { name: 'my-button' },

From 3408332664ff628c7a0afb8659e3c2439842a863 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 8 Nov 2025 17:41:18 -0500
Subject: [PATCH 96/98] recorder

remove bad usage of aria label
---
 examples/jest-nextjs-minimal/components/TodoList.tsx | 2 +-
 test/e2e-recorder.test.ts                            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/jest-nextjs-minimal/components/TodoList.tsx b/examples/jest-nextjs-minimal/components/TodoList.tsx
index df58216..111e0fc 100644
--- a/examples/jest-nextjs-minimal/components/TodoList.tsx
+++ b/examples/jest-nextjs-minimal/components/TodoList.tsx
@@ -83,7 +83,7 @@ export function TodoList() {
         </div>
 
         {todos.length === 0 && (
-          <p aria-label="no-todos-message" className="text-center text-gray-400 text-sm mt-8">No todos yet. Add one to get started.</p>
+          <p className="text-center text-gray-400 text-sm mt-8">No todos yet. Add one to get started.</p>
         )}
       </div>
     </div>
diff --git a/test/e2e-recorder.test.ts b/test/e2e-recorder.test.ts
index 2e34718..e59fe43 100644
--- a/test/e2e-recorder.test.ts
+++ b/test/e2e-recorder.test.ts
@@ -89,7 +89,7 @@ test.describe('Record TodoList test, Jest + React', () => {
     const { page, replicaPanel } = await startRecorderTest(browser, 'jest-nextjs-minimal', 'TodoList.test.tsx', true)
 
     // Generate an 'expect/toHaveTextContent' statement for the initial no-todos-message <p> tag
-    await replicaPanel.getByLabel('no-todos-message').click({
+    await replicaPanel.getByText('No todos yet. Add one to get started.').click({
       button: 'right',
     })
     await replicaPanel.getByText('.toHaveTextContent(...)').click()
@@ -136,7 +136,7 @@ test.describe('Record TodoList test, Jest + React', () => {
     // Check for the generated code in the editor; Make sure indexes are used for the checkboxes and buttons
     await page.getByText(`await userEvent.click(screen.getAllByRole('checkbox', { name: /^toggle done$/i })[1])`).waitFor()
     await page.getByText(`await userEvent.click(screen.getAllByRole('button', { name: /^delete$/i })[0])`).first().waitFor()
-    await page.getByText(`expect(screen.getByRole('paragraph', { name: /^no\\-todos\\-message$/i })).toHaveTextContent('No todos yet. Add one to get started.')`).first().waitFor()
+    await page.getByText(`expect(screen.getByRole('paragraph')).toHaveTextContent('No todos yet. Add one to get started.')`).first().waitFor()
     await page.getByText(`expect(screen.getByText(/^1 done$/i))`).waitFor()
   })
 })

From d375d6c88a6495f1ba4556938b08874b22aecf01 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 8 Nov 2025 17:53:11 -0500
Subject: [PATCH 97/98] recorder

- remove spacing in toolbar
- disable asserting value in checkboxes / radios
---
 packages/web-view-vite/src/components/Toolbar.tsx            | 3 ---
 .../web-view-vite/src/recorder/recorder-context-menu.tsx     | 5 ++++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-view-vite/src/components/Toolbar.tsx b/packages/web-view-vite/src/components/Toolbar.tsx
index c53ee5b..7ffc153 100644
--- a/packages/web-view-vite/src/components/Toolbar.tsx
+++ b/packages/web-view-vite/src/components/Toolbar.tsx
@@ -47,9 +47,6 @@ export function Toolbar() {
           </ToolbarButton>
         )}
       />
-      <div class="h-10 w-10">
-        {/* Spacer */}
-      </div>
       <div class="flex [--button-padding-horizontal:0px] [--button-padding-vertical:0px]">
         <ToolbarButton
           onClick={() => recorder.toggle(!recorder.isRecording())}
diff --git a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
index f3dac72..ceacbf1 100644
--- a/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
+++ b/packages/web-view-vite/src/recorder/recorder-context-menu.tsx
@@ -214,7 +214,10 @@ const EXPECT_STATEMENTS: ExpectStatementDef[] = [
     title: `.toHaveValue(...)`,
     type: 'toHaveValue',
     handler: (el) => {
-      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+      if (
+        (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)
+        && !['checkbox', 'radio'].includes(el.type)
+      ) {
         return (input) => {
           input.eventData.text = el.value
           return input

From e121a73576aa325595eab12cc6b886495bacf651 Mon Sep 17 00:00:00 2001
From: PoffM <matp@live.ca>
Date: Sat, 8 Nov 2025 18:03:32 -0500
Subject: [PATCH 98/98] add changeset for recorder feature

---
 .changeset/bumpy-feet-bow.md | 5 +++++
 README.md                    | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/bumpy-feet-bow.md

diff --git a/.changeset/bumpy-feet-bow.md b/.changeset/bumpy-feet-bow.md
new file mode 100644
index 0000000..0a1a10c
--- /dev/null
+++ b/.changeset/bumpy-feet-bow.md
@@ -0,0 +1,5 @@
+---
+"ui-test-visualizer": minor
+---
+
+Add "Record input as code" feature
diff --git a/README.md b/README.md
index a4fe81e..a1cf380 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ Steps:
 
 - Click your UI elements, or change text inputs, and the extension will generate code for you to use in your test.
 
-- Alt+click to generate an `expect` statement for that element.
+- Right+click to generate `expect` statements or other mouse events.
 
 - The generated code is inserted into your test file when the test is ended or restarted.
 
@@ -79,14 +79,14 @@ This extension could fail to auto-build your source CSS files, in which case you
   - Vitest:
     - Adds a `--require` argument to the Vitest command.
   - Jest:
-    - Adds a `--setupFiles` argument to the Jest command in addition to any setupFiles you've already defined in your config.
+    - Adds a `--setupFiles` argument to the Jest command in addition to any setupFiles defined in your config.
+  - Bun:
+    - Adds a `--preload` argument to the `bun test` command in addition to any preloads defined in your bunfig.toml.
 
 - **Replicates the test DOM into a real DOM**: The extension then replicates those method calls and their arguments in a VSCode WebView (the side panel), which renders your UI in a real Chromium DOM. This panel only shows a **replica** of the test DOM without your UI's Javascript, so you can't interact with it using the mouse or keyboard.
 
 ## Caveats
 
-- **Can be slow to run until your first breakpoint**: Because of the code inserted at startup for watching the DOM and optionally loading your styles, your test can be slightly slower to startup than when debugging your tests normally with other test extensions.
-
 - **Possible de-synchronization**: The visual DOM replica gets updated incrementally as your test runs, but accurate synchronization relies on this extension's code to correctly handle every possible DOM mutation that happens in your UI. The DOM replication code is pretty thorough, even accounting for weird cases involving nested Shadow DOMs and Web Component lifecycles, but it's still possible for the visual replica to get out of sync with your actual test DOM. If this happens, you can click the panel's Refresh button to re-sync it.
 
 ## Contributing / Extension Development