diff --git a/docs-site/src/content/docs/api/createComponent.md b/docs-site/src/content/docs/api/defineComponent.md
similarity index 88%
rename from docs-site/src/content/docs/api/createComponent.md
rename to docs-site/src/content/docs/api/defineComponent.md
index 2eb6e1c..979267a 100644
--- a/docs-site/src/content/docs/api/createComponent.md
+++ b/docs-site/src/content/docs/api/defineComponent.md
@@ -4,13 +4,13 @@ title: defineComponent
## Overview
-The `defineComponent` function is used to create a Regor component, which encapsulates a part of your user interface (UI) with its own behavior and template. Components allow you to build complex UIs by composing smaller, reusable units.
+The `defineComponent` function is used to define a Regor component, which encapsulates a part of your user interface (UI) with its own behavior and template. Components allow you to build complex UIs by composing smaller, reusable units.
## Usage
-### Creating a Regor Component
+### Defining a Regor Component
-To create a Regor component, call the `defineComponent` function with the following parameters:
+To define a Regor component, call the `defineComponent` function with the following parameters:
- `template` (required): An HTML string or an object specifying the template for rendering the component. It can include the following properties:
@@ -26,6 +26,9 @@ To create a Regor component, call the `defineComponent` function with the follow
- `head.entangle`: Keeps refs defined in the component context entangled with `head.props` refs. Defaults to `true`.
- `head.enableSwitch`: Enables slot context switching to the parent. Defaults to `false`.
- `head.onAutoPropsAssigned`: Callback invoked after auto props get assigned to the component context.
+ - `head.findContext(ContextClass, occurrence?)`: Finds a parent context instance by `instanceof` from the captured context stack and returns `undefined` when missing.
+ - `head.requireContext(ContextClass, occurrence?)`: Resolves a parent context instance by `instanceof` from the captured context stack and throws if the selected occurrence is missing.
+ - `head.unmount()`: Unmounts this component range and runs unmounted handlers for captured contexts.
### Example
diff --git a/docs-site/src/content/docs/guide/components.md b/docs-site/src/content/docs/guide/components.md
index 3c4608e..d2af8df 100644
--- a/docs-site/src/content/docs/guide/components.md
+++ b/docs-site/src/content/docs/guide/components.md
@@ -6,7 +6,7 @@ sidebar:
This guide documents how Regor components work in runtime, based on current implementation and tests.
-## Create a Component
+## Define a Component
```ts
import { defineComponent, html } from 'regor'
@@ -56,7 +56,15 @@ Component context is created by `options.context(head)`.
4. `head.entangle` (default `true`): if both sides are refs, parent and component refs are two-way entangled during auto-props.
5. `head.enableSwitch` (default `false`): enables slot context switching to parent for slot templates.
6. `head.onAutoPropsAssigned`: callback after auto props assignment.
-7. `head.unmount()`: removes mounted nodes in component range and calls unmounted hooks.
+7. `head.findContext(ContextClass, occurrence?)`: returns matching parent context instance from `head.ctx` by `instanceof`, or `undefined`.
+8. `head.requireContext(ContextClass, occurrence?)`: resolves matching parent context instance from `head.ctx` by `instanceof`; throws if the selected occurrence does not exist.
+9. `head.unmount()`: removes mounted nodes in component range and calls unmounted hooks.
+
+`occurrence` is zero-based:
+
+1. `0` (default): first match
+2. `1`: second match
+3. `2`: third match
### Emit Example
@@ -78,6 +86,24 @@ In parent:
```
+### Parent context lookup example
+
+```ts
+class AppServices {
+ api = '/v1'
+}
+
+class OuterLayoutContext {}
+
+const Child = defineComponent('
', {
+ context: (head) => {
+ const services = head.requireContext(AppServices)
+ const secondLayout = head.findContext(OuterLayoutContext, 1)
+ return { services, secondLayout }
+ },
+})
+```
+
## How Component Inputs Are Routed
On a component host tag, Regor routes bindings through two different channels:
diff --git a/docs-site/src/content/docs/guide/typescript.md b/docs-site/src/content/docs/guide/typescript.md
index 2b61ef5..da1e4a6 100644
--- a/docs-site/src/content/docs/guide/typescript.md
+++ b/docs-site/src/content/docs/guide/typescript.md
@@ -102,6 +102,25 @@ You can type `head` in class constructors and use runtime behavior flags intenti
1. `head.autoProps` to disable automatic parent-input assignment.
2. `head.entangle` to choose two-way ref sync vs snapshot behavior.
3. `head.enableSwitch` for parent-context slot evaluation.
+4. `head.findContext(ServiceClass, occurrence?)` for optional parent context lookup.
+5. `head.requireContext(ServiceClass, occurrence?)` for required parent context lookup.
+
+Example:
+
+```ts
+class AppServices {
+ readonly apiBase = '/v1'
+}
+
+class ChildContext {
+ apiBase: string
+
+ constructor(head: ComponentHead