Add @srfnstack/fntags-testing library, fix memory leaks, migrate unit tests

- Add fntags-testing package: thin wrapper over @testing-library/dom with
  render(), cleanup(), and re-exports of screen/fireEvent/waitFor/within
- Fix selectObserver leak: subscribeSelect now returns unsub, registered in
  activeRenderCleanups for automatic cleanup on parent bindAs re-render
- Fix conditional selectObserver cleanup in arrangeElements that skipped
  cleanup when replacement element lacked insertAdjacentElement (text nodes)
- Fix observer iteration safety: snapshot arrays before iterating to prevent
  skipped callbacks when subscribers modify the list during notification
- Fix bindChildren per-item subscription cleanup when nested inside bindAs
- Migrate all Cypress unit tests to vitest (keep docs e2e tests in Cypress)
- Add testing docs page to the docs site
- Make search bar collapsible (SVG icon that expands to input on click)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: beam_former

docs/header.js

@@ -46,7 +46,7 @@ export default header({ class: 'container text-center' },
     style: `border-bottom: solid 1px darkgray; background-color: ${primaryColor}; position: relative; padding: 0 10px;`
   },
   div({ class: 'flex-center noselect', style: 'flex-grow: 1; flex-wrap: wrap;' }, ...routeNavItems()),
-  div({ style: 'position: absolute; right: 10px;' }, searchBar())
+  searchBar()
   ), // Add mobile layout adjustment
   style(`
     @media (max-width: 600px) {

docs/lib/fntags.mjs

@@ -417,7 +417,27 @@ function doBindChildren (parent, element) {
     throw new Error('You can only use bindChildren with a state that contains an array. try myState([mystate]) before calling this function.')
   }
 
-  ctx.bindContexts.push({ element, parent })
+  const bindContext = { element, parent }
+  ctx.bindContexts.push(bindContext)
+
+  // If inside a parent bindAs render, register a cleanup that tears down all
+  // per-item subscriptions when the parent re-renders or is itself torn down.
+  // Without this, nested bindAttr/bindStyle/bindAs subscriptions created for
+  // each array item would be orphaned when the parent replaces this tree.
+  if (activeRenderCleanups !== null) {
+    activeRenderCleanups.push(() => {
+      if (bindContext.elementCleanups) {
+        for (const key in bindContext.elementCleanups) {
+          for (const unsub of bindContext.elementCleanups[key]) unsub()
+        }
+        bindContext.elementCleanups = {}
+      }
+      // Remove this bindContext so reconcile doesn't operate on stale state
+      const idx = ctx.bindContexts.indexOf(bindContext)
+      if (idx !== -1) ctx.bindContexts.splice(idx, 1)
+    })
+  }
+
   this.subscribe((_, oldState) => {
     if (!Array.isArray(ctx.currentValue)) {
       console.warn('A state used with bindChildren was updated to a non array value. This will be converted to an array of 1 and the state will be updated.')

docs/routes.js

@@ -4,6 +4,7 @@ import state from './state.js'
 import routing from './routing.js'
 import gettingStarted from './gettingStarted.js'
 import api from './api.js'
+import testing from './testing.js'
 
 import { fnlink, pathState, route } from './lib/fnroute.mjs'
 import { secondaryColor } from './constants.js'
@@ -14,6 +15,7 @@ export const routes = [
   { url: '/components', linkText: 'Components', component: components },
   { url: '/state', linkText: 'State', component: state },
   { url: '/routing', linkText: 'Routing', component: routing },
+  { url: '/testing', linkText: 'Testing', component: testing },
   { url: '/api', linkText: 'API', component: api },
 
   // {url: "/reference", linkText: 'Reference', component: reference},

docs/search.js

@@ -1,5 +1,6 @@
 import { div, input, ul, li } from './lib/fnelements.mjs'
 import { fnstate } from './lib/fntags.mjs'
+import { svg, path } from './lib/svgelements.mjs'
 import { routes } from './routes.js'
 import { goTo } from './lib/fnroute.mjs'
 import { secondaryColor } from './constants.js'
@@ -69,9 +70,10 @@ export const searchBar = () => {
   const query = fnstate('')
   const results = fnstate([], res => res.url)
   const focused = fnstate(false)
+  const expanded = fnstate(false)
   const showResults = fnstate(false)
 
-  const updateShow = () => showResults(results().length > 0 && focused())
+  const updateShow = () => showResults(results().length > 0 && (focused() || expanded()))
   results.subscribe(updateShow)
   focused.subscribe(updateShow)
 
@@ -90,24 +92,66 @@ export const searchBar = () => {
     query('')
     results([])
     focused(false)
+    expanded(false)
   }
 
+  const collapse = () => {
+    setTimeout(() => {
+      if (!focused()) {
+        expanded(false)
+        query('')
+        results([])
+      }
+    }, 200)
+  }
+
+  const searchInput = input({
+    type: 'text',
+    placeholder: 'Search docs...',
+    value: query.bindAttr(),
+    oninput: (e) => query(e.target.value),
+    onfocus: () => focused(true),
+    onblur: () => {
+      focused(false)
+      collapse()
+    },
+    style: {
+      padding: '6px 8px',
+      borderRadius: '4px',
+      border: '1px solid #ccc',
+      width: '180px',
+      fontSize: '14px',
+      display: expanded.bindStyle(() => expanded() ? 'block' : 'none')
+    }
+  })
+
   return div(
-    { style: 'position: relative; margin-left: auto; margin-right: 20px;' },
-    input({
-      type: 'text',
-      placeholder: 'Search docs...',
-      value: query.bindAttr(),
-      oninput: (e) => query(e.target.value),
-      onfocus: () => focused(true),
-      onblur: () => setTimeout(() => focused(false), 200), // Delay to allow click
+    { style: 'position: relative; display: flex; align-items: center;' },
+    div({
       style: {
-        padding: '8px',
-        borderRadius: '4px',
-        border: '1px solid #ccc',
-        width: '200px'
-      }
-    }),
+        cursor: 'pointer',
+        fontSize: '18px',
+        padding: '4px 8px',
+        display: expanded.bindStyle(() => expanded() ? 'none' : 'block')
+      },
+      onclick: () => {
+        expanded(true)
+        setTimeout(() => searchInput.focus(), 0)
+      },
+      title: 'Search docs'
+    }, svg({
+      fill: 'none',
+      viewBox: '0 0 24 24',
+      'stroke-width': '1.5',
+      stroke: 'currentColor',
+      width: '20',
+      height: '20'
+    }, path({
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      d: 'm21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'
+    }))),
+    searchInput,
     div(
       {
         style: {