@tamagui/static 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/compilerHost.mjs

@@ -0,0 +1,2263 @@
+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 { 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";
+import { requireTamaguiCore } from "./helpers/requireTamaguiCore.mjs";
+
+function createComponentRegistry(components, componentModules) {
+	return {
+		modulesById: new Map(componentModules.map((module) => [module.resolvedId, module.moduleName])),
+		componentsByModule: new Map(components.map((component) => [component.moduleName, component]))
+	};
+}
+const DOM_FRONTENDS = /* @__PURE__ */ new Set([
+	"tamagui",
+	"tamagui/dom",
+	"@tamagui/core",
+	"@tamagui/core/dom",
+	"@tamagui/tailwind"
+]);
+const componentState = {
+	focus: false,
+	focusVisible: false,
+	focusWithin: false,
+	hover: false,
+	unmounted: true,
+	press: false,
+	pressIn: false,
+	disabled: false
+};
+function staticObject(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value);
+}
+const flatClausePattern = /(?:^|\s)@?[A-Za-z][A-Za-z0-9-]*(?:\/[A-Za-z0-9_-]+)?:/;
+const nativeInheritedKeywordPattern = /(?:^|:)(?:inherit|unset)(?=\s|$)/;
+const nativeInitialKeywordPattern = /(?:^|:)initial(?=\s|$)/;
+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)}`;
+}
+function objectClassName(value) {
+	return `className: ${JSON.stringify(value)}`;
+}
+function serializedStyle(style, dynamicProperties) {
+	if (dynamicProperties.length === 0) return style ? JSON.stringify(style) : "";
+	return `{ ${[...style ? Object.entries(style).map(([name, value]) => `${JSON.stringify(name)}: ${JSON.stringify(value)}`) : [], ...dynamicProperties].join(", ")} }`;
+}
+function jsxStyleAttributes(className, style, dynamicProperties = []) {
+	const serialized = serializedStyle(style, dynamicProperties);
+	return [className ? jsxClassName(className) : "", serialized ? `style={${serialized}}` : ""].filter(Boolean).join(" ");
+}
+function objectStyleProperties(className, style, dynamicProperties = []) {
+	const serialized = serializedStyle(style, dynamicProperties);
+	return [className ? objectClassName(className) : "", serialized ? `style: ${serialized}` : ""].filter(Boolean).join(", ");
+}
+function extractedStyleArtifacts(split, props, config, includeRuntimeBase = true, hasStyleFrontend = false) {
+	const callerClassName = !hasStyleFrontend && typeof props.className === "string" ? props.className : "";
+	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 pseudoNames = [
+		"hover",
+		"press",
+		"focus",
+		"focusVisible",
+		"focusWithin",
+		"disabled"
+	];
+	const buckets = {
+		group: [],
+		normal: [],
+		pseudo: [],
+		theme: [],
+		media: []
+	};
+	const classKeys = /* @__PURE__ */ new Map();
+	for (const [key, identifier] of Object.entries(split.classNames ?? {})) {
+		if (typeof identifier === "string") classKeys.set(identifier, key);
+	}
+	const identifiers = /* @__PURE__ */ new Set([...classKeys.keys(), ...Object.values(rules).flatMap((styleObject) => {
+		const identifier = styleObject?.[StyleObjectIdentifier];
+		return typeof identifier === "string" ? [identifier] : [];
+	})]);
+	for (const identifier of identifiers) {
+		const key = classKeys.get(identifier) ?? "";
+		const css2 = cssFromRules(Object.fromEntries(Object.entries(rules).filter(([, styleObject]) => styleObject?.[StyleObjectIdentifier] === 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}`))) {
+			buckets.media.push(identifier);
+		} else {
+			buckets.normal.push(identifier);
+		}
+	}
+	const orderedIdentifiers = [
+		...buckets.group,
+		...buckets.normal,
+		...buckets.pseudo,
+		...buckets.theme,
+		...buckets.media
+	];
+	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)));
+		return buckets.theme.includes(identifier) ? identifierRules.map((rule) => rule.replace(":root:root:root.t_", ":root:root:root:root.t_")) : identifierRules;
+	});
+	return {
+		className: concatClassName(baseViewClassName, orderedIdentifiers, callerClassName),
+		css
+	};
+}
+function spreadNonStyleReplacement(form, entry, isPropIgnored, rewriteProp) {
+	if (entry.kind !== "spread" || entry.value.kind !== "static" || !staticObject(entry.value.value)) {
+		return "";
+	}
+	const nonStyleEntries = Object.entries(entry.value.value).filter(([key]) => !isPropIgnored(key)).map(([key, value]) => rewriteProp(key, value));
+	if (nonStyleEntries.length === 0) return "";
+	const objectSource = `{ ${nonStyleEntries.map(([key, value]) => `${JSON.stringify(key)}: ${JSON.stringify(value)}`).join(", ")} }`;
+	return form === "jsx" ? `{...${objectSource}}` : `...${objectSource}`;
+}
+function compiledPropsEdits(input, styleEntries, replacement, spreadReplacement) {
+	const propsSpan = input.element.propsSpan;
+	if (!propsSpan) return null;
+	const original = input.source.slice(propsSpan.start, propsSpan.end);
+	const trimmed = original.trim();
+	if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) {
+		return [{
+			start: propsSpan.start,
+			end: propsSpan.end,
+			content: `{ ${replacement} }`,
+			origin: propsSpan
+		}];
+	}
+	if (styleEntries.length === 0) {
+		const close = original.lastIndexOf("}");
+		const separator = original.slice(1, close).trim() ? ", " : " ";
+		const position = propsSpan.start + close;
+		return [{
+			start: position,
+			end: position,
+			content: `${separator}${replacement} `,
+			origin: propsSpan
+		}];
+	}
+	const edits = [];
+	for (const [index, entry] of styleEntries.entries()) {
+		let start = entry.span.start;
+		let end = entry.span.end;
+		const nonStyle = spreadReplacement?.(entry) ?? "";
+		if (index === 0) {
+			const content = [replacement, nonStyle].filter(Boolean).join(", ");
+			edits.push({
+				start,
+				end,
+				content,
+				origin: entry.span
+			});
+			continue;
+		}
+		let cursor = end - propsSpan.start;
+		while (cursor < original.length - 1 && /\s/.test(original[cursor])) cursor++;
+		if (original[cursor] === ",") {
+			end = propsSpan.start + cursor + 1;
+		} else {
+			cursor = start - propsSpan.start - 1;
+			while (cursor > 0 && /\s/.test(original[cursor])) cursor--;
+			if (original[cursor] === ",") start = propsSpan.start + cursor;
+		}
+		edits.push({
+			start,
+			end,
+			content: nonStyle,
+			origin: entry.span
+		});
+	}
+	const merged = [];
+	for (const edit of edits.sort((left, right) => left.start - right.start)) {
+		const previous = merged.at(-1);
+		if (previous && edit.start <= previous.end && !previous.content && !edit.content) {
+			previous.end = Math.max(previous.end, edit.end);
+		} else {
+			merged.push(edit);
+		}
+	}
+	return merged;
+}
+const compilerStyleProps = /* @__PURE__ */ new Set([
+	"className",
+	"style",
+	"group",
+	"transition",
+	"animation",
+	"animatePresence",
+	"animatedBy",
+	"fontFamily",
+	"render"
+]);
+const runtimeAnimationProps = /* @__PURE__ */ new Set([
+	"transition",
+	"animation",
+	"animatePresence",
+	"animatedBy"
+]);
+const componentOnlyProps = /* @__PURE__ */ new Set([
+	"asChild",
+	"disableOptimization",
+	"themeInverse"
+]);
+const cssShorthandConflicts = {
+	background: [
+		"backgroundAttachment",
+		"backgroundBlendMode",
+		"backgroundClip",
+		"backgroundColor",
+		"backgroundImage",
+		"backgroundOrigin",
+		"backgroundPosition",
+		"backgroundRepeat",
+		"backgroundSize"
+	],
+	border: [
+		"borderTop",
+		"borderTopColor",
+		"borderTopStyle",
+		"borderTopWidth",
+		"borderRight",
+		"borderRightColor",
+		"borderRightStyle",
+		"borderRightWidth",
+		"borderBottom",
+		"borderBottomColor",
+		"borderBottomStyle",
+		"borderBottomWidth",
+		"borderLeft",
+		"borderLeftColor",
+		"borderLeftStyle",
+		"borderLeftWidth",
+		"borderColor",
+		"borderStyle",
+		"borderWidth",
+		"borderImage",
+		"borderImageOutset",
+		"borderImageRepeat",
+		"borderImageSlice",
+		"borderImageSource",
+		"borderImageWidth",
+		"borderInlineColor",
+		"borderInlineEndColor",
+		"borderInlineEndStyle",
+		"borderInlineEndWidth",
+		"borderInlineStartColor",
+		"borderInlineStartStyle",
+		"borderInlineStartWidth",
+		"borderInlineStyle",
+		"borderInlineWidth"
+	],
+	borderTop: [
+		"borderTopColor",
+		"borderTopStyle",
+		"borderTopWidth"
+	],
+	borderRight: [
+		"borderRightColor",
+		"borderRightStyle",
+		"borderRightWidth",
+		"borderInlineColor",
+		"borderInlineEndColor",
+		"borderInlineEndStyle",
+		"borderInlineEndWidth",
+		"borderInlineStartColor",
+		"borderInlineStartStyle",
+		"borderInlineStartWidth",
+		"borderInlineStyle",
+		"borderInlineWidth"
+	],
+	borderBottom: [
+		"borderBottomColor",
+		"borderBottomStyle",
+		"borderBottomWidth"
+	],
+	borderLeft: [
+		"borderLeftColor",
+		"borderLeftStyle",
+		"borderLeftWidth",
+		"borderInlineColor",
+		"borderInlineEndColor",
+		"borderInlineEndStyle",
+		"borderInlineEndWidth",
+		"borderInlineStartColor",
+		"borderInlineStartStyle",
+		"borderInlineStartWidth",
+		"borderInlineStyle",
+		"borderInlineWidth"
+	],
+	borderImage: [
+		"borderImageOutset",
+		"borderImageRepeat",
+		"borderImageSlice",
+		"borderImageSource",
+		"borderImageWidth"
+	],
+	outline: [
+		"outlineColor",
+		"outlineStyle",
+		"outlineWidth"
+	],
+	gap: ["columnGap", "rowGap"],
+	gridColumn: ["gridColumnEnd", "gridColumnStart"],
+	gridRow: ["gridRowEnd", "gridRowStart"],
+	marginInline: [
+		"marginInlineEnd",
+		"marginInlineStart",
+		"marginEnd",
+		"marginStart",
+		"marginLeft",
+		"marginRight"
+	],
+	paddingInline: [
+		"paddingInlineEnd",
+		"paddingInlineStart",
+		"paddingEnd",
+		"paddingStart",
+		"paddingLeft",
+		"paddingRight"
+	],
+	insetInline: [
+		"insetInlineEnd",
+		"insetInlineStart",
+		"end",
+		"start",
+		"left",
+		"right"
+	],
+	borderInlineColor: [
+		"borderInlineEndColor",
+		"borderInlineStartColor",
+		"borderEndColor",
+		"borderStartColor",
+		"borderLeftColor",
+		"borderRightColor"
+	],
+	borderInlineStyle: [
+		"borderInlineEndStyle",
+		"borderInlineStartStyle",
+		"borderEndStyle",
+		"borderStartStyle",
+		"borderLeftStyle",
+		"borderRightStyle"
+	],
+	borderInlineWidth: [
+		"borderInlineEndWidth",
+		"borderInlineStartWidth",
+		"borderEndWidth",
+		"borderStartWidth",
+		"borderLeftWidth",
+		"borderRightWidth"
+	],
+	mask: [
+		"maskBorder",
+		"maskBorderMode",
+		"maskBorderOutset",
+		"maskBorderRepeat",
+		"maskBorderSlice",
+		"maskBorderSource",
+		"maskBorderWidth",
+		"maskClip",
+		"maskComposite",
+		"maskImage",
+		"maskMode",
+		"maskOrigin",
+		"maskPosition",
+		"maskRepeat",
+		"maskSize"
+	],
+	maskBorder: [
+		"maskBorderMode",
+		"maskBorderOutset",
+		"maskBorderRepeat",
+		"maskBorderSlice",
+		"maskBorderSource",
+		"maskBorderWidth"
+	]
+};
+const cssConflictFamilies = [
+	/* @__PURE__ */ new Set(["width", "inlineSize"]),
+	/* @__PURE__ */ new Set(["minWidth", "minInlineSize"]),
+	/* @__PURE__ */ new Set(["maxWidth", "maxInlineSize"]),
+	/* @__PURE__ */ new Set(["height", "blockSize"]),
+	/* @__PURE__ */ new Set(["minHeight", "minBlockSize"]),
+	/* @__PURE__ */ new Set(["maxHeight", "maxBlockSize"]),
+	/* @__PURE__ */ new Set([
+		"marginInline",
+		"marginInlineEnd",
+		"marginInlineStart",
+		"marginEnd",
+		"marginStart",
+		"marginLeft",
+		"marginRight"
+	]),
+	/* @__PURE__ */ new Set([
+		"paddingInline",
+		"paddingInlineEnd",
+		"paddingInlineStart",
+		"paddingEnd",
+		"paddingStart",
+		"paddingLeft",
+		"paddingRight"
+	]),
+	/* @__PURE__ */ new Set([
+		"insetInline",
+		"insetInlineEnd",
+		"insetInlineStart",
+		"end",
+		"start",
+		"left",
+		"right"
+	]),
+	/* @__PURE__ */ new Set([
+		"borderInlineColor",
+		"borderInlineEndColor",
+		"borderInlineStartColor",
+		"borderEndColor",
+		"borderStartColor",
+		"borderLeftColor",
+		"borderRightColor"
+	]),
+	/* @__PURE__ */ new Set([
+		"borderInlineStyle",
+		"borderInlineEndStyle",
+		"borderInlineStartStyle",
+		"borderEndStyle",
+		"borderStartStyle",
+		"borderLeftStyle",
+		"borderRightStyle"
+	]),
+	/* @__PURE__ */ new Set([
+		"borderInlineWidth",
+		"borderInlineEndWidth",
+		"borderInlineStartWidth",
+		"borderEndWidth",
+		"borderStartWidth",
+		"borderLeftWidth",
+		"borderRightWidth"
+	])
+];
+function cssOwnersConflict(left, right) {
+	for (const leftOwner of left) {
+		for (const rightOwner of right) {
+			if (leftOwner === rightOwner || cssShorthandConflicts[leftOwner]?.includes(rightOwner) || cssShorthandConflicts[rightOwner]?.includes(leftOwner) || cssConflictFamilies.some((family) => family.has(leftOwner) && family.has(rightOwner))) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+const runtimeEventProps = /* @__PURE__ */ new Set([
+	"onHoverIn",
+	"onHoverOut",
+	"onLongPress",
+	"onPress",
+	"onPressIn",
+	"onPressOut"
+]);
+const DOM_STYLE_ATTRIBUTES = new Map(Object.entries(ATTRIBUTES).filter(([name, row]) => row.native !== "none" && row.nativeProp && row.nativeProp !== name && row.nativeProp in stylePropsText).map(([name, row]) => [name, row.nativeProp]));
+const nativePointerEventProps = /* @__PURE__ */ new Set([
+	"onPointerCancel",
+	"onPointerDown",
+	"onPointerEnter",
+	"onPointerLeave",
+	"onPointerMove",
+	"onPointerUp"
+]);
+function isSerializableNativeStyle(value) {
+	if (value == null || typeof value === "number" || typeof value === "boolean") {
+		return true;
+	}
+	if (typeof value === "string") return true;
+	if (Array.isArray(value)) return value.every(isSerializableNativeStyle);
+	if (!staticObject(value)) return false;
+	const prototype = Object.getPrototypeOf(value);
+	if (prototype !== Object.prototype && prototype !== null) return false;
+	return Object.values(value).every(isSerializableNativeStyle);
+}
+function unusedIdentifier(source, base) {
+	let candidate = base;
+	let suffix = 0;
+	while (new RegExp(`\\b${candidate}\\b`).test(source)) {
+		candidate = `${base}${++suffix}`;
+	}
+	return candidate;
+}
+const VIEW_WRAPPER_PROPS = /^(aria-|accessibilityState$|accessibilityValue$|id$|tabIndex$|nativeID$)/;
+function isBareHostView(element) {
+	return !element.entries.some((entry) => entry.kind === "child" || entry.kind === "spread" || entry.kind === "prop" && VIEW_WRAPPER_PROPS.test(entry.name));
+}
+function entrySource(input, entry) {
+	return entry.value.kind === "static" ? JSON.stringify(entry.value.value) : input.source.slice(entry.value.span.start, entry.value.span.end);
+}
+function renamedPropEdit(input, entry, name) {
+	if (entry.name === name) return null;
+	const content = input.source.slice(entry.span.start, entry.span.end);
+	const offset = content.indexOf(entry.name);
+	if (offset === -1) return null;
+	const quoted = content[offset - 1] === "\"" || content[offset - 1] === "'";
+	return {
+		start: entry.span.start + offset,
+		end: entry.span.start + offset + entry.name.length,
+		content: input.element.form === "jsx" || quoted ? name : JSON.stringify(name),
+		origin: entry.span
+	};
+}
+function serializedProps(form, props) {
+	return props.map(([name, value]) => form === "jsx" ? `${name}={${value}}` : `${JSON.stringify(name)}: ${value}`).join(form === "jsx" ? " " : ", ");
+}
+function nativeDOMProps(input, tag) {
+	const consumed = [];
+	const edits = [];
+	const additions = [];
+	const nested = /* @__PURE__ */ new Map();
+	const entries = input.element.entries.filter((entry) => entry.kind === "prop");
+	const names = new Set(entries.map((entry) => entry.name));
+	if (names.has("ref") || tag === "br") additions.push(["__tag", JSON.stringify(tag)]);
+	if (TAGS[tag].backing === "text" || TAGS[tag].backing === "textinput") {
+		additions.push(["__inherit", "true"]);
+	}
+	const add = (name, value) => additions.push([name, value]);
+	const consume = (entry) => consumed.push(entry);
+	for (const entry of entries) {
+		const value = entrySource(input, entry);
+		const attribute = (entry.name in ATTRIBUTES ? ATTRIBUTES[entry.name] : void 0) ?? (entry.name.startsWith("data-") ? ATTRIBUTES["data-*"] : void 0);
+		const event = entry.name in EVENTS ? EVENTS[entry.name] : void 0;
+		if (event) {
+			if (event.native === "none") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `${entry.name} has no native DOM event equivalent`,
+					diagnosticSpan: entry.span
+				};
+			}
+			if (entry.name === "onKeyDown" && tag !== "input" && tag !== "textarea") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `onKeyDown requires a native text-entry control`,
+					diagnosticSpan: entry.span
+				};
+			}
+			if ([
+				"onClick",
+				"onLoad",
+				"onError",
+				"onChange",
+				"onInput",
+				"onKeyDown"
+			].includes(entry.name)) {
+				continue;
+			}
+			if (event.nativeProp) {
+				const edit2 = renamedPropEdit(input, entry, event.nativeProp);
+				if (edit2) edits.push(edit2);
+			}
+			continue;
+		}
+		if (!attribute || attribute.native === "none" || entry.name === "style") continue;
+		if (DOM_STYLE_ATTRIBUTES.has(entry.name)) {
+			if (entry.value.kind !== "static") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `html.${tag} ${entry.name} must be statically known for native lowering`,
+					diagnosticSpan: entry.span
+				};
+			}
+			consume(entry);
+			continue;
+		}
+		if (entry.name === "hidden") {
+			if (entry.value.kind !== "static") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `html.${tag} hidden must be statically known for native lowering`,
+					diagnosticSpan: entry.span
+				};
+			}
+			consume(entry);
+			continue;
+		}
+		if (entry.name === "tabIndex") {
+			consume(entry);
+			add("focusable", `(${value}) === 0`);
+			continue;
+		}
+		if (entry.name === "readOnly") {
+			consume(entry);
+			add("editable", `!(${value})`);
+			continue;
+		}
+		if (entry.name === "disabled") {
+			consume(entry);
+			add("disabled", value);
+			add("focusable", `!(${value})`);
+			if (tag === "input" || tag === "textarea") add("editable", `!(${value})`);
+			const state = nested.get("accessibilityState") ?? [];
+			state.push(["disabled", value]);
+			nested.set("accessibilityState", state);
+			continue;
+		}
+		if (entry.name === "type") {
+			consume(entry);
+			if (tag === "input" && entry.value.kind !== "static") {
+				return {
+					consumed,
+					edits,
+					additions,
+					diagnostic: `html.input type must be statically known for native lowering`,
+					diagnosticSpan: entry.span
+				};
+			}
+			if (tag === "input" && entry.value.kind === "static") {
+				const type = entry.value.value;
+				if (type === "password") add("secureTextEntry", "true");
+				else if (typeof type === "string" && type !== "text" && NATIVE_INPUT_TYPES.includes(type)) {
+					if (!names.has("inputMode")) {
+						add("inputMode", JSON.stringify(type === "number" ? "numeric" : type));
+					}
+				}
+			}
+			continue;
+		}
+		if (entry.name === "aria-hidden") {
+			consume(entry);
+			add("accessibilityElementsHidden", value);
+			add("importantForAccessibility", `(${value}) ? "no-hide-descendants" : "auto"`);
+			continue;
+		}
+		if (entry.name === "aria-live") {
+			consume(entry);
+			add("accessibilityLiveRegion", entry.value.kind === "static" && entry.value.value === "off" ? "\"none\"" : value);
+			continue;
+		}
+		const nativeProp = attribute.nativeProp;
+		if (!nativeProp) continue;
+		if (nativeProp.includes(".")) {
+			consume(entry);
+			const [parent, child] = nativeProp.split(".");
+			const values = nested.get(parent) ?? [];
+			values.push([child, value]);
+			nested.set(parent, values);
+			continue;
+		}
+		const edit = renamedPropEdit(input, entry, nativeProp);
+		if (edit) edits.push(edit);
+	}
+	for (const [name, values] of nested) {
+		add(name, `{ ${values.map(([key, value]) => `${key}: ${value}`).join(", ")} }`);
+	}
+	if (!names.has("role") && TAGS[tag].role) add("role", JSON.stringify(TAGS[tag].role));
+	if (tag === "textarea") add("multiline", "true");
+	return {
+		consumed,
+		edits,
+		additions
+	};
+}
+function webDOMProps(input, tag) {
+	const edits = [];
+	const additions = [];
+	const entries = input.element.entries.filter((entry) => entry.kind === "prop");
+	const names = new Set(entries.map((entry) => entry.name));
+	for (const entry of entries) {
+		if (entry.name === "for") {
+			const edit = renamedPropEdit(input, entry, "htmlFor");
+			if (edit) edits.push(edit);
+		}
+		if (entry.name === "role" && entry.value.kind === "static" && entry.value.value === "none") {
+			edits.push({
+				start: entry.value.span.start,
+				end: entry.value.span.end,
+				content: JSON.stringify("presentation"),
+				origin: entry.value.span
+			});
+		}
+	}
+	if (tag === "button" && !names.has("type")) additions.push(["type", "\"button\""]);
+	if ((tag === "input" || tag === "textarea") && !names.has("dir")) {
+		additions.push(["dir", "\"auto\""]);
+	}
+	return {
+		edits,
+		additions
+	};
+}
+function createTamaguiCompilerHost(options) {
+	const platform = options.target === "native" ? "native" : "web";
+	const core = requireTamaguiCore(platform);
+	const compilerVariantStyleResolver = core.styled(core.View, {}).staticConfig.variantStyleResolver;
+	const firstThemeName = Object.keys(options.tamaguiConfig.themes ?? {})[0] ?? "";
+	const firstTheme = options.tamaguiConfig.themes?.[firstThemeName] ?? {};
+	const theme = firstTheme;
+	const modifierRegistry = createModifierRegistry({
+		mediaNames: options.tamaguiConfig.media ?? {},
+		themeNames: options.tamaguiConfig.themes ?? {}
+	}).registry;
+	const isClauseObjectValue = (value) => {
+		if (!staticObject(value)) return false;
+		if ("default" in value) return true;
+		for (const key in value) {
+			if (key.length === 0) return false;
+			let start = 0;
+			for (let index = 0; index <= key.length; index++) {
+				if (index !== key.length && key.charCodeAt(index) !== 58) continue;
+				if (modifierRegistry.get(key.slice(start, index)) === void 0) return false;
+				start = index + 1;
+			}
+			return true;
+		}
+		return false;
+	};
+	const platformModifiersRegistered = modifierRegistry.get("web") === "platform" && modifierRegistry.get("native") === "platform";
+	const nativeClauseValue = (value) => {
+		if (typeof value !== "string" || !flatClausePattern.test(value)) {
+			return isClauseObjectValue(value) ? "live" : null;
+		}
+		if (!platformModifiersRegistered) return "live";
+		const parsed = parseValue(value, modifierRegistry);
+		if (!parsed.ok || parsed.value.clauses.length === 0) return "live";
+		let payload = parsed.value.base;
+		let matched = parsed.value.base !== null;
+		for (const clause of parsed.value.clauses) {
+			if (clause.modifiers.includes("web")) continue;
+			if (clause.modifiers.length !== 1 || clause.modifiers[0] !== "native") return "live";
+			payload = clause.payload;
+			matched = true;
+		}
+		return {
+			payload,
+			matched
+		};
+	};
+	const configuredAnimationDriver = options.tamaguiConfig.animations;
+	const configuredCssAnimationDriver = platform === "web" && configuredAnimationDriver?.outputStyle === "css" && !options.tamaguiConfig.animationDrivers ? configuredAnimationDriver : null;
+	const resolveStaticCssTransition = (value, transitionPresets) => {
+		if (platform !== "web" || typeof value !== "string") return null;
+		const transitionPresetNames = new Set(Object.keys(transitionPresets));
+		const program = parseValue(value, modifierRegistry);
+		if (!program.ok) return null;
+		const resolvedPayloads = [];
+		const payloads = [program.value.base, ...program.value.clauses.map((clause) => clause.payload)].filter((payload) => payload !== null);
+		if (payloads.length === 0) return null;
+		for (const payload of payloads) {
+			const transition = parseTransition(payload, transitionPresetNames);
+			if (!transition.ok) return null;
+			if (transition.value.kind === "global") {
+				resolvedPayloads.push(payload);
+				continue;
+			}
+			const resolved2 = resolveTransition(payload, { animations: transitionPresets });
+			if (resolved2.diagnostics.length > 0) return null;
+			if (!resolved2.fused) {
+				resolvedPayloads.push(payload);
+				continue;
+			}
+			const css = toCSSTransition(resolved2);
+			if (css === void 0) return null;
+			resolvedPayloads.push(css);
+		}
+		let payloadIndex = 0;
+		const resolved = [];
+		if (program.value.base !== null) {
+			resolved.push(resolvedPayloads[payloadIndex++]);
+		}
+		for (const clause of program.value.clauses) {
+			resolved.push(`${clause.modifiers.join(":")}:${resolvedPayloads[payloadIndex++]}`);
+		}
+		return resolved.join(" ");
+	};
+	const { modulesById, componentsByModule } = options.registry ?? createComponentRegistry(options.components, options.componentModules);
+	const normalizedStyleConfigs = /* @__PURE__ */ new WeakMap();
+	const normalizeStaticConfig = (staticConfig) => {
+		if (!staticConfig.styleFrontend) return staticConfig;
+		const normalized = core.getStyleStaticConfig(staticConfig, options.tamaguiConfig);
+		const result = {
+			...staticConfig,
+			baseStyle: normalized.baseStyle,
+			defaultProps: normalized.defaultProps,
+			variants: normalized.variants,
+			passthroughClassName: normalized.passthroughClassName
+		};
+		normalizedStyleConfigs.set(result, normalized);
+		return result;
+	};
+	const directStaticConfig = (element) => {
+		const identity = element.component.provenance;
+		if (!identity) return null;
+		const moduleName = modulesById.get(identity.resolvedId);
+		const component = moduleName ? componentsByModule.get(moduleName) : void 0;
+		const info = component?.nameToInfo[identity.importedName];
+		return info ? {
+			key: componentKey(identity.resolvedId, identity.importedName),
+			staticConfig: normalizeStaticConfig(info.staticConfig),
+			displayName: info.displayName
+		} : null;
+	};
+	const domStaticConfig = (element) => {
+		const identity = element.component.provenance;
+		const tag = element.component.name;
+		if (identity?.importedName !== "html" || !DOM_FRONTENDS.has(identity.specifier) || !(tag in TAGS)) {
+			return null;
+		}
+		const row = TAGS[tag];
+		const textLike = row.backing === "text" || row.backing === "textinput";
+		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]
+		} : {
+			...NATIVE_ELEMENT_DEFAULTS,
+			...row.display === "block" ? NATIVE_BLOCK_DEFAULTS : null,
+			...row.defaults,
+			...row.nativeDefaults
+		};
+		return {
+			key: componentKey(identity.resolvedId, `html.${tag}`),
+			tag,
+			displayName: tag,
+			staticConfig: normalizeStaticConfig({
+				...base,
+				isInput: row.backing === "textinput",
+				validStyles: {
+					...validStyles,
+					...row.backing === "textinput" ? stylePropsInput : stylePropsText
+				},
+				defaultProps: {
+					...base.defaultProps,
+					...platformDefaults
+				}
+			})
+		};
+	};
+	const styledStaticConfig = (definition) => {
+		if (!definition || definition.options.kind !== "static") return null;
+		const staticConfig = definition.staticConfig;
+		if (staticConfig && (staticConfig.kind !== "static" || !staticObject(staticConfig.value))) {
+			return null;
+		}
+		const base = directStaticConfig({
+			kind: "element",
+			form: "jsx",
+			id: definition.id,
+			span: definition.span,
+			propsSpan: null,
+			component: definition.base,
+			complete: true,
+			entries: [],
+			bailouts: []
+		});
+		if (!base || !staticObject(definition.options.value)) return null;
+		const { variants, defaultVariants, displayName, context, contextProps, ...defaultProps } = definition.options.value;
+		const baseClassName = definition.baseClassName?.kind === "static" && typeof definition.baseClassName.value === "string" ? definition.baseClassName.value : void 0;
+		const localStaticConfig = {
+			...base.staticConfig,
+			...staticConfig?.value,
+			variants: {
+				...base.staticConfig.variants,
+				...variants
+			},
+			defaultProps: {
+				...base.staticConfig.defaultProps,
+				...defaultProps,
+				...defaultVariants
+			},
+			defaultVariants,
+			baseClassName: [base.staticConfig.baseClassName, baseClassName].filter(Boolean).join(" "),
+			context: context ?? base.staticConfig.context,
+			contextProps: context ? contextProps : contextProps ?? base.staticConfig.contextProps
+		};
+		localStaticConfig.variantStyleResolver = compilerVariantStyleResolver;
+		return {
+			key: componentKey(definition.id, definition.name),
+			displayName: displayName || base.displayName,
+			staticConfig: normalizeStaticConfig(localStaticConfig)
+		};
+	};
+	const resolve = (element, styledDefinition) => {
+		const dom = domStaticConfig(element);
+		const resolved = dom ?? directStaticConfig(element) ?? styledStaticConfig(styledDefinition);
+		if (!resolved) return null;
+		const defaultProps = resolved.staticConfig.defaultProps ?? {};
+		return {
+			key: resolved.key,
+			canFlatten: resolved.staticConfig.acceptsClassName !== false && !resolved.staticConfig.neverFlatten && !resolved.staticConfig.context,
+			staticConfig: resolved.staticConfig,
+			displayName: resolved.displayName,
+			...dom && { domTag: dom.tag },
+			partialRuntimeSafe: !dom && !styledDefinition && Object.keys(defaultProps).length === 0 && !resolved.staticConfig.defaultVariants && !resolved.staticConfig.baseClassName && !resolved.staticConfig.baseStyle
+		};
+	};
+	const isStyleProp = (name, component) => {
+		const staticConfig = component.staticConfig;
+		return compilerStyleProps.has(name) || name in (options.tamaguiConfig.shorthands ?? {}) || !!staticConfig.validStyles?.[name] || !!staticConfig.variants?.[name];
+	};
+	const runtimeOnlyStyleProps = /* @__PURE__ */ new Set([
+		"className",
+		"style",
+		"group",
+		"transition",
+		"animation",
+		"animatePresence",
+		"animatedBy",
+		"render"
+	]);
+	const isFrontendClassName = (name, component) => name === "className" && !!component.staticConfig.styleFrontend;
+	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && (!runtimeOnlyStyleProps.has(name) || isFrontendClassName(name, component));
+	const frontendClassDomain = (entry, component) => {
+		if (entry.kind !== "prop" || entry.value.kind !== "bailout" || !isFrontendClassName(entry.name, component)) {
+			return null;
+		}
+		const dynamic = entry.value.dynamic;
+		if (dynamic?.type !== "string" || !dynamic.values?.length) return null;
+		return dynamic.values.map(String);
+	};
+	const conditionalClassEntry = (entry, component) => entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component) || frontendClassDomain(entry, component) !== null;
+	const isInvalidHostStyleProp = (name, component) => {
+		const staticConfig = component.staticConfig;
+		const validStyles$1 = staticConfig.validStyles || (staticConfig.isInput ? stylePropsInput : staticConfig.isText ? stylePropsText : validStyles);
+		return name in stylePropsAll && !isValidStyleKey(name, validStyles$1);
+	};
+	const directStyleName = (name, component) => {
+		if (compilerStyleProps.has(name) || name === "style") {
+			return null;
+		}
+		const staticConfig = component.staticConfig;
+		if (staticConfig.variants?.[name]) return null;
+		const expanded = options.tamaguiConfig.shorthands?.[name] ?? name;
+		return staticConfig.validStyles?.[expanded] ? expanded : null;
+	};
+	const resolveSplitStyles = (props, staticConfig, animationDriver, displayName) => {
+		const previousStatic = process.env.IS_STATIC;
+		const previousTarget = process.env.TAMAGUI_TARGET;
+		if (platform === "native") {
+			process.env.IS_STATIC = "is_static";
+		} else {
+			delete process.env.IS_STATIC;
+		}
+		process.env.TAMAGUI_TARGET = platform;
+		try {
+			return core.getSplitStyles(props, staticConfig, theme, firstThemeName, componentState, {
+				isStatic: true,
+				resolveValues: platform === "native" ? "except-theme" : "variable",
+				noClass: platform === "native",
+				isAnimated: false,
+				displayName
+			}, void 0, void 0, void 0, void 0, void 0, void 0, animationDriver, normalizedStyleConfigs.get(staticConfig));
+		} finally {
+			if (previousStatic === void 0) delete process.env.IS_STATIC;
+			else process.env.IS_STATIC = previousStatic;
+			if (previousTarget === void 0) delete process.env.TAMAGUI_TARGET;
+			else process.env.TAMAGUI_TARGET = previousTarget;
+		}
+	};
+	const partialStaticConfig = (staticConfig) => ({
+		...staticConfig,
+		baseStyle: void 0,
+		defaultProps: {},
+		defaultVariants: void 0,
+		variants: {}
+	});
+	const styleOwners = (name, value, staticConfig) => {
+		const split = resolveSplitStyles({ [name]: value }, partialStaticConfig(staticConfig));
+		if (!split) return null;
+		const inlineStyle = split.viewProps?.style;
+		if (staticObject(inlineStyle) && Object.keys(inlineStyle).length > 0) {
+			return null;
+		}
+		const owners = new Set(Object.keys(split.classNames ?? {}));
+		for (const styleObject of Object.values(split.rulesToInsert ?? {})) {
+			const property = styleObject?.[StyleObjectProperty];
+			if (typeof property === "string") owners.add(property);
+		}
+		return owners.size > 0 ? owners : null;
+	};
+	const dynamicStyleOwners = (name, staticConfig) => {
+		const probeValue = name === "transform" ? [{ scale: 1 }] : name === "transformMatrix" ? [
+			1,
+			0,
+			0,
+			1,
+			0,
+			0
+		] : name === "shadowOffset" ? {
+			width: 0,
+			height: 0
+		} : name === "shadowColor" ? "black" : name === "border" || name === "outline" ? "0 solid transparent" : name === "position" ? "relative" : name === "objectFit" ? "contain" : 0;
+		const owners = styleOwners(name, probeValue, staticConfig);
+		if (!owners || name !== "flex") return owners;
+		const shorthandOwners = styleOwners(name, "0 1 auto", staticConfig);
+		if (!shorthandOwners) return null;
+		for (const owner of shorthandOwners) owners.add(owner);
+		return owners;
+	};
+	const developmentDebugInstrumentation = (input, result) => {
+		if (process.env.NODE_ENV !== "development") return;
+		const debugEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "debug" && entry.value.kind === "static" && entry.value.value === "verbose");
+		if (!debugEntry) return;
+		const component = input.component;
+		const styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && entry.name !== "debug" && (entry.name === "style" || isStyleProp(entry.name, component)));
+		const flattened = result.ok && !!result.flattened;
+		const tiers = result.ok ? [
+			"lowered",
+			...flattened ? ["flattened"] : [],
+			...input.styledDefinition ? ["styled"] : []
+		] : ["bailed"];
+		const why = result.ok ? flattened ? "Static styles were lowered and the component was flattened to a host element." : "Static styles were lowered while the Tamagui component remained at runtime." : result.bailout.message;
+		const styles = styleEntries.map((entry) => {
+			if (!result.ok) {
+				return {
+					prop: entry.name,
+					tier: "bailed",
+					runtime: true,
+					why: `${result.bailout.message}. The Tamagui runtime resolved this prop.`
+				};
+			}
+			const edited = result.edits.some((edit) => edit.start < entry.span.end && edit.end > entry.span.start);
+			if (!flattened && !edited) {
+				return {
+					prop: entry.name,
+					tier: "bailed",
+					runtime: true,
+					why: "This prop remained for Tamagui runtime resolution."
+				};
+			}
+			if (entry.value.kind === "static") {
+				const split = resolveSplitStyles({ [entry.name]: entry.value.value }, partialStaticConfig(component.staticConfig));
+				const hasOutput = Boolean(split && (Object.keys(split.classNames ?? {}).length > 0 || Object.keys(split.rulesToInsert ?? {}).length > 0 || staticObject(split.style) && Object.keys(split.style).length > 0 || staticObject(split.viewProps?.style) && Object.keys(split.viewProps.style).length > 0));
+				if (!hasOutput) {
+					return {
+						prop: entry.name,
+						tier: flattened ? "flattened" : "lowered",
+						dropped: true,
+						why: `No ${platform} style output was produced for this prop.`
+					};
+				}
+			}
+			return {
+				prop: entry.name,
+				tier: flattened ? "flattened" : "lowered",
+				why: flattened ? "The compiler emitted this prop on the flattened host element." : "The compiler lowered this prop while retaining the Tamagui component."
+			};
+		});
+		const receipt = JSON.stringify({
+			component: input.element.component.name,
+			tiers,
+			why,
+			styles
+		});
+		const content = flattened ? input.element.form === "jsx" ? `{...(console.info('\u{1F539} Tamagui style receipt', ${receipt}), {})}` : `...(console.info('\u{1F539} Tamagui style receipt', ${receipt}), {})` : input.element.form === "jsx" ? `debug="verbose" __tamaguiStyleDebugReceipt={${receipt}}` : `debug: "verbose", __tamaguiStyleDebugReceipt: ${receipt}`;
+		return [{
+			start: debugEntry.span.start,
+			end: debugEntry.span.end,
+			content,
+			origin: debugEntry.span
+		}];
+	};
+	return {
+		resolveComponent: resolve,
+		isStyleProp,
+		canLowerDynamicStyleProp(name, component, valueKind) {
+			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) {
+				return true;
+			}
+			if (component.staticConfig.resolvers?.length) {
+				return false;
+			}
+			if (!options.disablePartialExtraction && platform === "web" && isFrontendClassName(name, component)) {
+				return true;
+			}
+			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
+		},
+		developmentDebugInstrumentation,
+		lowerCandidate(input) {
+			const component = input.component;
+			if (!component.canFlatten) {
+				const reason = component.staticConfig.acceptsClassName === false ? `${component.key} does not accept className` : component.staticConfig.neverFlatten ? `${component.key} is never flattened (behavior HOC)` : `${component.key} provides a styled context`;
+				return bailout(input, "local/unsupported-target", reason, input.element.span, { rule: 6 });
+			}
+			if (options.zeroRuntime) {
+				const spread = input.element.entries.find((entry) => entry.kind === "spread");
+				if (spread) {
+					return bailout(input, "local/unsafe-style-spread", "Zero-runtime rejects prop spreads", spread.span, {
+						rule: 1,
+						message: zeroRuleMessage(1, { component: input.element.component.name })
+					});
+				}
+			}
+			const props = {};
+			for (const entry of input.element.entries) {
+				if (entry.kind === "child" || entry.value.kind !== "static") continue;
+				if (entry.kind === "spread") {
+					if (!staticObject(entry.value.value)) {
+						return bailout(input, "local/unsafe-style-spread", "Static spread did not materialize to an object", entry.span);
+					}
+					Object.assign(props, entry.value.value);
+				} else {
+					props[entry.name] = entry.value.value;
+				}
+			}
+			if (component.staticConfig.resolvers?.length) {
+				const unresolvedProps = input.element.entries.filter((entry) => entry.kind === "prop" && entry.value.kind !== "static");
+				const onlyStaticBranchConditional = unresolvedProps.length === 1 && unresolvedProps[0]?.kind === "prop" && unresolvedProps[0].value.kind === "conditional" && canLowerConditionalStyleProp(unresolvedProps[0].name, component);
+				const unresolvedProp = onlyStaticBranchConditional ? void 0 : unresolvedProps[0];
+				if (unresolvedProp?.kind === "prop") {
+					return bailout(input, "local/dynamic-style-value", `Component resolver prop ${unresolvedProp.name} could not be evaluated`, unresolvedProp.span, void 0, unresolvedProp.name);
+				}
+			}
+			const componentOnlyProp = (name) => {
+				let span;
+				let unknown = false;
+				for (const entry of input.element.entries) {
+					if (entry.kind !== "prop" || entry.name !== name) continue;
+					span = entry.span;
+					if (entry.value.kind !== "static") unknown = true;
+				}
+				return {
+					unknown,
+					span
+				};
+			};
+			const disableOptimization = componentOnlyProp("disableOptimization");
+			if (disableOptimization.unknown || props.disableOptimization) {
+				return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimization.span);
+			}
+			if (component.domTag && props.hidden) props.display = "none";
+			if (component.domTag && platform === "native") {
+				for (const [name, styleKey] of DOM_STYLE_ATTRIBUTES) {
+					if (name in props) {
+						props[styleKey] = props[name];
+						delete props[name];
+					}
+				}
+			}
+			if (platform === "native" && component.domTag === "input" && typeof props.type === "string" && !NATIVE_INPUT_TYPES.includes(props.type)) {
+				return bailout(input, "local/unsupported-target", `input type ${props.type} has no native text-entry control`);
+			}
+			let styleObjectStatic = null;
+			const styleMemberEntries = [];
+			for (const entry of input.element.entries) {
+				if (entry.kind !== "prop" || entry.name !== "style" || entry.value.kind !== "object") {
+					continue;
+				}
+				styleObjectStatic = {};
+				for (const member of entry.value.members) {
+					if (member.value.kind === "static") {
+						styleObjectStatic[member.name] = member.value.value;
+						continue;
+					}
+					if (!isStyleProp(member.name, component)) {
+						return bailout(input, "local/dynamic-style-value", `Style prop ${member.name} could not be evaluated`, member.span);
+					}
+					styleMemberEntries.push({
+						kind: "prop",
+						name: member.name,
+						span: member.span,
+						value: member.value,
+						styleMember: true
+					});
+				}
+				if (Object.keys(styleObjectStatic).length === 0) styleObjectStatic = null;
+			}
+			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 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) {
+					return bailout(input, "local/unsupported-target", `${runtimeEvent} requires Tamagui runtime event mapping`);
+				}
+			}
+			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 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];
+			const namedCssAnimationDriver = platform === "web" && namedAnimationDriver && !namedAnimationDriver.isStub && namedAnimationDriver.outputStyle === "css" ? namedAnimationDriver : null;
+			const cssAnimationDriver = namedCssAnimationDriver ?? (animatedBy === null || animatedBy === "default" ? configuredCssAnimationDriver : null);
+			const resolvedCssTransition = animationNames.has("transition") && cssAnimationDriver ? resolveStaticCssTransition(animationProps.transition, cssAnimationDriver.animations ?? {}) : null;
+			if (resolvedCssTransition !== null) {
+				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") || animatedByNeedsRuntime;
+			let dynamicHostStyleProperties = null;
+			let laneAEntries = [];
+			const laneAOwners = /* @__PURE__ */ new Set();
+			const laneAMemberOwners = /* @__PURE__ */ new Set();
+			const conflictsWithInline = (owners, dynamicOwners, memberOwners) => [...owners].some((owner) => !memberOwners.has(owner) && cssOwnersConflict(/* @__PURE__ */ new Set([owner]), dynamicOwners));
+			const laneAAttempts = [dynamicStyleEntries];
+			{
+				const rest2 = dynamicStyleEntries.filter((entry) => !conditionalClassEntry(entry, component));
+				if (rest2.length > 0 && rest2.length < dynamicStyleEntries.length) {
+					laneAAttempts.push(rest2);
+				}
+			}
+			if (platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicStyleEntries.length > 0 && !input.element.entries.some((entry) => entry.kind === "spread" && entry.value.kind !== "static")) {
+				for (const attempt of laneAAttempts) {
+					const seen = /* @__PURE__ */ new Set();
+					const properties = [];
+					const dynamicOwners = /* @__PURE__ */ new Set();
+					const memberOwners = /* @__PURE__ */ new Set();
+					for (const entry of attempt) {
+						if (entry.kind !== "prop" || entry.value.kind !== "bailout" && entry.value.kind !== "conditional") {
+							continue;
+						}
+						const name = directStyleName(entry.name, component);
+						if (!name || seen.has(name)) {
+							properties.length = 0;
+							break;
+						}
+						const owners = dynamicStyleOwners(name, component.staticConfig);
+						if (!owners) {
+							properties.length = 0;
+							break;
+						}
+						let property = null;
+						const expression = input.source.slice(entry.value.span.start, entry.value.span.end);
+						if (resolvedCssTransition !== null && (name === "opacity" || name === "scale")) {
+							property = name === "opacity" ? `opacity: (${expression})` : `transform: "scale(" + (${expression}) + ")"`;
+						} else if (entry.value.kind === "bailout" && owners.has(name)) {
+							const dynamic = entry.value.dynamic;
+							if (dynamic?.type === "number") {
+								property = `${JSON.stringify(name)}: (${expression})`;
+							} else if (dynamic?.type === "string" && dynamic.values?.length) {
+								let valuesStayLiteral = true;
+								for (const value of dynamic.values) {
+									const split2 = resolveSplitStyles({ [entry.name]: value }, partialStaticConfig(component.staticConfig));
+									const atomics = Object.values(split2?.rulesToInsert ?? {});
+									if (atomics.length !== 1 || atomics[0]?.[StyleObjectProperty] !== name || atomics[0]?.[StyleObjectValue] !== value) {
+										valuesStayLiteral = false;
+										break;
+									}
+								}
+								if (valuesStayLiteral) {
+									property = `${JSON.stringify(name)}: (${expression})`;
+								}
+							}
+						}
+						if (!property) {
+							properties.length = 0;
+							break;
+						}
+						seen.add(name);
+						for (const owner of owners) {
+							dynamicOwners.add(owner);
+							if (entry.styleMember) memberOwners.add(owner);
+						}
+						properties.push(property);
+					}
+					if (properties.length === attempt.length && !input.element.entries.some((entry) => {
+						if (entry.kind !== "prop" || entry.value.kind !== "static") return false;
+						const name = directStyleName(entry.name, component);
+						if (!name) return false;
+						const owners = styleOwners(name, entry.value.value, component.staticConfig);
+						return !!owners && conflictsWithInline(owners, dynamicOwners, memberOwners);
+					}) && !Object.entries(staticObject(props.style) ? props.style : {}).some(([name, value]) => {
+						const owners = styleOwners(name, value, component.staticConfig);
+						return !!owners && cssOwnersConflict(owners, dynamicOwners);
+					})) {
+						dynamicHostStyleProperties = properties;
+						laneAEntries = attempt;
+						for (const owner of dynamicOwners) laneAOwners.add(owner);
+						for (const owner of memberOwners) laneAMemberOwners.add(owner);
+						break;
+					}
+				}
+			}
+			const laneACoversAll = dynamicHostStyleProperties !== null && laneAEntries.length === dynamicStyleEntries.length;
+			const webClassEntries = dynamicHostStyleProperties === null ? dynamicStyleEntries : dynamicStyleEntries.filter((entry) => !laneAEntries.includes(entry));
+			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && !laneACoversAll && webClassEntries.length > 0 && webClassEntries.every((entry) => conditionalClassEntry(entry, component));
+			const themeEntry = componentOnlyProp("theme");
+			const themeInverseEntry = componentOnlyProp("themeInverse");
+			const themeBoundary = themeEntry.unknown || "theme" in props;
+			if (themeBoundary || themeInverseEntry.unknown || props.themeInverse) {
+				const themeProp = themeBoundary ? "theme" : "themeInverse";
+				return bailout(input, "local/unsupported-target", "Theme boundary candidates remain on the runtime path", input.element.span, {
+					rule: 4,
+					message: zeroThemeBoundaryMessage(input.element.component.name, themeProp)
+				});
+			}
+			const asChild = componentOnlyProp("asChild");
+			if (asChild.unknown || props.asChild) {
+				return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChild.span);
+			}
+			if (platform === "native" && ("group" in props || "container" in props || "containerName" in props || "containerType" in props)) {
+				return bailout(input, "local/unsupported-target", "Native group and container providers remain on the runtime path");
+			}
+			if (runtimeAnimationRequired && !cssAnimationDriver) {
+				return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", transitionEntry?.span, {
+					rule: 5,
+					message: zeroRuleMessage(5, { detail: `the animation configured on ${input.element.component.name}` })
+				});
+			}
+			if (platform === "web" && (dynamicStyleEntries.length > 0 || runtimeAnimationRequired) && !laneACoversAll && !supportsWebConditionalClasses && component.partialRuntimeSafe) {
+				const hasSpread = input.element.entries.some((entry) => entry.kind === "spread" && entry.value.kind !== "static");
+				const unsupportedRuntimeStyle = input.element.entries.find((entry) => entry.kind === "prop" && isStyleProp(entry.name, component) && !runtimeAnimationProps.has(entry.name) && !directStyleName(entry.name, component));
+				if (!hasSpread && !unsupportedRuntimeStyle) {
+					const dynamicOwners = /* @__PURE__ */ new Set();
+					let canProveDynamicOwnership = true;
+					for (const entry of dynamicStyleEntries) {
+						if (entry.kind !== "prop") continue;
+						const name = directStyleName(entry.name, component);
+						if (!name) {
+							canProveDynamicOwnership = false;
+							break;
+						}
+						const owners = dynamicStyleOwners(name, component.staticConfig);
+						if (!owners) {
+							canProveDynamicOwnership = false;
+							break;
+						}
+						for (const owner of owners) dynamicOwners.add(owner);
+					}
+					const staticStyleEntries = canProveDynamicOwnership ? input.element.entries.filter((entry) => {
+						if (entry.kind !== "prop" || entry.value.kind !== "static") return false;
+						if (runtimeAnimationProps.has(entry.name)) return false;
+						const name = directStyleName(entry.name, component);
+						if (!name) return false;
+						const owners = styleOwners(name, entry.value.value, component.staticConfig);
+						return !!owners && !cssOwnersConflict(owners, dynamicOwners);
+					}) : [];
+					if (staticStyleEntries.length > 0) {
+						const partialProps = {};
+						for (const entry of staticStyleEntries) {
+							if (entry.kind === "prop" && entry.value.kind === "static") {
+								partialProps[entry.name] = entry.value.value;
+							}
+						}
+						const partialSplit = resolveSplitStyles(partialProps, partialStaticConfig(component.staticConfig));
+						const partialInlineStyle = partialSplit?.viewProps?.style;
+						const hasPartialInlineStyle = staticObject(partialInlineStyle) && Object.keys(partialInlineStyle).length > 0;
+						if (partialSplit && !hasPartialInlineStyle) {
+							const artifacts2 = extractedStyleArtifacts(partialSplit, partialProps, options.tamaguiConfig, false);
+							if (artifacts2.className) {
+								if (input.element.form !== "jsx") {
+									const propsEdits = compiledPropsEdits(input, staticStyleEntries, objectClassName(artifacts2.className));
+									if (propsEdits) {
+										return {
+											ok: true,
+											edits: propsEdits,
+											css: artifacts2.css,
+											imports: [],
+											flattened: false
+										};
+									}
+								} else {
+									const [first2, ...rest2] = staticStyleEntries;
+									return {
+										ok: true,
+										edits: [{
+											start: first2.span.start,
+											end: first2.span.end,
+											content: jsxClassName(artifacts2.className),
+											origin: first2.span
+										}, ...rest2.map((entry) => ({
+											start: entry.span.start,
+											end: entry.span.end,
+											content: "",
+											origin: entry.span
+										}))],
+										css: artifacts2.css,
+										imports: [],
+										flattened: false
+									};
+								}
+							}
+						}
+					}
+				}
+			}
+			if (runtimeAnimationRequired) {
+				return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", transitionEntry?.span, {
+					rule: 5,
+					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)));
+			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);
+			}
+			const resolvedStyleStaticConfig = core.getStyleStaticConfig(component.staticConfig, core.getConfig());
+			const staticDefaultProps = resolvedStyleStaticConfig.defaultProps ?? {};
+			const defaultProps = platform === "web" && !component.staticConfig.isText && options.tamaguiConfig.settings.defaultPosition === "relative" && staticDefaultProps.position === void 0 ? core.mergeProps({ position: "relative" }, staticDefaultProps) : staticDefaultProps;
+			let completeProps = core.mergeProps(defaultProps, props);
+			if (platform === "native" && component.domTag && props.display === "flex") {
+				completeProps = core.mergeProps(core.mergeProps(defaultProps, NATIVE_FLEX_DEFAULTS), props);
+			}
+			const domStyleProgram = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "style" && entry.value.kind === "dom-style");
+			if (platform === "native" && !component.domTag && domStyleProgram) {
+				return bailout(input, "local/unsupported-target", "Native style() pieces remain on the runtime path");
+			}
+			const propsForConditional = (target, value) => {
+				const branchProps = {};
+				if (styleObjectStatic) branchProps.style = styleObjectStatic;
+				if (target.styleMember) {
+					branchProps.style = {
+						...styleObjectStatic,
+						[target.name]: value
+					};
+				}
+				for (const entry of input.element.entries) {
+					if (entry === target) {
+						branchProps[target.name] = value;
+						continue;
+					}
+					if (entry.kind === "child" || entry.value.kind !== "static") continue;
+					if (entry.kind === "spread") {
+						if (staticObject(entry.value.value)) Object.assign(branchProps, entry.value.value);
+					} else {
+						branchProps[entry.name] = entry.value.value;
+					}
+				}
+				if (component.domTag && branchProps.hidden) branchProps.display = "none";
+				if (resolvedCssTransition !== null) {
+					branchProps.transition = resolvedCssTransition;
+				}
+				if (component.domTag && platform === "native") {
+					for (const [name, styleKey] of DOM_STYLE_ATTRIBUTES) {
+						if (name in branchProps) {
+							branchProps[styleKey] = branchProps[name];
+							delete branchProps[name];
+						}
+					}
+				}
+				const branchCompleteProps = platform === "native" && component.domTag && branchProps.display === "flex" ? core.mergeProps(core.mergeProps(defaultProps, NATIVE_FLEX_DEFAULTS), branchProps) : core.mergeProps(defaultProps, branchProps);
+				if (platform === "native") {
+					for (const [name, value2] of Object.entries(branchCompleteProps)) {
+						const clause = isStyleProp(name, component) ? nativeClauseValue(value2) : null;
+						if (clause === null || clause === "live") continue;
+						if (clause.matched) branchCompleteProps[name] = clause.payload;
+						else delete branchCompleteProps[name];
+					}
+				}
+				return {
+					branchProps,
+					branchCompleteProps
+				};
+			};
+			if (platform === "native") {
+				const isClauseValue = (name, value) => isStyleProp(name, component) && (typeof value === "string" && flatClausePattern.test(value) || isClauseObjectValue(value));
+				const defaultVariants = component.staticConfig.defaultVariants ?? {};
+				const definitionCarriesClause = Object.entries(resolvedStyleStaticConfig.baseStyle ?? {}).some(([name, value]) => isClauseValue(name, value)) || Object.entries(component.staticConfig.variants ?? {}).some(([variantName, definitions]) => (completeProps[variantName] !== void 0 || defaultVariants[variantName] !== void 0) && staticObject(definitions) && Object.values(definitions).some((definition) => staticObject(definition) && Object.entries(definition).some(([name, value]) => isClauseValue(name, value))));
+				if (definitionCarriesClause) {
+					return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+				}
+				const reducedProps = {};
+				for (const [name, value] of Object.entries(completeProps)) {
+					const clause = isStyleProp(name, component) ? nativeClauseValue(value) : null;
+					if (clause === "live") {
+						return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+					}
+					if (clause === null) {
+						reducedProps[name] = value;
+						continue;
+					}
+					if (clause.matched) reducedProps[name] = clause.payload;
+				}
+				completeProps = reducedProps;
+				for (const entry of dynamicStyleEntries) {
+					if (entry.value.kind !== "conditional") continue;
+					for (const leaf of collectLeaves(entry.value.tree)) {
+						if (nativeClauseValue(leaf.value) !== "live") continue;
+						return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+					}
+				}
+			}
+			const split = resolveSplitStyles(completeProps, component.staticConfig, cssAnimationDriver, component.displayName);
+			if (!split) {
+				return bailout(input, "local/style-resolution-failed", "getSplitStyles returned no static result");
+			}
+			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,
+					message: zeroRuleMessage(5, { detail: `an enter or exit style program on ${input.element.component.name}` })
+				});
+			}
+			const flatTag = component.domTag ?? (typeof props.render === "string" ? props.render : typeof defaultProps.render === "string" ? defaultProps.render : component.staticConfig.isText ? "span" : "div");
+			const tagEdits = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
+				start: span.start,
+				end: span.end,
+				content: input.element.form === "jsx" ? flatTag : JSON.stringify(flatTag),
+				origin: span
+			}));
+			const isPropIgnored = (name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component) || componentOnlyProps.has(name);
+			const spreadReplacement = (form, entry) => spreadNonStyleReplacement(form, entry, isPropIgnored, (name, value) => {
+				if (platform !== "web") return [name, value];
+				if (name === "testID") return ["data-testid", value];
+				if (component.domTag && name === "for") return ["htmlFor", value];
+				if (component.domTag && name === "role" && value === "none") {
+					return ["role", "presentation"];
+				}
+				return [name, value];
+			});
+			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && isPropIgnored(entry.name) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some(isPropIgnored));
+			let invalidHostStyle;
+			for (const entry of input.element.entries) {
+				if (entry.kind === "prop") {
+					if (isInvalidHostStyleProp(entry.name, component)) {
+						invalidHostStyle = {
+							entry,
+							name: entry.name
+						};
+						break;
+					}
+					continue;
+				}
+				if (entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value)) {
+					const name = Object.keys(entry.value.value).find((name2) => isInvalidHostStyleProp(name2, component));
+					if (name) {
+						invalidHostStyle = {
+							entry,
+							name
+						};
+						break;
+					}
+				}
+			}
+			if (invalidHostStyle) {
+				return bailout(input, "local/unsupported-target", `"${invalidHostStyle.name}" is a text style prop and this component is not text. Use a Text-based component, or html.* for raw web elements.`, invalidHostStyle.entry.span);
+			}
+			if (platform === "native" && component.domTag) {
+				const mixedSpread = styleEntries.find((entry) => entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some((name) => !isPropIgnored(name)));
+				if (mixedSpread) {
+					return bailout(input, "local/unsafe-style-spread", "Native DOM prop mapping requires non-style spread props to remain on the runtime path", mixedSpread.span);
+				}
+			}
+			const webPropEdits = platform === "web" ? input.element.entries.flatMap((entry) => {
+				if (entry.kind !== "prop" || entry.name !== "testID") return [];
+				const content = input.source.slice(entry.span.start, entry.span.end);
+				const nameOffset = content.indexOf("testID");
+				if (nameOffset === -1) return [];
+				const alreadyQuoted = content[nameOffset - 1] === "\"" || content[nameOffset - 1] === "'";
+				return [{
+					start: entry.span.start + nameOffset,
+					end: entry.span.start + nameOffset + "testID".length,
+					content: input.element.form === "jsx" || alreadyQuoted ? "data-testid" : `'data-testid'`,
+					origin: entry.span
+				}];
+			}) : [];
+			const webDOMResult = platform === "web" && component.domTag ? webDOMProps(input, component.domTag) : {
+				edits: [],
+				additions: []
+			};
+			webPropEdits.push(...webDOMResult.edits);
+			if (platform === "native") {
+				const nativeStyleResolved = split.viewProps?.style;
+				let themedStyleKeys = null;
+				let nativeStyle = nativeStyleResolved;
+				if (staticObject(nativeStyleResolved)) {
+					for (const [styleKey, styleValue] of Object.entries(nativeStyleResolved)) {
+						if (!core.containsThemeRef(styleValue)) continue;
+						const themeKey = core.themeRefKey(styleValue);
+						if (!themeKey) {
+							return bailout(input, "local/dynamic-style-value", `Style ${styleKey} uses a theme value in a compound or modified position that compiled output cannot represent`);
+						}
+						;
+						(themedStyleKeys ||= {})[styleKey] = themeKey;
+					}
+					if (themedStyleKeys) {
+						const plain = {};
+						for (const [styleKey, styleValue] of Object.entries(nativeStyleResolved)) {
+							if (!(styleKey in themedStyleKeys)) plain[styleKey] = styleValue;
+						}
+						nativeStyle = plain;
+					}
+				} else if (core.containsThemeRef(nativeStyleResolved)) {
+					return bailout(input, "local/dynamic-style-value", "Theme values inside non-object native style output stay on the runtime path");
+				}
+				if (!isSerializableNativeStyle(nativeStyle)) {
+					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 nativeStyleImports = [{
+					content: `
+function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(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")) {
+					const mappingLocal = unusedIdentifier(input.source, `__TamaguiNativeMapping${input.element.span.start}`);
+					nativeFastPath = {
+						mappingLocal,
+						imports: [{
+							content: `
+const ${mappingLocal} = ${JSON.stringify(themedStyleKeys)};`,
+							origin: input.element.component.span
+						}]
+					};
+				}
+				if (component.domTag) {
+					if (themedStyleKeys) {
+						return bailout(input, "local/unsupported-target", "Theme values on DOM-tag native output stay on the runtime path");
+					}
+					const row = TAGS[component.domTag];
+					const basePrimitive = NATIVE_BACKING[row.backing].primitive;
+					let primitive = basePrimitive;
+					const propsResult = nativeDOMProps(input, component.domTag);
+					if (propsResult.diagnostic) {
+						return bailout(input, "local/unsupported-target", propsResult.diagnostic, propsResult.diagnosticSpan);
+					}
+					styleEntries = [.../* @__PURE__ */ new Set([...styleEntries, ...propsResult.consumed])];
+					let nativeDOMStyleSource = nativeStyleSource;
+					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))));
+						const itemSources = [];
+						for (const item of domStyleProgram.value.items) {
+							if (item.value.kind !== "static" || !staticObject(item.value.value)) {
+								return bailout(input, "local/dynamic-style-value", "Every style() handle in a style array must be statically evaluable", item.value.span);
+							}
+							if (Object.values(item.value.value).some((value2) => typeof value2 === "string" && nativeInitialKeywordPattern.test(value2))) {
+								return bailout(input, "local/unsupported-target", "Native DOM style() does not support the CSS initial keyword, matching the pinned upstream limitation", item.value.span);
+							}
+							let value;
+							if (needsRuntime) {
+								value = JSON.stringify(item.value.value);
+							} else {
+								const itemSplit = resolveSplitStyles(item.value.value, partialStaticConfig(component.staticConfig));
+								const itemStyle = itemSplit?.viewProps?.style;
+								if (!isSerializableNativeStyle(itemStyle) || core.containsThemeRef(itemStyle)) {
+									return bailout(input, "local/unsupported-target", "Native style() output is not serializable", item.value.span);
+								}
+								value = JSON.stringify(itemStyle ?? {});
+							}
+							const condition = item.condition ? input.source.slice(item.condition.start, item.condition.end) : null;
+							itemSources.push(condition ? `(${condition}) && ${value}` : value);
+						}
+						if (needsRuntime) {
+							primitive = `DOMRuntime${basePrimitive.slice("DOM".length)}`;
+							runtimeStyleSource = `[${itemSources.join(", ")}]`;
+						} else {
+							nativeDOMStyleSource = `[${[nativeDOMStyleSource, ...itemSources].join(", ")}]`;
+						}
+					}
+					const nativeLocal2 = unusedIdentifier(input.source, `__Tamagui${primitive}`);
+					const propertyContent = [
+						input.element.form === "jsx" ? `style={${nativeDOMStyleSource}}` : `style: ${nativeDOMStyleSource}`,
+						runtimeStyleSource ? input.element.form === "jsx" ? `__styles={${runtimeStyleSource}}` : `__styles: ${runtimeStyleSource}` : "",
+						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) => ({
+						start: span.start,
+						end: span.end,
+						content: input.element.form === "jsx" ? nativeLocal2 : JSON.stringify(nativeLocal2).slice(1, -1),
+						origin: span
+					}));
+					const literalEdits = [];
+					const imports = [...nativeStyleImports, {
+						content: `
+import { ${primitive} as ${nativeLocal2} } from ${JSON.stringify(NATIVE_PRIMITIVE_MODULE)}
+`,
+						origin: input.element.component.span
+					}];
+					if (NATIVE_BACKING[row.backing].wrapsLiteralText) {
+						const textLocal = unusedIdentifier(input.source, "__TamaguiDOMText");
+						const createElementLocal = unusedIdentifier(input.source, "__TamaguiCreateElement");
+						let needsText = false;
+						let needsCreateElement = false;
+						for (const entry of input.element.entries) {
+							if (entry.kind !== "child") continue;
+							if (entry.value.kind === "empty" || entry.value.kind === "element" || entry.value.kind === "static" && (entry.value.value === null || typeof entry.value.value === "boolean")) {
+								continue;
+							}
+							if (entry.value.kind !== "static" || entry.value.literalOrigin !== true || typeof entry.value.value !== "string" && typeof entry.value.value !== "number") {
+								return bailout(input, "local/unsupported-child", `html.${component.domTag} has a direct child that may render unwrapped native text; write a literal as JSX text or wrap the child in html.span`, entry.span);
+							}
+							needsText = true;
+							const child = input.source.slice(entry.span.start, entry.span.end);
+							if (input.element.form === "jsx") {
+								literalEdits.push({
+									start: entry.span.start,
+									end: entry.span.end,
+									content: `<${textLocal} __inherit>${child}</${textLocal}>`,
+									origin: entry.span
+								});
+							} else {
+								needsCreateElement = true;
+								literalEdits.push({
+									start: entry.span.start,
+									end: entry.span.end,
+									content: `${createElementLocal}(${textLocal}, { __inherit: true }, ${child})`,
+									origin: entry.span
+								});
+							}
+						}
+						if (needsText) {
+							imports.push({
+								content: `
+import { DOMText as ${textLocal} } from ${JSON.stringify(NATIVE_PRIMITIVE_MODULE)}
+`,
+								origin: input.element.component.span
+							});
+						}
+						if (needsCreateElement) {
+							imports.push({
+								content: `
+import { createElement as ${createElementLocal} } from "react"
+`,
+								origin: input.element.component.span
+							});
+						}
+					}
+					const [first3, ...rest3] = styleEntries;
+					const firstNonStyle3 = first3 ? spreadReplacement("jsx", first3) : "";
+					const propsEdits = input.element.form === "jsx" ? styleEntries.length === 0 ? [{
+						start: input.element.component.span.end,
+						end: input.element.component.span.end,
+						content: ` ${propertyContent}`,
+						origin: input.element.component.span
+					}] : [{
+						start: first3.span.start,
+						end: first3.span.end,
+						content: [propertyContent, firstNonStyle3].filter(Boolean).join(" "),
+						origin: first3.span
+					}, ...rest3.map((entry) => ({
+						start: entry.span.start,
+						end: entry.span.end,
+						content: spreadReplacement("jsx", entry),
+						origin: entry.span
+					}))] : compiledPropsEdits(input, styleEntries, propertyContent, (entry) => spreadReplacement(input.element.form, entry));
+					if (!propsEdits) {
+						return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}
+					return {
+						ok: true,
+						edits: [
+							...primitiveTagEdits,
+							...propsResult.edits,
+							...propsEdits,
+							...literalEdits
+						],
+						css: [],
+						imports,
+						flattened: true
+					};
+				}
+				const nativeName = component.staticConfig.isText ? "Text" : "View";
+				const useHostView = options.experimentalNativeFastPath && nativeName === "View" && isBareHostView(input.element);
+				const nativeExport = useHostView ? "unstable_NativeView" : nativeName;
+				const nativeLocal = unusedIdentifier(input.source, `__TamaguiNative${useHostView ? "HostView" : nativeName}`);
+				if (themedStyleKeys && options.disablePartialExtraction) {
+					return bailout(input, "local/dynamic-style-value", "Theme values require partial extraction, which is disabled");
+				}
+				if (dynamicStyleEntries.length > 0 || themedStyleKeys) {
+					if (nativeFastPath) {
+						const fastLocal = `__TamaguiNativeFast${nativeName}${input.element.span.start}`;
+						const tagEdits4 = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
+							start: span.start,
+							end: span.end,
+							content: fastLocal,
+							origin: span
+						}));
+						const [first4, ...rest4] = styleEntries;
+						const styleEdits = styleEntries.length === 0 ? [] : input.element.form === "jsx" ? [{
+							start: first4.span.start,
+							end: first4.span.end,
+							content: "",
+							origin: first4.span
+						}, ...rest4.map((entry) => ({
+							start: entry.span.start,
+							end: entry.span.end,
+							content: "",
+							origin: entry.span
+						}))] : compiledPropsEdits(input, styleEntries, `_expressions: []`);
+						if (!styleEdits) {
+							return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+						}
+						return {
+							ok: true,
+							edits: [...tagEdits4, ...styleEdits],
+							css: [],
+							imports: [
+								...nativeStyleImports,
+								...nativeFastPath.imports,
+								{
+									content: `
+const ${nativeLocal} = require('react-native').${nativeExport};`,
+									origin: input.element.component.span
+								},
+								{
+									content: `
+const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, ${nativeStyleSource}, ${nativeFastPath.mappingLocal});`,
+									origin: input.element.component.span
+								}
+							],
+							flattened: true
+						};
+					}
+					const stableLocal = `__TamaguiStable${nativeName}${input.element.span.start}`;
+					const expressions = [];
+					const plainDynamicParts = [];
+					const conditionalParts = [];
+					const conditionalKeys = /* @__PURE__ */ new Set();
+					const baseStyleForDiff = staticObject(nativeStyleResolved) ? nativeStyleResolved : {};
+					for (const entry of dynamicStyleEntries) {
+						if (entry.value.kind === "conditional" && directStyleName(entry.name, component) !== "opacity") {
+							let serializeNativeTree = function(node) {
+								if (node.kind === "leaf") {
+									const diff = leafDiffs.get(node) ?? {};
+									return JSON.stringify(diff);
+								}
+								const index = expressions.length;
+								expressions.push(input.source.slice(node.test.start, node.test.end));
+								return `expressions[${index}] ? ${serializeNativeTree(node.whenTrue)} : ${serializeNativeTree(node.whenFalse)}`;
+							};
+							const tree = entry.value.tree;
+							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);
+									}
+								}
+								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 {
+							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}]`);
+						}
+					}
+					const dynamicStyle = plainDynamicParts.join(", ");
+					const themedStyle = themedStyleKeys ? Object.entries(themedStyleKeys).map(([styleKey, themeKey]) => `${JSON.stringify(styleKey)}: _theme[${JSON.stringify(themeKey)}]?.get()`).join(", ") : null;
+					const styleParts = [
+						nativeStyleSource,
+						...themedStyle ? [`{ ${themedStyle} }`] : [],
+						...conditionalParts,
+						...dynamicStyle ? [`{ ${dynamicStyle} }`] : []
+					];
+					const tagEdits3 = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
+						start: span.start,
+						end: span.end,
+						content: stableLocal,
+						origin: span
+					}));
+					const [first3, ...rest3] = styleEntries;
+					const firstNonStyle3 = first3 ? spreadReplacement("jsx", first3) : "";
+					const expressionEdits = styleEntries.length === 0 ? [] : input.element.form === "jsx" ? [{
+						start: first3.span.start,
+						end: first3.span.end,
+						content: [expressions.length > 0 ? `_expressions={[${expressions.join(", ")}]}` : "", firstNonStyle3].filter(Boolean).join(" "),
+						origin: first3.span
+					}, ...rest3.map((entry) => ({
+						start: entry.span.start,
+						end: entry.span.end,
+						content: spreadReplacement("jsx", entry),
+						origin: entry.span
+					}))] : compiledPropsEdits(input, styleEntries, `_expressions: [${expressions.join(", ")}]`, (entry) => spreadReplacement(input.element.form, entry));
+					if (!expressionEdits) {
+						return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}
+					return {
+						ok: true,
+						edits: [...tagEdits3, ...expressionEdits],
+						css: [],
+						imports: [
+							...nativeStyleImports,
+							{
+								content: `
+const ${nativeLocal} = require('react-native').${nativeExport};`,
+								origin: input.element.component.span
+							},
+							{
+								content: `
+const ${stableLocal} = require('@tamagui/core')._withStableStyle(${nativeLocal}, (_theme, expressions) => [${styleParts.join(", ")}], ${themedStyleKeys ? "true" : "false"}, false);`,
+								origin: input.element.component.span
+							}
+						],
+						flattened: true
+					};
+				}
+				const styleContent = `style: ${nativeStyleSource}`;
+				const tagEdits2 = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
+					start: span.start,
+					end: span.end,
+					content: nativeLocal,
+					origin: span
+				}));
+				if (input.element.form !== "jsx") {
+					const propsEdits = compiledPropsEdits(input, styleEntries, styleContent, (entry) => spreadReplacement(input.element.form, entry));
+					if (!propsEdits) {
+						return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+					}
+					return {
+						ok: true,
+						edits: [...tagEdits2, ...propsEdits],
+						css: [],
+						imports: [...nativeStyleImports, {
+							content: `
+const ${nativeLocal} = require('react-native').${nativeExport};`,
+							origin: input.element.component.span
+						}],
+						flattened: true
+					};
+				}
+				if (styleEntries.length === 0) {
+					return {
+						ok: true,
+						edits: [...tagEdits2, {
+							start: input.element.component.span.end,
+							end: input.element.component.span.end,
+							content: ` style={${nativeStyleSource}}`,
+							origin: input.element.component.span
+						}],
+						css: [],
+						imports: [...nativeStyleImports, {
+							content: `
+const ${nativeLocal} = require('react-native').${nativeExport};`,
+							origin: input.element.component.span
+						}],
+						flattened: true
+					};
+				}
+				const [first2, ...rest2] = styleEntries;
+				const firstNonStyle2 = first2 ? spreadReplacement("jsx", first2) : "";
+				return {
+					ok: true,
+					edits: [
+						...tagEdits2,
+						...webPropEdits,
+						{
+							start: first2.span.start,
+							end: first2.span.end,
+							content: [`style={${nativeStyleSource}}`, firstNonStyle2].filter(Boolean).join(" "),
+							origin: first2.span
+						},
+						...rest2.map((entry) => ({
+							start: entry.span.start,
+							end: entry.span.end,
+							content: spreadReplacement("jsx", entry),
+							origin: entry.span
+						}))
+					],
+					css: [],
+					imports: [...nativeStyleImports, {
+						content: `
+const ${nativeLocal} = require('react-native').${nativeExport};`,
+						origin: input.element.component.span
+					}],
+					flattened: true
+				};
+			}
+			const artifacts = extractedStyleArtifacts(split, props, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
+			const className = artifacts.className;
+			const rawInlineStyle = split.viewProps?.style;
+			const inlineStyle = staticObject(rawInlineStyle) && Object.keys(rawInlineStyle).length > 0 ? rawInlineStyle : null;
+			if (rawInlineStyle && !inlineStyle && !isSerializableNativeStyle(rawInlineStyle)) {
+				return bailout(input, "local/unsupported-target", "Web inline style output is not a static serializable value");
+			}
+			const programCSS = [];
+			const programClassSources = [];
+			if (domStyleProgram?.kind === "prop" && domStyleProgram.value.kind === "dom-style") {
+				for (const item of domStyleProgram.value.items) {
+					if (item.value.kind !== "static" || !staticObject(item.value.value)) {
+						return bailout(input, "local/dynamic-style-value", "Every style() handle in a style array must be statically evaluable", item.value.span);
+					}
+					const itemSplit = resolveSplitStyles(item.value.value, partialStaticConfig(component.staticConfig));
+					if (!itemSplit) {
+						return bailout(input, "local/style-resolution-failed", "A style() handle could not be resolved", item.value.span);
+					}
+					const itemInline = itemSplit.viewProps?.style;
+					if (staticObject(itemInline) && Object.keys(itemInline).length > 0) {
+						return bailout(input, "local/unsupported-target", "Conditional web style() handles must lower to CSS classes", item.value.span);
+					}
+					const itemArtifacts = extractedStyleArtifacts(itemSplit, item.value.value, options.tamaguiConfig, false);
+					programCSS.push(...itemArtifacts.css);
+					if (itemArtifacts.className) {
+						const condition = item.condition ? input.source.slice(item.condition.start, item.condition.end) : null;
+						programClassSources.push(condition ? `(${condition}) && ${JSON.stringify(itemArtifacts.className)}` : JSON.stringify(itemArtifacts.className));
+					}
+				}
+			}
+			const baseStaticClasses = new Set(className.split(" ").filter(Boolean));
+			const staticClasses = new Set(baseStaticClasses);
+			const webConditionalCSS = [];
+			const webConditionalKeys = /* @__PURE__ */ new Set();
+			const webConditionalEntries = supportsWebConditionalClasses ? webClassEntries : [];
+			let webInlineStyle = inlineStyle;
+			const conditionalInlineProperties = [];
+			for (const entry of webConditionalEntries) {
+				let serializeWebTree = function(node) {
+					if (node.kind === "leaf") return JSON.stringify(leafClasses(node));
+					const test = input.source.slice(node.test.start, node.test.end);
+					const truePart = serializeWebTree(node.whenTrue);
+					const falsePart = serializeWebTree(node.whenFalse);
+					return `(${test}) ? ${truePart} : ${falsePart}`;
+				};
+				const tree = entry.value.kind === "conditional" ? entry.value.tree : null;
+				const domain = frontendClassDomain(entry, component);
+				if (!tree && !domain) continue;
+				const leaves = tree ? collectLeaves(tree) : domain.map((value) => ({
+					value,
+					dependencies: []
+				}));
+				const leafArtifactsMap = /* @__PURE__ */ new Map();
+				const leafStyles = /* @__PURE__ */ new Map();
+				const entryConditionalKeys = /* @__PURE__ */ new Set();
+				for (const leaf of leaves) {
+					const { branchProps, branchCompleteProps } = propsForConditional(entry, leaf.value);
+					const branchSplit = resolveSplitStyles(branchCompleteProps, component.staticConfig, cssAnimationDriver, component.displayName);
+					if (!branchSplit) {
+						return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch could not be resolved`, entry.value.span);
+					}
+					for (const viewPropsKey of /* @__PURE__ */ new Set([...Object.keys(branchSplit.viewProps ?? {}), ...Object.keys(split.viewProps ?? {})])) {
+						if (viewPropsKey === "className" || 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 conditional classes cannot express`, entry.value.span);
+						}
+					}
+					const branchInline = branchSplit.viewProps?.style;
+					if (branchInline !== void 0 && !staticObject(branchInline)) {
+						return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch style is not a static object`, entry.value.span);
+					}
+					leafStyles.set(leaf, staticObject(branchInline) ? branchInline : {});
+					const changedKeys = /* @__PURE__ */ new Set();
+					for (const key of /* @__PURE__ */ new Set([...Object.keys(branchSplit.classNames ?? {}), ...Object.keys(split.classNames ?? {})])) {
+						if (JSON.stringify(branchSplit.classNames?.[key]) !== JSON.stringify(split.classNames?.[key])) {
+							changedKeys.add(key);
+						}
+					}
+					const branchStyle = branchSplit.viewProps?.style;
+					const baseStyle = split.viewProps?.style;
+					if (staticObject(branchStyle) || staticObject(baseStyle)) {
+						for (const key of /* @__PURE__ */ new Set([...Object.keys(staticObject(branchStyle) ? branchStyle : {}), ...Object.keys(staticObject(baseStyle) ? baseStyle : {})])) {
+							if (JSON.stringify(staticObject(branchStyle) ? branchStyle[key] : void 0) !== JSON.stringify(staticObject(baseStyle) ? baseStyle[key] : void 0)) {
+								changedKeys.add(key);
+							}
+						}
+					}
+					for (const key of changedKeys) {
+						if (webConditionalKeys.has(key)) {
+							return bailout(input, "local/dynamic-style-value", `Multiple conditionals contribute ${key}; their interaction cannot be resolved per-branch`, entry.value.span);
+						}
+						entryConditionalKeys.add(key);
+					}
+					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));
+					leafArtifactsMap.set(leaf, {
+						classes: branchArtifacts.className.split(" ").filter(Boolean),
+						css: branchArtifacts.css
+					});
+				}
+				for (const key of entryConditionalKeys) webConditionalKeys.add(key);
+				const styleKeys = new Set(Object.keys(webInlineStyle ?? {}));
+				for (const leaf of leaves) {
+					for (const key of Object.keys(leafStyles.get(leaf) ?? {})) styleKeys.add(key);
+				}
+				for (const key of styleKeys) {
+					const serialized = leaves.map((leaf) => JSON.stringify(leafStyles.get(leaf)?.[key]));
+					if (serialized.every((value) => value === serialized[0])) {
+						if (serialized[0] === JSON.stringify(webInlineStyle?.[key])) continue;
+						const next = { ...webInlineStyle };
+						if (serialized[0] === void 0) delete next[key];
+						else next[key] = leafStyles.get(leaves[0])[key];
+						webInlineStyle = Object.keys(next).length > 0 ? next : null;
+						continue;
+					}
+					if (!tree) {
+						return bailout(input, "local/dynamic-style-value", `Conditional ${entry.name} branch changes style, which a class table cannot express`, entry.value.span);
+					}
+					const serializeValue = (node) => {
+						if (node.kind === "leaf") return String(JSON.stringify(leafStyles.get(node)?.[key]));
+						const test = input.source.slice(node.test.start, node.test.end);
+						return `(${test}) ? ${serializeValue(node.whenTrue)} : ${serializeValue(node.whenFalse)}`;
+					};
+					conditionalInlineProperties.push(`${JSON.stringify(key)}: (${serializeValue(tree)})`);
+				}
+				for (const artifacts2 of leafArtifactsMap.values()) {
+					webConditionalCSS.push(...artifacts2.css);
+				}
+				const allLeafArtifacts = leaves.map((l) => leafArtifactsMap.get(l));
+				const sharedInConditional = new Set(allLeafArtifacts[0]?.classes.filter((c) => allLeafArtifacts.every((a) => a.classes.includes(c))) ?? []);
+				for (const cls of baseStaticClasses) {
+					if (!sharedInConditional.has(cls)) staticClasses.delete(cls);
+				}
+				for (const cls of sharedInConditional) {
+					if (!baseStaticClasses.has(cls)) staticClasses.add(cls);
+				}
+				const leafClasses = (leaf) => {
+					const artifacts2 = leafArtifactsMap.get(leaf);
+					const only = artifacts2 ? artifacts2.classes.filter((item) => !sharedInConditional.has(item)) : [];
+					return only.join(" ");
+				};
+				if (leaves.every((leaf) => leafClasses(leaf) === "")) {} else if (tree) {
+					programClassSources.push(serializeWebTree(tree));
+				} else {
+					const table = Object.fromEntries(leaves.map((leaf) => [leaf.value, leafClasses(leaf)]));
+					const key = input.source.slice(entry.value.span.start, entry.value.span.end);
+					programClassSources.push(`(${JSON.stringify(table)})[${key}]`);
+				}
+			}
+			const webClassName = [...staticClasses].join(" ");
+			const hasStyleProgram = programClassSources.length > 0;
+			const classNameExpression = hasStyleProgram ? `[${[JSON.stringify(webClassName), ...programClassSources].join(", ")}].filter(Boolean).join(" ")` : null;
+			const webInlineProperties = [...dynamicHostStyleProperties ?? [], ...conditionalInlineProperties];
+			const serializedInlineStyle = serializedStyle(webInlineStyle, webInlineProperties);
+			const jsxWebStyle = classNameExpression ? [`className={${classNameExpression}}`, serializedInlineStyle ? `style={${serializedInlineStyle}}` : ""].filter(Boolean).join(" ") : jsxStyleAttributes(webClassName, webInlineStyle, webInlineProperties);
+			const objectWebStyle = classNameExpression ? [`className: ${classNameExpression}`, serializedInlineStyle ? `style: ${serializedInlineStyle}` : ""].filter(Boolean).join(", ") : objectStyleProperties(webClassName, webInlineStyle, webInlineProperties);
+			const webCSS = [.../* @__PURE__ */ new Set([
+				...artifacts.css,
+				...programCSS,
+				...webConditionalCSS
+			])];
+			const webExtraProps = serializedProps(input.element.form, webDOMResult.additions);
+			if (input.element.form !== "jsx") {
+				const replacement = [objectWebStyle, webExtraProps].filter(Boolean).join(", ");
+				const propsEdits = compiledPropsEdits(input, styleEntries, replacement, (entry) => spreadReplacement(input.element.form, entry));
+				if (!propsEdits) {
+					return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
+				}
+				return {
+					ok: true,
+					edits: [
+						...tagEdits,
+						...webPropEdits,
+						...propsEdits
+					],
+					css: webCSS,
+					imports: [],
+					flattened: true
+				};
+			}
+			if (styleEntries.length === 0) {
+				const attributes2 = [jsxWebStyle, webExtraProps].filter(Boolean).join(" ");
+				return {
+					ok: true,
+					edits: attributes2 ? [
+						...tagEdits,
+						...webPropEdits,
+						{
+							start: input.element.component.span.end,
+							end: input.element.component.span.end,
+							content: ` ${attributes2}`,
+							origin: input.element.component.span
+						}
+					] : [...tagEdits, ...webPropEdits],
+					css: webCSS,
+					imports: [],
+					flattened: true
+				};
+			}
+			const [first, ...rest] = styleEntries;
+			const firstNonStyle = first ? spreadReplacement("jsx", first) : "";
+			const attributes = [
+				jsxWebStyle,
+				webExtraProps,
+				firstNonStyle
+			].filter(Boolean).join(" ");
+			return {
+				ok: true,
+				edits: [
+					...tagEdits,
+					...webPropEdits,
+					{
+						start: first.span.start,
+						end: first.span.end,
+						content: attributes,
+						origin: first.span
+					},
+					...rest.map((entry) => ({
+						start: entry.span.start,
+						end: entry.span.end,
+						content: spreadReplacement("jsx", entry),
+						origin: entry.span
+					}))
+				],
+				css: webCSS,
+				imports: [],
+				flattened: true
+			};
+		}
+	};
+}
+function bailout(input, code, message, span = input.element.span, zero, prop) {
+	return {
+		ok: false,
+		bailout: {
+			code,
+			kind: "local",
+			message,
+			span,
+			component: input.element.component.name,
+			...prop && { prop },
+			...zero && {
+				zeroRule: zero.rule,
+				zeroMessage: zero.message
+			}
+		}
+	};
+}
+
+export { createComponentRegistry, createTamaguiCompilerHost };
+//# sourceMappingURL=compilerHost.mjs.map