@alwatr/flux 9.25.0 → 9.27.0

package/README.md

@@ -65,15 +65,15 @@ declare module '@alwatr/flux' {
 }
 
 // Get compile-time safety everywhere — handler receives the full Action object
-onAction('ui_add_to_cart', (action) => {
+actionService.on('ui_add_to_cart', (action) => {
   // action.payload is typed as {productId: number; qty: number}
   cartService.add(action.payload.productId, action.payload.qty);
   // action.context is the nearest [action-context] ancestor value (or undefined)
   console.log(action.context); // e.g. 'product-list'
 });
 
-dispatchAction({type: 'ui_add_to_cart', payload: {productId: 42, qty: 1}}); // ✅
-dispatchAction({type: 'ui_add_to_cart', payload: 'wrong'}); // ❌ Compile error
+actionService.dispatch({type: 'ui_add_to_cart', payload: {productId: 42, qty: 1}}); // ✅
+actionService.dispatch({type: 'ui_add_to_cart', payload: 'wrong'}); // ❌ Compile error
 ```
 
 ---
@@ -173,7 +173,7 @@ Connect DOM events to typed actions without writing JavaScript. Wrap elements in
 
 ```typescript
 // Handler receives the full Action object — payload, context, and meta together
-onAction('ui_slider_change', (action) => {
+actionService.on('ui_slider_change', (action) => {
   if (action.context === 'volume') audioService.setVolume(Number(action.payload));
   if (action.context === 'brightness') displayService.setBrightness(Number(action.payload));
 });
@@ -406,13 +406,13 @@ Flux implements a **strict layered architecture** where each layer has a single
 │  • Resolves payload ($value, $formdata)                   │
 │  • Dispatches full Action {type, payload, context, meta}  │
 └──────────────────┬────────────────────────────────────────┘
-                   │ dispatchAction({type: 'ui_add_to_cart', payload: 42, context: 'cart'})
+                   │ actionService.dispatch({type: 'ui_add_to_cart', payload: 42, context: 'cart'})
                    ▼
 ┌───────────────────────────────────────────────────────────┐
 │                     CONTROLLER LAYER                      │
 │  (Business Logic, Services, Use Cases)                    │
 │                                                           │
-│  • Subscribes to Actions via onAction()                   │
+│  • Subscribes to Actions via actionService.on()           │
 │  • Receives full Action object (type, payload, context,   │
 │    meta) — no need to pass context separately             │
 │  • Executes business logic                                │
@@ -480,7 +480,7 @@ interface Action<K extends keyof ActionRecord> {
 This unified structure replaces the previous two-argument `(id, payload)` API. Every handler now receives the full picture:
 
 ```typescript
-onAction('ui_add_to_cart', (action) => {
+actionService.on('ui_add_to_cart', (action) => {
   console.log(action.type); // 'ui_add_to_cart'
   console.log(action.payload); // {productId: 42, qty: 1} — fully typed
   console.log(action.context); // 'product-list' — from [action-context] ancestor
@@ -491,9 +491,9 @@ onAction('ui_add_to_cart', (action) => {
 Modifiers can enrich `meta` before the action reaches subscribers:
 
 ```typescript
-import {registerModifier} from '@alwatr/flux';
+import {actionService} from '@alwatr/flux';
 
-registerModifier('trace', (_event, _element, action) => {
+actionService.registerModifier('trace', (_event, _element, action) => {
   action.meta ??= {};
   action.meta['traceId'] = crypto.randomUUID();
   return true;
@@ -531,10 +531,10 @@ bun add @alwatr/flux
 ### 1. Bootstrap the Application
 
 ```typescript
-import {setupActionDelegation, dispatchPageReady} from '@alwatr/flux';
+import {actionService, dispatchPageReady} from '@alwatr/flux';
 
 // Activate global event delegation (call once at app start)
-setupActionDelegation();
+actionService.setupDelegation();
 
 // Dispatch page-ready signal (for MPA routing)
 dispatchPageReady();
@@ -569,19 +569,19 @@ export const counterSignal = createStateSignal({
 
 ```typescript
 // src/controllers.ts
-import {onAction} from '@alwatr/flux';
+import {actionService} from '@alwatr/flux';
 import {counterSignal} from './state.js';
 
-onAction('ui_increment', () => {
+actionService.on('ui_increment', () => {
   counterSignal.update((count) => count + 1);
 });
 
-onAction('ui_decrement', () => {
+actionService.on('ui_decrement', () => {
   counterSignal.update((count) => count - 1);
 });
 
 // Handler receives the full Action object — payload is typed from ActionRecord
-onAction('ui_set_count', (action) => {
+actionService.on('ui_set_count', (action) => {
   counterSignal.set(action.payload); // action.payload: number
 });
 ```
@@ -616,11 +616,11 @@ onAction('ui_set_count', (action) => {
 
 ```typescript
 // main.js
-import {setupActionDelegation} from '@alwatr/flux';
+import {actionService} from '@alwatr/flux';
 import {counterSignal} from './state.js';
 import './controllers.js'; // Register action handlers
 
-setupActionDelegation();
+actionService.setupDelegation();
 
 // Subscribe to state changes and update DOM
 counterSignal.subscribe((count) => {
@@ -736,34 +736,38 @@ const mapped = createMappedSignal(source, {
 
 ### Actions
 
-#### `setupActionDelegation(eventTypes?)`
+#### `actionService`
 
-Activates global event delegation. Call once at app bootstrap.
+The pre-instantiated singleton instance of `ActionService` exported for declarative event delegation and action dispatching.
+
+##### `actionService.setupDelegation(eventTypes?)`
+
+Activates global event delegation capture listeners on `document.body`.
 
 ```typescript
-import {setupActionDelegation, DEFAULT_DELEGATED_EVENTS} from '@alwatr/flux';
+import {actionService, DEFAULT_DELEGATED_EVENTS} from '@alwatr/flux';
 
 // Use defaults (click, submit, input, change)
-setupActionDelegation();
+actionService.setupDelegation();
 
 // Or add custom events
-setupActionDelegation([...DEFAULT_DELEGATED_EVENTS, 'keydown', 'focus']);
+actionService.setupDelegation([...DEFAULT_DELEGATED_EVENTS, 'keydown', 'focus']);
 ```
 
-#### `onAction<K>(type, handler)`
+##### `actionService.on(type, handler)`
 
-Subscribes to a single typed action or an array of actions. The handler receives the full `Action<K>` object.
+Subscribes to a single typed action or an array of actions.
 
 ```typescript
 // Subscribe to a single action
-const sub = onAction('ui_add_to_cart', (action) => {
+const sub = actionService.on('ui_add_to_cart', (action) => {
   cartService.add(action.payload.productId, action.payload.qty);
   console.log(action.context); // e.g. 'product-list' or undefined
   console.log(action.meta); // any metadata set by modifiers
 });
 
 // Subscribe to multiple actions with a single handler
-const multiSub = onAction(['ui_increment', 'ui_decrement'], (action) => {
+const multiSub = actionService.on(['ui_increment', 'ui_decrement'], (action) => {
   console.log('Action triggered:', action.type);
 });
 
@@ -771,16 +775,16 @@ sub.unsubscribe(); // Clean up when done
 multiSub.unsubscribe();
 ```
 
-#### `dispatchAction<K>(action)`
+##### `actionService.dispatch(action)`
 
-Dispatches a typed action programmatically. Takes a full `Action<K>` object.
+Dispatches a typed action programmatically.
 
 ```typescript
-dispatchAction({type: 'navigate', payload: '/home'});
-dispatchAction({type: 'auth_expired', payload: undefined}); // void payload
+actionService.dispatch({type: 'navigate', payload: '/home'});
+actionService.dispatch({type: 'auth_expired', payload: undefined}); // void payload
 
 // With context and meta
-dispatchAction({
+actionService.dispatch({
   type: 'upload_complete',
   payload: fileId,
   context: 'product-list',
@@ -788,17 +792,17 @@ dispatchAction({
 });
 ```
 
-#### `registerModifier(name, handler)`
+##### `actionService.registerModifier(name, handler)`
 
-Adds a custom modifier for `on-<event>` attributes. The handler receives the mutable `action` object and may write to `action.meta`.
+Adds a custom modifier for `on-<event>` attributes.
 
 ```typescript
-registerModifier('confirm', () => {
+actionService.registerModifier('confirm', () => {
   return window.confirm('Are you sure?');
 });
 
 // A modifier that stamps a trace ID into meta
-registerModifier('trace', (_event, _element, action) => {
+actionService.registerModifier('trace', (_event, _element, action) => {
   action.meta ??= {};
   action.meta['traceId'] = crypto.randomUUID();
   return true;
@@ -809,12 +813,12 @@ registerModifier('trace', (_event, _element, action) => {
 <button on-click="ui_delete_item:42; confirm,trace">Delete</button>
 ```
 
-#### `registerPayloadResolver(name, resolver)`
+##### `actionService.registerPayloadResolver(name, resolver)`
 
 Adds a custom payload resolver.
 
 ```typescript
-registerPayloadResolver('$data-id', (_event, element) => {
+actionService.registerPayloadResolver('$data-id', (_event, element) => {
   return element.dataset.id;
 });
 ```
@@ -1238,19 +1242,19 @@ export const todosSignal = createStateSignal<Todo[]>({
 });
 
 // controllers.ts
-import {onAction} from '@alwatr/flux';
+import {actionService} from '@alwatr/flux';
 import {todosSignal} from './state.js';
 
 let nextId = 1;
 
-onAction('ui_add_todo', (action) => {
+actionService.on('ui_add_todo', (action) => {
   todosSignal.update((todos) => [
     ...todos,
     {id: nextId++, text: action.payload, done: false},
   ]);
 });
 
-onAction('ui_toggle_todo', (action) => {
+actionService.on('ui_toggle_todo', (action) => {
   todosSignal.update((todos) =>
     todos.map((todo) =>
       todo.id === action.payload ? {...todo, done: !todo.done} : todo
@@ -1258,7 +1262,7 @@ onAction('ui_toggle_todo', (action) => {
   );
 });
 
-onAction('ui_remove_todo', (action) => {
+actionService.on('ui_remove_todo', (action) => {
   todosSignal.update((todos) => todos.filter((t) => t.id !== action.payload));
 });
 
@@ -1269,11 +1273,11 @@ onAction('ui_remove_todo', (action) => {
 </div>
 
 // main.ts
-import {setupActionDelegation, html, render} from '@alwatr/flux';
+import {actionService, html, render} from '@alwatr/flux';
 import {todosSignal} from './state.js';
 import './controllers.js';
 
-setupActionDelegation();
+actionService.setupDelegation();
 
 todosSignal.subscribe((todos) => {
   render(

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/keyboard-shortcut';
 export * from '@alwatr/render-state';
 export * from '@alwatr/local-storage';
 export * from '@alwatr/session-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,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,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.25.0 */
-export*from"@alwatr/signal";export*from"@alwatr/action";export*from"@alwatr/directive";export*from"@alwatr/embedded-data";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 a,mathml as p,render as f,noChange as n,nothing as t}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,a as svg,I as repeat,f as render,t as nothing,n as noChange,p as mathml,i as ifDefined,e as html,b as classMap,s as cache};
+/* 📦 @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};
 
-//# debugId=93BBA3F8B762FC8564756E2164756E21
+//# debugId=48C4CA5B471A0B6264756E2164756E21
 //# 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/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/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,kCACA,mCACA,qCACA,gCCoBA,eACE,SACA,YACA,YACA,cACA,aACA,iBAMF,oBAAQ,0CACR,oBAAQ,0CACR,gBAAQ,qCACR,mBAAQ,yCACR,eAAQ,oCACR,iBAAQ",
-  "debugId": "93BBA3F8B762FC8564756E2164756E21",
+  "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alwatr/flux",
-  "version": "9.25.0",
+  "version": "9.27.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,14 +21,15 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@alwatr/action": "9.25.0",
-    "@alwatr/directive": "9.25.0",
+    "@alwatr/action": "9.27.0",
+    "@alwatr/directive": "9.26.0",
     "@alwatr/embedded-data": "9.25.0",
+    "@alwatr/keyboard-shortcut": "9.27.0",
     "@alwatr/local-storage": "9.25.0",
-    "@alwatr/page-ready": "9.25.0",
+    "@alwatr/page-ready": "9.27.0",
     "@alwatr/render-state": "9.25.0",
     "@alwatr/session-storage": "9.25.0",
-    "@alwatr/signal": "9.25.0",
+    "@alwatr/signal": "9.26.0",
     "@alwatr/type-helper": "9.14.0",
     "lit-html": "^3.3.3"
   },
@@ -83,5 +84,5 @@
     "ui",
     "unidirectional-data-flow"
   ],
-  "gitHead": "a49ae304180faab79539b5ddfe62d18ac91a232e"
+  "gitHead": "a5591e8230a1a33b5414297345ae5f6fd3e5a168"
 }

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/keyboard-shortcut';
 export * from '@alwatr/render-state';
 export * from '@alwatr/local-storage';
 export * from '@alwatr/session-storage';