@lark.js/mvc 0.0.14 → 0.0.16

package/dist/index.d.ts

@@ -26,16 +26,6 @@ declare const CALL_BREAK_TIME = 48;
 /** Increment global counter and return new value */
 declare function nextCounter(): number;
 
-/**
- * Dynamically inject CSS styles into the document head.
- * Returns a cleanup function to remove the injected styles.
- *
- * @param styleIdOrPairs - Style ID string or array of [id, content] pairs
- * @param css - CSS content string (only used when first arg is string)
- * @returns Cleanup function to remove the styles
- */
-declare function applyStyle(styleIdOrPairs: string | string[], css?: string): () => void;
-
 /**
  * Mark/Unmark: signature-based lifecycle tracking for async callbacks.
  *
@@ -64,444 +54,77 @@ declare function mark(host: object, key: string): () => boolean;
 declare function unmark(host: object): void;
 
 /**
- * Multi-cast event emitter class.
- *
- * @example
- * const emitter = new EventEmitter();
- * emitter.on('change', (data) => console.log(data));
- * emitter.fire('change', { key: 'value' });
- */
-declare class EventEmitter<T = unknown> implements EventEmitterInterface<T> {
-    /** Event listeners: prefixed key -> listener array */
-    listeners: Map<string, EventListenerEntry[]>;
-    /** Number of `fire()` calls currently on the stack (re-entrancy depth). */
-    private firingDepth;
-    /** Keys whose listener list needs compaction after firing settles. */
-    private pendingCompaction;
-    /**
-     * Bind event listener.
-     */
-    on(event: string, handler: (this: T, e: ChangeEvent) => void): this;
-    /**
-     * Unbind event listener.
-     * If handler is provided, removes only that handler.
-     * If no handler, removes all handlers for the event.
-     */
-    off(event: string, handler?: AnyFunc): this;
-    /**
-     * Fire event, execute all bound handlers. Safe for re-entrant `off()` calls
-     * during dispatch: removed handlers are replaced with noop and compacted
-     * after the outermost fire returns.
-     *
-     * @param event - Event name
-     * @param data - Event data (type property added automatically)
-     * @param remove - Whether to remove all handlers after firing
-     * @param lastToFirst - Whether to execute handlers in reverse order
-     */
-    fire(event: string, data?: Record<string, unknown>, remove?: boolean, lastToFirst?: boolean): this;
-}
-
-/**
- * Minimal HMR context interface.
- * Compatible with Vite's `import.meta.hot` and webpack's `module.hot`.
- * Defined here to avoid depending on bundler-specific type packages.
+ * Register a View setup function for a given view path.
+ * Called after module loading completes (or up front during boot).
  */
-interface HotContext {
-    /** Accept a self-update. The callback receives the new module namespace. */
-    accept(cb?: (mod: {
-        default?: unknown;
-    } | undefined) => void): void;
-    /** Register a cleanup callback that runs before this module is replaced. */
-    dispose(cb: (data: unknown) => void): void;
-    /** Force a full page reload (fallback when HMR cannot handle the update). */
-    invalidate(): void;
-}
+declare function registerViewClass(viewPath: string, setup: ViewSetup): void;
 /**
- * Find all currently mounted frames whose viewPath matches the given path,
- * and re-mount them.
- *
- * After a new View class is registered via `registerViewClass`, calling this
- * function triggers `frame.mountView()` on each matching frame. Since the new
- * class is already in the registry, `Frame.mountView` takes the synchronous
- * path (`getViewClass` returns the class immediately).
- *
- * @param viewPath - The view path to match (e.g. 'home', 'components/list')
+ * Invalidate a View setup from the registry.
+ * Used by HMR to force re-loading of a view module.
  */
-declare function reloadViews(viewPath: string): void;
+declare function invalidateViewClass(viewPath: string): void;
 
 /**
- * Base View class.
- * Views are created via View.extend() and mounted by Frame.
+ * Create a frame object. Called internally by mountFrame / createRoot.
+ * Not intended for direct user use — use `Frame.createRoot()` or
+ * `frame.mountFrame()` instead.
+ *
+ * @internal
  */
-declare class View implements ViewInterface {
-    /** View ID (same as owner frame ID) */
-    id: string;
-    /** Owner frame */
-    owner: FrameInterface | number;
-    /** Updater instance */
-    updater: UpdaterInterface;
-    /** Signature: > 0 means active, incremented on render, 0 = destroyed */
-    signature: number;
-    /** Whether rendered at least once */
-    rendered?: boolean;
-    /** Whether view has template */
-    template?: ViewTemplate;
-    /** Location observation config */
-    locationObserved: ViewLocationObserved;
-    /** Observed state keys */
-    observedStateKeys?: string[];
-    /** Resource map */
-    resources: Record<string, ViewResourceEntry>;
-    /** Whether endUpdate pending */
-    endUpdatePending?: number;
-    /** Internal event storage */
-    private _events;
-    /** Prototype-stored event maps shape (set by View.prepare). */
-    private get protoEventState();
-    /**
-     * Event bitmask map: eventType -> bitmask (1=root, 2=selector).
-     * Read from prototype ($evtObjMap) set by View.prepare.
-     * Using a getter avoids ES6 class field shadowing the prototype value.
-     */
-    get eventObjectMap(): Record<string, number>;
-    /**
-     * Selector event map: eventType -> selector list.
-     * Read from prototype ($selMap) set by View.prepare.
-     */
-    get eventSelectorMap(): Record<string, ViewEventSelectorEntry>;
-    /**
-     * Global event list: [{handler, element, eventName, modifiers}].
-     * Read from prototype ($globalEvtList) set by View.prepare.
-     */
-    get globalEventList(): ViewGlobalEventEntry[];
-    /**
-     * Initialize view (called by Frame when mounting).
-     */
-    init(): void;
-    /**
-     * Render view template (called by Frame after init).
-     * Wrapped by View.wrapMethod to manage signature + resources.
-     */
-    render(): void;
-    on(event: string, handler: AnyFunc): this;
-    off(event: string, handler?: AnyFunc): this;
-    fire(event: string, data?: Record<string, unknown>, remove?: boolean, lastToFirst?: boolean): this;
-    /** Get the owning frame, asserting it has been bound. */
-    private get ownerFrame();
-    /**
-     * Notify view that HTML update is about to begin.
-     * Unmounts child frames in the update zone.
-     */
-    beginUpdate(id?: string): void;
-    /**
-     * Notify view that HTML update has ended.
-     * Mounts child frames in the update zone and runs deferred invokes.
-     */
-    endUpdate(id?: string, inner?: boolean): void;
-    /**
-     * Wrap an async callback to check view signature before executing.
-     * If the view has been re-rendered or destroyed, the callback is skipped.
-     */
-    wrapAsync<Fn extends AnyFunc>(fn: Fn, context?: unknown): (...args: Parameters<Fn>) => ReturnType<Fn> | undefined;
-    /**
-     * Observe location parameters or path changes.
-     * When observed keys change, render() is called automatically.
-     */
-    observeLocation(params: string | string[] | Record<string, unknown>, observePath?: boolean): void;
-    /**
-     * Observe State data keys for changes.
-     * When observed keys change via State.digest(), render() is called.
-     */
-    observeState(observedKeys: string | string[]): void;
-    /**
-     * Capture (register) a resource under a key.
-     * If a resource already exists at that key, it's destroyed first.
-     * When destroyOnRender=true, the resource is destroyed on next render call.
-     */
-    capture(key: string, resource?: unknown, destroyOnRender?: boolean): unknown;
-    /**
-     * Release a captured resource.
-     * If destroy=true, calls the resource's destroy() method.
-     */
-    release(key: string, destroy?: boolean): unknown;
-    /**
-     * Set up a leave confirmation for route changes and page unload.
-     */
-    leaveTip(message: string, condition: () => boolean): void;
-    /** Collected makes from mixins */
-    static makes?: AnyFunc[];
-    /**
-     * Prepare a View subclass by scanning its prototype for event method patterns.
-     * Pattern: `$?name<eventType1,eventType2>(&modifiers)`
-     *
-     * Only runs once per View subclass (guarded by makes marker).
-     * Called from Frame.mountView before creating the view instance.
-     */
-    static prepare(oView: typeof View): AnyFunc[];
-    /**
-     * Bind or unbind event delegation for a view instance.
-     * Called from Frame during mount/unmount.
-     */
-    static delegateEvents(view: ViewInterface, destroy?: boolean): void;
-    /**
-     * Destroy all resources managed by a view.
-     * If lastly=true, destroy ALL resources; otherwise only destroyOnRender ones.
-     */
-    static destroyAllResources(view: ViewInterface, lastly: boolean): void;
-    /**
-     * Process deferred invoke calls on a frame.
-     */
-    static runInvokes(frame: FrameInterface): void;
-    /**
-     * Wrap a method on the prototype to add signature checking and resource cleanup.
-     */
-    private static wrapMethod;
-    /**
-     * When two mixins define the same event method, merge them into
-     * a single function that calls both in sequence.
-     */
-    private static processMixinsSameEvent;
-    /**
-     * Merge an array of mixin objects into the view prototype.
-     */
-    private static mergeMixins;
-    /**
-     * Destroy a single resource entry.
-     */
-    private static destroyResource;
-    /**
-     * Extend View to create a new View subclass.
-     *
-     * Supports:
-     * - props.make: constructor-like init (called with initParams + {node, deep})
-     * - props.mixins: array of mixin objects
-     * - Event method patterns: `'name<click>'` etc.
-     */
-    static extend(props?: ThisType<ViewInterface> & Record<string, unknown>, statics?: Record<string, unknown>): typeof View;
-    /**
-     * Merge mixins into View prototype.
-     */
-    static merge(this: typeof View, ...mixins: Record<string, unknown>[]): typeof View;
-    /**
-     * Set up HMR accept handler for this view module.
-     *
-     * When the module is hot-replaced, the new View class is extracted from
-     * the new module, registered in the view registry, and all currently
-     * mounted frames using this viewPath are re-mounted.
-     *
-     * No-op when `hot` is undefined (production / non-HMR environment).
-     *
-     * ```ts
-     * if (import.meta.hot) {
-     *   HomeView.accept(import.meta.hot, 'home');
-     * }
-     * ```
-     */
-    static accept(hot: HotContext | undefined, viewPath: string): void;
-    /**
-     * Set up HMR dispose handler for this view module.
-     *
-     * When the module is about to be replaced, the old View class is removed
-     * from the registry so subsequent lookups don't return the stale class.
-     *
-     * No-op when `hot` is undefined (production / non-HMR environment).
-     *
-     * ```ts
-     * if (import.meta.hot) {
-     *   HomeView.dispose(import.meta.hot, 'home');
-     * }
-     * ```
-     */
-    static dispose(hot: HotContext | undefined, viewPath: string): void;
+declare function createFrame(id: string, parentId?: string): FrameObj;
+interface FrameApi {
+    get(id: string): FrameObj | undefined;
+    getAll(): Map<string, FrameObj>;
+    getRoot(): FrameObj | undefined;
+    createRoot(rootId?: string): FrameObj;
+    on(event: string, handler: AnyFunc): FrameApi;
+    off(event: string, handler?: AnyFunc): FrameApi;
+    fire(event: string, data?: Record<string, unknown>): void;
 }
+declare const Frame: FrameApi;
+
 /**
- * Type-safe wrapper around `View.extend()`.
+ * Define a view via a setup function (hooks style).
  *
- * `View.extend({...})` accepts any object literal, and inside its methods
- * `this` is typed only as the base `ViewInterface` — so any custom state
- * field or helper method requires a `(this as MyView).foo` strong-cast at
- * every call site.
+ * The setup function runs once on mount, receives a `ViewCtx`, and returns
+ * `{ template, events, assign? }`. Hooks (`useState`, `useEffect`, etc.)
+ * can be called inside setup to manage state and side effects.
  *
- * `defineView()` threads the literal's own shape back into `this` via
- * `ThisType<P & ViewInterface>`, so `this.foo` is typed automatically:
- *
- * ```ts
- * const HomeView = defineView({
- *   $title: "Home",
- *   init() {
- *     this.updater.set({ title: this.$title }); // both typed
- *   },
- *   greet() {
- *     return `hello ${this.$title}`;
- *   },
+ * @example
+ * const HomeView = defineView((ctx, params) => {
+ *   const [getCount, setCount] = useState('count', 0);
+ *   return {
+ *     template,
+ *     events: { "incr<click>": (e) => setCount(getCount() + 1) },
+ *   };
  * });
- * ```
- *
- * Runtime semantics are identical to `View.extend(props, statics)` — this is
- * a zero-cost type-only wrapper.
- */
-declare function defineView<P extends Record<string, unknown>>(props: P & ThisType<P & ViewInterface>, statics?: Record<string, unknown>): typeof View;
-
-/**
- * Register a View class for a given view path.
- * Called after module loading completes (or up front during boot).
- */
-declare function registerViewClass(viewPath: string, ViewClass: typeof View): void;
-/**
- * Invalidate a View class from the registry.
- * Used by HMR to force re-loading of a view module.
  */
-declare function invalidateViewClass(viewPath: string): void;
+declare function defineView(setup: ViewSetup): ViewSetup;
 
 /**
- * Frame (View Frame) class for view lifecycle management.
- * Each frame owns a view and manages child frames.
+ * Create a multi-cast event emitter.
+ *
+ * @returns An emitter API object with `on`, `off`, `fire` methods.
+ *   The object also supports the `on{EventName}` convention: setting
+ *   `emitter.onDestroy = fn` causes `fire("destroy", ...)` to call `fn`.
  *
+ * @example
+ * const emitter = createEmitter();
+ * emitter.on('change', (data) => console.log(data));
+ * emitter.fire('change', { key: 'value' });
  */
-declare class Frame extends EventEmitter implements FrameInterface {
-    /** Frame ID (same as owner DOM element ID) */
-    readonly id: string;
-    /** Parent Frame ID */
-    private _parentId;
-    get parentId(): string | undefined;
-    /** Children map: id -> id */
-    childrenMap: Record<string, string>;
-    /** Children count */
-    childrenCount: number;
-    /** Ready count (children that have fired 'created') */
-    readyCount: number;
-    /** Set of child frame IDs that have fired 'created' */
-    readyMap: Set<string>;
-    /** View instance */
-    viewInstance?: ViewInterface;
-    /** Get view instance (read-only) */
-    get view(): ViewInterface | undefined;
-    /** Invoke list for deferred method calls */
-    invokeList: FrameInvokeEntry[];
-    /** Signature for async operation tracking */
-    signature: number;
-    /** Whether view has altered */
-    hasAltered: number;
-    /** Whether view is destroyed */
-    destroyed: number;
-    /** View path (v-lark attribute value) */
-    viewPath?: string;
-    /** Original template before mount */
-    originalTemplate?: string;
-    /** Hold fire created flag */
-    holdFireCreated: number;
-    /** Children created flag */
-    childrenCreated: number;
-    /** Children alter flag */
-    childrenAlter: number;
-    constructor(id: string, parentId?: string);
-    /**
-     * Mount a view to this frame.
-     *
-     * Complete flow:
-     * 1. Parse viewPath, translate query params from parent
-     * 2. Unmount current view
-     * 3. Load View class (via require or provided ViewClass)
-     * 4. View_Prepare (scan event methods)
-     * 5. Create View instance
-     * 6. View_DelegateEvents (bind DOM events)
-     * 7. Call view.init()
-     * 8. If view has template, call render via Updater
-     * 9. If no template, call endUpdate directly
-     */
-    mountView(viewPath: string, viewInitParams?: Record<string, unknown>): void;
-    /**
-     * Internal: actually mount the view after class is loaded.
-     */
-    doMountView(ViewClass: typeof View, params: Record<string, unknown>, node: HTMLElement, sign: number): void;
-    /**
-     * Unmount current view.
-     */
-    unmountView(): void;
-    /**
-     * Mount a child frame.
-     */
-    mountFrame(frameId: string, viewPath: string, viewInitParams?: Record<string, unknown>): FrameInterface;
-    /**
-     * Unmount a child frame.
-     */
-    unmountFrame(id?: string): void;
-    /**
-     * Mount all views in a zone.
-     */
-    mountZone(zoneId?: string): void;
-    /**
-     * Unmount all views in a zone.
-     */
-    unmountZone(zoneId?: string): void;
-    /**
-     * Get all child frame IDs.
-     */
-    children(): string[];
-    /**
-     * Get parent frame at given level.
-     * @param level - How many levels up (default 1)
-     */
-    parent(level?: number): Frame | undefined;
-    /**
-     * Invoke a method on the view.
-     */
-    invoke(name: string, args?: unknown[]): unknown;
-    /**
-     * Type-safe variant of `invoke`.
-     *
-     * `invoke()` accepts any string and any args, which silently hides
-     * mismatched call sites when a method gets renamed. `invokeTyped` carries
-     * the view's method signature through TypeScript so the compiler catches
-     * those mistakes:
-     *
-     * ```ts
-     * type Home = View & { loadData(id: string): Promise<void> };
-     * frame.invokeTyped<Home, "loadData">("loadData", ["user-1"]);
-     * ```
-     *
-     * Behavior is identical to `invoke` at runtime — same defer / direct-call
-     * paths — so it's a drop-in safer overload.
-     */
-    invokeTyped<V extends Record<string, unknown>, K extends keyof V & string>(name: K, args: V[K] extends (...a: infer A) => unknown ? A : never[]): V[K] extends (...a: never[]) => infer R ? R | undefined : unknown;
-    /** Get frame by ID */
-    static get(id: string): Frame | undefined;
-    /** Get all frames */
-    static getAll(): Map<string, Frame>;
-    /**
-     * Returns the existing root frame, or `undefined` if none has been created.
-     * Pure getter — never creates a Frame, never touches the DOM.
-     *
-     * Use `Frame.createRoot(id)` to create the root explicitly during framework
-     * boot. For Micro-Frontend hosts that own multiple independent containers,
-     * use `new Frame(containerId)` directly so each MF mount has its own root.
-     */
-    static getRoot(): Frame | undefined;
-    /**
-     * Create (or return) the singleton root frame for this app.
-     *
-     * Idempotent: subsequent calls always return the original root regardless
-     * of `rootId` — so passing a different id later is silently ignored.
-     * `Framework.boot()` is the canonical caller; user code rarely needs this.
-     */
-    static createRoot(rootId?: string): Frame;
-    /** Bind event listener (static) */
-    static on(event: string, handler: AnyFunc): typeof Frame;
-    /** Unbind event listener (static) */
-    static off(event: string, handler?: AnyFunc): typeof Frame;
-    /** Fire event (static) */
-    static fire(event: string, data?: Record<string, unknown>): void;
-}
+declare function createEmitter<T = unknown>(): EmitterApi<T>;
 
 /**
  * Lark framework type definitions.
- * All shared types are defined here to eliminate type cheats across modules.
+ * All shared types are defined here to provide a single source of truth
+ * for module interfaces and to enforce type safety across the framework.
  *
  * Lark is a lightweight MVC frontend framework that provides:
- * - View: base view class with extend/merge inheritance and mixin support
- * - Router: hash-based two-phase route confirmation
+ * - View: functional view system via defineView() + ViewCtx + Hooks
+ * - Router: history/hash two-phase route confirmation
  * - State: simple cross-view observable singleton (recommended for simple cases)
- * - Store: zustand-aligned state management with create/getState/setState/subscribe
+ * - Store: zustand-aligned state management with createStore/getState/setState/subscribe
  *   (recommended for complex cases)
  * - Service: API request management with caching, queuing, and deduplication
  * - Frame: view frame managing view mount/unmount lifecycle
@@ -536,48 +159,6 @@ interface CacheOptions<T> {
     /** Comparator for sorting entries */
     sortComparator?: (a: CacheEntry<T>, b: CacheEntry<T>) => number;
 }
-/**
- * Cache interface providing LFU (Least Frequently Used) cache management.
- * Cache keys use a special prefix internally for namespace isolation.
- */
-interface CacheInterface<T = unknown> {
-    /**
-     * Set a cache resource. If the key exists, updates the value and increments frequency.
-     * Triggers LFU eviction when cache entries exceed capacity (maxSize + bufferSize).
-     * @param key Unique identifier for the cached resource
-     * @param resource The resource to cache
-     */
-    set(key: string, resource: T): void;
-    /**
-     * Get a cached resource. Access increments frequency count and timestamp for LFU ranking.
-     * Returns undefined if the key does not exist.
-     * @param key Cache resource key
-     */
-    get(key: string): T | undefined;
-    /**
-     * Remove a resource from cache by key. Triggers onRemove callback on deletion.
-     * @param key Cache resource key to remove
-     */
-    del(key: string): void;
-    /**
-     * Check if cache contains a resource for the given key.
-     * @param key Cache resource key
-     */
-    has(key: string): boolean;
-    /**
-     * Iterate over all cached resource values.
-     * @param callback Iteration callback receiving the cached value (may be undefined)
-     */
-    forEach(callback: (value: T | undefined) => void): void;
-    /**
-     * Number of cache entries.
-     */
-    readonly size: number;
-    /**
-     * Clear all cache entries. Triggers onRemove callback for each deleted entry.
-     */
-    clear(): void;
-}
 interface EventListenerEntry {
     /** Handler function */
     handler: AnyFunc;
@@ -691,7 +272,7 @@ interface DomRef {
     /** ID update list: [element, newId][] */
     idUpdates: [Element, string][];
     /** Views that need post-processing */
-    views: ViewInterface[];
+    views: ViewCtx[];
     /** DOM operation list: [opCode, parent, newChild?, oldChild?][] */
     domOps: DomOp[];
     /** Whether anything changed */
@@ -748,7 +329,7 @@ interface VDomRef {
     /** View ID (for placeholder replacement) */
     viewId: string;
     /** Sub-views that need re-rendering after diff */
-    viewRenders: ViewInterface[];
+    viewRenders: ViewCtx[];
     /** Deferred DOM property assignments: [element, propName, value][] */
     nodeProps: [Element, string, unknown][];
     /** Pending async operation count */
@@ -776,20 +357,6 @@ interface FrameInvokeEntry {
     /** Whether removed (args match) */
     removed?: boolean;
 }
-/** Mixin event handler with internal merge marker and handler list */
-interface MixinEventHandler extends AnyFunc {
-    /** Merged handler list */
-    handlerList?: AnyFunc[];
-    /** Mixin marker: 1 = this is a mixin function */
-    marker?: number;
-}
-/** View event selector map entry: handler name list with selector presence tracking */
-interface ViewEventSelectorEntry {
-    /** Selector name list */
-    selectors: string[];
-    /** Index signature for checking if selector is already registered */
-    [selector: string]: unknown;
-}
 /**
  * Compiled template function signature.
  * `data`/`viewId`/`refData` are required; subsequent encoder args are
@@ -810,18 +377,6 @@ interface ViewResourceEntry {
     /** Whether to destroy when render() is called */
     destroyOnRender: boolean;
 }
-interface ViewGlobalEventEntry {
-    /** Handler function */
-    handler: AnyFunc;
-    /** Bound handler wrapper (for removeEventListener) */
-    boundHandler?: AnyFunc;
-    /** DOM element (window/document) */
-    element: EventTarget;
-    /** Event name */
-    eventName: string;
-    /** Modifiers */
-    modifiers: Record<string, boolean>;
-}
 /**
  * View configuration for listening to URL changes.
  * Used as object parameter for `observeLocation()` method.
@@ -841,7 +396,13 @@ interface ViewObserveLocation {
  * Supports two-phase route confirmation mechanism: change (can reject) → changed.
  * Hash-based implementation using #! as default hash prefix.
  */
-interface RouterInterface extends EventEmitterInterface<RouterInterface> {
+interface RouterApi {
+    /** Bind event listener */
+    on(event: string, handler: (e?: ChangeEvent) => void): this;
+    /** Unbind event listener */
+    off(event: string, handler?: AnyFunc): this;
+    /** Fire event */
+    fire(event: string, data?: Record<string, unknown>, remove?: boolean, lastToFirst?: boolean): this;
     /**
      * Parse href into Location object.
      * Parses query and hash sections of href, returns structured routing information.
@@ -907,7 +468,7 @@ interface ServiceEvent extends ChangeEvent {
     /**
      * Data payload object carrying this request's data.
      */
-    readonly payload: PayloadInterface;
+    readonly payload: PayloadApi;
     /**
      * Error object, present if request throws an error, otherwise null.
      */
@@ -924,325 +485,178 @@ interface ViewEvent extends ChangeEvent {
     readonly id: string;
 }
 /**
- * Frame static event interface carrying associated Frame instance.
+ * Frame static event interface carrying associated Frame object.
  * Carried in Frame's add/remove static events.
  */
 interface FrameStaticEvent extends ChangeEvent {
     /**
-     * Associated Frame instance object.
+     * Associated Frame object.
      */
-    readonly frame: FrameInterface;
+    readonly frame: FrameObj;
 }
-interface ViewInterface extends EventEmitterInterface<ViewInterface> {
-    /**
-     * View ID (same as owner frame ID),
-     * DOM node ID where current view resides.
-     */
+/**
+ * Functional emitter API.
+ *
+ * Returned by `createEmitter()`. No `this` binding — handlers are called
+ * with `null` context. Methods return the API object for chaining.
+ */
+interface EmitterApi<T = unknown> {
+    on(name: string, fn: (e?: ChangeEvent) => void): EmitterApi<T>;
+    off(name: string, fn?: AnyFunc): EmitterApi<T>;
+    fire(name: string, data?: Record<string, unknown>, remove?: boolean, lastToFirst?: boolean): EmitterApi<T>;
+}
+/**
+ * Functional cache API.
+ *
+ * Returned by `createCache()`.
+ */
+interface CacheApi<T = unknown> {
+    set(key: string, resource: T): void;
+    get(key: string): T | undefined;
+    del(key: string): void;
+    has(key: string): boolean;
+    clear(): void;
+    forEach(callback: (value: T | undefined) => void): void;
+    getSize(): number;
+}
+/**
+ * Functional updater API.
+ *
+ * Returned by `createUpdater()`. `refData` is a property.
+ * `set()` returns the API object for chaining.
+ */
+interface UpdaterApi {
+    get: <T = unknown>(key?: string) => T;
+    set: (data: Record<string, unknown>, excludes?: ReadonlySet<string>) => UpdaterApi;
+    digest: (data?: Record<string, unknown>, excludes?: ReadonlySet<string>, callback?: () => void) => void;
+    forceDigest: () => void;
+    snapshot: () => UpdaterApi;
+    altered: () => boolean | undefined;
+    refData: Record<string, unknown>;
+    translate: (data: unknown) => unknown;
+    parse: (expr: string) => unknown;
+    getChangedKeys: () => ReadonlySet<string>;
+}
+/**
+ * Mutable reference cell — used for `signature` and `rendered` on `ViewCtx`.
+ * Wraps mutable state in a `Ref<T>` to avoid getter/setter syntax.
+ */
+interface Ref<T> {
+    value: T;
+}
+/**
+ * Functional view context.
+ *
+ * Passed as the first argument to every view setup function. Provides
+ * framework APIs without `this` binding.
+ */
+interface ViewCtx {
+    /** View ID (same as owner frame ID) */
     id: string;
-    /**
-     * Owner frame,
-     * Frame instance holding current view.
-     * May be numeric placeholder 0 before view initialization completes.
-     * TODO: Migrate numeric placeholder 0 to undefined or null
-     */
-    owner: FrameInterface | number;
-    /**
-     * Updater instance managing view data binding and DOM rendering.
-     */
-    updater: UpdaterInterface;
-    /**
-     * Signature: > 0 means active, incremented on render, 0 = destroyed */
-    signature: number;
+    /** Owner frame reference */
+    owner: FrameObj;
+    /** Updater API for data binding */
+    updater: UpdaterApi;
+    /** Signature: >0 means active, incremented on render, 0 = destroyed */
+    signature: Ref<number>;
     /** Whether rendered at least once */
-    rendered?: boolean;
-    /**
-     * View template function. Receives data + viewId + refData and a set of
-     * encoder helpers wired in by the Updater, and returns the rendered HTML.
-     */
-    template?: ViewTemplate | VDomTemplate;
-    /**
-     * Mixin object array for extending view functionality.
-     * Framework merges properties and methods from mixins into view prototype.
-     * Event method conflicts are automatically merged into sequential calls.
-     */
-    mixins?: Record<string, unknown>[];
+    rendered: Ref<boolean>;
+    /** View template function (accessed via getTemplate/setTemplate) */
+    getTemplate(): ViewTemplate | VDomTemplate | undefined;
+    setTemplate(v: ViewTemplate | VDomTemplate | undefined): void;
     /** Location observation config */
     locationObserved: ViewLocationObserved;
-    /** Observed state keys */
-    observedStateKeys?: string[];
+    /** Observed state keys (accessed via getObservedStateKeys/setObservedStateKeys) */
+    getObservedStateKeys(): string[] | undefined;
+    setObservedStateKeys(v: string[] | undefined): void;
     /** Resource map */
     resources: Record<string, ViewResourceEntry>;
-    /** Selector event map: eventType -> selector list */
-    eventSelectorMap: Record<string, ViewEventSelectorEntry>;
-    /** Event object map: eventType -> bitmask */
-    eventObjectMap: Record<string, number>;
-    /** Global event list */
-    globalEventList: ViewGlobalEventEntry[];
-    /** Whether endUpdate has been called (1 = pending) */
-    endUpdatePending?: number;
+    /** Internal emitter for lifecycle events ("destroy", "render", etc.) */
+    emitter: EmitterApi;
+    /** EndUpdate pending flag (accessed via getEndUpdatePending/setEndUpdatePending) */
+    getEndUpdatePending(): number | undefined;
+    setEndUpdatePending(v: number | undefined): void;
     /** Last rendered VDOM tree (only used when virtualDom is enabled) */
     vdom?: VDomNode;
-    /** Render method (wrapped) */
-    render(): void;
-    /**
-     * Init method called after view is mounted.
-     * Used for initialization logic.
-     * Framework passes two arguments during actual invocation:
-     * - initParams: initialization parameter object
-     * - options: contains `node: Element` and `deep: boolean`
-     */
-    init(): void;
     /** Wrapped render method */
     renderMethod?: AnyFunc;
-    /** endUpdate pending flag */
-    endUpdatePendingFlag?: number;
-    /**
-     * Notify view that HTML update is about to begin for a specific region.
-     * Framework unmounts child Frames in that region to prevent DOM diff from operating on unmounted nodes.
-     * @param id Region node ID to update, defaults to current view
-     */
-    beginUpdate: (id?: string) => void;
-    /**
-     * Notify view that HTML update has completed for a specific region.
-     * Framework mounts child Frames in that region and executes deferred invoke queue.
-     * @param id Region node ID that finished updating, defaults to current view
-     * @param inner Whether this is an internal framework call
-     */
-    endUpdate: (id?: string, inner?: boolean) => void;
-    /**
-     * Wrap async callback to ensure it only executes if view is not destroyed.
-     * In SPAs, async callbacks (e.g., setTimeout, AJAX) may execute after view is destroyed,
-     * causing errors when manipulating DOM.
-     * After wrapping with `wrapAsync`, framework automatically checks view state and only executes callback if view is alive.
-     * @param fn Callback function to wrap
-     * @param context `this` binding for callback execution, defaults to view itself
-     */
-    wrapAsync: <Fn extends AnyFunc>(fn: Fn, context?: unknown) => (...args: Parameters<Fn>) => ReturnType<Fn> | undefined;
-    /**
-     * Listen for URL bar changes, supports two calling modes:
-     * - `observeLocation("page,size", true)` pass parameter keys (comma-separated) and whether to observe path
-     * - `observeLocation({ params: ["page", "size"], path: true })` pass config object
-     * View automatically re-renders when observed parameters or path change.
-     * @param params Parameter keys to observe, supports comma-separated string, string array, or config object
-     * @param observePath Whether to observe path changes
-     */
-    observeLocation: (params: string | string[] | Record<string, unknown>, observePath?: boolean) => void;
-    /**
-     * Observe data changes for specified keys in State.
-     * View automatically re-renders when observed keys are updated via `State.digest()`.
-     * @param keys Comma-separated key string or string array
-     */
-    observeState: (keys: string | string[]) => void;
-    /**
-     * Hand over resource to current view for lifecycle management.
-     * Framework automatically calls resource's destroy method at appropriate time when view unmounts or re-renders.
-     * @param key Unique key for managed resource; if key already manages different resource, old resource is auto-destroyed
-     * @param resource Resource object to manage
-     * @param destroyOnRender Whether to auto-destroy resource when render method is called; Service instances typically need auto-destroy on render
-     */
-    capture: (key: string, resource?: unknown, destroyOnRender?: boolean) => unknown;
-    /**
-     * Release managed resource, returns the resource object regardless of destruction state.
-     * @param key Managed resource key
-     * @param destroy Whether to destroy resource (call its destroy method), defaults to true
-     */
-    release: (key: string, destroy?: boolean) => unknown;
-    /**
-     * Set leave prompt, e.g., when form has unsaved changes.
-     * Can prompt user to choose between leaving directly or saving before leaving.
-     * Framework calls condition function during route changes (change phase) and page unloads (beforeunload).
-     * Navigation is prevented if condition returns true.
-     * @param message Leave prompt message
-     * @param condition Function to determine whether to show leave prompt; returns true to prevent navigation
-     */
-    leaveTip: (message: string, condition: () => boolean) => void;
-    /**
-     * Assign method for incremental DOM updates.
-     * Framework uses DOM diff (in-memory real DOM diff) to update only changed portions,
-     * automatically handling child view mounting and unmounting.
-     * Returns true if DOM changed, undefined if no change.
-     * @param options Incremental update config, used internally by framework
-     */
-    assign?: (options?: unknown) => boolean | undefined;
-    /**
-     * Triggered when view is destroyed.
-     */
-    onDestroy?: (e?: ChangeEvent) => void;
-    /**
-     * Triggered when render method is called.
-     */
-    onRender?: (e?: ChangeEvent) => void;
-    /**
-     * Inherit View to create new view subclass.
-     * Supports props.make constructor, props.mixins, and event methods (e.g., `'name<click>'`).
-     * @param props Prototype object containing init, render, and other methods
-     * @param statics Object of static methods or properties
-     */
-    extend?<TProps = object, TStatics = object>(props?: ExtendThisType<TProps & ViewInterface>, statics?: TStatics): ViewInterface & TStatics;
-    /**
-     * Merge multiple mixin objects into View prototype.
-     * Existing properties are not overwritten; event method conflicts are automatically merged into sequential calls.
-     * @param args Mixin object list
-     */
-    merge?(...args: ExtendThisType<ViewInterface>[]): ViewInterface;
-    navigate?: (path: string, params?: Record<string, unknown>) => void;
+    /** Event handlers returned by setup (accessed via getEvents/setEvents) */
+    getEvents(): Record<string, AnyFunc> | undefined;
+    setEvents(v: Record<string, AnyFunc> | undefined): void;
+    /** Cleanup functions registered by useEffect */
+    cleanups: Array<() => void>;
+    /** assign function returned by setup (accessed via getAssign/setAssign) */
+    getAssign(): ((options?: unknown) => boolean | undefined) | undefined;
+    setAssign(v: ((options?: unknown) => boolean | undefined) | undefined): void;
+    render(): void;
+    init(params?: unknown): void;
+    beginUpdate(id?: string): void;
+    endUpdate(id?: string, inner?: boolean): void;
+    wrapAsync<Fn extends AnyFunc>(fn: Fn, context?: unknown): (...args: Parameters<Fn>) => ReturnType<Fn> | undefined;
+    observeLocation(params: string | string[] | Record<string, unknown>, observePath?: boolean): void;
+    observeState(keys: string | string[]): void;
+    capture(key: string, resource?: unknown, destroyOnRender?: boolean): unknown;
+    release(key: string, destroy?: boolean): unknown;
+    leaveTip(message: string, condition: () => boolean): void;
+    fire(event: string, data?: Record<string, unknown>, remove?: boolean, lastToFirst?: boolean): void;
+    on(event: string, handler: AnyFunc): () => void;
+    off(event: string, handler?: AnyFunc): void;
 }
-type ExtendThisType<T> = Record<string, unknown> & ThisType<T>;
 /**
- * Minimal Frame interface needed by View.
- * Frame (View Frame) is a view container managing view mount, unmount, and parent-child hierarchy.
- * Each Frame corresponds to one DOM node, associated with view via v-lark attribute.
+ * Functional frame object.
+ *
+ * Created by `createFrame()`. Uses `ViewCtx` for its view reference.
  */
-interface FrameInterface extends EventEmitterInterface<FrameInterface> {
-    /**
-     * DOM node ID where Frame resides.
-     */
+interface FrameObj {
     id: string;
-    /**
-     * View module path currently rendered by this Frame, e.g., "app/views/default".
-     */
-    readonly viewPath?: string;
-    /**
-     * Parent Frame ID, undefined if this is a top-level Frame.
-     */
+    /** View path (accessed via getViewPath) */
+    getViewPath(): string | undefined;
     readonly parentId: string | undefined;
-    /**
-     * Mount view to current Frame.
-     * Framework loads view class, creates instance, and renders view.
-     * @param viewPath View module path, e.g., "app/views/default"
-     * @param viewInitParams Parameters passed during view initialization, accessible in view's init method
-     */
+    view: ViewCtx | undefined;
+    invokeList: FrameInvokeEntry[];
+    signature: number;
+    destroyed: number;
+    hasAltered: number;
+    originalTemplate?: string;
+    holdFireCreated: number;
+    childrenCreated: number;
+    childrenAlter: number;
+    childrenMap: Record<string, string>;
+    childrenCount: number;
+    readyCount: number;
+    readyMap: Set<string>;
+    emitter: EmitterApi;
+    /** Dispatcher visit tag (set during dispatcherUpdate walk) */
+    dispatcherUpdateTag?: number;
     mountView(viewPath: string, viewInitParams?: Record<string, unknown>): void;
-    /**
-     * Unmount view from current Frame, triggers view's destroy event and cleans up resources.
-     */
     unmountView(): void;
-    /**
-     * Mount child Frame on specified DOM node and render view.
-     * @param frameId DOM node ID for rendering
-     * @param viewPath View path
-     * @param viewInitParams Parameters passed during view initialization
-     */
-    mountFrame: (frameId: string, viewPath: string, viewInitParams?: Record<string, unknown>) => FrameInterface;
-    /**
-     * Unmount child Frame from specified DOM node.
-     * @param id DOM node ID, defaults to current Frame if omitted
-     */
-    unmountFrame: (id?: string) => void;
-    /**
-     * Render all child views under specified node (scans v-lark attributes and mounts).
-     * @param zoneId DOM node ID, defaults to current Frame
-     */
-    mountZone: (zoneId?: string) => void;
-    /**
-     * Unmount all child views under specified node.
-     * @param zoneId DOM node ID, defaults to current Frame
-     */
-    unmountZone: (zoneId?: string) => void;
-    /**
-     * Get ancestor Frame, defaults to parent Frame (level=1).
-     * @param level Levels to traverse upward, defaults to 1
-     */
-    parent(level?: number): FrameInterface | undefined;
-    /**
-     * Invoke specified method on view in current Frame.
-     * If view is not rendered yet, invocation is deferred until render completes.
-     * @param name Method name
-     * @param args Arguments array passed to method
-     */
-    invoke: (name: string, args?: unknown[]) => unknown;
-    /**
-     * Triggered when all descendant views have been created.
-     */
-    onCreated?: (e?: ChangeEvent) => void;
-    /**
-     * Triggered when descendant views change.
-     */
-    onAlter?: (e?: ChangeEvent) => void;
-    /**
-     * Get Frame instance by ID, returns undefined if not exists.
-     * @param id Frame's DOM node ID
-     */
-    get?(id: string): FrameInterface | undefined;
-    /**
-     * Get all Frame instances map for current page.
-     */
-    getAll?(): Map<string, FrameInterface>;
-    /**
-     * Triggered when Frame is created and registered.
-     */
-    onAdd?: (e?: FrameStaticEvent) => void;
-    /**
-     * Triggered when Frame is destroyed and unregistered.
-     */
-    onRemove?: (e?: FrameStaticEvent) => void;
-    view: ViewInterface | undefined;
-    /**
-     * Get ID array of all child Frames for current Frame.
-     * Note: ID positions in array are not fixed.
-     */
-    children: () => string[];
-    invokeList: FrameInvokeEntry[];
+    mountFrame(frameId: string, viewPath: string, viewInitParams?: Record<string, unknown>): FrameObj;
+    unmountFrame(id?: string): void;
+    mountZone(zoneId?: string): void;
+    unmountZone(zoneId?: string): void;
+    parent(level?: number): FrameObj | undefined;
+    invoke(name: string, args?: unknown[]): unknown;
+    children(): string[];
+    on(event: string, handler: AnyFunc): FrameObj;
+    off(event: string, handler?: AnyFunc): FrameObj;
+    fire(event: string, data?: Record<string, unknown>): FrameObj;
 }
 /**
- * Minimal Updater interface needed by View.
- * View updater responsible for view data binding and data/page updates.
- * Each View instance has an Updater, triggering data/page updates via set/digest.
- * Internally executes complete pipeline: template rendering → DOM diff (in-memory real DOM diff) → DOM operations.
+ * View setup function — the functional API for defining views.
+ *
+ * Called once on mount with a `ViewCtx` and optional init params.
+ * Returns a descriptor with `template`, `events`, and optional `assign`.
  */
-interface UpdaterInterface {
-    /**
-     * Get data that has been set.
-     * Returns complete data object if key is omitted, otherwise returns value for specified key.
-     * @param key Data key name, omitted returns complete data object
-     */
-    get: <T = unknown>(key?: string) => T;
-    /**
-     * Set data and track changed keys.
-     * After set, must explicitly call `digest()` to commit changes to page.
-     * Returns this for chaining.
-     * @param data Data object, e.g., `{ a: 1, b: 2 }`
-     * @param excludes Set of keys to exclude from change tracking
-     */
-    set: (data: Record<string, unknown>, excludes?: ReadonlySet<string>) => UpdaterInterface;
-    /**
-     * Trigger page re-render.
-     * After set, must explicitly call `digest()` to commit changes to page.
-     * Internally executes complete pipeline: template rendering → DOM diff (in-memory real DOM diff) → DOM operations.
-     * @param data Optional data object, if provided calls `set()` first to set data
-     * @param excludes Set of keys to exclude from change tracking
-     * @param callback Callback executed after render completes
-     */
-    digest: (data?: Record<string, unknown>, excludes?: ReadonlySet<string>, callback?: () => void) => void;
-    /**
-     * Save a snapshot of current data for altered() detection.
-     * Works with `altered()` method to detect whether data has changed.
-     */
-    snapshot: () => UpdaterInterface;
-    /**
-     * Check if data has changed since last snapshot.
-     * Returns undefined if `snapshot()` has not been called.
-     */
-    altered: () => boolean | undefined;
-    /** Ref data for template rendering */
-    refData: Record<string, unknown>;
-    /**
-     * Translate raw reference data starting with @ symbol in template.
-     * Replaces `{{@refData}}` with actual value from refData.
-     * @param data Reference data to translate
-     */
-    translate(data: unknown): unknown;
-    /**
-     * Parse expression string.
-     * @param expr Expression string to parse
-     */
-    parse(expr: string): unknown;
-}
+type ViewSetup = (ctx: ViewCtx, params?: unknown) => {
+    template?: ViewTemplate | VDomTemplate;
+    events?: Record<string, AnyFunc>;
+    assign?: (options?: unknown) => boolean | undefined;
+};
 /**
  * Data payload interface wrapping API request response data, providing read/write methods.
  * Payload instances are created internally by Service, developers access via all/one/save callbacks.
  */
-interface PayloadInterface {
+interface PayloadApi {
     /**
      * Get data from Payload by key.
      * @param key Data key name
@@ -1257,7 +671,7 @@ interface PayloadInterface {
      * @param keyOrData Key/value string, data object, or endpoint metadata object
      * @param value Value when first parameter is a key
      */
-    set(keyOrData: string | Record<string, unknown> | ServiceMetaEntry, value?: unknown): PayloadInterface;
+    set(keyOrData: string | Record<string, unknown> | ServiceMetaEntry, value?: unknown): PayloadApi;
     data: Record<string, unknown>;
     cacheInfo?: ServiceCacheInfo;
 }
@@ -1274,43 +688,22 @@ interface ChangeEvent {
      */
     readonly keys?: ReadonlySet<string>;
 }
-/**
- * Event emitter interface providing on/off/fire methods for publish-subscribe pattern.
- */
-interface EventEmitterInterface<T = unknown> {
-    /**
-     * Bind event listener, calls handler when event is triggered.
-     * @param name Event name
-     * @param fn Event handler function
-     */
-    on(name: string, fn: (this: T, e?: ChangeEvent) => void): EventEmitterInterface<T>;
-    /**
-     * Unbind event listener, removes all handlers for event if no handler function is provided.
-     * @param name Event name
-     * @param fn Optional event handler function, if omitted removes all handlers
-     */
-    off(name: string, fn?: AnyFunc): EventEmitterInterface<T>;
-    /**
-     * Fire event, executes all bound handlers, automatically adds type property to event data.
-     * Supports removing all handlers after firing.
-     * Supports executing handler list in reverse order.
-     * @param name Event name
-     * @param data Event data object
-     * @param remove Whether to remove all handlers after firing
-     * @param lastToFirst Whether to execute handler list in reverse order
-     */
-    fire(name: string, data?: Record<string, unknown>, remove?: boolean, lastToFirst?: boolean): EventEmitterInterface<T>;
-}
 /**
  * Global state interface providing cross-view data sharing and data change notification capabilities.
  * State is a singleton object managing app-level state data via get/set/digest.
- * Supports `clean()` method to create a mixin for automatic cleanup on view destruction.
+ * Supports `clean()` method for automatic cleanup on view destruction.
  *
  * Use State for SIMPLE cross-view data (lightweight shared values: counters,
  * toggles, page title, session info, etc.). For COMPLEX reactive state —
- * handlers, derived data, or fine-grained subscriptions — use `create` instead.
+ * handlers, derived data, or fine-grained subscriptions — use `createStore` instead.
  */
-interface StateInterface extends EventEmitterInterface<StateInterface> {
+interface StateApi {
+    /** Bind event listener */
+    on(event: string, handler: (e?: ChangeEvent) => void): this;
+    /** Unbind event listener */
+    off(event: string, handler?: AnyFunc): this;
+    /** Fire event */
+    fire(event: string, data?: Record<string, unknown>, remove?: boolean, lastToFirst?: boolean): this;
     /**
      * Get data from global state, returns complete state object if key is omitted.
      * @param key Data key name, omitted returns complete state object
@@ -1324,16 +717,14 @@ interface StateInterface extends EventEmitterInterface<StateInterface> {
      */
     set(data: Record<string, unknown>, excludes?: ReadonlySet<string>): this;
     /**
-     * Clean data for specified keys in State, can only be used in view's mixins.
-     * For example `mixins: [State.clean("a,b")]`.
-     * Keys registered via this method are automatically cleaned when view is destroyed,
-     * and corresponding key reference counts are decremented; data is auto-deleted when count reaches zero.
+     * Create a cleanup function for state keys on view destroy.
+     * Call inside setup: `State.clean("keys")(ctx)`
      * @param keys Comma-separated key string
-     * @returns Object with make method, called by mixins mechanism
+     * @returns Function that registers destroy cleanup on a ctx
      */
-    clean(keys: string): {
-        make: AnyFunc;
-    };
+    clean(keys: string): (ctx: {
+        on: (event: string, handler: () => void) => void;
+    }) => void;
     /**
      * Detect data changes and dispatch changed event.
      * After set, must explicitly call `digest()` to dispatch changed event and notify views to update.
@@ -1384,20 +775,18 @@ interface ServiceMetaEntry {
      */
     cache?: number;
     /**
-     * Before-fetch hook,
+     * Before-fetch hook.
      * Hook function called before request is sent, can process request data.
-     * `this` points to current Payload instance.
      * @param payload Data carrier for current request
      */
-    before?: (this: PayloadInterface, payload: PayloadInterface) => void;
+    before?: (payload: PayloadApi) => void;
     /**
      * After-fetch hook.
      * Hook function called after request succeeds, before data is passed to view.
      * Can process response data in this method.
-     * `this` points to current Payload instance.
      * @param payload Data carrier for current request
      */
-    after?: (this: PayloadInterface, payload: PayloadInterface) => void;
+    after?: (payload: PayloadApi) => void;
     /** Clean keys on destroy,
      * Comma-separated endpoint name string for clearing other endpoints' cache.
      * For example, if an endpoint creates new data,
@@ -1406,7 +795,7 @@ interface ServiceMetaEntry {
      */
     cleanKeys?: string;
     /** Additional properties */
-    [key: string]: unknown;
+    [k: string]: unknown;
 }
 /** Cache info attached to Payload entity */
 interface ServiceCacheInfo {
@@ -1421,7 +810,7 @@ interface ServiceCacheInfo {
     /** Timestamp when cached */
     time: number;
 }
-interface FrameworkInterface {
+interface FrameworkApi {
     /**
      * Read framework configuration.
      * - Without arguments: returns the complete config object.
@@ -1443,49 +832,26 @@ interface FrameworkInterface {
      * @param cfg Config object
      */
     boot(cfg: FrameworkConfig): void;
-    /**
-     * Convert array to hash map object.
-     * - Simple array: `Framework.toMap([1,2,3])` => `{1:1, 2:1, 3:1}`
-     * - Object array: `Framework.toMap([{id:20},{id:30}], 'id')` => `{20:{id:20}, 30:{id:30}}`
-     * @param list Source array
-     * @param key Use object's key value from array as map key
-     */
-    toMap<T>(list: T[] | null | undefined, key?: keyof T): Record<string, T | number>;
-    /**
-     * Execute methods in try-catch manner, catches exceptions.
-     * Returns return value of last successfully executed method.
-     * @param fns Function or function array
-     * @param args Arguments array passed to functions
-     * @param context `this` binding during function execution
-     * @param configError Optional error callback, receives the caught exception
-     */
-    toTry(fns: AnyFunc | AnyFunc[], args?: unknown[], context?: unknown, configError?: (e: unknown) => void): unknown;
     /**
      * Convert path and params to URL string.
-     * Example: `Framework.toUrl('/xxx/', {a:'b',c:'d'})` => `/xxx/?a=b&c=d`
+     * Example: `Framework.toUri('/xxx/', {a:'b',c:'d'})` => `/xxx/?a=b&c=d`
      * @param path Path string
      * @param params Params object
      * @param keepEmpty Set of keys whose empty values should be preserved
      */
-    toUrl(path: string, params?: Record<string, unknown>, keepEmpty?: Set<string>): string;
+    toUri(path: string, params?: Record<string, unknown>, keepEmpty?: Set<string>): string;
     /**
      * Parse URL string to path and params object.
-     * Example: `Framework.parseUrl('/xxx/?a=b&c=d')` => `{path:'/xxx/', params:{a:'b',c:'d'}}`
+     * Example: `Framework.parseUri('/xxx/?a=b&c=d')` => `{path:'/xxx/', params:{a:'b',c:'d'}}`
      * @param url URL string
      */
-    parseUrl(url: string): ParsedUri;
+    parseUri(url: string): ParsedUri;
     /**
      * Merge source object properties into target object.
      * @param target Target object
      * @param sources One or more source objects
      */
-    mix<T extends object>(target: T, ...sources: Record<string, unknown>[]): T;
-    /**
-     * Check if object has specified own property (safe hasOwnProperty).
-     * @param owner Object to check, supports undefined/null
-     * @param prop Property key name
-     */
-    has<T extends object>(owner: T | undefined | null, prop: PropertyKey): boolean;
+    assign<T extends object>(target: T, ...sources: Record<string, unknown>[]): T;
     /**
      * Get enumerable property keys of object as array.
      * @param src Source object
@@ -1497,39 +863,24 @@ interface FrameworkInterface {
      * @param node Node or node ID
      * @param container Container node or node ID
      */
-    inside(node: HTMLElement | string, container: HTMLElement | string): boolean;
-    /**
-     * Shorthand for document.getElementById.
-     * Returns directly if Element is passed.
-     * @param id Node ID or Element object
-     */
-    node(id: string | Element | null): Element | null;
+    nodeInside(node: HTMLElement | string, container: HTMLElement | string): boolean;
     /**
      * Ensure DOM element has an ID, auto-generates one if missing.
      * Returns element's ID.
      * @param node DOM element object
      */
-    nodeId(node: HTMLElement): string;
+    ensureNodeId(node: HTMLElement): string;
     /**
      * Load modules using configured module loader.
      * @param names Module names, supports string or string array
      * @param callback Callback after modules are loaded
      */
     use(names: string | string[], callback?: (...modules: unknown[]) => void): void;
-    /**
-     * Dynamically inject CSS styles into page. Returns cleanup function to remove injected styles.
-     * Supports single and batch injection.
-     * - `Framework.applyStyle("my-style", "body { color: red; }")` single injection
-     * - `Framework.applyStyle(["style1", "css1", "style2", "css2"])` batch injection
-     * @param styleIdOrPairs Style unique key or [id1, css1, id2, css2, ...] batch array
-     * @param cssText CSS style string (only used when first param is string)
-     */
-    applyStyle(styleIdOrPairs: string | string[], cssText?: string): () => void;
     /**
      * Generate globally unique identifier (GUID).
      * @param prefix GUID prefix, defaults to "lark-"
      */
-    guid(prefix?: string): string;
+    generateId(prefix?: string): string;
     /**
      * Create async callback validity marker.
      * Returns a check function; if host object is unmarked (e.g., view re-rendered), check function returns false, preventing expired async callbacks from executing.
@@ -1559,7 +910,7 @@ interface FrameworkInterface {
      * @param eventType Event type string
      * @param eventInit CustomEvent init options
      */
-    dispatch(target: EventTarget, eventType: string, eventInit?: CustomEventInit): void;
+    dispatchEvent(target: EventTarget, eventType: string, eventInit?: CustomEventInit): void;
     /**
      * Execute a function in try-catch with chunked scheduling.
      * @param fn Function to execute
@@ -1579,31 +930,31 @@ interface FrameworkInterface {
     /** Wait result: timeout or view not found */
     WAIT_TIMEOUT_OR_NOT_FOUND: number;
     /**
-     * Base class with EventEmitter.
-     * Inherits EventEmitter for use as a base class in the framework.
+     * Emitter factory function.
+     * Use `createEmitter()` to create emitter instances.
      */
-    Base: typeof EventEmitter;
+    createEmitter: typeof createEmitter;
     /**
-     * View class.
-     * Use `View.extend()` to create subclasses.
+     * View factory function.
+     * Use `defineView()` to create view setups.
      */
-    View: typeof View;
+    defineView: typeof defineView;
     /**
-     * Cache class.
-     * Use `new Cache()` to create cache instances.
+     * Cache factory function.
+     * Use `createCache()` to create cache instances.
      */
-    Cache: typeof Cache;
+    createCache: typeof createCache;
     /**
      * Global state object.
      */
-    State: StateInterface;
+    State: StateApi;
     /**
      * Router object.
      */
-    Router: RouterInterface;
+    Router: RouterApi;
     /**
-     * Frame class.
-     * Frame tree for view lifecycle management. Do not extend or instantiate directly.
+     * Frame singleton.
+     * Frame tree for view lifecycle management. Use createFrame() to create frames.
      */
     Frame: typeof Frame;
 }
@@ -1687,19 +1038,25 @@ interface FrameworkConfig {
     /**
      * Cross-site (micro-frontend) configuration list.
      * Defines remote projects that can be loaded via Module Federation.
-     * Also accessible via `window.crossConfigs` for build-time injection.
+     * Also accessible via `window.crossSites` for build-time injection.
      */
-    crossConfigs?: CrossSiteConfig[];
+    crossSites?: CrossSiteConfig[];
     /** Default false. */
     virtualDom?: boolean;
-    /** Dynamic config access, custom config items */
-    [key: string]: unknown;
+    /**
+     * Enable Frame Devtool Bridge (default: true).
+     * When true, installs a postMessage listener so the Lark DevTool browser
+     * extension can inspect the frame tree. Set to false to suppress the bridge
+     * (and any extension-related errors) in environments where the extension
+     * is not available or causes issues.
+     */
+    devtool?: boolean;
 }
 interface RouteViewConfig {
     /** View path */
     view: string;
     /** Additional properties merged into location */
-    [key: string]: unknown;
+    [k: string]: unknown;
 }
 /**
  * Configuration for a remote (cross-site) project in the micro-frontend setup.
@@ -1729,8 +1086,8 @@ interface DomElement extends Element {
 }
 /** Element with frame binding */
 interface FrameBoundElement extends HTMLElement {
-    /** Frame instance bound to this element */
-    frame?: FrameInterface;
+    /** Frame object bound to this element */
+    frame?: FrameObj;
     /** Whether frame is bound (1 = bound) */
     frameBound?: number;
     /** View rendered flag */
@@ -1753,81 +1110,37 @@ interface CompileOptions {
 }
 
 /**
- * Cache class with LFU-style eviction.
- * Keys are prefixed with SPLITTER for namespace isolation.
+ * Create an LFU-style bounded cache.
+ *
+ * @param options - Cache configuration
+ * @returns A cache API object with `get`, `set`, `del`, `has`, `clear`, `forEach`, `size`.
  *
  * @example
- * const cache = new Cache({ maxSize: 20, bufferSize: 5 });
+ * const cache = createCache({ maxSize: 20, bufferSize: 5 });
  * cache.set('user', { name: 'Alice' });
  * const user = cache.get('user');
  * cache.has('user'); // true
  * cache.del('user');
  */
-declare class Cache<T = unknown> implements CacheInterface<T> {
-    /** Cache entries array */
-    private entries;
-    /** Fast lookup: prefixed key -> entry */
-    private lookup;
-    /** Buffer size for eviction */
-    private readonly bufferSize;
-    /** Maximum cache size */
-    private readonly maxSize;
-    /** Total capacity (maxSize + bufferSize) */
-    private readonly capacity;
-    /** Callback when entry is removed */
-    private readonly onRemove?;
-    /** Sort comparator */
-    private readonly comparator;
-    constructor(options?: CacheOptions<T>);
-    /** Prefix a key with SPLITTER for namespace isolation */
-    private prefixKey;
-    /**
-     * Get a cached value by key.
-     * Updates frequency and timestamp for cache sorting.
-     */
-    get(key: string): T | undefined;
-    /**
-     * Iterate all cached values.
-     */
-    forEach(callback: (value: T | undefined) => void): void;
-    /**
-     * Set or update a cached value.
-     * If key already exists, updates value and increments frequency.
-     * If cache exceeds capacity, triggers eviction.
-     */
-    set(key: string, value: T): void;
-    /**
-     * Delete a cached entry. Removes it immediately from both the lookup map
-     * and the entries array so the GC can reclaim the value without waiting
-     * for the next eviction sweep.
-     */
-    del(key: string): void;
-    /**
-     * Check if a key exists in cache.
-     */
-    has(key: string): boolean;
-    /** Get current cache size */
-    get size(): number;
-    /** Clear all entries */
-    clear(): void;
-    /**
-     * Evict the `bufferSize` worst entries from the cache.
-     *
-     * Uses single-pass partial selection (O(n·k)) instead of sorting the entire
-     * `entries` array (O(n log n)). For the typical `bufferSize = 5` this is
-     * effectively a linear scan with at most 5 in-bucket comparisons per
-     * iteration — and it avoids mutating the rest of `entries`.
-     */
-    private evictEntries;
-}
+declare function createCache<T = unknown>(options?: CacheOptions<T>): CacheApi<T>;
 
 /** Mark framework as booted (called from Framework.boot) */
 declare function markBooted(): void;
+/**
+ * DEBUG: deduplicate direct-mutation warnings.
+ *
+ * Previously this was delayed by 500ms so multiple writes to the same key
+ * would coalesce — but users complained the warning didn't show up at the
+ * point of the mutation. We now warn synchronously and dedupe by key, so
+ * the first hit shows up immediately at the right place in the stack trace.
+ * `clearNotify(key)` resets the dedup flag once the legitimate
+ * `State.set` + `State.digest` actually runs.
+ */
 /**
  * Observable in-memory data object.
  * Provides get/set/digest/diff/clean methods for cross-view data sharing.
  */
-declare const State: StateInterface;
+declare const State: StateApi;
 
 /**
  * Router with two-phase change confirmation (supports history and hash modes).
@@ -1837,7 +1150,7 @@ declare const State: StateInterface;
  * const loc = Router.parse();
  * const diff = Router.diff();
  */
-declare const Router: RouterInterface;
+declare const Router: RouterApi;
 /** Mark framework as booted (called by Framework.boot) */
 declare function markRouterBooted(): void;
 /** Get current routing mode */
@@ -1864,124 +1177,23 @@ declare const config: FrameworkConfig;
  */
 declare function use(names: string | string[], callback?: (...modules: unknown[]) => void): Promise<unknown[]>;
 
-/**
- * CrossSite: Micro-frontend bridge View for cross-project view loading.
- *
- * For Lark + Webpack Module Federation.
- * Provides skeleton rendering, prepare preloading, assign reuse, and remote view mounting.
- *
- * Usage (in host project):
- *   1. Register CrossSite as the bridge view for cross-site paths:
- *      registerViewClass('cross-site', CrossSite);
- *   2. Use v-lark="cross-site?view=remote-app/views/home&param=1" in template
- *   3. CrossSite loads the remote project's prepare module, then mounts the actual view
- */
-
-/**
- * Reset the projects map cache (useful when crossConfigs change at runtime).
- */
 declare function resetProjectsMap(): void;
 /**
- * CrossSite bridge View for micro-frontend integration.
+ * CrossSite view — bridge for micro-frontend remote views.
  *
- * Flow:
- * 1. CrossSite is mounted as a regular view (registered as "cross-site")
- * 2. render() shows skeleton template with a child container
- * 3. updateView() loads the remote project's prepare module
- * 4. Once loaded, mounts the actual remote view into the child container
- * 5. On re-assign (same view path), calls assign on the remote view instead of re-mounting
+ * Registered via `registerViewClass("cross-site", CrossSite)`.
  */
-declare const CrossSite: typeof View;
+declare const CrossSite: ViewSetup;
 
 /**
- * Updater class for view data binding.
+ * Create an Updater for per-view data binding.
+ *
  * Manages view-local data with change detection and DOM diff triggering.
  *
+ * @param viewId - The view (frame) ID this updater belongs to
+ * @returns An updater API object with `get`, `set`, `digest`, `forceDigest`, etc.
  */
-declare class Updater implements UpdaterInterface {
-    /** View ID (same as owner frame ID) */
-    private viewId;
-    /** Current data object */
-    private data;
-    /** Ref data for template rendering */
-    refData: Record<string, unknown>;
-    /** Changed keys in current digest cycle */
-    private changedKeys;
-    /** Whether data has changed since last digest */
-    private hasChangedFlag;
-    /**
-     * Digesting queue: supports re-digest during digest.
-     * Holds pending callbacks; `null` is used as a sentinel marking the start
-     * of an active digest cycle, so `runDigest` can detect re-entrant calls.
-     */
-    private digestingQueue;
-    /** Monotonically increasing version, bumped each time data actually changes. */
-    private version;
-    /** Snapshot of `version` taken by `snapshot()`, used by `altered()`. */
-    private snapshotVersion;
-    /** Last rendered VDOM tree (only used when virtualDom is enabled) */
-    private vdom?;
-    constructor(viewId: string);
-    /**
-     * Get data by key.
-     * Returns entire data object if key is omitted.
-     */
-    get<T = unknown>(key?: string): T;
-    /**
-     * Set data, tracking changed keys.
-     * Returns this for chaining.
-     */
-    set(data: Record<string, unknown>, excludes?: ReadonlySet<string>): this;
-    /**
-     * Detect changes and trigger DOM re-render.
-     *
-     * The core rendering pipeline:
-     * 1. Set data if provided
-     * 2. If changed, run DOM diff (template → new DOM → diff against old DOM)
-     * 3. Apply DOM operations
-     * 4. Apply ID updates
-     * 5. Call endUpdate on views that need re-rendering
-     * 6. Support re-digest during digest via queue
-     */
-    digest(data?: Record<string, unknown>, excludes?: ReadonlySet<string>, callback?: () => void): void;
-    /**
-     * Core digest execution.
-     */
-    private runDigest;
-    /**
-     * Save a snapshot of the current data version for `altered()` detection.
-     * Cheap O(1) — records the current monotonic version, no serialization.
-     */
-    snapshot(): this;
-    /**
-     * Check whether data has changed since the last snapshot.
-     * Returns undefined when no snapshot has been taken yet.
-     */
-    altered(): boolean | undefined;
-    /**
-     * Translate a refData reference back to its original value.
-     *
-     * The ref protocol is `SPLITTER` + ascii decimal digits — the exact format
-     * emitted by `refFn`. We require that exact shape so a user-supplied
-     * string that merely begins with SPLITTER is never accidentally resolved
-     * (or mishandled as a "missing ref").
-     */
-    translate(data: unknown): unknown;
-    /**
-     * Resolve a dotted property path against refData.
-     *
-     * Only safe property-path syntax is supported: `a`, `a.b`, `a.b.c`.
-     * Numeric literals (e.g. `1`, `1.5`) are returned as numbers. Anything else
-     * returns `undefined` — we no longer evaluate arbitrary JavaScript via
-     * `new Function`, so the method is CSP-safe and cannot be used as an
-     * injection vector.
-     */
-    parse(expr: string): unknown;
-    /**
-     * Get the set of keys changed since the last digest (for external inspection).
-     */
-    getChangedKeys(): ReadonlySet<string>;
-}
+declare function createUpdater(viewId: string): UpdaterApi;
 
 /**
  * Create a virtual DOM node.
@@ -1999,174 +1211,212 @@ declare function vdomCreate(tag: string | number, props?: Record<string, unknown
 declare function createVDomRef(viewId: string): VDomRef;
 
 /**
- * Payload wraps API response data with convenient access methods.
+ * @lark.js/mvc Store
+ *
+ * Zustand-aligned state management for Lark MVC.
+ *
+ * Core API:
+ * - create(name, creator): define a store with (set, get) => initialState
+ * - store.getState(): read current state snapshot
+ * - store.setState(partial | updater): shallow-merge state and notify listeners
+ * - store.subscribe(listener): listen for state changes
+ * - store.destroy(): tear down the store
+ * - computed(deps, fn): derived state that auto-recomputes when deps change
+ * - bindStore(view, store, selector?): Lark View lifecycle binding
  */
-declare class Payload implements PayloadInterface {
-    /** Payload data */
-    data: Record<string, unknown>;
-    /** Internal cache info */
-    cacheInfo?: ServiceCacheInfo;
-    constructor(data?: Record<string, unknown>);
-    /** Get a value from payload data */
-    get<T = unknown>(key: string): T;
-    /** Set a value in payload data */
-    set(keyOrData: string | Record<string, unknown> | ServiceMetaEntry, value?: unknown): PayloadInterface;
+type Listener<T> = (state: T, prevState: T) => void;
+interface StoreApi<T = object> {
+    getState(): T;
+    setState(partial: Partial<T> | ((prev: T) => Partial<T>)): void;
+    subscribe(listener: Listener<T>): () => void;
+    destroy(): void;
 }
+type StateCreator<T> = (set: (partial: Partial<T> | ((prev: T) => Partial<T>)) => void, get: () => T) => T;
 /**
- * Minimal interface describing what serviceSend actually uses
- * from a service instance. This avoids coupling to the full
- * ServiceInterface which mixes instance and static methods.
+ * Declare a derived (computed) store property.
+ *
+ * Usage inside a `create` creator:
+ * ```ts
+ * const store = create("counter", (set, get) => ({
+ *   count: 0,
+ *   doubled: computed(["count"], () => get().count * 2),
+ * }));
+ * ```
+ *
+ * `deps` lists the state keys the computed reads. Whenever any dep changes
+ * via `setState`, the computed re-evaluates before listeners are notified.
+ * Writes to a computed key via `setState` are silently ignored.
  */
-interface ServiceSendTarget {
-    destroyed: number;
-    busy: number;
-    internals: {
-        metaList: Record<string, ServiceMetaEntry>;
-        payloadCache: Cache<Payload>;
-        pendingCacheKeys: Record<string, PendingCacheEntry>;
-        syncFn: (payload: Payload, callback: () => void) => void;
-        staticEmitter: EventEmitter;
-    };
-    type: {
-        get(attrs: Record<string, unknown>, createNew?: boolean): {
-            entity: Payload;
-            needsUpdate: boolean;
-        };
-    };
-    enqueue(callback: AnyFunc): unknown;
-}
+declare function computed<T>(deps: readonly string[], fn: () => T): T;
+declare function createStore<T extends object>(name: string, creator: StateCreator<T>): StoreApi<T>;
 /**
- * Service: API request management with caching, deduplication, and queue.
+ * Bind a store to a Lark View. Subscribes to state changes and auto-unsubscribes
+ * when the view is destroyed.
  *
- * - Service.extend(syncFn, cacheMax?, cacheBuffer?): creates subclass with sync function
- * - Service.add(attrs): registers API endpoint metadata
- * - new Service().all(attrs, done): fetch all, use cache when available
- * - new Service().one(attrs, done): fetch all, callback on each completion
- * - new Service().save(attrs, done): fetch all, skip cache (always request)
- * - enqueue/dequeue: task queue for sequential async operations
- * - destroy: cancel pending requests
+ * @param view - Lark View instance (must have updater.set/digest and on("destroy"))
+ * @param store - Store created via `create()`
+ * @param selector - Optional function to pick a subset of state for the updater.
+ *   If omitted, only non-function state keys are forwarded.
+ * @returns unsubscribe function
  *
- * Per-type state (metaList, payloadCache, pendingCacheKeys, syncFn, staticEmitter)
- * is stored as static class properties. When extend() creates a subclass,
- * each subclass gets its own copies of these static properties, ensuring
- * isolation between different Service types.
+ * @example
+ * ```ts
+ * // Observe all state
+ * bindStore(this, useCountStore);
+ *
+ * // Observe with selector
+ * bindStore(this, useCountStore, (s) => ({ count: s.count }));
+ * ```
+ */
+declare function bindStore<T>(view: unknown, store: StoreApi<T>, selector?: (state: T) => Record<string, unknown>): () => void;
+
+/**
+ * Hooks runtime for the functional view system.
+ *
+ * Hooks (`useState`, `useEffect`, `useStore`, etc.) work via a module-level
+ * `currentCtx` that is set during setup function execution. The setup function
+ * runs once on mount (inside `mountCtx`), and hooks register state, effects,
+ * and subscriptions on the ctx.
+ *
+ * Key difference from React hooks: Lark's setup runs ONCE (not on every
+ * render). `useState` returns a `[getter, setter]` pair where the getter
+ * always reads from `ctx.updater.data` — avoiding stale closures. The
+ * template (compiled from `.html`) reads from `updater.data` independently
+ * of the setup function's closures.
+ */
+
+/**
+ * Declare view-local state backed by `ctx.updater.data`.
+ *
+ * Returns a `[getter, setter]` pair. The getter always reads the latest
+ * value from `ctx.updater.data[key]`, avoiding stale closures in event
+ * handlers. The setter writes to `ctx.updater.data` and triggers a digest.
+ *
+ * @param key - The data key in `updater.data`
+ * @param initial - Initial value (set once on first call)
+ *
+ * @example
+ * const [getCount, setCount] = useState('count', 0);
+ * // In event handler:
+ * "incr<click>": (e) => setCount(getCount() + 1)
+ */
+declare function useState<T>(key: string, initial: T): [() => T, (v: T) => void];
+/**
+ * Register a side effect with optional cleanup.
+ *
+ * The effect function runs immediately during setup. If it returns a cleanup
+ * function, that cleanup is called on view destroy (or on HMR re-setup).
+ *
+ * Unlike React's `useEffect`, this runs synchronously during setup (not
+ * deferred to a later tick) and does not re-run on dependency changes
+ * (since setup only runs once).
+ *
+ * @example
+ * useEffect(() => {
+ *   const timer = setInterval(tick, 1000);
+ *   return () => clearInterval(timer);
+ * });
+ */
+declare function useEffect(fn: () => (() => void) | void, _deps?: unknown[]): void;
+/**
+ * Bind a store to the view's updater. The store's state is synced to
+ * `ctx.updater.data` automatically. Auto-unsubscribes on view destroy.
+ *
+ * @param store - The store created by `create()`
+ * @param selector - Optional selector to pick which keys to sync
+ * @returns A getter that reads the selected state from updater.data
+ *
+ * @example
+ * const getCount = useStore(useCountStore, (s) => ({ count: s.count }));
+ * // In event handler:
+ * "incr<click>": (e) => useCountStore.getState().increment()
+ */
+declare function useStore<T extends Record<string, unknown>>(store: StoreApi<T>, selector?: (s: T) => Partial<T>): () => Partial<T>;
+/**
+ * Set up an interval that is automatically cleared on view destroy.
+ *
+ * @param fn - Function to call on each interval
+ * @param delay - Interval delay in milliseconds
+ *
+ * @example
+ * useInterval(() => {
+ *   ctx.updater.set({ time: Date.now() }).digest();
+ * }, 1000);
+ */
+declare function useInterval(fn: () => void, delay: number): void;
+/**
+ * Set up a timeout that is automatically cleared on view destroy.
+ *
+ * @param fn - Function to call after delay
+ * @param delay - Timeout delay in milliseconds
+ */
+declare function useTimeout(fn: () => void, delay: number): void;
+/**
+ * Capture a resource (e.g., a Service instance, observer, etc.) that is
+ * automatically destroyed on view destroy or render (if destroyOnRender).
+ *
+ * @param key - Unique key for the resource
+ * @param resource - The resource object (must have a `destroy()` method)
+ * @param destroyOnRender - If true, destroyed on next render call
+ *
+ * @example
+ * const service = createService(syncFn);
+ * useResource('myService', service.instance(), true);
+ */
+declare function useResource(key: string, resource: unknown, destroyOnRender?: boolean): void;
+/**
+ * Register an event handler on the view's internal emitter.
+ * Automatically unregistered on view destroy.
+ *
+ * @param event - Event name (e.g., "destroy", "render")
+ * @param handler - Event handler function
+ *
+ * @example
+ * useEvent("destroy", () => console.log("View destroyed"));
+ */
+declare function useEvent(event: string, handler: AnyFunc): void;
+
+/**
+ * Create a Payload wrapping API response data.
  */
-declare class Service {
-    /** Service instance ID */
+declare function createPayload(data?: Record<string, unknown>): PayloadApi;
+interface ServiceInstance {
     id: string;
-    /** Whether service is busy (1 = busy) */
     busy: number;
-    /** Whether service is destroyed (1 = destroyed) */
     destroyed: number;
-    /** Task queue for sequential operations */
-    taskQueue: AnyFunc[];
-    /** Previous dequeue arguments */
-    prevArgs: unknown[];
-    /** Instance event emitter */
-    private _emitter;
-    constructor();
-    /** Instance event emitter (public accessor) */
-    get emitter(): EventEmitterInterface;
-    /**
-     * Get internals object for serviceSend compatibility.
-     * References per-type static state from the current class.
-     */
-    get internals(): ServiceSendTarget["internals"];
-    /**
-     * Get type reference (the constructor) for serviceSend compatibility.
-     * Static methods like get/create are accessible via the constructor.
-     */
-    get type(): ServiceSendTarget["type"];
-    /**
-     * Fetch all endpoints, callback when all complete.
-     * Uses cache when available.
-     */
-    all(attrs: string | Record<string, unknown> | (string | Record<string, unknown>)[], done: AnyFunc): this;
-    /**
-     * Fetch all endpoints, callback on each completion.
-     */
-    one(attrs: string | Record<string, unknown> | (string | Record<string, unknown>)[], done: AnyFunc): this;
-    /**
-     * Fetch all endpoints, skip cache (always request).
-     */
-    save(attrs: string | Record<string, unknown> | (string | Record<string, unknown>)[], done: AnyFunc): this;
-    /**
-     * Enqueue a task for sequential execution.
-     */
-    enqueue(callback: AnyFunc): this;
-    /**
-     * Dequeue and execute the next task in queue.
-     */
+    emitter: EmitterApi;
+    all(attrs: string | Record<string, unknown> | (string | Record<string, unknown>)[], done: AnyFunc): ServiceInstance;
+    one(attrs: string | Record<string, unknown> | (string | Record<string, unknown>)[], done: AnyFunc): ServiceInstance;
+    save(attrs: string | Record<string, unknown> | (string | Record<string, unknown>)[], done: AnyFunc): ServiceInstance;
+    enqueue(callback: AnyFunc): ServiceInstance;
     dequeue(...args: unknown[]): void;
-    /**
-     * Destroy the service instance.
-     * After destruction, no new requests can be sent.
-     */
     destroy(): void;
-    on(event: string, handler: AnyFunc): this;
-    off(event: string, handler?: AnyFunc): this;
-    fire(event: string, data?: Record<string, unknown>): this;
-    /** Per-type metadata registry */
-    static _metaList: Record<string, ServiceMetaEntry>;
-    /** Per-type payload cache (LFU with frequency eviction) */
-    static _payloadCache: Cache<Payload>;
-    /** Per-type pending cache keys for deduplication */
-    static _pendingCacheKeys: Record<string, PendingCacheEntry>;
-    /** Per-type sync function */
-    static _syncFn: (payload: Payload, callback: () => void) => void;
-    /** Per-type static event emitter */
-    static _staticEmitter: EventEmitter<unknown>;
-    /** Per-type cache max size */
-    static _cacheMax: number;
-    /** Per-type cache buffer size */
-    static _cacheBuffer: number;
-    /**
-     * Register API endpoint metadata.
-     */
-    static add(attrs: ServiceMetaEntry | ServiceMetaEntry[]): void;
-    /**
-     * Get metadata for an API endpoint.
-     */
-    static meta(attrs: string | Record<string, unknown>): ServiceMetaEntry;
-    /**
-     * Create a Payload for an API request.
-     */
-    static create(attrs: Record<string, unknown>): Payload;
-    /**
-     * Get or create a Payload for an API request.
-     */
-    static get(attrs: Record<string, unknown>, createNew?: boolean): {
-        entity: Payload;
+    on(event: string, handler: AnyFunc): ServiceInstance;
+    off(event: string, handler?: AnyFunc): ServiceInstance;
+    fire(event: string, data?: Record<string, unknown>): ServiceInstance;
+}
+interface ServiceApi {
+    add(attrs: ServiceMetaEntry | ServiceMetaEntry[]): void;
+    meta(attrs: string | Record<string, unknown>): ServiceMetaEntry;
+    create(attrs: Record<string, unknown>): PayloadApi;
+    get(attrs: Record<string, unknown>, createNew?: boolean): {
+        entity: PayloadApi;
         needsUpdate: boolean;
     };
-    /**
-     * Get cached Payload if available and not expired.
-     */
-    static cached(attrs: Record<string, unknown>): Payload | undefined;
-    /**
-     * Clear cached payloads by endpoint name.
-     */
-    static clear(names: string | string[]): void;
-    static on(event: string, handler: AnyFunc): void;
-    static off(event: string, handler?: AnyFunc): void;
-    static fire(event: string, data?: Record<string, unknown>): void;
-    /**
-     * Create a new Service subclass with a custom sync function.
-     *
-     * Each subclass gets its OWN copies of every per-type static field
-     * (`_metaList`, `_payloadCache`, `_pendingCacheKeys`, `_syncFn`,
-     * `_staticEmitter`, `_cacheMax`, `_cacheBuffer`) via `static override`.
-     * This is intentional: it ensures that endpoint metadata, cache state,
-     * in-flight dedup keys, and event subscribers are fully isolated between
-     * different Service types, even when one extends another.
-     *
-     * **Do not refactor these `static override` declarations away** — sharing
-     * them through prototype inheritance would let endpoints registered on one
-     * subclass leak into another, and the LFU cache evictions of one type
-     * would race with those of another.
-     */
-    static extend(this: typeof Service, newSyncFn: (payload: Payload, callback: () => void) => void, newCacheMax?: number, newCacheBuffer?: number): typeof Service;
+    cached(attrs: Record<string, unknown>): PayloadApi | undefined;
+    clear(names: string | string[]): void;
+    on(event: string, handler: AnyFunc): void;
+    off(event: string, handler?: AnyFunc): void;
+    fire(event: string, data?: Record<string, unknown>): void;
+    instance(): ServiceInstance;
 }
+/**
+ * Create a Service type with a custom sync function.
+ *
+ * Each call creates independent closure state (metaList, payloadCache, etc.),
+ * ensuring full isolation between different Service types.
+ */
+declare function createService(syncFn: (payload: PayloadApi, callback: () => void) => void, cacheMax?: number, cacheBuffer?: number): ServiceApi;
 
 /**
  * DOM event delegation system.
@@ -2189,7 +1439,7 @@ declare const EventDelegator: {
     /**
      * Set the frame getter function (called by Framework.boot).
      */
-    setFrameGetter(getter: (id: string) => FrameInterface | undefined): void;
+    setFrameGetter(getter: (id: string) => FrameObj | undefined): void;
     /**
      * Get next element GUID.
      */
@@ -2200,7 +1450,7 @@ declare const EventDelegator: {
  * Main framework object.
  * Provides boot, config, and all global utility methods.
  */
-declare const Framework: FrameworkInterface;
+declare const Framework: FrameworkApi;
 
 /**
  * Sync view state with URL query parameters.
@@ -2215,83 +1465,114 @@ declare const Framework: FrameworkInterface;
  *
  * @example
  * ```ts
- * export default View.extend({
- *   template,
- *   init() {
- *     const [state, setState] = useUrlState(this, { page: "1", size: "20" });
- *     this.updater.set({ page: state.page, size: state.size }).digest();
- *     this.setState = setState;
- *   },
- *   assign() {
- *     const [state] = useUrlState(this, { page: "1", size: "20" });
- *     this.updater.set({ page: state.page, size: state.size });
- *   },
- *   "nextPage<click>"() {
- *     this.setState((prev) => ({ page: String(Number(prev.page) + 1) }));
- *   },
+ * export default defineView((ctx) => {
+ *   const [state, setState] = useUrlState(ctx, { page: "1", size: "20" });
+ *   ctx.updater.set({ page: state.page, size: state.size }).digest();
+ *   return {
+ *     template,
+ *     events: {
+ *       "nextPage<click>"() {
+ *         setState((prev) => ({ page: String(Number(prev.page) + 1) }));
+ *       },
+ *     },
+ *   };
  * });
  * ```
  */
-declare function useUrlState<S extends Record<string, string>>(view: ViewInterface, initialState?: S): [Readonly<S>, (patch: Partial<S> | ((prev: S) => Partial<S>)) => void];
+declare function useUrlState<S extends Record<string, string>>(view: ViewCtx, initialState?: S): [Readonly<S>, (patch: Partial<S> | ((prev: S) => Partial<S>)) => void];
+
+interface HotContext {
+    accept(cb?: (mod: {
+        default?: unknown;
+    } | undefined) => void): void;
+    dispose(cb: (data: unknown) => void): void;
+    invalidate(): void;
+}
+declare function reloadViews(viewPath: string): void;
+declare function hotSwapView(frame: FrameObj, newSetup: ViewSetup): void;
+declare function hotSwapFrames(viewPath: string, newSetup: ViewSetup): void;
+declare function hotSwapByTemplate(oldTemplate: ViewTemplate, newTemplate: ViewTemplate): void;
+declare function hotSwapByView(oldSetup: ViewSetup, newSetup: ViewSetup): void;
 
 /**
- * @lark.js/mvc Store
+ * HMR injection code generator — shared across Vite, Webpack, and Rspack.
  *
- * Zustand-aligned state management for Lark MVC.
+ * ## Why this file exists
  *
- * Core API:
- * - create(name, creator): define a store with (set, get) => initialState
- * - store.getState(): read current state snapshot
- * - store.setState(partial | updater): shallow-merge state and notify listeners
- * - store.subscribe(listener): listen for state changes
- * - store.destroy(): tear down the store
- * - computed(deps, fn): derived state that auto-recomputes when deps change
- * - bindStore(view, store, selector?): Lark View lifecycle binding
+ * React's `@vitejs/plugin-react` and Vue's `@vitejs/plugin-vue` auto-inject
+ * HMR boilerplate at compile time so users never write `import.meta.hot`
+ * themselves. Lark's `larkMvcPlugin` / `larkMvcLoader` previously did NOT
+ * inject any HMR code, forcing users to manually call `acceptView()` /
+ * `disposeView()` in every view file — a poor DX.
+ *
+ * This module generates the HMR snippet strings that the three bundler
+ * integrations (vite.ts, webpack.ts, rspack.ts) append to compiled output.
+ * Extracting the logic here keeps the three plugin files DRY and makes the
+ * cross-bundler differences (Vite's `import.meta.hot` vs Webpack/Rspack's
+ * `module.hot`) explicit and testable.
+ *
+ * ## Two injection targets
+ *
+ * 1. **Template module** (compiled from `.html`): self-accepts. When the
+ *    `.html` changes, the accept callback calls `hotSwapByTemplate(old, new)`
+ *    to update the template on all mounted views — preserving state.
+ *
+ * 2. **View class module** (`.ts` file that imports `.html`): self-accepts.
+ *    When the `.ts` changes, the accept callback calls
+ *    `hotSwapByView(old, new)` to swap the setup function on all mounted
+ *    instances — preserving state.
+ *
+ * ## Cross-bundler HMR API differences
+ *
+ * | Bundler        | HMR context         | accept cb receives new module? |
+ * |----------------|------------------------------------------------------|
+ * | Vite           | `import.meta.hot`   | Yes (`newModule.default`)      |
+ * | Webpack (CJS)  | `module.hot`        | No (module already re-executed)|
+ * | Rspack         | `module.hot`        | No (module already re-executed)|
+ *
+ * In Vite, the accept callback runs in the OLD module's scope, so local
+ * variables are from the old module. In Webpack/Rspack, the callback runs
+ * in the NEW module's scope (the module has already re-executed), so local
+ * variables are from the new module. The snippets below account for this.
  */
-type Listener<T> = (state: T, prevState: T) => void;
-interface StoreApi<T = Record<string, unknown>> {
-    getState(): T;
-    setState(partial: Partial<T> | ((prev: T) => Partial<T>)): void;
-    subscribe(listener: Listener<T>): () => void;
-    destroy(): void;
-}
-type StateCreator<T> = (set: (partial: Partial<T> | ((prev: T) => Partial<T>)) => void, get: () => T) => T;
+/** Supported bundler identifiers. */
+type Bundler = "vite" | "webpack" | "rspack";
 /**
- * Declare a derived (computed) store property.
+ * Append HMR code to a compiled template module source.
  *
- * Usage inside a `create` creator:
- * ```ts
- * const store = create("counter", (set, get) => ({
- *   count: 0,
- *   doubled: computed(["count"], () => get().count * 2),
- * }));
- * ```
+ * Called by the Vite `load` hook and the Webpack/Rspack loader after
+ * `compileTemplate` returns. The `bundler` parameter selects the correct
+ * HMR API (`import.meta.hot` for Vite, `module.hot` for Webpack/Rspack).
  *
- * `deps` lists the state keys the computed reads. Whenever any dep changes
- * via `setState`, the computed re-evaluates before listeners are notified.
- * Writes to a computed key via `setState` are silently ignored.
+ * @param source - The compiled template module source from `compileTemplate`
+ * @param bundler - Which bundler's HMR API to use
+ * @returns The source with HMR accept/dispose code appended
  */
-declare function computed<T>(deps: readonly string[], fn: () => T): T;
-declare function create<T>(name: string, creator: StateCreator<T>): StoreApi<T>;
+declare function injectTemplateHmrSnippet(source: string, bundler: Bundler): string;
 /**
- * Bind a store to a Lark View. Subscribes to state changes and auto-unsubscribes
- * when the view is destroyed.
+ * Quick check: does this `.ts` source import a `.html` template?
  *
- * @param view - Lark View instance (must have updater.set/digest and on("destroy"))
- * @param store - Store created via `create()`
- * @param selector - Optional function to pick a subset of state for the updater.
- *   If omitted, only non-function state keys are forwarded.
- * @returns unsubscribe function
+ * Used by the plugin's `transform` hook to decide whether to inject view
+ * class HMR. Files that don't import `.html` are left untouched.
+ */
+declare function importsHtmlTemplate(source: string): boolean;
+/**
+ * Transform a `.ts` view file source to add view class HMR.
  *
- * @example
- * ```ts
- * // Observe all state
- * bindStore(this, useCountStore);
+ * Steps:
+ * 1. Check if the source imports a `.html` template. If not, return as-is.
+ * 2. Find the `export default` declaration (via @babel/parser AST).
+ * 3. Rewrite it to a named const + export, so the HMR snippet can reference
+ *    the View class by name (`__larkViewDefault`).
+ * 4. Append the HMR snippet.
  *
- * // Observe with selector
- * bindStore(this, useCountStore, (s) => ({ count: s.count }));
- * ```
+ * If the source has no `export default`, or if parsing fails, the source is
+ * returned unchanged (graceful degradation — the file just won't have HMR).
+ *
+ * @param source - The `.ts` source code
+ * @param bundler - Which bundler's HMR API to use
+ * @returns The transformed source with HMR code, or the original if ineligible
  */
-declare function bindStore<T>(view: unknown, store: StoreApi<T>, selector?: (state: T) => Record<string, unknown>): () => void;
+declare function injectViewHmr(source: string, bundler: Bundler): string;
 
-export { type AnyFunc, CALL_BREAK_TIME, Cache, type CacheEntry, type CacheInterface, type CacheOptions, type ChangeEvent, type CompileOptions, CrossSite, type CrossSiteConfig, type DomElement, type DomOp, type DomRef, EVENT_METHOD_REGEXP, EventDelegator, EventEmitter, type EventEmitterInterface, type EventListenerEntry, Frame, type FrameBoundElement, type FrameInterface, type FrameInvokeEntry, type FrameStaticEvent, Framework, type FrameworkConfig, type FrameworkInterface, type HotContext, LARK_VIEW, type Location, type LocationDiff, type MixinEventHandler, type ParamDiff, type ParsedUri, Payload, type PayloadInterface, type PendingCacheEntry, RouterEvents as ROUTER_EVENTS, type RouteChangeEvent, type RouteChangedEvent, type RouteViewConfig, Router, type RouterInterface, SPLITTER, Service, type ServiceCacheInfo, type ServiceEvent, type ServiceMetaEntry, type ServiceOptions, State, type StateInterface, type StoreApi, TAG_NAME_REGEXP, Updater, type UpdaterInterface, type VDomCreateFn, type VDomNode, type VDomRef, type VDomTemplate, VIEW_EVENT_METHOD_REGEXP, View, type ViewEvent, type ViewEventSelectorEntry, type ViewGlobalEventEntry, type ViewInterface, type ViewLocationObserved, type ViewObserveLocation, type ViewResourceEntry, type ViewTemplate, type VoidFunc, applyStyle, bindStore, computed, create, createVDomRef, defineView, config as frameworkConfig, getRouteMode, invalidateViewClass, mark, markBooted, markRouterBooted, nextCounter, registerViewClass, reloadViews, resetProjectsMap, unmark, use, useUrlState, vdomCreate };
+export { type AnyFunc, type Bundler, CALL_BREAK_TIME, type CacheApi, type CacheEntry, type CacheOptions, type ChangeEvent, type CompileOptions, CrossSite, type CrossSiteConfig, type DomElement, type DomOp, type DomRef, EVENT_METHOD_REGEXP, type EmitterApi, EventDelegator, type EventListenerEntry, Frame, type FrameApi, type FrameBoundElement, type FrameInvokeEntry, type FrameObj, type FrameStaticEvent, Framework, type FrameworkApi, type FrameworkConfig, type HotContext, LARK_VIEW, type Location, type LocationDiff, type ParamDiff, type ParsedUri, type PayloadApi, type PendingCacheEntry, RouterEvents as ROUTER_EVENTS, type Ref, type RouteChangeEvent, type RouteChangedEvent, type RouteViewConfig, Router, type RouterApi, SPLITTER, type ServiceApi, type ServiceCacheInfo, type ServiceEvent, type ServiceInstance, type ServiceMetaEntry, type ServiceOptions, State, type StateApi, type StoreApi, TAG_NAME_REGEXP, type UpdaterApi, type VDomCreateFn, type VDomNode, type VDomRef, type VDomTemplate, VIEW_EVENT_METHOD_REGEXP, type ViewCtx, type ViewEvent, type ViewLocationObserved, type ViewObserveLocation, type ViewResourceEntry, type ViewSetup, type ViewTemplate, type VoidFunc, bindStore, computed, createCache, createEmitter, createFrame, createPayload, createService, createStore, createUpdater, createVDomRef, defineView, config as frameworkConfig, getRouteMode, hotSwapByTemplate, hotSwapByView, hotSwapFrames, hotSwapView, importsHtmlTemplate, injectTemplateHmrSnippet, injectViewHmr, invalidateViewClass, mark, markBooted, markRouterBooted, nextCounter, registerViewClass, reloadViews, resetProjectsMap, unmark, use, useEffect, useEvent, useInterval, useResource, useState, useStore, useTimeout, useUrlState, vdomCreate };