@alwatr/flux 9.27.0 → 9.28.0

package/README.md

@@ -377,12 +377,71 @@ createEffect({
 });
 ```
 
+### 🤖 **Finite State Machine (FSM) & Actor Model**
+
+Flux natively aggregates `@alwatr/fsm` to eliminate ad-hoc state variables, boolean flags, and race conditions. Instead of writing unpredictable, disjointed spaghetti code, you model your application's lifecycle as a **declarative, type-safe statechart**.
+
+```typescript
+import {createFsmService} from '@alwatr/flux';
+import type {StateMachineConfig} from '@alwatr/flux';
+
+// 1. Define strict Union Types for compile-time safety
+type FetchState = 'idle' | 'loading' | 'success' | 'failed';
+type FetchEvent = {type: 'FETCH'} | {type: 'SUCCESS'} | {type: 'ERROR'};
+interface FetchContext { retries: number }
+
+// 2. Configure the machine declaratively
+const fetchConfig: StateMachineConfig<FetchState, FetchEvent, FetchContext> = {
+  name: 'api-fetch-lifecycle',
+  initial: 'idle',
+  context: {retries: 0},
+  states: {
+    idle: {
+      on: { FETCH: { target: 'loading' } },
+    },
+    loading: {
+      on: {
+        SUCCESS: { target: 'success', assigners: [({context}) => ({...context, retries: 0})] },
+        ERROR: [
+          // Guard evaluates condition; first matching transition branch is chosen
+          { target: 'loading', guard: ({context}) => context.retries < 3, assigners: [({context}) => ({...context, retries: context.retries + 1})] },
+          { target: 'failed' }
+        ],
+      },
+    },
+    success: {},
+    failed: {
+      on: { FETCH: { target: 'loading', assigners: [({context}) => ({...context, retries: 0})] } },
+    },
+  },
+};
+
+// 3. Create the reactive service (FSM Service instance)
+export const fetchService = createFsmService(fetchConfig);
+
+// 4. Surgical Reactivity: Subscribe to state changes in the view layer
+fetchService.stateSignal.subscribe((state) => {
+  console.log(`Current State: ${state.name}, Retries: ${state.context.retries}`);
+});
+
+// 5. Dispatch events to trigger atomic transitions
+fetchService.dispatch({type: 'FETCH'});
+```
+
+#### 🛡️ Why is Flux FSM a Game-Changer?
+
+- **Eliminates Race Conditions (Run-to-Completion)**: FSM events are queued and processed sequentially. Async callbacks from concurrent network fetches never overwrite or corrupt the state.
+- **Prevents State Explosion**: Ad-hoc booleans (like `isLoading`, `isError`, `hasFetched`) scale exponentially (e.g., 5 booleans = 32 states). FSM forces you to define a finite set of **valid states and transitions** (e.g., exactly 4 states).
+- **Embedded Actor Architecture**: Statecharts can spawn long-running, asynchronous, isolated lifecycles called **Actors** on state entry, complete with auto-cleanup on exit.
+- **Declarative Synergy**: The FSM's internal `stateSignal` integrates flawlessly with the `@alwatr/flux` unidirectional loop, feeding directly into your rendering template.
+
 ---
 
 ## 🏗️ Architecture Overview
 
-Flux implements a **strict layered architecture** where each layer has a single responsibility:
+Flux implements a **strict layered architecture** where each layer has a single responsibility. It supports both standard Unidirectional Data Flow (UDF) and the decentralized **Actor Model** (where components/features behave as isolated micro-services powered by FSMs).
 
+### 1. Unidirectional Data Flow (UDF) Layering
 ```
 ┌───────────────────────────────────────────────────────────┐
 │                         VIEW LAYER                        │
@@ -439,13 +498,68 @@ Flux implements a **strict layered architecture** where each layer has a single
 └───────────────────────────────────────────────────────────┘
 ```
 
+### 2. Decoupled Actor Model Flow
+
+In complex applications, you can structure features as **Actors** using `@alwatr/fsm` + `@alwatr/action`. An Actor maintains private local state, receives inbound event packets from the global action bus, and broadcasts changes asynchronously back to the ecosystem.
+
+```mermaid
+graph TD
+    %% Styling
+    classDef view fill:#E1F5FE,stroke:#03A9F4,stroke-width:2px,color:#01579B;
+    classDef action fill:#FFF3E0,stroke:#FF9800,stroke-width:2px,color:#E65100;
+    classDef fsm fill:#E8F5E9,stroke:#4CAF50,stroke-width:2px,color:#1B5E20;
+    classDef actor fill:#F3E5F5,stroke:#9C27B0,stroke-width:2px,color:#4A148C;
+    classDef global fill:#ECEFF1,stroke:#607D8B,stroke-width:2px,color:#263238;
+
+    subgraph View ["View Layer (lit-html & Directives)"]
+        V[DOM / UI Elements]
+    end
+
+    subgraph Actions ["Action Bus (Global Delegation)"]
+        AB[actionService.dispatch]
+    end
+
+    subgraph Controllers ["Actor Controller Layer"]
+        C[Input Controller / Message Router]
+    end
+
+    subgraph ActorDomain ["Decoupled Actor (FSM Brain)"]
+        direction TB
+        FSM[FsmService]
+        Ctx[(Extended Context)]
+        Actors[Spawning State Actors]
+    end
+
+    subgraph State ["Reactive State Layer (Signals)"]
+        SS[stateSignal]
+    end
+
+    %% Flow
+    V -->|on-click / on-input| AB
+    AB -->|Global AFSA Message| C
+    C -->|dispatch Event| FSM
+    FSM -->|1. Run-to-Completion| Ctx
+    FSM -->|2. Entry/Exit Effects| Actors
+    FSM -->|3. Update State| SS
+    SS -->|Re-render / Update UI| V
+    Actors -.->|Asynchronous Events| AB
+
+    %% Apply Classes
+    class V view;
+    class AB action;
+    class C global;
+    class FSM,Ctx fsm;
+    class Actors actor;
+    class SS view;
+```
+
 **Key architectural benefits:**
 
-- **Zero coupling** — layers communicate only through well-defined interfaces
-- **Testability** — each layer can be tested in isolation
-- **Scalability** — add features without touching existing code
-- **Predictability** — data flows in one direction only
-- **Performance** — fine-grained updates, no full-tree reconciliation
+- **Zero coupling** — layers and actors communicate only through events, guaranteeing that features can be refactored, extended, or replaced without side effects.
+- **Run-to-Completion (RTC)** — State machines evaluate transitions atomically in a synchronous queue. Race conditions are mathematically impossible.
+- **High Testability** — Since business logic is isolated inside declarative statecharts (`StateMachineConfig`), you can test all transitions and side-effects in node/bun without mounting a DOM.
+- **Surgical Reactivity** — Only the DOM elements bound to the FSM's `stateSignal` or Context properties re-render, keeping CPU usage and memory footprints exceptionally low.
+- **AI-Agent and Developer Friendly** — The explicit separation of routing, transition, and effect layers provides clean boundaries that humans and AI agents can navigate with zero ambiguity.
 
 ---
 
@@ -732,6 +846,30 @@ const mapped = createMappedSignal(source, {
 });
 ```
 
+#### `createFsmService(config)`
+
+Instantiates a Finite State Machine service using the given configuration:
+
+```typescript
+import {createFsmService} from '@alwatr/flux';
+
+const myService = createFsmService({
+  name: 'my-fsm',
+  initial: 'idle',
+  context: {retries: 0},
+  states: {
+    idle: {
+      on: {START: {target: 'working'}},
+    },
+    working: {
+      on: {SUCCESS: {target: 'idle'}},
+    },
+  },
+});
+```
+
+See the complete [FSM Package README](https://github.com/Alwatr/alwatr/tree/next/pkg/fsm#readme) for advanced FSM configuration details (Persistence, Guards, Actors, etc.).
+
 ---
 
 ### Actions
@@ -1311,7 +1449,7 @@ todosSignal.subscribe((todos) => {
 - **[@alwatr/action](https://github.com/Alwatr/alwatr/tree/next/pkg/nanolib/action)** — Global event delegation action bus (part of Flux)
 - **[@alwatr/directive](https://github.com/Alwatr/alwatr/tree/next/pkg/nanolib/directive)** — Attribute-based DOM directives (part of Flux)
 - **[@alwatr/embedded-data](https://github.com/Alwatr/alwatr/tree/next/pkg/nanolib/embedded-data)** — Extract and validate embedded JSON from DOM script tags for SSR hydration (part of Flux)
-- **[@alwatr/fsm](https://github.com/Alwatr/alwatr/tree/next/pkg/fsm)** — Type-safe Finite State Machine
+- **[@alwatr/fsm](https://github.com/Alwatr/alwatr/tree/next/pkg/fsm)** — Type-safe Finite State Machine (part of Flux)
 - **[@alwatr/nanotron](https://github.com/Alwatr/alwatr/tree/next/pkg/nanotron)** — Lightweight API server framework
 - **[@alwatr/nitrobase](https://github.com/Alwatr/alwatr/tree/next/pkg/nitrobase)** — In-memory JSON database
 - **[@alwatr/fetch](https://github.com/Alwatr/alwatr/tree/next/pkg/nanolib/fetch)** — Enhanced fetch with retry, cache, deduplication

package/dist/main.d.ts

@@ -2,6 +2,7 @@ export * from '@alwatr/signal';
 export * from '@alwatr/action';
 export * from '@alwatr/directive';
 export * from '@alwatr/embedded-data';
+export * from '@alwatr/fsm';
 export * from '@alwatr/keyboard-shortcut';
 export * from '@alwatr/render-state';
 export * from '@alwatr/local-storage';

package/dist/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAGA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,mBAAmB,qBAAqB,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAGA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,mBAAmB,qBAAqB,CAAC"}

package/dist/main.js

@@ -1,5 +1,5 @@
-/* 📦 @alwatr/flux v9.27.0 */
-export*from"@alwatr/signal";export*from"@alwatr/action";export*from"@alwatr/directive";export*from"@alwatr/embedded-data";export*from"@alwatr/keyboard-shortcut";export*from"@alwatr/render-state";export*from"@alwatr/local-storage";export*from"@alwatr/session-storage";export*from"@alwatr/page-ready";import{html as e,svg as p,mathml as a,render as f,noChange as t,nothing as n}from"lit-html";import{unsafeSVG as g}from"lit-html/directives/unsafe-svg.js";import{ifDefined as i}from"lit-html/directives/if-defined.js";import{cache as s}from"lit-html/directives/cache.js";import{classMap as b}from"lit-html/directives/class-map.js";import{when as d}from"lit-html/directives/when.js";import{repeat as I}from"lit-html/directives/repeat.js";export{d as when,g as unsafeSVG,p as svg,I as repeat,f as render,n as nothing,t as noChange,a as mathml,i as ifDefined,e as html,b as classMap,s as cache};
+/* 📦 @alwatr/flux v9.28.0 */
+export*from"@alwatr/signal";export*from"@alwatr/action";export*from"@alwatr/directive";export*from"@alwatr/embedded-data";export*from"@alwatr/fsm";export*from"@alwatr/keyboard-shortcut";export*from"@alwatr/render-state";export*from"@alwatr/local-storage";export*from"@alwatr/session-storage";export*from"@alwatr/page-ready";import{html as e,svg as p,mathml as a,render as f,noChange as t,nothing as x}from"lit-html";import{unsafeSVG as m}from"lit-html/directives/unsafe-svg.js";import{ifDefined as i}from"lit-html/directives/if-defined.js";import{cache as s}from"lit-html/directives/cache.js";import{classMap as b}from"lit-html/directives/class-map.js";import{when as d}from"lit-html/directives/when.js";import{repeat as I}from"lit-html/directives/repeat.js";export{d as when,m as unsafeSVG,p as svg,I as repeat,f as render,x as nothing,t as noChange,a as mathml,i as ifDefined,e as html,b as classMap,s as cache};
 
-//# debugId=48C4CA5B471A0B6264756E2164756E21
+//# debugId=F1AB5B823C55946064756E2164756E21
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -2,10 +2,10 @@
   "version": 3,
   "sources": ["../src/main.ts", "../src/lit-html.ts"],
   "sourcesContent": [
-    "// UI and reactive bundle — signals, actions, directives, and client-side storage.\n// This package aggregates all UI-layer nanolibs for convenient single-import usage.\n\nexport * from '@alwatr/signal';\nexport * from '@alwatr/action';\nexport * from '@alwatr/directive';\nexport * from '@alwatr/embedded-data';\nexport * from '@alwatr/keyboard-shortcut';\nexport * from '@alwatr/render-state';\nexport * from '@alwatr/local-storage';\nexport * from '@alwatr/session-storage';\nexport * from '@alwatr/page-ready';\nexport * from './lit-html.js';\nexport type * from '@alwatr/type-helper';\n",
+    "// UI and reactive bundle — signals, actions, directives, and client-side storage.\n// This package aggregates all UI-layer nanolibs for convenient single-import usage.\n\nexport * from '@alwatr/signal';\nexport * from '@alwatr/action';\nexport * from '@alwatr/directive';\nexport * from '@alwatr/embedded-data';\nexport * from '@alwatr/fsm';\nexport * from '@alwatr/keyboard-shortcut';\nexport * from '@alwatr/render-state';\nexport * from '@alwatr/local-storage';\nexport * from '@alwatr/session-storage';\nexport * from '@alwatr/page-ready';\nexport * from './lit-html.js';\nexport type * from '@alwatr/type-helper';\n",
     "/**\n * Curated re-exports from `lit-html` for use within `@alwatr/flux`.\n *\n * Only the subset of `lit-html` APIs that are commonly needed in a Flux-based\n * application is exported here. This keeps the public surface minimal and\n * avoids pulling in advanced directive utilities that most consumers never use.\n *\n * **Exported APIs:**\n * - `html` — tagged template literal that produces a `TemplateResult`\n * - `render` — renders a `TemplateResult` into a DOM container\n * - `noChange` — sentinel that tells lit-html to leave the current part value unchanged\n * - `nothing` — sentinel that renders nothing (removes the node/attribute)\n * - `ifDefined` — renders a value only when it is not `undefined`\n * - `cache` — caches rendered templates to avoid re-parsing on state changes\n * - `classMap` — efficiently sets/removes CSS classes from an object map\n * - `when` — conditional rendering helper (`when(condition, trueCase, falseCase)`)\n *\n * @example\n * ```typescript\n * import {html, render, classMap, when} from '@alwatr/flux';\n *\n * const template = (isActive: boolean) => html`\n *   <div class=${classMap({active: isActive, hidden: !isActive})}>\n *     ${when(isActive, () => html`<span>Active</span>`, () => html`<span>Inactive</span>`)}\n *   </div>\n * `;\n *\n * render(template(true), document.getElementById('app')!);\n * ```\n */\nexport {\n  html,\n  svg,\n  mathml,\n  render,\n  noChange,\n  nothing,\n  type TemplateResult,\n  type HTMLTemplateResult,\n  type SVGTemplateResult,\n  type MathMLTemplateResult,\n} from 'lit-html';\nexport {unsafeSVG} from 'lit-html/directives/unsafe-svg.js';\nexport {ifDefined} from 'lit-html/directives/if-defined.js';\nexport {cache} from 'lit-html/directives/cache.js';\nexport {classMap, type ClassInfo} from 'lit-html/directives/class-map.js';\nexport {when} from 'lit-html/directives/when.js';\nexport {repeat, type RepeatDirectiveFn, type KeyFn, type ItemTemplate} from 'lit-html/directives/repeat.js';\n"
   ],
-  "mappings": ";AAGA,4BACA,4BACA,+BACA,mCACA,uCACA,kCACA,mCACA,qCACA,gCCmBA,eACE,SACA,YACA,YACA,cACA,aACA,iBAMF,oBAAQ,0CACR,oBAAQ,0CACR,gBAAQ,qCACR,mBAAQ,yCACR,eAAQ,oCACR,iBAAQ",
-  "debugId": "48C4CA5B471A0B6264756E2164756E21",
+  "mappings": ";AAGA,4BACA,4BACA,+BACA,mCACA,yBACA,uCACA,kCACA,mCACA,qCACA,gCCkBA,eACE,SACA,YACA,YACA,cACA,aACA,iBAMF,oBAAQ,0CACR,oBAAQ,0CACR,gBAAQ,qCACR,mBAAQ,yCACR,eAAQ,oCACR,iBAAQ",
+  "debugId": "F1AB5B823C55946064756E2164756E21",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alwatr/flux",
-  "version": "9.27.0",
+  "version": "9.28.0",
   "description": "UI and reactive library bundle for ECMAScript (JavaScript/TypeScript) projects — signals, actions, directives, and storage.",
   "license": "MPL-2.0",
   "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
@@ -21,10 +21,11 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@alwatr/action": "9.27.0",
+    "@alwatr/action": "9.28.0",
     "@alwatr/directive": "9.26.0",
     "@alwatr/embedded-data": "9.25.0",
-    "@alwatr/keyboard-shortcut": "9.27.0",
+    "@alwatr/fsm": "9.28.0",
+    "@alwatr/keyboard-shortcut": "9.28.0",
     "@alwatr/local-storage": "9.25.0",
     "@alwatr/page-ready": "9.27.0",
     "@alwatr/render-state": "9.25.0",
@@ -84,5 +85,5 @@
     "ui",
     "unidirectional-data-flow"
   ],
-  "gitHead": "a5591e8230a1a33b5414297345ae5f6fd3e5a168"
+  "gitHead": "d60f1d986e5ff44f871d38231f1f2be60833140b"
 }

package/src/main.ts

@@ -5,6 +5,7 @@ export * from '@alwatr/signal';
 export * from '@alwatr/action';
 export * from '@alwatr/directive';
 export * from '@alwatr/embedded-data';
+export * from '@alwatr/fsm';
 export * from '@alwatr/keyboard-shortcut';
 export * from '@alwatr/render-state';
 export * from '@alwatr/local-storage';