@zeus-js/output-vue-wrapper 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/output-vue-wrapper.cjs.js

@@ -1,5 +1,5 @@
 /**
-* output-vue-wrapper v0.1.0-beta.4
+* output-vue-wrapper v0.1.0-beta.6
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,6 +9,7 @@ Object.defineProperties(exports, {
 });
 let _zeus_js_bundler_plugin = require("@zeus-js/bundler-plugin");
 let _zeus_js_component_dts = require("@zeus-js/component-dts");
+let vue = require("vue");
 //#region packages/web-c/output-vue-wrapper/src/generateVueIndex.ts
 function generateVueIndex(components, options) {
 	const lines = [];
@@ -23,7 +24,7 @@ function generateVueIndex(components, options) {
 //#region packages/web-c/output-vue-wrapper/src/generateVueWrapper.ts
 function generateVueWrapper(input) {
 	var _input$component$mode;
-	return input.mode === "event-bridge" || ((_input$component$mode = input.component.models) === null || _input$component$mode === void 0 ? void 0 : _input$component$mode.length) ? generateEventBridgeVueWrapper(input) : generateMinimalVueWrapper(input);
+	return input.mode === "runtime" ? generateRuntimeVueWrapper(input) : input.mode === "event-bridge" || ((_input$component$mode = input.component.models) === null || _input$component$mode === void 0 ? void 0 : _input$component$mode.length) ? generateEventBridgeVueWrapper(input) : generateMinimalVueWrapper(input);
 }
 function generateMinimalVueWrapper(input) {
 	const { component, wcModuleId } = input;
@@ -55,7 +56,7 @@ function generateEventBridgeVueWrapper(input) {
 	if (!propNames.length && !eventNames.length) return generateMinimalVueWrapper(input);
 	const hasProps = propNames.length > 0;
 	const hasEvents = eventNames.length > 0;
-	const emitNames = Array.from(new Set([...eventNames, ...models.map((model) => model.updateEvent)]));
+	const emitNames = Array.from(/* @__PURE__ */ new Set([...eventNames, ...models.map((model) => model.updateEvent)]));
 	const hasNamedSlots = slotNames.length > 0;
 	return `
 import {
@@ -108,7 +109,7 @@ function getCapabilities(component) {
 	}));
 	return {
 		propNames: Object.keys(component.props),
-		eventNames: Array.from(new Set([...Object.entries(component.events).map(([key, event]) => {
+		eventNames: Array.from(/* @__PURE__ */ new Set([...Object.entries(component.events).map(([key, event]) => {
 			var _event$name, _event$key;
 			return (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key);
 		}), ...models.map((model) => model.event)])),
@@ -224,6 +225,42 @@ function generateVueProps(component) {
 		return `${JSON.stringify(name)}: ${toVuePropOption(prop)}`;
 	}).join(",\n    ");
 }
+function generateRuntimeVueWrapper(input) {
+	var _component$models2;
+	const { component } = input;
+	const propNames = Object.keys(component.props);
+	const eventNames = getEventNames(component);
+	const slotNames = Object.keys(component.slots).filter((name) => name !== "default");
+	const model = (_component$models2 = component.models) === null || _component$models2 === void 0 ? void 0 : _component$models2[0];
+	return [
+		`import { defineContainer } from '@zeus-js/output-vue-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = defineContainer({`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  props: ${JSON.stringify(propNames)},`,
+		`  events: ${JSON.stringify(eventNames)},`,
+		`  slots: ${JSON.stringify(slotNames)},`,
+		`  model: ${model ? formatModel(model) : "undefined"},`,
+		`})`,
+		``
+	].join("\n");
+}
+function getEventNames(component) {
+	return Array.from(new Set(Object.entries(component.events).map(([key, event]) => {
+		var _event$name2, _event$key2;
+		return (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase((_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key);
+	})));
+}
+function formatModel(model) {
+	return `{
+    prop: ${JSON.stringify(model.prop)},
+    event: ${JSON.stringify(model.event)},
+    eventPath: ${JSON.stringify(model.eventPath)},
+  }`;
+}
 function toVuePropOption(prop) {
 	var _typeMap$prop$type;
 	return `{ type: ${(_typeMap$prop$type = {
@@ -237,7 +274,7 @@ function toVuePropOption(prop) {
 	}[prop.type]) !== null && _typeMap$prop$type !== void 0 ? _typeMap$prop$type : "null"}, required: ${prop.required === true ? "true" : "false"} }`;
 }
 function createVuePropInputKeys(propNames) {
-	return Object.fromEntries(propNames.map((name) => [name, Array.from(new Set([name, toKebabCase(name)]))]));
+	return Object.fromEntries(propNames.map((name) => [name, Array.from(/* @__PURE__ */ new Set([name, toKebabCase(name)]))]));
 }
 function toKebabCase(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
@@ -279,6 +316,109 @@ function readEventPath(event, path) {
 }
 `;
 //#endregion
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return (0, vue.defineComponent)((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = (0, vue.ref)();
+		const listeners = [];
+		(0, vue.onMounted)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = (0, vue.h)(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? (0, vue.withDirectives)(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return (0, vue.h)("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return (0, vue.cloneVNode)(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
 //#region packages/web-c/output-vue-wrapper/src/index.ts
 function vueWrapper(options = {}) {
 	var _options$outDir, _options$stripPrefix, _options$dts, _options$globalDts, _options$index, _options$wrapper;
@@ -289,7 +429,7 @@ function vueWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		globalDts: (_options$globalDts = options.globalDts) !== null && _options$globalDts !== void 0 ? _options$globalDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
-		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "minimal"
+		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "runtime"
 	};
 	return {
 		name: "zeus-output-vue-wrapper",
@@ -338,3 +478,4 @@ function vueWrapper(options = {}) {
 }
 //#endregion
 exports.default = vueWrapper;
+exports.defineContainer = defineContainer;

package/dist/output-vue-wrapper.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* output-vue-wrapper v0.1.0-beta.4
+* output-vue-wrapper v0.1.0-beta.6
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,6 +9,7 @@ Object.defineProperties(exports, {
 });
 let _zeus_js_bundler_plugin = require("@zeus-js/bundler-plugin");
 let _zeus_js_component_dts = require("@zeus-js/component-dts");
+let vue = require("vue");
 //#region packages/web-c/output-vue-wrapper/src/generateVueIndex.ts
 function generateVueIndex(components, options) {
 	const lines = [];
@@ -23,7 +24,7 @@ function generateVueIndex(components, options) {
 //#region packages/web-c/output-vue-wrapper/src/generateVueWrapper.ts
 function generateVueWrapper(input) {
 	var _input$component$mode;
-	return input.mode === "event-bridge" || ((_input$component$mode = input.component.models) === null || _input$component$mode === void 0 ? void 0 : _input$component$mode.length) ? generateEventBridgeVueWrapper(input) : generateMinimalVueWrapper(input);
+	return input.mode === "runtime" ? generateRuntimeVueWrapper(input) : input.mode === "event-bridge" || ((_input$component$mode = input.component.models) === null || _input$component$mode === void 0 ? void 0 : _input$component$mode.length) ? generateEventBridgeVueWrapper(input) : generateMinimalVueWrapper(input);
 }
 function generateMinimalVueWrapper(input) {
 	const { component, wcModuleId } = input;
@@ -55,7 +56,7 @@ function generateEventBridgeVueWrapper(input) {
 	if (!propNames.length && !eventNames.length) return generateMinimalVueWrapper(input);
 	const hasProps = propNames.length > 0;
 	const hasEvents = eventNames.length > 0;
-	const emitNames = Array.from(new Set([...eventNames, ...models.map((model) => model.updateEvent)]));
+	const emitNames = Array.from(/* @__PURE__ */ new Set([...eventNames, ...models.map((model) => model.updateEvent)]));
 	const hasNamedSlots = slotNames.length > 0;
 	return `
 import {
@@ -108,7 +109,7 @@ function getCapabilities(component) {
 	}));
 	return {
 		propNames: Object.keys(component.props),
-		eventNames: Array.from(new Set([...Object.entries(component.events).map(([key, event]) => {
+		eventNames: Array.from(/* @__PURE__ */ new Set([...Object.entries(component.events).map(([key, event]) => {
 			var _event$name, _event$key;
 			return (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key);
 		}), ...models.map((model) => model.event)])),
@@ -224,6 +225,42 @@ function generateVueProps(component) {
 		return `${JSON.stringify(name)}: ${toVuePropOption(prop)}`;
 	}).join(",\n    ");
 }
+function generateRuntimeVueWrapper(input) {
+	var _component$models2;
+	const { component } = input;
+	const propNames = Object.keys(component.props);
+	const eventNames = getEventNames(component);
+	const slotNames = Object.keys(component.slots).filter((name) => name !== "default");
+	const model = (_component$models2 = component.models) === null || _component$models2 === void 0 ? void 0 : _component$models2[0];
+	return [
+		`import { defineContainer } from '@zeus-js/output-vue-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = defineContainer({`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  props: ${JSON.stringify(propNames)},`,
+		`  events: ${JSON.stringify(eventNames)},`,
+		`  slots: ${JSON.stringify(slotNames)},`,
+		`  model: ${model ? formatModel(model) : "undefined"},`,
+		`})`,
+		``
+	].join("\n");
+}
+function getEventNames(component) {
+	return Array.from(new Set(Object.entries(component.events).map(([key, event]) => {
+		var _event$name2, _event$key2;
+		return (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase((_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key);
+	})));
+}
+function formatModel(model) {
+	return `{
+    prop: ${JSON.stringify(model.prop)},
+    event: ${JSON.stringify(model.event)},
+    eventPath: ${JSON.stringify(model.eventPath)},
+  }`;
+}
 function toVuePropOption(prop) {
 	var _typeMap$prop$type;
 	return `{ type: ${(_typeMap$prop$type = {
@@ -237,7 +274,7 @@ function toVuePropOption(prop) {
 	}[prop.type]) !== null && _typeMap$prop$type !== void 0 ? _typeMap$prop$type : "null"}, required: ${prop.required === true ? "true" : "false"} }`;
 }
 function createVuePropInputKeys(propNames) {
-	return Object.fromEntries(propNames.map((name) => [name, Array.from(new Set([name, toKebabCase(name)]))]));
+	return Object.fromEntries(propNames.map((name) => [name, Array.from(/* @__PURE__ */ new Set([name, toKebabCase(name)]))]));
 }
 function toKebabCase(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
@@ -279,6 +316,109 @@ function readEventPath(event, path) {
 }
 `;
 //#endregion
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return (0, vue.defineComponent)((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = (0, vue.ref)();
+		const listeners = [];
+		(0, vue.onMounted)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = (0, vue.h)(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? (0, vue.withDirectives)(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return (0, vue.h)("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return (0, vue.cloneVNode)(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
 //#region packages/web-c/output-vue-wrapper/src/index.ts
 function vueWrapper(options = {}) {
 	var _options$outDir, _options$stripPrefix, _options$dts, _options$globalDts, _options$index, _options$wrapper;
@@ -289,7 +429,7 @@ function vueWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		globalDts: (_options$globalDts = options.globalDts) !== null && _options$globalDts !== void 0 ? _options$globalDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
-		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "minimal"
+		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "runtime"
 	};
 	return {
 		name: "zeus-output-vue-wrapper",
@@ -338,3 +478,4 @@ function vueWrapper(options = {}) {
 }
 //#endregion
 exports.default = vueWrapper;
+exports.defineContainer = defineContainer;

package/dist/output-vue-wrapper.d.ts

@@ -1,6 +1,7 @@
 import { DtsMode, ZeusComponentPlugin } from '@zeus-js/bundler-plugin';
+import * as vue from 'vue';
 
-type VueWrapperMode = 'minimal' | 'event-bridge';
+type VueWrapperMode = 'runtime' | 'minimal' | 'event-bridge';
 export interface OutputVueWrapperOptions {
     /**
      * Vue wrapper output directory.
@@ -37,16 +38,43 @@ export interface OutputVueWrapperOptions {
      */
     index?: boolean;
     /**
+     * runtime:
+     *   Default. Generates thin proxies powered by @zeus-js/output-vue-wrapper/runtime.
+     *   No watch, no onMounted, no addEventListener — Vue-native props/events/model/slots.
+     *
      * minimal:
-     *   Default. Vue wrapper only renders the custom element tag.
+     *   Vue wrapper only renders the custom element tag.
      *   No watch, no prop sync, no event listeners.
      *
      * event-bridge:
-     *   Additional mode for React CustomEvent bridging.
+     *   Additional mode with explicit prop syncing and CustomEvent bridging.
      */
     wrapper?: VueWrapperMode;
 }
 
+export interface ZeusVueModelOptions {
+    prop: string;
+    event: string | string[];
+    eventPath?: string;
+}
+export interface ZeusVueContainerOptions {
+    tagName: string;
+    displayName?: string;
+    defineCustomElement?: () => void;
+    props?: string[];
+    events?: string[];
+    slots?: string[];
+    model?: ZeusVueModelOptions;
+    transformTag?: (tagName: string) => string;
+}
+export declare function defineContainer(options: ZeusVueContainerOptions): vue.DefineSetupFnComponent<{
+    [x: string]: /*elided*/ any;
+}, string[], {}, {
+    [x: string]: /*elided*/ any;
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue.PublicProps>;
+
 export declare function vueWrapper(options?: OutputVueWrapperOptions): ZeusComponentPlugin;
 
 export { vueWrapper as default };

package/dist/output-vue-wrapper.esm-bundler.js

@@ -1,10 +1,11 @@
 /**
-* output-vue-wrapper v0.1.0-beta.4
+* output-vue-wrapper v0.1.0-beta.6
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 import { resolvePluginDts } from "@zeus-js/bundler-plugin";
 import { generateVueDts, generateVueGlobalDts } from "@zeus-js/component-dts";
+import { cloneVNode, defineComponent, h, onBeforeUnmount, onMounted, ref, withDirectives } from "vue";
 //#region packages/web-c/output-vue-wrapper/src/generateVueIndex.ts
 function generateVueIndex(components, options) {
 	const lines = [];
@@ -19,7 +20,7 @@ function generateVueIndex(components, options) {
 //#region packages/web-c/output-vue-wrapper/src/generateVueWrapper.ts
 function generateVueWrapper(input) {
 	var _input$component$mode;
-	return input.mode === "event-bridge" || ((_input$component$mode = input.component.models) === null || _input$component$mode === void 0 ? void 0 : _input$component$mode.length) ? generateEventBridgeVueWrapper(input) : generateMinimalVueWrapper(input);
+	return input.mode === "runtime" ? generateRuntimeVueWrapper(input) : input.mode === "event-bridge" || ((_input$component$mode = input.component.models) === null || _input$component$mode === void 0 ? void 0 : _input$component$mode.length) ? generateEventBridgeVueWrapper(input) : generateMinimalVueWrapper(input);
 }
 function generateMinimalVueWrapper(input) {
 	const { component, wcModuleId } = input;
@@ -51,7 +52,7 @@ function generateEventBridgeVueWrapper(input) {
 	if (!propNames.length && !eventNames.length) return generateMinimalVueWrapper(input);
 	const hasProps = propNames.length > 0;
 	const hasEvents = eventNames.length > 0;
-	const emitNames = Array.from(new Set([...eventNames, ...models.map((model) => model.updateEvent)]));
+	const emitNames = Array.from(/* @__PURE__ */ new Set([...eventNames, ...models.map((model) => model.updateEvent)]));
 	const hasNamedSlots = slotNames.length > 0;
 	return `
 import {
@@ -104,7 +105,7 @@ function getCapabilities(component) {
 	}));
 	return {
 		propNames: Object.keys(component.props),
-		eventNames: Array.from(new Set([...Object.entries(component.events).map(([key, event]) => {
+		eventNames: Array.from(/* @__PURE__ */ new Set([...Object.entries(component.events).map(([key, event]) => {
 			var _event$name, _event$key;
 			return (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key);
 		}), ...models.map((model) => model.event)])),
@@ -220,6 +221,42 @@ function generateVueProps(component) {
 		return `${JSON.stringify(name)}: ${toVuePropOption(prop)}`;
 	}).join(",\n    ");
 }
+function generateRuntimeVueWrapper(input) {
+	var _component$models2;
+	const { component } = input;
+	const propNames = Object.keys(component.props);
+	const eventNames = getEventNames(component);
+	const slotNames = Object.keys(component.slots).filter((name) => name !== "default");
+	const model = (_component$models2 = component.models) === null || _component$models2 === void 0 ? void 0 : _component$models2[0];
+	return [
+		`import { defineContainer } from '@zeus-js/output-vue-wrapper/runtime'`,
+		`import { defineCustomElement } from '../wc/loader.js'`,
+		``,
+		`export const ${component.name} = defineContainer({`,
+		`  tagName: ${JSON.stringify(component.tag)},`,
+		`  displayName: ${JSON.stringify(component.name)},`,
+		`  defineCustomElement: () => defineCustomElement(${JSON.stringify(component.tag)}),`,
+		`  props: ${JSON.stringify(propNames)},`,
+		`  events: ${JSON.stringify(eventNames)},`,
+		`  slots: ${JSON.stringify(slotNames)},`,
+		`  model: ${model ? formatModel(model) : "undefined"},`,
+		`})`,
+		``
+	].join("\n");
+}
+function getEventNames(component) {
+	return Array.from(new Set(Object.entries(component.events).map(([key, event]) => {
+		var _event$name2, _event$key2;
+		return (_event$name2 = event.name) !== null && _event$name2 !== void 0 ? _event$name2 : toKebabCase((_event$key2 = event.key) !== null && _event$key2 !== void 0 ? _event$key2 : key);
+	})));
+}
+function formatModel(model) {
+	return `{
+    prop: ${JSON.stringify(model.prop)},
+    event: ${JSON.stringify(model.event)},
+    eventPath: ${JSON.stringify(model.eventPath)},
+  }`;
+}
 function toVuePropOption(prop) {
 	var _typeMap$prop$type;
 	return `{ type: ${(_typeMap$prop$type = {
@@ -233,7 +270,7 @@ function toVuePropOption(prop) {
 	}[prop.type]) !== null && _typeMap$prop$type !== void 0 ? _typeMap$prop$type : "null"}, required: ${prop.required === true ? "true" : "false"} }`;
 }
 function createVuePropInputKeys(propNames) {
-	return Object.fromEntries(propNames.map((name) => [name, Array.from(new Set([name, toKebabCase(name)]))]));
+	return Object.fromEntries(propNames.map((name) => [name, Array.from(/* @__PURE__ */ new Set([name, toKebabCase(name)]))]));
 }
 function toKebabCase(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
@@ -275,6 +312,109 @@ function readEventPath(event, path) {
 }
 `;
 //#endregion
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return defineComponent((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = ref();
+		const listeners = [];
+		onMounted(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		onBeforeUnmount(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = h(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? withDirectives(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return h("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return cloneVNode(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
 //#region packages/web-c/output-vue-wrapper/src/index.ts
 function vueWrapper(options = {}) {
 	var _options$outDir, _options$stripPrefix, _options$dts, _options$globalDts, _options$index, _options$wrapper;
@@ -285,7 +425,7 @@ function vueWrapper(options = {}) {
 		dts: (_options$dts = options.dts) !== null && _options$dts !== void 0 ? _options$dts : true,
 		globalDts: (_options$globalDts = options.globalDts) !== null && _options$globalDts !== void 0 ? _options$globalDts : true,
 		index: (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : true,
-		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "minimal"
+		wrapper: (_options$wrapper = options.wrapper) !== null && _options$wrapper !== void 0 ? _options$wrapper : "runtime"
 	};
 	return {
 		name: "zeus-output-vue-wrapper",
@@ -333,4 +473,4 @@ function vueWrapper(options = {}) {
 	};
 }
 //#endregion
-export { vueWrapper as default };
+export { vueWrapper as default, defineContainer };

package/dist/runtime/index.cjs.js

@@ -0,0 +1,114 @@
+/**
+* output-vue-wrapper v0.1.0-beta.6
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let vue = require("vue");
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return (0, vue.defineComponent)((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = (0, vue.ref)();
+		const listeners = [];
+		(0, vue.onMounted)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = (0, vue.h)(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? (0, vue.withDirectives)(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return (0, vue.h)("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return (0, vue.cloneVNode)(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
+exports.defineContainer = defineContainer;

package/dist/runtime/index.cjs.prod.js

@@ -0,0 +1,114 @@
+/**
+* output-vue-wrapper v0.1.0-beta.6
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let vue = require("vue");
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return (0, vue.defineComponent)((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = (0, vue.ref)();
+		const listeners = [];
+		(0, vue.onMounted)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = (0, vue.h)(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? (0, vue.withDirectives)(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return (0, vue.h)("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return (0, vue.cloneVNode)(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
+exports.defineContainer = defineContainer;

package/dist/runtime/index.d.ts

@@ -0,0 +1,26 @@
+import * as vue from 'vue';
+
+export interface ZeusVueModelOptions {
+    prop: string;
+    event: string | string[];
+    eventPath?: string;
+}
+export interface ZeusVueContainerOptions {
+    tagName: string;
+    displayName?: string;
+    defineCustomElement?: () => void;
+    props?: string[];
+    events?: string[];
+    slots?: string[];
+    model?: ZeusVueModelOptions;
+    transformTag?: (tagName: string) => string;
+}
+export declare function defineContainer(options: ZeusVueContainerOptions): vue.DefineSetupFnComponent<{
+    [x: string]: /*elided*/ any;
+}, string[], {}, {
+    [x: string]: /*elided*/ any;
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue.PublicProps>;
+
+

package/dist/runtime/index.js

@@ -0,0 +1,110 @@
+/**
+* output-vue-wrapper v0.1.0-beta.6
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+import { cloneVNode, defineComponent, h, onBeforeUnmount, onMounted, ref, withDirectives } from "vue";
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return defineComponent((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = ref();
+		const listeners = [];
+		onMounted(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		onBeforeUnmount(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = h(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? withDirectives(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return h("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return cloneVNode(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
+export { defineContainer };

package/dist/runtime/index.prod.js

@@ -0,0 +1,110 @@
+/**
+* output-vue-wrapper v0.1.0-beta.6
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+import { cloneVNode, defineComponent, h, onBeforeUnmount, onMounted, ref, withDirectives } from "vue";
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return defineComponent((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = ref();
+		const listeners = [];
+		onMounted(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		onBeforeUnmount(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = h(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? withDirectives(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return h("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return cloneVNode(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
+export { defineContainer };

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@zeus-js/output-vue-wrapper",
-  "version": "0.1.0-beta.4",
-  "description": "Zeus Vue wrapper output plugin",
   "type": "module",
-  "main": "index.js",
-  "module": "dist/output-vue-wrapper.esm-bundler.js",
-  "types": "dist/output-vue-wrapper.d.ts",
-  "files": [
-    "index.js",
-    "dist"
-  ],
+  "version": "0.1.0-beta.6",
+  "description": "Zeus Vue wrapper output plugin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/baicie/zeus.git",
+    "directory": "packages/web-c/output-vue-wrapper"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/output-vue-wrapper.d.ts",
@@ -21,25 +25,17 @@
         "development": "./dist/output-vue-wrapper.cjs.js",
         "default": "./index.js"
       }
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js",
+      "require": "./dist/runtime/index.cjs.js"
     }
   },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/baicie/zeus"
-  },
-  "buildOptions": {
-    "name": "ZeusOutputVueWrapper",
-    "formats": [
-      "esm-bundler",
-      "cjs"
-    ]
-  },
-  "dependencies": {
-    "@zeus-js/bundler-plugin": "0.1.0-beta.4",
-    "@zeus-js/component-dts": "0.1.0-beta.4",
-    "@zeus-js/component-analyzer": "0.1.0-beta.4"
-  },
+  "files": [
+    "index.js",
+    "dist"
+  ],
   "peerDependencies": {
     "vue": ">=3"
   },
@@ -48,11 +44,31 @@
       "optional": true
     }
   },
+  "dependencies": {
+    "@zeus-js/bundler-plugin": "0.1.0-beta.6",
+    "@zeus-js/component-analyzer": "0.1.0-beta.6",
+    "@zeus-js/component-dts": "0.1.0-beta.6"
+  },
+  "author": "Baicie",
+  "buildOptions": {
+    "name": "ZeusOutputVueWrapper",
+    "formats": [
+      "esm-bundler",
+      "cjs"
+    ],
+    "additionalEntries": [
+      {
+        "entry": "runtime/index.ts",
+        "output": "dist/runtime/index.js"
+      }
+    ]
+  },
   "keywords": [
     "zeus",
     "vue",
     "web-components"
   ],
-  "author": "Baicie",
-  "license": "MIT"
+  "main": "index.js",
+  "module": "dist/output-vue-wrapper.esm-bundler.js",
+  "types": "dist/output-vue-wrapper.d.ts"
 }