@nutin/cli 1.2.3 → 1.3.1

package/templates/base/src/core/services/router/helpers/navigation-manager.helper.ts.hbs

@@ -4,20 +4,13 @@ import { {{#if i18n}}I18nService, {{/if}}View } from "../../../index.js";
  * Navigation - handles path normalization and history management
  */
 export class NavigationManager {
-  static normalizePath(path: string): string {
-    const url = new URL(path, window.location.origin);
+  public static normalizePath(path: string): string {
+    const collapsed = path.replace(/\/\/+/g, '/');
+    const url = new URL(collapsed, window.location.origin);
     return (url.pathname || '/').replace(/\/+$/, '') || '/';
   }
 
-  static shouldPushState(
-    pushState: boolean,
-    currentPath: string,
-    normalizedPath: string
-  ): boolean {
-    return pushState && currentPath !== normalizedPath;
-  }
-
-  static updateHistory(
+  public static updateHistory(
     normalizedPath: string,
     currentPath: string,
     pushState: boolean
@@ -27,7 +20,7 @@ export class NavigationManager {
     }
   }
 
-  static updateMetaContent(currentView: View): void {
+  public static updateMetaContent(currentView: View): void {
     if (!currentView.shouldUpdateMetaContent()) return;
 
     const strippedName = currentView.viewName.replace('-view', '');
@@ -44,11 +37,11 @@ export class NavigationManager {
     {{/if}}
   }
 
-  static getCurrentPath(): string {
+  public static getCurrentPath(): string {
     return this.normalizePath(window.location.pathname);
   }
 
-  static matchPattern(pattern: string, path: string): Record<string, string> | null {
+  public static matchPattern(pattern: string, path: string): Record<string, string> | null {
     const paramNames: string[] = [];
 
     const regexPattern = pattern
@@ -75,4 +68,12 @@ export class NavigationManager {
     });
     return params;
   }
+
+  private static shouldPushState(
+    pushState: boolean,
+    currentPath: string,
+    normalizedPath: string
+  ): boolean {
+    return pushState && currentPath !== normalizedPath;
+  }
 }

package/templates/base/src/core/services/router/helpers/route-guard-manager.helper.ts.hbs

@@ -25,31 +25,11 @@ export type RouteConfig = (() => View) | {
 export type Routes = Record<string, RouteConfig>;
 
 export class RouteGuardsManager {
-  static getViewConstructor(routeConfig: RouteConfig): () => View {
+  public static getViewConstructor(routeConfig: RouteConfig): () => View {
     return typeof routeConfig === 'function' ? routeConfig : routeConfig.view;
   }
 
-  static getRouteGuards(routeConfig: RouteConfig): RouteGuard[] {
-    return typeof routeConfig === 'function' ? [] : (routeConfig.guards || []);
-  }
-
-  /**
-   * Runs all guards in sequence with route parameters and returns the result
-   */
-  static async runGuards(
-    guards: RouteGuard[], 
-    params: Record<string, string>
-  ): Promise<boolean | string> {
-    for (const guard of guards) {
-      const result = await guard(params);
-      if (result !== true) {
-        return result; // false or redirect path
-      }
-    }
-    return true;
-  }
-
-  static async processRouteGuards(
+  public static async processRouteGuards(
     routeConfig: RouteConfig,
     targetPath: string,
     params: Record<string, string> = {}
@@ -71,4 +51,24 @@ export class RouteGuardsManager {
     const viewConstructor = this.getViewConstructor(routeConfig);
     return { allowed: true, viewConstructor };
   }
+
+  private static getRouteGuards(routeConfig: RouteConfig): RouteGuard[] {
+    return typeof routeConfig === 'function' ? [] : (routeConfig.guards || []);
+  }
+
+  /**
+   * Runs all guards in sequence with route parameters and returns the result
+   */
+  private static async runGuards(
+    guards: RouteGuard[], 
+    params: Record<string, string>
+  ): Promise<boolean | string> {
+    for (const guard of guards) {
+      const result = await guard(params);
+      if (result !== true) {
+        return result; // false or redirect path
+      }
+    }
+    return true;
+  }
 }

package/templates/base/src/core/services/router/helpers/view-render-manager.helper.ts.hbs

@@ -5,7 +5,7 @@ import { View, AppEventBus } from '../../../index.js';
  */
 export class ViewRenderManager {
   {{#if transition}}
-  static renderAnimatedView(view: View): void {
+  public static renderAnimatedView(view: View): void {
     const container = document.getElementById('app');
     const el = view.render();
     el.classList.add('app-view-transition');
@@ -17,7 +17,7 @@ export class ViewRenderManager {
   }
 
   {{/if}}
-  static async transitionOutCurrentView(currentView: View | null): Promise<null> {
+  public static async transitionOutCurrentView(currentView: View | null): Promise<null> {
     if (!currentView) return null;
     {{#if transition}}
     const container = document.getElementById('app');
@@ -33,7 +33,7 @@ export class ViewRenderManager {
     return null;
   }
 
-  static renderNewView(
+  public static renderNewView(
     viewConstructor: () => View,
     params: Record<string, string> = {}
   ): View {
@@ -49,43 +49,11 @@ export class ViewRenderManager {
     view.render();
 
     {{/if}}
-    this.cleanupOptionalContent();
-
     this.emitEvent('view-mount', view.viewName);
     return view;
   }
 
-  static cleanupOptionalContent() {
-    const isEmpty = (el: HTMLElement): boolean => {
-      const attrName = el.dataset.optional?.trim();
-
-      if (attrName && attrName !== "") {
-        const attrValue = el.getAttribute(attrName);
-        return !attrValue || attrValue.trim() === "" || attrValue === "undefined";
-      }
-
-      if (el instanceof HTMLImageElement) {
-        return !el.src || el.src.trim() === "";
-      }
-
-      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-        return !el.value?.trim();
-      }
-
-      if (el instanceof HTMLMediaElement || el instanceof HTMLSourceElement) {
-        return !el.getAttribute("src");
-      }
-
-      const content = el.textContent?.trim();
-      return !content || content === "undefined";
-    };
-
-    document.querySelectorAll<HTMLElement>("[data-optional]").forEach(el => {
-      if (isEmpty(el)) el.remove();
-    });
-  }
-
-  static emitEvent(event: EventKey, viewName: string): void {
+  private static emitEvent(event: EventKey, viewName: string): void {
     AppEventBus.emit(event, viewName);
   }
   {{#if transition}}

package/templates/base/src/core/services/router/router.ts.hbs

@@ -5,7 +5,6 @@ import { NavigationManager } from './helpers/navigation-manager.helper.js';
 
 // centralized export
 export { Routes, RouteGuard } from './helpers/route-guard-manager.helper.js';
-export { ViewRenderManager } from './helpers/view-render-manager.helper.js';
 
 /**
  * IRouter is a type alias for the instance of Router, not a true interface 
@@ -26,6 +25,51 @@ class Router {
     this.navigate(NavigationManager.getCurrentPath());
   }
 
+  public async reload(): Promise<void> {
+    const currentRoute = NavigationManager.getCurrentPath();
+    await this.navigate(currentRoute, false);
+  }
+
+  public async navigate(path: string | '', pushState: boolean = true): Promise<void> {
+    const normalizedPath = NavigationManager.normalizePath(path);
+    const currentPath = NavigationManager.getCurrentPath();
+    
+    // Try to match the route with parameters
+    const routeMatch = this.matchRoute(normalizedPath);
+
+    if (!routeMatch) {
+      await this.handleNotFound(normalizedPath, currentPath, pushState);
+      return;
+    }
+
+    const guardResult = await this.handleGuards(
+      normalizedPath, 
+      routeMatch.route, 
+      routeMatch.params, 
+      pushState
+    );
+    
+    if (!guardResult) return;
+
+    this._currentView = await ViewRenderManager.transitionOutCurrentView(this._currentView);
+    this._currentParams = routeMatch.params;
+    this._currentView = ViewRenderManager.renderNewView(
+      guardResult.viewConstructor!, 
+      routeMatch.params
+    );
+    
+    NavigationManager.updateMetaContent(this._currentView);
+    NavigationManager.updateHistory(normalizedPath, currentPath, pushState);
+  }
+
+  public getCurrentParams(): Record<string, string> {
+    return { ...this._currentParams };
+  }
+
+  public getParam(key: string): string | undefined {
+    return this._currentParams[key];
+  }
+
   private initializeEventListeners(): void {
     window.addEventListener('popstate', () => this.handlePopState());
     AppEventBus.subscribe('navigate', (path: string) => this.navigate(path));
@@ -95,51 +139,6 @@ class Router {
 
     return guardResult;
   }
-
-  public async reload(): Promise<void> {
-    const currentRoute = NavigationManager.getCurrentPath();
-    await this.navigate(currentRoute, false);
-  }
-
-  public async navigate(path: string | '', pushState: boolean = true): Promise<void> {
-    const normalizedPath = NavigationManager.normalizePath(path);
-    const currentPath = NavigationManager.getCurrentPath();
-    
-    // Try to match the route with parameters
-    const routeMatch = this.matchRoute(normalizedPath);
-
-    if (!routeMatch) {
-      await this.handleNotFound(normalizedPath, currentPath, pushState);
-      return;
-    }
-
-    const guardResult = await this.handleGuards(
-      normalizedPath, 
-      routeMatch.route, 
-      routeMatch.params, 
-      pushState
-    );
-    
-    if (!guardResult) return;
-
-    this._currentView = await ViewRenderManager.transitionOutCurrentView(this._currentView);
-    this._currentParams = routeMatch.params;
-    this._currentView = ViewRenderManager.renderNewView(
-      guardResult.viewConstructor!, 
-      routeMatch.params
-    );
-    
-    NavigationManager.updateMetaContent(this._currentView);
-    NavigationManager.updateHistory(normalizedPath, currentPath, pushState);
-  }
-
-  public getCurrentParams(): Record<string, string> {
-    return { ...this._currentParams };
-  }
-
-  public getParam(key: string): string | undefined {
-    return this._currentParams[key];
-  }
 }
 
 export const AppRouter = (routes: Routes) => new Router(routes);

package/templates/base/src/core/services/store/store.ts.hbs

@@ -10,10 +10,6 @@ export class Store extends Service<Store> {
     this.registerCleanup(this.clear);
   }
 
-  protected onDestroy(): void {
-    this.clear();
-  }
-
   public set<T = any>(key: string, value: T): void {
     this._state[key] = value;
     AppEventBus.emit(`store:${key}`, value);
@@ -27,12 +23,16 @@ export class Store extends Service<Store> {
     AppEventBus.subscribe(`store:${key}`, callback);
   }
 
+  public unsubscribe<T = any>(key: string, callback: (value: T) => void): void {
+    AppEventBus.off(`store:${key}`, callback);
+  }
+
   public clear(): void {
     this._state = {};
   }
 
-  public unsubscribe<T = any>(key: string, callback: (value: T) => void): void {
-    AppEventBus.off(`store:${key}`, callback);
+  protected onDestroy(): void {
+    this.clear();
   }
 }
 

package/templates/base/src/core/utils/anchor-manager/anchor-manager.utils.ts.hbs

@@ -3,9 +3,9 @@ import { AttributesHelper, IAttributesConfig } from "../helpers/attributes.helpe
 /**
  * ```typescript
 interface IAttributesConfig {
-{{#if i18n}}
+  {{#if i18n}}
   i18nKey?: string;
-{{/if}}
+  {{/if}}
   textContent?: string;
   className?: string;
   style?: string;
@@ -42,30 +42,22 @@ export class AnchorManager {
     target.appendChild(container);
   }
 
-  private createAnchorContainer() {
-    const container = document.createElement('div');
+  private createAnchorContainer(): HTMLSpanElement {
+    const container = document.createElement('span');
     const anchor = this.createAnchor();
-
     container.appendChild(anchor);
-
     return container;
   }
 
   private createAnchor(): HTMLElement {
     const anchor = document.createElement('a');
-
     this.setAnchorRef(anchor);
-    
-    AttributesHelper.setContent(anchor, this.config);
-    AttributesHelper.setStyle(anchor, this.config);
-    AttributesHelper.setPipes(anchor, this.config);
-
+    AttributesHelper.setAttributes(anchor, this.config);
     this.handleClick(anchor);
-
     return anchor;
   }
 
-  private setAnchorRef(anchor: HTMLAnchorElement) {
+  private setAnchorRef(anchor: HTMLAnchorElement): void {
     anchor.setAttribute('href', this.config.href);
     if (this.config.target) {
       anchor.setAttribute('target', this.config.target);
@@ -81,7 +73,41 @@ export class AnchorManager {
     anchor?.addEventListener('click', (e) => {
       e.preventDefault();
       const target = document.getElementById(id);
-      target?.scrollIntoView({ behavior: 'smooth' });
+      this.scrollToTarget(target);
+      this.accessibilityFeatures(target, id);
     });
   }
+
+  private scrollToTarget(target: HTMLElement | null): void {
+    const targetPosition = target?.offsetTop;
+    window.scrollTo({
+      top: targetPosition,
+      behavior: 'smooth'
+    })
+  }
+
+  private accessibilityFeatures(target: HTMLElement | null, id: string) {
+    this.setFocus(target);
+    this.setAriaLive(target, id);
+  }
+
+  private setFocus(target: HTMLElement | null): void {
+    setTimeout(() => {
+      target?.setAttribute('tabindex', '-1');
+      target?.focus({ preventScroll: true });
+      // Remove tabindex after focus
+      target?.addEventListener('blur', () => {
+        target?.removeAttribute('tabindex');
+      }, { once: true });
+    }, 100);
+  }
+
+  private setAriaLive(target: HTMLElement | null, id: string): void {
+    const announcement = document.createElement('div');
+    announcement.setAttribute('aria-live', 'polite');
+    announcement.className = 'sr-only';
+    announcement.textContent = `Navigated to ${ target?.textContent || id }`;
+    document.body.appendChild(announcement);
+    setTimeout(() => document.body.removeChild(announcement), 1000);
+  }
 }

package/templates/base/src/core/utils/button-manager/button-manager.utils.ts.hbs

@@ -2,6 +2,7 @@ import { AttributesHelper, IAttributesConfig } from "../helpers/attributes.helpe
 
 export interface BaseButton extends IAttributesConfig {
   callback: () => void;
+  label?: string;
 }
 
 export interface ButtonContainerOptions {
@@ -22,10 +23,6 @@ export interface ButtonContainerOptions {
   pipes?: string;
 }
 
-interface BaseButton extends IAttributesConfig {
-  callback: () => void;
-}
-
 interface ButtonContainerOptions {
   containerClassName?: string;
   containerStyles?: string;
@@ -61,47 +58,71 @@ export class ButtonManager {
     container.style = this.containerOptions.containerStyles || '';
 
     this.buttons.forEach((config, index) => {
-      const button = this.createButton(config, index);
-      container.appendChild(button);
-      this.bindButtonCallback(config, index);
+      if (config.label) {
+        return this.createButtonWithCheckbox(config, index, container);
+      } else {
+        const button = this.createButton(config, index);
+        container.appendChild(button);
+        this.bindButtonCallback(config, index);
+      }
     });
 
     return container;
   }
 
+  public appendTo(target: HTMLElement): void {
+    const container = this.createButtonContainer();
+    if (container) {
+      target.appendChild(container);
+    }
+  }
+
+  private createButtonWithCheckbox(config: BaseButton, index: number, container: HTMLElement): HTMLElement {
+    if (!config.label) return container;
+    const checkbox = document.createElement('input');
+    checkbox.setAttribute('type', 'checkbox');
+    checkbox.setAttribute('id', config.label);
+    checkbox.hidden = true;
+    container.appendChild(checkbox);
+    
+    const label = document.createElement('label');
+    label.setAttribute('for', config.label);
+        
+    const button = this.createButton(config, index);
+    label.appendChild(button);
+        
+    container.appendChild(label);
+    this.bindButtonCallback(config, index, checkbox);
+    return container;
+  }
+
   private createButton(config: BaseButton, index: number): HTMLElement {
     const button = document.createElement('button');
     
-    AttributesHelper.setContent(button, config);
-    AttributesHelper.setStyle(button, config);
-    AttributesHelper.setPipes(button, config);
+    AttributesHelper.setAttributes(button, config);
 
     this.setDataEvent(button, index);
 
     return button;
   }
 
-  private setDataEvent(button: HTMLButtonElement, index: number) {
+  private setDataEvent(button: HTMLButtonElement, index: number): void {
     button.setAttribute('data-event', `click:onButtonClick_${index}`);
   }
 
-  private bindButtonCallback(config: BaseButton, index: number): void {
+  private bindButtonCallback(config: BaseButton, index: number, checkbox?: HTMLInputElement): void {
     const methodName = `onButtonClick_${index}`;
     
     this.component[methodName] = () => {
       if (typeof config.callback === 'function') {
         config.callback();
+        if (checkbox) {
+          checkbox.checked = !checkbox.checked;
+        }
       }
     };
   }
 
-  public appendTo(target: HTMLElement): void {
-    const container = this.createButtonContainer();
-    if (container) {
-      target.appendChild(container);
-    }
-  }
-
 /** Note : doesn't track container
 */
   public updateButtons(newButtons: BaseButton[]): void {

package/templates/base/src/core/utils/helpers/attributes.helper.ts.hbs

@@ -10,21 +10,27 @@ export interface IAttributesConfig {
 }
 
 export class AttributesHelper {
-  static setContent(element: HTMLElement, config: IAttributesConfig) {
+  public static setAttributes(element: HTMLElement, config: IAttributesConfig): void {
+    this.setContent(element, config);
+    this.setPipes(element, config);
+    this.setStyle(element, config);
+  }
+
+  private static setContent(element: HTMLElement, config: IAttributesConfig): void {
     element.textContent = config.textContent || '';
-  {{#if i18n}}
+    {{#if i18n}}
     if (config.i18nKey) {
       element.setAttribute('data-i18n', config.i18nKey);
     }
-  {{/if}}
+    {{/if}}
   }
 
-  static setPipes(element: HTMLElement, config: IAttributesConfig) {
+  private static setPipes(element: HTMLElement, config: IAttributesConfig): void {
     if (!config.pipes) return;
     element.setAttribute('data-pipe', config.pipes);
   }
 
-  static setStyle(element: HTMLElement, config: IAttributesConfig) {    
+  private static setStyle(element: HTMLElement, config: IAttributesConfig): void {    
     const classes = [
       config.className
     ].filter(Boolean).join(' ');

package/templates/base/src/libs/pipes/pipes.ts.hbs

@@ -1,6 +1,6 @@
 import { AppPipeRegistry } from "../../core/index.js";
 
-export const registerPipes = () => {    
+export const registerPipes = (): void => {    
   // currency
   AppPipeRegistry.register('currency', (
     value: number,