docs: update for @pyreon/core 0.7 — provide() API and VNodeChild return type

- Add provide() section to core context docs
- Update coolgrid docs: pushContext → provide()
- Update runtime-server component examples to use provide()
- Fix ComponentFn return type: VNode | null → VNodeChild

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

Author: vitbokisch

content/docs/coolgrid/index.mdx

@@ -58,8 +58,8 @@ You can customize the column count to any number (e.g., 24 columns for finer con
 
 The grid uses Pyreon's context system to cascade configuration from parent to child:
 
-1. **Container** sets the grid config (columns, gap, gutter, padding) and provides it via context using `pushContext`.
-2. **Row** reads the Container's config from context via `useContext`. It can override `columns` and `gap`. Row then pushes its own config into context for child columns.
+1. **Container** sets the grid config (columns, gap, gutter, padding) and provides it via context using `provide()`.
+2. **Row** reads the Container's config from context via `useContext`. It can override `columns` and `gap`. Row then provides its own config into context for child columns.
 3. **Col** reads the Row's config from context to calculate its width percentage and internal padding.
 
 This means you configure the grid once at the Container level, and Rows and Cols automatically inherit those settings. If you need a Row with different settings, you can override them at the Row level.

content/docs/core/index.mdx

@@ -126,7 +126,7 @@ Pyreon components are typed using the `ComponentFn` type, which is a generic fun
 import type { ComponentFn, Props, VNode, VNodeChild } from "@pyreon/core"
 
 // The ComponentFn type
-type ComponentFn<P extends Props = Props> = (props: P) => VNode | null
+type ComponentFn<P extends Props = Props> = (props: P) => VNodeChild
 
 // Type your props explicitly
 interface UserCardProps {
@@ -694,6 +694,35 @@ function ThemedButton() {
 }
 ```
 
+### provide
+
+Provide a context value to all descendants. Automatically handles cleanup on unmount. This is the recommended way to provide context inside components.
+
+```tsx
+import { createContext, provide, useContext } from "@pyreon/core"
+
+const ThemeContext = createContext("light")
+
+function ThemeProvider(props: { mode: string; children: VNodeChild }) {
+  provide(ThemeContext, props.mode)
+  return <>{props.children}</>
+}
+
+function ThemedContent() {
+  const mode = useContext(ThemeContext) // "dark"
+  return <div class={mode}>Themed content</div>
+}
+
+// Usage
+<ThemeProvider mode="dark">
+  <ThemedContent />
+</ThemeProvider>
+```
+
+<Callout type="info">
+`provide()` must be called during component setup (synchronously inside a component function). For SSR or test contexts outside component lifecycle, use the lower-level `pushContext`/`popContext` APIs.
+</Callout>
+
 ### withContext
 
 Provide a value for a context during a function execution. Used internally by the renderer when it encounters a provider component.
@@ -1714,7 +1743,7 @@ Runs a component function in a tracked context so lifecycle hooks registered ins
 function runWithHooks<P extends Props>(
   fn: ComponentFn<P>,
   props: P,
-): { vnode: VNode | null; hooks: LifecycleHooks }
+): { vnode: VNodeChild; hooks: LifecycleHooks }
 ```
 
 ### propagateError

content/docs/runtime-server/index.mdx

@@ -107,7 +107,7 @@ app.get("/page-b", async (req, res) => {
 Even with 50+ concurrent requests and async components that resolve in unpredictable order, each render sees only its own context values:
 
 ```tsx
-import { createContext, pushContext, useContext } from "@pyreon/core"
+import { createContext, provide, useContext } from "@pyreon/core"
 
 const RequestIdCtx = createContext("none")
 
@@ -118,7 +118,7 @@ async function AsyncReader(props: { delay: number }) {
 }
 
 function RequestWrapper(props: { reqId: string; delay: number }) {
-  pushContext(new Map([[RequestIdCtx.id, props.reqId]]))
+  provide(RequestIdCtx, props.reqId)
   return <AsyncReader delay={props.delay} />
 }
 
@@ -394,7 +394,7 @@ Suspense boundary resolutions inherit the context stack from their parent scope.
 const ThemeCtx = createContext("light")
 
 function App() {
-  pushContext(new Map([[ThemeCtx.id, "dark"]]))
+  provide(ThemeCtx, "dark")
   return (
     <Suspense fallback={<p>Loading...</p>}>
       <AsyncContent />{/* useContext(ThemeCtx) returns "dark" */}