` to provide any value and make it available to descendant components. Use `useContent` within those components to access the provided value. `useContent` can also accept an optional override value.
+
+## Basic Usage
+
+```tsx
+import { ContentProvider, useContent } from '@ctablex/core';
+
+function App() {
+ const user = { name: 'John', age: 30 };
+
+ return (
+
+
+
+ );
+}
+
+function UserDisplay() {
+ const user = useContent<{ name: string; age: number }>();
+ return (
+
+ {user.name} is {user.age} years old
+
+ );
+}
+```
+
+## ContentProvider
+
+Wraps any value in a React Context, making it available to descendant components.
+
+### Props
+
+```tsx
+interface ContentProviderProps {
+ value: V;
+ children?: ReactNode;
+}
+```
+
+#### `value`
+
+**Type:** `V` (generic)
+
+The data to provide via context. Can be any type - primitives, objects, arrays, etc.
+
+```tsx
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### `children`
+
+**Type:** `ReactNode` (optional)
+
+Components that will have access to the provided value via `useContent`.
+
+### Nesting
+
+Providers can be nested to create scoped contexts. Child providers override parent values:
+
+```tsx
+
+ {/* accesses "outer" */}
+
+ {/* accesses "inner" */}
+
+ {/* accesses "outer" */}
+
+```
+
+This nesting is the core of micro-context's data transformation pattern:
+
+```tsx
+
+ {/* user context */}
+
+ {/* address context */}
+
+ {/* city context */}
+
+
+
+
+```
+
+### Performance
+
+`ContentProvider` uses `useMemo` internally to prevent unnecessary re-renders when the same value reference is provided.
+
+**Best practice:** Memoize or stabilize the `value` prop when possible:
+
+```tsx
+// ✗ Creates new object every render - triggers context updates
+function App() {
+ return ...;
+}
+
+// ✓ Stable reference - no unnecessary updates
+const user = { name: 'John' };
+function App() {
+ return ...;
+}
+
+// ✓ Memoized when dependent on props/state
+function App({ userId }) {
+ const user = useMemo(() => getUser(userId), [userId]);
+ return ...;
+}
+```
+
+## useContent
+
+Retrieves the current value from the nearest `ContentProvider` in the component tree.
+
+### Signature
+
+```tsx
+function useContent(value?: V): V;
+```
+
+### Type Parameter
+
+#### `V`
+
+The expected type of the content value. **This is purely manual** - TypeScript cannot verify it matches the actual context value.
+
+```tsx
+// Type is a hint to TypeScript, not validated
+const user = useContent(); // ✗ No compile-time validation
+
+// Wrong type compiles successfully
+const user = useContent(); // ✗ No error!
+```
+
+### Parameter
+
+#### `value` (optional)
+
+**Type:** `V | undefined`
+
+An optional override value. If provided, this value is returned instead of the context value.
+
+```tsx
+function Display({ value }: { value?: number }) {
+ const content = useContent(value);
+ return {content};
+}
+
+// Uses override value
+
+
+// Uses context value
+
+ {/* Displays: 99 */}
+
+```
+
+**Use case:** Allows components to work both standalone (with props) and within context.
+
+### Error Handling
+
+`useContent` throws an error if called outside a `ContentProvider`:
+
+```tsx
+function Component() {
+ const value = useContent(); // ✗ Error: useContent must be used within a ContentContext
+ return {value}
;
+}
+```
+
+**Exception:** If an override `value` parameter is provided, no error is thrown:
+
+```tsx
+function Component() {
+ const value = useContent(42); // ✓ Returns 42, no context needed
+ return {value}
;
+}
+```
+
+## ContentContext
+
+The underlying React Context that powers `ContentProvider` and `useContent`.
+
+**⚠️ Internal API:** `ContentContext` is an internal implementation detail and may change in future versions. Always prefer using `ContentProvider` and `useContent` in application code.
+
+### Type
+
+```tsx
+type ContentContextType = { value: V };
+
+const ContentContext: React.Context | undefined>;
+```
+
+### When to Use Directly
+
+**Most applications should use `ContentProvider` and `useContent` instead.** Direct context usage is only needed for advanced scenarios:
+
+#### Optional Context Consumption
+
+When you want to handle missing context gracefully without throwing an error:
+
+```tsx
+import { ContentContext } from '@ctablex/core';
+import { useContext } from 'react';
+
+function OptionalDisplay() {
+ const context = useContext(ContentContext);
+
+ if (!context) {
+ return No data provided
;
+ }
+
+ return {context.value}
;
+}
+```
+
+Compare with `useContent`, which throws an error when context is missing.
+
+#### Custom Context Logic
+
+When building your own abstractions:
+
+```tsx
+function useContentOrDefault(defaultValue: V): V {
+ const context = useContext(ContentContext);
+ return context ? context.value : defaultValue;
+}
+```
+
+#### Context Consumer Pattern
+
+Legacy consumer pattern instead of hooks:
+
+```tsx
+
+ {(context) => (context ? {context.value}
: No context
)}
+
+```
+
+## Type Safety Limitations
+
+### No Type Inference or Validation
+
+The hook cannot infer the type from context, and TypeScript cannot verify that the type parameter matches the actual context value:
+
+```tsx
+type User = { name: string };
+
+function Component() {
+ // Must manually specify type - no inference
+ const user = useContent();
+ return {user.name}
;
+}
+
+// ✓ Correct usage
+
+
+
+
+// ✗ Type mismatch, but compiles! Runtime error!
+
+
+
+```
+
+The problem is that `useContent()` accepts any type parameter, and there's no way for TypeScript to validate it against the actual context value at compile time.
+
+### Refactoring Risks
+
+Renaming fields won't automatically update all usages. Manual verification is required throughout the component tree.
+
+## Best Practices
+
+### Always Specify Type Parameter
+
+```tsx
+// ✗ Avoid - type is `any`
+const value = useContent();
+
+// ✓ Better - explicit type
+const value = useContent();
+```
+
+### Use Close to Context Provider
+
+The further `useContent` is from its provider, the harder it is to verify type correctness:
+
+```tsx
+// ✓ Easy to verify type
+
+ {/* Uses useContent() */}
+
+
+// ✗ Harder to track - many layers deep
+
+
+
+
+ {/* Uses useContent - what type? */}
+
+
+
+
+```
+
+### Consider Using Override Parameter
+
+For components that should work both with and without context:
+
+```tsx
+function Display({ price }: { price?: number }) {
+ const value = useContent(price);
+ return ${value.toFixed(2)};
+}
+
+// Works standalone
+
+
+// Works with context
+
+
+
+```
+
+### Use High-Level APIs
+
+Prefer `ContentProvider` and `useContent` over direct `ContentContext` usage. They provide better error messages, simpler API, and built-in optimizations.
+
+## Examples
+
+### Simple Value Display
+
+```tsx
+function PriceDisplay() {
+ const price = useContent();
+ return ${price.toFixed(2)};
+}
+
+
+ {/* Displays: $99.99 */}
+;
+```
+
+### With Override Parameter
+
+```tsx
+function UserGreeting({ name }: { name?: string }) {
+ const userName = useContent(name);
+ return Hello, {userName}!
;
+}
+
+// Standalone with prop
+
+
+// With context
+
+
+
+
+// Context with override (override wins)
+
+ {/* Uses "Dave", not "Charlie" */}
+
+```
+
+## Related
+
+- [Micro-Context Pattern](./MICRO-CONTEXT.md) - Pattern overview
+- [FieldContent](./Contents.md#fieldcontent) - Access object fields
+- [ArrayContent](./ArrayContent.md) - Map arrays
+- [DefaultContent](./Contents.md#defaultcontent) - Render primitive values
diff --git a/packages/ctablex-core/docs/Contents.md b/packages/ctablex-core/docs/Contents.md
new file mode 100644
index 0000000..888a1f4
--- /dev/null
+++ b/packages/ctablex-core/docs/Contents.md
@@ -0,0 +1,538 @@
+# Content Components
+
+Utility components for accessing fields, transforming values, and handling null/undefined.
+
+## TL;DR
+
+- Use `` to render primitive values
+- Use `` for flexible value transformation (paths, functions)
+- Use `` to access object properties
+- Use `` and `` for null/undefined handling
+
+## DefaultContent
+
+Renders primitive values (string, number, null, undefined) directly.
+
+### Props
+
+None.
+
+### Behavior
+
+- Retrieves the content value from context
+- Renders it directly (React's default behavior for primitives)
+- Used as the default `children` for most content components
+- **Only works with primitives** - objects and arrays of objects will cause React errors
+- Arrays of primitives work fine
+
+### Example
+
+```tsx
+import { DefaultContent } from '@ctablex/core';
+
+// String
+
+ {/* Renders: Hello */}
+
+
+// Number
+
+ {/* Renders: 42 */}
+
+
+// Boolean (renders nothing - React's default)
+
+ {/* Renders: (nothing) */}
+
+
+// Null
+
+ {/* Renders: (nothing) */}
+
+
+// ✗ Common mistake - objects cause React errors
+
+ {/* ✗ Error: Objects are not valid as a React child */}
+
+
+// ✓ Use FieldContent or ObjectContent for objects
+
+
+
+
+
+```
+
+### Default Usage
+
+Most content components use `` as their default children:
+
+```tsx
+// These are equivalent:
+
+
+
+
+
+// Also equivalent:
+
+
+
+
+```
+
+### Common Pitfall
+
+Many content components use `` as default children. This causes errors when the content value is an object or array of objects:
+
+```tsx
+// ✗ Error - ArrayContent provides array elements (objects) to DefaultContent
+
+ {/* Missing children - defaults to */}
+
+// ✗ Error: Objects are not valid as a React child
+
+// ✓ Provide explicit children for object/array content
+
+
+
+
+
+
+
+
+// ✗ Error - FieldContent provides object value to DefaultContent
+
+ {/* Missing children - defaults to */}
+
+
+// ✗ Error: Objects are not valid as a React child
+
+// ✓ Nest FieldContent or use ObjectContent
+
+
+
+
+
+
+
+```
+
+**Remember:** `` only works with primitives (string, number, boolean, null, undefined) or arrays of primitives. For objects and arrays, you must provide explicit children.
+
+**Note on booleans:** While `` accepts boolean values without error, React renders nothing for `true` or `false` by default. To display boolean values, provide a custom component:
+
+```tsx
+// React renders nothing for booleans
+
+ {/* Renders: (nothing) */}
+
+
+// ✓ Use a custom component to display boolean values
+
+ {/* Renders: Yes */}
+
+// Renders: Yes
+```
+
+## ContentValue
+
+Transforms the content value using an accessor (path, function, undefined, or null), then provides the result to children.
+
+> **Note:** This component was previously named `AccessorContent`. The old name is still available as an alias for backward compatibility.
+
+### Props
+
+```tsx
+interface ContentValueProps {
+ accessor: Accessor;
+ children?: ReactNode;
+ value?: V;
+}
+```
+
+- **`accessor`** - Accessor to apply to the content value
+ - Path string: `"user.address.city"`
+ - Function: `(value) => value.computed`
+ - `undefined`: Returns value unchanged
+ - `null`: Returns null
+- **`children`** - Content to render with transformed value (defaults to ``)
+- **`value`** - Input value to transform (optional, uses context value if omitted)
+
+### Behavior
+
+- Retrieves the content value from context (or uses `value` prop)
+- Applies the accessor to transform the value
+- Provides the transformed value to children via a new `ContentProvider`
+
+### Example
+
+```tsx
+import { ContentValue, DefaultContent } from '@ctablex/core';
+
+type User = {
+ profile: {
+ name: string;
+ age: number;
+ };
+ isActive: boolean;
+};
+
+const user: User = {
+ profile: { name: 'Alice', age: 30 },
+ isActive: true,
+};
+
+// Path accessor
+
+
+ {/* Renders: Alice */}
+
+
+
+// Function accessor
+
+ u.profile.age > 18}>
+ {/* Renders: Yes */}
+
+
+
+// Undefined accessor (returns unchanged)
+
+
+
+ {/* Renders: true */}
+
+
+
+
+// Null accessor
+
+
+
+
+
+
+
+// Renders: No value
+```
+
+### Type Safety
+
+The `accessor` prop is validated based on the generic type:
+
+```tsx
+type Product = {
+ name: string;
+ price: number;
+ metadata: {
+ weight: number;
+ };
+};
+
+// ✓ Type-safe paths with autocomplete
+ accessor="metadata.weight">
+
+
+
+// ✗ Compile error - invalid path
+ accessor="metadata.height">
+
+
+
+// ✓ Type-safe function
+ accessor={(p) => p.price * 1.1}>
+
+
+```
+
+**Note:** The generic type `` itself is not validated by TypeScript (you could pass the wrong type), but **given** that type, the `accessor` prop is fully validated with autocomplete.
+
+## FieldContent
+
+Accesses a single field of an object and provides its value to children. Simplified version of `ContentValue` for object properties.
+
+### Props
+
+```tsx
+interface FieldContentProps {
+ field: keyof V;
+ children?: ReactNode;
+}
+```
+
+- **`field`** - The object property to access
+- **`children`** - Content to render with field value (defaults to ``)
+
+### Behavior
+
+- Retrieves the content value from context
+- Accesses the specified field
+- Provides the field value to children via a new `ContentProvider`
+
+### Example
+
+```tsx
+import { FieldContent, DefaultContent } from '@ctablex/core';
+
+type User = {
+ name: string;
+ email: string;
+ age: number;
+ address: {
+ city: string;
+ };
+};
+
+const user: User = {
+ name: 'Bob',
+ email: 'bob@example.com',
+ age: 25,
+ address: {
+ city: 'New York',
+ },
+};
+
+// Access single field
+
+
+ {/* Renders: Bob */}
+
+
+
+// Nested field access (field within field)
+
+
+
+ {/* Renders: New York */}
+
+
+
+
+// Multiple fields
+
+ Name:
+ Email:
+
+// Renders: Name: Bob, Email: bob@example.com
+
+
+// ✗ Common mistake - trying to nest fields from parent context
+
+
+ Name: ,
+ Email:
+
+
+// ✗ Error! "email" is a string, not an object with a "name" field
+```
+
+### Type Safety
+
+The `field` prop is validated based on the generic type:
+
+```tsx
+type Product = {
+ name: string;
+ price: number;
+};
+
+// ✓ Valid field with autocomplete
+ field="name">
+
+
+
+// ✗ Compile error - field doesn't exist
+ field="description">
+
+
+```
+
+**Note:** You must add the generic type `` to get type checking and autocomplete for the `field` prop. Without it, no validation occurs:
+
+```tsx
+// ✗ No type checking - accepts any string
+
+
+
+```
+
+### Comparison with ContentValue
+
+`FieldContent` is simpler but less flexible:
+
+```tsx
+// FieldContent - simple, direct property access
+
+
+
+
+// ContentValue - more flexible, supports nested paths
+
+
+
+```
+
+## NullableContent
+
+Conditionally renders content based on whether the value is null or undefined.
+
+### Props
+
+```tsx
+interface NullableContentProps {
+ children?: ReactNode;
+ nullContent?: ReactNode;
+}
+```
+
+- **`children`** - Content to render when value is not null/undefined (defaults to ``)
+- **`nullContent`** - Content to render when value is null/undefined (defaults to `null`)
+
+### Behavior
+
+- Retrieves the content value from context
+- If value is `null` or `undefined`, renders `nullContent`
+- Otherwise, renders `children`
+
+### Example
+
+```tsx
+import { NullableContent, DefaultContent } from '@ctablex/core';
+
+type User = {
+ name: string;
+ email?: string;
+};
+
+const user1: User = { name: 'Alice', email: 'alice@example.com' };
+const user2: User = { name: 'Bob', email: undefined };
+
+// With value
+
+
+
+
+
+
+
+// Renders: alice@example.com
+
+// Without value
+
+
+
+
+
+
+
+// Renders: No email
+
+// Default behavior (renders nothing for null)
+
+
+
+
+
+// Renders: (nothing)
+```
+
+### Use Cases
+
+- Display fallback text for missing optional fields
+- Hide content when data is unavailable
+
+## NullContent
+
+Conditionally renders children only when the content value is `null` or `undefined`.
+
+`NullContent` is useful for rendering complex fallback content when the value is missing. It is the opposite of `NullableContent`, which renders content when the value exists. For simpler cases, you can use the `nullContent` prop of `NullableContent`.
+
+### Props
+
+```tsx
+interface NullContentProps {
+ children?: ReactNode;
+}
+```
+
+- **`children`** - Content to render when value is null or undefined
+
+### Behavior
+
+- Retrieves the content value from context
+- Renders children if value is `null` or `undefined`
+- Returns `null` otherwise (renders nothing)
+
+### Example
+
+```tsx
+import { NullContent, ContentProvider } from '@ctablex/core';
+
+// Renders children when null
+
+
+ No data available
+
+
+// Renders: No data available
+
+// Renders children when undefined
+
+
+ No data available
+
+
+// Renders: No data available
+
+// Renders nothing when value exists
+
+
+ No data available
+
+
+// Renders: (nothing)
+
+// Renders nothing for empty string
+
+
+ No data available
+
+
+// Renders: (nothing) - empty string is not null/undefined
+```
+
+### Use Cases
+
+- Display fallback UI when data is missing
+- Render complex content when value is null (for simpler cases, use the `nullContent` prop of `NullableContent`)
+
+```tsx
+type User = {
+ name: string;
+ email?: string;
+};
+
+const user: User = { name: 'Alice' };
+
+
+
+
+ Email not provided
+
+
+
+
+
+;
+
+// Renders: Email not provided
+```
+
+## Related
+
+- [ArrayContent](./ArrayContent.md) - Iterate over arrays
+- [ObjectContent](./ObjectContent.md) - Iterate over objects
+- [ContentContext](./ContentContext.md) - Content value context
+- [Accessors](./Accessors.md) - Type-safe value extraction
+- [Micro-Context Pattern](./MICRO-CONTEXT.md) - Pattern overview
diff --git a/packages/ctablex-core/docs/MICRO-CONTEXT.md b/packages/ctablex-core/docs/MICRO-CONTEXT.md
new file mode 100644
index 0000000..b7ffc7c
--- /dev/null
+++ b/packages/ctablex-core/docs/MICRO-CONTEXT.md
@@ -0,0 +1,326 @@
+# Micro-Context Pattern
+
+## What is Micro-Context?
+
+**Micro-context** is a pattern for passing data through localized React Context instead of props. Unlike traditional "macro-context" patterns (like theme providers or auth state that span entire applications), micro-context creates small, scoped context providers within component subtrees for fine-grained data flow.
+
+This enables **declarative data transformation** with minimal manual prop passing—components describe what data they need, not how to pass it through every layer.
+
+## The Problem It Solves
+
+In traditional React patterns, data flows through props manually:
+
+```tsx
+
+ {data.map((item) => (
+
+ |
+
+ |
+
+ ))}
+
+```
+
+This leads to:
+
+- **Prop drilling** - Every intermediate component must accept and pass props
+- **Tight coupling** - Child components are explicitly bound to parent props
+- **Limited composition** - Hard to create reusable renderers that work in different contexts
+
+## The Micro-Context Solution
+
+Instead of passing data as props, wrap it in a context provider, no data passed via props or manual iteration:
+
+```tsx
+
+
+ {/* Iterates array, provides each item via context */}
+
+
+ {/* Extracts "price" field, provides it via context */}
+
+ |
+ {/* Reads value from context */}
+
+ |
+
+
+
+
+
+```
+
+Notice that no props are passed through `Table`, `Row`, or `Cell`. Each component declares what data it needs, and micro-context handles the flow automatically. This enables powerful patterns for building flexible, composable components.
+
+Child components access data through hooks:
+
+```tsx
+function NumberFormatter() {
+ const value = useContent(); // gets value from nearest context
+ return <>{formatNumber(value)};
+}
+```
+
+## Key Characteristics
+
+### 1. **Reusable Renderers**
+
+Components that consume context work anywhere without knowing the data source:
+
+```tsx
+function BooleanContent({ yes, no }) {
+ const value = useContent();
+ return <>{value ? yes : no};
+}
+
+// Works in any context that provides a boolean
+
+
+;
+```
+
+### 2. **Immutable Children & Performance**
+
+Since data flows through context instead of props, React elements often have no changing props, making them **immutable**. This enables powerful optimizations:
+
+```tsx
+// Children can be memoized
+const defaultChildren = ;
+
+function FieldContent({ field }) {
+ const content = useContent();
+ return (
+
+ {defaultChildren} {/* Same reference every render */}
+
+ );
+}
+
+// Or memoized within the component
+function ProductTable() {
+ return useMemo(
+ () => (
+
+
+
+
+
+ ),
+ [],
+ );
+}
+
+// Or even moved outside the component
+const content = (
+
+
+
+
+
+);
+// component
+function ProductTable() {
+ return content;
+}
+```
+
+Immutable children help React's reconciliation algorithm skip unnecessary re-renders and comparisons.
+
+### 3. **Default Children**
+
+Components can provide sensible defaults, reducing boilerplate:
+
+```tsx
+// With default children
+
+
+// Equivalent to
+
+
+
+
+// Implementation
+const defaultChildren = ;
+function ContentValue({ accessor, children = defaultChildren }) {
+ const content = useContent();
+ return (
+
+ {children}
+
+ );
+}
+```
+
+This makes simple cases concise while keeping customization available.
+
+### 4. **Open for Customization**
+
+Default children create a pattern where components work out-of-the-box but remain fully customizable:
+
+```tsx
+// Default usage - simple and clean
+
+
+// Custom rendering - override when needed
+
+
+
+
+// Complex composition - mix defaults and custom
+
+
+
+ :
+
+
+
+```
+
+This pattern balances **ease of use** (good defaults) with **flexibility** (full customization).
+
+## Core Concepts
+
+### ContentProvider & useContent
+
+The foundation of micro-context:
+
+```tsx
+// Provide data via context
+
+
+;
+
+// Consume data from context
+function MyComponent() {
+ const data = useContent();
+ return {data}
;
+}
+```
+
+### Content Components
+
+Components that transform data and provide it via context:
+
+- **ContentValue** - Extract data using path or function accessors
+- **FieldContent** - Access object fields
+- **ArrayContent** - Map arrays, providing each item via context
+- **ObjectContent** - Iterate object keys, providing values via context
+- **NullableContent** - Handle null/undefined values
+- **DefaultContent** - Render primitive values
+
+### Accessors
+
+Extract values from data structures:
+
+```tsx
+// Path accessor - string-based
+
+
+
+
+// Function accessor
+ user.fullName}>
+
+
+```
+
+### Additional Contexts
+
+Beyond value context, micro-contexts can provide metadata:
+
+- **IndexContext** - Current index in array/object iteration
+- **KeyContext** - Current key in object iteration
+
+```tsx
+
+ {/* renders 0, 1, 2... */}
+
+
+```
+
+## Trade-offs and Limitations
+
+### Weak Type Safety
+
+The biggest drawback of micro-context is the **lack of strong type safety**. While TypeScript provides autocomplete and validation for props, it cannot enforce correctness across context boundaries.
+
+#### How It Works
+
+TypeScript type safety in ctablex has three key characteristics:
+
+1. **Generic types on components are NOT validated** - You can pass wrong types without errors
+2. **Props ARE validated based on the generic** - Given a type, props get autocomplete
+3. **Nested components are NOT automatically typed** - Must add explicit generics to each
+
+This means **generic types must be explicitly passed** to both content components and the `useContent` hook:
+
+```tsx
+type User = { name: string; address: { city: string } };
+
+// ✓ Type-safe with explicit generic - field is validated and autocompleted
+ field="name">
+
+
+
+// ✗ No type checking without generic - any field accepted
+
+
+
+
+// ✓ Nested components need their own generics
+ getKey="id">
+ field="name" /> {/* Must specify User again */}
+
+
+// useContent also requires manual type annotation
+function MyComponent() {
+ const user = useContent(); // ✗ Type is just a hint - not validated
+ return {user.name}
;
+}
+```
+
+#### Why This Happens
+
+- **JSX elements types are erased at compile time** to `ReactElement` so no type information flows to children
+- **JSX elements cannot be validated at compile time** to infer or verify generics
+- **TypeScript cannot verify that the generic type matches the actual context value**
+- **`useContent()` type is purely manual** - TypeScript cannot check it matches context
+- **Type safety depends entirely on developer discipline**
+
+#### Implications
+
+- **Runtime errors** - Typos in field names won't be caught at compile time
+- **Refactoring risks** - Renaming fields may not update all references
+- **Developer burden** - Must manually ensure type correctness throughout the component tree
+- **Silent failures** - Wrong types compile successfully but fail at runtime
+- **No autocomplete without generics** - IDEs can't suggest valid field names
+
+## When to Use Micro-Context
+
+Micro-context excels when:
+
+- Building **repetitive structures** (tables, lists)
+- Creating **reusable renderers** that work with different data
+- Providing **high customizability** - Components using micro-context enable flexible composition and customization
+
+## Micro vs Macro Context
+
+| Aspect | Macro-Context | Micro-Context |
+| -------- | ------------------------------- | ----------------------------- |
+| Scope | Application-wide | Component subtree |
+| Lifetime | Entire app lifecycle | Component render |
+| Updates | Infrequent, triggers re-renders | Frequent, localized |
+| Purpose | Global state (theme, auth) | Data transformation & flow |
+| Nesting | Typically 1-2 levels | Multiple nested levels |
+| Examples | ThemeProvider, AuthProvider | ContentProvider, ArrayContent |
+
+## Summary
+
+Micro-context is a pattern for **localized, granular data flow** using React Context. By creating small, scoped providers within component trees, it enables:
+
+- Data transformation without prop drilling
+- Reusable components that consume from context
+- Flexible composition of transformers and renderers
+
+This approach unlocks powerful patterns for building flexible, composable UIs while maintaining clean component boundaries. However, this flexibility comes at the cost of weaker compile-time type safety compared to traditional props.
diff --git a/packages/ctablex-core/docs/ObjectContent.md b/packages/ctablex-core/docs/ObjectContent.md
new file mode 100644
index 0000000..148d20a
--- /dev/null
+++ b/packages/ctablex-core/docs/ObjectContent.md
@@ -0,0 +1,241 @@
+# Object Content Components
+
+Components for iterating over object properties and accessing object keys.
+
+## TL;DR
+
+- Use `` to iterate over object properties
+- Use `` to display the current property key
+- Use `KeyContext`, `useKey` to access the current property key
+
+## ObjectContent
+
+Iterates over object properties, rendering children for each key-value pair. Provides the property value, key, and index via context.
+
+### Props
+
+```tsx
+interface ObjectContentProps {
+ getKey?: ObjectGetKey;
+ children: ReactNode;
+ join?: ReactNode;
+ value?: V;
+}
+
+type ObjectGetKey = (
+ value: V[K],
+ key: K,
+ index: number,
+) => string | number;
+```
+
+- **`getKey`** - Generates a unique React key for each property (optional, defaults to property key)
+- **`children`** - Content to render for each property (required)
+- **`join`** - Content to render between properties (e.g., commas, separators)
+- **`value`** - Object to iterate (optional, uses context value if omitted)
+
+### Behavior
+
+- Iterates over `Object.keys()` of the object from content context
+- Provides each property value via `ContentProvider`
+- Provides the property key via `KeyContext`
+- Provides the iteration index via `IndexContext`
+- Renders `join` content between properties (not before the first property)
+- Uses `getKey` to generate React keys for list items (defaults to `key.toString()`)
+
+### Example
+
+```tsx
+import { ObjectContent, KeyContent, IndexContent } from '@ctablex/core';
+
+type Product = {
+ name: string;
+ price: number;
+ stock: number;
+};
+
+const product: Product = {
+ name: 'Widget',
+ price: 99.99,
+ stock: 50,
+};
+
+// Basic iteration
+
+
+ :
+
+
+// Renders: name: Widgetprice: 99.99stock: 50
+
+// With separator
+
+
+ :
+
+
+// Renders: name: Widget, price: 99.99, stock: 50
+
+// With index
+
+ }>
+ . :
+
+
+// Renders:
+// 1. name: Widget
+// 2. price: 99.99
+// 3. stock: 50
+
+// Custom key function
+