Fix audit findings from rules review

.claude/rules/architecture.md

@@ -3,7 +3,7 @@
 - Each `@pyreon/zero` subpath export (`./link`, `./cache`, etc.) must have a matching entry in `packages/zero/package.json` exports map with `bun`, `import`, and `types` conditions
 - Shared utilities go in `packages/zero/src/utils/` — only extract when used by 2+ files
 - Vite plugins follow the pattern: `export function pluginName(config = {}): Plugin`
-- Middleware uses the `(request, next) => Promise<Response>` signature from `@pyreon/server`
+- Middleware uses the `(ctx: MiddlewareContext) => Response | void | Promise<Response | void>` signature from `@pyreon/server`
 - Use `withHeaders()` from `utils/with-headers.ts` for Response header modification in middleware
 - Use `useIntersectionObserver()` from `utils/use-intersection-observer.ts` instead of raw IntersectionObserver
 - Components that need customization should expose 3 levels: composable (`useX`), HOC (`createX`), default component

.claude/rules/code-style.md

@@ -4,7 +4,7 @@
 - JSX via `@pyreon/vite-plugin` — never import `h` manually in `.tsx` files
 - Use Biome for formatting and linting — run `bunx biome check .` before committing
 - Prefer `signal`, `computed`, `effect` from `@pyreon/reactivity` — no React hooks
-- Use `onMount` / `onCleanup` lifecycle hooks, not `useEffect`
+- Use `onMount` / `onUnmount` / `onCleanup` lifecycle hooks, not `useEffect`
 - Prefer composition (composables like `useLink`) over inheritance
 - Export types separately: `export type { Foo }` not mixed with value exports
 - No default exports except Vite plugin (`export { zeroPlugin as default }`) and route components

packages/create-zero/templates/default/src/routes/counter.tsx

@@ -25,7 +25,7 @@ export default function Counter() {
       </div>
 
       <div class="counter-demo">
-        <div class="counter-display">{count}</div>
+        <div class="counter-display">{() => count()}</div>
 
         <div class="counter-controls">
           <button
@@ -53,10 +53,10 @@ export default function Counter() {
 
         <div class="counter-meta">
           <div>
-            count() → <strong>{count}</strong>
+            count() → <strong>{() => count()}</strong>
           </div>
           <div>
-            doubled() → <strong>{doubled}</strong>
+            doubled() → <strong>{() => doubled()}</strong>
           </div>
           <div>
             isEven() → <strong>{() => (isEven() ? 'true' : 'false')}</strong>

packages/zero/src/link.tsx

@@ -35,7 +35,7 @@ export interface LinkProps {
 /** Props passed to a custom component via createLink. */
 export interface LinkRenderProps {
   href: string
-  ref: import('@pyreon/core').Ref<HTMLElement>
+  ref: import('@pyreon/core').Ref<HTMLAnchorElement>
   onClick: (e: MouseEvent) => void
   onMouseEnter: () => void
   onTouchStart: () => void
@@ -53,7 +53,7 @@ export interface LinkRenderProps {
 /** Return type of useLink. */
 export interface UseLinkReturn {
   /** Ref object — attach to the root element for viewport-based prefetch. */
-  ref: import('@pyreon/core').Ref<HTMLElement>
+  ref: import('@pyreon/core').Ref<HTMLAnchorElement>
   /** Click handler — performs client-side navigation. */
   handleClick: (e: MouseEvent) => void
   /** Mouse enter handler — triggers hover prefetch. */
@@ -108,7 +108,7 @@ function doPrefetch(href: string) {
  */
 export function useLink(props: LinkProps): UseLinkReturn {
   const router = useRouter()
-  const elementRef = createRef<HTMLElement>()
+  const elementRef = createRef<HTMLAnchorElement>()
   const strategy = props.prefetch ?? 'hover'
 
   function handleClick(e: MouseEvent) {
@@ -248,7 +248,7 @@ export function createLink(
  */
 export const Link = createLink((props: LinkRenderProps) => (
   <a
-    ref={props.ref as any}
+    ref={props.ref}
     href={props.href}
     {...(props.class ? { class: props.class } : {})}
     {...(props.style ? { style: props.style } : {})}