@zerodep-dev/vue-tsx-pro-tsx 0.0.0-stage → 0.1.0

package/dist/compiler-BDi92tYb.js

@@ -0,0 +1,1647 @@
+import { n as languageOf, r as parserPlugins, t as STYLE_SOURCE } from "./detect-s3UM7xuN.js";
+import { parseAsync, transformAsync, transformFromAstAsync, types } from "@babel/core";
+import typescript from "@babel/plugin-transform-typescript";
+import vueJsx from "@vue/babel-plugin-jsx";
+//#region src/compiler/errors.ts
+/** 生成指向某个节点的 RunesError（由调用方 throw） */
+function fail(path, message) {
+	const error = path.buildCodeFrameError(message);
+	const loc = path.node.loc;
+	if (loc) error.loc = {
+		start: { ...loc.start },
+		end: { ...loc.end }
+	};
+	return error;
+}
+/** 生成指向某个节点的编译警告 */
+function warning(path, message) {
+	const { loc } = fail(path, message);
+	return {
+		message,
+		loc,
+		frame: path.buildCodeFrameError(message).message
+	};
+}
+//#endregion
+//#region src/compiler/ast.ts
+/** 与符文无关的 AST 判断与改写工具 */
+/** 组件边界：第一个参数是 setup 函数的调用 */
+const COMPONENT_CALLEES = /* @__PURE__ */ new Set(["_component", "defineComponent"]);
+/** 是否是组件（_component 或 Vue 的 defineComponent）的 setup 函数 */
+function isComponentSetup(path) {
+	const call = path.parentPath;
+	return !!call?.isCallExpression() && call.node.arguments[0] === path.node && types.isIdentifier(call.node.callee) && COMPONENT_CALLEES.has(call.node.callee.name);
+}
+/** 由我们编译 props 的组件：_component(setup)。Vue 自己的 defineComponent 保持原样 */
+function isPropsComponent(path) {
+	const call = path.parentPath;
+	return !!call?.isCallExpression() && call.node.arguments[0] === path.node && types.isIdentifier(call.node.callee, { name: "_component" });
+}
+/**
+* 是否位于组件的渲染函数（setup 返回的函数）之内，包括其中嵌套的回调。
+* 渲染函数每次更新都会重新执行，在里面创建的状态会被重置。
+*/
+function isInsideRender(path) {
+	return renderFunctionOf(path) !== null;
+}
+/** path 所在的渲染函数（组件函数体返回的那个函数）；不在渲染函数里时 null */
+function renderFunctionOf(path) {
+	for (let fn = path.getFunctionParent(); fn; fn = fn.parentPath?.getFunctionParent() ?? null) {
+		const parent = fn.parentPath;
+		if (parent?.isReturnStatement()) {
+			const owner = parent.getFunctionParent();
+			if (owner && isComponentSetup(owner)) return fn;
+		}
+		if (parent?.isArrowFunctionExpression() && parent.node.body === fn.node && isComponentSetup(parent)) return fn;
+	}
+	return null;
+}
+/** 是否是组件元素（大写开头或 a.B 形式的标签）的直接子节点表达式 */
+function isComponentChild(container) {
+	const element = container.parentPath;
+	if (!container.isJSXExpressionContainer() || !element?.isJSXElement()) return false;
+	const name = element.node.openingElement.name;
+	return types.isJSXMemberExpression(name) || types.isJSXIdentifier(name) && /^[A-Z]/.test(name.name);
+}
+/** 是否是从 vue 导入的 watch 的监听源：watch(x, …) 或 watch([x, y], …) */
+function isVueWatchSource(path) {
+	const parent = path.parentPath;
+	const call = parent?.isArrayExpression() ? parent.parentPath : parent;
+	if (!call?.isCallExpression()) return false;
+	const source = call.node.arguments[0];
+	if (source !== path.node && source !== parent?.node) return false;
+	const callee = call.node.callee;
+	if (!types.isIdentifier(callee)) return false;
+	const specifier = call.scope.getBinding(callee.name)?.path;
+	return !!specifier?.isImportSpecifier() && types.isIdentifier(specifier.node.imported, { name: "watch" }) && specifier.parent.source.value === "vue";
+}
+/** 引用出现在类型里（typeof x、类型注解）：不是运行时读取，不改写 */
+function isInTypePosition(path) {
+	return !!path.findParent((p) => p.isTSType() || p.isTSTypeQuery() || p.isTSInterfaceDeclaration());
+}
+/** 路径对应的节点是否仍在树上（避免对已被替换的旧路径重复改写） */
+function isAttached(path) {
+	const container = path.container;
+	if (!container) return false;
+	return (path.listKey ? container[path.key] : container[path.key]) === path.node;
+}
+/** 箭头函数简写体先补成块，再在开头插入声明 */
+function prependToBody(fn, statements) {
+	if (!statements.length) return;
+	const body = fn.get("body");
+	if (body.isBlockStatement()) body.unshiftContainer("body", statements);
+	else body.replaceWith(types.blockStatement([...statements, types.returnStatement(body.node)]));
+}
+/** 把标识符 x 改成 x.value（JSX 标签名改成 <x.value />，对象简写改成 { x: x.value }） */
+function replaceWithValue(path) {
+	const node = path.node;
+	if (types.isJSXIdentifier(node)) {
+		path.replaceWith(types.jsxMemberExpression(types.jsxIdentifier(node.name), types.jsxIdentifier("value")));
+		return;
+	}
+	if (!types.isIdentifier(node)) return;
+	const parent = path.parentPath;
+	const property = parent?.isAssignmentPattern() ? parent.parentPath : parent;
+	const value = parent?.isAssignmentPattern() ? parent.node : node;
+	if (property?.isObjectProperty() && property.node.shorthand && property.node.value === value) property.node.shorthand = false;
+	path.replaceWith(types.memberExpression(types.identifier(node.name), types.identifier("value")));
+	path.skip();
+}
+/**
+* 一次写入里，属于该绑定的所有目标标识符。
+* 支持 x = 1、x += 1、x++、[a, b] = [b, a]、({ x } = obj)、for (x of list)
+*/
+function writeTargets(violation, binding) {
+	let target;
+	switch (violation.node.type) {
+		case "AssignmentExpression":
+		case "ForOfStatement":
+		case "ForInStatement":
+			target = violation.get("left");
+			break;
+		case "UpdateExpression":
+			target = violation.get("argument");
+			break;
+		default: throw fail(violation, `不支持这种方式修改响应式变量 ${binding.identifier.name}`);
+	}
+	if (target.isIdentifier()) return [target];
+	const found = [];
+	target.traverse({ Identifier(path) {
+		const parent = path.parentPath;
+		if (parent.isObjectProperty() && parent.node.key === path.node && !parent.node.computed || path.node.name !== binding.identifier.name) return;
+		if (path.scope.getBinding(path.node.name) === binding) found.push(path);
+	} });
+	return found;
+}
+/** 在一条变量声明里找到声明 name 的那一项 */
+function findDeclarator(declaration, name) {
+	return declaration.node.declarations.find((d) => Object.keys(types.getBindingIdentifiers(d.id)).includes(name));
+}
+//#endregion
+//#region src/compiler/runes.ts
+/** 符文的名单与识别 */
+/** 所有符文的全局名；只有未被本地变量遮蔽时才当作符文 */
+const RUNE_GLOBALS = /* @__PURE__ */ new Set([
+	"_state",
+	"_derived",
+	"_effect",
+	"_bindable",
+	"_bind",
+	"_fromRef",
+	"_toRef",
+	"_untrack"
+]);
+/** 带成员的符文 */
+const MEMBER_RUNES = /* @__PURE__ */ new Set([
+	"_state.raw",
+	"_state.snapshot",
+	"_derived.by",
+	"_effect.pre",
+	"_effect.root"
+]);
+/** _bind 的修饰符，与 Vue v-model 的修饰符一致，只用于原生输入元素 */
+const BIND_MODIFIERS = /* @__PURE__ */ new Set([
+	"trim",
+	"number",
+	"lazy"
+]);
+/** 判断调用是否为某个符文（且没有被同名本地变量遮蔽） */
+function runeOf(path) {
+	const chain = memberChain(path.node.callee);
+	if (!chain) return null;
+	const [owner, ...members] = chain;
+	if (!RUNE_GLOBALS.has(owner) || path.scope.hasBinding(owner)) return null;
+	if (!members.length) return owner;
+	if (owner === "_bind") {
+		const unknown = members.find((member) => !BIND_MODIFIERS.has(member));
+		if (unknown) throw fail(path, `不支持 _bind.${unknown}，可用的修饰符只有 trim、number、lazy`);
+		return "_bind";
+	}
+	const name = `${owner}.${members.join(".")}`;
+	if (MEMBER_RUNES.has(name)) return name;
+	throw fail(path, `不支持 ${name}，可用的只有 ${[...MEMBER_RUNES].join("、")} 与 _bind 的修饰符`);
+}
+/** a.b.c → ['a', 'b', 'c']；不是纯标识符链时返回 null */
+function memberChain(node) {
+	if (types.isIdentifier(node)) return [node.name];
+	if (types.isMemberExpression(node) && !node.computed && types.isIdentifier(node.property)) {
+		const chain = memberChain(node.object);
+		return chain && [...chain, node.property.name];
+	}
+	return null;
+}
+//#endregion
+//#region src/compiler/bind.ts
+/**
+* JSX 的双向绑定：下划线属性（_value、_open…）的值是可写的位置时编译成 Vue 的 v-model 协议；
+* 原生输入框的修饰符写成 _bind.trim(x)；Vue 指令报错并给出 TSX 写法
+*/
+/** Vue 指令在 TSX 里都有更自然的写法 */
+const DIRECTIVE_HINTS = {
+	model: "双向绑定直接写下划线属性：<Switch _checked={on} />、<input _value={name} />；去空白等修饰符写 _value={_bind.trim(name)}",
+	show: "显示与隐藏请用原生属性 hidden={!visible}，或条件渲染 {visible && <X />}",
+	slots: "没有插槽：内容写成子节点（children），具名内容作为 JSX prop 传入",
+	html: "请改用 innerHTML={html}",
+	text: "请直接把文本写成子节点 {text}"
+};
+/** 每个 JSX 属性的检查：TSX 里有更自然写法的 Vue 指令属性（v-html、v-model…）直接报错，并给出替代写法 */
+function checkAttribute(attribute) {
+	const { name } = attribute.node;
+	const full = types.isJSXNamespacedName(name) ? `${name.namespace.name}:${name.name.name}` : name.name;
+	if (!full.startsWith("v-")) return;
+	const directive = full.slice(2).split(/[:_]/)[0];
+	throw fail(attribute, DIRECTIVE_HINTS[directive] ?? `不支持 Vue 指令 ${full}：请改用 ref 回调或组合式函数`);
+}
+/** 第 1 步：_bind 只剩原生输入框的修饰符写法（_bind.trim / .number / .lazy，可以连写） */
+function checkBindCall(call) {
+	if (memberChain(call.node.callee).length > 1) return;
+	if (call.node.arguments.length === 2) throw fail(call, "不再需要 _bind(get, set)：写成 _value={取值} onUpdate:_value={(next) => …}，写了 onUpdate:_value 就由它处理更新");
+	throw fail(call, "不用再写 _bind：下划线属性的值是可写的变量或对象属性时自动双向绑定，直接写 _value={x}；_bind 只用于原生输入框的修饰符（_bind.trim / .number / .lazy）");
+}
+/**
+* 下划线属性的值是可写的位置时包成 _bind(x)，之后与修饰符写法一起按 rewriteBind 改写（第 1 步之后、建立绑定之前）：
+*   <Switch _checked={on} />          → 双向（on 是 let 声明的 _state）
+*   <TextField _value={form.name} />  → 双向（对象属性）
+*   <Select _value="a" /> <Steps _current={step + 1} />  → 单向：字面量、表达式、函数调用、const 派生、普通 prop
+* 组件上另写了 onUpdate:_x（或展开的对象里有这个键）时由它处理更新，不再自动写回。
+* 原生元素的 _value、_checked、<details> 的 _open、文件输入的 _files 只用于绑定，值不可写时报错；
+* <input type="number"> 与 type="range" 的 _value 自动按数字读回（同 Svelte）。返回是否包过：包过要重建作用域
+*/
+function wrapAutoBinds(program, writable) {
+	let wrapped = false;
+	program.traverse({ JSXAttribute(attribute) {
+		const { name } = attribute.node;
+		if (!types.isJSXIdentifier(name) || !name.name.startsWith("_")) return;
+		const opening = attribute.parent;
+		const native = isNativeTag(opening.name);
+		const value = attribute.get("value");
+		if (!value.isJSXExpressionContainer()) {
+			if (native) throw fail(attribute, nativeMessage(name.name));
+			return;
+		}
+		const expression = value.get("expression");
+		if (expression.isJSXEmptyExpression()) return;
+		if (expression.isCallExpression() && memberChain(expression.node.callee)?.[0] === "_bind") return;
+		if (!native && hasUpdateHandler(opening, name.name)) return;
+		const target = unwrapTypes$1(expression);
+		if (!isWritableTarget(target, writable)) {
+			if (native) throw fail(attribute, nativeMessage(name.name));
+			return;
+		}
+		const callee = native && name.name === "_value" && isNumericInput(opening) ? types.memberExpression(types.identifier("_bind"), types.identifier("number")) : types.identifier("_bind");
+		expression.replaceWith(types.callExpression(callee, [target.node]));
+		wrapped = true;
+	} });
+	return wrapped;
+}
+const isNativeTag = (tag) => types.isJSXIdentifier(tag) && /^[a-z]/.test(tag.name);
+const nativeMessage = (name) => `原生元素的 ${name} 用于双向绑定，值要是可写的变量或对象属性；只给值时写 ${name.slice(1)}={…}`;
+/** 去掉只给类型检查看的外壳：x!、x as T、x satisfies T、(x) */
+function unwrapTypes$1(path) {
+	let current = path;
+	while (current.isTSNonNullExpression() || current.isTSAsExpression() || current.isTSSatisfiesExpression() || current.isTSTypeAssertion() || current.isParenthesizedExpression()) current = current.get("expression");
+	return current;
+}
+/** 可写的位置：能整体赋值的响应式变量，或对象属性（form.name、rows[i].qty；可选链 a?.b 不能赋值） */
+function isWritableTarget(path, writable) {
+	if (path.isMemberExpression()) return true;
+	return path.isIdentifier() && writable(path);
+}
+/** 元素上写了 onUpdate:_x：属性 onUpdate:_x={…}，或展开的对象字面量里有 'onUpdate:_x' 键 */
+function hasUpdateHandler(opening, prop) {
+	const event = `onUpdate:${prop}`;
+	return opening.attributes.some((attribute) => {
+		if (types.isJSXAttribute(attribute)) {
+			const { name } = attribute;
+			return types.isJSXNamespacedName(name) && name.namespace.name === "onUpdate" && name.name.name === prop;
+		}
+		return types.isObjectExpression(attribute.argument) && attribute.argument.properties.some((property) => types.isObjectProperty(property) && types.isStringLiteral(property.key, { value: event }));
+	});
+}
+/** <input type="number"> 或 type="range"：读回的值按数字 */
+function isNumericInput(opening) {
+	if (!types.isJSXIdentifier(opening.name, { name: "input" })) return false;
+	return opening.attributes.some((attribute) => types.isJSXAttribute(attribute) && types.isJSXIdentifier(attribute.name, { name: "type" }) && types.isStringLiteral(attribute.value) && (attribute.value.value === "number" || attribute.value.value === "range"));
+}
+/**
+* _属性={_bind(x)} → Vue 的 v-model 协议（此时 x 已改写为 x.value）；_bind(x) 由 wrapAutoBinds 包上，
+* 修饰符写法 _bind.trim(x) 由作者写：
+*   <Switch _checked={on} />             → <Switch _checked={on.value} onUpdate:_checked={($event) => (on.value = $event)} />
+*   <input _value={_bind.trim(name)} />  → <input v-model_trim={name.value} />
+* 可双向绑定的属性一律以下划线开头（组件的 _bindable prop 本身就叫 _value、_open；原生元素的 _value、_checked、
+* <details> 的 _open、文件输入的 _files 是绑定专用的写法），一眼看出哪些属性能双向绑定。
+* 组件直接写出值与更新回调（同 vue-jsx 对 v-model:x 的输出），回调就能被渲染优化缓存；
+* 原生输入框仍交给 vue-jsx 的 v-model 指令。属性名就是 prop 本身，补全、跳转、重命名都由 TypeScript 原生支持。
+*/
+function rewriteBind(call) {
+	const container = call.parentPath;
+	const attribute = container.parentPath;
+	if (!container.isJSXExpressionContainer() || !attribute?.isJSXAttribute() || !types.isJSXIdentifier(attribute.node.name)) throw fail(call, "_bind 的修饰符只能写在 JSX 属性的值里，例如 <input _value={_bind.trim(name)} />");
+	const name = attribute.node.name.name;
+	if (!name.startsWith("_")) throw fail(attribute, `可双向绑定的属性以下划线开头：写成 _${name}={…}`);
+	const [target, ...extra] = call.node.arguments;
+	if (!types.isMemberExpression(target) || extra.length) throw fail(call, "_bind 修饰符的参数必须是 let 声明的响应式变量（_state / _bindable / _fromRef）或对象属性，例如 _bind.trim(form.name)");
+	const prop = name;
+	const modifiers = memberChain(call.node.callee).slice(1);
+	const tag = attribute.parent.name;
+	if (isNativeTag(tag)) {
+		const property = prop.slice(1);
+		const native = NATIVE_BINDINGS[property];
+		if (native && native.tag !== tag.name) throw fail(attribute, `${prop} 的绑定只能写在 <${native.tag}> 上`);
+		if (native) {
+			if (modifiers.length) throw fail(call, `${prop} 的绑定没有修饰符`);
+			bindNativeProperty(call, attribute, target, property, native);
+			return;
+		}
+		if (property !== "value" && property !== "checked") throw fail(attribute, `原生元素能绑定 _value、_checked（多选组绑到数组）、<details> 的 _open、文件输入的 _files，不能绑定 ${prop}；单选组请用 RadioGroup，或 checked={x === 值} 加 onChange`);
+		attribute.node.name = types.jsxIdentifier(["v-model", ...modifiers].join("_"));
+	} else {
+		if (modifiers.length) throw fail(call, "_bind 的修饰符只用于原生输入元素");
+		const event = types.identifier("$event");
+		const update = types.arrowFunctionExpression([event], types.assignmentExpression("=", types.cloneNode(target), types.identifier("$event")));
+		attribute.insertAfter(types.jsxAttribute(types.jsxNamespacedName(types.jsxIdentifier("onUpdate"), types.jsxIdentifier(prop)), types.jsxExpressionContainer(update)));
+	}
+	call.replaceWith(target);
+}
+/** v-model 以外、原生元素能绑定的属性：只能写在哪个标签上，元素上哪个事件之后读回，读回时能不能写到元素上 */
+const NATIVE_BINDINGS = {
+	open: {
+		tag: "details",
+		event: "onToggle",
+		readonly: false
+	},
+	files: {
+		tag: "input",
+		event: "onChange",
+		readonly: true
+	}
+};
+/**
+* 原生元素上 v-model 管不到的属性：值照常交给元素（只读的不交），元素的事件之后把属性读回变量：
+*   <details _open={expanded} /> → <details open={expanded.value} onToggle={(e) => (expanded.value = e.currentTarget.open)} />
+*   <input type="file" _files={picked} /> → <input type="file" onChange={(e) => (picked.value = e.currentTarget.files)} />
+*/
+function bindNativeProperty(call, attribute, target, prop, native) {
+	if (attribute.parent.attributes.some((other) => types.isJSXAttribute(other) && types.isJSXIdentifier(other.name, { name: native.event }))) throw fail(attribute, `_${prop} 的绑定要占用 ${native.event}：请去掉 ${native.event}，或改写 ${prop}={…} 并在 ${native.event} 里自己读回 ${prop}`);
+	const event = types.identifier("event");
+	const update = types.arrowFunctionExpression([event], types.assignmentExpression("=", types.cloneNode(target), types.memberExpression(types.memberExpression(event, types.identifier("currentTarget")), types.identifier(prop))));
+	attribute.insertAfter(types.jsxAttribute(types.jsxIdentifier(native.event), types.jsxExpressionContainer(update)));
+	if (native.readonly) attribute.remove();
+	else {
+		attribute.node.name = types.jsxIdentifier(prop);
+		call.replaceWith(target);
+	}
+}
+//#endregion
+//#region src/compiler/imports.ts
+/** 编译产物用到的运行时函数：按需生成不冲突的本地名，最后每个模块合成一条 import */
+/** 编译产物里 prop / bindable 等运行时函数的来源 */
+const RUNTIME_MODULE = "@zerodep-dev/vue-tsx-pro-tsx";
+/** 编译时用到的 Vue 与本包运行时函数：按需生成带前缀的本地名，最后统一插入 import */
+var RuntimeImports = class {
+	/** `模块:名称` → 导入项；uses 是生成的调用数，换成别的函数后为 0 的不导入 */
+	entries = /* @__PURE__ */ new Map();
+	program;
+	constructor(program) {
+		this.program = program;
+	}
+	/** 调用 Vue 的响应式 API：vue('ref', [init]) → _vue_ref(init) */
+	vue(name, args) {
+		return this.call("vue", name, args);
+	}
+	/** 调用本包的运行时函数：runtime('prop', [...]) → _vtp_prop(...) */
+	runtime(name, args) {
+		return this.call(RUNTIME_MODULE, name, args);
+	}
+	/** 把 runtime() 生成的调用换成另一个运行时函数（参数不变） */
+	retarget(call, from, to) {
+		this.entries.get(`${RUNTIME_MODULE}:${from}`).uses--;
+		call.callee = this.runtime(to, []).callee;
+	}
+	/** 把用到的导入按模块插到文件开头；所有改写完成后调用一次 */
+	insert() {
+		const byModule = /* @__PURE__ */ new Map();
+		for (const { module, name, local, uses } of this.entries.values()) {
+			if (!uses) continue;
+			const specifiers = byModule.get(module) ?? [];
+			specifiers.push(types.importSpecifier(types.identifier(local.name), types.identifier(name)));
+			byModule.set(module, specifiers);
+		}
+		for (const [module, specifiers] of byModule) this.program.unshiftContainer("body", types.importDeclaration(specifiers, types.stringLiteral(module)));
+	}
+	call(module, name, args) {
+		const id = `${module}:${name}`;
+		let entry = this.entries.get(id);
+		if (!entry) {
+			const prefix = module === "vue" ? "vue" : "vtp";
+			entry = {
+				module,
+				name,
+				local: this.program.scope.generateUidIdentifier(`${prefix}_${name}`),
+				uses: 0
+			};
+			this.entries.set(id, entry);
+		}
+		entry.uses++;
+		return types.callExpression(types.identifier(entry.local.name), args);
+	}
+};
+//#endregion
+//#region src/compiler/optimize.ts
+/**
+* 第 6 步：渲染优化。JSX 交给 vue-jsx 后没有模板编译器的那几项优化，父组件一重新渲染，
+* 子组件就跟着重新渲染（插槽每次都是新的、没有 $stable；内联函数每次都是新的，props 比较时总算“变了”）。
+* 这里在不改变语义的前提下补上两项：
+*
+*   1. 稳定插槽：组件的子节点只用到“不会随这次渲染变”的变量时，插槽标 $stable，
+*      父组件因为别的状态重新渲染时，子组件不再跟着重做（内容里读到的响应式数据由子组件自己追踪）。
+*        <Box><Btn label="保存" /></Box>
+*        → <Box>{{ default: () => [<Btn label="保存" />], $stable: true }}</Box>
+*   2. 缓存：JSX 属性里的函数与常量数组、对象，只用到“不会随这次渲染变”的变量时，每个实例只创建一次。
+*        onPress={() => n++}  →  onPress={_cache[0] || (_cache[0] = () => n.value++)}
+*
+* “这次渲染才有的值”（渲染函数里的变量、map 回调的参数）一旦用到就不优化，保持 vue-jsx 原来的输出。
+* 稳定插槽还要求内容不读非响应式的可变数据（普通 let、...rest、字面量初始化的 const）：
+* 这类数据变了不会通知任何组件，以前靠父组件碰巧重新渲染才刷新。
+*/
+/** 子节点不能当插槽对象传的内置组件 */
+const VUE_BUILTINS = /* @__PURE__ */ new Set([
+	"Teleport",
+	"KeepAlive",
+	"Suspense"
+]);
+/** 第 6 步的入口：稳定插槽与属性值缓存，改动直接写在 AST 上（规则见文件开头） */
+function optimizeRender(program, context) {
+	const caches = /* @__PURE__ */ new Map();
+	const summaries = /* @__PURE__ */ new WeakMap();
+	let sites = 0;
+	const siteKey = () => `__site${sites++}`;
+	/** setup 里的缓存数组：用到时才声明 */
+	const cacheSlot = (setup, value) => {
+		let cache = caches.get(setup);
+		if (!cache) {
+			cache = {
+				id: setup.scope.generateUidIdentifier("cache"),
+				size: 0
+			};
+			caches.set(setup, cache);
+		}
+		const slot = types.memberExpression(types.identifier(cache.id.name), types.numericLiteral(cache.size++), true);
+		return types.logicalExpression("||", slot, types.assignmentExpression("=", types.cloneNode(slot), value));
+	};
+	program.traverse({
+		JSXAttribute(path) {
+			cacheAttributeValue(path, context, cacheSlot);
+		},
+		JSXElement: { exit(path) {
+			const external = externalReferences(path, summaries).filter((binding) => binding === null || !declaredWithin(binding, path));
+			stabilizeChildren(path, context, summaries, siteKey);
+			summaries.set(path.node, external);
+		} }
+	});
+	for (const [setup, cache] of caches) prependToBody(setup, [types.variableDeclaration("const", [types.variableDeclarator(types.identifier(cache.id.name), types.arrayExpression([]))])]);
+}
+/** attr={() => …}、attr={[a, b]}、attr={{ … }}：只用到实例内不变的值时，每个实例只创建一次 */
+function cacheAttributeValue(attribute, context, cacheSlot) {
+	const container = attribute.get("value");
+	if (!container.isJSXExpressionContainer()) return;
+	const value = container.get("expression");
+	if (!(value.isArrowFunctionExpression() || value.isFunctionExpression()) && !value.isArrayExpression() && !value.isObjectExpression()) return;
+	const setup = enclosingSetup(attribute);
+	if (!setup) return;
+	if (!isCacheable(value, setup, context)) return;
+	value.replaceWith(cacheSlot(setup, value.node));
+}
+/**
+* 函数：闭包读的都是活的绑定，只要不用到这次渲染才有的变量就能缓存。
+* 数组、对象：直接读到的值（不在函数里的）必须是不会变的常量；符文的值会变，不能缓存。
+* 常量本身不变，它里面的属性却可能变（组合式函数返回的 store、导入的 _state 对象）：
+* 读它的成员、把它展开都不缓存，只有 css.create 的样式表与命名空间导入的一层成员例外
+*/
+function isCacheable(value, setup, context) {
+	let cacheable = true;
+	forEachReference(value, setup, context, (kind, insideFunction, reference) => {
+		if (kind === "local") cacheable = false;
+		else if (insideFunction) return;
+		else if (kind !== "constant") cacheable = false;
+		else if (readsInside(reference) && !isFrozenRead(reference)) cacheable = false;
+	});
+	if (cacheable && !value.isFunction()) value.traverse({
+		Function(inner) {
+			inner.skip();
+		},
+		"CallExpression|NewExpression|TaggedTemplateExpression|UpdateExpression|AssignmentExpression|AwaitExpression|YieldExpression"() {
+			cacheable = false;
+		}
+	});
+	return cacheable;
+}
+/** 读的是常量里面的东西：obj.x、obj?.x、...obj */
+function readsInside(reference) {
+	const parent = reference.parentPath;
+	if (!parent) return false;
+	if (parent.isSpreadElement()) return true;
+	return (parent.isMemberExpression() || parent.isOptionalMemberExpression()) && parent.node.object === reference.node;
+}
+/** 样式入口里结果不再变的工厂 */
+const STYLE_FACTORIES = /* @__PURE__ */ new Set([
+	"create",
+	"createTheme",
+	"defineVars",
+	"defineMarker",
+	"recipe"
+]);
+/**
+* 读的成员不会变：同一文件里 css.create（等）的结果；命名空间导入（import * as icons）的一层成员。
+* 再往下一层（icons.X.y）、或别的常量的成员都可能会变
+*/
+function isFrozenRead(reference) {
+	if (!reference.isIdentifier()) return false;
+	const binding = reference.scope.getBinding(reference.node.name);
+	if (!binding) return false;
+	const member = reference.parentPath;
+	if (binding.path.isImportNamespaceSpecifier()) {
+		const outer = member.parentPath;
+		const deeper = (outer?.isMemberExpression() || outer?.isOptionalMemberExpression()) && outer.node.object === member.node;
+		return member.isMemberExpression() && !deeper;
+	}
+	const init = binding.path.isVariableDeclarator() ? unwrapTypes(binding.path.node.init) : null;
+	if (types.isObjectExpression(init) || types.isArrayExpression(init)) return true;
+	if (!types.isCallExpression(init) || !types.isMemberExpression(init.callee)) return false;
+	const { object, property } = init.callee;
+	if (!types.isIdentifier(property) || !STYLE_FACTORIES.has(property.name)) return false;
+	if (!types.isIdentifier(object)) return false;
+	const source = binding.scope.getBinding(object.name)?.path.parent;
+	return types.isImportDeclaration(source) && source.source.value === "@zerodep-dev/vue-tsx-pro-tsx/styles";
+}
+/** 组件元素的子节点改成显式的插槽对象，按用到的变量标 $stable */
+function stabilizeChildren(element, context, summaries, siteKey) {
+	if (!isComponentElement(element)) return;
+	if (element.node.children.some((child) => types.isJSXSpreadChild(child))) return;
+	const children = types.react.buildChildren(element.node);
+	if (!children.length) return;
+	if (children.length === 1 && types.isObjectExpression(children[0])) return;
+	const setup = enclosingSetup(element);
+	const childPaths = element.get("children");
+	let dynamic = false;
+	let usesChildren = false;
+	for (const child of childPaths) {
+		if (child.isJSXText()) continue;
+		for (const binding of externalReferences(child, summaries)) {
+			if (binding && declaredWithin(binding, child)) continue;
+			const kind = binding ? kindOf(binding, setup, context) : "local";
+			if (kind === "local" || kind === "mutable") dynamic = true;
+			if (kind === "children") usesChildren = true;
+		}
+	}
+	if (dynamic) return;
+	const only = children.length === 1 ? children[0] : void 0;
+	let slots;
+	if (only && isChildrenRead(only, element, context)) {
+		if (!setup) return;
+		slots = context.imports.runtime("forwardChildren", [propsOf(setup)]);
+		slots.loc = element.node.loc;
+	} else {
+		if (only && types.isIdentifier(only) && isImported(only, element)) return;
+		const content = only && (isFunctionNode(only) || bindsFunction(only, element)) ? only : types.arrowFunctionExpression([], types.arrayExpression(children));
+		const stable = usesChildren ? context.imports.runtime("childrenStable", []) : types.booleanLiteral(true);
+		slots = types.objectExpression([types.objectProperty(types.identifier("default"), content), types.objectProperty(types.identifier("$stable"), stable)]);
+		if (setup) keyBySite(element, setup, siteKey);
+	}
+	element.node.children = [types.jsxExpressionContainer(slots)];
+}
+/**
+* 标了 $stable 的组件按 JSX 的位置给一个 key：两处同类型的组件出现在同一位置时（`cond ? <Grid>A</Grid> : <Grid>B</Grid>`、
+* 分支里的第 n 个子元素），没有 key 会被当成同一个节点更新，稳定插槽又让子组件跳过重渲染，显示的还是另一处的内容。
+* 模板编译器给 v-if 的各个分支加 key 是同样的道理。只给渲染函数里直接写的元素加：回调（map）、循环里的元素会重复出现，
+* 同一位置的 key 相同会冲突；已经写了 key 的不动
+*/
+function keyBySite(element, setup, siteKey) {
+	const attributes = element.node.openingElement.attributes;
+	if (attributes.some((attribute) => types.isJSXAttribute(attribute) && attribute.name.name === "key")) return;
+	const render = element.getFunctionParent();
+	if (!render || !isRenderFunction(render, setup)) return;
+	if (element.findParent((parent) => parent.node === render.node || parent.isLoop())?.node !== render.node) return;
+	attributes.push(types.jsxAttribute(types.jsxIdentifier("key"), types.stringLiteral(siteKey())));
+}
+/** setup 返回的渲染函数：`return () => …`，或 setup 直接写成 `() => () => …` */
+function isRenderFunction(fn, setup) {
+	if (fn.parentPath?.node === setup.node) return true;
+	return fn.parentPath?.isReturnStatement() === true && fn.getFunctionParent()?.node === setup.node;
+}
+const isFunctionNode = (node) => types.isArrowFunctionExpression(node) || types.isFunctionExpression(node);
+/** 标识符绑定到函数：const renderRow = (row) => …、function renderRow() {} */
+function bindsFunction(node, element) {
+	if (!types.isIdentifier(node)) return false;
+	const binding = element.scope.getBinding(node.name);
+	if (!binding?.constant) return false;
+	if (binding.path.isFunctionDeclaration()) return true;
+	const init = binding.path.isVariableDeclarator() ? binding.path.node.init : null;
+	return !!init && isFunctionNode(init);
+}
+/** 标识符来自 import */
+function isImported(node, element) {
+	const path = element.scope.getBinding(node.name)?.path;
+	return !!path && (path.isImportSpecifier() || path.isImportDefaultSpecifier() || path.isImportNamespaceSpecifier());
+}
+/** 大写开头或 a.B 形式的标签；Vue 的 Teleport、KeepAlive、Suspense 子节点不是插槽 */
+function isComponentElement(element) {
+	const name = element.node.openingElement.name;
+	if (types.isJSXMemberExpression(name)) return true;
+	if (!types.isJSXIdentifier(name) || !/^[A-Z]/.test(name.name)) return false;
+	const specifier = element.scope.getBinding(name.name)?.path;
+	if (specifier?.isImportSpecifier() && specifier.parent.source.value === "vue" && types.isIdentifier(specifier.node.imported) && VUE_BUILTINS.has(specifier.node.imported.name)) return false;
+	return !VUE_BUILTINS.has(name.name);
+}
+/** 子节点就是 children（第 3 步已改写成 unref(children)） */
+function isChildrenRead(node, element, context) {
+	const read = types.isCallExpression(node) && node.arguments.length === 1 ? node.arguments[0] : node;
+	if (!types.isIdentifier(read)) return false;
+	const binding = element.scope.getBinding(read.name);
+	return !!binding && !!context.tracked.get(binding)?.childrenOf;
+}
+/** setup 的第一个参数（第 1 步生成的 __props） */
+function propsOf(setup) {
+	const first = setup.node.params[0];
+	return types.isIdentifier(first) ? types.identifier(first.name) : types.objectExpression([]);
+}
+/** 所在的组件 setup（_component 的参数函数）；不在组件里时为 null */
+function enclosingSetup(path) {
+	for (let fn = path.getFunctionParent(); fn; fn = fn.parentPath?.getFunctionParent() ?? null) if (isComponentSetup(fn)) return fn;
+	return null;
+}
+/**
+* 子树里引用的变量（含 this，记为 null；全局变量不算）。已经汇总过的元素用它的汇总、不再进去，
+* 所以每个引用只在声明它的地方以内逐层往上传，不会被每一层祖先各遍历一次
+*/
+function externalReferences(path, summaries) {
+	const own = summaries.get(path.node);
+	if (own) return [...own];
+	const found = [];
+	const add = (reference, name) => {
+		const binding = reference.scope.getBinding(name);
+		if (binding) found.push(binding);
+	};
+	if (path.isIdentifier()) add(path, path.node.name);
+	path.traverse({
+		JSXElement(inner) {
+			const summary = summaries.get(inner.node);
+			if (!summary) return;
+			found.push(...summary);
+			inner.skip();
+		},
+		Identifier(reference) {
+			if (reference.isReferencedIdentifier()) add(reference, reference.node.name);
+		},
+		JSXIdentifier(reference) {
+			if (reference.isReferencedIdentifier()) add(reference, reference.node.name);
+		},
+		ThisExpression() {
+			found.push(null);
+		}
+	});
+	return found;
+}
+/** 变量是不是在 path 里面声明的：有源码位置时比较位置（不用逐层往上找），生成的节点退回 isDescendant */
+function declaredWithin(binding, path) {
+	const scope = binding.scope.path.node;
+	const outer = path.node;
+	if (scope.start != null && scope.end != null && outer.start != null && outer.end != null) return scope.start >= outer.start && scope.end <= outer.end;
+	return isWithin(binding.scope.path, path);
+}
+/** 表达式用到的外部变量逐个回调：变量的性质、引用是否在表达式里的函数中，以及引用本身 */
+function forEachReference(expression, setup, context, visit) {
+	const check = (reference, name) => {
+		const binding = reference.scope.getBinding(name);
+		if (!binding) return;
+		if (isWithin(binding.scope.path, expression)) return;
+		visit(kindOf(binding, setup, context), isInsideFunction(reference, expression), reference);
+	};
+	if (expression.isIdentifier()) check(expression, expression.node.name);
+	if (expression.isThisExpression()) visit("local", false, expression);
+	expression.traverse({
+		Identifier(reference) {
+			if (reference.isReferencedIdentifier()) check(reference, reference.node.name);
+		},
+		JSXIdentifier(reference) {
+			if (reference.isReferencedIdentifier()) check(reference, reference.node.name);
+		},
+		ThisExpression(reference) {
+			visit("local", isInsideFunction(reference, expression), reference);
+		}
+	});
+}
+function kindOf(binding, setup, context) {
+	const tracked = context.tracked.get(binding);
+	if (tracked) return tracked.childrenOf ? "children" : "reactive";
+	if (context.rest.has(binding)) return "mutable";
+	const owner = binding.scope.getFunctionParent()?.path ?? null;
+	if (owner === null || setup !== null && isWithin(setup, owner) && owner !== setup) return binding.constant ? "constant" : "mutable";
+	if (owner !== setup) return "local";
+	if (binding.kind === "param") return binding.path.node === setup?.node.params[0] ? "children" : "mutable";
+	if (!binding.constant) return "mutable";
+	if (binding.kind === "hoisted" || binding.kind === "module") return "constant";
+	const declarator = binding.path;
+	const init = declarator.isVariableDeclarator() ? unwrapTypes(declarator.node.init) : null;
+	if (types.isObjectExpression(init) || types.isArrayExpression(init) || types.isNewExpression(init)) return "mutable";
+	return "constant";
+}
+/** 去掉只影响类型的外壳：[] as T[]、{…} satisfies S、x!、(x) */
+function unwrapTypes(node) {
+	let current = node;
+	while (types.isTSAsExpression(current) || types.isTSSatisfiesExpression(current) || types.isTSNonNullExpression(current) || types.isTSTypeAssertion(current) || types.isParenthesizedExpression(current)) current = current.expression;
+	return current;
+}
+/** inner 是否就是 outer 或在它里面 */
+function isWithin(inner, outer) {
+	return inner === outer || inner.isDescendant(outer);
+}
+/** 引用是否在表达式里的某个函数中（调用时才读取） */
+function isInsideFunction(reference, expression) {
+	for (let path = reference.parentPath; path && path !== expression; path = path.parentPath) if (path.isFunction()) return true;
+	return expression.isFunction() && reference !== expression;
+}
+//#endregion
+//#region src/compiler/props.ts
+/** _component 的 props：参数解构换成 prop 访问器，并补上组件名与 props 声明 */
+/**
+* 参数解构 → 实例内的 prop 访问器（参考 Svelte 5 的 $.prop）：
+*
+*   _component(({ size = 'md', icon = pick(size), _checked: checked = _bindable(false), ...rest }) => …)
+*   ↓
+*   _component((__props, __ctx) => {
+*     const size = prop(__props, 'size', () => 'md')
+*     const icon = prop(__props, 'icon', () => pick(size.value))
+*     const checked = bindable(__props, '_checked', () => false, __ctx.emit)
+*     const rest = restProps(__props, __ctx, true)   // attrs 加上 children；已单独解构 children 时为 false
+*     …
+*   }, { name: 'Toggle', props: ['size', 'icon', '_checked', 'onUpdate:_checked'] })
+*
+* 默认值在实例内惰性求值：可以是任意表达式，也可以引用前面的 prop。
+*/
+function declareProps(setup, context) {
+	const params = setup.get("params");
+	const pattern = params[0];
+	const names = [];
+	if (pattern) {
+		if (params.length > 1) throw fail(params[1], "组件只接收一个参数：props 解构");
+		if (!pattern.isObjectPattern()) throw fail(pattern, "请解构 props，例如 _component(({ size = \"md\", ...rest }) => …)；解构出的变量会保持响应式");
+		const propsId = setup.scope.generateUidIdentifier("props");
+		const ctxId = setup.scope.generateUidIdentifier("ctx");
+		const declarations = [];
+		for (const property of pattern.get("properties")) {
+			if (property.isRestElement()) {
+				const local = property.node.argument;
+				if (!types.isIdentifier(local)) throw fail(property, "...rest 需要是一个变量名");
+				const withChildren = types.booleanLiteral(!destructuresChildren(pattern.node));
+				const init = context.imports.runtime("restProps", [
+					propsId,
+					ctxId,
+					withChildren
+				]);
+				const declarator = types.variableDeclarator(local, init);
+				context.trackRest(declarator);
+				declarations.push(types.variableDeclaration("const", [declarator]));
+				continue;
+			}
+			const { key, local, fallback, isBindable } = readPropPattern(property);
+			if (key !== "children") names.push(key);
+			if (isBindable) names.push(`onUpdate:${key}`);
+			const thunk = fallback && types.arrowFunctionExpression([], fallback);
+			const init = key === "children" && !isBindable ? context.imports.runtime("childrenProp", [propsId, ...thunk ? [thunk] : []]) : isBindable ? context.imports.runtime("bindable", [
+				propsId,
+				types.stringLiteral(key),
+				thunk ?? types.identifier("undefined"),
+				types.memberExpression(ctxId, types.identifier("emit"))
+			]) : context.imports.runtime("prop", [
+				propsId,
+				types.stringLiteral(key),
+				...thunk ? [thunk] : []
+			]);
+			const declarator = types.variableDeclarator(types.identifier(local), init);
+			context.track(declarator, {
+				writable: key !== "children",
+				source: isBindable ? "_bindable" : "prop",
+				childrenOf: key === "children" ? setup.node : void 0
+			});
+			declarations.push(types.variableDeclaration("const", [declarator]));
+		}
+		propsId.typeAnnotation = pattern.node.typeAnnotation;
+		setup.node.params = [propsId, ctxId];
+		prependToBody(setup, declarations);
+	}
+	addComponentOptions(setup.parentPath, names, context.filename);
+}
+function destructuresChildren(pattern) {
+	return pattern.properties.some((property) => types.isObjectProperty(property) && !property.computed && (types.isIdentifier(property.key, { name: "children" }) || types.isStringLiteral(property.key, { value: "children" })));
+}
+/** 读取一项 props 解构：键名（驼峰）、本地变量名、默认值，以及是否 _bindable */
+function readPropPattern(property) {
+	if (!property.isObjectProperty() || property.node.computed) throw fail(property, "props 解构不支持计算属性名");
+	const keyNode = property.node.key;
+	const key = types.isIdentifier(keyNode) ? keyNode.name : types.isStringLiteral(keyNode) ? keyNode.value : null;
+	if (key === null) throw fail(property, "props 的键名需要是标识符或字符串");
+	let value = property.get("value");
+	let fallback;
+	let isBindable = false;
+	if (value.isAssignmentPattern()) {
+		const right = value.get("right");
+		if (right.isCallExpression() && runeOf(right) === "_bindable") {
+			isBindable = true;
+			fallback = right.node.arguments[0];
+		} else fallback = right.node;
+		value = value.get("left");
+	}
+	if (!value.isIdentifier()) throw fail(value, "props 不支持嵌套解构：先解构出整个值，再在函数体里读取它的属性");
+	const local = value.node.name;
+	if (isBindable && !key.startsWith("_")) throw fail(property, `可双向绑定的 prop 以下划线开头：写成 { _${key}: ${local} = _bindable(…) }`);
+	if (!isBindable && key.startsWith("_")) throw fail(property, `下划线开头的 prop 留给可双向绑定的值：用 _bindable 声明（{ ${key}: ${key.slice(1)} = _bindable(…) }），或去掉下划线`);
+	if (local.startsWith("_")) throw fail(property, `本地变量不用下划线开头（留给符文）：写成 { ${key}: ${key.replace(/^_+/, "")} = _bindable(…) }`);
+	return {
+		key: key.replace(/-(\w)/g, (_, c) => c.toUpperCase()),
+		local,
+		fallback,
+		isBindable
+	};
+}
+/**
+* 给 _component 补上第二个参数：组件名（取自 const X = _component(...)）与 props 声明。
+* 作者已经写了选项对象时，只补充其中缺少的项。
+*/
+function addComponentOptions(call, names, filename) {
+	const generated = [];
+	const name = componentName(call, filename);
+	if (name) generated.push(types.objectProperty(types.identifier("name"), types.stringLiteral(name)));
+	if (names.length) {
+		const list = types.arrayExpression(names.map((n) => types.stringLiteral(n)));
+		generated.push(types.objectProperty(types.identifier("props"), list));
+	}
+	if (!generated.length) return;
+	const existing = call.node.arguments[1];
+	if (!existing) call.node.arguments.push(types.objectExpression(generated));
+	else if (types.isObjectExpression(existing)) {
+		const has = (name) => existing.properties.some((p) => types.isObjectProperty(p) && types.isIdentifier(p.key, { name }));
+		existing.properties.unshift(...generated.filter((p) => !has(p.key.name)));
+	} else call.node.arguments[1] = types.objectExpression([...generated, types.spreadElement(existing)]);
+}
+/** const X = _component(...) 取变量名；export default _component(...) 取文件名，index.tsx 取所在目录名 */
+function componentName(call, filename) {
+	const parent = call.parentPath;
+	if (parent?.isVariableDeclarator() && types.isIdentifier(parent.node.id)) return parent.node.id.name;
+	if (!parent?.isExportDefaultDeclaration() || !filename) return void 0;
+	const parts = filename.split(/[\\/]/);
+	const base = parts.at(-1).replace(/\.[^.]+$/, "");
+	const name = base === "index" ? parts.at(-2) : base;
+	return name && /^[A-Za-z]/.test(name) ? name : void 0;
+}
+//#endregion
+//#region src/compiler/transform.ts
+/** 符文编译：一个文件的流程按顺序执行 run() 里的各步，runesBabelPlugin 是它的 Babel 插件形式 */
+/**
+* 用到符文、定义了 _component（需要编译 props 解构）、或写了下划线属性（_value={x} 可能要双向绑定）的文件才需要编译；
+* 宿主项目的其他文件原样放过
+*/
+const NEEDS_COMPILE = /\b_(?:state|derived|bindable|bind|effect|untrack|fromRef|toRef)\b|\b_component\s*\(|\s_[a-zA-Z]\w*=\{/;
+/** 文件里有没有要编译的符文（解析之前的快速判断） */
+const needsRunes = (code) => NEEDS_COMPILE.test(code);
+/** 符文编译的 Babel 插件：误用直接抛出 RunesError，警告放在文件的 metadata.runesWarnings */
+function runesBabelPlugin() {
+	return {
+		name: "vue-tsx-pro-runes",
+		visitor: { Program(program, state) {
+			const transform = new RunesTransform(program, state.filename, state.opts.optimize ?? true);
+			transform.run();
+			state.file.metadata.runesWarnings = transform.warnings;
+		} }
+	};
+}
+/** 一个文件的符文改写：五个步骤见 run()，由 runesBabelPlugin 对每个文件新建一个 */
+var RunesTransform = class {
+	/** 不影响正确性、但多半不是作者本意的写法 */
+	warnings = [];
+	/** 第 1 步记录下的声明节点，第 2 步再换成作用域里的 Binding */
+	pending = /* @__PURE__ */ new Map();
+	tracked = /* @__PURE__ */ new Map();
+	pendingRest = /* @__PURE__ */ new Set();
+	/** _derived / _derived.by 的求值函数：里面不能修改状态 */
+	derivedGetters = /* @__PURE__ */ new WeakSet();
+	rest = /* @__PURE__ */ new Set();
+	program;
+	filename;
+	imports;
+	optimize;
+	constructor(program, filename, optimize = true) {
+		this.program = program;
+		this.filename = filename;
+		this.optimize = optimize;
+		this.imports = new RuntimeImports(program);
+	}
+	/** 按顺序执行全部步骤，结果直接改在 Babel 的 AST 上 */
+	run() {
+		this.declareRunes();
+		this.program.scope.crawl();
+		if (wrapAutoBinds(this.program, (identifier) => this.isWritableRune(identifier))) this.program.scope.crawl();
+		this.resolveBindings();
+		this.narrowReadonlyProps();
+		this.rewriteAccesses();
+		this.rewriteCalls();
+		this.reportMisuse();
+		if (this.optimize) optimizeRender(this.program, {
+			imports: this.imports,
+			tracked: this.tracked,
+			rest: this.rest
+		});
+		this.imports.insert();
+	}
+	declareRunes() {
+		this.program.traverse({
+			Function: (path) => {
+				if (!isPropsComponent(path)) return;
+				declareProps(path, {
+					imports: this.imports,
+					filename: this.filename,
+					track: (declarator, info) => this.pending.set(declarator, info),
+					trackRest: (declarator) => this.pendingRest.add(declarator)
+				});
+			},
+			JSXAttribute: (path) => checkAttribute(path),
+			CallExpression: (path) => {
+				const rune = runeOf(path);
+				switch (rune) {
+					case "_bind":
+						checkBindCall(path);
+						return;
+					case null:
+					case "_toRef":
+					case "_state.snapshot":
+					case "_untrack":
+					case "_effect":
+					case "_effect.pre":
+					case "_effect.root": return;
+					case "_bindable": throw fail(path, "_bindable() 只能写在 _component 参数解构的默认值位置，例如 ({ _checked: checked = _bindable(false) })");
+					default: this.declareState(path, rune);
+				}
+			}
+		});
+	}
+	/** let x = _state(0) 之类：把调用换成 Vue API，并记下声明 */
+	declareState(path, rune) {
+		const declarator = path.parentPath;
+		if (!declarator.isVariableDeclarator() || declarator.node.init !== path.node) throw fail(path, `${rune}() 只能直接初始化一个变量，例如 let count = ${rune}(0)`);
+		const kind = declarator.parent.kind;
+		if (kind === "var") throw fail(declarator, "响应式变量请用 let 或 const 声明");
+		if (isInsideRender(path)) throw fail(path, `${rune} 写在渲染函数里，每次重新渲染都会重新创建；请移到组件函数体中 return 之前`);
+		if (path.node.arguments.length > 1) throw fail(path, `${rune}() 只接受一个参数`);
+		const id = declarator.node.id;
+		const arg = path.node.arguments[0];
+		const initial = arg ?? types.identifier("undefined");
+		switch (rune) {
+			case "_state":
+				if (kind === "const" && isPrimitiveLiteral(arg)) throw fail(path, "const 声明的原始值无法修改，响应式状态请用 let");
+				requireIdentifier(declarator, rune);
+				if (kind === "const" && declarator.parentPath.parentPath?.isExportNamedDeclaration()) {
+					path.replaceWith(this.imports.vue("reactive", [initial]));
+					return;
+				}
+				path.replaceWith(this.imports.vue("ref", [initial]));
+				this.pending.set(declarator.node, {
+					writable: kind === "let",
+					source: rune
+				});
+				return;
+			case "_state.raw":
+				if (kind !== "let") throw fail(path, "_state.raw 只能用 let 声明（它只能整体替换）");
+				requireIdentifier(declarator, rune);
+				path.replaceWith(this.imports.vue("shallowRef", [initial]));
+				this.pending.set(declarator.node, {
+					writable: true,
+					source: rune
+				});
+				return;
+			case "_derived":
+			case "_derived.by": {
+				if (!arg) throw fail(path, `${rune} 需要一个参数`);
+				const getter = rune === "_derived" ? types.arrowFunctionExpression([], arg) : arg;
+				this.derivedGetters.add(getter);
+				const writable = kind === "let";
+				if (types.isObjectPattern(id) || types.isArrayPattern(id)) {
+					this.declareDestructuredDerived(declarator, id, getter, rune, writable);
+					return;
+				}
+				requireIdentifier(declarator, rune);
+				path.replaceWith(this.derived(getter, writable));
+				this.pending.set(declarator.node, {
+					writable,
+					source: rune
+				});
+				return;
+			}
+			case "_fromRef":
+				if (!arg) throw fail(path, "_fromRef 需要一个 Ref 或由 Ref 组成的对象");
+				if (!types.isIdentifier(id) && !types.isObjectPattern(id)) throw fail(path, "_fromRef 的结果请赋给一个变量或对象解构");
+				path.replaceWith(arg);
+				this.pending.set(declarator.node, {
+					writable: kind === "let",
+					source: rune
+				});
+				return;
+		}
+	}
+	/**
+	* 解构派生（同 Svelte 5）：每个变量各自是一个派生值。
+	*
+	*   const { name, tags: [first] } = _derived(user)
+	*   ↓
+	*   const _derivedParts = computed(() => { const { name, tags: [first] } = (() => user)(); return { name, first } })
+	*   const name = computed(() => _derivedParts.value.name)
+	*   const first = computed(() => _derivedParts.value.first)
+	*
+	* 按原样解构一次，默认值、嵌套与 ...rest 因此与普通解构完全一致，默认值也只执行一次。
+	* let 声明时每个变量都可以临时覆盖。
+	*/
+	declareDestructuredDerived(declarator, pattern, getter, rune, writable) {
+		const names = Object.keys(types.getBindingIdentifiers(pattern));
+		const parts = declarator.scope.generateUidIdentifier("derivedParts");
+		const destructure = types.arrowFunctionExpression([], types.blockStatement([types.variableDeclaration("const", [types.variableDeclarator(types.cloneNode(pattern), types.callExpression(getter, []))]), types.returnStatement(types.objectExpression(names.map((name) => types.objectProperty(types.identifier(name), types.identifier(name), false, true))))]));
+		const declarators = [types.variableDeclarator(parts, this.imports.vue("computed", [destructure]))];
+		for (const name of names) {
+			const pick = types.arrowFunctionExpression([], types.memberExpression(types.memberExpression(types.identifier(parts.name), types.identifier("value")), types.identifier(name)));
+			const derived = types.variableDeclarator(types.identifier(name), this.derived(pick, writable));
+			this.pending.set(derived, {
+				writable,
+				source: rune
+			});
+			declarators.push(derived);
+		}
+		declarator.replaceWithMultiple(declarators);
+	}
+	/** 只读派生 → computed；可覆盖的派生 → overridable */
+	derived(getter, writable) {
+		return writable ? this.imports.runtime("overridable", [getter]) : this.imports.vue("computed", [getter]);
+	}
+	/**
+	* 能整体赋值的响应式变量：let 声明的 _state / _derived / _fromRef 与 _bindable 的 prop（还没建立绑定，按声明节点查）。
+	* 普通 prop 不算：往下绑定要声明成 _bindable
+	*/
+	isWritableRune(identifier) {
+		const declarator = identifier.scope.getBinding(identifier.node.name)?.path.node;
+		const info = declarator && this.pending.get(declarator);
+		return !!info && info.writable && info.source !== "prop";
+	}
+	resolveBindings() {
+		this.program.traverse({
+			VariableDeclarator: (path) => {
+				if (this.pendingRest.has(path.node) && types.isIdentifier(path.node.id)) this.rest.add(path.scope.getBinding(path.node.id.name));
+				const info = this.pending.get(path.node);
+				if (!info) return;
+				for (const name of Object.keys(path.getBindingIdentifiers())) this.tracked.set(path.scope.getBinding(name), info);
+			},
+			ExportNamedDeclaration: (path) => {
+				const declaration = path.get("declaration");
+				if (!declaration.isVariableDeclaration()) return;
+				for (const name of Object.keys(declaration.getBindingIdentifiers())) if (this.pending.has(findDeclarator(declaration, name))) throw fail(path, `不能导出会被整体替换的响应式变量 ${name}：导入方只会拿到一个值。共享对象请写 export const ${name} = _state({...})，或导出读写函数`);
+			}
+		});
+	}
+	/**
+	* 组件里没赋值过、也没交给 _toRef / _bind（拿到 Ref 的一方可能写入）的普通 prop，
+	* 换成只读访问器 readonlyProp：不建可覆盖所需的 computed、customRef 与 watch（runtime/props.ts）
+	*/
+	narrowReadonlyProps() {
+		for (const [binding, info] of this.tracked) {
+			if (info.source !== "prop" || info.childrenOf || binding.constantViolations.length) continue;
+			const escapes = binding.referencePaths.some((reference) => {
+				const parent = reference.parentPath;
+				const rune = parent?.isCallExpression() ? runeOf(parent) : null;
+				return rune === "_toRef" || rune === "_bind";
+			});
+			const init = binding.path.node.init;
+			if (escapes || !types.isCallExpression(init)) continue;
+			this.imports.retarget(init, "prop", "readonlyProp");
+			const fallback = init.arguments[2];
+			if (types.isArrowFunctionExpression(fallback) && isConstantLiteral(fallback.body)) init.arguments[2] = fallback.body;
+		}
+	}
+	rewriteAccesses() {
+		for (const [binding, info] of this.tracked) {
+			for (const violation of binding.constantViolations) {
+				if (!info.writable) throw fail(violation, readonlyMessage(binding, info));
+				if (violation.findParent((parent) => this.derivedGetters.has(parent.node))) throw fail(violation, `不能在 _derived 里修改 ${binding.identifier.name}：派生值只读取状态；需要跟着变化去改状态时用 _effect`);
+				for (const target of writeTargets(violation, binding)) replaceWithValue(target);
+			}
+			for (const reference of binding.referencePaths) {
+				if (!isAttached(reference) || isInTypePosition(reference)) continue;
+				if (!types.isIdentifier(reference.node) && !types.isJSXIdentifier(reference.node)) continue;
+				this.rewriteRead(reference, binding, info);
+			}
+		}
+	}
+	rewriteRead(reference, binding, info) {
+		const parent = reference.parentPath;
+		const name = binding.identifier.name;
+		if (parent.isCallExpression() && runeOf(parent) === "_toRef" && parent.node.arguments[0] === reference.node) {
+			parent.replaceWith(types.identifier(name));
+			return;
+		}
+		if (parent.isCallExpression() && runeOf(parent) === "_bind" && !info.writable) throw fail(reference, `${readonlyMessage(binding, info)}，不能用 _bind 双向绑定`);
+		if (info.childrenOf && reference.getFunctionParent()?.node === info.childrenOf) throw fail(reference, `${name} 是父级传入的内容，读取时才生成；请在渲染函数或回调里读取，不要直接写在组件函数体中`);
+		if (parent.isExportSpecifier() || parent.isExportDefaultDeclaration()) throw fail(reference, `不能导出响应式变量 ${name}`);
+		if (isVueWatchSource(reference)) throw fail(reference, `watch 的监听源请写成 getter：watch(() => ${name}, …)；需要 Ref 时写 watch(_toRef(${name}), …)`);
+		const owner = reference.getFunctionParent();
+		const fixed = !info.writable && info.source === "_state";
+		if (owner && isComponentSetup(owner) && !fixed && !isInsideUntrack(reference)) this.warnings.push(warning(reference, `${name} 在组件函数体里直接读取，只拿到当前值、之后不会更新；需要跟随变化请放进渲染函数、回调或 _derived`));
+		if (isComponentChild(parent)) {
+			reference.replaceWith(this.imports.vue("unref", [types.identifier(name)]));
+			return;
+		}
+		replaceWithValue(reference);
+	}
+	rewriteCalls() {
+		this.program.traverse({ CallExpression: (path) => {
+			const rune = runeOf(path);
+			if (rune === "_bind") rewriteBind(path);
+			if (rune === "_state.snapshot") path.replaceWith(this.imports.runtime("snapshot", [singleArgument(path, rune)]));
+			if (rune === "_untrack") {
+				const argument = singleArgument(path, rune);
+				if (types.isArrowFunctionExpression(argument) || types.isFunctionExpression(argument)) throw fail(path, "_untrack 的参数就是要读的值：写 _untrack(x)，不要写成 _untrack(() => x)（那样拿到的是函数本身）");
+				const read = types.arrowFunctionExpression([], argument);
+				path.replaceWith(this.imports.runtime("untrack", [read]));
+			}
+			if (rune === "_effect" || rune === "_effect.pre" || rune === "_effect.root") this.rewriteEffect(path, rune);
+		} });
+	}
+	/**
+	* _effect(fn) → effect(fn)，_effect.pre(fn) → effect(fn, 'pre')，_effect.root(fn) → effectRoot(fn)。
+	* 读写已在第 3 步改成 .value，effect 里读到的响应式变量自然成为依赖。
+	*/
+	rewriteEffect(path, rune) {
+		const fn = singleArgument(path, rune);
+		if (isInsideRender(path)) throw fail(path, `${rune} 写在渲染函数里，每次重新渲染都会重新创建；请移到组件函数体中 return 之前`);
+		if (rune === "_effect.root") {
+			path.replaceWith(this.imports.runtime("effectRoot", [fn]));
+			return;
+		}
+		if (!path.parentPath.isExpressionStatement()) throw fail(path, `${rune}() 没有返回值，请单独写成一条语句`);
+		const args = rune === "_effect.pre" ? [fn, types.stringLiteral("pre")] : [fn];
+		path.replaceWith(this.imports.runtime("effect", args));
+	}
+	reportMisuse() {
+		this.program.traverse({ Identifier(path) {
+			const { name } = path.node;
+			if (!RUNE_GLOBALS.has(name) || path.scope.hasBinding(name)) return;
+			if (!path.isReferencedIdentifier() || isInTypePosition(path)) return;
+			switch (name) {
+				case "_toRef": throw fail(path, "_toRef(x) 的参数必须是 _state / _derived / _bindable / _fromRef 声明的变量");
+				case "_bind": throw fail(path, "_bind 的修饰符只能在 JSX 属性的值里直接调用，例如 <input _value={_bind.trim(name)} />");
+				default: throw fail(path, `${name} 只能按约定的位置直接调用，不能当作普通值使用`);
+			}
+		} });
+	}
+};
+/** 引用位于 _untrack(…) 的参数里（第 3 步时调用还没改写） */
+function isInsideUntrack(path) {
+	return !!path.findParent((parent) => parent.isCallExpression() && runeOf(parent) === "_untrack");
+}
+/** _state.snapshot(x)、_effect(fn) 这类只接受一个参数的符文 */
+function singleArgument(path, rune) {
+	const args = path.node.arguments;
+	if (args.length !== 1 || !types.isExpression(args[0])) throw fail(path, rune + "() 只接受一个参数");
+	return args[0];
+}
+function requireIdentifier(declarator, rune) {
+	if (!types.isIdentifier(declarator.node.id)) throw fail(declarator, `${rune} 不能解构声明：解构得到的是快照。请先声明变量，再读取属性`);
+}
+/** 只读绑定被写入时的提示：prop 建议改用 _bindable，符文直接说明来源 */
+function readonlyMessage(binding, info) {
+	const name = binding.identifier.name;
+	if (info.source === "_state" || info.source === "_fromRef") return `${name} 用 const 声明，不能整体替换（属性照常可改）；需要替换请用 let`;
+	return `${name} 来自 ${info.source}，是只读的`;
+}
+/** 不引用任何变量的原始值字面量：'md'、0、-1、false、null、1n、不含插值的模板字符串 */
+function isConstantLiteral(node) {
+	if (types.isUnaryExpression(node, { operator: "-" })) return types.isNumericLiteral(node.argument);
+	if (types.isTemplateLiteral(node)) return node.expressions.length === 0;
+	return types.isStringLiteral(node) || types.isNumericLiteral(node) || types.isBooleanLiteral(node) || types.isNullLiteral(node) || types.isBigIntLiteral(node);
+}
+/** 0、'x'、true、null、模板字符串、undefined 或不传参数：const 声明这类初始值就永远改不了 */
+function isPrimitiveLiteral(node) {
+	if (!node || types.isIdentifier(node, { name: "undefined" })) return true;
+	return types.isNumericLiteral(node) || types.isStringLiteral(node) || types.isBooleanLiteral(node) || types.isNullLiteral(node) || types.isBigIntLiteral(node) || types.isTemplateLiteral(node);
+}
+//#endregion
+//#region src/compiler/style-bindings.ts
+/**
+* 样式的响应式绑定：渲染函数的 JSX 里，随状态变的样式改成绑定，状态变化时由元素上的 effect 直接改元素，组件不重新渲染
+* （styles/dynamic.ts 的 bind、select，styles/bindings.ts 的 effect）。
+*
+*   动态样式的参数：<div {...css.attrs(styles.bar(item.width))} />
+*     → <div {...css.attrs(css.bind(styles.bar, () => [item.width]))} />       参数变化只改元素上的 CSS 变量
+*   按状态选样式：<div {...css.attrs(styles.row, item.hot && styles.hot)} />
+*     → <div {...css.attrs(styles.row, css.select(() => item.hot && styles.hot))} />   状态变化就地换组合类
+*
+* 只认本文件顶层 `const styles = css.create({ … })` 的样式（能静态确定是样式、哪些命名空间是动态样式）。
+* 动态样式的参数全是字面量时不改（不会变）。按状态选样式只改交给 attrs 或 sx 的（`cond && styles.x`、
+* `cond ? styles.a : styles.b`、`styles[key]`），而且读到的状态在渲染里没有别处用到：别处也读的话组件反正要重新渲染，
+* 绑定只会多一个 effect。
+*/
+/** 粗筛：文件里有样式入口的导入、也有 create 调用 */
+const needsStyleBindings = (code) => code.includes("@zerodep-dev/vue-tsx-pro-tsx/styles") && /\bcreate\s*\(/.test(code);
+/** 编译的第一遍、符文之前加的 Babel 插件（见文件开头） */
+function styleBindingsPlugin() {
+	return {
+		name: "vue-tsx-pro-style-bindings",
+		visitor: { Program(program) {
+			const imports = styleImports(program);
+			if (!imports) return;
+			const tables = styleTables(program, imports);
+			if (!tables.size) return;
+			const reference = (name) => helperReference(program, imports, name);
+			const tableOf = (node) => {
+				if (!types.isMemberExpression(node) || !types.isIdentifier(node.object)) return void 0;
+				const binding = program.scope.getBinding(node.object.name);
+				return binding && tables.get(binding.identifier);
+			};
+			const select = (path, condition) => {
+				const render = renderFunctionOf(path);
+				if (!render || !inStyleSlot(path, imports) || !worthBinding(condition, render, (other) => inAnyStyleSlot(other, imports))) return;
+				const stable = readsOutsideRender(condition, render);
+				path.replaceWith(types.callExpression(reference("select"), [types.arrowFunctionExpression([], path.node), ...stable ? [types.booleanLiteral(true)] : []]));
+				path.skip();
+			};
+			/** 样式表里的一段静态样式：`styles.x`（不是动态样式），或表里没有动态样式时的 `styles[key]` */
+			const isStyle = (node) => {
+				const table = tableOf(node);
+				if (!table || !types.isMemberExpression(node)) return false;
+				if (node.computed) return !table.dynamic.size;
+				return types.isIdentifier(node.property) && !table.dynamic.has(node.property.name);
+			};
+			const isStyleOrNothing = (node) => isStyle(node) || types.isNullLiteral(node) || types.isBooleanLiteral(node, { value: false }) || types.isIdentifier(node, { name: "undefined" });
+			program.traverse({
+				CallExpression(path) {
+					const callee = path.node.callee;
+					if (types.isMemberExpression(callee) && callee.computed) return;
+					const table = tableOf(callee);
+					if (!table || !types.isMemberExpression(callee) || !types.isIdentifier(callee.property)) return;
+					if (!table.dynamic.has(callee.property.name)) return;
+					const render = inJsxAttribute(path) ? renderFunctionOf(path) : null;
+					if (!render) return;
+					const args = path.node.arguments;
+					if (args.every((arg) => types.isLiteral(arg) && !types.isTemplateLiteral(arg))) return;
+					if (args.some((arg) => types.isSpreadElement(arg) || types.isArgumentPlaceholder(arg))) return;
+					const stable = path.get("arguments").every((arg) => readsOutsideRender(arg, render));
+					path.replaceWith(types.callExpression(reference("bind"), [
+						callee,
+						types.arrowFunctionExpression([], types.arrayExpression(args)),
+						...stable ? [types.booleanLiteral(true)] : []
+					]));
+					path.skip();
+				},
+				LogicalExpression(path) {
+					if (path.node.operator === "&&" && isStyle(path.node.right)) select(path, path.get("left"));
+				},
+				ConditionalExpression(path) {
+					const { consequent, alternate } = path.node;
+					if ((isStyle(consequent) || isStyle(alternate)) && isStyleOrNothing(consequent) && isStyleOrNothing(alternate)) select(path, path.get("test"));
+				},
+				MemberExpression(path) {
+					if (!path.node.computed || !isStyle(path.node)) return;
+					const key = path.get("property");
+					if (key.isLiteral() && !key.isTemplateLiteral()) return;
+					select(path, key);
+				}
+			});
+		} }
+	};
+}
+function styleImports(program) {
+	for (const statement of program.node.body) {
+		if (!types.isImportDeclaration(statement) || statement.source.value !== "@zerodep-dev/vue-tsx-pro-tsx/styles") continue;
+		const found = { source: statement.source.value };
+		for (const specifier of statement.specifiers) if (types.isImportNamespaceSpecifier(specifier)) found.namespace = specifier.local.name;
+		else if (types.isImportSpecifier(specifier) && types.isIdentifier(specifier.imported)) {
+			if (specifier.imported.name === "create") found.create = specifier.local.name;
+			if (specifier.imported.name === "attrs") found.attrs = specifier.local.name;
+		}
+		if (found.namespace || found.create) return found;
+	}
+}
+/** 顶层 `const 名 = css.create({ … })`：名字的声明节点 → 样式表 */
+function styleTables(program, imports) {
+	const result = /* @__PURE__ */ new Map();
+	for (const statement of program.node.body) {
+		const declaration = types.isExportNamedDeclaration(statement) ? statement.declaration : statement;
+		if (!types.isVariableDeclaration(declaration) || declaration.kind !== "const") continue;
+		for (const declarator of declaration.declarations) {
+			if (!types.isIdentifier(declarator.id) || !isCreateCall(declarator.init, imports)) continue;
+			const [styles] = declarator.init.arguments;
+			if (!types.isObjectExpression(styles)) continue;
+			if (styles.properties.some((p) => types.isSpreadElement(p) || p.computed)) continue;
+			const dynamic = /* @__PURE__ */ new Set();
+			for (const property of styles.properties) {
+				if (types.isSpreadElement(property)) continue;
+				const key = property.key;
+				if (!types.isIdentifier(key) && !types.isStringLiteral(key)) continue;
+				const name = types.isIdentifier(key) ? key.name : key.value;
+				if (types.isObjectMethod(property) || types.isArrowFunctionExpression(property.value) || types.isFunctionExpression(property.value)) dynamic.add(name);
+			}
+			result.set(declarator.id, { dynamic });
+		}
+	}
+	return result;
+}
+function isCreateCall(node, imports) {
+	if (!types.isCallExpression(node)) return false;
+	const callee = node.callee;
+	if (types.isIdentifier(callee)) return callee.name === imports.create;
+	return types.isMemberExpression(callee) && !callee.computed && types.isIdentifier(callee.object, { name: imports.namespace }) && types.isIdentifier(callee.property, { name: "create" });
+}
+/**
+* 交给 attrs 或 sx 的样式：attrs 的参数、sx 属性（JSX 的 sx={…}、对象里的 sx: …）的值，中间可以隔着数组。
+* 别处（传给组件的其他 prop、拿去比较）不改：那里要的是样式本身
+*/
+function inStyleSlot(path, imports) {
+	let current = path;
+	while (current.parentPath?.isArrayExpression()) current = current.parentPath;
+	const parent = current.parentPath;
+	if (!parent) return false;
+	if (parent.isCallExpression() && current.listKey === "arguments") {
+		const callee = parent.node.callee;
+		return types.isIdentifier(callee, { name: imports.attrs }) || types.isMemberExpression(callee) && types.isIdentifier(callee.object, { name: imports.namespace }) && types.isIdentifier(callee.property, { name: "attrs" });
+	}
+	if (parent.isJSXExpressionContainer()) {
+		const attribute = parent.parentPath;
+		return !!attribute?.isJSXAttribute() && types.isJSXIdentifier(attribute.node.name, { name: "sx" });
+	}
+	return parent.isObjectProperty() && current.key === "value" && !parent.node.computed && types.isIdentifier(parent.node.key, { name: "sx" });
+}
+/** 在交给 attrs 或 sx 的样式里（往上找到 JSX 属性为止） */
+function inAnyStyleSlot(path, imports) {
+	for (let current = path; current; current = current.parentPath) {
+		if (current.isJSXAttribute() || current.isJSXSpreadAttribute()) return false;
+		if (current.isExpression() && inStyleSlot(current, imports)) return true;
+	}
+	return false;
+}
+/**
+* 改成绑定值不值得：条件读到的状态（`item.hot`、`active`）至少有一个在渲染里没有别处读到。别处也读的话组件反正要
+* 重新渲染，绑定只会多一个 effect。组件自己的 prop 整个值不算（值变了 Vue 照样重新渲染子组件）。交给样式的那些读（attrs、sx 里，同样会改成绑定）、事件回调里的、赋值的不算“别处”。
+* 只读模块常量的条件不会变；读了渲染里算出来的局部变量的，它的来源已经被渲染追踪
+*/
+function worthBinding(condition, render, inStyles) {
+	const keys = /* @__PURE__ */ new Set();
+	let local = false;
+	const visit = (path) => {
+		if (!path.isReferencedIdentifier()) return;
+		const binding = path.scope.getBinding(path.node.name);
+		if (!binding || binding.scope.path.isProgram()) return;
+		if ((binding.path === render || binding.path.isDescendant(render)) && binding.kind !== "param") local = true;
+		const chain = chainOf(path);
+		if (binding.kind === "param" && !chain.includes(".") && !isCalled(path)) return;
+		if (binding.kind === "const" && !chain.includes(".") && !isCalled(path) && !isReactiveInit(binding.path)) return;
+		keys.add(chain);
+	};
+	if (condition.isIdentifier()) visit(condition);
+	else condition.traverse({ Identifier: visit });
+	if (local || !keys.size) return false;
+	const elsewhere = /* @__PURE__ */ new Set();
+	render.traverse({ Identifier(path) {
+		if (!path.isReferencedIdentifier() || inStyles(path)) return;
+		if (inEventHandler(path, render) || isWritten(path)) return;
+		const chain = chainOf(path);
+		for (const key of keys) if (chain === key || chain.startsWith(`${key}.`)) elsewhere.add(key);
+	} });
+	return elsewhere.size < keys.size;
+}
+/** 被调用：`compact()` 这类读状态的 getter */
+const isCalled = (path) => !!path.parentPath?.isCallExpression() && path.parentPath.node.callee === path.node;
+/** 常量的初值是响应式的：_derived、_derived.by、_fromRef 的结果 */
+function isReactiveInit(declarator) {
+	if (!declarator.isVariableDeclarator()) return false;
+	const init = declarator.node.init;
+	if (!types.isCallExpression(init)) return false;
+	const callee = types.isMemberExpression(init.callee) ? init.callee.object : init.callee;
+	return types.isIdentifier(callee) && (callee.name === "_derived" || callee.name === "_fromRef");
+}
+/** 从标识符起的成员链：`item.hot` → 'item.hot'；计算属性、调用处截断 */
+function chainOf(path) {
+	let chain = path.node.name;
+	let current = path;
+	while (current.parentPath?.isMemberExpression() && current.parentPath.node.object === current.node && !current.parentPath.node.computed && types.isIdentifier(current.parentPath.node.property)) {
+		current = current.parentPath;
+		chain += `.${current.node.property.name}`;
+	}
+	return chain;
+}
+/** 在事件回调（onXxx={() => …}）里：渲染时不执行，不算渲染读到的 */
+function inEventHandler(path, render) {
+	for (let fn = path.getFunctionParent(); fn && fn !== render; fn = fn.parentPath?.getFunctionParent() ?? null) {
+		const attribute = fn.parentPath?.parentPath;
+		if (attribute?.isJSXAttribute() && types.isJSXIdentifier(attribute.node.name) && /^on[A-Z]/.test(attribute.node.name.name)) return true;
+	}
+	return false;
+}
+/** 被赋值、自增的那一处（写，不是读） */
+function isWritten(path) {
+	let current = path;
+	while (current.parentPath?.isMemberExpression() && current.parentPath.node.object === current.node) current = current.parentPath;
+	const parent = current.parentPath;
+	return !!parent?.isAssignmentExpression() && current.key === "left" || !!parent?.isUpdateExpression();
+}
+/**
+* 只读渲染函数外面声明的东西（组件函数体里的状态、props、模块里的常量）：每次渲染生成的读取函数读的是同一批来源，
+* 运行时重新渲染时只换读取函数、不必重跑 effect 收集依赖（bind、select 的最后一个参数）。
+* 读了渲染函数里的局部变量、map 回调的参数时不算：它们每次渲染可能指向不同的响应式来源
+*/
+function readsOutsideRender(expression, render) {
+	let stable = true;
+	const check = (path) => {
+		if (!path.isReferencedIdentifier()) return;
+		const binding = path.scope.getBinding(path.node.name);
+		if (binding && (binding.path === render || binding.path.isDescendant(render))) stable = false;
+	};
+	if (expression.isIdentifier()) check(expression);
+	else expression.traverse({ Identifier: check });
+	return stable;
+}
+/** 在 JSX 属性（sx={…}、{...css.attrs(…)}）里：渲染时用到的样式 */
+const inJsxAttribute = (path) => !!path.findParent((parent) => parent.isJSXAttribute() || parent.isJSXSpreadAttribute());
+/** bind、select 的引用：有命名空间导入时用 css.bind，否则补一个具名导入（同一文件只补一次） */
+function helperReference(program, imports, name) {
+	if (imports.namespace) return types.memberExpression(types.identifier(imports.namespace), types.identifier(name));
+	imports.helpers ??= /* @__PURE__ */ new Map();
+	let local = imports.helpers.get(name);
+	if (!local) {
+		local = program.scope.generateUidIdentifier(name);
+		imports.helpers.set(name, local);
+		program.unshiftContainer("body", types.importDeclaration([types.importSpecifier(local, types.identifier(name))], types.stringLiteral(imports.source)));
+	}
+	return types.cloneNode(local);
+}
+//#endregion
+//#region src/compiler/style-hot.ts
+/**
+* 样式的热更新原地生效（开发服务器、运行时样式模式）：
+*
+*   const styles = css.create({ … })
+*   → const styles = __hotStyles("src/Button.tsx#styles", css.create({ … }))
+*
+* 模块重新执行时 hotStyles 按 id 找到旧对象，把新声明写进旧片段、改写已插入的规则（styles/hot.ts），
+* 类名不变，组件不用重新渲染。同时算出“骨架”：去掉这些调用的参数后的源码哈希，写进 file.metadata.styleSkeleton；
+* 热更新时骨架没变（只改了样式）就原地接住，变了才照常让导入方重新执行（vite/hmr.ts）。
+* 只认顶层声明里的 create、recipe：函数里的调用每次执行都是新对象，不能按 id 合并。
+*/
+/** 能原地更新的样式函数 */
+const HOT_FUNCTIONS = /* @__PURE__ */ new Set(["create", "recipe"]);
+/** 编译的第一遍、符文之前加的 Babel 插件；moduleId 是相对项目根目录的模块路径（见文件开头） */
+function styleHotPlugin(moduleId) {
+	return {
+		name: "vue-tsx-pro-style-hot",
+		visitor: { Program(program, state) {
+			const imports = hotImports(program);
+			if (!imports.namespace && !imports.named.size) return;
+			const code = state.file.code;
+			const removed = [];
+			let wrapper;
+			for (const statement of program.get("body")) {
+				const declaration = statement.isExportNamedDeclaration() ? statement.get("declaration") : statement;
+				if (!declaration.isVariableDeclaration() || declaration.node.kind !== "const") continue;
+				for (const declarator of declaration.get("declarations")) {
+					const id = declarator.node.id;
+					const init = declarator.get("init");
+					if (!types.isIdentifier(id) || !init.isCallExpression() || !isHotCall(init.node, imports)) continue;
+					const args = init.node.arguments;
+					const first = args[0];
+					const last = args.at(-1);
+					if (first?.start == null || last?.end == null) continue;
+					removed.push([first.start, last.end]);
+					wrapper ??= program.scope.generateUidIdentifier("hotStyles");
+					init.replaceWith(types.callExpression(types.cloneNode(wrapper), [types.stringLiteral(`${moduleId}#${id.name}`), init.node]));
+				}
+			}
+			if (!wrapper) return;
+			program.unshiftContainer("body", types.importDeclaration([types.importSpecifier(wrapper, types.identifier("hotStyles"))], types.stringLiteral(imports.source)));
+			state.file.metadata.styleSkeleton = skeleton(code, removed);
+		} }
+	};
+}
+function hotImports(program) {
+	const found = {
+		source: STYLE_SOURCE,
+		named: /* @__PURE__ */ new Set()
+	};
+	for (const statement of program.node.body) {
+		if (!types.isImportDeclaration(statement) || statement.source.value !== "@zerodep-dev/vue-tsx-pro-tsx/styles") continue;
+		found.source = statement.source.value;
+		for (const specifier of statement.specifiers) if (types.isImportNamespaceSpecifier(specifier)) found.namespace = specifier.local.name;
+		else if (types.isImportSpecifier(specifier) && types.isIdentifier(specifier.imported) && HOT_FUNCTIONS.has(specifier.imported.name)) found.named.add(specifier.local.name);
+	}
+	return found;
+}
+function isHotCall(node, imports) {
+	const callee = node.callee;
+	if (types.isIdentifier(callee)) return imports.named.has(callee.name);
+	return types.isMemberExpression(callee) && !callee.computed && types.isIdentifier(callee.object, { name: imports.namespace }) && types.isIdentifier(callee.property) && HOT_FUNCTIONS.has(callee.property.name);
+}
+/** 去掉样式参数后的源码的哈希（FNV-1a；编译器也在浏览器里跑，不用 node:crypto） */
+function skeleton(code, removed) {
+	let text = "";
+	let from = 0;
+	for (const [start, end] of removed) {
+		text += code.slice(from, start);
+		from = end;
+	}
+	text += code.slice(from);
+	let hash = 2166136261;
+	for (let index = 0; index < text.length; index++) {
+		hash ^= text.charCodeAt(index);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0).toString(36);
+}
+//#endregion
+//#region src/compiler/compile.ts
+/**
+* 一个文件的完整编译：解析一次、生成一次，中间两遍遍历，组合本包与官方的 Babel 插件。
+*
+*   第 1 遍：样式的响应式绑定与热更新（style-bindings.ts、style-hot.ts）→ 符文与 props（transform.ts）
+*   第 2 遍：Vue JSX（@vue/babel-plugin-jsx）→ 去掉 TS 类型 → 调用方追加的插件（热更新标记、演练场的模块表）
+*
+* 以前每一步各自解析、生成一次，成本大头是每一遍的遍历与生成（含 source map），合并后编译快三四成。
+* 分成两遍而不是一遍：第 1 遍的改写（符文换成 .value、样式调用换成绑定）要在 vue-jsx 处理元素之前完成，
+* 同一遍里各插件的访问器按节点交错执行，vue-jsx 会先看到没改写的属性。
+* 第 2 遍开始时重建作用域：第 1 遍插入的 import 与声明没有全部登记，vue-jsx 与去类型插件要靠作用域里的绑定判断。
+*
+* Vite 预设（vite/）与文档站的代码演练场都用它，两处的结果一致。
+*/
+/**
+* 编译一个文件；什么都不用做（没有符文、样式绑定与热更新，也不是 JSX 文件）时返回 null。
+* 写法错误时抛出带代码帧的错误。
+*/
+async function compile(code, options) {
+	const lang = options.lang ?? languageOf(options.filename) ?? "js";
+	const first = [];
+	if (options.runes !== false && needsRunes(code)) first.push([runesBabelPlugin, { optimize: options.optimize ?? true }]);
+	if (options.styleHot && needsStyleBindings(code)) {
+		const moduleId = options.styleHot;
+		first.unshift(() => styleHotPlugin(moduleId));
+	}
+	if (options.styleBindings && needsStyleBindings(code)) first.unshift(styleBindingsPlugin);
+	const second = [];
+	if (lang === "tsx" || lang === "jsx") {
+		second.push([vueJsx, options.jsx ?? {}]);
+		if (lang === "tsx") second.push([typescript, options.typescript ?? {}]);
+	}
+	if (!first.length && !second.length) return null;
+	const passes = [first, [...second, ...options.plugins ?? []]].filter((pass) => pass.length);
+	if (first.length && passes.length === 2) passes[1].unshift(rescope);
+	const shared = {
+		filename: options.filename,
+		babelrc: false,
+		configFile: false
+	};
+	let ast = await parseAsync(code, {
+		...shared,
+		parserOpts: { plugins: parserPlugins(lang) }
+	});
+	const metadata = {};
+	for (const [index, plugins] of passes.entries()) {
+		const last = index === passes.length - 1;
+		const result = await transformFromAstAsync(ast, code, {
+			...shared,
+			plugins,
+			ast: true,
+			code: last,
+			cloneInputAst: false,
+			sourceMaps: last && (options.sourceMaps ?? true),
+			generatorOpts: { jsescOption: { minimal: true } }
+		});
+		Object.assign(metadata, result.metadata);
+		ast = result.ast;
+		if (last) return {
+			code: result.code ?? "",
+			map: result.map,
+			ast,
+			warnings: metadata.runesWarnings ?? [],
+			styleSkeleton: metadata.styleSkeleton
+		};
+	}
+	return null;
+}
+/** 重建作用域（见文件开头） */
+function rescope() {
+	return {
+		name: "vue-tsx-pro-rescope",
+		visitor: { Program(program) {
+			program.scope.crawl();
+		} }
+	};
+}
+//#endregion
+//#region src/compiler/index.ts
+/**
+* 编译器入口。
+*
+* compile（compile.ts）是一个文件的完整编译，Vite 预设与文档站的代码演练场都用它：解析一次、生成一次，
+* 中间依次是样式的响应式绑定与热更新、符文、Vue JSX 与去掉类型。
+*
+* 其中本包自己的转换：
+*   - 符文（transform.ts）：让本地响应式变量像普通变量一样读写，语义全部交给 Vue
+*     1. 把符文声明换成 Vue API：_state → ref，_derived → computed，_fromRef → 直接持有外部 Ref
+*     2. 把 _component 的参数解构换成实例内的 prop 访问器（参考 Svelte 5 的 $.prop），
+*        并生成 Vue 需要的 props 声明；_bindable 走标准 v-model 协议（props.ts）
+*     3. 把这些变量的读写改写成 .value
+*     4. _toRef(x) 取回背后的 Ref；属性={_bind(x)} 换成 Vue 的 v-model（bind.ts）
+*     5. 对会悄悄失去响应性的写法、以及 TSX 里有更自然写法的 Vue 指令直接报错
+*     6. 渲染优化：组件子节点的插槽标 $stable，JSX 属性里的函数与常量每个实例只建一次（optimize.ts，可关）
+*     生成的代码就是手写 Vue 会写的代码，JSX 交给官方的 @vue/babel-plugin-jsx。
+*   - 样式（style-bindings.ts、style-hot.ts）：JSX 里的动态样式调用改成响应式绑定，顶层 create 包上热更新
+*
+* compileRunes 只编译符文，测试与语言服务用。
+*
+* 目录内的相对导入带 .ts 扩展名：语言服务（scripts/language-services）与 Vitest 配置在 Node 里直接加载这些源码。
+*/
+/**
+* 只编译一个文件里的符文与 _component 参数解构；不需要编译时返回 null。
+* 结果带 source map 与警告（只拿到初始值的读取等），误用直接抛出 RunesError。
+*/
+async function compileRunes(code, filename = "input.tsx", options = {}) {
+	if (!needsRunes(code)) return null;
+	const result = await transformAsync(code, {
+		filename,
+		babelrc: false,
+		configFile: false,
+		sourceMaps: true,
+		generatorOpts: { jsescOption: { minimal: true } },
+		parserOpts: { plugins: parserPlugins(languageOf(filename)) },
+		plugins: [[runesBabelPlugin, options]]
+	});
+	if (!result) return null;
+	const warnings = result.metadata.runesWarnings ?? [];
+	return {
+		code: result.code ?? "",
+		map: result.map ?? null,
+		warnings
+	};
+}
+//#endregion
+export { compile as n, runesBabelPlugin as r, compileRunes as t };