@actdim/dynstruct 1.2.7 → 1.2.9

package/README.md

@@ -2,13 +2,37 @@
 
 Build scalable applications with dynamic structured components, explicit wiring, and decoupled message flow. Keep architecture clean and modular.
 
-[![npm version](https://img.shields.io/npm/v/@actdim/dynstruct.svg)](https://www.npmjs.com/package/@actdim/dynstruct)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue.svg)](https://www.typescriptlang.org/)
-[![License: Proprietary](https://img.shields.io/badge/License-Proprietary-red.svg)](LICENSE)
-
-## Overview
-
-**@actdim/dynstruct** is a sophisticated TypeScript-based component system and architectural framework for building large-scale, modular applications. It provides a structure-first, declarative approach to component design with:
+[![npm version](https://img.shields.io/npm/v/@actdim/dynstruct.svg)](https://www.npmjs.com/package/@actdim/dynstruct)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue.svg)](https://www.typescriptlang.org/)
+[![License: Proprietary](https://img.shields.io/badge/License-Proprietary-red.svg)](LICENSE)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Framework Support](#framework-support)
+- [Features](#features)
+- [Quick Start](#quick-start)
+- [How It Works](#how-it-works)
+- [Installation](#installation)
+- [Getting Started (React)](#getting-started-react)
+- [Key Advantages (React Examples)](#key-advantages-react-examples)
+- [Core Concepts](#core-concepts)
+- [More Examples (React)](#more-examples-react)
+- [Architecture](#architecture)
+- [API Reference](#api-reference)
+- [Storybook Examples](#storybook-examples)
+- [Development](#development)
+- [Package Management](#package-management)
+- [Contributing](#contributing)
+- [License](#license)
+- [Author](#author)
+- [Repository](#repository)
+- [Issues](#issues)
+- [Keywords](#keywords)
+
+## Overview
+
+**@actdim/dynstruct** is a TypeScript-based component system and architectural framework for building large-scale, modular applications. It provides a structure-first, declarative approach to component design with:
 
 - **Type-safe component model** with explicit dependency wiring
 - **Decoupled messaging architecture** using a message bus for inter-component communication
@@ -49,7 +73,7 @@ The architectural core is framework-agnostic, allowing the same component struct
 
 🎯 **Navigation & Routing** - Built-in navigation contracts with React Router integration
 
-🔐 **Security Provider** - Authentication, authorization, and ACL support
+🔐 **Security Provider** - Authentication and authorization support
 
 ## Quick Start
 
@@ -73,13 +97,14 @@ The core pattern in dynstruct is **structure-first composition** where parent co
 npm install @actdim/dynstruct
 ```
 
-### Peer Dependencies
-
-This package requires the following peer dependencies:
-
-```bash
-npm install react react-dom mobx mobx-react-lite mobx-utils \
-  @actdim/msgmesh @actdim/utico react-router react-router-dom \
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+For message bus functionality, install [@actdim/msgmesh](https://www.npmjs.com/package/@actdim/msgmesh).
+
+```bash
+npm install react react-dom mobx mobx-react-lite mobx-utils \
+  @actdim/msgmesh @actdim/utico react-router react-router-dom \
   rxjs uuid path-to-regexp jwt-decode http-status
 ```
 
@@ -92,7 +117,7 @@ pnpm add @actdim/dynstruct @actdim/msgmesh @actdim/utico \
   jwt-decode http-status
 ```
 
-## Quick Start (React)
+## Getting Started (React)
 
 > **Note:** All examples below are for the **React** implementation. SolidJS and Vue.js versions will have similar structure with framework-specific adapters.
 
@@ -389,7 +414,7 @@ function TodoList({ todos }) {
 
 ### MobX Reactivity Pitfalls
 
-While MobX is powerful, it has subtle issues that cause unexpected re-renders and are hard to debug:
+While MobX is capable, it has subtle issues that cause unexpected re-renders and are hard to debug:
 
 #### Problem 1: Computed Returns New Object
 
@@ -731,7 +756,7 @@ Traditional React development offers **too many choices** for managing state and
 - **Personal taste** - "I prefer this pattern because it looks cleaner to me"
 - **Laziness** - "This is faster to write, even if it's not optimal"
 
-When your component architecture is built on **many different principles** and becomes **sophisticated**, understanding where a problem is hiding becomes extremely difficult. Different components use different approaches, making the codebase inconsistent and hard to reason about.
+When your component architecture is built on **many different principles** and becomes **complex**, understanding where a problem is hiding becomes extremely difficult. Different components use different approaches, making the codebase inconsistent and hard to reason about.
 
 **When Problems Surface:**
 - ❌ **Hard to detect** - Inconsistent patterns mask the root cause
@@ -824,7 +849,7 @@ type Struct = ComponentStruct<
 
         // List of effect names that will be available in this component.
         // Effect implementations are defined in ComponentDef (see below).
-        effects: ['loadData', 'syncState'];
+        effects: ['computeSummary', 'trackCounter'];
     }
 >;
 ```
@@ -870,23 +895,24 @@ const useMyComponent = (params: ComponentParams<Struct>) => {
         },
 
         effects: {
-            // Effect implementations. Effects are methods similar to actions
-            // (or they simply call actions), but they run automatically as
-            // soon as any property accessed within the effect implementation
-            // changes.
+            // Effect implementations. Effects are auto-tracking reactive
+            // functions that re-run automatically whenever any reactive
+            // property accessed inside them changes.
             //
             // Effects are accessed on the component instance by name via
-            // the `effects` property (e.g. c.effects.loadData).
+            // the `effects` property (e.g. c.effects.computeSummary).
             //
             // An effect runs immediately when the component is created and
             // can later be manually paused, resumed, or stopped entirely.
-            loadData: (component) => {
-                console.log('Items count:', m.items.length);
+            computeSummary: (component) => {
+                // Re-runs whenever m.items changes
+                m.message = `Total items: ${m.items.length}`;
                 // Return an optional cleanup function
                 return () => { /* cleanup */ };
             },
-            syncState: (component) => {
-                console.log('Counter is', m.counter);
+            trackCounter: (component) => {
+                // Re-runs whenever m.counter changes
+                if (m.counter > 100) m.message = 'Counter is high!';
             },
         },
 
@@ -1033,7 +1059,7 @@ children: {
 
 ### Message Bus Communication
 
-dynstruct integrates with **[@actdim/msgmesh](https://www.npmjs.com/package/@actdim/msgmesh)**, a powerful type-safe message bus library that enables decoupled component communication.
+dynstruct integrates with **[@actdim/msgmesh](https://www.npmjs.com/package/@actdim/msgmesh)**, a type-safe message bus library that enables decoupled component communication.
 
 #### Key Benefits
 
@@ -1435,6 +1461,130 @@ const ancestors = component.getChainUp();
 const descendants = component.getChainDown();
 ```
 
+### Dynamic Content
+
+Not all children need to be full dynstruct components. The `children` field supports three patterns for embedding dynamic content, ranging from lightweight React wrappers to parameterized component factories.
+
+#### 1. React.FC Wrapper
+
+The simplest approach: declare a child as `React.FC` in the structure and provide a plain function returning JSX in the definition. This is useful for small inline fragments that need access to the parent's reactive model but don't require their own component structure.
+
+In the structure, the child type is `React.FC`. In the view, it is accessed with a **capitalized** name (because it's a function type): `<c.children.Summary />`.
+
+```typescript
+type Struct = ComponentStruct<AppMsgStruct, {
+    props: {
+        counter: number;
+    };
+    children: {
+        summary: React.FC;  // standard React functional component
+    };
+}>;
+
+const def: ComponentDef<Struct> = {
+    props: { counter: 0 },
+    children: {
+        // Plain function returning JSX — has access to the parent model
+        summary: () => {
+            return <div>Counter: {m.counter}</div>;
+        },
+    },
+    view: (_, c) => (
+        <div>
+            {/* Capitalized because it's a function type */}
+            <c.children.Summary />
+        </div>
+    ),
+};
+```
+
+#### 2. DynamicContent Component
+
+When you need typed data and a render function inside a proper dynstruct component, use `DynamicContentStruct` / `useDynamicContent`. This gives you a component with a reactive `data` prop and a `render` callback, so the content re-renders when the data changes.
+
+```typescript
+import { DynamicContentStruct, useDynamicContent } from '@actdim/dynstruct/componentModel/DynamicContent';
+
+type Struct = ComponentStruct<AppMsgStruct, {
+    props: {
+        text: string;
+    };
+    children: {
+        content: DynamicContentStruct<string, AppMsgStruct>;
+    };
+}>;
+
+const def: ComponentDef<Struct> = {
+    props: { text: 'hello' },
+    children: {
+        content: useDynamicContent<string>({
+            // Bind data to a parent property
+            data: bindProp(() => m, 'text'),
+            // Render function — can access the component's own model
+            render: () => {
+                return <>{c.children.content.model.data}</>;
+            },
+        }),
+    },
+    view: (_, c) => (
+        <div>
+            <c.children.content.View />
+        </div>
+    ),
+};
+```
+
+`DynamicContentStruct` is generic: `DynamicContentStruct<TData, TMsgStruct>`. The `data` prop holds typed data (bound to a parent property or passed directly), and `render` produces the JSX.
+
+#### 3. Factory Function (Parameterized Children)
+
+When you need to create multiple instances of a child component dynamically (e.g. in a loop), declare the child as a factory function in the structure. The function accepts parameters and returns a component structure type.
+
+In the view, factory children are also accessed with a **capitalized** name and can receive props (including a `key`):
+
+```typescript
+type Struct = ComponentStruct<AppMsgStruct, {
+    props: {
+        counter: number;
+        text: string;
+    };
+    children: {
+        dynEdit: (props: { value?: string }) => SimpleEditStruct;
+    };
+}>;
+
+const def: ComponentDef<Struct> = {
+    props: { counter: 0, text: 'bar' },
+    children: {
+        // Factory: called each time <c.children.DynEdit /> is rendered
+        dynEdit: (params) => {
+            return useSimpleEdit({
+                value: bindProp(() => m, 'text'),
+            });
+        },
+    },
+    view: (_, c) => (
+        <ul>
+            {Array.from({ length: m.counter }).map((_, i) => (
+                <li key={i}>
+                    <c.children.DynEdit key={i} />
+                </li>
+            ))}
+        </ul>
+    ),
+};
+```
+
+#### Summary
+
+| Pattern | Structure type | Access in view | Use case |
+|---|---|---|---|
+| React.FC wrapper | `React.FC` | `<c.children.Name />` | Small inline fragments with access to parent model |
+| DynamicContent | `DynamicContentStruct<TData>` | `<c.children.name.View />` | Typed reactive data with custom render function |
+| Factory function | `(params) => ChildStruct` | `<c.children.Name key={...} />` | Multiple dynamic instances, parameterized creation |
+
+> **Naming convention:** Children declared as function types (`React.FC`, factory functions) are accessed with a **capitalized** name in the view (`c.children.Summary`, `c.children.DynEdit`). Children declared as component structures use their original name (`c.children.content`).
+
 ### Component Events
 
 The component model provides **automatic type-safe event handlers** for the component lifecycle and property changes. IntelliSense automatically suggests all available events based on the component structure.
@@ -1595,18 +1745,18 @@ const useForm = (params: ComponentParams<FormStruct>) => {
             isValid: false
         },
         events: {
-            // Validate email when it changes
-            onChangeEmail: (oldValue, newValue) => {
+            // Validate email after it changes — onChange receives only the new value
+            onChangeEmail: (value) => {
                 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-                m.isValid = emailRegex.test(newValue) && m.password.length >= 6;
+                m.isValid = emailRegex.test(value) && m.password.length >= 6;
             },
 
-            // Validate password when it changes
-            onChangePassword: (oldValue, newValue) => {
-                m.isValid = m.email.includes('@') && newValue.length >= 6;
+            // Validate password after it changes
+            onChangePassword: (value) => {
+                m.isValid = m.email.includes('@') && value.length >= 6;
             },
 
-            // Sanitize input before setting
+            // Sanitize input before setting — onChanging receives (oldValue, newValue)
             onChangingEmail: (oldValue, newValue) => {
                 return newValue.toLowerCase().trim();
             }
@@ -1730,302 +1880,128 @@ const useEffectDemo = (params: ComponentParams<Struct>) => {
 
 In this example the `trackNameChanges` effect accesses `m.firstName` and `m.lastName`, so it re-runs whenever either changes. Clicking **Pause** calls `c.effects.trackNameChanges.pause()`, which suspends the auto-tracking — edits to the name fields no longer update `fullName` until **Resume** is clicked.
 
-## Examples (React)
+## More Examples (React)
 
-> **Note:** All examples below are for the **React** implementation.
+> **Note:** For basic examples (simple component, parent-child, bindings, events, effects) see the [Getting Started](#getting-started-react) and [Core Concepts](#core-concepts) sections above.
 
-### Example 1: Simple Counter Component
+### Service Integration (API Calls)
 
-```typescript
-// React implementation
-import { ComponentStruct, ComponentDef, ComponentParams } from '@actdim/dynstruct/componentModel/contracts';
-import { useComponent, toReact } from '@actdim/dynstruct/componentModel/react';
-import { AppMsgStruct } from '@actdim/dynstruct/appDomain/appContracts';
+dynstruct integrates with the **service adapter** system from [@actdim/msgmesh](https://github.com/actdim/msgmesh/?tab=readme-ov-file#service-adapters). Adapters automatically register any service class (e.g. an API client) as a message bus provider — channel names, payload types, and return types are all derived from the service class at compile time.
 
-type CounterStruct = ComponentStruct<AppMsgStruct, {
-    props: { count: number };
-    actions: { increment: () => void; decrement: () => void };
-}>;
+#### 1. Define an API client
 
-const useCounter = (params: ComponentParams<CounterStruct>) => {
-    const def: ComponentDef<CounterStruct> = {
-        props: { count: params.count ?? 0 },
-        actions: {
-            increment: () => { c.model.count++; },
-            decrement: () => { c.model.count--; }
-        },
-        view: (_, c) => (
-            <div>
-                <h2>Counter: {c.model.count}</h2>
-                <button onClick={c.actions.increment}>+</button>
-                <button onClick={c.actions.decrement}>-</button>
-            </div>
-        )
-    };
+```typescript
+export type DataItem = { id: number; name: string };
 
-    const c = useComponent(def, params);
-    return c;
-};
+export class TestApiClient {
+    static readonly name = 'TestApiClient' as const;
+    readonly name = 'TestApiClient' as const;
 
-export const Counter = toReact(useCounter);
+    getDataItems(param1: number[], param2: string[]): Promise<DataItem[]> {
+        return fetch('/api/data').then(r => r.json());
+    }
+}
 ```
 
-### Example 2: Component with Children
+#### 2. Set up adapters and service provider
+
+Type utilities from [`@actdim/msgmesh/adapters`](https://www.npmjs.com/package/@actdim/msgmesh) transform the service class into a typed bus structure. Each public method becomes a channel (e.g. `getDataItems` → `API.TEST.GETDATAITEMS`). See [@actdim/msgmesh — Service Adapters](https://github.com/actdim/msgmesh/?tab=readme-ov-file#service-adapters) for details on how the type transformation works.
 
 ```typescript
-// React implementation
-import { ComponentStruct, ComponentDef, ComponentParams } from '@actdim/dynstruct/componentModel/contracts';
-import { useComponent, toReact } from '@actdim/dynstruct/componentModel/react';
-import { AppMsgStruct } from '@actdim/dynstruct/appDomain/appContracts';
+import {
+    BaseServiceSuffix, getMsgChannelSelector, MsgProviderAdapter,
+    ToMsgChannelPrefix, ToMsgStruct,
+} from '@actdim/msgmesh/adapters';
+import { ServiceProvider } from '@actdim/dynstruct/services/react/ServiceProvider';
+
+// "TestApiClient" → remove suffix "Client" → uppercase → "API.TEST."
+type ApiPrefix = 'API';
+type TestApiChannelPrefix = ToMsgChannelPrefix<
+    typeof TestApiClient.name, ApiPrefix, BaseServiceSuffix
+>;
 
-// Child component
-type ButtonStruct = ComponentStruct<AppMsgStruct, {
-    props: { label: string; onClick: () => void };
-}>;
+// Transform service methods into a bus struct
+type ApiMsgStruct = ToMsgStruct<TestApiClient, TestApiChannelPrefix>;
 
-const useButton = (params: ComponentParams<ButtonStruct>) => {
-    const def: ComponentDef<ButtonStruct> = {
-        props: {
-            label: params.label ?? 'Click',
-            onClick: params.onClick ?? (() => {})
-        },
-        view: (_, c) => (
-            <button onClick={c.model.onClick}>{c.model.label}</button>
-        )
-    };
-    return useComponent(def, params);
+// Create adapter instances
+const services: Record<TestApiChannelPrefix, any> = {
+    'API.TEST.': new TestApiClient(),
 };
 
-// Parent component with children
-type PanelStruct = ComponentStruct<AppMsgStruct, {
-    props: { title: string; clickCount: number };
-    children: {
-        okButton: ButtonStruct;
-        cancelButton: ButtonStruct;
-    };
-}>;
-
-const usePanel = (params: ComponentParams<PanelStruct>) => {
-    let c: Component<PanelStruct>;
-    let m: ComponentModel<PanelStruct>;
-
-    const def: ComponentDef<PanelStruct> = {
-        props: {
-            title: params.title ?? 'Panel',
-            clickCount: 0
-        },
-        children: {
-            okButton: useButton({
-                label: 'OK',
-                onClick: () => {
-                    m.clickCount++; // Reactive property update
-                    console.log('OK clicked');
-                }
-            }),
-            cancelButton: useButton({
-                label: 'Cancel',
-                onClick: () => console.log('Cancel clicked')
-            })
-        },
-        view: (_, c) => (
-            <div className="panel">
-                <h3>{m.title}</h3>
-                <p>Clicks: {m.clickCount}</p>
-                <div className="buttons">
-                    <c.children.okButton.View />
-                    <c.children.cancelButton.View />
-                </div>
-            </div>
-        )
-    };
-
-    c = useComponent(def, params);
-    m = c.model;
-    return c;
-};
+const msgProviderAdapters = Object.entries(services).map(
+    ([_, service]) => ({
+        service,
+        channelSelector: getMsgChannelSelector(services),
+    }) as MsgProviderAdapter,
+);
 
-export const Panel = toReact(usePanel);
+// React provider component — wraps children with registered adapters
+export const ApiServiceProvider = () => ServiceProvider({ adapters: msgProviderAdapters });
 ```
 
-### Example 3: Message Bus Producer/Consumer
+#### 3. Use in a component
 
-```typescript
-// React implementation
-import { ComponentStruct, ComponentDef, ComponentParams, Component, ComponentModel } from '@actdim/dynstruct/componentModel/contracts';
-import { useComponent, toReact } from '@actdim/dynstruct/componentModel/react';
-import { AppMsgStruct } from '@actdim/dynstruct/appDomain/appContracts';
-
-// Producer Component
-type ProducerStruct = ComponentStruct<AppMsgStruct, {
-    msgScope: {
-        provide: {
-            'EVENT-FIRED': { timestamp: number; data: string };
-        };
-    };
-}>;
+Data loading is a plain async function — it has nothing to do with effects. Call it from an event handler (`onReady`) or directly from a button click.
 
-const useProducer = (params: ComponentParams<ProducerStruct>) => {
-    const def: ComponentDef<ProducerStruct> = {
-        // msgBroker is part of ComponentDef
-        msgBroker: {
-            provide: {
-                'EVENT-FIRED': {
-                    callback: () => ({
-                        timestamp: Date.now(),
-                        data: 'Event fired from producer'
-                    })
-                }
-            }
-        },
-        view: (_, c) => (
-            <button onClick={() => {
-                // Use component's msgBus to send
-                c.msgBus.send({
-                    channel: 'EVENT-FIRED',
-                    payload: {}
-                });
-            }}>
-                Fire Event
-            </button>
-        )
+```typescript
+type Struct = ComponentStruct<ApiMsgStruct, {
+    props: {
+        dataItems: DataItem[];
     };
-    return useComponent(def, params);
-};
-
-export const Producer = toReact(useProducer);
-
-// Consumer Component
-type ConsumerStruct = ComponentStruct<AppMsgStruct, {
-    props: { lastEvent: string };
     msgScope: {
-        subscribe: {
-            'EVENT-FIRED': { timestamp: number; data: string };
-        };
+        subscribe: ComponentMsgChannels<'API.TEST.GETDATAITEMS'>;
+        publish: ComponentMsgChannels<'API.TEST.GETDATAITEMS'>;
     };
 }>;
 
-const useConsumer = (params: ComponentParams<ConsumerStruct>) => {
-    let c: Component<ConsumerStruct>;
-    let m: ComponentModel<ConsumerStruct>;
-
-    const def: ComponentDef<ConsumerStruct> = {
-        props: { lastEvent: 'No events yet' },
-        // msgBroker subscribes to messages
-        msgBroker: {
-            subscribe: {
-                'EVENT-FIRED': {
-                    callback: (msg) => {
-                        // Update reactive property
-                        m.lastEvent = `${msg.payload.data} at ${new Date(msg.payload.timestamp).toLocaleTimeString()}`;
-                    }
-                }
-            }
-        },
-        view: (_, c) => (
-            <div>
-                <p>Last Event: {m.lastEvent}</p>
-            </div>
-        )
-    };
-
-    c = useComponent(def, params);
-    m = c.model; // Properties are now reactive
-    return c;
-};
-
-export const Consumer = toReact(useConsumer);
-```
-
-### Example 4: Service Integration (API Calls)
-
-```typescript
-// React implementation
-import { ComponentStruct, ComponentDef, ComponentParams, Component, ComponentModel } from '@actdim/dynstruct/componentModel/contracts';
-import { useComponent, toReact } from '@actdim/dynstruct/componentModel/react';
-import { AppMsgStruct } from '@actdim/dynstruct/appDomain/appContracts';
-import { ClientBase } from '@actdim/dynstruct/net/client';
-import { MsgProviderAdapter } from '@actdim/dynstruct/componentModel/adapters';
-import { ServiceProvider } from '@actdim/dynstruct/services/ServiceProvider';
-
-// Define API client
-class UserApiClient extends ClientBase {
-    constructor() {
-        super({ baseUrl: 'https://api.example.com' });
-    }
-
-    async getUsers() {
-        return this.get<User[]>('/users');
-    }
+const useApiCallExample = (params: ComponentParams<Struct>) => {
+    let c: Component<Struct>;
+    let m: ComponentModel<Struct>;
 
-    async createUser(data: CreateUserDto) {
-        return this.post<User>('/users', data);
+    // Plain async function — not an effect, not an action
+    async function loadData() {
+        const msg = await c.msgBus.request({
+            channel: 'API.TEST.GETDATAITEMS',
+            payloadFn: (fn) => fn([1, 2], ['first', 'second']),
+        });
+        m.dataItems = msg.payload;
     }
 
-    async deleteUser(id: string) {
-        return this.delete(`/users/${id}`);
+    async function clear() {
+        m.dataItems.length = 0;
     }
-}
-
-// Create adapter
-const userApiAdapter: MsgProviderAdapter<UserApiClient> = {
-    service: new UserApiClient(),
-    channelSelector: (service, method) => `API.USERS.${method.toUpperCase()}`
-};
-
-// Register in app provider
-export const ApiServiceProvider = () =>
-    ServiceProvider({ adapters: [userApiAdapter] });
 
-// Use in component
-type AppStruct = ComponentStruct<AppMsgStruct, {
-    props: { users: User[]; loading: boolean };
-}>;
-
-const useApp = (params: ComponentParams<AppStruct>) => {
-    let c: Component<AppStruct>;
-    let m: ComponentModel<AppStruct>;
-
-    const def: ComponentDef<AppStruct> = {
+    const def: ComponentDef<Struct> = {
+        regType: 'ApiCallExample',
         props: {
-            users: [],
-            loading: false
+            dataItems: [],
         },
-        effects: {
-            'loadUsers': async (component) => {
-                m.loading = true; // Reactive update
-                const response = await component.msgBus.request({
-                    channel: 'API.USERS.GETUSERS',
-                    payload: {}
-                });
-                m.users = response.payload; // Reactive update
-                m.loading = false;
-            }
+        events: {
+            // Load data when the component is ready
+            onReady: () => { loadData(); },
         },
         view: (_, c) => (
-            <div>
-                <h2>Users</h2>
-                {m.loading ? (
-                    <p>Loading...</p>
-                ) : (
-                    <ul>
-                        {m.users.map(user => (
-                            <li key={user.id}>{user.name}</li>
-                        ))}
-                    </ul>
-                )}
+            <div id={c.id}>
+                <button onClick={loadData}>Load data</button>
+                <button onClick={clear}>Clear</button>
+                <ul>
+                    {m.dataItems.map((item) => (
+                        <li key={item.id}>{item.id}: {item.name}</li>
+                    ))}
+                </ul>
             </div>
-        )
+        ),
     };
 
     c = useComponent(def, params);
-    m = c.model; // Properties are reactive after useComponent
+    m = c.model;
     return c;
 };
 
-export const App = toReact(useApp);
+export const ApiCallExample = toReact(useApiCallExample);
 ```
 
-### Example 5: Navigation
+### Navigation
 
 ```typescript
 // React implementation
@@ -2072,7 +2048,7 @@ const usePage = (params: ComponentParams<PageStruct>) => {
 export const Page = toReact(usePage);
 ```
 
-### Example 6: Authentication & Security
+### Authentication & Security
 
 ```typescript
 // React implementation
@@ -2174,9 +2150,6 @@ The framework provides standard message channels for common operations:
 - `$AUTH_REFRESH` - Refresh authentication token
 - `$AUTH_ENSURE` - Ensure user is authenticated
 
-#### Access Control
-- `$ACL_GET` - Get access control list
-
 ### Component Lifecycle
 
 Components go through the following lifecycle stages:
@@ -2200,9 +2173,11 @@ Messages can be filtered by source using `ComponentMsgFilter`:
 msgBroker: {
     subscribe: {
         'MY-EVENT': {
-            filter: { FromAncestors: true },
-            callback: (msg) => {
-                // Only triggered by parent components
+            in: {
+                callback: (msg, component) => {
+                    // Only triggered by parent/ancestor components
+                },
+                componentFilter: ComponentMsgFilter.FromAncestors
             }
         }
     }
@@ -2259,12 +2234,13 @@ npm run storybook
 ```
 
 Available stories:
-- **SimpleComponent** - Basic reactive component with props and children
-- **ConnectionExample** - Message bus producer/consumer pattern
-- **ParentChildConnectionExample** - Parent-child component messaging
-- **ApiCallExample** - HTTP request integration with service adapters
-- **LocalMsgStructExample** - Local message structure with todo list
-- **StorageServiceExample** - Storage service provider usage
+- **dynstruct / Basics / SimpleComponent** - Basic reactive component with props and children
+- **dynstruct / Basics / Api Call Example** - HTTP request integration with service adapters
+- **dynstruct / Basics / Effect Demo** - Auto-tracking reactive effects with pause/resume
+- **dynstruct / Basics / Local Msg Struct** - Local message structure with todo list
+- **dynstruct / Basics / Storage Service** - Storage service provider usage
+- **dynstruct / Connection / Basics** - Message bus producer/consumer pattern
+- **dynstruct / Connection / Parent/Child** - Parent-child component messaging
 
 ## Development