@saolabs/client 1.0.0

package/src/core/contracts/RouterInterface.ts

@@ -0,0 +1,65 @@
+import type { ViewManagerInterface } from "./ViewManagerInterface";
+
+// ─── Router Interface ────────────────────────────────────────────
+
+export type RouterNavigationType = 'push' | 'pop';
+export type RouterMode = 'history' | 'hash';
+
+export interface RouteInterface {
+    name: string;
+    path: string;
+    query?: Record<string, any>;
+    params?: Record<string, any>;
+    [key: string]: any;
+}
+
+export interface ActiveRouteInterface {
+    route: RouteInterface;
+    $query: Record<string, any>;
+    $params: Record<string, any>;
+    $urlPath: string;
+    $fragment: string;
+    new(route: RouteInterface, urlPath: string, fragment: string): ActiveRouteInterface;
+    setQuery(query: Record<string, any>): void;
+    getParam(key: string, defaultValue?: any): any;
+    getQuery(key: string, defaultValue?: any): any;
+    getParams(): Record<string, any>;
+    query(name: string): any;
+    param(name: string): any;
+    [key: string]: any;
+}
+
+export interface RouterInterface {
+    /** Set DI container */
+    setApp(app: any): this;
+    /** Set ViewManager for view mounting */
+    setViewManager(vm: ViewManagerInterface): this;
+    /** Router mode: history or hash */
+    setMode(mode: RouterMode): this;
+    /** Add a route */
+    addRoute(path: string, component: string, options?: any): this;
+    /** Add multiple routes */
+    addRoutes(routes: any[]): this;
+    /** Navigate to a path */
+    navigate(path: string): void;
+    /** Navigate to a named route */
+    navigateTo(routeName: string, params?: Record<string, any>): void;
+    /** Replace current route */
+    replace(path: string): void;
+    /** Generate URL for a named route */
+    getURL(name: string, params?: Record<string, any>): string | null;
+    /** Get current route */
+    getCurrentRoute(): ActiveRouteInterface | null;
+    /** Navigation guards */
+    beforeEach(guard: (to: ActiveRouteInterface, from: ActiveRouteInterface, urlPath: string) => boolean | Promise<boolean>): this;
+    afterEach(hook: (to: ActiveRouteInterface, from: ActiveRouteInterface) => void): this;
+    /** Start listening to URL changes */
+    start(skipInitial?: boolean): void;
+    /** Stop listening */
+    stop(): void;
+    /** Full destroy */
+    destroy(): void;
+
+    getFullUrl(): string;
+}
+

package/src/core/contracts/ServiceProviderInterface.ts

@@ -0,0 +1,12 @@
+import { OneObjectType } from "../types/utils";
+import type { ApplicationInterface } from "./ApplicationInterface";
+
+/** Service Provider — register() đăng ký, boot() khởi động */
+export interface ServiceProviderInterface {
+    oneType?: OneObjectType;
+    name: string;
+    dependsOn?: string[];
+    initApplication?(App?: ApplicationInterface): void;
+    register(): void;
+    boot?(): void;
+}

package/src/core/contracts/StorageServiceInterface.ts

@@ -0,0 +1,48 @@
+// ─── Storage Service Interface ───────────────────────────────────
+
+export type StorageEventCallback = (data?: any) => void;
+
+export interface StorageServiceInterface {
+    // ─── CRUD ───────────────────────────────────────────────────
+    /**
+     * Set value with optional TTL (in seconds).
+     * Supports bulk set: set({ key1: val1, key2: val2 })
+     */
+    set(key: string | Record<string, any>, value?: any, ttl?: number | null): boolean;
+    /** Get value (null if expired or missing) */
+    get<T = any>(key: string, defaultValue?: T | null): T | null;
+    /** Check if key exists and not expired */
+    has(key: string): boolean;
+    /** Remove key */
+    remove(key: string): boolean;
+    /** Clear all storage data */
+    clear(): void;
+
+    // ─── Query ──────────────────────────────────────────────────
+    /** Get all non-expired values as plain object */
+    getAll(): Record<string, any>;
+    /** All non-expired keys */
+    getAllKeys(): string[];
+    /** Number of stored items */
+    size(): number;
+    isEmpty(): boolean;
+
+    // ─── Import / Export / Backup ───────────────────────────────
+    /** Export all data as JSON string */
+    export(): string;
+    /** Import data from JSON string */
+    import(json: string): boolean;
+    /** Create backup snapshot */
+    backup(): { timestamp: number; key: string; data: Record<string, any> };
+    /** Restore from backup */
+    restore(backup: { data: Record<string, any> }): boolean;
+
+    // ─── Event System ───────────────────────────────────────────
+    /** Subscribe to storage events. Returns unsubscribe function. */
+    on(event: string, callback: StorageEventCallback): () => void;
+    /** Unsubscribe from event */
+    off(event: string, callback: StorageEventCallback): void;
+
+    // ─── Lifecycle ──────────────────────────────────────────────
+    destroy(): void;
+}

package/src/core/contracts/StoreServiceInterface.ts

@@ -0,0 +1,50 @@
+// ─── Store Service Interface ─────────────────────────────────────
+
+export interface StoreServiceInterface {
+    [key: string]: any;
+
+    // ─── CRUD ───────────────────────────────────────────────────
+    /** Set value with optional TTL (in minutes) */
+    set<T = any>(key: string, value: T, ttl?: number | null): void;
+    /** Get value (returns null if expired or missing) */
+    get<T = any>(key: string): T | null;
+    /** Check if key exists and is not expired */
+    has(key: string): boolean;
+    /** Remove key, returns removed value or null */
+    remove(key: string): any;
+    /** Clear all data, listeners, TTLs */
+    clear(): void;
+
+    // ─── Subscriptions ──────────────────────────────────────────
+    /**
+     * Subscribe to key changes. Returns unsubscribe function.
+     *
+     * - subscribe('user', (value) => { ... })
+     * - subscribe(['user', 'token'], (values) => { ... })
+     */
+    subscribe(key: string | string[], callback: (value: any) => void): () => void;
+    /** Unsubscribe specific callback from key */
+    unsubscribe(key: string, callback: (value: any) => void): void;
+    /** Subscribe to TTL expiration of a key */
+    onExpire(key: string, callback: (value: any) => void): () => void;
+
+    // ─── TTL Utilities ──────────────────────────────────────────
+    /** Get TTL info for a key */
+    getTTL(key: string): { ttl: number; createdAt: number; expiresAt: number; remaining: number; expired: boolean } | null;
+    /** Refresh TTL (reset timer). Pass null to use existing TTL. */
+    refreshTTL(key: string, ttl?: number | null): void;
+    /** Remove TTL from key (key lives forever) */
+    removeTTL(key: string): void;
+
+    // ─── Iteration ──────────────────────────────────────────────
+    /** All non-expired keys */
+    keys(): string[];
+    /** All non-expired values */
+    values<T = any>(): T[];
+    /** All non-expired entries */
+    entries<T = any>(): Array<[string, T]>;
+
+    // ─── Lifecycle ──────────────────────────────────────────────
+    /** Destroy — clear all + stop cleanup timer */
+    destroy(): void;
+}

package/src/core/contracts/ViewCacheInterface.ts

@@ -0,0 +1,14 @@
+// ─── View Cache Interface ────────────────────────────────────────
+
+export interface ViewCacheInterface {
+    /** Store a rendered view's DOM state */
+    store(viewId: string, element: HTMLElement | DocumentFragment): void;
+    /** Retrieve cached DOM for a view (returns null if not cached) */
+    retrieve(viewId: string): HTMLElement | DocumentFragment | null;
+    /** Check if a view is cached */
+    has(viewId: string): boolean;
+    /** Remove a specific view from cache */
+    remove(viewId: string): void;
+    /** Clear all cached views */
+    clear(): void;
+}

package/src/core/contracts/ViewControllerInterface.ts

@@ -0,0 +1,135 @@
+import type { OneObjectType } from "../types/utils";
+import type { ViewInterface, ViewRenderFactory } from "./ViewInterface";
+import type { ViewStateInterface } from "./ViewStateInterface";
+import type { HtmlInterface, FragmentInterface, OneElementEventHandler, OneElementChildren, OneChildrenFactory, WrapperInterface } from "./ElementInterface";
+import type { ReactiveInterface } from "./ReactiveInterface";
+import type { BlockInterface } from "./BlockInterface";
+import type { LoopContextInterface } from "./LoopContextInterface";
+import { SectionInterface } from "./views";
+
+// ─── ViewController Interface ────────────────────────────────────
+
+export type ViewType = 'view' | 'layout' | 'component' | 'template';
+
+export interface ViewControllerInterface {
+    oneType: OneObjectType;
+    view: ViewInterface;
+    viewId: string;
+    path: string;
+    viewType: ViewType;
+    states: ViewStateInterface;
+    loopContext: LoopContextInterface | null;
+    /** Raw input data reference */
+    data: Record<string, any>;
+    /** Whether this view defines a super view (layout) */
+    hasSuperView: boolean;
+    /** Path to super view (layout) */
+    superViewPath: string | null;
+
+    /** Main element (Wrapper) for this view */
+    mainElement: any;
+
+    sections: Map<string, SectionInterface>;
+    blocks: Map<string, BlockInterface>;
+    urlPath: string | null;
+
+    childrenFactory: OneChildrenFactory | null;
+
+    wrapper: (factory: OneChildrenFactory) => WrapperInterface;
+
+    addEventListener(element: HTMLElement, event: string, handlers: OneElementEventHandler): void;
+    /** Called by reactive system to schedule an update */
+    scheduleUpdate(reactive: ReactiveInterface): void;
+    /** Lifecycle */
+    setup(config: Record<string, any>): void;
+    /** Commit initial data — set initial state values after render */
+    commitData(): void;
+    /** Update data from external source */
+    updateData(data: Record<string, any>): void;
+    /** Update single data item */
+    updateDataItem(key: string, value: any): void;
+    /** Start reactive subscriptions */
+    start(): void;
+    /** Stop reactive subscriptions (for caching) */
+    stop(): void;
+    /** Loop directives */
+    __foreach<T>(list: T[] | Record<string, T>, callback: (item: T, key: string, index: number, loop: any) => any): any[];
+    __for(loopType?: string, start?: number, end?: number, execute?: (loop: any) => any): any;
+    __while(execute: (loop: any) => any, maxIterations?: number): any;
+    /** App reference */
+    App: any;
+    setApp(app: any): void;
+    setUserDefinedConfig(config: Record<string, any>): void;
+    /** Set root element — the container this view renders into */
+    setRootElement(rootElement: HtmlInterface): void;
+    /** Render the view's element tree into rootElement */
+    render(): ViewInterface | FragmentInterface | null;
+
+    prerender(): ViewInterface | FragmentInterface | null;
+
+    superView: ViewControllerInterface | null;
+
+    /** Whether this controller IS a layout (super view) */
+    isSuperView: boolean;
+    /** Mark this controller as a super view (layout) */
+    setIsSuperView(isSuper: boolean): void;
+    /** Set the parent layout's controller */
+    setSuperView(superView: ViewControllerInterface): void;
+    /** Track the original page view's controller for block mounting */
+    originView: ViewControllerInterface | null;
+    /** Set the origin (page) controller reference */
+    setOriginView(origin: ViewControllerInterface): void;
+    setChainFromOrigin(): void;
+    ejectOriginChain(): void;
+    destroy(): void;
+
+
+
+    /** Get config value with optional default */
+    getConfig(key?: string, defaultValue?: any): any;
+    getConfig(): ViewControllerConfig;
+}
+
+// ─── View Config Types ───────────────────────────────────────────
+
+export type ViewConfig = {
+    hasSuperView?: boolean;
+    viewType?: 'view' | 'layout' | 'component' | 'template';
+    sections?: Record<string, ViewRenderFactory>;
+    hasAwaitData?: boolean;
+    hasFetchData?: boolean;
+    useVars?: boolean;
+    hasSections?: boolean;
+    hasSectionPreload?: boolean;
+    hasPrerender?: boolean;
+    renderLongSections?: Record<string, any>;
+    renderSections?: Record<string, any>;
+    prerenderSections?: Record<string, any>;
+    [key: string]: any;
+}
+
+export type ViewRuntimeConfig = {
+    data?: Record<string, any>;
+
+    fetch?: {
+        url: string;
+        method?: string;
+        headers?: Record<string, string>;
+        body?: any;
+    } | null;
+
+    viewId?: string;
+    path?: string;
+    superView?: string | null;
+    subscribe?: boolean;
+    scripts?: any[];
+    styles?: any[];
+    resources?: any[];
+    commitConstructorData?: () => void;
+    updateVariableData?: (data: Record<string, any>) => void;
+    updateVariableItemData?: (key: string, value: any) => void;
+    prerender?: ViewRenderFactory | null;
+    render?: ViewRenderFactory | null;
+    [key: string]: any;
+}
+export type ViewControllerConfig = ViewConfig & ViewRuntimeConfig;

package/src/core/contracts/ViewInterface.ts

@@ -0,0 +1,31 @@
+import type { OneObjectType } from "../types/utils";
+import type { ViewControllerInterface, ViewType } from "./ViewControllerInterface";
+import type { FragmentInterface } from "./ElementInterface";
+
+// ─── View Interface ──────────────────────────────────────────────
+
+export interface ViewInterface {
+    oneType: OneObjectType;
+    __ctrl__: ViewControllerInterface;
+    path: string;
+    viewType: ViewType;
+    [key: string]: any;
+}
+
+// ─── View Types ──────────────────────────────────────────────────
+
+/** Render factory for a View — compiled output calls this to build the DOM tree */
+export type ViewRenderFactory = () => FragmentInterface | ViewInterface | null;
+
+/** View class constructor signature */
+export type ViewConstructor = new (path: string, viewType: 'view' | 'layout' | 'component', viewControllerClass?: any) => ViewInterface;
+
+/** View lifecycle hooks — user can implement any of these */
+export interface ViewLifecycleHooks {
+    onInit?(): void | Promise<void>;
+    onMounted?(): void | Promise<void>;
+    onUpdated?(): void | Promise<void>;
+    onDestroy?(): void | Promise<void>;
+    onActivated?(): void | Promise<void>;
+    onDeactivated?(): void | Promise<void>;
+}

package/src/core/contracts/ViewManagerInterface.ts

@@ -0,0 +1,45 @@
+import type { ViewInterface } from "./ViewInterface";
+import type { ApplicationInterface } from "./ApplicationInterface";
+import { RouterNavigationType } from "./RouterInterface";
+
+
+// ─── ViewManager Interface ───────────────────────────────────────
+
+export interface ActiveViewInfo {
+    view: ViewInterface;
+    path: string;
+    isLayout: boolean;
+    isActive: boolean;
+}
+
+export interface ViewManagerInterface {
+    [key: string]: any;
+    /** Set DI container */
+    setApp(app: ApplicationInterface): void;
+    /** Set root DOM container */
+    setContainer(container: HTMLElement): void;
+    /** Get root container */
+    getContainer(): HTMLElement | null;
+    /** Register view modules by name */
+    setViewRegistry(registry: Record<string, ((...args: any[]) => any) | (() => Promise<any>)>): void;
+    /** Register a single view module */
+    registerView(name: string, loader: ((...args: any[]) => any) | (() => Promise<any>)): void;
+    /** Initialize with optional config */
+    init(config?: { container?: HTMLElement; registry?: Record<string, any> }): void;
+    /** Mount a view by name — main entry point */
+    mountView(name: string, data?: Record<string, any>, route?: any, navigationType?: RouterNavigationType ): any;
+    /** Unmount all active views */
+    unmountAll(): void;
+    /** Unmount a specific view by path */
+    unmountView(path: string): void;
+    /** Get currently active page view */
+    getCurrentView(): ViewInterface | null;
+    /** Get current layout view */
+    getCurrentLayout(): ViewInterface | null;
+    /** Get full view stack */
+    getViewStack(): ViewInterface[];
+    /** Check if a view is mounted */
+    isViewMounted(path: string): boolean;
+    /** Full destroy */
+    destroy(): void;
+}

package/src/core/contracts/ViewStateInterface.ts

@@ -0,0 +1,47 @@
+// ─── ViewState Interface ─────────────────────────────────────────
+
+export interface ViewStateInterface {
+    /** StateManager accessor */
+    __: StateManagerInterface;
+    /** Subscribe to state changes */
+    on(key: string | number | string[] | Record<string, (value: any) => void>, callback?: (value: any) => void): () => void;
+    /** Unsubscribe */
+    off(key: string | number | string[] | Record<string, (value: any) => void>, callback?: (value: any) => void): void;
+    [key: string]: any;
+}
+
+export interface StateManagerInterface {
+    /** Create reactive state — returns [value, setter, key] */
+    useState(value: any, key?: string | number): [any, (newValue: any) => void, string | number];
+    /** Update state by key */
+    updateStateByKey(key: string | number, value: any): any;
+    /** Get state value by key (supports nested paths: 'user.name') */
+    getStateByKey(key: string | number): any;
+    /** Subscribe to state changes */
+    subscribe(key: string | number | string[] | Record<string, (value: any) => void>, callback?: (value: any) => void): () => void;
+    /** Unsubscribe */
+    unsubscribe(key: string | number | string[] | Record<string, (value: any) => void>, callback?: (value: any) => void): void;
+    /** Register shorthand — useState alias */
+    register(key: string | number, value: any): (newValue: any) => void;
+    /** Destroy — cleanup all listeners and states */
+    destroy(): void;
+}
+
+// ─── State Types ─────────────────────────────────────────────────
+
+/** State listener callback */
+export type StateListener = (value: any) => void;
+
+/** Multi-key state listener */
+export interface MultiKeyStateListener {
+    keys: Set<string | number>;
+    callback: (values: Record<string, any>) => void;
+    called: boolean;
+}
+
+/** State item stored internally by StateManager */
+export interface StateItem {
+    value: any;
+    setValue: (value: any) => void;
+    key: string | number;
+}

package/src/core/contracts/common.ts

@@ -0,0 +1,27 @@
+export type InitMode = 'create' | 'hydrate';
+export enum InitModes {
+    CREATE = 'create',
+    HYDRATE = 'hydrate'
+}
+/**
+ * Common types and utilities for OneView contracts
+ * This file defines shared types and enums used across OneView's contracts, such as initialization modes and system keys for HTML elements.
+ * 
+ * Key exports:
+ */
+/**
+ * System keys for HTML elements used by OneView.
+ * These keys are used to store metadata on HTML elements, such as IDs and view information.
+ * @name ESK (Element System Keys)
+ * @enum {string}
+ * @property {string} ID - Key for unique element ID
+ * @property {string} VIEW_ID - Key for associated view ID
+ * @property {string} BLOCK_NAME - Key for block name in block outlets
+ * @property {string} BLOCKOUTLET_NAME - Key for block outlet name
+ */
+export enum ESK {
+    ID = 'data-one-id',
+    VIEW_ID = 'data-one-view-id',
+    BLOCK_NAME = 'data-one-block-name',
+    BLOCKOUTLET_NAME = 'data-one-blockoutlet-name'
+}

package/src/core/contracts/utils.ts

@@ -0,0 +1,23 @@
+// ─── Barrel Re-exports ───────────────────────────────────────────
+// All interfaces and related types re-exported for backward compatibility
+
+export type { LoopContextInterface } from "./LoopContextInterface";
+export type { ViewStateInterface, StateManagerInterface, StateListener, MultiKeyStateListener, StateItem } from "./ViewStateInterface";
+export type { OneNodeInterface, HtmlInterface, TextInterface, OutputInterface, FragmentInterface, OneElementConfig, HtmlElementConfig, OneElementEventHandler, OneElementChildren, OneChildrenFactoryOutput, OneChildrenFactory } from "./ElementInterface";
+export type { ReactiveInterface, ReactiveRenderFn, ReactiveChildrenFactory, ReactiveConfig } from "./ReactiveInterface";
+export type { BlockInterface, BlockOutletInterface, BlockManagerInterface, BlockRenderFactory } from "./BlockInterface";
+export type { ViewControllerInterface, ViewType, ViewConfig, ViewRuntimeConfig } from "./ViewControllerInterface";
+export type { ViewInterface, ViewRenderFactory, ViewConstructor, ViewLifecycleHooks } from "./ViewInterface";
+export type { ComponentInterface } from "./ComponentInterface";
+export type { ApplicationInterface, AppFactory, ServiceKey, ServiceFactory, ServiceBinding } from "./ApplicationInterface";
+export type { ServiceProviderInterface } from "./ServiceProviderInterface";
+export type { ViewCacheInterface } from "./ViewCacheInterface";
+export type { ViewManagerInterface, ActiveViewInfo } from "./ViewManagerInterface";
+export type { RouterInterface } from "./RouterInterface";
+export type { HelperInterface, CollectionProxyInterface } from "./HelperInterface";
+export type { EventServiceInterface, EventCallback } from "./EventServiceInterface";
+export type { HttpServiceInterface, HttpRequestConfig, HttpResponse, HttpInterceptor } from "./HttpServiceInterface";
+export type { StoreServiceInterface } from "./StoreServiceInterface";
+export type { StorageServiceInterface, StorageEventCallback } from "./StorageServiceInterface";
+export type { LoggerServiceInterface, LoggerConfig, LogEntry, LogLevel } from "./LoggerServiceInterface";
+

package/src/core/contracts/views.ts

@@ -0,0 +1,23 @@
+import { HtmlInterface, OneElementChildren } from "./ElementInterface";
+import { ViewControllerInterface } from "./utils";
+
+export type SectionItemType = 'static' | 'dynamic' | 'async' | 'reactive';
+export type SectionContentType = 'text' | 'html'
+export type SectionContentRenderer = (parentElement?: HtmlInterface | null | undefined) => string | OneElementChildren;
+export type SectionConstruvtorArgs = {
+    ctx?: ViewControllerInterface | null;
+    name: string;
+    type: SectionItemType;
+    contentType?: SectionContentType;
+    stateKeys?: string[];
+    renderFactory: SectionContentRenderer;
+    [key: string]: any;
+}
+export interface SectionInterface {
+    ctx? : ViewControllerInterface | null;
+    name: string;
+    type: SectionItemType;
+    contentType?: SectionContentType;
+    stateKeys?: string[];
+    renderFactory?: SectionContentRenderer;
+}

package/src/core/elements/Block.ts

@@ -0,0 +1,113 @@
+import type { BlockInterface, BlockRenderFactory } from "../contracts/BlockInterface";
+import { InitMode } from "../contracts/common";
+import type { FragmentInterface, HtmlInterface } from "../contracts/ElementInterface";
+import type { ReactiveInterface } from "../contracts/ReactiveInterface";
+import type { ViewControllerInterface } from "../contracts/ViewControllerInterface";
+import { generateUUID } from "../hellpers/utils";
+import markerRegistry from "../services/MarkerRegistry";
+import type { OneObjectType } from "../types/utils";
+import { Fragment } from "./Fragment";
+/**
+ * Block — a named mounting slot used in layout views.
+ * 
+ * In a layout (super view), you declare blocks like `@useBlock('content')`.
+ * Each block is a Reactive region that mounts/unmounts page view content.
+ * 
+ * Key behaviors:
+ *   - Only active when the layout view is active
+ *   - Caches previously mounted view content (DOM nodes) so that
+ *     navigating back doesn't re-render and lose user state
+ *   - Tracks which viewId is currently active in this slot
+ * 
+ * Flow:
+ *   1. Layout declares: `@useBlock('content')` → creates Block('content')
+ *   2. Router navigates to page → BlockManager.mount('content', viewId, factory)
+ *   3. Block caches old content, mounts new content
+ *   4. Browser back → BlockManager restores cached content without re-render
+ */
+export class Block implements BlockInterface {
+    oneType: OneObjectType = 'Block';
+    id: string;
+    name: string;
+    ctx: ViewControllerInterface;
+    viewId: string | null = null;
+    fragment: FragmentInterface | null = null;
+    contentRenderFactory: BlockRenderFactory | null = null;
+    openTag: Comment;
+    closeTag: Comment;
+
+    domChildren: Node[] = [];
+    initMode?: InitMode | undefined;
+    parentElement: HtmlInterface | null = null;
+
+    public readonly isOneBlock = true;
+    public readonly isOneElement = false;
+    
+    constructor({
+        ctx,
+        name,
+        viewId = null,
+        contentRenderFactory = (parentElement: HtmlInterface) => [],
+        id = null,
+        initMode = 'create'
+    }: {
+        ctx: ViewControllerInterface;
+        name: string;
+        viewId?: string | null;
+        contentRenderFactory?: BlockRenderFactory;
+        id?: string | null;
+        initMode?: InitMode;
+    }) {
+        this.id = `${this.viewId}-${id ?? generateUUID(10)}`; // Unique ID for debugging
+        this.ctx = ctx;
+        this.name = name;
+        this.viewId = viewId ?? ctx.viewId; // Associate block with current viewId
+        this.initMode = initMode;
+        this.contentRenderFactory = contentRenderFactory || ((parentElement: HtmlInterface) => []);
+        markerRegistry.register('block', this.id, { name, viewId }); // Register block in marker registry
+        this.openTag = markerRegistry.createMarkerStart('block', this.id);
+        this.closeTag = markerRegistry.createMarkerEnd('block', this.id);
+
+    }
+
+    /** Initialize the block */
+    init(): void {
+        if (this.initMode === 'hydrate') {
+            // Hydration logic here
+        } else {
+            // Creation logic here
+        }
+    }
+
+    /** Render the block's content into the parent element */
+    render(): void {
+
+        if (!this.contentRenderFactory) return;
+
+        // Generate content using the factory
+        const content = this.contentRenderFactory(this.parentElement!);
+
+    }
+
+    mount(mountCtx: ViewControllerInterface, parentElement: HtmlInterface): any {
+        if(this.fragment) {
+            this.fragment.parent = parentElement;
+            this.fragment.render();
+        }
+    }
+    unmount(): void {
+        // Unmount logic (e.g. hide or remove DOM nodes, stop reactions)
+    }
+    destroy(): void {
+        // Cleanup logic (e.g. remove DOM nodes, clear caches)
+    }
+    update(): void {
+        // Update logic (e.g. re-render content on state change)
+    }
+
+     /** Set the block's parent element (used for mounting) */
+     setParentElement(parentElement: HtmlInterface | null): void {
+        this.parentElement = parentElement;
+    }
+
+}