docs: update for Pyreon v0.7.7

- Smart class with cx() (arrays, objects, nested mix)
- Typed event targets (TargetedEvent<E>, no more casts)
- New events: onBeforeInput, onInvalid, onResize, onToggle
- splitProps, mergeProps, createUniqueId utilities
- untrack alias for runUntracked
- @pyreon/typescript package docs (new page)
- Remove n-show/directive references
- Fix onMount void return docs
- Update all e.target casts to e.currentTarget
- Signal-preserving HMR and auto naming docs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vitbokisch

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "pyreon": {
+      "command": "bunx",
+      "args": ["@pyreon/mcp"]
+    }
+  }
+}

content/docs/core/index.mdx

@@ -66,7 +66,6 @@ const SearchBox = defineComponent((props: { placeholder: string }) => {
   // Register lifecycle hooks
   onMount(() => {
     inputRef.current?.focus()
-    return undefined
   })
 
   // Set up effects
@@ -88,7 +87,7 @@ const SearchBox = defineComponent((props: { placeholder: string }) => {
         ref={inputRef}
         placeholder={props.placeholder}
         value={() => query()}
-        onInput={(e) => query.set((e.target as HTMLInputElement).value)}
+        onInput={(e) => query.set(e.currentTarget.value)}
       />
       <ul>
         {() => results().map(r => <li>{r}</li>)}
@@ -473,7 +472,6 @@ function AutoFocusInput() {
 
   onMount(() => {
     inputRef.current?.focus()
-    return undefined
   })
 
   return <input ref={inputRef} />
@@ -604,6 +602,46 @@ function ChatMessages(props: { messages: () => Message[] }) {
 }
 ```
 
+### onCleanup
+
+Register a cleanup function that runs when the current reactive scope is disposed. Inside an `effect`, `onCleanup` runs before each re-execution and on final disposal. Inside a component, it runs when the component unmounts. This is the idiomatic way to clean up resources in effects.
+
+```tsx
+import { onCleanup } from "@pyreon/core"
+import { signal, effect } from "@pyreon/reactivity"
+
+function WebSocketComponent(props: { url: () => string }) {
+  const messages = signal<string[]>([])
+
+  effect(() => {
+    const ws = new WebSocket(props.url())
+    ws.onmessage = (e) => messages.update(m => [...m, e.data])
+
+    // Runs before next effect re-execution and on unmount
+    onCleanup(() => ws.close())
+  })
+
+  return <ul>{() => messages().map(m => <li>{m}</li>)}</ul>
+}
+```
+
+```tsx
+// Cleanup a timer inside an effect
+function Poller(props: { interval: () => number }) {
+  const data = signal<string>("")
+
+  effect(() => {
+    const id = setInterval(() => {
+      fetch("/api/data").then(r => r.text()).then(t => data.set(t))
+    }, props.interval())
+
+    onCleanup(() => clearInterval(id))
+  })
+
+  return <p>{data()}</p>
+}
+```
+
 ### onErrorCaptured
 
 Register an error handler for the component subtree. When an error is thrown during rendering or in a child component, the nearest `onErrorCaptured` handler is called. Return `true` to mark the error as handled and stop propagation.
@@ -840,7 +878,6 @@ function AutoFocusInput() {
 
   onMount(() => {
     inputRef.current?.focus()
-    return undefined
   })
 
   return <input ref={inputRef} placeholder="Auto-focused" />
@@ -902,7 +939,6 @@ function Parent() {
 
   onMount(() => {
     ref.current?.focus()
-    return undefined
   })
 
   return <FancyInput inputRef={ref} placeholder="Type here..." />
@@ -921,8 +957,6 @@ function DrawingCanvas() {
 
     ctx.fillStyle = "#007bff"
     ctx.fillRect(10, 10, 100, 100)
-
-    return undefined
   })
 
   return <canvas ref={canvasRef} width={400} height={300} />
@@ -1438,6 +1472,81 @@ function mapArray<T, U>(
 ): () => U[]
 ```
 
+## Prop Utilities
+
+### splitProps
+
+Split a props object into two parts: one with the specified keys, and one with the rest. Both parts preserve reactivity -- accessing a property on either part reads the original prop.
+
+```tsx
+import { splitProps } from "@pyreon/core"
+
+function Button(props: { label: string; icon?: string } & PyreonHTMLAttributes<HTMLButtonElement>) {
+  const [own, html] = splitProps(props, ["label", "icon"])
+
+  return (
+    <button {...html}>
+      <Show when={() => !!own.icon}>
+        <Icon name={own.icon!} />
+      </Show>
+      {own.label}
+    </button>
+  )
+}
+```
+
+```ts
+function splitProps<T extends object, K extends keyof T>(
+  props: T,
+  keys: K[],
+): [Pick<T, K>, Omit<T, K>]
+```
+
+### mergeProps
+
+Merge multiple props objects into one, with later sources overriding earlier ones. The merged object is lazy -- property reads go through the original sources, preserving reactivity.
+
+```tsx
+import { mergeProps } from "@pyreon/core"
+
+function Button(props: { size?: "sm" | "md" | "lg"; variant?: string }) {
+  const merged = mergeProps({ size: "md", variant: "primary" }, props)
+
+  return (
+    <button class={() => `btn-${merged.size} btn-${merged.variant}`}>
+      {merged.children}
+    </button>
+  )
+}
+```
+
+```ts
+function mergeProps<T extends object[]>(...sources: T): MergedProps<T>
+```
+
+### createUniqueId
+
+Generate a unique string ID that is stable across server and client renders. Use this for linking labels to inputs, ARIA attributes, and other cases where you need a deterministic unique ID.
+
+```tsx
+import { createUniqueId } from "@pyreon/core"
+
+function LabeledInput(props: { label: string }) {
+  const id = createUniqueId()
+
+  return (
+    <div>
+      <label for={id}>{props.label}</label>
+      <input id={id} />
+    </div>
+  )
+}
+```
+
+```ts
+function createUniqueId(): string
+```
+
 ## Telemetry
 
 Register global error handlers for monitoring and reporting. This integrates with services like Sentry, Datadog, or custom error tracking.
@@ -1572,7 +1681,7 @@ const ContactForm = defineComponent(() => {
           <label>Name</label>
           <input
             value={() => name().value}
-            onInput={(e) => updateField(name, "name", (e.target as HTMLInputElement).value)}
+            onInput={(e) => updateField(name, "name", e.currentTarget.value)}
           />
           <Show when={() => name().touched && name().error}>
             <span class="error">{name().error}</span>
@@ -1583,7 +1692,7 @@ const ContactForm = defineComponent(() => {
           <input
             type="email"
             value={() => email().value}
-            onInput={(e) => updateField(email, "email", (e.target as HTMLInputElement).value)}
+            onInput={(e) => updateField(email, "email", e.currentTarget.value)}
           />
           <Show when={() => email().touched && email().error}>
             <span class="error">{email().error}</span>
@@ -1593,7 +1702,7 @@ const ContactForm = defineComponent(() => {
           <label>Message</label>
           <textarea
             value={() => message().value}
-            onInput={(e) => updateField(message, "message", (e.target as HTMLTextAreaElement).value)}
+            onInput={(e) => updateField(message, "message", e.currentTarget.value)}
           />
           <Show when={() => message().touched && message().error}>
             <span class="error">{message().error}</span>
@@ -1780,4 +1889,31 @@ Dispatch an error to the nearest active `ErrorBoundary`. Returns `true` if the b
 
 <APICard name="onUnmount" type="hook" signature="onUnmount(callback: () => void): void" description="Registers a callback to run when the component is removed from the DOM. Use for cleanup not covered by onMount's return value." />
 
+<APICard name="onCleanup" type="hook" signature="onCleanup(fn: () => void): void" description="Registers a cleanup function for the current reactive scope. Inside effects, runs before each re-execution and on disposal. Inside components, runs on unmount." />
+
 <APICard name="onUpdate" type="hook" signature="onUpdate(callback: () => void): void" description="Registers a callback to run after each reactive update within the component. Fires via microtask after effects settle, so the DOM is up-to-date." />
+
+<APICard name="splitProps" type="function" signature="splitProps<T, K extends keyof T>(props: T, keys: K[]): [Pick<T, K>, Omit<T, K>]" description="Splits a props object into two parts preserving reactivity. First part has the specified keys, second has the rest." />
+
+<APICard name="mergeProps" type="function" signature="mergeProps<T extends object[]>(...sources: T): MergedProps<T>" description="Merges multiple props objects with later sources overriding earlier ones. Preserves reactivity through lazy property access." />
+
+<APICard name="createUniqueId" type="function" signature="createUniqueId(): string" description="Generates a unique string ID that is stable across server and client renders. Use for ARIA attributes and label-input linking." />
+
+<APICard name="cx" type="function" signature="cx(...args: ClassValue[]): string" description="Utility for composing class names from strings, arrays, objects, or nested combinations. Used internally by the class prop." />
+
+## Type Exports
+
+| Type | Description |
+|------|-------------|
+| `ComponentFn<P>` | `(props: P) => VNodeChild` -- component function type |
+| `VNode` | Virtual DOM node with type, props, children, and key |
+| `VNodeChild` | Union type for all renderable values (VNode, string, number, null, boolean, function, array) |
+| `Props` | Base props interface for elements and components |
+| `Ref<T>` | Mutable ref container `{ current: T \| null }` |
+| `ExtractProps<T>` | Extracts the props type from a `ComponentFn<P>`, or passes through if already a props object |
+| `HigherOrderComponent<HOP, P>` | Typed higher-order component pattern `(component: ComponentFn<P>) => ComponentFn<P & HOP>` |
+| `PyreonHTMLAttributes<E>` | HTML attribute types parameterized by element type (e.g., `PyreonHTMLAttributes<HTMLInputElement>`) |
+| `CSSProperties` | Typed CSS property object for the `style` prop |
+| `StyleValue` | Union type for style prop values: `string \| CSSProperties \| (() => string \| CSSProperties)` |
+| `ClassValue` | Union type for the `class` prop: `string \| boolean \| null \| undefined \| ClassValue[] \| Record<string, boolean \| (() => boolean)>` |
+| `TargetedEvent<E>` | Event type where `currentTarget` is typed as `E` (e.g., `TargetedEvent<HTMLInputElement>`) |

content/docs/hooks/index.mdx

@@ -643,7 +643,7 @@ const Modal = defineComponent<{ onClose: () => void }>((props) => {
   const { lock, unlock } = useScrollLock()
 
   // Lock scroll when modal opens, unlock when it closes
-  onMount(() => { lock(); return undefined })
+  onMount(() => { lock() })
   onUnmount(unlock)
 
   return () => (
@@ -1152,7 +1152,7 @@ Multiple calls to `lock()` from the same hook instance are idempotent -- calling
 const FullScreenOverlay = defineComponent<{ onClose: () => void }>((props) => {
   const { lock, unlock } = useScrollLock()
 
-  onMount(() => { lock(); return undefined })
+  onMount(() => { lock() })
   onUnmount(unlock)
 
   return () => (
@@ -1330,7 +1330,7 @@ const AccessibleModal = defineComponent<{
 
   // Lock page scroll
   const { lock, unlock } = useScrollLock()
-  onMount(() => { lock(); return undefined })
+  onMount(() => { lock() })
   onUnmount(unlock)
 
   // Respect reduced motion

content/docs/meta.json

@@ -15,6 +15,7 @@
     "head",
     "server",
     "vite-plugin",
+    "typescript",
     "mcp",
     "---Compatibility Layers---",
     "react-compat",

content/docs/query/index.mdx

@@ -216,11 +216,11 @@ const SearchResults = defineComponent(() => {
         type="text"
         placeholder="Search..."
         onInput={(e) => {
-          searchTerm.set((e.target as HTMLInputElement).value)
+          searchTerm.set(e.currentTarget.value)
           page.set(1) // Reset to page 1 on new search
         }}
       />
-      <select onChange={(e) => category.set((e.target as HTMLSelectElement).value)}>
+      <select onChange={(e) => category.set(e.currentTarget.value)}>
         <option value="all">All</option>
         <option value="posts">Posts</option>
         <option value="users">Users</option>
@@ -443,7 +443,7 @@ const UpdateTodo = defineComponent((props: { todo: Todo }) => {
         checked={() => props.todo.completed}
         onChange={(e) => {
           mutation.mutate({
-            completed: (e.target as HTMLInputElement).checked,
+            completed: e.currentTarget.checked,
           })
         }}
       />
@@ -619,11 +619,15 @@ const InfiniteScroll = defineComponent(() => {
       {/* Sentinel element -- triggers fetchNextPage when scrolled into view */}
       {() => query.hasNextPage() && (
         <div
-          n-inView={createInViewDirective(() => {
-            if (!query.isFetchingNextPage()) {
-              query.fetchNextPage()
-            }
-          })}
+          ref={(el: HTMLDivElement) => {
+            const observer = new IntersectionObserver(([entry]) => {
+              if (entry.isIntersecting && !query.isFetchingNextPage()) {
+                query.fetchNextPage()
+              }
+            })
+            observer.observe(el)
+            onCleanup(() => observer.disconnect())
+          }}
           class="loading-sentinel"
         >
           {() => query.isFetchingNextPage() && <Spinner />}
@@ -1068,12 +1072,11 @@ const GlobalLoadingBar = defineComponent(() => {
   const mutating = useIsMutating()
 
   return () => (
-    <div
-      class="global-loading-bar"
-      n-show={() => fetching() > 0 || mutating() > 0}
-    >
-      <div class="progress-bar" />
-    </div>
+    <Show when={() => fetching() > 0 || mutating() > 0}>
+      <div class="global-loading-bar">
+        <div class="progress-bar" />
+      </div>
+    </Show>
   )
 })
 ```

content/docs/reactivity/index.mdx

@@ -344,10 +344,23 @@ const outer = effect(() => {
 
 ### Effect Cleanup
 
-Effects do not have a built-in cleanup mechanism like `watch`. For cleanup needs, use `watch` instead, or manage cleanup manually:
+Use `onCleanup` from `@pyreon/core` inside an effect to register a cleanup function. The cleanup runs before each re-execution and on final disposal:
+
+```ts
+import { onCleanup } from "@pyreon/core"
+
+effect(() => {
+  const q = query()
+  const controller = new AbortController()
+  fetch(`/search?q=${q}`, { signal: controller.signal })
+
+  onCleanup(() => controller.abort()) // runs before next re-execution
+})
+```
+
+Alternatively, use `watch` when you need old/new values along with cleanup:
 
 ```ts
-// Use watch for effects that need cleanup
 watch(
   () => query(),
   (q) => {
@@ -1160,12 +1173,12 @@ scope.runInScope(() => {
 })
 ```
 
-## runUntracked
+## runUntracked / untrack
 
-Run a function without registering any reactive dependencies. Useful inside effects when you need to read a signal without subscribing to it.
+Run a function without registering any reactive dependencies. Useful inside effects when you need to read a signal without subscribing to it. `untrack` is a shorter alias for `runUntracked` -- both are identical.
 
 ```ts
-import { runUntracked, signal, effect } from "@pyreon/reactivity"
+import { runUntracked, untrack, signal, effect } from "@pyreon/reactivity"
 
 const a = signal(1)
 const b = signal(2)
@@ -1473,6 +1486,8 @@ editor.redo() // current() === "Hello, World"
 
 <APICard name="runUntracked" type="function" signature="runUntracked<T>(fn: () => T): T" description="Runs a function without tracking any reactive dependencies." />
 
+<APICard name="untrack" type="function" signature="untrack<T>(fn: () => T): T" description="Alias for runUntracked. Shorter name, identical behavior." />
+
 <APICard name="createSelector" type="function" signature="createSelector<T>(source: () => T): (key: T) => boolean" description="Creates an O(1) equality selector for efficient list item matching." />
 
 ### Debug Utilities