@tamagui/static 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/compilerHost.cjs

@@ -0,0 +1,1695 @@
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var compilerHost_exports = {};
+__export(compilerHost_exports, { createTamaguiCompilerHost: () => createTamaguiCompilerHost });
+module.exports = __toCommonJS(compilerHost_exports);
+var import_compiler_core = require("@tamagui/compiler-core");
+var import_helpers = require("@tamagui/helpers");
+var import_dom = require("@tamagui/dom");
+var import_style_grammar = require("@tamagui/style-grammar");
+var import_web = require("@tamagui/web");
+var import_concatClassName = require("./extractor/concatClassName.cjs");
+var import_requireTamaguiCore = require("./helpers/requireTamaguiCore.cjs");
+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?.[import_helpers.StyleObjectIdentifier];
+		const styleRules = styleObject?.[import_helpers.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?.[import_helpers.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?.[import_helpers.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?.[import_helpers.StyleObjectIdentifier] === identifier)));
+		return buckets.theme.includes(identifier) ? identifierRules.map((rule) => rule.replace(":root:root:root.t_", ":root:root:root:root.t_")) : identifierRules;
+	});
+	return {
+		className: (0, import_concatClassName.concatClassName)(baseViewClassName, orderedIdentifiers, callerClassName),
+		css
+	};
+}
+function compiledPropsEdits(input, styleEntries, replacement) {
+	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;
+		if (index === 0) {
+			edits.push({
+				start,
+				end,
+				content: replacement,
+				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: "",
+			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",
+	"animateOnly",
+	"animatePresence",
+	"animatedBy",
+	"fontFamily",
+	"render"
+]);
+const runtimeAnimationProps = /* @__PURE__ */ new Set([
+	"transition",
+	"animation",
+	"animateOnly",
+	"animatePresence",
+	"animatedBy"
+]);
+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([
+		"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(import_dom.ATTRIBUTES).filter(([name, row]) => row.native !== "none" && row.nativeProp && row.nativeProp !== name && row.nativeProp in import_helpers.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 (import_dom.TAGS[tag].backing === "text" || import_dom.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 = (Object.hasOwn(import_dom.ATTRIBUTES, entry.name) ? import_dom.ATTRIBUTES[entry.name] : void 0) ?? (entry.name.startsWith("data-") ? import_dom.ATTRIBUTES["data-*"] : void 0);
+		const event = Object.hasOwn(import_dom.EVENTS, entry.name) ? import_dom.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" && import_dom.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") && import_dom.TAGS[tag].role) add("role", JSON.stringify(import_dom.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 = (0, import_requireTamaguiCore.requireTamaguiCore)(platform);
+	const firstThemeName = Object.keys(options.tamaguiConfig.themes ?? {})[0] ?? "";
+	const theme = options.tamaguiConfig.themes?.[firstThemeName] ?? {};
+	const modifierRegistry = (0, import_style_grammar.createModifierRegistry)({
+		mediaNames: options.tamaguiConfig.media ?? {},
+		themeNames: options.tamaguiConfig.themes ?? {}
+	}).registry;
+	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 = (0, import_style_grammar.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 = (0, import_style_grammar.parseTransition)(payload, transitionPresetNames);
+			if (!transition.ok) return null;
+			if (transition.value.kind === "global" || transition.value.entries.every((entry) => entry.timing.type === "css")) {
+				resolvedPayloads.push(payload);
+				continue;
+			}
+			if (transition.value.entries.length !== 1 || transition.value.entries[0].timing.type !== "preset") return null;
+			const preset = transitionPresets[transition.value.entries[0].timing.name];
+			if (typeof preset !== "string") return null;
+			const parsedPreset = (0, import_style_grammar.parseTransition)(preset);
+			if (!parsedPreset.ok || parsedPreset.value.kind !== "transition" || parsedPreset.value.entries.length !== 1 || parsedPreset.value.entries[0].property !== "all" || parsedPreset.value.entries[0].timing.type !== "css") return null;
+			resolvedPayloads.push(`all ${preset}`);
+		}
+		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 = new Map(options.componentModules.map((module2) => [module2.resolvedId, module2.moduleName]));
+	const componentsByModule = new Map(options.components.map((component) => [component.moduleName, component]));
+	const normalizeStaticConfig = (staticConfig) => staticConfig.styleFrontend?.normalizeStaticConfig?.(staticConfig, options.tamaguiConfig) ?? staticConfig;
+	const directStaticConfig = (element) => {
+		const identity = element.component.provenance;
+		if (!identity) return null;
+		const moduleName = modulesById.get(identity.resolvedId);
+		const info = (moduleName ? componentsByModule.get(moduleName) : void 0)?.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) || !Object.hasOwn(import_dom.TAGS, tag)) return null;
+		const row = import_dom.TAGS[tag];
+		const base = (row.backing === "text" || row.backing === "textinput" ? core.Text : core.View)?.staticConfig;
+		if (!base) return null;
+		const platformDefaults = platform === "web" ? {
+			...import_dom.DISPLAY_WEB_RESET[row.display],
+			...row.defaults,
+			...import_dom.TAG_WEB_DEFAULTS[tag]
+		} : {
+			...import_dom.NATIVE_ELEMENT_DEFAULTS,
+			...row.display === "block" ? import_dom.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: {
+					...import_helpers.validStyles,
+					...import_helpers.stylePropsText
+				},
+				defaultProps: {
+					...base.defaultProps,
+					...platformDefaults
+				}
+			})
+		};
+	};
+	const styledStaticConfig = (definition) => {
+		if (!definition || definition.options.kind !== "static") 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, compoundVariants, displayName, context, contextProps, ...defaultProps } = definition.options.value;
+		const baseClassName = definition.baseClassName?.kind === "static" && typeof definition.baseClassName.value === "string" ? definition.baseClassName.value : void 0;
+		return {
+			key: componentKey(definition.id, definition.name),
+			displayName: displayName || base.displayName,
+			staticConfig: normalizeStaticConfig({
+				...base.staticConfig,
+				variants: {
+					...base.staticConfig.variants,
+					...variants
+				},
+				compoundVariants: [...base.staticConfig.compoundVariants ?? [], ...compoundVariants ?? []],
+				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
+			})
+		};
+	};
+	const resolve = (element, styledDefinition) => {
+		const dom = domStaticConfig(element);
+		const resolved = dom ?? styledStaticConfig(styledDefinition) ?? directStaticConfig(element);
+		if (!resolved) return null;
+		const defaultProps = core.getDefaultProps(resolved.staticConfig) ?? {};
+		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 && (resolved.staticConfig.compoundVariants?.length ?? 0) === 0
+		};
+	};
+	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",
+		"animateOnly",
+		"animatePresence",
+		"animatedBy",
+		"render"
+	]);
+	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && !runtimeOnlyStyleProps.has(name);
+	const isInvalidHostStyleProp = (name, component) => {
+		const staticConfig = component.staticConfig;
+		const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
+		return name in import_helpers.stylePropsAll && !(0, import_web.isValidStyleKey)(name, validStyles, staticConfig.accept);
+	};
+	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 = "web";
+		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, {
+				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);
+		} finally {
+			if (previousStatic === void 0) delete process.env.IS_STATIC;
+			else process.env.IS_STATIC = previousStatic;
+			if (previousTarget === void 0) delete "web";
+			else process.env.TAMAGUI_TARGET = previousTarget;
+		}
+	};
+	const partialStaticConfig = (staticConfig) => ({
+		...staticConfig,
+		baseStyle: void 0,
+		defaultProps: {},
+		defaultVariants: void 0,
+		compoundVariants: [],
+		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) && !inlineStyle["$$css"] && 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?.[import_helpers.StyleObjectProperty];
+			if (typeof property === "string") owners.add(property);
+		}
+		return owners.size > 0 ? owners : null;
+	};
+	const dynamicStyleOwners = (name, staticConfig) => {
+		const owners = styleOwners(name, 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, 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));
+				if (!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))) 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;
+			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
+		},
+		developmentDebugInstrumentation,
+		lowerCandidate(input) {
+			const component = input.component;
+			if (!component.canFlatten) return bailout(input, "local/unsupported-target", 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`, 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: (0, import_compiler_core.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;
+			}
+			const disableOptimizationEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "disableOptimization");
+			if (disableOptimizationEntry || Object.hasOwn(props, "disableOptimization")) return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimizationEntry?.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" && !import_dom.NATIVE_INPUT_TYPES.includes(props.type)) return bailout(input, "local/unsupported-target", `input type ${props.type} has no native text-entry control`);
+			const dynamicStyleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && (entry.value.kind === "bailout" || entry.value.kind === "conditional") && isStyleProp(entry.name, component));
+			{
+				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 = core.getDefaultProps(component.staticConfig) ?? {};
+			const animationProps = core.mergeProps(animationDefaultProps, props);
+			const animationNames = /* @__PURE__ */ new Set([...input.element.entries.flatMap((entry) => entry.kind === "prop" && runtimeAnimationProps.has(entry.name) ? [entry.name] : []), ...Object.keys(animationProps).filter((name) => runtimeAnimationProps.has(name) && animationProps[name] !== void 0)]);
+			const animateOnlyEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "animateOnly");
+			if (animationNames.has("animateOnly")) return bailout(input, "local/unsupported-target", "Animated candidates remain on the runtime path", animateOnlyEntry?.span, {
+				rule: 5,
+				message: (0, import_compiler_core.zeroRuleMessage)(5, { detail: animateOnlyEntry ? `animateOnly on ${input.element.component.name}` : `animateOnly in the styled() definition of ${input.element.component.name}` })
+			});
+			const transitionEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "transition");
+			const animatedBy = typeof animationProps.animatedBy === "string" ? animationProps.animatedBy.trim() : null;
+			const namedAnimationDriver = animatedBy === null ? null : options.tamaguiConfig.animationDrivers?.[animatedBy];
+			const cssAnimationDriver = (platform === "web" && namedAnimationDriver?.outputStyle === "css" ? namedAnimationDriver : null) ?? (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" && name !== "animateOnly") || animatedByNeedsRuntime;
+			let dynamicHostStyleProperties = null;
+			if (resolvedCssTransition !== null && dynamicStyleEntries.length > 0 && !input.element.entries.some((entry) => entry.kind === "spread")) {
+				const seen = /* @__PURE__ */ new Set();
+				const properties = [];
+				const dynamicOwners = /* @__PURE__ */ new Set();
+				for (const entry of dynamicStyleEntries) {
+					if (entry.kind !== "prop" || entry.value.kind !== "bailout" && entry.value.kind !== "conditional") continue;
+					const name = directStyleName(entry.name, component);
+					if (name !== "opacity" && name !== "scale" || seen.has(name)) {
+						properties.length = 0;
+						break;
+					}
+					const owners = dynamicStyleOwners(name, component.staticConfig);
+					if (!owners) {
+						properties.length = 0;
+						break;
+					}
+					seen.add(name);
+					for (const owner of owners) dynamicOwners.add(owner);
+					const expression = input.source.slice(entry.value.span.start, entry.value.span.end);
+					properties.push(name === "opacity" ? `opacity: (${expression})` : `transform: "scale(" + (${expression}) + ")"`);
+				}
+				if (properties.length === dynamicStyleEntries.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 && cssOwnersConflict(owners, dynamicOwners);
+				})) dynamicHostStyleProperties = properties;
+			}
+			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicHostStyleProperties === null && dynamicStyleEntries.length === 1 && dynamicStyleEntries.every((entry) => entry.kind === "prop" && entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component));
+			if ("theme" in props || "themeInverse" in props) {
+				const themeProp = "theme" in props ? "theme" : "themeInverse";
+				return bailout(input, "local/unsupported-target", "Theme boundary candidates remain on the runtime path", input.element.span, {
+					rule: 4,
+					message: (0, import_compiler_core.zeroThemeBoundaryMessage)(input.element.component.name, themeProp)
+				});
+			}
+			const asChildEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "asChild");
+			if (asChildEntry || Object.hasOwn(props, "asChild")) return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChildEntry?.span);
+			if (platform === "native" && ("group" in props || "container" in props || "containerName" in props || "containerType" in props)) return bailout(input, "local/unsupported-target", "Native group containers 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: (0, import_compiler_core.zeroRuleMessage)(5, { detail: `the animation configured on ${input.element.component.name}` })
+			});
+			if (platform === "web" && (dynamicStyleEntries.length > 0 || runtimeAnimationRequired) && dynamicHostStyleProperties === null && !supportsWebConditionalClasses && component.partialRuntimeSafe) {
+				const hasSpread = input.element.entries.some((entry) => entry.kind === "spread");
+				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) && !partialInlineStyle["$$css"] && 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: (0, import_compiler_core.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 && dynamicHostStyleProperties === null && !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 staticDefaultProps = core.getDefaultProps(component.staticConfig) ?? {};
+			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, import_dom.NATIVE_FLEX_DEFAULTS), props);
+			if (platform === "native") {
+				const isClauseValue = (name, value) => isStyleProp(name, component) && typeof value === "string" && flatClausePattern.test(value);
+				const defaultVariants = component.staticConfig.defaultVariants ?? {};
+				if (Object.entries(completeProps).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))))) 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: (0, import_compiler_core.zeroRuleMessage)(5, { detail: `an enter or exit style program on ${input.element.component.name}` })
+			});
+			const domStyleProgram = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "style" && entry.value.kind === "dom-style");
+			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
+			}));
+			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && (isStyleProp(entry.name, component) || isInvalidHostStyleProp(entry.name, component)) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).every((name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component)));
+			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);
+			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 + 6,
+					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);
+			const unsafeSpread = input.element.entries.find((entry) => entry.kind === "spread" && !styleEntries.includes(entry) && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some((name) => isStyleProp(name, component)));
+			if (unsafeSpread) return bailout(input, "local/unsafe-style-spread", "A mixed style/non-style spread cannot be removed transactionally", unsafeSpread.span);
+			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 = import_dom.TAGS[component.domTag];
+					const basePrimitive = import_dom.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)))));
+						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 itemStyle = resolveSplitStyles(item.value.value, partialStaticConfig(component.staticConfig))?.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(3)}`;
+							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(import_dom.NATIVE_PRIMITIVE_MODULE)}
+`,
+						origin: input.element.component.span
+					}];
+					if (import_dom.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(import_dom.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 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: styleEntries[0].span.start,
+						end: styleEntries[0].span.end,
+						content: propertyContent,
+						origin: styleEntries[0].span
+					}, ...styleEntries.slice(1).map((entry) => ({
+						start: entry.span.start,
+						end: entry.span.end,
+						content: "",
+						origin: entry.span
+					}))] : compiledPropsEdits(input, styleEntries, propertyContent);
+					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") {
+						const branchDiffs = [];
+						for (const branchValue of [entry.value.whenTrue, entry.value.whenFalse]) {
+							const branchSplit = resolveSplitStyles({
+								...completeProps,
+								[entry.name]: branchValue
+							}, 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);
+							branchDiffs.push(diff);
+						}
+						for (const diff of branchDiffs) for (const key of Object.keys(diff)) conditionalKeys.add(key);
+						const index = expressions.length;
+						expressions.push(input.source.slice(entry.value.test.start, entry.value.test.end));
+						conditionalParts.push(`expressions[${index}] ? ${JSON.stringify(branchDiffs[0])} : ${JSON.stringify(branchDiffs[1])}`);
+					} 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 expressionEdits = styleEntries.length === 0 ? [] : input.element.form === "jsx" ? [{
+						start: first3.span.start,
+						end: first3.span.end,
+						content: expressions.length > 0 ? `_expressions={[${expressions.join(", ")}]}` : "",
+						origin: first3.span
+					}, ...rest3.map((entry) => ({
+						start: entry.span.start,
+						end: entry.span.end,
+						content: "",
+						origin: entry.span
+					}))] : compiledPropsEdits(input, styleEntries, `_expressions: [${expressions.join(", ")}]`);
+					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);
+					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;
+				return {
+					ok: true,
+					edits: [
+						...tagEdits2,
+						...webPropEdits,
+						{
+							start: first2.span.start,
+							end: first2.span.end,
+							content: `style={${nativeStyleSource}}`,
+							origin: first2.span
+						},
+						...rest2.map((entry) => ({
+							start: entry.span.start,
+							end: entry.span.end,
+							content: "",
+							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) && !rawInlineStyle["$$css"] && 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) && !itemInline["$$css"] && 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));
+				}
+			}
+			let webClassName = className;
+			const webConditionalCSS = [];
+			const webConditionalEntries = supportsWebConditionalClasses ? dynamicStyleEntries.filter((entry) => entry.value.kind === "conditional") : [];
+			for (const entry of webConditionalEntries) {
+				if (entry.value.kind !== "conditional") continue;
+				const branches = [];
+				for (const branchValue of [entry.value.whenTrue, entry.value.whenFalse]) {
+					const branchSplit = resolveSplitStyles({
+						...completeProps,
+						[entry.name]: branchValue
+					}, 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") 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 branchArtifacts = extractedStyleArtifacts(branchSplit, {
+						...props,
+						[entry.name]: branchValue
+					}, options.tamaguiConfig, !component.domTag, Boolean(component.staticConfig.styleFrontend));
+					branches.push({
+						classes: branchArtifacts.className.split(" ").filter(Boolean),
+						css: branchArtifacts.css
+					});
+				}
+				const [whenTrue, whenFalse] = branches;
+				const shared = new Set(whenTrue.classes.filter((item) => whenFalse.classes.includes(item)));
+				const trueOnly = whenTrue.classes.filter((item) => !shared.has(item));
+				const falseOnly = whenFalse.classes.filter((item) => !shared.has(item));
+				webClassName = [...shared].join(" ");
+				webConditionalCSS.push(...whenTrue.css, ...whenFalse.css);
+				if (trueOnly.length > 0 || falseOnly.length > 0) {
+					const test = input.source.slice(entry.value.test.start, entry.value.test.end);
+					programClassSources.push(`(${test}) ? ${JSON.stringify(trueOnly.join(" "))} : ${JSON.stringify(falseOnly.join(" "))}`);
+				}
+			}
+			const classNameExpression = programClassSources.length > 0 ? `[${[JSON.stringify(webClassName), ...programClassSources].join(", ")}].filter(Boolean).join(" ")` : null;
+			const serializedInlineStyle = serializedStyle(inlineStyle, dynamicHostStyleProperties ?? []);
+			const jsxWebStyle = classNameExpression ? [`className={${classNameExpression}}`, serializedInlineStyle ? `style={${serializedInlineStyle}}` : ""].filter(Boolean).join(" ") : jsxStyleAttributes(webClassName, inlineStyle, dynamicHostStyleProperties ?? []);
+			const objectWebStyle = classNameExpression ? [`className: ${classNameExpression}`, serializedInlineStyle ? `style: ${serializedInlineStyle}` : ""].filter(Boolean).join(", ") : objectStyleProperties(webClassName, inlineStyle, dynamicHostStyleProperties ?? []);
+			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);
+				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 attributes = [jsxWebStyle, webExtraProps].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: "",
+						origin: entry.span
+					}))
+				],
+				css: webCSS,
+				imports: [],
+				flattened: true
+			};
+		}
+	};
+}
+function bailout(input, code, message, span = input.element.span, zero) {
+	return {
+		ok: false,
+		bailout: {
+			code,
+			kind: "local",
+			message,
+			span,
+			component: input.element.component.name,
+			...zero && {
+				zeroRule: zero.rule,
+				zeroMessage: zero.message
+			}
+		}
+	};
+}