vue-lynx 0.3.0 → 0.4.0

package/README.md

@@ -18,6 +18,30 @@ Visit **[vue.lynxjs.org](https://vue.lynxjs.org)** for full documentation, inclu
 - [Gallery Tutorial](https://vue.lynxjs.org/tutorials/gallery.html)
 - [Swiper Tutorial](https://vue.lynxjs.org/tutorials/swiper.html)
 
+## IDE Setup
+
+Install the [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension for VS Code, or the equivalent for your editor (Zed has built-in Vue support via its Vue extension).
+
+Add the following to your `tsconfig.json` (or `jsconfig.json` for JS projects):
+
+```json
+{
+  "compilerOptions": {
+    "types": ["vue-lynx/types"]
+  },
+  "vueCompilerOptions": {
+    "plugins": ["vue-lynx/types/volar-plugin"]
+  }
+}
+```
+
+This enables:
+- Correct prop types and completions for all Lynx elements (`<view>`, `<text>`, `<image>`, etc.)
+- IDE errors when using unsupported event modifiers (`.capture`, `.passive`)
+- Type-checked `global-bind*`, `global-catch*`, and `main-thread-*` props
+
+Projects created with `create-vue-lynx` have this pre-configured.
+
 ## Examples
 
 See the [`examples/`](examples/) directory for complete working examples:

package/internal/dist/ops.d.ts

@@ -16,6 +16,7 @@
  *   SET_WORKLET_EVENT: [11, id, eventType, eventName, workletCtx]
  *   SET_MT_REF:        [12, id, refImpl]
  *   INIT_MT_REF:       [13, wvid, initValue]
+ *   SET_SCOPE_ID:      [14, id, cssId]   // Vue scoped CSS support
  */
 export declare const OP: {
     readonly CREATE: 0;
@@ -32,5 +33,6 @@ export declare const OP: {
     readonly SET_WORKLET_EVENT: 11;
     readonly SET_MT_REF: 12;
     readonly INIT_MT_REF: 13;
+    readonly SET_SCOPE_ID: 14;
 };
 export type OpCode = (typeof OP)[keyof typeof OP];

package/internal/dist/ops.js

@@ -19,6 +19,7 @@
  *   SET_WORKLET_EVENT: [11, id, eventType, eventName, workletCtx]
  *   SET_MT_REF:        [12, id, refImpl]
  *   INIT_MT_REF:       [13, wvid, initValue]
+ *   SET_SCOPE_ID:      [14, id, cssId]   // Vue scoped CSS support
  */
 export const OP = {
     CREATE: 0,
@@ -35,5 +36,6 @@ export const OP = {
     SET_WORKLET_EVENT: 11,
     SET_MT_REF: 12,
     INIT_MT_REF: 13,
+    SET_SCOPE_ID: 14,
 };
 //# sourceMappingURL=ops.js.map

package/internal/dist/ops.js.map

@@ -1 +1 @@
-{"version":3,"file":"ops.js","sourceRoot":"","sources":["../src/ops.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,yEAAyE;AACzE,0DAA0D;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,CAAC;IACd,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC;IACf,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,EAAE;IACV,iBAAiB,EAAE,EAAE;IACrB,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;CACP,CAAC"}
+{"version":3,"file":"ops.js","sourceRoot":"","sources":["../src/ops.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,yEAAyE;AACzE,0DAA0D;AAE1D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,CAAC;IACd,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC;IACf,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,EAAE;IACV,iBAAiB,EAAE,EAAE;IACrB,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,EAAE;CACR,CAAC"}

package/main-thread/dist/ops-apply.js

@@ -12,6 +12,8 @@ function createTypedElement(type, parentComponentUniqueId) {
             return __CreateImage(parentComponentUniqueId);
         case 'scroll-view':
             return __CreateScrollView(parentComponentUniqueId);
+        case 'div':
+            return __CreateView(parentComponentUniqueId);
         default:
             return __CreateElement(type, parentComponentUniqueId);
     }
@@ -165,6 +167,16 @@ function applyOps(ops) {
                     (0, __WEBPACK_EXTERNAL_MODULE__worklet_apply_js_d7370049__.applyInitMtRef)(wvid, initValue);
                     break;
                 }
+            case __WEBPACK_EXTERNAL_MODULE_vue_lynx_internal_ops_dc871e34__.OP.SET_SCOPE_ID:
+                {
+                    const id = ops[i++];
+                    const cssId = ops[i++];
+                    const el = __WEBPACK_EXTERNAL_MODULE__element_registry_js_05e5c264__.elements.get(id);
+                    if (el) __SetCSSId([
+                        el
+                    ], cssId);
+                    break;
+                }
             default:
                 break;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-lynx",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "description": "Vue 3 framework for building Lynx apps",
   "keywords": [
@@ -97,7 +97,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build) && (cd main-thread && npx rslib build) && (cd plugin && npx rslib build)",
-    "dev": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build --watch) & (cd main-thread && npx rslib build --watch) & (cd plugin && npx rslib build --watch)"
+    "build": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build) && (cd main-thread && npx rslib build) && (cd plugin && npx rslib build) && (cd types && npx rslib build)",
+    "dev": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build --watch) & (cd main-thread && npx rslib build --watch) & (cd plugin && npx rslib build --watch) & (cd types && npx rslib build --watch)"
   }
 }

package/plugin/dist/index.js

@@ -8,6 +8,25 @@ const LAYERS = {
     BACKGROUND: 'vue:background',
     MAIN_THREAD: 'vue:main-thread'
 };
+function stripVueScopeFromAST(node) {
+    if (node.children) {
+        let item = node.children.head;
+        while(item){
+            const next = item.next;
+            if ('AttributeSelector' === item.data.type && item.data.name?.name?.startsWith('data-v-')) node.children.remove(item);
+            else stripVueScopeFromAST(item.data);
+            item = next;
+        }
+    }
+    if (node.prelude) stripVueScopeFromAST(node.prelude);
+    if (node.block) stripVueScopeFromAST(node.block);
+}
+const vueScopeStripCSSPlugin = {
+    name: 'vue-scope-strip',
+    phaseStandard (ast) {
+        stripVueScopeFromAST(ast);
+    }
+};
 const _dirname = __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname((0, __WEBPACK_EXTERNAL_MODULE_node_url_e96de089__.fileURLToPath)(import.meta.url));
 function applyCSS(api, options) {
     const { enableCSSSelector, enableCSSInvalidation } = options;
@@ -48,10 +67,12 @@ function applyCSS(api, options) {
         chain.plugin(CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT).tap(([pluginOptions])=>[
                 {
                     ...pluginOptions,
-                    enableRemoveCSSScope: true,
+                    enableRemoveCSSScope: false,
                     enableCSSSelector,
                     enableCSSInvalidation,
-                    cssPlugins: []
+                    cssPlugins: [
+                        vueScopeStripCSSPlugin
+                    ]
                 }
             ]).init((_, args)=>new CssExtractPlugin(...args)).end().end();
         function removeLightningCSS(rule, ids) {
@@ -78,6 +99,37 @@ const normalizeCssLoaderOptions = (options, exportOnlyLocals)=>{
     }
     return options;
 };
+const PLUGIN_NAME = 'lynx:vue-scoped-cssid';
+function extractCssIdFromQuery(query) {
+    if (!query.includes('type=style') || !query.includes('scoped')) return null;
+    if (query.includes('cssId=')) return null;
+    const match = query.match(/[?&]id=([a-f0-9]+)/);
+    if (!match) return null;
+    return 0x7fffffff & Number.parseInt(match[1], 16);
+}
+class VueScopedCSSIdPlugin {
+    apply(compiler) {
+        compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation)=>{
+            const NormalModule = compiler.webpack?.NormalModule;
+            if (!NormalModule?.getCompilationHooks) return;
+            NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext)=>{
+                const query = loaderContext.resourceQuery ?? '';
+                const cssId = extractCssIdFromQuery(query);
+                if (null === cssId) return;
+                const newQuery = query + `&cssId=${cssId}`;
+                try {
+                    Object.defineProperty(loaderContext, 'resourceQuery', {
+                        value: newQuery,
+                        writable: true,
+                        configurable: true
+                    });
+                } catch  {
+                    loaderContext.resourceQuery = newQuery;
+                }
+            });
+        });
+    }
+}
 const PLUGIN_TEMPLATE = 'lynx:vue-template';
 const PLUGIN_RUNTIME_WRAPPER = 'lynx:vue-runtime-wrapper';
 const PLUGIN_ENCODE = 'lynx:vue-encode';
@@ -124,7 +176,7 @@ class VueCSSConfigPlugin {
             const hooks = __WEBPACK_EXTERNAL_MODULE__lynx_js_template_webpack_plugin_e98d2f08__.LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
             hooks.beforeEncode.tap(PLUGIN_CSS_CONFIG, (args)=>{
                 const encodeData = args['encodeData'];
-                Object.assign(encodeData.compilerOptions, this.compilerOptions);
+                Object.assign(encodeData.sourceContent.config, this.compilerOptions);
                 return args;
             });
         });
@@ -270,10 +322,12 @@ function applyEntry(api, opts = {}) {
                         enableCSSInvalidation: opts.enableCSSSelector ?? true,
                         enableCSSInheritance: opts.enableCSSInheritance ?? false,
                         customCSSInheritanceList: opts.customCSSInheritanceList,
-                        enableRemoveCSSScope: true,
+                        enableRemoveCSSScope: false,
                         enableNewGesture: false,
                         removeDescendantSelectorScope: true,
-                        cssPlugins: []
+                        cssPlugins: [
+                            vueScopeStripCSSPlugin
+                        ]
                     }
                 ]).end();
             }
@@ -281,6 +335,7 @@ function applyEntry(api, opts = {}) {
         if ((isLynx || isWeb) && mainThreadFilenames.length > 0) chain.plugin(PLUGIN_MARK_MAIN_THREAD).use(VueMarkMainThreadPlugin, [
             mainThreadFilenames
         ]).end();
+        if (isLynx || isWeb) chain.plugin('lynx:vue-scoped-cssid').use(VueScopedCSSIdPlugin, []).end();
         if (isLynx) {
             const cssConfigOptions = {};
             if (opts.enableCSSInlineVariables) cssConfigOptions['enableCSSInlineVariables'] = true;

package/runtime/dist/index.d.ts

@@ -287,6 +287,22 @@ export { onRenderTracked } from '@vue/runtime-core';
  * @public
  */
 export { onRenderTriggered } from '@vue/runtime-core';
+/**
+ * Registers a hook to be called when the component is inserted into the DOM
+ * as part of a tree cached by `<KeepAlive>`.
+ *
+ * @see {@link https://vuejs.org/api/composition-api-lifecycle.html#onactivated | Vue docs}
+ * @public
+ */
+export { onActivated } from '@vue/runtime-core';
+/**
+ * Registers a hook to be called when the component is removed from the DOM
+ * as part of a tree cached by `<KeepAlive>`.
+ *
+ * @see {@link https://vuejs.org/api/composition-api-lifecycle.html#ondeactivated | Vue docs}
+ * @public
+ */
+export { onDeactivated } from '@vue/runtime-core';
 /**
  * Watches one or more reactive data sources and invokes a callback when the sources change.
  *
@@ -504,6 +520,13 @@ export { Fragment } from '@vue/runtime-core';
  * @public
  */
 export { Suspense } from '@vue/runtime-core';
+/**
+ * Caches dynamically toggled components, preserving their state when inactive.
+ *
+ * @see {@link https://vuejs.org/api/built-in-components.html#keepalive | Vue docs}
+ * @public
+ */
+export { KeepAlive } from '@vue/runtime-core';
 /**
  * Vue's version string.
  *
@@ -517,6 +540,15 @@ export { version } from '@vue/runtime-core';
  * @public
  */
 export { mergeProps } from '@vue/runtime-core';
+/**
+ * Emitted by the template compiler for `v-once` subtrees. Disables block
+ * tracking during the initial render so the cached VNode is never added to a
+ * parent block's dynamic children array — ensuring the patcher skips it on
+ * every subsequent render and no ops reach the main thread.
+ *
+ * @public
+ */
+export { setBlockTracking } from '@vue/runtime-core';
 /** @hidden */ export { createBlock } from '@vue/runtime-core';
 /** @hidden */ export { createElementBlock } from '@vue/runtime-core';
 /** @hidden */ export { createVNode } from '@vue/runtime-core';
@@ -539,21 +571,41 @@ export { mergeProps } from '@vue/runtime-core';
 /** @hidden */ export { withCtx } from '@vue/runtime-core';
 /** @hidden */ export { renderSlot } from '@vue/runtime-core';
 /** @hidden */ export { createSlots } from '@vue/runtime-core';
-/** @hidden */ export { setBlockTracking } from '@vue/runtime-core';
 /** @hidden */ export { pushScopeId } from '@vue/runtime-core';
 /** @hidden */ export { popScopeId } from '@vue/runtime-core';
 /** @hidden */ export { withScopeId } from '@vue/runtime-core';
 /** @hidden */ export { toHandlerKey } from '@vue/runtime-core';
 /** @hidden */ export { toHandlers } from '@vue/runtime-core';
 /** @hidden */ export { withMemo } from '@vue/runtime-core';
+/** @hidden */ export { isMemoSame } from '@vue/runtime-core';
 /** @hidden */ export { guardReactiveProps } from '@vue/runtime-core';
 /** @hidden */ export { withAsyncContext } from '@vue/runtime-core';
 /** @hidden */ export { Text } from '@vue/runtime-core';
 /** @hidden */ export { Comment } from '@vue/runtime-core';
+export { Teleport } from '@vue/runtime-core';
 export declare const vModelText: ObjectDirective<ShadowElement>;
 export declare const vModelCheckbox: ObjectDirective;
 export declare const vModelSelect: ObjectDirective;
 export declare const vModelRadio: ObjectDirective;
+/**
+ * Wraps an event handler with Lynx event modifiers.
+ *
+ * Supported modifiers:
+ * - `.once`    — handler is invoked at most once; subsequent events are ignored
+ * - `.stop`    — registers the event as `catchEvent` (native Lynx stop-propagation)
+ *               and also calls `event.stopPropagation()` for DOM environments
+ * - `.prevent` — accepted for code portability; no-op on Lynx (no browser default actions exist)
+ * - `.self`    — skips the handler unless the event target is the listener element
+ *
+ * The wrapped function is cached on `fn._withMods` keyed by the modifier
+ * string so that stable function references survive re-renders.
+ *
+ * `.stop` sets `_lynxCatch = true` on the wrapper so that `patchProp` can
+ * register the event as `catchEvent` — the native Lynx mechanism for stopping
+ * event bubbling. Calling `stopPropagation()` at the JS level alone is not
+ * sufficient because native Lynx bubbling is decided before JS handlers run.
+ */
+export declare function withModifiers(fn: (...args: unknown[]) => unknown, modifiers: string[]): (...args: unknown[]) => unknown;
 export { Transition, TransitionGroup };
 /** @hidden */
 export { nodeOps };

package/runtime/dist/index.js

@@ -70,18 +70,6 @@ function createStaticVNode(_content, _numberOfNodes) {
     throw new Error("[vue-lynx] createStaticVNode is not supported \u2014 the Lynx renderer does not implement insertStaticContent.");
 }
 const Static = Symbol.for('v-stc');
-function KeepAlive() {
-    if (__DEV__) console.warn("[vue-lynx] KeepAlive is not supported \u2014 Lynx renderer has no element recycling.");
-}
-function onActivated(_fn) {
-    if (__DEV__) console.warn("[vue-lynx] onActivated is not supported \u2014 KeepAlive is not available.");
-}
-function onDeactivated(_fn) {
-    if (__DEV__) console.warn("[vue-lynx] onDeactivated is not supported \u2014 KeepAlive is not available.");
-}
-function Teleport() {
-    if (__DEV__) console.warn("[vue-lynx] Teleport is not supported \u2014 Lynx renderer has no querySelector.");
-}
 function looseToNumber(val) {
     const n = Number.parseFloat(val);
     return isNaN(n) ? val : n;
@@ -160,8 +148,41 @@ const vModelUnsupported = {
 const vModelCheckbox = vModelUnsupported;
 const vModelSelect = vModelUnsupported;
 const vModelRadio = vModelUnsupported;
-function withModifiers(fn, _modifiers) {
-    return fn;
+const lynxModifierSideEffects = {
+    stop: (e)=>e.stopPropagation?.()
+};
+const lynxModifierGuards = {
+    self: (e)=>{
+        const t = e.target;
+        const ct = e.currentTarget;
+        if (null != t && 'number' == typeof t.uid && null != ct && 'number' == typeof ct.uid) return t.uid !== ct.uid;
+        if (null != t && 'number' == typeof t.uniqueId && null != ct && 'number' == typeof ct.uniqueId) return t.uniqueId !== ct.uniqueId;
+        return e.target !== e.currentTarget;
+    }
+};
+function withModifiers(fn, modifiers) {
+    if (!fn) return fn;
+    const fnAny = fn;
+    const cache = fnAny._withMods ?? (fnAny._withMods = {});
+    const cacheKey = modifiers.join('.');
+    if (cache[cacheKey]) return cache[cacheKey];
+    const hasOnce = modifiers.includes('once');
+    let called = false;
+    const wrapped = (event, ...args)=>{
+        if (hasOnce && called) return;
+        const e = event;
+        for (const mod of modifiers){
+            if ('once' === mod) continue;
+            const guard = lynxModifierGuards[mod];
+            if (guard?.(e)) return;
+            lynxModifierSideEffects[mod]?.(e);
+        }
+        if (hasOnce) called = true;
+        return fn(event, ...args);
+    };
+    if (modifiers.includes('stop')) wrapped._lynxCatch = true;
+    cache[cacheKey] = wrapped;
+    return wrapped;
 }
 function withKeys(fn, _keys) {
     return fn;
@@ -178,9 +199,11 @@ function resetForTesting() {
 }
 var __webpack_exports__Comment = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.Comment;
 var __webpack_exports__Fragment = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.Fragment;
+var __webpack_exports__KeepAlive = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.KeepAlive;
 var __webpack_exports__MainThreadRef = __WEBPACK_EXTERNAL_MODULE__main_thread_ref_js_622e3a2a__.MainThreadRef;
 var __webpack_exports__ShadowElement = __WEBPACK_EXTERNAL_MODULE__shadow_element_js_9ed96a55__.ShadowElement;
 var __webpack_exports__Suspense = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.Suspense;
+var __webpack_exports__Teleport = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.Teleport;
 var __webpack_exports__Text = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.Text;
 var __webpack_exports__Transition = __WEBPACK_EXTERNAL_MODULE__Transition_js_7757bed1__.Transition;
 var __webpack_exports__TransitionGroup = __WEBPACK_EXTERNAL_MODULE__TransitionGroup_js_57fa4188__.TransitionGroup;
@@ -212,6 +235,7 @@ var __webpack_exports__guardReactiveProps = __WEBPACK_EXTERNAL_MODULE__vue_runti
 var __webpack_exports__h = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.h;
 var __webpack_exports__hasInjectionContext = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.hasInjectionContext;
 var __webpack_exports__inject = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.inject;
+var __webpack_exports__isMemoSame = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.isMemoSame;
 var __webpack_exports__isProxy = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.isProxy;
 var __webpack_exports__isReactive = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.isReactive;
 var __webpack_exports__isReadonly = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.isReadonly;
@@ -224,9 +248,11 @@ var __webpack_exports__nodeOps = __WEBPACK_EXTERNAL_MODULE__node_ops_js_cd9e4a71
 var __webpack_exports__normalizeClass = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.normalizeClass;
 var __webpack_exports__normalizeProps = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.normalizeProps;
 var __webpack_exports__normalizeStyle = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.normalizeStyle;
+var __webpack_exports__onActivated = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onActivated;
 var __webpack_exports__onBeforeMount = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onBeforeMount;
 var __webpack_exports__onBeforeUnmount = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onBeforeUnmount;
 var __webpack_exports__onBeforeUpdate = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onBeforeUpdate;
+var __webpack_exports__onDeactivated = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onDeactivated;
 var __webpack_exports__onErrorCaptured = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onErrorCaptured;
 var __webpack_exports__onMounted = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onMounted;
 var __webpack_exports__onRenderTracked = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onRenderTracked;
@@ -282,4 +308,4 @@ var __webpack_exports__withDefaults = __WEBPACK_EXTERNAL_MODULE__vue_runtime_cor
 var __webpack_exports__withDirectives = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.withDirectives;
 var __webpack_exports__withMemo = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.withMemo;
 var __webpack_exports__withScopeId = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.withScopeId;
-export { KeepAlive, Static, Teleport, _render, createApp, createStaticVNode, nextTick, onActivated, onDeactivated, onServerPrefetch, resetForTesting, useSSRContext, vModelCheckbox, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers, __webpack_exports__Comment as Comment, __webpack_exports__Fragment as Fragment, __webpack_exports__MainThreadRef as MainThreadRef, __webpack_exports__ShadowElement as ShadowElement, __webpack_exports__Suspense as Suspense, __webpack_exports__Text as Text, __webpack_exports__Transition as Transition, __webpack_exports__TransitionGroup as TransitionGroup, __webpack_exports__camelize as camelize, __webpack_exports__capitalize as capitalize, __webpack_exports__cloneVNode as cloneVNode, __webpack_exports__computed as computed, __webpack_exports__createBlock as createBlock, __webpack_exports__createCommentVNode as createCommentVNode, __webpack_exports__createElementBlock as createElementBlock, __webpack_exports__createElementVNode as createElementVNode, __webpack_exports__createPageRoot as createPageRoot, __webpack_exports__createSlots as createSlots, __webpack_exports__createTextVNode as createTextVNode, __webpack_exports__createVNode as createVNode, __webpack_exports__customRef as customRef, __webpack_exports__defineAsyncComponent as defineAsyncComponent, __webpack_exports__defineComponent as defineComponent, __webpack_exports__defineEmits as defineEmits, __webpack_exports__defineExpose as defineExpose, __webpack_exports__defineModel as defineModel, __webpack_exports__defineOptions as defineOptions, __webpack_exports__defineProps as defineProps, __webpack_exports__defineSlots as defineSlots, __webpack_exports__effectScope as effectScope, __webpack_exports__getCurrentInstance as getCurrentInstance, __webpack_exports__getCurrentScope as getCurrentScope, __webpack_exports__guardReactiveProps as guardReactiveProps, __webpack_exports__h as h, __webpack_exports__hasInjectionContext as hasInjectionContext, __webpack_exports__inject as inject, __webpack_exports__isProxy as isProxy, __webpack_exports__isReactive as isReactive, __webpack_exports__isReadonly as isReadonly, __webpack_exports__isRef as isRef, __webpack_exports__isShallow as isShallow, __webpack_exports__isVNode as isVNode, __webpack_exports__markRaw as markRaw, __webpack_exports__mergeProps as mergeProps, __webpack_exports__nodeOps as nodeOps, __webpack_exports__normalizeClass as normalizeClass, __webpack_exports__normalizeProps as normalizeProps, __webpack_exports__normalizeStyle as normalizeStyle, __webpack_exports__onBeforeMount as onBeforeMount, __webpack_exports__onBeforeUnmount as onBeforeUnmount, __webpack_exports__onBeforeUpdate as onBeforeUpdate, __webpack_exports__onErrorCaptured as onErrorCaptured, __webpack_exports__onMounted as onMounted, __webpack_exports__onRenderTracked as onRenderTracked, __webpack_exports__onRenderTriggered as onRenderTriggered, __webpack_exports__onScopeDispose as onScopeDispose, __webpack_exports__onUnmounted as onUnmounted, __webpack_exports__onUpdated as onUpdated, __webpack_exports__onWatcherCleanup as onWatcherCleanup, __webpack_exports__openBlock as openBlock, __webpack_exports__popScopeId as popScopeId, __webpack_exports__provide as provide, __webpack_exports__pushScopeId as pushScopeId, __webpack_exports__reactive as reactive, __webpack_exports__readonly as readonly, __webpack_exports__ref as ref, __webpack_exports__renderList as renderList, __webpack_exports__renderSlot as renderSlot, __webpack_exports__resolveComponent as resolveComponent, __webpack_exports__resolveDirective as resolveDirective, __webpack_exports__resolveDynamicComponent as resolveDynamicComponent, __webpack_exports__runOnBackground as runOnBackground, __webpack_exports__runOnMainThread as runOnMainThread, __webpack_exports__setBlockTracking as setBlockTracking, __webpack_exports__shallowReactive as shallowReactive, __webpack_exports__shallowReadonly as shallowReadonly, __webpack_exports__shallowRef as shallowRef, __webpack_exports__takeOps as takeOps, __webpack_exports__toDisplayString as toDisplayString, __webpack_exports__toHandlerKey as toHandlerKey, __webpack_exports__toHandlers as toHandlers, __webpack_exports__toRaw as toRaw, __webpack_exports__toRef as toRef, __webpack_exports__toRefs as toRefs, __webpack_exports__toValue as toValue, __webpack_exports__transformToWorklet as transformToWorklet, __webpack_exports__triggerRef as triggerRef, __webpack_exports__unref as unref, __webpack_exports__useAttrs as useAttrs, __webpack_exports__useCssVars as useCssVars, __webpack_exports__useId as useId, __webpack_exports__useMainThreadRef as useMainThreadRef, __webpack_exports__useModel as useModel, __webpack_exports__useSlots as useSlots, __webpack_exports__useTemplateRef as useTemplateRef, __webpack_exports__version as version, __webpack_exports__watch as watch, __webpack_exports__watchEffect as watchEffect, __webpack_exports__watchPostEffect as watchPostEffect, __webpack_exports__watchSyncEffect as watchSyncEffect, __webpack_exports__withAsyncContext as withAsyncContext, __webpack_exports__withCtx as withCtx, __webpack_exports__withDefaults as withDefaults, __webpack_exports__withDirectives as withDirectives, __webpack_exports__withMemo as withMemo, __webpack_exports__withScopeId as withScopeId };
+export { Static, _render, createApp, createStaticVNode, nextTick, onServerPrefetch, resetForTesting, useSSRContext, vModelCheckbox, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers, __webpack_exports__Comment as Comment, __webpack_exports__Fragment as Fragment, __webpack_exports__KeepAlive as KeepAlive, __webpack_exports__MainThreadRef as MainThreadRef, __webpack_exports__ShadowElement as ShadowElement, __webpack_exports__Suspense as Suspense, __webpack_exports__Teleport as Teleport, __webpack_exports__Text as Text, __webpack_exports__Transition as Transition, __webpack_exports__TransitionGroup as TransitionGroup, __webpack_exports__camelize as camelize, __webpack_exports__capitalize as capitalize, __webpack_exports__cloneVNode as cloneVNode, __webpack_exports__computed as computed, __webpack_exports__createBlock as createBlock, __webpack_exports__createCommentVNode as createCommentVNode, __webpack_exports__createElementBlock as createElementBlock, __webpack_exports__createElementVNode as createElementVNode, __webpack_exports__createPageRoot as createPageRoot, __webpack_exports__createSlots as createSlots, __webpack_exports__createTextVNode as createTextVNode, __webpack_exports__createVNode as createVNode, __webpack_exports__customRef as customRef, __webpack_exports__defineAsyncComponent as defineAsyncComponent, __webpack_exports__defineComponent as defineComponent, __webpack_exports__defineEmits as defineEmits, __webpack_exports__defineExpose as defineExpose, __webpack_exports__defineModel as defineModel, __webpack_exports__defineOptions as defineOptions, __webpack_exports__defineProps as defineProps, __webpack_exports__defineSlots as defineSlots, __webpack_exports__effectScope as effectScope, __webpack_exports__getCurrentInstance as getCurrentInstance, __webpack_exports__getCurrentScope as getCurrentScope, __webpack_exports__guardReactiveProps as guardReactiveProps, __webpack_exports__h as h, __webpack_exports__hasInjectionContext as hasInjectionContext, __webpack_exports__inject as inject, __webpack_exports__isMemoSame as isMemoSame, __webpack_exports__isProxy as isProxy, __webpack_exports__isReactive as isReactive, __webpack_exports__isReadonly as isReadonly, __webpack_exports__isRef as isRef, __webpack_exports__isShallow as isShallow, __webpack_exports__isVNode as isVNode, __webpack_exports__markRaw as markRaw, __webpack_exports__mergeProps as mergeProps, __webpack_exports__nodeOps as nodeOps, __webpack_exports__normalizeClass as normalizeClass, __webpack_exports__normalizeProps as normalizeProps, __webpack_exports__normalizeStyle as normalizeStyle, __webpack_exports__onActivated as onActivated, __webpack_exports__onBeforeMount as onBeforeMount, __webpack_exports__onBeforeUnmount as onBeforeUnmount, __webpack_exports__onBeforeUpdate as onBeforeUpdate, __webpack_exports__onDeactivated as onDeactivated, __webpack_exports__onErrorCaptured as onErrorCaptured, __webpack_exports__onMounted as onMounted, __webpack_exports__onRenderTracked as onRenderTracked, __webpack_exports__onRenderTriggered as onRenderTriggered, __webpack_exports__onScopeDispose as onScopeDispose, __webpack_exports__onUnmounted as onUnmounted, __webpack_exports__onUpdated as onUpdated, __webpack_exports__onWatcherCleanup as onWatcherCleanup, __webpack_exports__openBlock as openBlock, __webpack_exports__popScopeId as popScopeId, __webpack_exports__provide as provide, __webpack_exports__pushScopeId as pushScopeId, __webpack_exports__reactive as reactive, __webpack_exports__readonly as readonly, __webpack_exports__ref as ref, __webpack_exports__renderList as renderList, __webpack_exports__renderSlot as renderSlot, __webpack_exports__resolveComponent as resolveComponent, __webpack_exports__resolveDirective as resolveDirective, __webpack_exports__resolveDynamicComponent as resolveDynamicComponent, __webpack_exports__runOnBackground as runOnBackground, __webpack_exports__runOnMainThread as runOnMainThread, __webpack_exports__setBlockTracking as setBlockTracking, __webpack_exports__shallowReactive as shallowReactive, __webpack_exports__shallowReadonly as shallowReadonly, __webpack_exports__shallowRef as shallowRef, __webpack_exports__takeOps as takeOps, __webpack_exports__toDisplayString as toDisplayString, __webpack_exports__toHandlerKey as toHandlerKey, __webpack_exports__toHandlers as toHandlers, __webpack_exports__toRaw as toRaw, __webpack_exports__toRef as toRef, __webpack_exports__toRefs as toRefs, __webpack_exports__toValue as toValue, __webpack_exports__transformToWorklet as transformToWorklet, __webpack_exports__triggerRef as triggerRef, __webpack_exports__unref as unref, __webpack_exports__useAttrs as useAttrs, __webpack_exports__useCssVars as useCssVars, __webpack_exports__useId as useId, __webpack_exports__useMainThreadRef as useMainThreadRef, __webpack_exports__useModel as useModel, __webpack_exports__useSlots as useSlots, __webpack_exports__useTemplateRef as useTemplateRef, __webpack_exports__version as version, __webpack_exports__watch as watch, __webpack_exports__watchEffect as watchEffect, __webpack_exports__watchPostEffect as watchPostEffect, __webpack_exports__watchSyncEffect as watchSyncEffect, __webpack_exports__withAsyncContext as withAsyncContext, __webpack_exports__withCtx as withCtx, __webpack_exports__withDefaults as withDefaults, __webpack_exports__withDirectives as withDirectives, __webpack_exports__withMemo as withMemo, __webpack_exports__withScopeId as withScopeId };

package/runtime/dist/node-ops.js

@@ -2,6 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__event_registry_js_10968c87__ from "./even
 import * as __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__ from "./flush.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__ from "./ops.js";
 import * as __WEBPACK_EXTERNAL_MODULE__run_on_background_js_729d321a__ from "./run-on-background.js";
+import * as __WEBPACK_EXTERNAL_MODULE__scope_bridge_js_bd9512e9__ from "./scope-bridge.js";
 import * as __WEBPACK_EXTERNAL_MODULE__shadow_element_js_9ed96a55__ from "./shadow-element.js";
 const DIMENSIONLESS = new Set([
     'flex',
@@ -34,30 +35,50 @@ function normalizeStyle(style) {
 function parseEventProp(key) {
     if (key.startsWith('global-bind')) return {
         type: 'bindGlobalEvent',
-        name: key.slice(11)
+        name: key.slice(11),
+        once: false
     };
     if (key.startsWith('global-catch')) return {
         type: 'catchGlobalEvent',
-        name: key.slice(12)
+        name: key.slice(12),
+        once: false
     };
     if (key.startsWith('catch')) return {
         type: 'catchEvent',
-        name: key.slice(5)
+        name: key.slice(5),
+        once: false
     };
     if (/^bind(?!ingx)/.test(key)) return {
         type: 'bindEvent',
-        name: key.slice(4)
+        name: key.slice(4),
+        once: false
     };
     if (/^on[A-Z]/.test(key)) {
-        const name = key.slice(2, 3).toLowerCase() + key.slice(3);
+        let name = key.slice(2, 3).toLowerCase() + key.slice(3);
+        let once = false;
+        if (name.endsWith('Once')) {
+            name = name.slice(0, -4);
+            once = true;
+        }
         return {
             type: 'bindEvent',
-            name
+            name,
+            once
         };
     }
     return null;
 }
 const elementEventSigns = new Map();
+const onceWrappers = new Map();
+const idRegistry = new Map();
+function cleanupIds(el) {
+    if (el._id) idRegistry.delete(el._id);
+    let child = el.firstChild;
+    while(child){
+        cleanupIds(child);
+        child = child.next;
+    }
+}
 function resolveClass(el) {
     if (0 === el._transitionClasses.size) return el._baseClass;
     const parts = [];
@@ -93,12 +114,14 @@ const nodeOps = {
         while(el.firstChild){
             const child = el.firstChild;
             el.removeChild(child);
+            cleanupIds(child);
             (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.REMOVE, el.id, child.id);
         }
         (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_TEXT, el.id, text);
         (0, __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__.scheduleFlush)();
     },
     insert (child, parent, anchor) {
+        if (child.parent && child.parent !== parent) (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.REMOVE, child.parent.id, child.id);
         parent.insertBefore(child, anchor ?? null);
         if ('list' === parent.type && ('#comment' === child.type || '#text' === child.type)) return;
         let resolvedAnchor = anchor ?? null;
@@ -108,9 +131,10 @@ const nodeOps = {
         (0, __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__.scheduleFlush)();
     },
     remove (child) {
-        if (child.parent) {
+        if (child?.parent) {
             const parentId = child.parent.id;
             child.parent.removeChild(child);
+            cleanupIds(child);
             (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.REMOVE, parentId, child.id);
             (0, __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__.scheduleFlush)();
         }
@@ -136,17 +160,42 @@ const nodeOps = {
             const oldSign = signs?.get(key);
             if (null != nextValue) {
                 const handler = nextValue;
-                if (oldSign) (0, __WEBPACK_EXTERNAL_MODULE__event_registry_js_10968c87__.updateHandler)(oldSign, handler);
+                if (event.once) if (oldSign) {
+                    const wrapper = onceWrappers.get(oldSign);
+                    if (wrapper) wrapper.inner = handler;
+                } else {
+                    const wrapper = {
+                        called: false,
+                        inner: handler
+                    };
+                    const onceHandler = (data)=>{
+                        if (wrapper.called) return;
+                        wrapper.called = true;
+                        wrapper.inner(data);
+                    };
+                    const sign = (0, __WEBPACK_EXTERNAL_MODULE__event_registry_js_10968c87__.register)(onceHandler);
+                    onceWrappers.set(sign, wrapper);
+                    if (!signs) {
+                        signs = new Map();
+                        elementEventSigns.set(el.id, signs);
+                    }
+                    signs.set(key, sign);
+                    const onceEventType = handler._lynxCatch ? 'catchEvent' : event.type;
+                    (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_EVENT, el.id, onceEventType, event.name, sign);
+                }
+                else if (oldSign) (0, __WEBPACK_EXTERNAL_MODULE__event_registry_js_10968c87__.updateHandler)(oldSign, handler);
                 else {
+                    const eventType = handler._lynxCatch ? 'catchEvent' : event.type;
                     const sign = (0, __WEBPACK_EXTERNAL_MODULE__event_registry_js_10968c87__.register)(handler);
                     if (!signs) {
                         signs = new Map();
                         elementEventSigns.set(el.id, signs);
                     }
                     signs.set(key, sign);
-                    (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_EVENT, el.id, event.type, event.name, sign);
+                    (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_EVENT, el.id, eventType, event.name, sign);
                 }
             } else if (oldSign) {
+                onceWrappers.delete(oldSign);
                 (0, __WEBPACK_EXTERNAL_MODULE__event_registry_js_10968c87__.unregister)(oldSign);
                 signs.delete(key);
                 (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.REMOVE_EVENT, el.id, event.type, event.name);
@@ -163,8 +212,17 @@ const nodeOps = {
             el._baseClass = nextValue ?? '';
             const finalClass = resolveClass(el);
             (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_CLASS, el.id, finalClass);
-        } else if ('id' === key) (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_ID, el.id, nextValue);
-        else (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_PROP, el.id, key, nextValue);
+        } else if ('id' === key) {
+            if (el._id) idRegistry.delete(el._id);
+            el._id = null != nextValue ? String(nextValue) : void 0;
+            if (__DEV__ && el._id && idRegistry.has(el._id) && idRegistry.get(el._id) !== el) console.warn(`[vue-lynx] Duplicate id "${el._id}" detected. Teleport target resolution may be unreliable.`);
+            if (el._id) idRegistry.set(el._id, el);
+            (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_ID, el.id, nextValue);
+        } else (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_PROP, el.id, key, nextValue);
+        (0, __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__.scheduleFlush)();
+    },
+    setScopeId (el, id) {
+        (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_SCOPE_ID, el.id, (0, __WEBPACK_EXTERNAL_MODULE__scope_bridge_js_bd9512e9__.scopeIdToCssId)(id));
         (0, __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__.scheduleFlush)();
     },
     parentNode (node) {
@@ -172,9 +230,16 @@ const nodeOps = {
     },
     nextSibling (node) {
         return node.next;
+    },
+    querySelector (selector) {
+        if (selector.startsWith('#')) return idRegistry.get(selector.slice(1)) ?? null;
+        if (__DEV__) console.warn(`[vue-lynx] querySelector only supports #id selectors, got "${selector}".`);
+        return null;
     }
 };
 function resetNodeOpsState() {
     elementEventSigns.clear();
+    onceWrappers.clear();
+    idRegistry.clear();
 }
 export { nodeOps, resetNodeOpsState, resolveClass };

package/runtime/dist/scope-bridge.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert a Vue scope ID (data-v-xxxxx) to a Lynx cssId (numeric).
+ * Vue uses 8-char hex hash strings.  Lynx engine uses int32 for cssId,
+ * so we mask to 0x7fffffff to stay within the positive int32 range.
+ */
+export declare function scopeIdToCssId(scopeId: string): number;

package/runtime/dist/scope-bridge.js

@@ -0,0 +1,5 @@
+function scopeIdToCssId(scopeId) {
+    const hex = scopeId.replace(/^data-v-/, '');
+    return 0x7fffffff & Number.parseInt(hex, 16);
+}
+export { scopeIdToCssId };

package/runtime/dist/shadow-element.d.ts

@@ -23,6 +23,7 @@ export declare class ShadowElement {
     _vModelValue: string | undefined;
     _vModelHandler: ((data: unknown) => void) | undefined;
     _vModelEventProp: string | undefined;
+    _id: string | undefined;
     constructor(type: string, forceId?: number);
     /** CSS attribute selector that uniquely identifies this element on MT. */
     get _selector(): string;

package/runtime/dist/shadow-element.js

@@ -14,6 +14,7 @@ class ShadowElement {
     _vModelValue = void 0;
     _vModelHandler = void 0;
     _vModelEventProp = void 0;
+    _id = void 0;
     constructor(type, forceId){
         if (void 0 === forceId) this.id = ShadowElement.nextId++;
         else this.id = forceId;

package/types/dist/elements/index.d.ts

@@ -0,0 +1,62 @@
+import type { DefineComponent } from 'vue';
+import type { IntrinsicElements } from '@lynx-js/types';
+type ExtractBindAsOn<T> = {
+    [P in keyof T as P extends `bind${infer Rest}` ? `on${Capitalize<Rest>}` : never]: T[P];
+};
+type NonBindProps<T> = Omit<T, `bind${string}` | 'className' | `main-thread:${string}` | `global-bind:${string}` | `global-catch:${string}`>;
+/**
+ * Vue-compatible class binding type.
+ * @see https://vuejs.org/guide/essentials/class-and-style
+ */
+type VueClassBinding = string | Record<string, unknown> | (VueClassBinding | false | null | undefined)[];
+type MainThreadRefLike = {
+    readonly _wvid: number;
+    toJSON(): unknown;
+};
+type LynxEventHandler = ((...args: never[]) => unknown) | undefined;
+type StringKeyOf<T> = Extract<keyof T, string>;
+type Camelize<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Head}${Capitalize<Camelize<Tail>>}` : S;
+type BindEventSuffix<T> = Extract<StringKeyOf<T>, `bind${string}`> extends `bind${infer S}` ? S : never;
+type CatchEventSuffix<T> = Extract<StringKeyOf<T>, `catch${string}`> extends `catch${infer S}` ? S : never;
+type PropValue<T, K extends string> = K extends keyof T ? T[K] : LynxEventHandler;
+type LynxGlobalEventSourceProps<T> = {
+    [K in BindEventSuffix<T> as `global-bind${K}`]?: PropValue<T, `bind${K}`>;
+} & {
+    [K in CatchEventSuffix<T> as `global-catch${K}`]?: PropValue<T, `catch${K}`>;
+};
+type LynxGlobalEventCamelProps<T> = {
+    [K in keyof LynxGlobalEventSourceProps<T> & string as Camelize<K>]?: LynxGlobalEventSourceProps<T>[K];
+};
+type LynxMainThreadEventKey<T> = Extract<StringKeyOf<T>, `bind${string}` | `catch${string}` | `global-bind${string}`> | keyof LynxGlobalEventSourceProps<T> & string;
+type LynxMainThreadEventProps<T> = {
+    [K in LynxMainThreadEventKey<T> as `main-thread-${K}`]?: unknown;
+} & {
+    [K in LynxMainThreadEventKey<T> as Camelize<`main-thread-${K}`>]?: unknown;
+};
+type LynxSpecialProps<T> = {
+    'main-thread-ref'?: MainThreadRefLike | null;
+    mainThreadRef?: MainThreadRefLike | null;
+} & LynxGlobalEventSourceProps<T> & LynxGlobalEventCamelProps<T> & LynxMainThreadEventProps<T>;
+/**
+ * Maps Lynx intrinsic element props to Vue-friendly props:
+ *
+ * - Converts `bindXxx` props to Vue-style `onXxx` event handlers.
+ * - Removes the React-style `className` alias (Lynx carries both; Vue only
+ *   needs `class`).
+ * - Widens `class` from `string` to the full {@link VueClassBinding} union so
+ *   that array-syntax and object-syntax `:class` bindings pass TypeScript
+ *   without errors.
+ * - Adds Vue Lynx special props for global events and main-thread worklets.
+ */
+export type VueLynxProps<T> = ExtractBindAsOn<T> & Omit<NonBindProps<T>, 'class'> & {
+    class?: VueClassBinding;
+} & LynxSpecialProps<T>;
+type VueLynxComponent<T> = DefineComponent<VueLynxProps<T>>;
+export type VueLynxElements = {
+    [K in keyof IntrinsicElements]: VueLynxComponent<IntrinsicElements[K]>;
+};
+declare module "vue" {
+    interface GlobalComponents extends VueLynxElements {
+    }
+}
+export {};

package/types/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

package/types/dist/volar-plugin.cjs

@@ -0,0 +1,72 @@
+const metaTags = [
+    'block',
+    'template',
+    'slot'
+];
+const lynxTags = [
+    'component',
+    'filter-image',
+    'image',
+    'inline-image',
+    'inline-text',
+    'inline-truncation',
+    'list',
+    'list-item',
+    'list-row',
+    'page',
+    'scroll-view',
+    'text',
+    'view',
+    'raw-text',
+    'input',
+    'textarea',
+    'frame',
+    'overlay',
+    'svg'
+];
+const nativeTags = metaTags;
+const ELEMENT_NODE = 1;
+const DIRECTIVE_NODE = 7;
+const UNSUPPORTED_MODIFIERS = [
+    'capture',
+    'passive'
+];
+function lynxModifierTransform(node, context) {
+    if (node.type !== ELEMENT_NODE) return;
+    for (const prop of node.props)if (prop.type === DIRECTIVE_NODE && 'on' === prop.name) for (const modifier of prop.modifiers){
+        const name = 'string' == typeof modifier ? modifier : modifier.content;
+        if (!UNSUPPORTED_MODIFIERS.includes(name)) continue;
+        const loc = 'object' == typeof modifier && modifier.loc ? modifier.loc : prop.loc;
+        const err = new SyntaxError(`Lynx does not support the .${name} event modifier.`);
+        err.code = 1001;
+        err.loc = loc;
+        context.onError(err);
+    }
+}
+const plugins = [
+    ({ vueCompilerOptions })=>{
+        vueCompilerOptions.nativeTags = nativeTags;
+        return {
+            version: 1
+        };
+    },
+    ({ vueCompilerOptions })=>{
+        vueCompilerOptions.nativeTags = nativeTags;
+        return {
+            version: 2
+        };
+    },
+    ()=>({
+            version: 2,
+            resolveTemplateCompilerOptions (options) {
+                options.isNativeTag = (tag)=>nativeTags.includes(tag);
+                options.nodeTransforms = [
+                    ...options.nodeTransforms ?? [],
+                    lynxModifierTransform
+                ];
+                return options;
+            }
+        })
+];
+plugins.lynxTags = lynxTags;
+module.exports = plugins;