@lark.js/mvc 0.0.2 → 0.0.3

package/dist/index.d.ts

@@ -417,7 +417,7 @@ type Constructable = new (...args: never[]) => unknown;
  * This is the only place where we touch constructor internals -
  * it's a low-level framework utility for View.extend.
  */
-declare function classExtend<Proto extends object, Statics extends object>(ctor: Constructable, base: Constructable, props: Proto, statics: Statics): void;
+declare function classExtend<Proto extends object, Statics extends object>(make: Constructable, base: Constructable, props: Proto, statics: Statics): void;
 
 /** Internal splitter character (invisible, used as namespace separator) */
 declare const SPLITTER = "\u001E";
@@ -426,14 +426,8 @@ declare const ROUTER_EVENTS: {
     CHANGED: string;
     PAGE_UNLOAD: string;
 };
-/** Attribute name: lark-key (static key for skipping VDOM diff) */
-declare const TAG_KEY = "lark-key";
-/** Attribute name: lark-attr-key (static attribute key) */
-declare const TAG_ATTR_KEY = "lark-attr-key";
-/** Attribute name: l (view key for assign) */
-declare const TAG_VIEW_KEY = "lark-view-key";
-/** Attribute name: lark-view */
-declare const LARK_VIEW = "lark-view";
+/** Attribute name: v-lark */
+declare const LARK_VIEW = "v-lark";
 /** View event method regex: e.g. "app\x1eclickHandler(click)" or "clickHandler()"
  * Group 1: optional frame ID (before SPLITTER)
  * Group 2: handler name
@@ -492,7 +486,7 @@ declare function unmark$1(host: object): void;
  */
 /**
  * Wrap data with a Proxy for debug-mode protection.
- * Only active when window.__lark_debug is true and Proxy is available.
+ * Only active when window.__lark_Debug is true and Proxy is available.
  *
  * @param data - Data to wrap
  * @param getter - Optional callback when properties are read
@@ -608,7 +602,7 @@ declare const State: {
     digest(data?: Record<string, unknown>, excludes?: Set<string>): void;
     diff(): Readonly<Record<string, number>>;
     clean(keys: string): {
-        ctor: AnyFunc;
+        make: AnyFunc;
     };
     on(event: string, handler: AnyFunc): typeof State;
     off(event: string, handler?: AnyFunc): typeof State;
@@ -749,7 +743,7 @@ declare class View {
      * 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.
      */
@@ -791,7 +785,7 @@ declare class Frame extends EventEmitter implements FrameLike {
     hasAltered: number;
     /** Whether view is destroyed */
     destroyed: number;
-    /** View path (lark-view attribute value) */
+    /** View path (v-lark attribute value) */
     viewPath?: string;
     /** Original template before mount */
     originalTemplate?: string;
@@ -884,7 +878,7 @@ declare function vdomUnmountFrames(frame: FrameLike, node: ChildNode): void;
 declare function vdomGetNode(html: string, refNode: Element): Element;
 /**
  * Get compare key for a DOM node (for keyed diff).
- * Uses id, lark-key (static key), or lark-view path.
+ * Uses id, ldk (static key), or v-lark path.
  */
 declare function vdomGetCompareKey(node: ChildNode): string | undefined;
 /**
@@ -1233,7 +1227,7 @@ declare const Framework: {
         digest(data?: Record<string, unknown>, excludes?: Set<string>): void;
         diff(): Readonly<Record<string, number>>;
         clean(keys: string): {
-            ctor: AnyFunc;
+            make: AnyFunc;
         };
         on(event: string, handler: AnyFunc): typeof State;
         off(event: string, handler?: AnyFunc): typeof State;
@@ -1392,19 +1386,85 @@ declare function isStoreActive(name: string): boolean;
 declare function cell<T = unknown>(data: T): T;
 declare function observeCell(state: ProxyObject, cb: AnyFunc, immediate?: boolean): () => void;
 declare function multi<S = Record<string, unknown>>(useStore: LarkUseStore<S>): [LarkUseStore<S>, {
-    ctor: AnyFunc;
+    make: AnyFunc;
 }];
 
+/** Serialized view info attached to a frame node */
+interface SerializedViewInfo {
+    /** View ID (same as frame ID) */
+    id: string;
+    /** Whether the view has rendered at least once */
+    rendered: boolean;
+    /** View signature (> 0 = active) */
+    signature: number;
+    /** Observed state keys */
+    observedStateKeys: string[] | null;
+    /** Location observation config */
+    locationObserved: {
+        flag: number;
+        keys: string[];
+        observePath: boolean;
+    };
+    /** Whether view has a template function */
+    hasTemplate: boolean;
+}
+/** A single node in the serialized frame tree */
+interface SerializedFrameNode {
+    /** Frame ID (same as owner DOM element ID) */
+    id: string;
+    /** Parent frame ID (null for root) */
+    parentId: string | null;
+    /** View path (v-lark attribute value) */
+    viewPath: string | null;
+    /** Number of child frames */
+    childrenCount: number;
+    /** Number of children that have fired 'created' */
+    readyCount: number;
+    /** Whether children have been created */
+    childrenCreated: number;
+    /** Whether children are in alter state */
+    childrenAlter: number;
+    /** Whether this frame is destroyed */
+    destroyed: number;
+    /** Serialized view info (null if no view mounted) */
+    view: SerializedViewInfo | null;
+    /** Child frame nodes */
+    children: SerializedFrameNode[];
+}
+/** Top-level serialized frame tree */
+interface SerializedFrameTree {
+    /** Root frame node */
+    root: SerializedFrameNode | null;
+    /** Total frame count */
+    totalFrames: number;
+    /** Timestamp of serialization */
+    timestamp: number;
+    /** Root element ID */
+    rootId: string;
+}
+/**
+ * Serialize the entire Frame tree starting from root.
+ */
+declare function serializeFrameTree(): SerializedFrameTree;
+/**
+ * Install the Frame Visualizer Bridge.
+ * Listens for postMessage events from the visualizer and responds
+ * with serialized frame tree data.
+ *
+ * This should be called once during Framework.boot().
+ */
+declare function installFrameVisualizerBridge(): void;
+
 /**
  * @lark/framework Template Compiler
  *
  *   convertArtSyntax()    ({{}} → <% %>)
- *   processViewEvents()      (v-event prefix + param encoding)
+ *   processViewEvents()      (@event prefix + param encoding)
  *   compileToFunction()  (<% %> → JS template function)
  *   extractGlobalVars()   (AST-based global var analysis via @babel/parser)
  *
  * - All template operators: = (escape), ! (raw), @ (ref lookup), : (binding)
- * - v-event attribute processing with $g prefix + \x1e separator
+ * - @event attribute processing with $g prefix + \x1e separator
  * - $n (null-safe toString), $e (HTML entity encode), $eu (URI encode), $eq (quote encode), $i (ref lookup)
  * - Debug mode with line tracking ($expr/$art/$line) and try-catch error wrapper
  * - View ID injection (\x1f → '+$viewId+')
@@ -1468,4 +1528,4 @@ declare function compileTemplate(source: string, options?: CompileOptions): stri
  */
 declare function extractGlobalVars(source: string): string[];
 
-export { type AnyFunc, Bag, type BagEntry, CALL_BREAK_TIME, Cache, type CacheEntry, type CacheOptions, type CompileOptions, type Constructable, EVENT_METHOD_REGEXP, EventDelegator, EventEmitter, type EventListenerEntry, Frame, type FrameBoundElement, type FrameChildrenMap, type FrameInvokeEntry, type FrameLike, type FrameReadyMap, Framework, type FrameworkConfig, LARK_VIEW, type LarkUseStore, type Location, type LocationDiff, type MixinEventHandler, type NodeUseStore, type ObservePayload, type ParamDiff, type ParsedUri, type PendingCacheEntry, Platform, ROUTER_EVENTS, type ReactUseStore, type RouteViewConfig, Router, SPLITTER, Service, type ServiceCacheInfo, type ServiceConstructor, type ServiceEntry, type ServiceMetaEntry, type ServiceOptions, State, type StoreConfig, type StoreMethods, TAG_ATTR_KEY, TAG_KEY, TAG_NAME_REGEXP, TAG_VIEW_KEY, Updater, type UpdaterLike, type VDomOp, type VDomRef, VIEW_EVENT_METHOD_REGEXP, type VdomElement, View, type ViewClassInternal, type ViewEventObjectMap, type ViewEventSelectorEntry, type ViewEventSelectorMap, type ViewGlobalEventEntry, type ViewInstance, type ViewLocationObserved, type ViewResourceEntry, type ViewResourceMap, type VoidFunc, applyIdUpdates, applyStyle, applyVdomOps, assign, cell, classExtend, cloneData, cloneStore, compileTemplate, createState, createVdomRef, defineStore, delStore, encodeHTML, encodeQ, encodeSafe, encodeURIExtra, ensureElementId, extractGlobalVars, funcWithTry, generateId, getAttribute, getById, getPlatform, getStore, getUseStore, has, isArray, isPlainObject, isPrimitive, isPrimitiveOrFunc, isState, isStoreActive, keys, lazySet, mark$1 as mark, markBooted, markRouterBooted, multi, nextCounter, nodeInside, noop, now, observeCell, parseUri, registerViewClass, safeguard, setData, shallowSet, mark as storeMark, unmark as storeUnmark, syncCounter, toMap, toUri, translateData, unmark$1 as unmark, vdomGetCompareKey, vdomGetNode, vdomSetAttributes, vdomSetChildNodes, vdomSetNode, vdomSpecialDiff, vdomUnmountFrames };
+export { type AnyFunc, Bag, type BagEntry, CALL_BREAK_TIME, Cache, type CacheEntry, type CacheOptions, type CompileOptions, type Constructable, EVENT_METHOD_REGEXP, EventDelegator, EventEmitter, type EventListenerEntry, Frame, type FrameBoundElement, type FrameChildrenMap, type FrameInvokeEntry, type FrameLike, type FrameReadyMap, Framework, type FrameworkConfig, LARK_VIEW, type LarkUseStore, type Location, type LocationDiff, type MixinEventHandler, type NodeUseStore, type ObservePayload, type ParamDiff, type ParsedUri, type PendingCacheEntry, Platform, ROUTER_EVENTS, type ReactUseStore, type RouteViewConfig, Router, SPLITTER, type SerializedFrameNode, type SerializedFrameTree, type SerializedViewInfo, Service, type ServiceCacheInfo, type ServiceConstructor, type ServiceEntry, type ServiceMetaEntry, type ServiceOptions, State, type StoreConfig, type StoreMethods, TAG_NAME_REGEXP, Updater, type UpdaterLike, type VDomOp, type VDomRef, VIEW_EVENT_METHOD_REGEXP, type VdomElement, View, type ViewClassInternal, type ViewEventObjectMap, type ViewEventSelectorEntry, type ViewEventSelectorMap, type ViewGlobalEventEntry, type ViewInstance, type ViewLocationObserved, type ViewResourceEntry, type ViewResourceMap, type VoidFunc, applyIdUpdates, applyStyle, applyVdomOps, assign, cell, classExtend, cloneData, cloneStore, compileTemplate, createState, createVdomRef, defineStore, delStore, encodeHTML, encodeQ, encodeSafe, encodeURIExtra, ensureElementId, extractGlobalVars, funcWithTry, generateId, getAttribute, getById, getPlatform, getStore, getUseStore, has, installFrameVisualizerBridge, isArray, isPlainObject, isPrimitive, isPrimitiveOrFunc, isState, isStoreActive, keys, lazySet, mark$1 as mark, markBooted, markRouterBooted, multi, nextCounter, nodeInside, noop, now, observeCell, parseUri, registerViewClass, safeguard, serializeFrameTree, setData, shallowSet, mark as storeMark, unmark as storeUnmark, syncCounter, toMap, toUri, translateData, unmark$1 as unmark, vdomGetCompareKey, vdomGetNode, vdomSetAttributes, vdomSetChildNodes, vdomSetNode, vdomSpecialDiff, vdomUnmountFrames };

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]*?)?\\)`
 );
@@ -201,13 +206,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;
+  Object.assign(make, statics);
+  cProto.constructor = make;
+  make["prototype"] = cProto;
 }
 
 // src/apply-style.ts
@@ -275,7 +280,7 @@ function unmark(host) {
 var proxiesPool = /* @__PURE__ */ new Map();
 var SAFEGUARD_SENTINEL = "_sf_";
 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") {
@@ -577,7 +582,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 +625,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 +651,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 +666,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 +697,7 @@ var State = {
    */
   clean(keys2) {
     return {
-      ctor: function() {
+      make: function() {
         const keyList = setupKeysRef(keys2);
         this.on("destroy", () => {
           teardownKeysRef(keyList);
@@ -873,7 +878,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 +902,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;
@@ -1074,7 +1079,7 @@ function parseEventInfo(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);
@@ -1318,7 +1323,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 +1451,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 +1606,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,10 +1741,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;
+  VIEW_GLOBALS["document"] = document;
 }
 function viewPrepare(oView) {
   if (oView.ctors) {
@@ -1866,7 +1871,7 @@ function viewMergeMixins(mixins, viewClass, ctors) {
       if (!has(node, p)) continue;
       const fn = node[p];
       const exist = temp[p];
-      if (p === "ctor") {
+      if (p === "make") {
         ctors.push(fn);
         continue;
       }
@@ -2203,23 +2208,23 @@ var View = class _View {
    * 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") {
             this[key] = props[key];
           }
         }
@@ -2241,7 +2246,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];
       }
     }
@@ -2320,7 +2325,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;
@@ -3047,6 +3052,114 @@ function serviceSend(service, attrs, done, flag, save) {
   }
 }
 
+// src/frame-visualizer/index.ts
+var MSG_PING = "LARK_VIS_PING";
+var MSG_PONG = "LARK_VIS_PONG";
+var MSG_REQUEST_TREE = "LARK_VIS_REQUEST_TREE";
+var MSG_TREE = "LARK_VIS_TREE";
+var MSG_TREE_DELTA = "LARK_VIS_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",
@@ -3253,6 +3366,7 @@ var Framework = {
     booted3 = true;
     markBooted();
     markRouterBooted();
+    installFrameVisualizerBridge();
     const rootFrame2 = Frame.root(config.rootId);
     Router._bind();
     const defaultView = config.defaultView || "";
@@ -3685,20 +3799,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;
@@ -4192,7 +4306,7 @@ function multi(useStore) {
     return useFn(view);
   });
   const mixinObj = {
-    ctor() {
+    make() {
       if (!rootViewPath) {
         const owner = this["owner"];
         rootViewPath = owner?.["path"] || "";
@@ -4242,17 +4356,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})"`;
     }
   );
 }
@@ -4478,12 +4592,12 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       const last = blockStack.pop();
       if (!last) {
         throw new Error(
-          `[@lark/mvc error(template] unexpected {{${code}}}: no matching open block`
+          `[@lark/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/mvc error] unexpected {{${code}}}: expected {{/${last.ctrl}}} to close block opened at line ${last.line}`
         );
       }
       return `${debugPrefix}<%}%>`;
@@ -4843,19 +4957,18 @@ var BUILTIN_GLOBALS = {
   // 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.
+  // references to child views via v-lark attributes.
   $i: 1,
   // URI encoder: v => encodeURIComponent($n(v)).replace(/[!')(*]/g, extraMap)
   // Extends encodeURIComponent with encoding of ! ' ( ) *.
-  // Applied to values in v-event URL parameters and {{!uri}} contexts.
+  // Applied to values in @event URL parameters and {{!uri}} contexts.
   $eu: 1,
   // Quote encoder: v => $n(v).replace(/['"\\]/g, '\\$&')
   // Escapes quotes and backslashes for safe embedding in HTML attribute
   // values (e.g. data-json='...').
   $eq: 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,
@@ -4957,10 +5070,7 @@ export {
   SPLITTER,
   Service,
   State,
-  TAG_ATTR_KEY,
-  TAG_KEY,
   TAG_NAME_REGEXP,
-  TAG_VIEW_KEY,
   Updater,
   VIEW_EVENT_METHOD_REGEXP,
   View,
@@ -4991,6 +5101,7 @@ export {
   getStore,
   getUseStore,
   has,
+  installFrameVisualizerBridge,
   isArray,
   isPlainObject,
   isPrimitive,
@@ -5011,6 +5122,7 @@ export {
   parseUri,
   registerViewClass,
   safeguard,
+  serializeFrameTree,
   setData,
   shallowSet,
   mark2 as storeMark,