feat: add Custom Stores and Manual Store documentation screens

Co-authored-by: Copilot <copilot@github.com>

Author: LabEG

packages/reca-docs/app/guides/custom-stores/page.tsx

@@ -0,0 +1,11 @@
+import {type JSX} from "react";
+import {Shell} from "../../../src/components/shell/shell.js";
+import {CustomStoresScreen} from "../../../src/screens/guides/custom-stores-screen.js";
+
+const Page = (): JSX.Element => (
+    <Shell>
+        <CustomStoresScreen />
+    </Shell>
+);
+
+export default Page;

packages/reca-docs/app/guides/manual-store/page.tsx

@@ -0,0 +1,11 @@
+import {type JSX} from "react";
+import {Shell} from "../../../src/components/shell/shell.js";
+import {ManualStoreScreen} from "../../../src/screens/guides/manual-store-screen.js";
+
+const Page = (): JSX.Element => (
+    <Shell>
+        <ManualStoreScreen />
+    </Shell>
+);
+
+export default Page;

packages/reca-docs/src/navigation.ts

@@ -30,6 +30,8 @@ export const navigation: INavGroup[] = [
             {label: "Repository Pattern", path: "/guides/repository"},
             {label: "Using Interfaces", path: "/guides/interfaces"},
             {label: "Component Communication", path: "/guides/component-communication"},
+            {label: "Manual Store", path: "/guides/manual-store"},
+            {label: "Custom Stores", path: "/guides/custom-stores"},
             {label: "SSR & Next.js", path: "/guides/ssr"}
         ]
     },

packages/reca-docs/src/screens/getting-started/first-component-screen.tsx

@@ -21,28 +21,21 @@ export const FirstComponentScreen = (): JSX.Element => (
 
         <pre><code>{`// stores/todo.store.ts
 import { AutoStore } from "reca";
-import type { FormEvent } from "react";
 
 export class TodoStore extends AutoStore {
+    currentTodo = "";
+    todos: string[] = [];
 
-    public currentTodo: string = "";
-
-    public todos: string[] = [];
-
-    public handleAddTodo(): void {
+    addTodo() {
         if (this.currentTodo.trim()) {
             this.todos.push(this.currentTodo.trim());
             this.currentTodo = "";
         }
     }
 
-    public handleDeleteTodo(index: number): void {
+    deleteTodo(index: number) {
         this.todos.splice(index, 1);
     }
-
-    public handleCurrentEdit(event: FormEvent<HTMLInputElement>): void {
-        this.currentTodo = event.currentTarget.value;
-    }
 }`}</code></pre>
 
         <Alert severity="info" sx={{my: 2}}>
@@ -70,7 +63,7 @@ export const TodoComponent = () => {
                 {store.todos.map((todo, index) => (
                     <div key={index}>
                         <span>{todo}</span>
-                        <button onClick={() => store.handleDeleteTodo(index)}>
+                        <button onClick={() => store.deleteTodo(index)}>
                             Delete
                         </button>
                     </div>
@@ -80,10 +73,10 @@ export const TodoComponent = () => {
             <div>
                 <input
                     value={store.currentTodo}
-                    onInput={store.handleCurrentEdit}
+                    onChange={(e) => { store.currentTodo = e.target.value; }}
                     placeholder="Enter a todo..."
                 />
-                <button onClick={store.handleAddTodo}>
+                <button onClick={() => store.addTodo()}>
                     Add
                 </button>
             </div>
@@ -96,7 +89,7 @@ export const TodoComponent = () => {
             <li><code>useStore(TodoStore)</code> creates a new instance of <code>TodoStore</code> scoped to this component</li>
             <li>The store instance is wrapped with a <code>Proxy</code> that detects property mutations</li>
             <li>When <code>todos</code> or <code>currentTodo</code> changes, React automatically re-renders the component</li>
-            <li>Methods like <code>handleAddTodo</code> are called directly — no dispatching needed</li>
+            <li>Store properties can be mutated directly (<code>store.currentTodo = ...</code>) or via methods like <code>addTodo()</code></li>
         </ol>
 
         <blockquote>

packages/reca-docs/src/screens/getting-started/installation-screen.tsx

@@ -64,17 +64,30 @@ ReactDOM.createRoot(
         </ul>
 
         <h2>Next.js Setup</h2>
+
+        <h3>App Router</h3>
         <p>
-            For Next.js projects, import <code>reflect-metadata</code> in your root layout or
-            a custom <code>_app.tsx</code>:
+            Import <code>reflect-metadata</code> at the top of your root layout:
         </p>
-        <pre><code>{`// app/layout.tsx (App Router)
+        <pre><code>{`// app/layout.tsx
 import "reflect-metadata";
 
-export default function RootLayout({ children }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html><body>{children}</body></html>
     );
 }`}</code></pre>
+
+        <h3>Pages Router</h3>
+        <p>
+            Import <code>reflect-metadata</code> in your custom <code>_app.tsx</code>:
+        </p>
+        <pre><code>{`// pages/_app.tsx
+import "reflect-metadata";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+    return <Component {...pageProps} />;
+}`}</code></pre>
     </DocContent>
 );