@zeus-js/output-wc 0.1.1-beta.2 → 0.1.1-beta.20

package/dist/capabilities.cjs

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.1-beta.2
+* output-wc v0.1.1-beta.20
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,7 +9,7 @@ Object.defineProperties(exports, {
 });
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.1-beta.2",
+	version: "0.1.1-beta.20",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/capabilities.js

@@ -1,6 +1,6 @@
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.1-beta.2",
+	version: "0.1.1-beta.20",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/capabilities.prod.cjs

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.1-beta.2
+* output-wc v0.1.1-beta.20
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -9,7 +9,7 @@ Object.defineProperties(exports, {
 });
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.1-beta.2",
+	version: "0.1.1-beta.20",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/capabilities.prod.js

@@ -1,6 +1,6 @@
 const ZEUS_OUTPUT_WC_CAPABILITIES = {
 	packageName: "@zeus-js/output-wc",
-	version: "0.1.1-beta.2",
+	version: "0.1.1-beta.20",
 	output: {
 		webComponent: true,
 		customElements: true,

package/dist/output-wc.cjs

@@ -1,5 +1,5 @@
 /**
-* output-wc v0.1.1-beta.2
+* output-wc v0.1.1-beta.20
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -31,11 +31,94 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let node_path = require("node:path");
 node_path = __toESM(node_path, 1);
+let node_url = require("node:url");
 let _zeus_js_bundler_plugin = require("@zeus-js/bundler-plugin");
 let _zeus_js_component_dts = require("@zeus-js/component-dts");
+//#region packages/web-c/output-wc/src/generateManifest.ts
+function generateZeusComponentsManifest(manifest) {
+	validateComponentManifest(manifest);
+	return `${JSON.stringify(manifest, null, 2)}\n`;
+}
+function validateComponentManifest(manifest) {
+	if ((manifest === null || manifest === void 0 ? void 0 : manifest.schemaVersion) !== 1) throw new Error("[ZEUS_WC_ABI_VERSION] Component manifest schemaVersion must be 1.");
+	if (!Array.isArray(manifest.components)) throw new Error("[ZEUS_WC_INVALID_MANIFEST] Component manifest components must be an array.");
+	const tags = /* @__PURE__ */ new Set();
+	for (const [componentIndex, component] of manifest.components.entries()) {
+		if (!component || typeof component.tag !== "string") throw new Error(`[ZEUS_WC_INVALID_MANIFEST] components[${componentIndex}].tag must be a string.`);
+		if (tags.has(component.tag)) throw new Error(`[ZEUS_WC_DUPLICATE_TAG] Component tag "${component.tag}" is declared more than once.`);
+		tags.add(component.tag);
+	}
+	for (const [componentIndex, component] of manifest.components.entries()) {
+		var _component$props, _component$events, _component$props2;
+		const componentPath = `components[${componentIndex}]`;
+		if (!component || typeof component.tag !== "string" || typeof component.exportName !== "string") throw new Error(`[ZEUS_WC_INVALID_MANIFEST] ${componentPath} requires tag and exportName strings.`);
+		const attributes = /* @__PURE__ */ new Map();
+		for (const [propName, prop] of Object.entries((_component$props = component.props) !== null && _component$props !== void 0 ? _component$props : {})) {
+			const attrName = prop.attr === false ? false : typeof prop.attr === "string" ? prop.attr : [
+				"string",
+				"number",
+				"boolean"
+			].includes(prop.type) ? propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`) : false;
+			if (attrName !== false) {
+				const previous = attributes.get(attrName);
+				if (previous && previous !== propName) throw new Error(`[ZEUS_WC_ATTR_COLLISION] ${componentPath}.props.${propName} and ${previous} both use attribute "${attrName}".`);
+				attributes.set(attrName, propName);
+			}
+		}
+		for (const [eventKey, event] of Object.entries((_component$events = component.events) !== null && _component$events !== void 0 ? _component$events : {})) {
+			if (event.name !== void 0 && typeof event.name !== "string" || event.reactName !== void 0 && typeof event.reactName !== "string" || event.bubbles !== void 0 && typeof event.bubbles !== "boolean" || event.composed !== void 0 && typeof event.composed !== "boolean" || event.cancelable !== void 0 && typeof event.cancelable !== "boolean") throw new Error(`[ZEUS_WC_EVENT_ABI] ${componentPath}.events.${eventKey} contains invalid names or bubbles/composed/cancelable flags.`);
+			const eventPath = `${componentPath}.events.${eventKey}`;
+			if (event.detail !== void 0) assertJsonSafe(event.detail, `${eventPath}.detail`);
+			if (event.detailOptional !== void 0) assertJsonSafe(event.detailOptional, `${eventPath}.detailOptional`);
+			if (event.detail !== void 0 && (event.detail === null || typeof event.detail !== "object" || Array.isArray(event.detail) || Object.values(event.detail).some((type) => typeof type !== "string"))) throw new Error(`[ZEUS_WC_EVENT_ABI] ${eventPath}.detail must map field names to type strings.`);
+			if (event.detailOptional !== void 0 && (!Array.isArray(event.detailOptional) || !event.detail || [...event.detailOptional].some((name) => typeof name !== "string" || !Object.prototype.hasOwnProperty.call(event.detail, name)) || new Set(event.detailOptional).size !== event.detailOptional.length)) throw new Error(`[ZEUS_WC_EVENT_ABI] ${eventPath}.detailOptional must contain unique names from detail.`);
+		}
+		for (const [propName, prop] of Object.entries((_component$props2 = component.props) !== null && _component$props2 !== void 0 ? _component$props2 : {})) {
+			if (prop.hasDefault !== void 0 && typeof prop.hasDefault !== "boolean") throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName}.hasDefault must be boolean.`);
+			if (prop.defaultStrategy !== void 0 && prop.defaultStrategy !== "static" && prop.defaultStrategy !== "factory") throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName}.defaultStrategy is invalid.`);
+			if (prop.defaultStrategy === "factory" && prop.default !== void 0) throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName} factory defaults cannot be serialized as values.`);
+			if (prop.defaultStrategy === "static" && !Object.prototype.hasOwnProperty.call(prop, "default")) throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName} static defaults require a value.`);
+			if (Object.prototype.hasOwnProperty.call(prop, "default")) {
+				if (prop.default === void 0) throw new Error(`[ZEUS_WC_INVALID_DEFAULT_META] ${componentPath}.props.${propName}.default cannot be undefined.`);
+				assertJsonSafe(prop.default, `${componentPath}.props.${propName}.default`, /* @__PURE__ */ new Set(), "ZEUS_WC_INVALID_DEFAULT_META", true);
+			}
+		}
+	}
+	assertJsonSafe(manifest, "manifest");
+}
+function assertJsonSafe(value, path, parents = /* @__PURE__ */ new Set(), code = "ZEUS_WC_INVALID_MANIFEST", rejectUndefined = false) {
+	if (value === void 0) {
+		if (rejectUndefined) throw invalidManifest(path, "undefined values are not supported", code);
+		return;
+	}
+	if (value === null) return;
+	if (typeof value === "string" || typeof value === "boolean") return;
+	if (typeof value === "number") {
+		if (!Number.isFinite(value) || Object.is(value, -0)) throw invalidManifest(path, "numbers must be finite and cannot be -0", code);
+		return;
+	}
+	if (typeof value === "function" || typeof value === "symbol" || typeof value === "bigint") throw invalidManifest(path, "functions, symbols, and bigint values are not supported", code);
+	if (typeof value !== "object") throw invalidManifest(path, "value is not JSON-safe", code);
+	if (parents.has(value)) throw invalidManifest(path, "cyclic values are not supported", code);
+	const prototype = Object.getPrototypeOf(value);
+	if (!Array.isArray(value) && prototype !== Object.prototype && prototype !== null) throw invalidManifest(path, "only plain objects and arrays are supported", code);
+	if (Object.getOwnPropertySymbols(value).length > 0) throw invalidManifest(path, "symbol keys are not supported", code);
+	parents.add(value);
+	for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(value))) {
+		if ("get" in descriptor || "set" in descriptor) throw invalidManifest(`${path}.${key}`, "accessor properties are not supported", code);
+		if (descriptor.value === void 0 && !rejectUndefined) continue;
+		assertJsonSafe(descriptor.value, Array.isArray(value) ? `${path}[${key}]` : `${path}.${key}`, parents, code, rejectUndefined);
+	}
+	parents.delete(value);
+}
+function invalidManifest(path, reason, code) {
+	return /* @__PURE__ */ new Error(`[${code}] ${path}: ${reason}.`);
+}
+//#endregion
 //#region packages/web-c/output-wc/src/generateCustomElementsJson.ts
 function generateCustomElementsJson(options) {
 	const { manifest, getModulePath } = options;
+	validateComponentManifest(manifest);
 	const result = {
 		schemaVersion: "1.0.0",
 		modules: manifest.components.map((component) => {
@@ -97,21 +180,31 @@ function generateMembers(component) {
 			default: prop.default === void 0 ? void 0 : JSON.stringify(prop.default)
 		};
 	});
-	const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {}).map((name) => {
-		return {
-			kind: "method",
-			name
-		};
-	});
+	const methods = Object.entries((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {}).map(([name, method]) => generateMethodMember(name, method));
 	return [...fields, ...methods];
 }
+function generateMethodMember(name, method) {
+	var _method$returns, _method$returns2;
+	const member = {
+		kind: "method",
+		name,
+		return: { type: { text: method.async ? `Promise<${(_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown"}>` : (_method$returns2 = method.returns) !== null && _method$returns2 !== void 0 ? _method$returns2 : "unknown" } }
+	};
+	if (method.parameters) member.parameters = method.parameters.map((parameter) => ({
+		name: parameter.name,
+		type: { text: parameter.type },
+		optional: parameter.optional,
+		rest: parameter.rest
+	}));
+	return member;
+}
 function generateEvents(component) {
 	return Object.entries(component.events).map(([key, event]) => {
 		var _event$name, _event$key;
 		return {
 			name: (_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key),
 			description: event.description,
-			type: { text: event.detail ? `CustomEvent<${formatDetailType(event.detail)}>` : "CustomEvent" }
+			type: { text: event.detail ? `CustomEvent<${(0, _zeus_js_component_dts.formatDetailType)(event.detail, event.detailOptional)}>` : "CustomEvent" }
 		};
 	});
 }
@@ -147,9 +240,6 @@ function formatPropType(prop) {
 function isAttributeBackedType$1(type) {
 	return type === "string" || type === "number" || type === "boolean";
 }
-function formatDetailType(detail) {
-	return `{ ${Object.entries(detail).map(([name, type]) => `${name}: ${type}`).join("; ")} }`;
-}
 function normalizeModulePath(value) {
 	return value.replace(/\\/g, "/");
 }
@@ -179,6 +269,15 @@ function generateWCEntry(options) {
 		`import { ${component.exportName} } from ${JSON.stringify(source)};`,
 		"",
 		`export { ${component.exportName} };`,
+		"",
+		`export function defineCustomElement(options = {}) {`,
+		`  const registry = options.registry ?? (typeof customElements === 'undefined' ? undefined : customElements);`,
+		`  if (!registry) return;`,
+		`  const existing = registry.get(${JSON.stringify(component.tag)});`,
+		`  if (existing === ${component.exportName}) return;`,
+		`  if (existing) throw new Error(${JSON.stringify(`[ZEUS_WC_DUPLICATE_TAG] <${component.tag}> is already registered with a different definition.`)});`,
+		`  registry.define(${JSON.stringify(component.tag)}, ${component.exportName});`,
+		`}`,
 		""
 	].join("\n");
 }
@@ -204,16 +303,19 @@ function getVirtualIndexId() {
 //#region packages/web-c/output-wc/src/generateLazyEntry.ts
 function generateLazyEntry(options) {
 	const { component, outPath, sourceImport } = options;
-	const source = sourceImport !== null && sourceImport !== void 0 ? sourceImport : toRelativeImport(component.source, outPath);
+	const source = `${sourceImport !== null && sourceImport !== void 0 ? sourceImport : toRelativeImport(component.source, outPath)}?zeus-lazy-component=${component.exportName}`;
 	return [
-		`import { createCustomElementMountLifecycle, mountElementDefinition } from "@zeus-js/runtime-dom";`,
+		`import { createCustomElementMountLifecycle, getElementDefinition, mountElementDefinition } from "@zeus-js/runtime-dom";`,
+		`import { resolveHostProperties } from "@zeus-js/web-c-runtime";`,
 		`import { ${component.exportName} } from ${JSON.stringify(source)};`,
 		"",
 		`export function createComponent(hostRef) {`,
+		`  resolveHostProperties(hostRef, getElementDefinition(${component.exportName}).propDefs);`,
 		`  const mountState = {`,
 		`    attributeProps: hostRef.attributeProps,`,
 		`    internals: hostRef.internals,`,
 		`    reflectingAttrs: hostRef.reflectingAttrs,`,
+		`    exposedMethods: hostRef.exposedMethods,`,
 		`  };`,
 		`  const lifecycle = createCustomElementMountLifecycle(() =>`,
 		`    mountElementDefinition(`,
@@ -233,8 +335,8 @@ function generateLazyEntry(options) {
 		`      lifecycle.disconnect();`,
 		`    },`,
 		"",
-		`    propertyChanged(name, oldValue, newValue) {`,
-		`      lifecycle.current()?.propertyChanged(name, oldValue, newValue);`,
+		`    propertyChanged(change) {`,
+		`      lifecycle.current()?.propertyChanged(change);`,
 		`    },`,
 		"",
 		`    formAssociated(form) {`,
@@ -268,54 +370,6 @@ function toRelativeImport(source, outPath) {
 	return [...outParts.slice(common).map(() => ".."), ...sourceParts.slice(common)].join("/");
 }
 //#endregion
-//#region packages/web-c/output-wc/src/generateLazyManifest.ts
-function generateLazyManifest(options) {
-	const { components, getEntryFileName } = options;
-	return `export const components = [
-${components.map((component) => {
-		var _component$runtimePro, _component$methods, _component$meta$shado, _component$meta, _component$meta$formA, _component$meta2;
-		const entryFile = getEntryFileName(component.tag).replace(/\\/g, "/");
-		const props = generatePropsArray((_component$runtimePro = component.runtimeProps) !== null && _component$runtimePro !== void 0 ? _component$runtimePro : component.props);
-		const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {});
-		const importPath = entryFile.startsWith(".") ? JSON.stringify(entryFile) : JSON.stringify(`./${entryFile}`);
-		const methodLine = methods.length ? `    methods: ${JSON.stringify(methods)},\n` : "";
-		return `  {
-    tagName: ${JSON.stringify(component.tag)},
-    shadow: ${(_component$meta$shado = (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.shadow) !== null && _component$meta$shado !== void 0 ? _component$meta$shado : false},
-    formAssociated: ${(_component$meta$formA = (_component$meta2 = component.meta) === null || _component$meta2 === void 0 ? void 0 : _component$meta2.formAssociated) !== null && _component$meta$formA !== void 0 ? _component$meta$formA : false},
-    load: () => import(${importPath}),
-    props: ${props},
-${methodLine}
-  }`;
-	}).join(",\n")}
-];
-`;
-}
-function generatePropsArray(props) {
-	const entries = Object.entries(props);
-	if (entries.length === 0) return "[]";
-	return `[\n${entries.map(([name, prop]) => {
-		const parts = [`name: ${JSON.stringify(name)}`];
-		if (!isAttributeBackedType(prop.type) && !prop.deserialize || prop.attr === false) parts.push("attrName: false");
-		else {
-			var _prop$attr;
-			const attrName = (_prop$attr = prop.attr) !== null && _prop$attr !== void 0 ? _prop$attr : toKebabCase(name);
-			if (attrName !== toKebabCase(name)) parts.push(`attrName: ${JSON.stringify(attrName)}`);
-		}
-		parts.push(`type: ${JSON.stringify(prop.type)}`);
-		if (prop.reflect && (isAttributeBackedType(prop.type) || Boolean(prop.serialize))) parts.push("reflect: true");
-		if (prop.serialize) parts.push("serialize: true");
-		if (prop.deserialize) parts.push("deserialize: true");
-		return `      { ${parts.join(", ")} }`;
-	}).join(",\n")}\n    ]`;
-}
-function isAttributeBackedType(type) {
-	return type === "string" || type === "number" || type === "boolean";
-}
-function toKebabCase(value) {
-	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-}
-//#endregion
 //#region packages/web-c/output-wc/src/generateLoader.ts
 function generateLoader() {
 	return `import { bootstrapLazy } from "@zeus-js/web-c-runtime";
@@ -325,24 +379,11 @@ const componentsByTagName = new Map(
   components.map(component => [component.tagName, component]),
 );
 
-const definedTagsByRegistry = new WeakMap();
-
 function resolveRegistry(options) {
   return options.registry ??
     (typeof customElements === "undefined" ? undefined : customElements);
 }
 
-function getDefinedTags(registry) {
-  let definedTags = definedTagsByRegistry.get(registry);
-
-  if (!definedTags) {
-    definedTags = new Set();
-    definedTagsByRegistry.set(registry, definedTags);
-  }
-
-  return definedTags;
-}
-
 export function defineCustomElement(tagName, options = {}) {
   const registry = resolveRegistry(options);
 
@@ -356,16 +397,7 @@ export function defineCustomElement(tagName, options = {}) {
     throw new Error(\`[zeus:web-c] Unknown custom element: <\${tagName}>.\`);
   }
 
-  const definedTags = getDefinedTags(registry);
-
-  if (definedTags.has(tagName) || registry.get(tagName)) {
-    definedTags.add(tagName);
-    return;
-  }
-
   bootstrapLazy([component], { registry });
-
-  definedTags.add(tagName);
 }
 
 export function defineCustomElements(options = {}) {
@@ -374,8 +406,6 @@ export function defineCustomElements(options = {}) {
   }
 }
 
-export const defineLazyElement = defineCustomElement;
-export const defineLazyElements = defineCustomElements;
 `;
 }
 function generateAutoEntry() {
@@ -390,18 +420,149 @@ function generateLazyIndex() {
 	return `export {
   defineCustomElement,
   defineCustomElements,
-  defineLazyElement,
-  defineLazyElements,
 } from "./loader.js";
 `;
 }
 //#endregion
-//#region packages/web-c/output-wc/src/generateManifest.ts
-function generateZeusComponentsManifest(manifest) {
-	return `${JSON.stringify(manifest, null, 2)}\n`;
+//#region packages/web-c/output-wc/src/generateLazyManifest.ts
+function generateLazyManifest(options) {
+	const { components, getEntryFileName } = options;
+	return `export const components = [
+${components.map((component) => {
+		var _component$runtimePro, _component$methods, _component$meta$shado, _component$meta, _component$meta$formA, _component$meta2;
+		const entryFile = getEntryFileName(component.tag).replace(/\\/g, "/");
+		const props = generatePropsArray((_component$runtimePro = component.runtimeProps) !== null && _component$runtimePro !== void 0 ? _component$runtimePro : component.props);
+		const methods = Object.keys((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {});
+		const importPath = entryFile.startsWith(".") ? JSON.stringify(entryFile) : JSON.stringify(`./${entryFile}`);
+		const methodLine = methods.length ? `    methods: ${JSON.stringify(methods)},\n` : "";
+		return `  {
+    tagName: ${JSON.stringify(component.tag)},
+    shadow: ${(_component$meta$shado = (_component$meta = component.meta) === null || _component$meta === void 0 ? void 0 : _component$meta.shadow) !== null && _component$meta$shado !== void 0 ? _component$meta$shado : false},
+    formAssociated: ${(_component$meta$formA = (_component$meta2 = component.meta) === null || _component$meta2 === void 0 ? void 0 : _component$meta2.formAssociated) !== null && _component$meta$formA !== void 0 ? _component$meta$formA : false},
+    load: () => import(${importPath}),
+    props: ${props},
+${methodLine}
+  }`;
+	}).join(",\n")}
+];
+`;
+}
+function generatePropsArray(props) {
+	const entries = Object.entries(props);
+	if (entries.length === 0) return "[]";
+	return `[\n${entries.map(([name, prop]) => {
+		const parts = [`name: ${JSON.stringify(name)}`];
+		if (!isAttributeBackedType(prop.type) && !prop.deserialize || prop.attr === false) parts.push("attrName: false");
+		else {
+			var _prop$attr;
+			const attrName = (_prop$attr = prop.attr) !== null && _prop$attr !== void 0 ? _prop$attr : toKebabCase(name);
+			if (attrName !== toKebabCase(name)) parts.push(`attrName: ${JSON.stringify(attrName)}`);
+		}
+		parts.push(`type: ${JSON.stringify(prop.type)}`);
+		if (isJsonSafeDefault(prop.default)) {
+			const encoded = JSON.stringify(prop.default);
+			parts.push(`default: ${typeof prop.default === "object" && prop.default !== null ? `JSON.parse(${JSON.stringify(encoded)})` : encoded}`);
+		}
+		if (prop.reflect && (isAttributeBackedType(prop.type) || Boolean(prop.serialize))) parts.push("reflect: true");
+		if (prop.serialize) parts.push("serialize: true");
+		if (prop.deserialize) parts.push("deserialize: true");
+		return `      { ${parts.join(", ")} }`;
+	}).join(",\n")}\n    ]`;
+}
+function isJsonSafeDefault(value, parents = /* @__PURE__ */ new Set()) {
+	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+	if (typeof value === "number") return Number.isFinite(value) && !Object.is(value, -0);
+	if (typeof value !== "object" || parents.has(value)) return false;
+	if (!Array.isArray(value) && Object.getPrototypeOf(value) !== Object.prototype) return false;
+	if (Object.getOwnPropertySymbols(value).length) return false;
+	parents.add(value);
+	const descriptors = Object.getOwnPropertyDescriptors(value);
+	const valid = Array.isArray(value) ? Array.from({ length: value.length }, (_, index) => descriptors[index]).every((descriptor) => descriptor && "value" in descriptor && isJsonSafeDefault(descriptor.value, parents)) : Object.values(descriptors).every((descriptor) => "value" in descriptor && isJsonSafeDefault(descriptor.value, parents));
+	parents.delete(value);
+	return valid;
+}
+function isAttributeBackedType(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
+function toKebabCase(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+//#endregion
+//#region packages/web-c/output-wc/src/generateRegistration.ts
+function generateLazyRegistration(component, entryFileName) {
+	return `import { bootstrapLazy } from "@zeus-js/web-c-runtime";
+${generateLazyManifest({
+		components: [component],
+		getEntryFileName: () => entryFileName
+	})}
+export const component = components[0];
+
+export function defineCustomElement(options = {}) {
+  bootstrapLazy([component], options);
+}
+`;
+}
+//#endregion
+//#region packages/web-c/output-wc/src/generateVSCodeCustomData.ts
+function generateVSCodeCustomData(customElementsJson) {
+	let manifest;
+	try {
+		manifest = JSON.parse(customElementsJson);
+	} catch {
+		throw new Error("[ZEUS_VSCODE_CUSTOM_DATA_INVALID] CEM input is not valid JSON.");
+	}
+	if ((manifest === null || manifest === void 0 ? void 0 : manifest.schemaVersion) !== "1.0.0" || !Array.isArray(manifest.modules)) throw new Error("[ZEUS_VSCODE_CUSTOM_DATA_INVALID] CEM input must use schemaVersion 1.0.0 and contain modules.");
+	const tags = manifest.modules.flatMap((module) => {
+		var _module$declarations;
+		return ((_module$declarations = module.declarations) !== null && _module$declarations !== void 0 ? _module$declarations : []).filter((declaration) => declaration.kind === "class" && declaration.customElement === true && typeof declaration.tagName === "string").map((declaration) => {
+			var _declaration$attribut;
+			const tagName = declaration.tagName;
+			const attributes = ((_declaration$attribut = declaration.attributes) !== null && _declaration$attribut !== void 0 ? _declaration$attribut : []).map((attribute) => {
+				var _attribute$type;
+				if (typeof attribute.name !== "string") throw new Error(`[ZEUS_VSCODE_CUSTOM_DATA_INVALID] <${tagName}> contains an attribute without a name.`);
+				const values = parseStringLiteralUnion((_attribute$type = attribute.type) === null || _attribute$type === void 0 ? void 0 : _attribute$type.text);
+				return {
+					name: attribute.name,
+					...attribute.description ? { description: attribute.description } : {},
+					...values ? { values: values.map((name) => ({ name })) } : {}
+				};
+			});
+			return {
+				name: tagName,
+				...declaration.description ? { description: declaration.description } : {},
+				...attributes.length > 0 ? { attributes } : {}
+			};
+		});
+	});
+	const names = /* @__PURE__ */ new Set();
+	for (const tag of tags) {
+		if (names.has(tag.name)) throw new Error(`[ZEUS_VSCODE_CUSTOM_DATA_INVALID] CEM declares <${tag.name}> more than once.`);
+		names.add(tag.name);
+	}
+	return `${JSON.stringify({
+		version: 1.1,
+		tags
+	}, null, 2)}\n`;
+}
+function parseStringLiteralUnion(typeText) {
+	if (!typeText) return void 0;
+	const parts = typeText.split(/\s+\|\s+/);
+	const values = [];
+	for (const part of parts) {
+		if (!part.startsWith("\"") || !part.endsWith("\"")) return void 0;
+		try {
+			const value = JSON.parse(part);
+			if (typeof value !== "string") return void 0;
+			values.push(value);
+		} catch {
+			return;
+		}
+	}
+	return values.length > 0 ? values : void 0;
 }
 //#endregion
 //#region packages/web-c/output-wc/src/index.ts
+const outputWcModulePath = (0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href);
 function wc(options = {}) {
 	var _options$register, _options$outDir, _options$stripPrefix, _options$manifestFile, _options$customElemen, _options$dts, _options$jsxDts, _options$index, _options$warnOnFileNa, _options$auto, _options$entryFileNam;
 	const registerMode = (_options$register = options.register) !== null && _options$register !== void 0 ? _options$register : "lazy";
@@ -476,15 +637,13 @@ function wc(options = {}) {
 				modules.push({
 					id: "zeus:wc:components.manifest",
 					fileName: joinPath("components.manifest.js"),
-					code: generateLazyManifest({
-						components: ctx.manifest.components,
-						getEntryFileName: (tag) => getLazyEntryFileName(normalized.entryFileName, tag)
-					})
+					code: [...ctx.manifest.components.map((component, index) => `import { component as c${index} } from ${JSON.stringify(getVirtualComponentId(component))};`), `export const components = [${ctx.manifest.components.map((_, index) => `c${index}`).join(", ")}];`].join("\n")
 				});
 				modules.push({
 					id: "zeus:wc:loader",
 					fileName: joinPath("loader.js"),
-					code: generateLoader()
+					code: generateLoader(),
+					resolveFrom: outputWcModulePath
 				});
 				if (normalized.auto) modules.push({
 					id: "zeus:wc:auto",
@@ -501,13 +660,9 @@ function wc(options = {}) {
 				*/
 				modules.push({
 					id: getVirtualComponentId(component),
-					code: `
-import { defineCustomElements } from "zeus:wc:loader";
-
-defineCustomElements();
-
-export {};
-`.trimStart()
+					fileName: joinPath(getFileName(component.tag)),
+					code: generateLazyRegistration(component, node_path.default.posix.relative(node_path.default.posix.dirname(joinPath(getFileName(component.tag))), joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)))),
+					resolveFrom: outputWcModulePath
 				});
 				const fileName = joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag));
 				modules.push({
@@ -517,7 +672,8 @@ export {};
 						component,
 						outPath: fileName,
 						sourceImport: toAbsoluteImportPath(ctx.root, component.source)
-					})
+					}),
+					resolveFrom: outputWcModulePath
 				});
 			} else {
 				const fileName = joinPath(getFileName(component.tag));
@@ -562,12 +718,17 @@ export {};
 			const isLazy = normalized.register === "lazy";
 			if (isLazy) {
 				if (dts) {
-					const loaderDts = (0, _zeus_js_component_dts.generateLoaderDts)(ctx.manifest);
+					const loaderDts = [...jsxDts ? ["import './types/jsx'", ""] : [], (0, _zeus_js_component_dts.generateLoaderDts)(ctx.manifest)].join("\n");
 					files.push({
 						type: "asset",
 						fileName: joinPath("loader.d.ts"),
 						source: loaderDts
 					});
+					for (const component of ctx.manifest.components) files.push({
+						type: "asset",
+						fileName: joinPath(getFileName(component.tag).replace(/\.js$/, ".d.ts")),
+						source: "export declare function defineCustomElement(options?: { registry?: CustomElementRegistry }): void\n"
+					});
 					if (normalized.index) files.push({
 						type: "asset",
 						fileName: joinPath("index.d.ts"),
@@ -585,14 +746,22 @@ export {};
 				fileName: normalized.manifestFile,
 				source: generateZeusComponentsManifest(ctx.manifest)
 			});
-			if (normalized.customElementsFile) files.push({
-				type: "asset",
-				fileName: normalized.customElementsFile,
-				source: generateCustomElementsJson({
+			if (normalized.customElementsFile) {
+				const customElementsJson = generateCustomElementsJson({
 					manifest: ctx.manifest,
 					getModulePath: (component) => isLazy ? joinPath(getLazyEntryFileName(normalized.entryFileName, component.tag)) : joinPath(getFileName(component.tag))
-				})
-			});
+				});
+				files.push({
+					type: "asset",
+					fileName: normalized.customElementsFile,
+					source: customElementsJson
+				});
+				files.push({
+					type: "asset",
+					fileName: "vscode.html-custom-data.json",
+					source: generateVSCodeCustomData(customElementsJson)
+				});
+			}
 			if (!isLazy && (dts || jsxDts)) {
 				const dtsFiles = (0, _zeus_js_component_dts.generateWCDtsFiles)(ctx.manifest, {
 					outDir: _outDir,