praxis-kit 0.1.1 → 1.0.2

package/dist/vite-plugin/index.js

@@ -136,22 +136,12 @@ const iterate = Object.freeze({
 	values
 });
 //#endregion
-//#region ../../lib/primitive/src/utils/lazy.ts
-/**
-* Lazily initializes a value. The factory is invoked exactly once on the first
-* call, and every subsequent call returns the cached result, even if the
-* result is `undefined`, `null`, `false`, `0`, or `''`.
-*/
-function lazy(factory) {
-	let initialized = false;
-	let value;
-	return () => {
-		if (!initialized) {
-			value = factory();
-			initialized = true;
-		}
-		return value;
-	};
+//#region ../../lib/foundation/src/type-guards.ts
+function isDefined(value) {
+	return value !== void 0;
+}
+function isUndefined(value) {
+	return value === void 0;
 }
 //#endregion
 //#region ../../plugins/vite/src/ast.ts
@@ -868,6 +858,36 @@ const ALL_EXTS = /* @__PURE__ */ new Set([
 	"jsx"
 ]);
 //#endregion
+//#region ../../plugins/vite/src/jsx.ts
+/**
+* Small, shared JSX-AST vocabulary used by more than one transform/analysis file in this
+* package (`diagnose.ts`, `slot-transform.ts`) — kept to genuinely-common helpers only, not a
+* general dumping ground; see each function's own doc comment for exactly what it decides.
+*/
+/**
+* Returns a JSX tag name's identifier text, or `undefined` when the tag name isn't a plain
+* identifier (e.g. a namespaced or member-access tag like `<foo.Bar />`).
+*
+* Deliberately narrow: only `ts.Identifier` is supported today. `ts.JsxTagNameExpression` also
+* allows `PropertyAccessExpression`/`ThisExpression`/`JsxNamespacedName`, none of which any
+* factory-based Praxis component can produce — add support only if the plugin actually needs to
+* recognize a namespaced/member-access component tag, not speculatively.
+*/
+function getJsxTagName(tagName) {
+	return ts.isIdentifier(tagName) ? tagName.text : void 0;
+}
+/**
+* Returns true when `tagName` starts with an uppercase ASCII letter (A–Z) — JSX's own convention
+* for "this is a component reference, not an intrinsic HTML tag" (`<Button>` vs `<button>`).
+* Charcode comparison, not a `/^[A-Z]/` regex: this runs once per JSX site during a hot
+* build-time AST walk, and a charcode check avoids the (admittedly small) regex engine overhead
+* for a check this simple.
+*/
+function isComponentTagName(tagName) {
+	const code = tagName.charCodeAt(0);
+	return code >= 65 && code <= 90;
+}
+//#endregion
 //#region ../../plugins/vite/src/vite-diagnostics.ts
 const ViteDiagnostics = {
 	cardinalityViolation(name, totalMin, totalMax, receivedMin, receivedMax) {
@@ -890,78 +910,33 @@ const ViteDiagnostics = {
 };
 //#endregion
 //#region ../../plugins/vite/src/diagnose.ts
-/**
-* Single-pass variant of diagnoseUsages + diagnoseAriaTagOverrides + collectJsxUsages.
-* Visits each JSX node once and dispatches to all three checks, rather than walking
-* the source three times. For use in the hot Vite transform hook.
-*/
-function analyzeJsxSites(source, constraints, severity) {
-	const byName = new Map(constraints.filter((c) => c.rules.length > 0).map((c) => [c.name, c]));
-	const byNameAria = new Map(constraints.filter((c) => c.hasAriaRules && c.defaultTag !== void 0).map((c) => [c.name, c]));
-	const diagnostics = [];
-	const usages = [];
-	walkEach(source, (node) => {
-		let tagName;
-		let attributes;
-		let count;
-		if (ts.isJsxElement(node)) {
-			const opening = node.openingElement;
-			tagName = ts.isIdentifier(opening.tagName) ? opening.tagName.text : void 0;
-			attributes = opening.attributes;
-			count = countJsxChildren(node.children);
-		} else if (ts.isJsxSelfClosingElement(node)) {
-			tagName = ts.isIdentifier(node.tagName) ? node.tagName.text : void 0;
-			attributes = node.attributes;
-			count = ZERO;
-		}
-		if (!tagName) return;
-		const getPos = lazy(() => source.getLineAndCharacterOfPosition(node.getStart(source)));
-		if (count !== void 0) {
-			const c = byName.get(tagName);
-			if (c && (count.max < c.totalMin || c.exclusiveChildren && count.min > c.totalMax)) {
-				const { line, character } = getPos();
-				diagnostics.push({
-					diagnostic: ViteDiagnostics.cardinalityViolation(c.name, c.totalMin, c.totalMax, count.min, count.max),
-					line: line + 1,
-					col: character + 1,
-					severity
-				});
-			}
-		}
-		if (attributes) {
-			const c = byNameAria.get(tagName);
-			if (c) iterate.forEach(attributes.properties, (attr) => {
-				if (!ts.isJsxAttribute(attr)) return;
-				const { initializer, name } = attr;
-				if ((ts.isIdentifier(name) ? name.text : void 0) !== "as" || !initializer) return;
-				let asValue;
-				if (ts.isStringLiteral(initializer)) asValue = initializer.text;
-				else if (ts.isJsxExpression(initializer) && initializer.expression !== void 0 && ts.isStringLiteral(initializer.expression)) asValue = initializer.expression.text;
-				if (asValue !== void 0 && asValue !== c.defaultTag) {
-					const { line, character } = getPos();
-					diagnostics.push({
-						diagnostic: ViteDiagnostics.ariaTagOverride(tagName, asValue, c.defaultTag),
-						line: line + 1,
-						col: character + 1,
-						severity
-					});
-				}
-			});
-		}
-		if (/^[A-Z]/.test(tagName)) {
-			const { line, character } = getPos();
-			usages.push({
-				tagName,
-				count,
-				line: line + 1,
-				col: character + 1
-			});
-		}
-	});
-	return {
-		diagnostics,
-		usages
-	};
+/** Extracts a {@link JsxSite} from a node, or `undefined` when the node isn't a JSX element/
+*  self-closing element, or its tag name isn't a plain identifier (e.g. `<foo.Bar />`). Centralizes
+*  the open-vs-self-closing branch every JSX-walking function in this file otherwise repeated. */
+function getJsxSite(node) {
+	if (ts.isJsxElement(node)) {
+		const opening = node.openingElement;
+		const tagName = getJsxTagName(opening.tagName);
+		if (isUndefined(tagName)) return void 0;
+		const count = countJsxChildren(node.children);
+		return isUndefined(count) ? {
+			tagName,
+			attributes: opening.attributes
+		} : {
+			tagName,
+			attributes: opening.attributes,
+			count
+		};
+	}
+	if (ts.isJsxSelfClosingElement(node)) {
+		const tagName = getJsxTagName(node.tagName);
+		if (isUndefined(tagName)) return void 0;
+		return {
+			tagName,
+			attributes: node.attributes,
+			count: ZERO
+		};
+	}
 }
 const ZERO = {
 	min: 0,
@@ -1014,7 +989,7 @@ function countExpression(node) {
 		const op = node.operatorToken.kind;
 		if (op === ts.SyntaxKind.AmpersandAmpersandToken) {
 			const right = countExpression(node.right);
-			if (!right) return void 0;
+			if (isUndefined(right)) return void 0;
 			return {
 				min: 0,
 				max: right.max
@@ -1023,7 +998,7 @@ function countExpression(node) {
 		if (op === ts.SyntaxKind.BarBarToken || op === ts.SyntaxKind.QuestionQuestionToken) {
 			const left = countExpression(node.left);
 			const right = countExpression(node.right);
-			if (!left || !right) return void 0;
+			if (isUndefined(left) || isUndefined(right)) return void 0;
 			return {
 				min: Math.min(left.min, right.min),
 				max: Math.max(left.max, right.max)
@@ -1033,7 +1008,7 @@ function countExpression(node) {
 	if (ts.isConditionalExpression(node)) {
 		const whenTrue = countExpression(node.whenTrue);
 		const whenFalse = countExpression(node.whenFalse);
-		if (!whenTrue || !whenFalse) return void 0;
+		if (isUndefined(whenTrue) || isUndefined(whenFalse)) return void 0;
 		return {
 			min: Math.min(whenTrue.min, whenFalse.min),
 			max: Math.max(whenTrue.max, whenFalse.max)
@@ -1050,7 +1025,7 @@ function countJsxChildren(children) {
 	let max = 0;
 	for (const child of children) {
 		let c;
-		if (ts.isJsxExpression(child)) c = child.expression === void 0 ? ZERO : countExpression(child.expression);
+		if (ts.isJsxExpression(child)) c = isUndefined(child.expression) ? ZERO : countExpression(child.expression);
 		else if (ts.isJsxText(child)) c = child.text.trim().length > 0 ? ONE : ZERO;
 		else if (ts.isJsxFragment(child)) c = countJsxChildren(child.children);
 		else c = ONE;
@@ -1063,6 +1038,89 @@ function countJsxChildren(children) {
 		max
 	};
 }
+/** "Too many"/"too few" children for a component with a closed or minimum-bound children
+*  contract. Only fires when `constraint` is present and `site.count` is statically known —
+*  an unknowable count (`.map()`, a variable reference) is never treated as a violation. */
+function diagnoseCardinality(source, node, site, constraint, severity) {
+	if (isUndefined(constraint) || isUndefined(site.count)) return void 0;
+	const { count } = site;
+	const { totalMin, totalMax, name, exclusiveChildren } = constraint;
+	if (count.max < totalMin || exclusiveChildren && count.min > totalMax) {
+		const { line, character } = source.getLineAndCharacterOfPosition(node.getStart(source));
+		return {
+			diagnostic: ViteDiagnostics.cardinalityViolation(name, totalMin, totalMax, count.min, count.max),
+			line: line + 1,
+			col: character + 1,
+			severity
+		};
+	}
+}
+/** A static `as="tag"` prop that overrides the default element on a component with ARIA
+*  enforcement rules — not a hard error (the override may be intentional), just a site that
+*  warrants review since it silently changes the implicit ARIA role. Only fires when
+*  `constraint` is present; a dynamic/absent `as` is never flagged. */
+function diagnoseAriaOverride(source, node, site, constraint, severity) {
+	if (!constraint) return [];
+	const diagnostics = [];
+	iterate.forEach(site.attributes.properties, (attr) => {
+		if (!ts.isJsxAttribute(attr)) return;
+		const { initializer, name } = attr;
+		if ((ts.isIdentifier(name) ? name.text : void 0) !== "as" || isUndefined(initializer)) return;
+		let asValue;
+		if (ts.isStringLiteral(initializer)) asValue = initializer.text;
+		else if (ts.isJsxExpression(initializer) && isDefined(initializer.expression) && ts.isStringLiteral(initializer.expression)) asValue = initializer.expression.text;
+		if (isUndefined(asValue) || asValue === constraint.defaultTag) return;
+		const { line, character } = source.getLineAndCharacterOfPosition(node.getStart(source));
+		diagnostics.push({
+			diagnostic: ViteDiagnostics.ariaTagOverride(site.tagName, asValue, constraint.defaultTag),
+			line: line + 1,
+			col: character + 1,
+			severity
+		});
+	});
+	return diagnostics;
+}
+/**
+* Collects `site` as a `PendingUsage` for the cross-file validation queue, when its tag name
+* looks like a component reference (uppercase-led). Intentionally over-inclusive — it doesn't
+* check whether the tag resolves to an actual known Praxis component (that's exactly what
+* deferred cross-file validation at `buildEnd`, once the full constraint registry is
+* populated, still needs to determine); an intrinsic HTML tag (`<div>`) never reaches here.
+*/
+function collectUsage(source, node, site) {
+	if (!isComponentTagName(site.tagName)) return void 0;
+	const { line, character } = source.getLineAndCharacterOfPosition(node.getStart(source));
+	return {
+		tagName: site.tagName,
+		count: site.count,
+		line: line + 1,
+		col: character + 1
+	};
+}
+/**
+* Single-pass variant of diagnoseUsages + diagnoseAriaTagOverrides + collectJsxUsages.
+* Visits each JSX node once and dispatches to all three checks, rather than walking
+* the source three times. For use in the hot Vite transform hook.
+*/
+function analyzeJsxSites(source, constraints, severity) {
+	const byName = new Map(constraints.filter((c) => c.rules.length > 0).map((c) => [c.name, c]));
+	const byNameAria = new Map(constraints.filter((c) => c.hasAriaRules && isDefined(c.defaultTag)).map((c) => [c.name, c]));
+	const diagnostics = [];
+	const usages = [];
+	walkEach(source, (node) => {
+		const site = getJsxSite(node);
+		if (!site) return;
+		const cardinality = diagnoseCardinality(source, node, site, byName.get(site.tagName), severity);
+		if (cardinality) diagnostics.push(cardinality);
+		diagnostics.push(...diagnoseAriaOverride(source, node, site, byNameAria.get(site.tagName), severity));
+		const usage = collectUsage(source, node, site);
+		if (usage) usages.push(usage);
+	});
+	return {
+		diagnostics,
+		usages
+	};
+}
 //#endregion
 //#region ../../plugins/vite/src/imports.ts
 /**
@@ -1188,9 +1246,15 @@ var ConstraintRegistry = class {
 * **Safety conditions** — the transform is skipped if any of these are true:
 *   1. The child has a dynamic `className` expression (cannot merge safely).
 *      A string-literal `className` IS handled: the transform generates
-*      `{..._p, className: _p.className + ' childCls'}`.
-*   2. The child has a bare `style` or `on*` attribute without an initializer.
-*      Static object-literal and expression-valued `style` props are merged:
+*      `className={_p.className ? `${_p.className} childCls` : 'childCls'}` — see
+*      `buildClassNameMerge`'s own doc comment for why the guard is load-bearing, not defensive
+*      styling.
+*   2. The child has a bare `style` or `on*` attribute without an initializer, or an `on*`
+*      attribute whose value is provably not callable (`undefined`, `null`, `true`/`false`, a
+*      numeric/string/bigint literal — see `isObviouslyNotCallable`'s own doc comment for why:
+*      the composed handler calls the child's expression unconditionally, so `onClick={undefined}`
+*      — valid, type-checked JSX — would otherwise throw `undefined is not a function` at
+*      runtime). Static object-literal and expression-valued `style` props are merged:
 *      `style={{..._p.style, ...childStyle}}`.  Event handlers are composed:
 *      `onClick={(_e) => { (childHandler)(_e); _p.onClick?.(_e); }}`.
 *   3. The component name starts with a lowercase letter (HTML intrinsic — not
@@ -1199,11 +1263,12 @@ var ConstraintRegistry = class {
 *
 * The transform is conservative: any condition that is not statically clear
 * causes the node to be left unchanged.
+*
+* The three generated-expression shapes above (`buildClassNameMerge`, `buildStyleMerge`,
+* `buildEventMerge`) are each their own named function, isolated from the JSX-parsing helpers
+* above them (`getStaticClassName`, `getStyleInfo`, `getEventHandlers`, …) — the parsing side
+* already had that boundary; the generation side didn't.
 */
-/** Returns true when the first character of `s` is an uppercase ASCII letter (A–Z). */
-function isUpperCase(s) {
-	return s.charCodeAt(0) >= 65 && s.charCodeAt(0) <= 90;
-}
 /** Returns the attribute name string; empty string for namespaced names. */
 function jsxAttrName(attr) {
 	return ts.isIdentifier(attr.name) ? attr.name.text : "";
@@ -1221,7 +1286,7 @@ function getStaticClassName(child) {
 			absent: false,
 			value: init.text
 		};
-		if (ts.isJsxExpression(init) && init.expression !== void 0 && ts.isStringLiteral(init.expression)) return {
+		if (ts.isJsxExpression(init) && isDefined(init.expression) && ts.isStringLiteral(init.expression)) return {
 			absent: false,
 			value: init.expression.text
 		};
@@ -1235,7 +1300,7 @@ function getStyleInfo(child) {
 		if (!ts.isJsxAttribute(attr) || jsxAttrName(attr) !== "style") continue;
 		const init = attr.initializer;
 		if (!init || ts.isStringLiteral(init)) return null;
-		if (ts.isJsxExpression(init) && init.expression !== void 0) return {
+		if (ts.isJsxExpression(init) && isDefined(init.expression)) return {
 			absent: false,
 			expr: init.expression
 		};
@@ -1243,6 +1308,27 @@ function getStyleInfo(child) {
 	}
 	return { absent: true };
 }
+/**
+* Whether `expr` is a literal/keyword that is *provably* not callable — `undefined`, `null`,
+* `true`/`false`, or a numeric/string/bigint literal. `buildEventMerge`'s generated code calls
+* the child's own handler expression unconditionally (`(childHandler)(_e)`), so a handler prop
+* whose value is one of these throws at runtime (`undefined is not a function`) even though
+* `onClick={undefined}` is itself perfectly valid, type-checked JSX (an optional handler prop
+* left unset via an explicit value rather than omitted). Deliberately narrow: an identifier,
+* member access, call expression, or arrow/function expression is left alone and treated as
+* callable — that's the overwhelming common case this transform exists to optimize, and this
+* transform has no type checker available to verify any of those further. This only catches the
+* subset of "not callable" that's provable from syntax alone.
+*/
+function isObviouslyNotCallable(expr) {
+	if (ts.isIdentifier(expr) && expr.text === "undefined") return true;
+	switch (expr.kind) {
+		case ts.SyntaxKind.NullKeyword:
+		case ts.SyntaxKind.TrueKeyword:
+		case ts.SyntaxKind.FalseKeyword: return true;
+		default: return ts.isNumericLiteral(expr) || ts.isStringLiteral(expr) || ts.isBigIntLiteral(expr);
+	}
+}
 function getEventHandlers(child) {
 	const attrs = ts.isJsxElement(child) ? child.openingElement.attributes.properties : child.attributes.properties;
 	const handlers = [];
@@ -1252,7 +1338,8 @@ function getEventHandlers(child) {
 		if (!/^on[A-Z]/.test(name)) continue;
 		const init = attr.initializer;
 		if (!init) return null;
-		if (ts.isJsxExpression(init) && init.expression !== void 0) {
+		if (ts.isJsxExpression(init) && isDefined(init.expression)) {
+			if (isObviouslyNotCallable(init.expression)) return null;
 			handlers.push({
 				name,
 				expr: init.expression
@@ -1268,8 +1355,8 @@ function hasAsChild(opening) {
 	for (const attr of opening.attributes.properties) {
 		if (!ts.isJsxAttribute(attr)) continue;
 		if (jsxAttrName(attr) !== "asChild") continue;
-		if (attr.initializer === void 0) return true;
-		if (ts.isJsxExpression(attr.initializer) && attr.initializer.expression !== void 0 && attr.initializer.expression.kind === ts.SyntaxKind.TrueKeyword) return true;
+		if (isUndefined(attr.initializer)) return true;
+		if (ts.isJsxExpression(attr.initializer) && isDefined(attr.initializer.expression) && attr.initializer.expression.kind === ts.SyntaxKind.TrueKeyword) return true;
 	}
 	return false;
 }
@@ -1296,13 +1383,49 @@ function getTagName(child) {
 	return ts.isIdentifier(tag) ? tag.text : void 0;
 }
 /**
+* Builds the merged `className` expression.
+*
+* `_p.className` can genuinely be `undefined` at runtime — `resolveClasses`
+* (`lib/styling/src/create-class-pipeline.ts`) resolves to `undefined`, not `''`, for a component
+* with no base/variant classes and no caller-supplied `className` (confirmed by reading that
+* function directly, not assumed). An unconditional `_p.className + ' childCls'` would then
+* concatenate onto `undefined`, producing the literal string `"undefined childCls"` on the DOM —
+* a real bug this guard closes, not defensive styling. Generates
+* `_p.className ? `${_p.className} childCls` : 'childCls'`.
+*/
+function buildClassNameMerge(factory, childClassName) {
+	const pClassName = () => factory.createPropertyAccessExpression(factory.createIdentifier("_p"), "className");
+	const whenTrue = factory.createTemplateExpression(factory.createTemplateHead(""), [factory.createTemplateSpan(pClassName(), factory.createTemplateTail(` ${childClassName}`))]);
+	const whenFalse = factory.createStringLiteral(childClassName);
+	return factory.createConditionalExpression(pClassName(), factory.createToken(ts.SyntaxKind.QuestionToken), whenTrue, factory.createToken(ts.SyntaxKind.ColonToken), whenFalse);
+}
+/**
+* Builds the merged `style` object expression: `{ ..._p.style, ...childStyle }` — the child's own
+* object-literal properties are inlined directly after the `_p.style` spread when the child's
+* style is itself an object literal (readable output, e.g. `{ ..._p.style, color: 'red' }`);
+* a non-literal style expression (a variable reference) is spread instead, since its own shape
+* isn't known statically.
+*/
+function buildStyleMerge(factory, styleExpr) {
+	const pStyleSpread = factory.createSpreadAssignment(factory.createPropertyAccessExpression(factory.createIdentifier("_p"), "style"));
+	if (ts.isObjectLiteralExpression(styleExpr)) return factory.createObjectLiteralExpression([pStyleSpread, ...styleExpr.properties], false);
+	return factory.createObjectLiteralExpression([pStyleSpread, factory.createSpreadAssignment(styleExpr)], false);
+}
+/** Builds one composed event-handler arrow function: `(_e) => { (childHandler)(_e); _p.name?.(_e); }` —
+*  the child's own handler always runs, then the parent's (if any) via an optional-chain call, so
+*  a parent that never set this handler doesn't throw. */
+function buildEventMerge(factory, name, childHandlerExpr) {
+	const eParam = factory.createParameterDeclaration(void 0, void 0, "_e");
+	const callChild = factory.createExpressionStatement(factory.createCallExpression(factory.createParenthesizedExpression(childHandlerExpr), void 0, [factory.createIdentifier("_e")]));
+	const callParent = factory.createExpressionStatement(factory.createCallChain(factory.createPropertyAccessExpression(factory.createIdentifier("_p"), name), factory.createToken(ts.SyntaxKind.QuestionDotToken), void 0, [factory.createIdentifier("_e")]));
+	return factory.createArrowFunction(void 0, void 0, [eParam], void 0, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), factory.createBlock([callChild, callParent], true));
+}
+/**
 * Builds the attribute list for the transformed parent, omitting `asChild`
 * and adding `render={(_p) => <childTag ...childAttrs {..._p} />}`.
 *
-* Merged props are placed after the `{..._p}` spread so they override _p:
-* - Static `className` → `className={_p.className + ' childCls'}`
-* - `style` → `style={{..._p.style, ...childStyleExpr}}`
-* - `on*` handlers → `onClick={(_e) => { (childHandler)(_e); _p.onClick?.(_e); }}`
+* Merged props are placed after the `{..._p}` spread so they override _p — see
+* `buildClassNameMerge`/`buildStyleMerge`/`buildEventMerge` for each merge's own shape.
 */
 function buildTransformedAttributes(factory, original, child, tagName, clsResult, styleInfo, handlers) {
 	const parentAttrs = original.attributes.properties.filter((attr) => !(ts.isJsxAttribute(attr) && jsxAttrName(attr) === "asChild"));
@@ -1313,25 +1436,9 @@ function buildTransformedAttributes(factory, original, child, tagName, clsResult
 	const childContent = ts.isJsxElement(child) ? child.children : void 0;
 	const spreadProp = factory.createJsxSpreadAttribute(factory.createIdentifier("_p"));
 	const extraAttrs = [];
-	if (hasStaticCls && clsResult.value !== "") {
-		const mergedExpr = factory.createBinaryExpression(factory.createPropertyAccessExpression(factory.createIdentifier("_p"), "className"), ts.SyntaxKind.PlusToken, factory.createStringLiteral(` ${clsResult.value}`));
-		extraAttrs.push(factory.createJsxAttribute(factory.createIdentifier("className"), factory.createJsxExpression(void 0, mergedExpr)));
-	}
-	if (hasStyle) {
-		const styleExpr = styleInfo.expr;
-		const pStyleSpread = factory.createSpreadAssignment(factory.createPropertyAccessExpression(factory.createIdentifier("_p"), "style"));
-		let mergedStyleObj;
-		if (ts.isObjectLiteralExpression(styleExpr)) mergedStyleObj = factory.createObjectLiteralExpression([pStyleSpread, ...styleExpr.properties], false);
-		else mergedStyleObj = factory.createObjectLiteralExpression([pStyleSpread, factory.createSpreadAssignment(styleExpr)], false);
-		extraAttrs.push(factory.createJsxAttribute(factory.createIdentifier("style"), factory.createJsxExpression(void 0, mergedStyleObj)));
-	}
-	for (const { name, expr } of handlers) {
-		const eParam = factory.createParameterDeclaration(void 0, void 0, "_e");
-		const callChild = factory.createExpressionStatement(factory.createCallExpression(factory.createParenthesizedExpression(expr), void 0, [factory.createIdentifier("_e")]));
-		const callParent = factory.createExpressionStatement(factory.createCallChain(factory.createPropertyAccessExpression(factory.createIdentifier("_p"), name), factory.createToken(ts.SyntaxKind.QuestionDotToken), void 0, [factory.createIdentifier("_e")]));
-		const composedFn = factory.createArrowFunction(void 0, void 0, [eParam], void 0, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), factory.createBlock([callChild, callParent], true));
-		extraAttrs.push(factory.createJsxAttribute(factory.createIdentifier(name), factory.createJsxExpression(void 0, composedFn)));
-	}
+	if (hasStaticCls && clsResult.value !== "") extraAttrs.push(factory.createJsxAttribute(factory.createIdentifier("className"), factory.createJsxExpression(void 0, buildClassNameMerge(factory, clsResult.value))));
+	if (hasStyle) extraAttrs.push(factory.createJsxAttribute(factory.createIdentifier("style"), factory.createJsxExpression(void 0, buildStyleMerge(factory, styleInfo.expr))));
+	for (const { name, expr } of handlers) extraAttrs.push(factory.createJsxAttribute(factory.createIdentifier(name), factory.createJsxExpression(void 0, buildEventMerge(factory, name, expr))));
 	const childAttrsWithSpread = factory.createJsxAttributes([
 		...childOpeningAttrs,
 		spreadProp,
@@ -1351,8 +1458,8 @@ function createAsChildTransformer(factory) {
 		function visit(node) {
 			if (!ts.isJsxElement(node)) return ts.visitEachChild(node, visit, context);
 			const opening = node.openingElement;
-			const tagName = ts.isIdentifier(opening.tagName) ? opening.tagName.text : void 0;
-			if (!tagName || !isUpperCase(tagName)) return ts.visitEachChild(node, visit, context);
+			const tagName = getJsxTagName(opening.tagName);
+			if (!tagName || !isComponentTagName(tagName)) return ts.visitEachChild(node, visit, context);
 			if (!hasAsChild(opening)) return ts.visitEachChild(node, visit, context);
 			const child = getSingleElementChild(node);
 			if (!child) return ts.visitEachChild(node, visit, context);
@@ -1392,45 +1499,9 @@ function transformAsChild(source) {
 }
 //#endregion
 //#region ../../plugins/vite/src/static-compose.ts
-/**
-* Compile-time static composition transform.
-*
-* For factory calls that have `precomputedClasses` injected (by classExtractPlugin),
-* replaces static JSX usage sites with direct element creation — bypassing the
-* runtime render pipeline entirely.
-*
-* Example:
-*   // Source (same file defines Button and uses it)
-*   const Button = createContractComponent({ tag: 'button', styling: { precomputedClasses: {...} } })
-*   <Button size="lg">Click</Button>
-*
-*   // Output
-*   const Button = createContractComponent({ ... }) // unchanged — still exported
-*   <button className="btn btn-lg">Click</button>  // inlined!
-*
-* **Eligibility conditions** — a usage site is inlined only when:
-*   1. The component is defined in the same file or imported from a file already
-*      transformed by this plugin, with `precomputedClasses` injected
-*   2. No `as`, `asChild`, `render`, or spread attributes at the usage site
-*   3. All variant props are static string literals
-*   4. `className` is absent or a static string literal
-*   5. The factory config has no top-level `defaults` and no `enforcement`
-*      (either would require runtime prop normalization that inlining skips)
-*
-* The factory call itself is intentionally left in the output so the component
-* remains exportable for cross-file consumption that falls back to the runtime
-* path. Dead-code elimination at the bundler level can remove it when no
-* runtime path remains.
-*
-* **Cross-file known limitations:**
-* - Barrel re-exports are not resolved (import from index.ts re-exporting ./Button)
-* - Aliased imports are not matched (`export { Btn as Button }` won't be found)
-* - Dev-mode ordering: definition file may not yet be transformed when consumer runs
-* All three degrade gracefully to the runtime path — no error, no broken output.
-*/
 /** Returns the text of a string literal node, or undefined. */
 function asStringLiteral(node) {
-	return node !== void 0 && ts.isStringLiteral(node) ? node.text : void 0;
+	return isDefined(node) && ts.isStringLiteral(node) ? node.text : void 0;
 }
 /**
 * Walks the source file and extracts metadata for each same-file factory call
@@ -1457,47 +1528,73 @@ function extractStaticComponents(source, calleeNames) {
 		const precomputedNode = asObject(getProperty(stylingObj, "precomputedClasses"));
 		if (!precomputedNode) return;
 		const precomputedClasses = {};
-		if (iterate.find(precomputedNode.properties, (prop) => {
-			if (!ts.isPropertyAssignment(prop)) return true;
+		let sawMalformedEntry = false;
+		for (const prop of precomputedNode.properties) {
+			if (!ts.isPropertyAssignment(prop)) {
+				sawMalformedEntry = true;
+				break;
+			}
 			const { initializer, name } = prop;
 			const key = ts.isStringLiteral(name) ? name.text : void 0;
 			const val = asStringLiteral(initializer);
-			if (key === void 0 || val === void 0) return true;
+			if (isUndefined(key) || isUndefined(val)) {
+				sawMalformedEntry = true;
+				break;
+			}
 			precomputedClasses[key] = val;
-			return null;
-		})) return;
-		if (getProperty(arg, "defaults") !== void 0) return;
-		if (getProperty(arg, "enforcement") !== void 0) return;
+		}
+		if (sawMalformedEntry) return;
+		if (isDefined(getProperty(arg, "defaults"))) return;
+		if (isDefined(getProperty(arg, "enforcement"))) return;
 		const variantKeys = /* @__PURE__ */ new Set();
 		const variantsObj = asObject(getProperty(stylingObj, "variants"));
 		if (variantsObj) iterate.forEach(variantsObj.properties, (prop) => {
 			if (ts.isPropertyAssignment(prop) && (ts.isIdentifier(prop.name) || ts.isStringLiteral(prop.name))) variantKeys.add(prop.name.text);
 		});
+		const strippedProps = /* @__PURE__ */ new Set([
+			...variantKeys,
+			"as",
+			"asChild",
+			"render",
+			"className"
+		]);
 		result.set(varName, {
 			defaultTag,
 			variantKeys,
-			precomputedClasses
+			precomputedClasses,
+			strippedProps
 		});
 	});
 	return result;
 }
-/** Reads the value of a named JSX attribute from the attribute list: absent, a static string, or dynamic. */
-function readAttrValue(attrs, name) {
+/**
+* Reads the value of a named JSX attribute from the attribute list: absent, a static string, or
+* dynamic.
+*
+* A bare shorthand attribute (`<Button size />`) is `'dynamic'`, not `'static'` with an empty
+* string: JSX gives a bare attribute the runtime value `true` (boolean), never `''`. Every
+* consumer of this function that reasons about a variant/tag/className value only ever expects a
+* *string* — `true` can never satisfy a `size:s:sm`-style precomputed-class cache key or a real
+* variant's string-keyed value map, so treating it as truly unknown (rather than silently
+* collapsing it to `''`) is both the more accurate representation of what the runtime actually
+* sees and the conservative choice: it bails to the runtime path instead of risking a wrong
+* inlined class string for a `variants: { size: { '': ... } }`-shaped config, where the old `''`
+* representation could have coincidentally matched a real (if unusual) empty-string variant
+* value.
+*/
+function readStaticAttribute(attrs, name) {
 	for (const attr of attrs) {
 		if (!ts.isJsxAttribute(attr)) continue;
 		if (!(ts.isIdentifier(attr.name) && attr.name.text === name)) continue;
 		const init = attr.initializer;
-		if (!init) return {
-			kind: "string",
-			value: ""
-		};
+		if (!init) return { kind: "dynamic" };
 		if (ts.isStringLiteral(init)) return {
-			kind: "string",
+			kind: "static",
 			value: init.text
 		};
 		if (ts.isJsxExpression(init) && init.expression !== void 0) {
 			if (ts.isStringLiteral(init.expression)) return {
-				kind: "string",
+				kind: "static",
 				value: init.expression.text
 			};
 			return { kind: "dynamic" };
@@ -1519,16 +1616,16 @@ function createStaticCompositionTransformer(factory, components, onInlined) {
 			if (!info) return ts.visitEachChild(node, visit, context);
 			const attrList = isOpen ? node.openingElement.attributes.properties : node.attributes.properties;
 			if (attrList.some(ts.isJsxSpreadAttribute)) return ts.visitEachChild(node, visit, context);
-			if (readAttrValue(attrList, "asChild").kind !== "absent") return ts.visitEachChild(node, visit, context);
-			if (readAttrValue(attrList, "render").kind !== "absent") return ts.visitEachChild(node, visit, context);
-			const asVal = readAttrValue(attrList, "as");
+			if (readStaticAttribute(attrList, "asChild").kind !== "absent") return ts.visitEachChild(node, visit, context);
+			if (readStaticAttribute(attrList, "render").kind !== "absent") return ts.visitEachChild(node, visit, context);
+			const asVal = readStaticAttribute(attrList, "as");
 			if (asVal.kind === "dynamic") return ts.visitEachChild(node, visit, context);
-			const outputTag = asVal.kind === "string" ? asVal.value : info.defaultTag;
+			const outputTag = asVal.kind === "static" ? asVal.value : info.defaultTag;
 			const variantProps = {};
 			for (const propName of info.variantKeys) {
-				const val = readAttrValue(attrList, propName);
+				const val = readStaticAttribute(attrList, propName);
 				if (val.kind === "absent") continue;
-				if (val.kind === "string") {
+				if (val.kind === "static") {
 					variantProps[propName] = val.value;
 					continue;
 				}
@@ -1536,23 +1633,16 @@ function createStaticCompositionTransformer(factory, components, onInlined) {
 			}
 			const cacheKey = buildCacheKey(variantProps);
 			const baseClass = info.precomputedClasses[cacheKey];
-			if (baseClass === void 0) return ts.visitEachChild(node, visit, context);
-			const clsVal = readAttrValue(attrList, "className");
+			if (isUndefined(baseClass)) return ts.visitEachChild(node, visit, context);
+			const clsVal = readStaticAttribute(attrList, "className");
 			if (clsVal.kind === "dynamic") return ts.visitEachChild(node, visit, context);
-			const finalClass = clsVal.kind === "string" && clsVal.value ? `${baseClass} ${clsVal.value}` : baseClass;
-			const strip = /* @__PURE__ */ new Set([
-				...info.variantKeys,
-				"as",
-				"asChild",
-				"render",
-				"className"
-			]);
+			const finalClass = clsVal.kind === "static" && clsVal.value ? `${baseClass} ${clsVal.value}` : baseClass;
 			const outputAttrs = [factory.createJsxAttribute(factory.createIdentifier("className"), factory.createStringLiteral(finalClass))];
 			for (const attr of attrList) {
 				if (ts.isJsxSpreadAttribute(attr)) continue;
 				if (!ts.isJsxAttribute(attr)) continue;
 				const name = ts.isIdentifier(attr.name) ? attr.name.text : "";
-				if (strip.has(name)) continue;
+				if (info.strippedProps.has(name)) continue;
 				outputAttrs.push(attr);
 			}
 			const newAttrs = factory.createJsxAttributes(outputAttrs);