@tamagui/static 3.0.0-beta.924.1 → 3.0.1

package/dist/esm/compilerHost.mjs

@@ -1,6 +1,7 @@
 import { collectLeaves, zeroRuleMessage, zeroThemeBoundaryMessage } from "@tamagui/compiler-core";
 import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectRules, StyleObjectValue, stylePropsAll, stylePropsInput, stylePropsText, validStyles } from "@tamagui/helpers";
-import { ATTRIBUTES, DISPLAY_WEB_RESET, EVENTS, NATIVE_BACKING, NATIVE_BLOCK_DEFAULTS, NATIVE_ELEMENT_DEFAULTS, NATIVE_FLEX_DEFAULTS, NATIVE_INPUT_TYPES, NATIVE_PRIMITIVE_MODULE, TAGS, TAG_WEB_DEFAULTS } from "@tamagui/dom";
+import { ATTRIBUTES, EVENTS, NATIVE_BACKING, NATIVE_BLOCK_DEFAULTS, NATIVE_ELEMENT_DEFAULTS, NATIVE_FLEX_DEFAULTS, NATIVE_INPUT_TYPES, NATIVE_PRIMITIVE_MODULE, TAGS, TAG_WEB_DEFAULTS } from "@tamagui/dom";
+import { resolveTransition, toCSSTransition } from "@tamagui/animation-helpers";
 import { createModifierRegistry, parseTransition, parseValue } from "@tamagui/style-grammar/tooling";
 import { isValidStyleKey } from "@tamagui/web";
 import { concatClassName } from "./extractor/concatClassName.mjs";
@@ -39,13 +40,6 @@ const nativeRuntimeOnlyStyleProperties = /* @__PURE__ */ new Set(["textIndent"])
 function componentKey(resolvedId, exportName) {
 	return `${resolvedId}#${exportName}`;
 }
-function cssFromRules(rules) {
-	return Object.values(rules).flatMap((styleObject) => {
-		const identifier = styleObject?.[StyleObjectIdentifier];
-		const styleRules = styleObject?.[StyleObjectRules];
-		return identifier && Array.isArray(styleRules) ? styleRules : [];
-	});
-}
 function jsxClassName(value) {
 	return `className=${JSON.stringify(value)}`;
 }
@@ -69,7 +63,16 @@ function extractedStyleArtifacts(split, props, config, includeRuntimeBase = true
 	const viewClassName = typeof split.viewProps?.className === "string" ? split.viewProps.className : "";
 	const classNameWithoutCaller = callerClassName && viewClassName.endsWith(callerClassName) ? viewClassName.slice(0, -callerClassName.length).trimEnd() : viewClassName;
 	const rules = split.rulesToInsert ?? {};
-	const mediaNames = new Set(Object.keys(config.media ?? {}));
+	const mediaNames = Object.keys(config.media ?? {});
+	const rulesByIdentifier = /* @__PURE__ */ new Map();
+	for (const styleObject of Object.values(rules)) {
+		const identifier = styleObject?.[StyleObjectIdentifier];
+		const styleRules = styleObject?.[StyleObjectRules];
+		if (typeof identifier !== "string" || !Array.isArray(styleRules)) continue;
+		const existing = rulesByIdentifier.get(identifier);
+		if (existing) existing.push(...styleRules);
+		else rulesByIdentifier.set(identifier, [...styleRules]);
+	}
 	const pseudoNames = [
 		"hover",
 		"press",
@@ -95,14 +98,14 @@ function extractedStyleArtifacts(split, props, config, includeRuntimeBase = true
 	})]);
 	for (const identifier of identifiers) {
 		const key = classKeys.get(identifier) ?? "";
-		const css2 = cssFromRules(Object.fromEntries(Object.entries(rules).filter(([, styleObject]) => styleObject?.[StyleObjectIdentifier] === identifier))).join("");
+		const css2 = (rulesByIdentifier.get(identifier) ?? []).join("");
 		if (identifier.startsWith("t_group_")) {
 			buckets.group.push(identifier);
 		} else if (pseudoNames.some((name) => key.endsWith(`-${name}`))) {
 			buckets.pseudo.push(identifier);
 		} else if (css2.includes(".t_")) {
 			buckets.theme.push(identifier);
-		} else if ([...mediaNames].some((name) => key.endsWith(`-${name}`))) {
+		} else if (mediaNames.some((name) => key.endsWith(`-${name}`))) {
 			buckets.media.push(identifier);
 		} else {
 			buckets.normal.push(identifier);
@@ -118,7 +121,7 @@ function extractedStyleArtifacts(split, props, config, includeRuntimeBase = true
 	const orderedSet = new Set(orderedIdentifiers);
 	const baseViewClassName = includeRuntimeBase ? classNameWithoutCaller.split(/\s+/).filter((token) => token && !orderedSet.has(token)).join(" ") : "";
 	const css = orderedIdentifiers.flatMap((identifier) => {
-		const identifierRules = cssFromRules(Object.fromEntries(Object.entries(rules).filter(([, styleObject]) => styleObject?.[StyleObjectIdentifier] === identifier)));
+		const identifierRules = rulesByIdentifier.get(identifier) ?? [];
 		return buckets.theme.includes(identifier) ? identifierRules.map((rule) => rule.replace(":root:root:root.t_", ":root:root:root:root.t_")) : identifierRules;
 	});
 	return {
@@ -207,7 +210,6 @@ const compilerStyleProps = /* @__PURE__ */ new Set([
 	"group",
 	"transition",
 	"animation",
-	"animateOnly",
 	"animatePresence",
 	"animatedBy",
 	"fontFamily",
@@ -216,7 +218,6 @@ const compilerStyleProps = /* @__PURE__ */ new Set([
 const runtimeAnimationProps = /* @__PURE__ */ new Set([
 	"transition",
 	"animation",
-	"animateOnly",
 	"animatePresence",
 	"animatedBy"
 ]);
@@ -489,6 +490,77 @@ const nativePointerEventProps = /* @__PURE__ */ new Set([
 	"onPointerMove",
 	"onPointerUp"
 ]);
+const nativeShorthandFamilies = [
+	[
+		"padding",
+		[
+			"paddingTop",
+			"paddingRight",
+			"paddingBottom",
+			"paddingLeft"
+		],
+		/^padding/
+	],
+	[
+		"margin",
+		[
+			"marginTop",
+			"marginRight",
+			"marginBottom",
+			"marginLeft"
+		],
+		/^margin/
+	],
+	[
+		"borderWidth",
+		[
+			"borderTopWidth",
+			"borderRightWidth",
+			"borderBottomWidth",
+			"borderLeftWidth"
+		],
+		/^border.*Width$/
+	],
+	[
+		"borderColor",
+		[
+			"borderTopColor",
+			"borderRightColor",
+			"borderBottomColor",
+			"borderLeftColor"
+		],
+		/^border.*Color$/
+	],
+	[
+		"borderRadius",
+		[
+			"borderTopLeftRadius",
+			"borderTopRightRadius",
+			"borderBottomRightRadius",
+			"borderBottomLeftRadius"
+		],
+		/^border.*Radius$/
+	]
+];
+function collapseNativeShorthands(style) {
+	if (!staticObject(style)) return style;
+	const keys = Object.keys(style);
+	const collapsed = /* @__PURE__ */ new Map();
+	for (const [shorthand, sides, family] of nativeShorthandFamilies) {
+		const value = style[sides[0]];
+		if (value !== void 0 && !(shorthand in style) && sides.every((side) => style[side] === value) && keys.filter((key) => family.test(key)).length === sides.length) {
+			for (const side of sides) collapsed.set(side, shorthand);
+		}
+	}
+	if (!collapsed.size) return style;
+	const out = {};
+	for (const key of keys) {
+		const shorthand = collapsed.get(key);
+		if (!shorthand) out[key] = style[key];
+		else if (!(shorthand in out)) out[shorthand] = style[key];
+	}
+	return out;
+}
 function isSerializableNativeStyle(value) {
 	if (value == null || typeof value === "number" || typeof value === "boolean") {
 		return true;
@@ -500,6 +572,35 @@ function isSerializableNativeStyle(value) {
 	if (prototype !== Object.prototype && prototype !== null) return false;
 	return Object.values(value).every(isSerializableNativeStyle);
 }
+function nativeTextMetrics(result) {
+	const value = result?.nativeTextMetrics;
+	if (!staticObject(value)) return null;
+	const { fontSize, lineHeight } = value;
+	if (fontSize !== void 0 && typeof fontSize !== "number" || lineHeight !== void 0 && typeof lineHeight !== "number" && typeof lineHeight !== "string") {
+		return null;
+	}
+	return fontSize === void 0 && lineHeight === void 0 ? null : value;
+}
+function mergeNativeTextMetrics(current, next) {
+	if (!current) return next;
+	if (!next) return current;
+	return {
+		fontSize: next.fontSize ?? current.fontSize,
+		lineHeight: next.lineHeight ?? current.lineHeight
+	};
+}
+function hasChildThatMayRenderReactNode(element) {
+	return element.entries.some((entry) => {
+		if (entry.kind !== "child" || entry.value.kind === "empty") return false;
+		if (entry.value.kind === "element") return true;
+		if (entry.value.kind === "bailout") return entry.value.dynamic === null;
+		if (entry.value.kind === "conditional") {
+			return collectLeaves(entry.value.tree).some(({ value }) => value === void 0 || value !== null && typeof value === "object");
+		}
+		if (entry.value.kind !== "static") return true;
+		return entry.value.value !== null && typeof entry.value.value === "object";
+	});
+}
 function unusedIdentifier(source, base) {
 	let candidate = base;
 	let suffix = 0;
@@ -764,6 +865,7 @@ function createTamaguiCompilerHost(options) {
 	};
 	const configuredAnimationDriver = options.tamaguiConfig.animations;
 	const configuredCssAnimationDriver = platform === "web" && configuredAnimationDriver?.outputStyle === "css" && !options.tamaguiConfig.animationDrivers ? configuredAnimationDriver : null;
+	const nativeTextMetricsByElement = /* @__PURE__ */ new WeakMap();
 	const resolveStaticCssTransition = (value, transitionPresets) => {
 		if (platform !== "web" || typeof value !== "string") return null;
 		const transitionPresetNames = new Set(Object.keys(transitionPresets));
@@ -775,20 +877,19 @@ function createTamaguiCompilerHost(options) {
 		for (const payload of payloads) {
 			const transition = parseTransition(payload, transitionPresetNames);
 			if (!transition.ok) return null;
-			if (transition.value.kind === "global" || transition.value.entries.every((entry) => entry.timing.type === "css")) {
+			if (transition.value.kind === "global") {
 				resolvedPayloads.push(payload);
 				continue;
 			}
-			if (transition.value.entries.length !== 1 || transition.value.entries[0].timing.type !== "preset") {
-				return null;
-			}
-			const preset = transitionPresets[transition.value.entries[0].timing.name];
-			if (typeof preset !== "string") return null;
-			const parsedPreset = parseTransition(preset);
-			if (!parsedPreset.ok || parsedPreset.value.kind !== "transition" || parsedPreset.value.entries.length !== 1 || parsedPreset.value.entries[0].property !== "all" || parsedPreset.value.entries[0].timing.type !== "css") {
-				return null;
+			const resolved2 = resolveTransition(payload, { animations: transitionPresets });
+			if (resolved2.diagnostics.length > 0) return null;
+			if (!resolved2.fused) {
+				resolvedPayloads.push(payload);
+				continue;
 			}
-			resolvedPayloads.push(`all ${preset}`);
+			const css = toCSSTransition(resolved2);
+			if (css === void 0) return null;
+			resolvedPayloads.push(css);
 		}
 		let payloadIndex = 0;
 		const resolved = [];
@@ -838,7 +939,6 @@ function createTamaguiCompilerHost(options) {
 		const base = (textLike ? core.Text : core.View)?.staticConfig;
 		if (!base) return null;
 		const platformDefaults = platform === "web" ? {
-			...DISPLAY_WEB_RESET[row.display],
 			...row.defaults,
 			...TAG_WEB_DEFAULTS[tag]
 		} : {
@@ -853,6 +953,7 @@ function createTamaguiCompilerHost(options) {
 			displayName: tag,
 			staticConfig: normalizeStaticConfig({
 				...base,
+				isDOM: true,
 				isInput: row.backing === "textinput",
 				validStyles: {
 					...validStyles,
@@ -916,7 +1017,7 @@ function createTamaguiCompilerHost(options) {
 		const defaultProps = resolved.staticConfig.defaultProps ?? {};
 		return {
 			key: resolved.key,
-			canFlatten: resolved.staticConfig.acceptsClassName !== false && !resolved.staticConfig.neverFlatten && !resolved.staticConfig.context,
+			canFlatten: resolved.staticConfig.acceptsClassName !== false && !resolved.staticConfig.isHOC && !resolved.staticConfig.neverFlatten && !resolved.staticConfig.context,
 			staticConfig: resolved.staticConfig,
 			displayName: resolved.displayName,
 			...dom && { domTag: dom.tag },
@@ -933,7 +1034,6 @@ function createTamaguiCompilerHost(options) {
 		"group",
 		"transition",
 		"animation",
-		"animateOnly",
 		"animatePresence",
 		"animatedBy",
 		"render"
@@ -948,11 +1048,20 @@ function createTamaguiCompilerHost(options) {
 		if (dynamic?.type !== "string" || !dynamic.values?.length) return null;
 		return dynamic.values.map(String);
 	};
+	const nativeDynamicShape = (name, component, dynamic) => {
+		if (!dynamic || !canLowerConditionalStyleProp(name, component)) return null;
+		if (dynamic.values?.length) return "domain";
+		if (dynamic.type === "number" && directStyleName(name, component)) return "number";
+		return null;
+	};
 	const conditionalClassEntry = (entry, component) => entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component) || frontendClassDomain(entry, component) !== null;
+	const expandStyleShorthand = (name) => options.tamaguiConfig.shorthands?.[name] ?? name;
 	const isInvalidHostStyleProp = (name, component) => {
+		const expanded = expandStyleShorthand(name);
 		const staticConfig = component.staticConfig;
+		if (staticConfig.inlineProps?.has(name) || staticConfig.variants?.[name]) return false;
 		const validStyles$1 = staticConfig.validStyles || (staticConfig.isInput ? stylePropsInput : staticConfig.isText ? stylePropsText : validStyles);
-		return name in stylePropsAll && !isValidStyleKey(name, validStyles$1);
+		return expanded in stylePropsAll && !isValidStyleKey(expanded, validStyles$1);
 	};
 	const directStyleName = (name, component) => {
 		if (compilerStyleProps.has(name) || name === "style") {
@@ -960,7 +1069,7 @@ function createTamaguiCompilerHost(options) {
 		}
 		const staticConfig = component.staticConfig;
 		if (staticConfig.variants?.[name]) return null;
-		const expanded = options.tamaguiConfig.shorthands?.[name] ?? name;
+		const expanded = expandStyleShorthand(name);
 		return staticConfig.validStyles?.[expanded] ? expanded : null;
 	};
 	const resolveSplitStyles = (props, staticConfig, animationDriver, displayName) => {
@@ -1093,7 +1202,7 @@ function createTamaguiCompilerHost(options) {
 	return {
 		resolveComponent: resolve,
 		isStyleProp,
-		canLowerDynamicStyleProp(name, component, valueKind) {
+		canLowerDynamicStyleProp(name, component, valueKind, dynamic) {
 			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) {
 				return true;
 			}
@@ -1103,7 +1212,7 @@ function createTamaguiCompilerHost(options) {
 			if (!options.disablePartialExtraction && platform === "web" && isFrontendClassName(name, component)) {
 				return true;
 			}
-			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
+			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && (directStyleName(name, component) === "opacity" || valueKind === "bailout" && nativeDynamicShape(name, component, dynamic) !== null));
 		},
 		developmentDebugInstrumentation,
 		lowerCandidate(input) {
@@ -1198,7 +1307,7 @@ function createTamaguiCompilerHost(options) {
 			if (styleObjectStatic) props.style = styleObjectStatic;
 			const dynamicStyleEntries = [...input.element.entries.filter((entry) => entry.kind === "prop" && (entry.value.kind === "bailout" || entry.value.kind === "conditional") && isStyleProp(entry.name, component)), ...styleMemberEntries];
 			{
-				const needsRuntimeMapping = (name) => runtimeEventProps.has(name) || platform === "native" && !component.domTag && nativePointerEventProps.has(name);
+				const needsRuntimeMapping = (name) => runtimeEventProps.has(name) || platform === "web" && name === "onLayout" || platform === "native" && !component.domTag && nativePointerEventProps.has(name);
 				const directRuntimeEvent = input.element.entries.find((entry) => entry.kind === "prop" && needsRuntimeMapping(entry.name));
 				const runtimeEvent = directRuntimeEvent?.kind === "prop" ? directRuntimeEvent.name : Object.keys(props).find(needsRuntimeMapping);
 				if (runtimeEvent) {
@@ -1208,13 +1317,6 @@ function createTamaguiCompilerHost(options) {
 			const animationDefaultProps = component.staticConfig.defaultProps ?? {};
 			const animationProps = core.mergeProps(animationDefaultProps, props);
 			const animationNames = /* @__PURE__ */ new Set([...input.element.entries.flatMap((entry) => entry.kind === "prop" && runtimeAnimationProps.has(entry.name) ? [entry.name] : []), ...Object.keys(animationProps).filter((name) => runtimeAnimationProps.has(name) && animationProps[name] !== void 0)]);
-			const animateOnlyEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "animateOnly");
-			if (animationNames.has("animateOnly")) {
-				return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", animateOnlyEntry?.span, {
-					rule: 5,
-					message: zeroRuleMessage(5, { detail: animateOnlyEntry ? `animateOnly on ${input.element.component.name}` : `animateOnly in the styled() definition of ${input.element.component.name}` })
-				});
-			}
 			const transitionEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "transition");
 			const animatedBy = typeof animationProps.animatedBy === "string" ? animationProps.animatedBy.trim() : null;
 			const namedAnimationDriver = animatedBy === null ? null : options.tamaguiConfig.animationDrivers?.[animatedBy];
@@ -1225,7 +1327,7 @@ function createTamaguiCompilerHost(options) {
 				props.transition = resolvedCssTransition;
 			}
 			const animatedByNeedsRuntime = animationNames.has("animatedBy") && !animationNames.has("transition") && (dynamicStyleEntries.length > 0 || Object.keys(animationProps).some((name) => name !== "animatedBy" && (isStyleProp(name, component) && typeof animationProps[name] === "string" && animationProps[name].includes(":") || name === "animationConfig" || name === "forceStyle" || name === "onTransition")));
-			const runtimeAnimationRequired = animationNames.has("transition") && resolvedCssTransition === null || [...animationNames].some((name) => name !== "transition" && name !== "animatedBy" && name !== "animateOnly") || animatedByNeedsRuntime;
+			const runtimeAnimationRequired = animationNames.has("transition") && resolvedCssTransition === null || [...animationNames].some((name) => name !== "transition" && name !== "animatedBy") || animatedByNeedsRuntime;
 			let dynamicHostStyleProperties = null;
 			let laneAEntries = [];
 			const laneAOwners = /* @__PURE__ */ new Set();
@@ -1419,7 +1521,7 @@ function createTamaguiCompilerHost(options) {
 					message: zeroRuleMessage(5, { detail: `the animation configured on ${input.element.component.name}` })
 				});
 			}
-			const supportsNativeDynamicStyles = platform === "native" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicStyleEntries.every((entry) => entry.kind === "prop" && (directStyleName(entry.name, component) === "opacity" || entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component)));
+			const supportsNativeDynamicStyles = platform === "native" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicStyleEntries.every((entry) => entry.kind === "prop" && (directStyleName(entry.name, component) === "opacity" || entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component) || entry.value.kind === "bailout" && nativeDynamicShape(entry.name, component, entry.value.dynamic) !== null));
 			if (dynamicStyleEntries.length > 0 && !laneACoversAll && !supportsNativeDynamicStyles && !supportsWebConditionalClasses) {
 				const entry = dynamicStyleEntries[0];
 				return bailout(input, "local/dynamic-style-value", `Style prop ${entry.kind === "prop" ? entry.name : "unknown"} could not be safely extracted`, entry.span);
@@ -1514,6 +1616,21 @@ function createTamaguiCompilerHost(options) {
 			if (!split) {
 				return bailout(input, "local/style-resolution-failed", "getSplitStyles returned no static result");
 			}
+			const nativeMetrics = platform === "native" ? nativeTextMetrics(split) : null;
+			if (nativeMetrics) nativeTextMetricsByElement.set(input.element, nativeMetrics);
+			const hasDynamicFontSize = dynamicStyleEntries.some((entry) => {
+				const name = directStyleName(entry.name, component);
+				return name === "fontFamily" || name === "fontSize";
+			});
+			const hasUnresolvedNativeLineHeight = typeof nativeMetrics?.lineHeight === "number" && nativeMetrics.fontSize === void 0 && !hasDynamicFontSize;
+			const hasDynamicTextMetric = dynamicStyleEntries.some((entry) => {
+				const name = directStyleName(entry.name, component);
+				return name === "fontFamily" || name === "fontSize" || name === "lineHeight" || name === null && !!component.staticConfig.variants?.[entry.name];
+			});
+			const changesInheritedNativeFontSize = nativeMetrics?.fontSize !== void 0 && nativeMetrics.lineHeight === void 0;
+			if (platform === "native" && component.staticConfig.isText && !component.domTag && (hasUnresolvedNativeLineHeight || changesInheritedNativeFontSize || hasChildThatMayRenderReactNode(input.element) && (nativeMetrics !== null || hasDynamicTextMetric) || input.module.elements.some((ancestor) => ancestor !== input.element && ancestor.span.start < input.element.span.start && ancestor.span.end > input.element.span.end && nativeTextMetricsByElement.has(ancestor)))) {
+				return bailout(input, "local/unsupported-target", "Native text metrics need the runtime Text provider for this subtree");
+			}
 			if (split.programLifecycleStyleKeys?.enter?.size || split.programLifecycleStyleKeys?.exit?.size) {
 				return bailout(input, "local/unsupported-target", "Lifecycle value programs remain on the runtime path", input.element.span, {
 					rule: 5,
@@ -1616,14 +1733,15 @@ function createTamaguiCompilerHost(options) {
 					return bailout(input, "local/unsupported-target", "Native style output is not a static serializable value");
 				}
 				const nativeStyleLocal = unusedIdentifier(input.source, `__TamaguiNativeStyle${input.element.span.start}`);
+				const usesNativeFastPath = !!themedStyleKeys && !!options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread");
 				const nativeStyleImports = [{
 					content: `
-function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(nativeStyle ?? {})}); } ${nativeStyleLocal}();`,
+function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify((usesNativeFastPath ? nativeStyle : collapseNativeShorthands(nativeStyle)) ?? {})}); } ${nativeStyleLocal}();`,
 					origin: input.element.component.span
 				}];
 				const nativeStyleSource = `${nativeStyleLocal}._ ?? ${nativeStyleLocal}()`;
 				let nativeFastPath;
-				if (themedStyleKeys && options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread")) {
+				if (usesNativeFastPath) {
 					const mappingLocal = unusedIdentifier(input.source, `__TamaguiNativeMapping${input.element.span.start}`);
 					nativeFastPath = {
 						mappingLocal,
@@ -1647,6 +1765,7 @@ const ${mappingLocal} = ${JSON.stringify(themedStyleKeys)};`,
 					}
 					styleEntries = [.../* @__PURE__ */ new Set([...styleEntries, ...propsResult.consumed])];
 					let nativeDOMStyleSource = nativeStyleSource;
+					let nativeDOMMetrics = nativeMetrics;
 					let runtimeStyleSource = null;
 					if (domStyleProgram?.kind === "prop" && domStyleProgram.value.kind === "dom-style") {
 						const needsRuntime = domStyleProgram.value.items.some((item) => item.value.kind === "static" && staticObject(item.value.value) && (Object.keys(item.value.value).some((property) => nativeRuntimeOnlyStyleProperties.has(property)) || Object.values(item.value.value).some((value) => typeof value === "string" && (flatClausePattern.test(value) || nativeInheritedKeywordPattern.test(value)) || isClauseObjectValue(value))));
@@ -1667,6 +1786,7 @@ const ${mappingLocal} = ${JSON.stringify(themedStyleKeys)};`,
 								if (!isSerializableNativeStyle(itemStyle) || core.containsThemeRef(itemStyle)) {
 									return bailout(input, "local/unsupported-target", "Native style() output is not serializable", item.value.span);
 								}
+								nativeDOMMetrics = mergeNativeTextMetrics(nativeDOMMetrics, nativeTextMetrics(itemSplit));
 								value = JSON.stringify(itemStyle ?? {});
 							}
 							const condition = item.condition ? input.source.slice(item.condition.start, item.condition.end) : null;
@@ -1683,6 +1803,7 @@ const ${mappingLocal} = ${JSON.stringify(themedStyleKeys)};`,
 					const propertyContent = [
 						input.element.form === "jsx" ? `style={${nativeDOMStyleSource}}` : `style: ${nativeDOMStyleSource}`,
 						runtimeStyleSource ? input.element.form === "jsx" ? `__styles={${runtimeStyleSource}}` : `__styles: ${runtimeStyleSource}` : "",
+						nativeDOMMetrics ? serializedProps(input.element.form, [["__textMetrics", JSON.stringify(nativeDOMMetrics)]]) : "",
 						serializedProps(input.element.form, propsResult.additions)
 					].filter(Boolean).join(input.element.form === "jsx" ? " " : ", ");
 					const primitiveTagEdits = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
@@ -1839,7 +1960,45 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 					const conditionalParts = [];
 					const conditionalKeys = /* @__PURE__ */ new Set();
 					const baseStyleForDiff = staticObject(nativeStyleResolved) ? nativeStyleResolved : {};
+					const valueDiff = (entry, value, what) => {
+						const { branchCompleteProps } = propsForConditional(entry, value);
+						const branchSplit = resolveSplitStyles(branchCompleteProps, component.staticConfig, cssAnimationDriver, component.displayName);
+						const branchStyle = branchSplit?.viewProps?.style ?? {};
+						if (!staticObject(branchStyle)) {
+							return `${what} did not resolve to a static native style`;
+						}
+						for (const viewPropsKey of /* @__PURE__ */ new Set([...Object.keys(branchSplit?.viewProps ?? {}), ...Object.keys(split.viewProps ?? {})])) {
+							if (viewPropsKey === "style") continue;
+							if (JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !== JSON.stringify(split.viewProps?.[viewPropsKey])) {
+								return `${what} changes ${viewPropsKey}, which the compiled style array cannot express`;
+							}
+						}
+						for (const key of Object.keys(baseStyleForDiff)) {
+							if (!(key in branchStyle)) {
+								return `${what} removes ${key}, which an additive style array cannot express`;
+							}
+						}
+						const diff = {};
+						for (const [key, value2] of Object.entries(branchStyle)) {
+							if (JSON.stringify(baseStyleForDiff[key]) !== JSON.stringify(value2)) {
+								diff[key] = value2;
+							}
+						}
+						if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
+							return `${what} style is not statically representable`;
+						}
+						return diff;
+					};
+					const claimKeys = (entry, keys) => {
+						for (const key of keys) {
+							if (conditionalKeys.has(key)) {
+								return bailout(input, "local/dynamic-style-value", `Multiple dynamic props contribute ${key}; their interaction cannot be resolved at compile time`, entry.value.span);
+							}
+						}
+						return null;
+					};
 					for (const entry of dynamicStyleEntries) {
+						const shape = entry.value.kind === "bailout" ? nativeDynamicShape(entry.name, component, entry.value.dynamic) : null;
 						if (entry.value.kind === "conditional" && directStyleName(entry.name, component) !== "opacity") {
 							let serializeNativeTree = function(node) {
 								if (node.kind === "leaf") {
@@ -1854,47 +2013,54 @@ const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, $
 							const leaves = collectLeaves(tree);
 							const leafDiffs = /* @__PURE__ */ new Map();
 							for (const leaf of leaves) {
-								const { branchCompleteProps } = propsForConditional(entry, leaf.value);
-								const branchSplit = resolveSplitStyles(branchCompleteProps, component.staticConfig, cssAnimationDriver, component.displayName);
-								const branchStyle = branchSplit?.viewProps?.style ?? {};
-								if (!staticObject(branchStyle)) {
-									return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch did not resolve to a static native style`, entry.value.span);
-								}
-								for (const viewPropsKey of /* @__PURE__ */ new Set([...Object.keys(branchSplit?.viewProps ?? {}), ...Object.keys(split.viewProps ?? {})])) {
-									if (viewPropsKey === "style") continue;
-									if (JSON.stringify(branchSplit?.viewProps?.[viewPropsKey]) !== JSON.stringify(split.viewProps?.[viewPropsKey])) {
-										return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch changes ${viewPropsKey}, which the compiled style array cannot express`, entry.value.span);
-									}
-								}
-								for (const key of Object.keys(baseStyleForDiff)) {
-									if (!(key in branchStyle)) {
-										return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch removes ${key}, which an additive style array cannot express`, entry.value.span);
-									}
-								}
-								const diff = {};
-								for (const [key, value] of Object.entries(branchStyle)) {
-									if (JSON.stringify(baseStyleForDiff[key]) !== JSON.stringify(value)) {
-										diff[key] = value;
-									}
-								}
-								if (!isSerializableNativeStyle(diff) || core.containsThemeRef(diff)) {
-									return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch style is not statically representable`, entry.value.span);
-								}
-								for (const key of Object.keys(diff)) {
-									if (conditionalKeys.has(key)) {
-										return bailout(input, "local/dynamic-style-value", `Multiple conditionals contribute ${key}; their interaction cannot be resolved per-branch`, entry.value.span);
-									}
+								const diff = valueDiff(entry, leaf.value, `Conditional ${entry.name} branch`);
+								if (typeof diff === "string") {
+									return bailout(input, "local/dynamic-style-value", diff, entry.value.span);
 								}
+								const conflict = claimKeys(entry, Object.keys(diff));
+								if (conflict) return conflict;
 								leafDiffs.set(leaf, diff);
 							}
 							for (const diff of leafDiffs.values()) {
 								for (const key of Object.keys(diff)) conditionalKeys.add(key);
 							}
 							conditionalParts.push(serializeNativeTree(tree));
+						} else if (shape === "domain" && entry.value.kind === "bailout") {
+							const lookup = [];
+							const keys = /* @__PURE__ */ new Set();
+							for (const value of entry.value.dynamic.values) {
+								const diff = valueDiff(entry, value, `${entry.name} value ${JSON.stringify(value)}`);
+								if (typeof diff === "string") {
+									return bailout(input, "local/dynamic-style-value", diff, entry.value.span);
+								}
+								for (const key of Object.keys(diff)) keys.add(key);
+								lookup.push(`${JSON.stringify(String(value))}: ${JSON.stringify(diff)}`);
+							}
+							const conflict = claimKeys(entry, keys);
+							if (conflict) return conflict;
+							for (const key of keys) conditionalKeys.add(key);
+							const index = expressions.length;
+							expressions.push(input.source.slice(entry.value.span.start, entry.value.span.end));
+							conditionalParts.push(`({ ${lookup.join(", ")} })[expressions[${index}]]`);
 						} else {
+							const key = directStyleName(entry.name, component);
+							if (shape === "number") {
+								for (const probe of [7.25, 1031]) {
+									const diff = valueDiff(entry, probe, `${entry.name} number`);
+									if (typeof diff === "string" || JSON.stringify(diff) !== JSON.stringify({ [key]: probe })) {
+										return bailout(input, "local/dynamic-style-value", `Style prop ${entry.name} transforms numbers on native, so its runtime value cannot pass through`, entry.value.span);
+									}
+								}
+								if (key in baseStyleForDiff) {
+									return bailout(input, "local/dynamic-style-value", `Style prop ${entry.name} overlaps a static ${key}`, entry.value.span);
+								}
+								const conflict = claimKeys(entry, [key]);
+								if (conflict) return conflict;
+								conditionalKeys.add(key);
+							}
 							const index = expressions.length;
 							expressions.push(input.source.slice(entry.value.span.start, entry.value.span.end));
-							plainDynamicParts.push(`${JSON.stringify(directStyleName(entry.name, component))}: expressions[${index}]`);
+							plainDynamicParts.push(`${JSON.stringify(key)}: expressions[${index}]`);
 						}
 					}
 					const dynamicStyle = plainDynamicParts.join(", ");
@@ -2018,7 +2184,7 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 					flattened: true
 				};
 			}
-			const artifacts = extractedStyleArtifacts(split, props, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
+			const artifacts = extractedStyleArtifacts(split, props, options.tamaguiConfig, true, Boolean(component.staticConfig.styleFrontend));
 			const className = artifacts.className;
 			const rawInlineStyle = split.viewProps?.style;
 			const inlineStyle = staticObject(rawInlineStyle) && Object.keys(rawInlineStyle).length > 0 ? rawInlineStyle : null;
@@ -2114,7 +2280,7 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 					if (conflictsWithInline(changedKeys, laneAOwners, laneAMemberOwners)) {
 						return bailout(input, "local/dynamic-style-value", `${entry.name} and an inline dynamic style both contribute a CSS property; their precedence cannot be resolved per-branch`, entry.value.span);
 					}
-					const branchArtifacts = extractedStyleArtifacts(branchSplit, branchProps, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
+					const branchArtifacts = extractedStyleArtifacts(branchSplit, branchProps, options.tamaguiConfig, true, Boolean(component.staticConfig.styleFrontend));
 					leafArtifactsMap.set(leaf, {
 						classes: branchArtifacts.className.split(" ").filter(Boolean),
 						css: branchArtifacts.css