@lark.js/mvc 0.0.2 → 0.0.4

package/dist/index.js

@@ -6,10 +6,15 @@ var ROUTER_EVENTS = {
   CHANGED: "changed",
   PAGE_UNLOAD: "page_unload"
 };
-var TAG_KEY = "lark-key";
-var TAG_ATTR_KEY = "lark-attr-key";
-var TAG_VIEW_KEY = "lark-view-key";
-var LARK_VIEW = "lark-view";
+var LARK_KEYS = {
+  /** Attribute name: ldk (static key for skipping VDOM diff) */
+  DIFF_KEY: "ldk",
+  /** Attribute name: lak (static attribute key) */
+  ATTR_KEY: "lak",
+  /** Attribute name: lvk (view key for assign) */
+  VIEW_KEY: "lvk"
+};
+var LARK_VIEW = "v-lark";
 var EVENT_METHOD_REGEXP = new RegExp(
   `(?:([\\w-]+)${SPLITTER})?([^(]+)\\(([\\s\\S]*?)?\\)`
 );
@@ -33,7 +38,6 @@ function isPlainObject(value) {
   if (proto === null) return true;
   return proto === Object.prototype || proto === null;
 }
-var isArray = Array.isArray;
 function isPrimitiveOrFunc(value) {
   return !value || typeof value !== "object" && typeof value !== "function";
 }
@@ -74,13 +78,13 @@ function assign(target, ...sources) {
   return target;
 }
 function funcWithTry(fns, args, context, configError) {
-  const fnArray = isArray(fns) ? fns : [fns];
+  const fnArray = Array.isArray(fns) ? fns : [fns];
   let ret;
   for (const fn of fnArray) {
     try {
       ret = Function.prototype.apply.call(fn, context, args);
     } catch (e) {
-      configError(e);
+      configError?.(e);
     }
   }
   return ret;
@@ -108,7 +112,7 @@ function translateData(data, value) {
     }
     return value;
   }
-  if (isPlainObject(value) || isArray(value)) {
+  if (isPlainObject(value) || Array.isArray(value)) {
     for (const p in value) {
       if (has(value, p)) {
         const val = value[p];
@@ -201,13 +205,13 @@ function toMap(list, key) {
 function now() {
   return Date.now ? Date.now() : (/* @__PURE__ */ new Date()).getTime();
 }
-function classExtend(ctor, base, props, statics) {
+function classExtend(make, base, props, statics) {
   const baseProto = base["prototype"] ?? {};
-  const cProto = Object.create(baseProto);
-  assign(cProto, props);
-  Object.assign(ctor, statics);
-  cProto.constructor = ctor;
-  ctor["prototype"] = cProto;
+  const classProto = Object.create(baseProto);
+  assign(classProto, props);
+  Object.assign(make, statics);
+  classProto.constructor = make;
+  make["prototype"] = classProto;
 }
 
 // src/apply-style.ts
@@ -248,8 +252,8 @@ function applyStyle(styleIdOrPairs, css) {
 }
 
 // src/mark.ts
-var DELETED_KEY = SPLITTER + "$a";
-var MARK_OBJECT_KEY = SPLITTER + "$b";
+var DELETED_KEY = SPLITTER + "$delFlag";
+var MARK_OBJECT_KEY = SPLITTER + "$markKey";
 function mark(host, key) {
   let sign = 0;
   const hostRecord = host;
@@ -273,9 +277,9 @@ function unmark(host) {
 
 // src/safeguard.ts
 var proxiesPool = /* @__PURE__ */ new Map();
-var SAFEGUARD_SENTINEL = "_sf_";
+var SAFEGUARD_SENTINEL = "_safe_";
 function safeguard(data, getter, setter, isRoot) {
-  if (typeof window.__lark_debug === "undefined" || !window.__lark_debug) {
+  if (typeof window.__lark_Debug === "undefined" || !window.__lark_Debug) {
     return data;
   }
   if (typeof Proxy === "undefined") {
@@ -314,7 +318,7 @@ function safeguard(data, getter, setter, isRoot) {
         if (!prefix && getter) {
           getter(property);
         }
-        if (!isRoot && has(target, property) && (isArray(out) || isPlainObject(out))) {
+        if (!isRoot && has(target, property) && (Array.isArray(out) || isPlainObject(out))) {
           return build(prefix + property + ".", out);
         }
         return out;
@@ -489,7 +493,10 @@ var EventEmitter = class {
       }
     } else {
       this.listeners.delete(key);
-      Reflect.deleteProperty(this, `on${event}`);
+      Reflect.deleteProperty(
+        this,
+        `on${event[0].toUpperCase() + event.slice(1)}`
+      );
     }
     return this;
   }
@@ -530,7 +537,7 @@ var EventEmitter = class {
         }
       }
     }
-    const onMethodName = `on${event}`;
+    const onMethodName = `on${event[0].toUpperCase() + event.slice(1)}`;
     const onMethod = this[onMethodName];
     if (typeof onMethod === "function") {
       funcWithTry(
@@ -577,7 +584,7 @@ function teardownKeysRef(keyList) {
       if (count <= 0) {
         Reflect.deleteProperty(keyRefCounts, key);
         Reflect.deleteProperty(appData, key);
-        if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+        if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
           Reflect.deleteProperty(dataWhereSet, key);
         }
       }
@@ -620,7 +627,7 @@ var State = {
    */
   get(key) {
     const result = key ? appData[key] : appData;
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
       return safeguard(
         result,
         (dataKey) => {
@@ -646,7 +653,7 @@ var State = {
    */
   set(data, excludes) {
     dataIsChanged = setData(data, appData, changedKeys, excludes || /* @__PURE__ */ new Set()) || dataIsChanged;
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug && booted) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug && booted) {
       for (const p in data) {
         dataWhereSet[p] = window.location.pathname;
       }
@@ -661,7 +668,7 @@ var State = {
       State.set(data, excludes);
     }
     if (dataIsChanged) {
-      if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+      if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
         for (const p in changedKeys) {
           if (has(changedKeys, p)) {
             clearNotify(p);
@@ -692,7 +699,7 @@ var State = {
    */
   clean(keys2) {
     return {
-      ctor: function() {
+      make: function() {
         const keyList = setupKeysRef(keys2);
         this.on("destroy", () => {
           teardownKeysRef(keyList);
@@ -721,6 +728,7 @@ var State = {
     emitter.fire(event, data, remove);
     return State;
   }
+  // onChanged: noop,
 };
 
 // src/router.ts
@@ -873,7 +881,7 @@ var Router = {
       attachViewAndPath(location);
       hrefCache.set(href, location);
     }
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
       location["params"] = safeguard(location["params"]);
     }
     return location;
@@ -897,7 +905,7 @@ var Router = {
       );
     }
     silent = 0;
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug && lastChanged) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug && lastChanged) {
       lastChanged = safeguard(lastChanged);
     }
     return lastChanged;
@@ -1026,9 +1034,9 @@ var Router = {
     window.addEventListener("hashchange", watchChange);
     window.addEventListener("popstate", watchChange);
     window.addEventListener("beforeunload", (domEvent) => {
-      const te = {};
-      Router.fire(ROUTER_EVENTS.PAGE_UNLOAD, te);
-      const msg = te["msg"];
+      const data = {};
+      Router.fire(ROUTER_EVENTS.PAGE_UNLOAD, data);
+      const msg = data["msg"];
       if (msg) {
         domEvent.returnValue = msg;
       }
@@ -1060,26 +1068,26 @@ var frameGetter;
 function parseEventInfo(eventInfo) {
   const cached = eventInfoCache.get(eventInfo);
   if (cached) {
-    return assign({}, cached, { r: eventInfo });
+    return assign({}, cached, { value: eventInfo });
   }
   const match = eventInfo.match(EVENT_METHOD_REGEXP) || [];
   const result = {
-    v: match[1] || "",
-    n: match[2] || "",
-    i: match[3] || ""
+    id: match[1] || "",
+    name: match[2] || "",
+    params: match[3] || ""
   };
   eventInfoCache.set(eventInfo, result);
-  return assign({}, result, { r: eventInfo });
+  return assign({}, result, { value: eventInfo });
 }
 function findFrameInfo(current, eventType) {
   const eventInfos = [];
   let begin = current;
-  const info = current.getAttribute(`v-${eventType}`);
+  const info = current.getAttribute(`@${eventType}`);
   let match;
   if (info) {
     match = parseEventInfo(info);
   }
-  if (match && !match.v || selectorEvents[eventType]) {
+  if (match && !match.id || selectorEvents[eventType]) {
     let selectorFrameId = "#";
     let backtrace = 0;
     while (begin && begin !== document.body) {
@@ -1105,10 +1113,10 @@ function findFrameInfo(current, eventType) {
           if (selectorEntry) {
             for (const selectorName of selectorEntry.selectors) {
               const entry = {
-                r: selectorName,
-                v: frameId,
-                n: selectorName,
-                i: ""
+                value: selectorName,
+                id: frameId,
+                name: selectorName,
+                params: ""
               };
               if (selectorName) {
                 if (!backtrace && elementMatchesSelector(current, selectorName)) {
@@ -1120,8 +1128,8 @@ function findFrameInfo(current, eventType) {
             }
           }
           if (view.template && !backtrace) {
-            if (match && !match.v) {
-              match.v = frameId;
+            if (match && !match.id) {
+              match.id = frameId;
             }
             break;
           }
@@ -1137,10 +1145,10 @@ function findFrameInfo(current, eventType) {
   }
   if (match) {
     eventInfos.push({
-      v: match.v,
-      r: match.r,
-      n: match.n,
-      i: match.i
+      id: match.id,
+      value: match.value,
+      name: match.name,
+      params: match.params
     });
   }
   return eventInfos;
@@ -1161,7 +1169,7 @@ function domEventProcessor(domEvent) {
     const eventInfos = findFrameInfo(current, eventType);
     if (eventInfos.length) {
       for (const info of eventInfos) {
-        const { v: frameId, n: handlerName, i: params } = info;
+        const { id: frameId, name: handlerName, params } = info;
         if (lastFrameId !== frameId) {
           if (lastFrameId && domEvent.isPropagationStopped?.()) {
             break;
@@ -1260,8 +1268,8 @@ var WrapMeta = {
   td: [3, "<table><tbody><tr>"],
   area: [1, "<map>"],
   param: [1, "<object>"],
-  g: [1, '<svg xmlns="' + SVG_NS + '">'],
-  m: [1, '<math xmlns="' + MATH_NS + '">'],
+  svg: [1, '<svg xmlns="' + SVG_NS + '">'],
+  math: [1, '<math xmlns="' + MATH_NS + '">'],
   _: [0, ""]
 };
 WrapMeta["optgroup"] = WrapMeta["option"];
@@ -1294,9 +1302,9 @@ function vdomGetNode(html, refNode) {
   const ns = refNode.namespaceURI;
   let tag;
   if (ns === SVG_NS) {
-    tag = "g";
+    tag = "svg";
   } else if (ns === MATH_NS) {
-    tag = "m";
+    tag = "math";
   } else {
     const match = TAG_NAME_REGEXP.exec(html);
     tag = match ? match[1] : "";
@@ -1318,7 +1326,7 @@ function vdomGetCompareKey(node) {
   }
   let key = el.autoId ? "" : el.getAttribute("id") || void 0;
   if (!key) {
-    key = el.getAttribute(TAG_KEY) || void 0;
+    key = el.getAttribute(LARK_KEYS.DIFF_KEY) || void 0;
   }
   if (!key) {
     const larkView = el.getAttribute(LARK_VIEW);
@@ -1446,17 +1454,17 @@ function vdomSetChildNodes(oldParent, newParent, ref, frame, keys_) {
   }
 }
 function vdomSetNode(oldNode, newNode, oldParent, ref, frame, keys_) {
-  if (vdomSpecialDiff(oldNode, newNode) || oldNode.nodeType === 1 && oldNode.hasAttribute(TAG_VIEW_KEY) || !(oldNode.isEqualNode && oldNode.isEqualNode(newNode))) {
+  if (vdomSpecialDiff(oldNode, newNode) || oldNode.nodeType === 1 && oldNode.hasAttribute(LARK_KEYS.VIEW_KEY) || !(oldNode.isEqualNode && oldNode.isEqualNode(newNode))) {
     if (oldNode.nodeType === newNode.nodeType && oldNode.nodeName === newNode.nodeName) {
       if (oldNode.nodeType === 1) {
         const oldEl = oldNode;
         const newEl = newNode;
-        const staticKey = newEl.getAttribute(TAG_KEY);
-        if (staticKey && staticKey === oldEl.getAttribute(TAG_KEY)) {
+        const staticKey = newEl.getAttribute(LARK_KEYS.DIFF_KEY);
+        if (staticKey && staticKey === oldEl.getAttribute(LARK_KEYS.DIFF_KEY)) {
           return;
         }
         const newLarkView = newEl.getAttribute(LARK_VIEW);
-        const updateAttribute = !newEl.getAttribute(TAG_ATTR_KEY) || newEl.getAttribute(TAG_ATTR_KEY) !== oldEl.getAttribute(TAG_ATTR_KEY);
+        const updateAttribute = !newEl.getAttribute(LARK_KEYS.ATTR_KEY) || newEl.getAttribute(LARK_KEYS.ATTR_KEY) !== oldEl.getAttribute(LARK_KEYS.ATTR_KEY);
         let updateChildren = true;
         if (newLarkView) {
           const oldFrameId = oldEl.getAttribute("id") || "";
@@ -1601,7 +1609,7 @@ var Updater = class {
     if (key) {
       result = this.data[key];
     }
-    if (typeof window !== "undefined" && window.__lark_debug) {
+    if (typeof window !== "undefined" && window.__lark_Debug) {
       return safeguard(result);
     }
     return result;
@@ -1736,225 +1744,10 @@ var Updater = class {
 // src/view.ts
 var VIEW_GLOBALS = {};
 if (typeof window !== "undefined") {
-  VIEW_GLOBALS["win"] = window;
+  VIEW_GLOBALS["window"] = window;
 }
 if (typeof document !== "undefined") {
-  VIEW_GLOBALS["doc"] = document;
-}
-function viewPrepare(oView) {
-  if (oView.ctors) {
-    return oView.ctors;
-  }
-  const ctors = [];
-  oView.ctors = ctors;
-  const proto = oView.prototype;
-  const eventsObject = {};
-  const eventsList = [];
-  const selectorObject = {};
-  const mixins = proto["mixins"];
-  if (mixins && Array.isArray(mixins)) {
-    viewMergeMixins(mixins, oView, ctors);
-  }
-  for (const p in proto) {
-    if (!has(proto, p)) continue;
-    const currentFn = proto[p];
-    if (typeof currentFn !== "function") continue;
-    const matches = p.match(VIEW_EVENT_METHOD_REGEXP);
-    if (!matches) continue;
-    const isSelector = matches[1];
-    const selectorOrCallback = matches[2];
-    const events = matches[3];
-    const modifiers = matches[4];
-    const mod = {};
-    if (modifiers) {
-      for (const item of modifiers.split(",")) {
-        mod[item] = true;
-      }
-    }
-    const eventTypes = events.split(",");
-    for (const item of eventTypes) {
-      const globalNode = VIEW_GLOBALS[selectorOrCallback];
-      let mask = 1;
-      if (isSelector) {
-        if (globalNode) {
-          eventsList.push({
-            handler: currentFn,
-            element: globalNode,
-            eventName: item,
-            modifiers: mod
-          });
-          continue;
-        }
-        mask = 2;
-        let selectorEntry = selectorObject[item];
-        if (!selectorEntry) {
-          selectorEntry = selectorObject[item] = {
-            selectors: []
-          };
-        }
-        if (!selectorEntry[selectorOrCallback]) {
-          selectorEntry[selectorOrCallback] = 1;
-          selectorEntry.selectors.push(selectorOrCallback);
-        }
-      }
-      eventsObject[item] = (eventsObject[item] || 0) | mask;
-      const combinedKey = selectorOrCallback + SPLITTER + item;
-      const existingFn = proto[combinedKey];
-      if (!existingFn) {
-        proto[combinedKey] = currentFn;
-      } else {
-        const mixinFn = currentFn;
-        const existingMixin = existingFn;
-        if (existingMixin.b) {
-          if (mixinFn.b) {
-            proto[combinedKey] = processMixinsSameEvent(
-              currentFn,
-              existingFn
-            );
-          } else if (has(proto, p)) {
-            proto[combinedKey] = currentFn;
-          }
-        }
-      }
-    }
-  }
-  viewWrapMethod(proto, "render", "$b");
-  proto["$eo"] = eventsObject;
-  proto["$el"] = eventsList;
-  proto["$so"] = selectorObject;
-  proto["$f"] = proto["assign"];
-  return ctors;
-}
-function viewWrapMethod(proto, fnName, shortKey) {
-  const originalFn = proto[fnName];
-  if (typeof originalFn !== "function") return;
-  const wrapped = function(...args) {
-    if (this.signature > 0) {
-      this.signature++;
-      this.fire("rendercall");
-      destroyAllResources(this, false);
-      const instanceFn = typeof this[fnName] === "function" ? this[fnName] : originalFn;
-      const fnToCall = instanceFn === wrapped ? originalFn : instanceFn;
-      return funcWithTry(fnToCall, args, this, noop);
-    }
-    return void 0;
-  };
-  proto[fnName] = wrapped;
-  proto[shortKey] = wrapped;
-}
-function processMixinsSameEvent(additional, exist) {
-  let temp;
-  const existMixin = exist;
-  if (existMixin.a) {
-    temp = existMixin;
-  } else {
-    temp = function(...e) {
-      funcWithTry(temp.a ?? [], e, this, noop);
-    };
-    temp.a = [exist];
-    temp.b = 1;
-  }
-  const additionalMixin = additional;
-  temp.a = (temp.a ?? []).concat(additionalMixin.a ?? [additional]);
-  return temp;
-}
-function viewMergeMixins(mixins, viewClass, ctors) {
-  const proto = viewClass.prototype;
-  const temp = {};
-  for (const node of mixins) {
-    for (const p in node) {
-      if (!has(node, p)) continue;
-      const fn = node[p];
-      const exist = temp[p];
-      if (p === "ctor") {
-        ctors.push(fn);
-        continue;
-      }
-      if (VIEW_EVENT_METHOD_REGEXP.test(p)) {
-        if (exist) {
-          temp[p] = processMixinsSameEvent(fn, exist);
-        } else {
-          fn.b = 1;
-          temp[p] = fn;
-        }
-      } else {
-        if (!exist) {
-          temp[p] = fn;
-        }
-      }
-    }
-  }
-  for (const p in temp) {
-    if (!has(proto, p)) {
-      proto[p] = temp[p];
-    }
-  }
-}
-function viewDelegateEvents(view, destroy = false) {
-  const proto = Object.getPrototypeOf(view) ?? {};
-  const eventsObject = proto["$eo"] || view.eventObjectMap;
-  const selectorObject = proto["$so"] || view.eventSelectorMap;
-  const eventsList = proto["$el"] || view.globalEventList;
-  for (const e in eventsObject) {
-    if (has(eventsObject, e)) {
-      if (destroy) {
-        EventDelegator.unbind(e, !!selectorObject[e]);
-      } else {
-        EventDelegator.bind(e, !!selectorObject[e]);
-      }
-    }
-  }
-  for (const entry of eventsList) {
-    if (destroy) {
-      entry.element.removeEventListener(
-        entry.eventName,
-        entry.boundHandler
-      );
-    } else {
-      const handler = entry.handler;
-      const element = entry.element;
-      const modifiers = entry.modifiers;
-      entry.boundHandler = function(domEvent) {
-        const extendedEvent = domEvent;
-        extendedEvent.eventTarget = element;
-        if (modifiers) {
-          const kbEvent = domEvent;
-          if (modifiers["ctrl"] && !kbEvent.ctrlKey || modifiers["shift"] && !kbEvent.shiftKey || modifiers["alt"] && !kbEvent.altKey || modifiers["meta"] && !kbEvent.metaKey) {
-            return;
-          }
-        }
-        funcWithTry(handler, [domEvent], view, noop);
-      };
-      entry.element.addEventListener(
-        entry.eventName,
-        entry.boundHandler
-      );
-    }
-  }
-}
-function destroyAllResources(view, lastly) {
-  const cache = view.resources;
-  for (const p in cache) {
-    if (has(cache, p)) {
-      const entry = cache[p];
-      if (lastly || entry.destroyOnRender) {
-        destroyResource(cache, p, true);
-      }
-    }
-  }
-}
-function destroyResource(cache, key, callDestroy, oldEntity) {
-  const entry = cache[key];
-  if (!entry || entry.entity === oldEntity) return void 0;
-  const entity = entry.entity;
-  if (entity && typeof entity === "object") {
-    const destroyFn = entity["destroy"];
-    if (typeof destroyFn === "function" && callDestroy) {
-      funcWithTry(destroyFn, [], entity, noop);
-    }
-  }
-  Reflect.deleteProperty(cache, key);
-  return entity;
+  VIEW_GLOBALS["document"] = document;
 }
 var View = class _View {
   /** View ID (same as owner frame ID) */
@@ -1979,18 +1772,43 @@ var View = class _View {
   observedStateKeys;
   /** Resource map */
   resources = {};
-  /** Selector event map: eventType -> handler name list */
-  eventSelectorMap = {};
-  /** Event object map: eventType -> bitmask */
-  eventObjectMap = {};
-  /** Global event list */
-  globalEventList = [];
   /** Assign method reference */
   assignMethod;
   /** Whether endUpdate pending */
   endUpdatePending;
   /** Internal event storage */
   _events = new EventEmitter();
+  // ============================================================
+  // Getters for prototype-stored event maps
+  // ============================================================
+  /**
+   * 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() {
+    const proto = Object.getPrototypeOf(this);
+    return proto["$evtObjMap"] || {};
+  }
+  /**
+   * Selector event map: eventType -> selector list.
+   * Read from prototype ($selMap) set by View.prepare.
+   */
+  get eventSelectorMap() {
+    const proto = Object.getPrototypeOf(this);
+    return proto["$selMap"] || {};
+  }
+  /**
+   * Global event list: [{handler, element, eventName, modifiers}].
+   * Read from prototype ($globalEvtList) set by View.prepare.
+   */
+  get globalEventList() {
+    const proto = Object.getPrototypeOf(this);
+    return proto["$globalEvtList"] || [];
+  }
+  // ============================================================
+  // Instance lifecycle methods
+  // ============================================================
   /**
    * Initialize view (called by Frame when mounting).
    */
@@ -1998,14 +1816,7 @@ var View = class _View {
   }
   /**
    * Render view template (called by Frame after init).
-   * Wrapped by View_WrapMethod to manage signature + resources.
-   *
-   * Default implementation calls updater.digest() which:
-   * 1. Executes the template function with current data
-   * 2. Runs VDOM diff against previous DOM
-   * 3. Applies DOM operations
-   * 4. Calls endUpdate to mount child frames
-   *
+   * Wrapped by View.wrapMethod to manage signature + resources.
    */
   render() {
     this.updater.digest();
@@ -2057,7 +1868,7 @@ var View = class _View {
       if (!flag) {
         setTimeout(
           this.wrapAsync(() => {
-            runInvokes(ownerFrame);
+            _View.runInvokes(ownerFrame);
           }),
           0
         );
@@ -2133,7 +1944,7 @@ var View = class _View {
   capture(key, resource, destroyOnRender = false) {
     const cache = this.resources;
     if (resource) {
-      destroyResource(cache, key, true, resource);
+      _View.destroyResource(cache, key, true, resource);
       cache[key] = {
         entity: resource,
         destroyOnRender
@@ -2149,7 +1960,7 @@ var View = class _View {
    * If destroy=true, calls the resource's destroy() method.
    */
   release(key, destroy = true) {
-    return destroyResource(this.resources, key, destroy);
+    return _View.destroyResource(this.resources, key, destroy);
   }
   // ============================================================
   // Leave tip
@@ -2195,31 +2006,294 @@ var View = class _View {
     });
   }
   // ============================================================
-  // Static: extend and merge
+  // Static public methods
   // ============================================================
   /** Collected ctors from mixins */
   static ctors;
+  /**
+   * 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 ctors marker).
+   * Called from Frame.mountView before creating the view instance.
+   */
+  static prepare(oView) {
+    if (oView.ctors) {
+      return oView.ctors;
+    }
+    const ctors = [];
+    oView.ctors = ctors;
+    const proto = oView.prototype;
+    const eventsObject = {};
+    const eventsList = [];
+    const selectorObject = {};
+    const mixins = proto["mixins"];
+    if (mixins && Array.isArray(mixins)) {
+      _View.mergeMixins(mixins, oView, ctors);
+    }
+    for (const p in proto) {
+      if (!has(proto, p)) continue;
+      const currentFn = proto[p];
+      if (typeof currentFn !== "function") continue;
+      const matches = p.match(VIEW_EVENT_METHOD_REGEXP);
+      if (!matches) continue;
+      const isSelector = matches[1];
+      const selectorOrCallback = matches[2];
+      const events = matches[3];
+      const modifiers = matches[4];
+      const mod = {};
+      if (modifiers) {
+        for (const item of modifiers.split(",")) {
+          mod[item] = true;
+        }
+      }
+      const eventTypes = events.split(",");
+      for (const item of eventTypes) {
+        const globalNode = VIEW_GLOBALS[selectorOrCallback];
+        let mask = 1;
+        if (isSelector) {
+          if (globalNode) {
+            eventsList.push({
+              handler: currentFn,
+              element: globalNode,
+              eventName: item,
+              modifiers: mod
+            });
+            continue;
+          }
+          mask = 2;
+          let selectorEntry = selectorObject[item];
+          if (!selectorEntry) {
+            selectorEntry = selectorObject[item] = {
+              selectors: []
+            };
+          }
+          if (!selectorEntry[selectorOrCallback]) {
+            selectorEntry[selectorOrCallback] = 1;
+            selectorEntry.selectors.push(selectorOrCallback);
+          }
+        }
+        eventsObject[item] = (eventsObject[item] || 0) | mask;
+        const combinedKey = selectorOrCallback + SPLITTER + item;
+        const existingFn = proto[combinedKey];
+        if (!existingFn) {
+          proto[combinedKey] = currentFn;
+        } else {
+          const mixinFn = currentFn;
+          const existingMixin = existingFn;
+          if (existingMixin.marker) {
+            if (mixinFn.marker) {
+              proto[combinedKey] = _View.processMixinsSameEvent(
+                currentFn,
+                existingFn
+              );
+            } else if (has(proto, p)) {
+              proto[combinedKey] = currentFn;
+            }
+          }
+        }
+      }
+    }
+    _View.wrapMethod(proto, "render", "$renderWrap");
+    proto["$evtObjMap"] = eventsObject;
+    proto["$globalEvtList"] = eventsList;
+    proto["$selMap"] = selectorObject;
+    proto["$assignFn"] = proto["assign"];
+    return ctors;
+  }
+  /**
+   * Bind or unbind event delegation for a view instance.
+   * Called from Frame during mount/unmount.
+   */
+  static delegateEvents(view, destroy = false) {
+    const eventsObject = view.eventObjectMap;
+    const selectorObject = view.eventSelectorMap;
+    const eventsList = view.globalEventList;
+    for (const e in eventsObject) {
+      if (has(eventsObject, e)) {
+        if (destroy) {
+          EventDelegator.unbind(e, !!selectorObject[e]);
+        } else {
+          EventDelegator.bind(e, !!selectorObject[e]);
+        }
+      }
+    }
+    for (const entry of eventsList) {
+      if (destroy) {
+        entry.element.removeEventListener(
+          entry.eventName,
+          entry.boundHandler
+        );
+      } else {
+        const handler = entry.handler;
+        const element = entry.element;
+        const modifiers = entry.modifiers;
+        entry.boundHandler = function(domEvent) {
+          const extendedEvent = domEvent;
+          extendedEvent.eventTarget = element;
+          if (modifiers) {
+            const kbEvent = domEvent;
+            if (modifiers["ctrl"] && !kbEvent.ctrlKey || modifiers["shift"] && !kbEvent.shiftKey || modifiers["alt"] && !kbEvent.altKey || modifiers["meta"] && !kbEvent.metaKey) {
+              return;
+            }
+          }
+          funcWithTry(handler, [domEvent], view, noop);
+        };
+        entry.element.addEventListener(
+          entry.eventName,
+          entry.boundHandler
+        );
+      }
+    }
+  }
+  /**
+   * Destroy all resources managed by a view.
+   * If lastly=true, destroy ALL resources; otherwise only destroyOnRender ones.
+   */
+  static destroyAllResources(view, lastly) {
+    const cache = view.resources;
+    for (const p in cache) {
+      if (has(cache, p)) {
+        const entry = cache[p];
+        if (lastly || entry.destroyOnRender) {
+          _View.destroyResource(cache, p, true);
+        }
+      }
+    }
+  }
+  /**
+   * Process deferred invoke calls on a frame.
+   */
+  static runInvokes(frame) {
+    const list = frame.invokeList;
+    if (!list) return;
+    while (list.length) {
+      const entry = list.shift();
+      if (entry && !entry.removed) {
+        frame.invoke(entry.name, entry.args);
+      }
+    }
+  }
+  // ============================================================
+  // Static private methods
+  // ============================================================
+  /**
+   * Wrap a method on the prototype to add signature checking and resource cleanup.
+   */
+  static wrapMethod(proto, fnName, shortKey) {
+    const originalFn = proto[fnName];
+    if (typeof originalFn !== "function") return;
+    const wrapped = function(...args) {
+      if (this.signature > 0) {
+        this.signature++;
+        this.fire("render");
+        _View.destroyAllResources(this, false);
+        const instanceFn = typeof this[fnName] === "function" ? this[fnName] : originalFn;
+        const fnToCall = instanceFn === wrapped ? originalFn : instanceFn;
+        return funcWithTry(fnToCall, args, this, noop);
+      }
+      return void 0;
+    };
+    proto[fnName] = wrapped;
+    proto[shortKey] = wrapped;
+  }
+  /**
+   * When two mixins define the same event method, merge them into
+   * a single function that calls both in sequence.
+   */
+  static processMixinsSameEvent(additional, exist) {
+    let temp;
+    const existMixin = exist;
+    if (existMixin.handlerList) {
+      temp = existMixin;
+    } else {
+      temp = function(...e) {
+        funcWithTry(temp.handlerList ?? [], e, this, noop);
+      };
+      temp.handlerList = [exist];
+      temp.marker = 1;
+    }
+    const additionalMixin = additional;
+    temp.handlerList = (temp.handlerList ?? []).concat(
+      additionalMixin.handlerList ?? [additional]
+    );
+    return temp;
+  }
+  /**
+   * Merge an array of mixin objects into the view prototype.
+   */
+  static mergeMixins(mixins, viewClass, ctors) {
+    const proto = viewClass.prototype;
+    const temp = {};
+    for (const node of mixins) {
+      for (const p in node) {
+        if (!has(node, p)) continue;
+        const fn = node[p];
+        const exist = temp[p];
+        if (p === "make") {
+          ctors.push(fn);
+          continue;
+        }
+        if (VIEW_EVENT_METHOD_REGEXP.test(p)) {
+          if (exist) {
+            temp[p] = _View.processMixinsSameEvent(fn, exist);
+          } else {
+            fn.marker = 1;
+            temp[p] = fn;
+          }
+        } else {
+          if (!exist) {
+            temp[p] = fn;
+          }
+        }
+      }
+    }
+    for (const p in temp) {
+      if (!has(proto, p)) {
+        proto[p] = temp[p];
+      }
+    }
+  }
+  /**
+   * Destroy a single resource entry.
+   */
+  static destroyResource(cache, key, callDestroy, oldEntity) {
+    const entry = cache[key];
+    if (!entry || entry.entity === oldEntity) return void 0;
+    const entity = entry.entity;
+    if (entity && typeof entity === "object") {
+      const destroyFn = entity["destroy"];
+      if (typeof destroyFn === "function" && callDestroy) {
+        funcWithTry(destroyFn, [], entity, noop);
+      }
+    }
+    Reflect.deleteProperty(cache, key);
+    return entity;
+  }
+  // ============================================================
+  // Static: extend and merge
+  // ============================================================
   /**
    * Extend View to create a new View subclass.
    *
    * Supports:
-   * - props.ctor: constructor-like init (called with initParams + {node, deep})
+   * - 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, statics) {
     props = props || {};
-    const ctor = props["ctor"];
+    const make = props["make"];
     const ctors = [];
-    if (ctor) {
-      ctors.push(ctor);
+    if (make) {
+      ctors.push(make);
     }
     const ParentView = this;
     const ChildView = class extends ParentView {
       constructor(nodeId, ownerFrame, initParams, node, mixinCtors) {
         super(nodeId, ownerFrame, initParams, node, []);
         for (const key in props) {
-          if (has(props, key) && key !== "ctor") {
+          if (has(props, key) && key !== "make" && key !== "render") {
             this[key] = props[key];
           }
         }
@@ -2241,7 +2315,7 @@ var View = class _View {
     };
     const proto = ChildView.prototype;
     for (const key in props) {
-      if (has(props, key) && key !== "ctor") {
+      if (has(props, key) && key !== "make") {
         proto[key] = props[key];
       }
     }
@@ -2252,36 +2326,17 @@ var View = class _View {
         }
       }
     }
-    ChildView.merge = viewMerge;
-    ChildView.extend = _View.extend;
     return ChildView;
   }
   /**
    * Merge mixins into View prototype.
    */
   static merge(...mixins) {
-    const self = this;
-    const existingCtors = self.ctors || [];
-    viewMergeMixins(mixins, self, existingCtors);
-    return self;
+    const existingCtors = this.ctors || [];
+    _View.mergeMixins(mixins, this, existingCtors);
+    return this;
   }
 };
-function viewMerge(...mixins) {
-  const self = this;
-  const existingCtors = self.ctors || [];
-  viewMergeMixins(mixins, self, existingCtors);
-  return self;
-}
-function runInvokes(frame) {
-  const list = frame.invokeList;
-  if (!list) return;
-  while (list.length) {
-    const entry = list.shift();
-    if (entry && !entry.removed) {
-      frame.invoke(entry.name, entry.args);
-    }
-  }
-}
 
 // src/frame.ts
 var frameRegistry = /* @__PURE__ */ new Map();
@@ -2320,7 +2375,7 @@ var Frame = class _Frame extends EventEmitter {
   hasAltered = 0;
   /** Whether view is destroyed */
   destroyed = 0;
-  /** View path (lark-view attribute value) */
+  /** View path (v-lark attribute value) */
   viewPath;
   /** Original template before mount */
   originalTemplate;
@@ -2389,7 +2444,7 @@ var Frame = class _Frame extends EventEmitter {
    */
   doMountView(ViewClass, params, node, sign) {
     if (sign !== this.signature) return;
-    const mixinCtors = viewPrepare(ViewClass);
+    const mixinCtors = View.prepare(ViewClass);
     const ViewConstructor = ViewClass;
     const view = new ViewConstructor(
       this.id,
@@ -2400,7 +2455,7 @@ var Frame = class _Frame extends EventEmitter {
     );
     this.viewInstance = view;
     view.signature = 1;
-    viewDelegateEvents(view);
+    View.delegateEvents(view);
     const initResult = funcWithTry(
       view.init,
       [params, { node, deep: !view.template }],
@@ -2411,13 +2466,10 @@ var Frame = class _Frame extends EventEmitter {
     Promise.resolve(initResult).then(() => {
       if (nextSign !== this.signature) return;
       if (view.template) {
-        const renderFn = view.$b;
-        if (renderFn) {
-          renderFn.call(view);
-        }
+        view.render();
       } else {
         this.hasAltered = 0;
-        if (!view.$e) {
+        if (!view.endUpdatePendingFlag) {
           view.endUpdate();
         }
       }
@@ -2604,7 +2656,7 @@ var Frame = class _Frame extends EventEmitter {
   /** Get or create root frame */
   static root(rootId) {
     if (!rootFrame) {
-      rootId = rootId || "lark-root";
+      rootId = rootId || "root";
       let rootElement = document.getElementById(rootId);
       if (!rootElement) {
         rootElement = document.body;
@@ -2725,19 +2777,19 @@ function registerViewClass(viewPath, ViewClass) {
 }
 
 // src/service.ts
-var Bag = class {
-  /** Bag data */
+var Payload = class {
+  /** Payload data */
   data;
   /** Internal cache info */
   cacheInfo;
   constructor(data = {}) {
     this.data = data;
   }
-  /** Get a value from bag data */
+  /** Get a value from payload data */
   get(key) {
     return this.data[key];
   }
-  /** Set a value in bag data */
+  /** Set a value in payload data */
   set(keyOrData, value) {
     if (typeof keyOrData === "string") {
       this.data[keyOrData] = value;
@@ -2749,287 +2801,366 @@ var Bag = class {
 };
 var FETCH_FLAGS_ALL = 1;
 var FETCH_FLAGS_ONE = 2;
-function createServiceType(syncFn, cacheMax = 20, cacheBuffer = 5) {
-  const metas = {};
-  const bagCache = new Cache({
-    maxSize: cacheMax,
-    bufferSize: cacheBuffer
-  });
-  const pendingCacheKeys = {};
-  const staticEmitter2 = new EventEmitter();
-  const serviceType = {
-    add(attrs) {
-      if (!isArray(attrs)) {
-        attrs = [attrs];
-      }
-      for (const bag of attrs) {
-        if (bag) {
-          const name = bag.name;
-          const cache = bag.cache;
-          bag.cache = cache ? cache | 0 : 0;
-          metas[name] = bag;
-        }
-      }
-    },
-    meta(attrs) {
-      const name = typeof attrs === "string" ? attrs : attrs["name"];
-      return metas[name] || attrs;
-    },
-    create(attrs) {
-      const meta = serviceType.meta(attrs);
-      const cache = attrs["cache"] | 0 || meta.cache || 0;
-      const entity = new Bag();
-      entity.set(meta);
-      entity.cacheInfo = {
-        name: meta.name,
-        after: meta.after,
-        cleans: meta.cleans,
-        key: cache ? defaultCacheKey(meta, attrs) : "",
-        time: 0
-      };
-      if (typeof attrs === "object" && attrs !== null) {
-        entity.set(attrs);
-      }
-      const before = meta.before;
-      if (before) {
-        funcWithTry(before, [entity], entity, noop);
-      }
-      staticEmitter2.fire("begin", { bag: entity });
-      return entity;
-    },
-    get(attrs, createNew) {
-      let entity;
-      let needsUpdate = false;
-      if (!createNew) {
-        entity = serviceType.cached(attrs);
-      }
-      if (!entity) {
-        entity = serviceType.create(attrs);
-        needsUpdate = true;
-      }
-      return { entity, needsUpdate };
-    },
-    cached(attrs) {
-      const meta = serviceType.meta(attrs);
-      const cache = attrs["cache"] | 0 || meta.cache || 0;
-      let cacheKey = "";
-      if (cache) {
-        cacheKey = defaultCacheKey(meta, attrs);
-      }
-      if (cacheKey) {
-        const info = pendingCacheKeys[cacheKey];
-        if (info) {
-          return info.e;
-        }
-        const cached = bagCache.get(cacheKey);
-        if (cached && cached.cacheInfo) {
-          if (now() - cached.cacheInfo.time > cache) {
-            bagCache.del(cacheKey);
-            return void 0;
+var Service = class {
+  /** Service instance ID */
+  id = "";
+  /** Whether service is busy (1 = busy) */
+  busy = 0;
+  /** Whether service is destroyed (1 = destroyed) */
+  destroyed = 0;
+  /** Task queue for sequential operations */
+  taskQueue = [];
+  /** Previous dequeue arguments */
+  prevArgs = [];
+  /** Instance event emitter */
+  _emitter = new EventEmitter();
+  constructor() {
+    this.id = generateId("service");
+  }
+  // ============================================================
+  // Instance accessors for type-level data
+  // ============================================================
+  /** Instance event emitter (public accessor) */
+  get emitter() {
+    return this._emitter;
+  }
+  /**
+   * Get internals object for serviceSend compatibility.
+   * References per-type static state from the current class.
+   */
+  get internals() {
+    const ctor = this.constructor;
+    return {
+      metaList: ctor._metaList,
+      payloadCache: ctor._payloadCache,
+      pendingCacheKeys: ctor._pendingCacheKeys,
+      syncFn: ctor._syncFn,
+      staticEmitter: ctor._staticEmitter
+    };
+  }
+  /**
+   * Get type reference (the constructor) for serviceSend compatibility.
+   * Static methods like get/create are accessible via the constructor.
+   */
+  get type() {
+    return this.constructor;
+  }
+  // ============================================================
+  // Instance methods
+  // ============================================================
+  /**
+   * Fetch all endpoints, callback when all complete.
+   * Uses cache when available.
+   */
+  all(attrs, done) {
+    serviceSend(this, attrs, done, FETCH_FLAGS_ALL, false);
+    return this;
+  }
+  /**
+   * Fetch all endpoints, callback on each completion.
+   */
+  one(attrs, done) {
+    serviceSend(this, attrs, done, FETCH_FLAGS_ONE, false);
+    return this;
+  }
+  /**
+   * Fetch all endpoints, skip cache (always request).
+   */
+  save(attrs, done) {
+    serviceSend(this, attrs, done, FETCH_FLAGS_ALL, true);
+    return this;
+  }
+  /**
+   * Enqueue a task for sequential execution.
+   */
+  enqueue(callback) {
+    if (!this.destroyed) {
+      this.taskQueue.push(callback);
+      this.dequeue(...this.prevArgs);
+    }
+    return this;
+  }
+  /**
+   * Dequeue and execute the next task in queue.
+   */
+  dequeue(...args) {
+    if (!this.busy && !this.destroyed) {
+      this.busy = 1;
+      setTimeout(() => {
+        this.busy = 0;
+        if (!this.destroyed) {
+          const task2 = this.taskQueue.shift();
+          if (task2) {
+            this.prevArgs = args;
+            funcWithTry(task2, args, this, noop);
           }
-          return cached;
         }
+      }, 0);
+    }
+  }
+  /**
+   * Destroy the service instance.
+   * After destruction, no new requests can be sent.
+   */
+  destroy() {
+    this.destroyed = 1;
+    this.taskQueue = [];
+  }
+  // Instance event methods (delegate to instance emitter)
+  on(event, handler) {
+    this._emitter.on(event, handler);
+    return this;
+  }
+  off(event, handler) {
+    this._emitter.off(event, handler);
+    return this;
+  }
+  fire(event, data) {
+    this._emitter.fire(event, data);
+    return this;
+  }
+  // ============================================================
+  // Per-type static state
+  // ============================================================
+  /** Per-type metadata registry */
+  static _metaList = {};
+  /** Per-type payload cache (LFU with frequency eviction) */
+  static _payloadCache = new Cache({
+    maxSize: 20,
+    bufferSize: 5
+  });
+  /** Per-type pending cache keys for deduplication */
+  static _pendingCacheKeys = {};
+  /** Per-type sync function */
+  static _syncFn = noop;
+  /** Per-type static event emitter */
+  static _staticEmitter = new EventEmitter();
+  /** Per-type cache max size */
+  static _cacheMax = 20;
+  /** Per-type cache buffer size */
+  static _cacheBuffer = 5;
+  // ============================================================
+  // Static methods (operate on per-type state via `this`)
+  // ============================================================
+  /**
+   * Register API endpoint metadata.
+   */
+  static add(attrs) {
+    if (!Array.isArray(attrs)) {
+      attrs = [attrs];
+    }
+    for (const payload of attrs) {
+      if (payload) {
+        const name = payload.name;
+        const cache = payload.cache;
+        payload.cache = cache ? cache | 0 : 0;
+        this._metaList[name] = payload;
       }
-      return void 0;
-    },
-    clear(names) {
-      const nameList = (typeof names === "string" ? names : names.join(",")).split(",");
-      const nameSet = {};
-      for (const n of nameList) {
-        nameSet[n] = 1;
+    }
+  }
+  /**
+   * Get metadata for an API endpoint.
+   */
+  static meta(attrs) {
+    const name = typeof attrs === "string" ? attrs : attrs["name"];
+    return this._metaList[name] || attrs;
+  }
+  /**
+   * Create a Payload for an API request.
+   */
+  static create(attrs) {
+    const meta = this.meta(attrs);
+    const cache = attrs["cache"] | 0 || meta.cache || 0;
+    const entity = new Payload();
+    entity.set(meta);
+    entity.cacheInfo = {
+      name: meta.name,
+      after: meta.after,
+      cleans: meta.cleanKeys,
+      key: cache ? defaultCacheKey(meta, attrs) : "",
+      time: 0
+    };
+    if (typeof attrs === "object" && attrs !== null) {
+      entity.set(attrs);
+    }
+    const before = meta.before;
+    if (before) {
+      funcWithTry(before, [entity], entity, noop);
+    }
+    this._staticEmitter.fire("begin", { payload: entity });
+    return entity;
+  }
+  /**
+   * Get or create a Payload for an API request.
+   */
+  static get(attrs, createNew) {
+    let entity;
+    let needsUpdate = false;
+    if (!createNew) {
+      entity = this.cached(attrs);
+    }
+    if (!entity) {
+      entity = this.create(attrs);
+      needsUpdate = true;
+    }
+    return { entity, needsUpdate };
+  }
+  /**
+   * Get cached Payload if available and not expired.
+   */
+  static cached(attrs) {
+    const meta = this.meta(attrs);
+    const cache = attrs["cache"] | 0 || meta.cache || 0;
+    let cacheKey = "";
+    if (cache) {
+      cacheKey = defaultCacheKey(meta, attrs);
+    }
+    if (cacheKey) {
+      const info = this._pendingCacheKeys[cacheKey];
+      if (info) {
+        return info.entity;
       }
-      const keysToDelete = [];
-      bagCache.forEach((bag) => {
-        if (bag?.cacheInfo && nameSet[bag.cacheInfo.name]) {
-          if (bag.cacheInfo.key) {
-            keysToDelete.push(bag.cacheInfo.key);
-          }
+      const cached = this._payloadCache.get(cacheKey);
+      if (cached && cached.cacheInfo) {
+        if (now() - cached.cacheInfo.time > cache) {
+          this._payloadCache.del(cacheKey);
+          return void 0;
         }
-      });
-      for (const key of keysToDelete) {
-        bagCache.del(key);
+        return cached;
       }
-    },
-    on(event, handler) {
-      staticEmitter2.on(event, handler);
-    },
-    off(event, handler) {
-      staticEmitter2.off(event, handler);
-    },
-    fire(event, data) {
-      staticEmitter2.fire(event, data);
-    },
-    extend(newSyncFn, newCacheMax, newCacheBuffer) {
-      return createServiceType(
-        newSyncFn,
-        newCacheMax || cacheMax,
-        newCacheBuffer || cacheBuffer
-      );
     }
-  };
-  const internals = {
-    metas,
-    bagCache,
-    pendingCacheKeys,
-    syncFn,
-    staticEmitter: staticEmitter2
-  };
-  function ServiceInstance() {
-    this.id = generateId("s");
-    this["$e"] = 0;
-    this["$d"] = 0;
-    this["$g"] = [];
-    this["$h"] = [];
-    this._emitter = new EventEmitter();
-    this._internals = internals;
-    this._type = serviceType;
-  }
-  ServiceInstance.prototype = {
-    all(attrs, done) {
-      serviceSend(this, attrs, done, FETCH_FLAGS_ALL, false);
-      return this;
-    },
-    one(attrs, done) {
-      serviceSend(this, attrs, done, FETCH_FLAGS_ONE, false);
-      return this;
-    },
-    save(attrs, done) {
-      serviceSend(this, attrs, done, FETCH_FLAGS_ALL, true);
-      return this;
-    },
-    enqueue(callback) {
-      if (!this["$d"]) {
-        this["$g"].push(callback);
-        this.dequeue(...this["$h"]);
-      }
-      return this;
-    },
-    dequeue(...args) {
-      if (!this["$e"] && !this["$d"]) {
-        this["$e"] = 1;
-        setTimeout(() => {
-          this["$e"] = 0;
-          if (!this["$d"]) {
-            const task2 = this["$g"].shift();
-            if (task2) {
-              this["$h"] = args;
-              funcWithTry(task2, args, this, noop);
-            }
-          }
-        }, 0);
+    return void 0;
+  }
+  /**
+   * Clear cached payloads by endpoint name.
+   */
+  static clear(names) {
+    const nameList = (typeof names === "string" ? names : names.join(",")).split(",");
+    const nameSet = {};
+    for (const n of nameList) {
+      nameSet[n] = 1;
+    }
+    const keysToDelete = [];
+    this._payloadCache.forEach((payload) => {
+      if (payload?.cacheInfo && nameSet[payload.cacheInfo.name]) {
+        if (payload.cacheInfo.key) {
+          keysToDelete.push(payload.cacheInfo.key);
+        }
       }
-    },
-    destroy() {
-      this["$d"] = 1;
-      this["$g"] = [];
-    },
-    on(event, handler) {
-      this._emitter.on(event, handler);
-      return this;
-    },
-    off(event, handler) {
-      this._emitter.off(event, handler);
-      return this;
-    },
-    fire(event, data) {
-      this._emitter.fire(event, data);
-      return this;
+    });
+    for (const key of keysToDelete) {
+      this._payloadCache.del(key);
     }
-  };
-  const staticsMap = {
-    add: serviceType.add,
-    meta: serviceType.meta,
-    create: serviceType.create,
-    get: serviceType.get,
-    cached: serviceType.cached,
-    clear: serviceType.clear,
-    on: serviceType.on,
-    off: serviceType.off,
-    fire: serviceType.fire,
-    extend: serviceType.extend,
-    _internals: internals
-  };
-  const constructor = Object.assign(
-    ServiceInstance,
-    staticsMap
-  );
-  return constructor;
-}
-var Service = createServiceType(noop);
+  }
+  // Static event methods (operate on per-type emitter)
+  static on(event, handler) {
+    this._staticEmitter.on(event, handler);
+  }
+  static off(event, handler) {
+    this._staticEmitter.off(event, handler);
+  }
+  static fire(event, data) {
+    this._staticEmitter.fire(event, data);
+  }
+  /**
+   * Create a new Service subclass with a custom sync function.
+   * Each subclass gets its own per-type state (metaList, cache, etc.)
+   * to ensure isolation between different Service types.
+   */
+  static extend(newSyncFn, newCacheMax, newCacheBuffer) {
+    const ParentService = this;
+    class ChildService extends ParentService {
+      static _metaList = {};
+      static _payloadCache = new Cache({
+        maxSize: newCacheMax || ParentService._cacheMax,
+        bufferSize: newCacheBuffer || ParentService._cacheBuffer
+      });
+      static _pendingCacheKeys = {};
+      static _syncFn = newSyncFn;
+      static _staticEmitter = new EventEmitter();
+      static _cacheMax = newCacheMax || ParentService._cacheMax;
+      static _cacheBuffer = newCacheBuffer || ParentService._cacheBuffer;
+    }
+    return ChildService;
+  }
+};
 function defaultCacheKey(meta, attrs) {
   return JSON.stringify(attrs) + SPLITTER + JSON.stringify(meta);
 }
 function serviceSend(service, attrs, done, flag, save) {
-  if (service["$d"]) return;
-  if (service["$e"]) {
+  if (service["destroyed"]) return;
+  if (service["busy"]) {
     service.enqueue(
       serviceSend.bind(null, service, attrs, done, flag, save)
     );
     return;
   }
-  service["$e"] = 1;
+  service["busy"] = 1;
   let attrList;
   if (typeof attrs === "string") {
     attrList = [{ name: attrs }];
-  } else if (isArray(attrs)) {
+  } else if (Array.isArray(attrs)) {
     attrList = attrs;
   } else {
     attrList = [attrs];
   }
-  const internals = service._internals;
+  const internals = service.internals;
   const { syncFn, pendingCacheKeys, staticEmitter: staticEmitter2 } = internals;
   let requestCount = 0;
   const total = attrList.length;
   const doneArr = new Array(total + 1);
   const errorArgs = [];
   const remoteComplete = (idx, error) => {
-    const bag = doneArr[idx + 1];
-    let newBag = false;
+    const payload = doneArr[idx + 1];
+    let newPayload = false;
     if (error) {
       errorArgs[idx] = error;
-      staticEmitter2.fire("fail", { bag, error });
+      staticEmitter2.fire("fail", { payload, error });
     } else {
-      newBag = true;
-      staticEmitter2.fire("done", { bag });
+      newPayload = true;
+      staticEmitter2.fire("done", { payload });
     }
-    if (!service["$d"]) {
+    if (!service["destroyed"]) {
       const finish = requestCount === total;
       if (finish) {
-        service["$e"] = 0;
+        service["busy"] = 0;
         if (flag === FETCH_FLAGS_ALL) {
           doneArr[0] = errorArgs;
           funcWithTry(done, doneArr, service, noop);
         }
       }
       if (flag === FETCH_FLAGS_ONE) {
-        funcWithTry(done, [error || null, bag, finish, idx], service, noop);
+        funcWithTry(done, [error || null, payload, finish, idx], service, noop);
       }
     }
-    if (newBag) {
-      staticEmitter2.fire("end", { bag, error });
+    if (newPayload) {
+      staticEmitter2.fire("end", { payload, error });
     }
   };
   for (const attr of attrList) {
     if (!attr) continue;
     const attrObj = typeof attr === "string" ? { name: attr } : attr;
-    const bagInfo = service._type.get(attrObj, save);
-    const bagEntity = bagInfo.entity;
-    const cacheKey = bagEntity.cacheInfo?.key || "";
+    const payloadInfo = service.type.get(
+      attrObj,
+      save
+    );
+    const payloadEntity = payloadInfo.entity;
+    const cacheKey = payloadEntity.cacheInfo?.key || "";
     const complete = remoteComplete.bind(null, requestCount++);
     if (cacheKey && pendingCacheKeys[cacheKey]) {
       pendingCacheKeys[cacheKey].push(complete);
-    } else if (bagInfo.needsUpdate) {
+    } else if (payloadInfo.needsUpdate) {
       if (cacheKey) {
         const cacheList = [complete];
-        cacheList.e = bagEntity;
+        cacheList.entity = payloadEntity;
         pendingCacheKeys[cacheKey] = cacheList;
         const cacheComplete = () => {
           const list = pendingCacheKeys[cacheKey];
-          const entity = list.e;
+          const entity = list.entity;
           if (entity.cacheInfo) {
             entity.cacheInfo.time = now();
           }
-          internals.bagCache.set(cacheKey, entity);
+          internals.payloadCache.set(cacheKey, entity);
           Reflect.deleteProperty(pendingCacheKeys, cacheKey);
           for (const cb of list) {
             if (typeof cb === "function") {
@@ -3037,9 +3168,9 @@ function serviceSend(service, attrs, done, flag, save) {
             }
           }
         };
-        syncFn(bagEntity, cacheComplete);
+        syncFn(payloadEntity, cacheComplete);
       } else {
-        syncFn(bagEntity, complete);
+        syncFn(payloadEntity, complete);
       }
     } else {
       complete();
@@ -3047,9 +3178,117 @@ function serviceSend(service, attrs, done, flag, save) {
   }
 }
 
+// src/frame-visualizer.ts
+var MSG_PING = "LARK_VISUALIZER_PING";
+var MSG_PONG = "LARK_VISUALIZER_PONG";
+var MSG_REQUEST_TREE = "LARK_VISUALIZER_REQUEST_TREE";
+var MSG_TREE = "LARK_VISUALIZER_TREE";
+var MSG_TREE_DELTA = "LARK_VISUALIZER_TREE_DELTA";
+function serializeView(view) {
+  return {
+    id: view.id,
+    rendered: !!view.rendered,
+    signature: view.signature,
+    observedStateKeys: view.observedStateKeys ?? null,
+    locationObserved: {
+      flag: view.locationObserved.flag,
+      keys: view.locationObserved.keys,
+      observePath: view.locationObserved.observePath
+    },
+    hasTemplate: !!view.template
+  };
+}
+function serializeFrame(frameId) {
+  const frame = Frame.get(frameId);
+  if (!frame) return null;
+  const view = frame.view;
+  const children = [];
+  for (const childId of frame.children()) {
+    const childNode = serializeFrame(childId);
+    if (childNode) {
+      children.push(childNode);
+    }
+  }
+  return {
+    id: frame.id,
+    parentId: frame.parentId ?? null,
+    viewPath: frame.viewPath ?? null,
+    childrenCount: frame.childrenCount,
+    readyCount: frame.readyCount,
+    childrenCreated: frame.childrenCreated,
+    childrenAlter: frame.childrenAlter,
+    destroyed: frame.destroyed,
+    view: view ? serializeView(view) : null,
+    children
+  };
+}
+function serializeFrameTree() {
+  const root = Frame.root();
+  const rootNode = serializeFrame(root.id);
+  let totalFrames = 0;
+  const countFrames = (node) => {
+    if (!node) return;
+    totalFrames++;
+    for (const child of node.children) {
+      countFrames(child);
+    }
+  };
+  countFrames(rootNode);
+  return {
+    root: rootNode,
+    totalFrames,
+    timestamp: Date.now(),
+    rootId: root.id
+  };
+}
+var bridgeInstalled = false;
+var lastTreeJson = "";
+function installFrameVisualizerBridge() {
+  if (bridgeInstalled) return;
+  if (typeof window === "undefined") return;
+  bridgeInstalled = true;
+  window.addEventListener("message", (event) => {
+    const data = event.data;
+    if (!data || typeof data !== "object") return;
+    const type = data.type;
+    if (type === MSG_PING) {
+      const source = event.source;
+      if (source) {
+        source.postMessage({ type: MSG_PONG }, { targetOrigin: "*" });
+      }
+      return;
+    }
+    if (type === MSG_REQUEST_TREE) {
+      const tree = serializeFrameTree();
+      const source = event.source;
+      if (source) {
+        source.postMessage(
+          { type: MSG_TREE, data: tree },
+          { targetOrigin: "*" }
+        );
+      }
+    }
+  });
+  Frame.on("add", () => {
+    pushTreeUpdate();
+  });
+  Frame.on("remove", () => {
+    pushTreeUpdate();
+  });
+}
+function pushTreeUpdate() {
+  if (window === window.parent) return;
+  const tree = serializeFrameTree();
+  const treeJson = JSON.stringify(tree);
+  if (treeJson !== lastTreeJson) {
+    lastTreeJson = treeJson;
+    window.parent.postMessage({ type: MSG_TREE_DELTA, data: tree }, "*");
+  }
+}
+
 // src/framework.ts
 var config = {
-  rootId: "lark-root",
+  rootId: "root",
   hashbang: "#!",
   error: (error) => {
     throw error;
@@ -3142,7 +3381,12 @@ function dispatcherUpdate(frame, stateKeys) {
   const isChanged = stateKeys ? stateIsObserveChanged(view, stateKeys) : viewIsObserveChanged(view);
   let renderPromise;
   if (isChanged) {
-    const renderResult = funcWithTry(view.$b ?? view.render, [], view, noop);
+    const renderResult = funcWithTry(
+      view.renderMethod ?? view.render,
+      [],
+      view,
+      noop
+    );
     if (renderResult && typeof renderResult.then === "function") {
       renderPromise = renderResult;
     }
@@ -3164,13 +3408,13 @@ function dispatcherUpdate(frame, stateKeys) {
 }
 function dispatcherNotifyChange(e) {
   const rootFrame2 = Frame.root();
-  const view = e["view"];
+  const view = e.view;
   if (view) {
     const viewPath = typeof view === "object" && view !== null ? String(view.to || "") : String(view);
     rootFrame2.mountView(viewPath);
   } else {
     dispatcherUpdateTag++;
-    dispatcherUpdate(rootFrame2, e["keys"]);
+    dispatcherUpdate(rootFrame2, e.keys);
   }
 }
 function dispatchEvent(target, eventType, eventInit) {
@@ -3181,8 +3425,6 @@ function dispatchEvent(target, eventType, eventInit) {
   });
   target.dispatchEvent(event);
 }
-var Base = class extends EventEmitter {
-};
 function use(names, callback) {
   if (!config.require) {
     if (callback) callback();
@@ -3197,7 +3439,7 @@ function use(names, callback) {
   }
 }
 var WAIT_OK = 1;
-var WAIT_TIMEOUT_OR_UNFOUND = 0;
+var WAIT_TIMEOUT_OR_NOT_FOUND = 0;
 function waitZoneViewsRendered(viewId, timeout) {
   if (timeout == null) {
     timeout = 30 * 1e3;
@@ -3208,7 +3450,7 @@ function waitZoneViewsRendered(viewId, timeout) {
     const check = () => {
       const currentTime = now();
       if (currentTime > endTime || !checkFrame) {
-        resolve(WAIT_TIMEOUT_OR_UNFOUND);
+        resolve(WAIT_TIMEOUT_OR_NOT_FOUND);
       } else if (checkFrame.childrenCount === checkFrame.readyCount) {
         resolve(WAIT_OK);
       } else {
@@ -3245,14 +3487,15 @@ var Framework = {
     Router._setConfig(config);
     EventDelegator.setFrameGetter((id) => Frame.get(id));
     Router.on(ROUTER_EVENTS.CHANGED, (data) => {
-      dispatcherNotifyChange(data);
+      if (data) dispatcherNotifyChange(data);
     });
     State.on(ROUTER_EVENTS.CHANGED, (data) => {
-      dispatcherNotifyChange(data);
+      if (data) dispatcherNotifyChange(data);
     });
     booted3 = true;
     markBooted();
     markRouterBooted();
+    installFrameVisualizerBridge();
     const rootFrame2 = Frame.root(config.rootId);
     Router._bind();
     const defaultView = config.defaultView || "";
@@ -3284,7 +3527,7 @@ var Framework = {
   /** Wait for zone views to be rendered */
   waitZoneViewsRendered,
   WAIT_OK,
-  WAIT_TIMEOUT_OR_UNFOUND,
+  WAIT_TIMEOUT_OR_NOT_FOUND,
   /**
    * Convert array to hash map.
    */
@@ -3349,7 +3592,7 @@ var Framework = {
   /**
    * Base class with EventEmitter.
    */
-  Base,
+  Base: EventEmitter,
   // ============================================================
   // Module access
   // ============================================================
@@ -3367,10 +3610,11 @@ if (typeof window !== "undefined") {
   window.__lark_State = State;
   window.__lark_Router = Router;
   window.__lark_Frame = Frame;
+  window.__lark_View = View;
 }
 
 // src/store.ts
-var LARK_GLOBAL = "lark_global";
+var LARK_GLOBAL = "lark-global";
 var Platform = /* @__PURE__ */ ((Platform2) => {
   Platform2["Lark"] = "lark";
   Platform2["React"] = "react";
@@ -3413,8 +3657,10 @@ var Queue = class {
     const flushTickTask = () => {
       while (queue.length > 0) {
         const task2 = queue.shift();
-        pendingTasks.delete(task2);
-        runTask(task2);
+        if (task2) {
+          pendingTasks.delete(task2);
+          runTask(task2);
+        }
       }
     };
     Promise.resolve().then(flushTickTask);
@@ -3513,9 +3759,11 @@ var setStateConfig = (target, config2) => {
   if (target && isObject(config2)) StateConfigMap.set(target, config2);
 };
 var getStateConfig = (target, key) => {
-  if (!StateConfigMap.has(target)) return void 0;
+  if (!StateConfigMap.has(target)) {
+    return void 0;
+  }
   const config2 = StateConfigMap.get(target);
-  return key ? config2[key] : config2;
+  return key ? config2?.[key] : config2;
 };
 var isState = (target) => isObject(target) && StateConfigMap.has(target);
 var createLinkKeys = (target, property) => {
@@ -3685,20 +3933,20 @@ function createState(initialData, config2) {
   lazySet(state, initialData);
   return state;
 }
-var currLazySetKey = null;
+var curLazySetKey = null;
 function lazySet(target, data) {
   if (isObject(data)) {
     Reflect.ownKeys(data).forEach((key) => {
       const strKey = key;
-      if (currLazySetKey) throw new Error("[lark-store] lazy set key conflict");
-      currLazySetKey = strKey;
+      if (curLazySetKey) throw new Error("[lark-store] lazy set key conflict");
+      curLazySetKey = strKey;
       target[strKey] = data[strKey];
     });
   }
 }
 function isLazySet(property) {
-  if (currLazySetKey === property) {
-    currLazySetKey = "";
+  if (curLazySetKey === property) {
+    curLazySetKey = "";
     return true;
   }
   return false;
@@ -4082,14 +4330,11 @@ function defineStore(name, creator, config2) {
   const useStore = adapter.useStore;
   const store = new StoreClass(name, config2);
   store[_storeCreate](
-    creator(
-      store[_innerStore](),
-      extendApis
-    )
+    creator(store[_innerStore](), extendApis)
   );
   Object.defineProperties(useStore, {
     $storeName: { value: name, configurable: true },
-    $del: { value: () => store[_storeDestroy](), configurable: true }
+    $destroyFn: { value: () => store[_storeDestroy](), configurable: true }
   });
   if (!StoreCache.has(name)) {
     StoreCache.set(name, { store, creator, config: config2, useStore });
@@ -4154,7 +4399,7 @@ function observeCell(state, cb, immediate = true) {
 }
 function multi(useStore) {
   const storeName = useStore["$storeName"];
-  const flagSym = `lark_comp_${storeName}`;
+  const flagSym = `lark-comp-${storeName}`;
   const map = /* @__PURE__ */ new Map();
   let rootViewPath;
   const getFlag = (viewContext) => {
@@ -4163,7 +4408,7 @@ function multi(useStore) {
     const viewId = owner?.["id"] || "";
     let flag;
     if (viewPath === rootViewPath) {
-      flag = `${flagSym}_${viewId}`;
+      flag = `${flagSym}-${viewId}`;
     } else {
       flag = owner?.["viewInitParams"]?.[flagSym];
     }
@@ -4180,19 +4425,18 @@ function multi(useStore) {
   };
   const useFn = ((view) => {
     if (!view)
-      throw new Error("[lark-store] multi: cannot find the view instance");
+      throw new Error(
+        "[@lark.js/mvc error] multi: cannot find the view instance"
+      );
     const viewCtx = view;
     const flag = viewCtx[flagSym];
     if (map.has(flag)) return map.get(flag);
-    const newFn = cloneStore(
-      flag,
-      useStore
-    );
+    const newFn = cloneStore(flag, useStore);
     map.set(flag, newFn);
     return useFn(view);
   });
   const mixinObj = {
-    ctor() {
+    make() {
       if (!rootViewPath) {
         const owner = this["owner"];
         rootViewPath = owner?.["path"] || "";
@@ -4242,17 +4486,17 @@ function restoreComments(source, comments) {
 }
 function processViewEvents(source) {
   return source.replace(
-    /v-(\w+)="([^"]+)"/g,
+    /@(\w+)="([^"]+)"/g,
     (fullAttr, eventName, attrValue) => {
       const eventMatch = attrValue.match(/^(\w+)\((.*)\)$/s);
       if (!eventMatch) return fullAttr;
       const handlerName = eventMatch[1];
       const paramsStr = eventMatch[2].trim();
       if (!paramsStr) {
-        return `v-${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}()"`;
+        return `@${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}()"`;
       }
       const urlParams = jsObjectToUrlParams(paramsStr);
-      return `v-${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}(${urlParams})"`;
+      return `@${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}(${urlParams})"`;
     }
   );
 }
@@ -4325,7 +4569,7 @@ function convertArtSyntax(source, debug) {
   }
   if (blockStack.length > 0) {
     const unclosed = blockStack.map((b) => `"${b.ctrl}" at line ${b.line}`).join(", ");
-    throw new Error(`[@lark/mvc error] unclosed block(s): ${unclosed}`);
+    throw new Error(`[@lark.js/mvc error] unclosed block(s): ${unclosed}`);
   }
   return result.join("");
 }
@@ -4419,12 +4663,12 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       }
       return `${debugPrefix}<%}else{%>`;
     }
-    case "each": {
-      blockStack.push({ ctrl: "each", line: lineNo });
+    case "forOf": {
+      blockStack.push({ ctrl: "forOf", line: lineNo });
       const object = tokens[0];
       if (tokens.length > 1 && tokens[1] !== "as") {
         throw new Error(
-          `[@lark/mvc error] bad each syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{each list as item [index]}}`
+          `[@lark.js/mvc error] bad forOf syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{forOf list as item [index]}}`
         );
       }
       const restTokens = tokens.slice(2);
@@ -4446,12 +4690,12 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       }
       return `${debugPrefix}<%for(let ${index}=0${refExpr},${refObjCount}=${refObj}.length${lastCount};${index}<${refObjCount};${index}++){${firstAndLast}${valueDecl}%>`;
     }
-    case "parse": {
-      blockStack.push({ ctrl: "parse", line: lineNo });
+    case "forIn": {
+      blockStack.push({ ctrl: "forIn", line: lineNo });
       const object = tokens[0];
       if (tokens.length > 1 && tokens[1] !== "as") {
         throw new Error(
-          `[@lark/mvc error] bad parse syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{for-in obj as val [key]}}`
+          `[@lark.js/mvc error] bad forIn syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{for-in obj as val [key]}}`
         );
       }
       const restTokens2 = tokens.slice(2);
@@ -4471,19 +4715,19 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
     case "set":
       return `${debugPrefix}<%let ${tokens.join(" ")};%>`;
     case "/if":
-    case "/each":
-    case "/parse":
+    case "/forOf":
+    case "/forIn":
     case "/for": {
       const expectedCtrl = keyword.substring(1);
       const last = blockStack.pop();
       if (!last) {
         throw new Error(
-          `[@lark/mvc error(template] unexpected {{${code}}}: no matching open block`
+          `[@lark.js/mvc error] unexpected {{${code}}}: no matching open block`
         );
       }
       if (last.ctrl !== expectedCtrl) {
         throw new Error(
-          `[@lark/mvc error(template] unexpected {{${code}}}: expected {{/${last.ctrl}}} to close block opened at line ${last.line}`
+          `[@lark.js/mvc error] unexpected {{${code}}}: expected {{/${last.ctrl}}} to close block opened at line ${last.line}`
         );
       }
       return `${debugPrefix}<%}%>`;
@@ -4547,7 +4791,7 @@ function parseAsExpr(expr) {
 function compileToFunction(source, debug, file) {
   const matcher = /<%([@=!:])?([\s\S]*?)%>|$/g;
   let index = 0;
-  let funcSource = `$p+='`;
+  let funcSource = `$out+='`;
   let hasAtRule = false;
   const escapeSlashRegExp = /\\|'/g;
   const escapeBreakReturnRegExp = /\r|\n/g;
@@ -4573,17 +4817,17 @@ function compileToFunction(source, debug, file) {
       }
       if (operate === "@") {
         hasAtRule = true;
-        funcSource += `'+($expr='<%${operate + expr}%>',$i($$ref,${content}))+'`;
+        funcSource += `'+($dbgExpr='<%${operate + expr}%>',$refFn($refAlt,${content}))+'`;
       } else if (operate === "=" || operate === ":") {
-        funcSource += `'+($expr='<%${operate + expr}%>',$e(${content}))+'`;
+        funcSource += `'+($dbgExpr='<%${operate + expr}%>',$encHtml(${content}))+'`;
       } else if (operate === "!") {
-        if (!content.startsWith("$eu(") || !content.endsWith(")")) {
-          content = `$n(${content})`;
+        if (!content.startsWith("$encUri(") || !content.endsWith(")")) {
+          content = `$strSafe(${content})`;
         }
-        funcSource += `'+($expr='<%${operate + expr}%>',${content})+'`;
+        funcSource += `'+($dbgExpr='<%${operate + expr}%>',${content})+'`;
       } else if (content) {
         if (line > -1) {
-          funcSource += `';$line=${line};$art='${art}';`;
+          funcSource += `';$dbgLine=${line};$dbgArt='${art}';`;
           content = "";
         } else {
           funcSource += `';`;
@@ -4592,19 +4836,19 @@ function compileToFunction(source, debug, file) {
           funcSource = funcSource.substring(0, funcSource.length - 4) + ";";
         }
         if (expr) {
-          funcSource += `$expr='<%${expr}%>';`;
+          funcSource += `$dbgExpr='<%${expr}%>';`;
         }
-        funcSource += content + `;$p+='`;
+        funcSource += content + `;$out+='`;
       }
     } else {
       if (operate === "@") {
         hasAtRule = true;
-        funcSource += `'+$i($$ref,${content})+'`;
+        funcSource += `'+$refFn($refAlt,${content})+'`;
       } else if (operate === "=" || operate === ":") {
-        funcSource += `'+$e(${content})+'`;
+        funcSource += `'+$encHtml(${content})+'`;
       } else if (operate === "!") {
-        if (!content.startsWith("$eu(") || !content.endsWith(")")) {
-          content = `$n(${content})`;
+        if (!content.startsWith("$encUri(") || !content.endsWith(")")) {
+          content = `$strSafe(${content})`;
         }
         funcSource += `'+${content}+'`;
       } else if (content) {
@@ -4612,28 +4856,28 @@ function compileToFunction(source, debug, file) {
         if (funcSource.endsWith(`+'';`)) {
           funcSource = funcSource.substring(0, funcSource.length - 4) + ";";
         }
-        funcSource += `${content};$p+='`;
+        funcSource += `${content};$out+='`;
       }
     }
     return match;
   });
   funcSource += `';`;
-  funcSource = funcSource.replace(/\$p\+='';/g, "");
-  funcSource = funcSource.replace(/\$p\+=''\+/g, "$p+=");
+  funcSource = funcSource.replace(/\$out\+='';/g, "");
+  funcSource = funcSource.replace(/\$out\+=''\+/g, "$out+=");
   if (debug) {
     const filePart = file ? `\\r\\n\\tat file:${file}` : "";
-    funcSource = `let $expr,$art,$line;try{${funcSource}}catch(ex){let msg='render view error:'+(ex.message||ex);if($art)msg+='\\r\\n\\tsrc art:{{'+$art+'}}\\r\\n\\tat line:'+$line;msg+='\\r\\n\\t'+($art?'translate to:':'expr:');msg+=$expr+'${filePart}';throw msg;}`;
+    funcSource = `let $dbgExpr,$dbgArt,$dbgLine;try{${funcSource}}catch(ex){let msg='render view error:'+(ex.message||ex);if($dbgArt)msg+='\\r\\n\\tsrc art:{{'+$dbgArt+'}}\\r\\n\\tat line:'+$dbgLine;msg+='\\r\\n\\t'+($dbgArt?'translate to:':'expr:');msg+=$dbgExpr+'${filePart}';throw msg;}`;
   }
   const viewIdRegExp = new RegExp(String.fromCharCode(31), "g");
   funcSource = funcSource.replace(viewIdRegExp, `'+$viewId+'`);
-  const atRule = hasAtRule ? `if(!$i){$i=(ref,v,k,f)=>{for(f=ref[$g];--f;)if(ref[k=$g+f]===v)return k;ref[k=$g+ref[$g]++]=v;return k;}}` : "";
-  const encode = `if(!$n){let $em={'&':'amp','<':'lt','>':'gt','"':'#34','\\'':'#39','\`':'#96'},$er=/[&<>"'\`]/g,$ef=m=>'&'+$em[m]+';';$n=v=>''+(v==null?'':v);$e=v=>$n(v).replace($er,$ef)}`;
-  const encodeURIMore = `if(!$eu){let $um={'!':'%21','\\'':'%27','(':'%28',')':'%29','*':'%2A'},$uf=m=>$um[m],$uq=/[!')(*]/g;$eu=v=>encodeURIComponent($n(v)).replace($uq,$uf)}`;
-  const encodeQuote = `if(!$eq){let $qr=/['"\\\\]/g;$eq=v=>$n(v).replace($qr,'\\\\$&')}`;
-  const refFallback = "if(!$$ref)$$ref=$$;";
+  const atRule = hasAtRule ? `if(!$refFn){$refFn=(ref,v,k,f)=>{for(f=ref[$splitter];--f;)if(ref[k=$splitter+f]===v)return k;ref[k=$splitter+ref[$splitter]++]=v;return k;}}` : "";
+  const encode = `if(!$strSafe){let $entMap={'&':'amp','<':'lt','>':'gt','"':'#34','\\'':'#39','\`':'#96'},$entReg=/[&<>"'\`]/g,$entFn=m=>'&'+$entMap[m]+';';$strSafe=v=>''+(v==null?'':v);$encHtml=v=>$strSafe(v).replace($entReg,$entFn)}`;
+  const encodeURIMore = `if(!$encUri){let $uriMap={'!':'%21','\\'':'%27','(':'%28',')':'%29','*':'%2A'},$uriFn=m=>$uriMap[m],$uriReg=/[!')(*]/g;$encUri=v=>encodeURIComponent($strSafe(v)).replace($uriReg,$uriFn)}`;
+  const encodeQuote = `if(!$encQuote){let $qReg=/['"\\\\]/g;$encQuote=v=>$strSafe(v).replace($qReg,'\\\\$&')}`;
+  const refFallback = "if(!$refAlt)$refAlt=$data;";
   const fns = `${refFallback}${encode}${encodeURIMore}${encodeQuote}${atRule};`;
-  const fullSource = `${fns}let $g='\\x1e',$_temp,$p=''{{VARS}};${funcSource}return $p`;
-  return `($$,$viewId,$$ref,$e,$n,$eu,$i,$eq)=>{${fullSource}}`;
+  const fullSource = `${fns}let $splitter='\\x1e',$tmp,$out=''{{VARS}};${funcSource}return $out`;
+  return `($data,$viewId,$refAlt,$encHtml,$strSafe,$encUri,$refFn,$encQuote)=>{${fullSource}}`;
 }
 function compileTemplate(source, options = {}) {
   const { debug = false, globalVars = [], file } = options;
@@ -4642,17 +4886,17 @@ function compileTemplate(source, options = {}) {
   const viewEventProcessed = processViewEvents(converted);
   const finalSource = restoreComments(viewEventProcessed, comments);
   const funcBody = compileToFunction(finalSource, debug, file);
-  const varDeclarations = globalVars.map((key) => `,${key}=$$.${key}`).join("");
+  const varDeclarations = globalVars.map((key) => `,${key}=$data.${key}`).join("");
   const funcWithVars = funcBody.replace("{{VARS}}", () => varDeclarations);
   return `export default function(data, selfId, refData) {
-  let $$ = data || {},
+  let $data = data || {},
       $viewId = selfId || '';
-  return (${funcWithVars})($$, $viewId, refData,
-    /* $e */ v => String(v == null ? '' : v).replace(/[&<>"'\`]/g, m => '&' + ({'&':'amp','<':'lt','>':'gt','"':'#34',"'":'#39','\`':'#96'})[m] + ';'),
-    /* $n */ v => String(v == null ? '' : v),
-    /* $eu */ null,
-    /* $i */ null,
-    /* $eq */ null
+  return (${funcWithVars})($data, $viewId, refData,
+    /* $encHtml */ v => String(v == null ? '' : v).replace(/[&<>"'\`]/g, m => '&' + ({'&':'amp','<':'lt','>':'gt','"':'#34',"'":'#39','\`':'#96'})[m] + ';'),
+    /* $strSafe */ v => String(v == null ? '' : v),
+    /* $encUri */ null,
+    /* $refFn */ null,
+    /* $encQuote */ null
   );
 }`;
 }
@@ -4761,7 +5005,7 @@ function fallbackExtractVariables(source) {
   while ((m = outputRegExp.exec(source)) !== null) {
     vars.add(m[1]);
   }
-  const eachRegExp = /\{\{each\s+([a-zA-Z_$][\w$]*)\s+as/g;
+  const eachRegExp = /\{\{forOf\s+([a-zA-Z_$][\w$]*)\s+as/g;
   while ((m = eachRegExp.exec(source)) !== null) {
     vars.add(m[1]);
   }
@@ -4807,77 +5051,88 @@ var BUILTIN_GLOBALS = {
   //
   // These variables appear in the generated template function signature
   // or body. They must be excluded from extractGlobalVars() so that
-  // they are not mistaken for user data variables and destructured from $$.
+  // they are not mistaken for user data variables and destructured from $data.
   // SPLITTER character constant (same as \x1e), used as namespace separator
   // for refData keys, event attribute encoding, and internal data structures.
-  // Declared as: let $g='\x1e'
-  $g: 1,
-  // refData — the data object passed from Updater to the template function.
-  // User variables are destructured from $$ at the top of the function:
-  //   let {name, age} = $$;
+  // Declared as: let $splitter='\x1e'
+  $splitter: 1,
+  // Data — the data object passed from Updater to the template function.
+  // User variables are destructured from $data at the top of the function:
+  //   let {name, age} = $data;
   // This is the first parameter of the generated arrow function.
-  $$: 1,
+  $data: 1,
   // Null-safe toString: v => '' + (v == null ? '' : v)
   // Converts null/undefined to empty string, otherwise calls toString().
   // Wraps every {{!raw}} output to prevent "null" / "undefined" rendering.
-  $n: 1,
-  // HTML entity encoder: v => $n(v).replace(/[&<>"'`]/g, entityMap)
+  $strSafe: 1,
+  // HTML entity encoder: v => $strSafe(v).replace(/[&<>"'`]/g, entityMap)
   // Encodes &, <, >, ", ', ` to HTML entities (&amp; &lt; etc.)
   // Applied to all {{=escaped}} and {{:binding}} outputs.
-  $e: 1,
-  // HTML entity map — internal object used by $e:
+  $encHtml: 1,
+  // HTML entity map — internal object used by $encHtml:
   //   {'&':'amp','<':'gt','>':'gt','"':'#34','\'':'#39','`':'#96'}
-  // Not a standalone function; referenced inside $e's closure.
-  $em: 1,
-  // HTML entity RegExp — internal regexp used by $e:
+  // Not a standalone function; referenced inside $encHtml's closure.
+  $entMap: 1,
+  // HTML entity RegExp — internal regexp used by $encHtml:
   //   /[&<>"'`]/g
-  $er: 1,
-  // HTML entity replacer function — internal helper used by $e:
-  //   m => '&' + $em[m] + ';'
-  // Maps each matched character to its entity string.
-  $ef: 1,
+  $entReg: 1,
+  // HTML entity replacer function — internal helper used by $encHtml:
+  //   m => '&' + $entMap[m] + ';'
+  // Maps matched character to its entity string.
+  $entFn: 1,
   // Output buffer — the string accumulator for rendered HTML.
-  // All template output is appended via $p += '...'.
-  // Declared as: let $p = ''
-  $p: 1,
+  // All template output is appended via $out += '...'.
+  // Declared as: let $out = ''
+  $out: 1,
   // Reference lookup: (refData, value) => key
   // Finds or allocates a SPLITTER-prefixed key in refData for a given
   // object reference. Used by {{@ref}} operator for passing object
-  // references to child views via lark-view attributes.
-  // Aligned with mx.js Updater_Ref.
-  $i: 1,
-  // URI encoder: v => encodeURIComponent($n(v)).replace(/[!')(*]/g, extraMap)
+  // references to child views via v-lark attributes.
+  $refFn: 1,
+  // URI encoder: v => encodeURIComponent($strSafe(v)).replace(/[!')(*]/g, extraMap)
   // Extends encodeURIComponent with encoding of ! ' ( ) *.
-  // Applied to values in v-event URL parameters and {{!uri}} contexts.
-  $eu: 1,
-  // Quote encoder: v => $n(v).replace(/['"\\]/g, '\\$&')
+  // Applied to values in @event URL parameters and {{!uri}} contexts.
+  $encUri: 1,
+  // URI encode map — internal object used by $encUri:
+  //   {'!':'%21','\'':'%27','(':'%28',')':'%29','*':'%2A'}
+  $uriMap: 1,
+  // URI encode replacer — internal helper used by $encUri:
+  //   m => $uriMap[m]
+  $uriFn: 1,
+  // URI encode regexp — internal regexp used by $encUri:
+  //   /[!')(*]/g
+  $uriReg: 1,
+  // Quote encoder: v => $strSafe(v).replace(/['"\\]/g, '\\$&')
   // Escapes quotes and backslashes for safe embedding in HTML attribute
   // values (e.g. data-json='...').
-  $eq: 1,
+  $encQuote: 1,
+  // Quote encode regexp — internal regexp used by $encQuote:
+  //   /['"\\]/g
+  $qReg: 1,
   // View ID — the unique identifier of the owning View instance.
-  // Injected into v-event attribute values at render time so that
+  // Injected into @event attribute values at render time so that
   // EventDelegator can dispatch events to the correct View handler.
   // The \x1f placeholder in compiled output is replaced with '+$viewId+'.
   $viewId: 1,
   // Debug: current expression text — stores the template expression being
   // evaluated, for error reporting. Only present in debug mode.
-  // e.g. $expr='<%=user.name%>'
-  $expr: 1,
+  // e.g. $dbgExpr='<%=user.name%>'
+  $dbgExpr: 1,
   // Debug: original art syntax — stores the {{}} template syntax before
   // conversion, for error reporting. Only present in debug mode.
-  // e.g. $art='{{=user.name}}'
-  $art: 1,
+  // e.g. $dbgArt='{{=user.name}}'
+  $dbgArt: 1,
   // Debug: source line number — tracks the current line in the template
   // source, for error reporting. Only present in debug mode.
-  $line: 1,
-  // refData alias — fallback reference lookup table.
-  // Defaults to $$ when no explicit $$ref is provided.
-  // Ensures $i() does not crash when @ operator is used without refData.
-  $$ref: 1,
+  $dbgLine: 1,
+  // RefData alias — fallback reference lookup table.
+  // Defaults to $data when no explicit $refAlt is provided.
+  // Ensures $refFn() does not crash when @ operator is used without refData.
+  $refAlt: 1,
   // Temporary variable — used by the compiler for intermediate
   // expression results in generated code (e.g. loop variables,
-  // conditional branches). Declared as: let $_temp
-  $_temp: 1,
+  // conditional branches). Declared as: let $tmp
+  $tmp: 1,
   // JS literals
   undefined: 1,
   null: 1,
@@ -4942,7 +5197,6 @@ var BUILTIN_GLOBALS = {
 };
 var BUILTIN_GLOBAL_SET = new Set(Object.keys(BUILTIN_GLOBALS));
 export {
-  Bag,
   CALL_BREAK_TIME,
   Cache,
   EVENT_METHOD_REGEXP,
@@ -4951,16 +5205,14 @@ export {
   Frame,
   Framework,
   LARK_VIEW,
+  Payload,
   Platform,
   ROUTER_EVENTS,
   Router,
   SPLITTER,
   Service,
   State,
-  TAG_ATTR_KEY,
-  TAG_KEY,
   TAG_NAME_REGEXP,
-  TAG_VIEW_KEY,
   Updater,
   VIEW_EVENT_METHOD_REGEXP,
   View,
@@ -4991,7 +5243,7 @@ export {
   getStore,
   getUseStore,
   has,
-  isArray,
+  installFrameVisualizerBridge,
   isPlainObject,
   isPrimitive,
   isPrimitiveOrFunc,
@@ -5011,6 +5263,7 @@ export {
   parseUri,
   registerViewClass,
   safeguard,
+  serializeFrameTree,
   setData,
   shallowSet,
   mark2 as storeMark,