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

package/dist/styles.js

@@ -0,0 +1,1282 @@
+import { r as untrack } from "./state-YxL7IqUO.js";
+import { ReactiveEffect, getCurrentInstance } from "vue";
+//#region src/styles/priority.ts
+/**
+* 组合类里声明与条件块的排序依据（declarations.ts 的 serialize）：沿用 StyleX 的 getPriority（@stylexjs/shared 0.19.1），
+* 省掉了逻辑长属性那张 318 项的表——它们的优先级就是默认的 3000，查表与不查表结果一样。
+*
+* 规则：简写的简写 1000 < 简写 2000 < 长属性 3000 < 物理长属性 4000（后注入的压过先注入的）；
+* 条件加在属性上：@supports 30、@media 200、@container 300，伪类按表（:hover 130、:active 170…），伪元素 5000。
+*/
+const SHORTHANDS_OF_SHORTHANDS = new Set("animation background border border-block border-inline margin padding font grid grid-template grid-area all inset scroll-margin scroll-padding".split(" "));
+const SHORTHANDS_OF_LONGHANDS = new Set("animation-range scroll-timeline view-timeline background-position border-color border-style border-width border-block-start border-top border-block-end border-bottom border-inline-color border-inline-style border-inline-width border-inline-start border-left border-inline-end border-right border-image border-radius corner-shape caret outline grid-gap gap place-content place-items place-self margin-block margin-inline overscroll-behavior padding-block padding-inline columns column-rule contain-intrinsic-size container flex flex-flow font-variant grid-template-areas grid-row grid-column list-style mask mask-border offset overflow inset-block inset-inline scroll-margin-block scroll-margin-inline scroll-padding-block scroll-padding-inline scroll-snap-type text-decoration text-emphasis transition".split(" "));
+const LONGHANDS_PHYSICAL = new Set("border-top-color border-top-style border-top-width border-bottom-color border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius corner-top-left-shape corner-top-right-shape corner-bottom-left-shape corner-bottom-right-shape height width max-height max-width min-height min-width margin-top margin-bottom margin-left margin-right overscroll-behavior-y overscroll-behavior-x padding-top padding-bottom padding-left padding-right overflow-y overflow-x top bottom left right scroll-margin-top scroll-margin-bottom scroll-margin-left scroll-margin-right scroll-padding-top scroll-padding-bottom scroll-padding-left scroll-padding-right".split(" "));
+/** 伪类的优先级（不在表里的 40）；:focusWithin、:focusVisible 的驼峰写法照抄 StyleX */
+const PSEUDO_CLASSES = {
+	":is": 40,
+	":where": 40,
+	":not": 40,
+	":has": 45,
+	":dir": 50,
+	":lang": 51,
+	":first-child": 52,
+	":first-of-type": 53,
+	":last-child": 54,
+	":last-of-type": 55,
+	":only-child": 56,
+	":only-of-type": 57,
+	":nth-child": 60,
+	":nth-last-child": 61,
+	":nth-of-type": 62,
+	":nth-last-of-type": 63,
+	":empty": 70,
+	":link": 80,
+	":any-link": 81,
+	":local-link": 82,
+	":target-within": 83,
+	":target": 84,
+	":visited": 85,
+	":enabled": 91,
+	":disabled": 92,
+	":required": 93,
+	":optional": 94,
+	":read-only": 95,
+	":read-write": 96,
+	":placeholder-shown": 97,
+	":in-range": 98,
+	":out-of-range": 99,
+	":default": 100,
+	":checked": 101,
+	":indeterminate": 101,
+	":blank": 102,
+	":valid": 103,
+	":invalid": 104,
+	":user-invalid": 105,
+	":autofill": 110,
+	":picture-in-picture": 120,
+	":modal": 121,
+	":fullscreen": 122,
+	":paused": 123,
+	":playing": 124,
+	":current": 125,
+	":past": 126,
+	":future": 127,
+	":hover": 130,
+	":focusWithin": 140,
+	":focus": 150,
+	":focusVisible": 160,
+	":active": 170
+};
+const PSEUDO_ELEMENT = 5e3;
+/** when.* 生成的关系选择器：基数 + 被观察元素那个伪类的优先级 / 100 */
+const RELATIONAL = [
+	[/^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+\*\)$/, 10],
+	[/^:where\(:has\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/, 15],
+	[/^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*\)$/, 30],
+	[/^:where\(:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/, 40]
+];
+const ANY_SIBLING = /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*,\s+:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/;
+const PSEUDO_PART = /::[a-zA-Z-]+|:[a-zA-Z-]+(?:\([^)]*\))?/g;
+const pseudoClass = (name) => PSEUDO_CLASSES[name] ?? 40;
+/** 属性名（连字符）、伪类、伪元素或 @ 规则的优先级 */
+function getPriority(key) {
+	if (key.startsWith("--")) return 1;
+	if (key.startsWith("@supports")) return 30;
+	if (key.startsWith("@media")) return 200;
+	if (key.startsWith("@container")) return 300;
+	const parts = key.match(PSEUDO_PART);
+	if (parts && parts.length > 1 && !parts.some((part) => part.includes("("))) return parts.reduce((sum, part) => sum + (part.startsWith("::") ? PSEUDO_ELEMENT : pseudoClass(part)), 0);
+	if (key.startsWith("::")) return PSEUDO_ELEMENT;
+	if (key.startsWith(":")) {
+		for (const [pattern, base] of RELATIONAL) {
+			const match = pattern.exec(key);
+			if (match) return base + pseudoClass(match[1]) / 100;
+		}
+		const sibling = ANY_SIBLING.exec(key);
+		if (sibling) return 20 + Math.max(pseudoClass(sibling[1]), pseudoClass(sibling[2])) / 100;
+		return pseudoClass(key.split("(")[0]);
+	}
+	if (SHORTHANDS_OF_SHORTHANDS.has(key)) return 1e3;
+	if (SHORTHANDS_OF_LONGHANDS.has(key)) return 2e3;
+	if (LONGHANDS_PHYSICAL.has(key)) return 4e3;
+	return 3e3;
+}
+//#endregion
+//#region src/styles/token-map.ts
+/**
+* 主题 tokens 字符串写法的对照表：属性 → token 组（参考 Stitches 的 themeMap）。
+*
+* 表里的属性可以写短写 `fontSize: '_xs'`（= fontSizes.xs）；其他属性、或要跨组取值时写带组名的 `'_space.md'`。
+* 组名沿用 Stitches / styled-system 的约定，主题库按这些名字导出 defineVars。
+* 用到它的地方：编译器（compiler/tokens.ts）改写字符串，scripts/css-docs 给这些属性生成短写的取值类型。
+*/
+const sides = (prefix, suffix = "") => [
+	"",
+	"Top",
+	"Right",
+	"Bottom",
+	"Left",
+	"Block",
+	"BlockStart",
+	"BlockEnd",
+	"Inline",
+	"InlineStart",
+	"InlineEnd"
+].map((side) => `${prefix}${side}${suffix}`);
+const groups = {
+	space: [
+		"gap",
+		"rowGap",
+		"columnGap",
+		...sides("padding"),
+		...sides("margin"),
+		...sides("scrollMargin"),
+		...sides("scrollPadding"),
+		"inset",
+		"insetBlock",
+		"insetBlockStart",
+		"insetBlockEnd",
+		"insetInline",
+		"insetInlineStart",
+		"insetInlineEnd",
+		"top",
+		"right",
+		"bottom",
+		"left"
+	],
+	colors: [
+		"color",
+		"backgroundColor",
+		...sides("border", "Color"),
+		"outlineColor",
+		"columnRuleColor",
+		"textDecorationColor",
+		"textEmphasisColor",
+		"caretColor",
+		"accentColor",
+		"fill",
+		"stroke",
+		"WebkitTextFillColor",
+		"WebkitTextStrokeColor"
+	],
+	fonts: ["fontFamily"],
+	fontSizes: ["fontSize"],
+	fontWeights: ["fontWeight"],
+	lineHeights: ["lineHeight"],
+	letterSpacings: ["letterSpacing"],
+	sizes: [
+		"width",
+		"height",
+		"minWidth",
+		"minHeight",
+		"maxWidth",
+		"maxHeight",
+		"inlineSize",
+		"blockSize",
+		"minInlineSize",
+		"minBlockSize",
+		"maxInlineSize",
+		"maxBlockSize",
+		"flexBasis"
+	],
+	borderWidths: [
+		...sides("border", "Width"),
+		"outlineWidth",
+		"outlineOffset",
+		"columnRuleWidth",
+		"textDecorationThickness"
+	],
+	opacities: ["opacity"],
+	strokeWidths: ["strokeWidth"],
+	radii: [
+		"borderRadius",
+		"borderTopLeftRadius",
+		"borderTopRightRadius",
+		"borderBottomLeftRadius",
+		"borderBottomRightRadius",
+		"borderStartStartRadius",
+		"borderStartEndRadius",
+		"borderEndStartRadius",
+		"borderEndEndRadius"
+	],
+	shadows: ["boxShadow"],
+	durations: [
+		"transitionDuration",
+		"transitionDelay",
+		"animationDuration",
+		"animationDelay"
+	],
+	easings: ["transitionTimingFunction", "animationTimingFunction"]
+};
+/** CSS 属性（StyleX 的写法，如 backgroundColor）→ 短写取值的 token 组 */
+const TOKEN_GROUP_OF = new Map(Object.entries(groups).flatMap(([group, properties]) => properties.map((property) => [property, group])));
+//#endregion
+//#region src/styles/tokens.ts
+/**
+* 主题 tokens 的短写：样式里整个值写 '_xs'（按属性查 token-map.ts 的对照表找组）或 '_space.md'（带组名），
+* 展开声明时换成 token 变量 `var(--…)`。tokens 由主题库用 defineTokens 登记（@zerodep-dev/vue-tsx-pro-ui 的 config/theme/tokens.ts）。
+* 补全、悬停靠类型（主题库用 declare module 填入的 token 接口）；写错的 token 在第一次用到时报错。
+*/
+/** 组名（colors、space…）→ 这组 token 的变量引用 */
+const registry = /* @__PURE__ */ new Map();
+const TOKEN = /^_(?:(\w+)\.)?(\w+)$/;
+/** 值中间夹着的 token 短写（'calc(-1 * _xs)'）：只认整个值，夹在中间的不会换成变量 */
+const EMBEDDED = /(?:^|[\s(,])(_[A-Za-z]\w*(?:\.\w+)?)(?=$|[\s),])/;
+/**
+* 登记主题 tokens：组名 → defineVars 的结果，返回原对象（主题库把它导出成 `t`，`t.space.md` 用在模板字符串里）。
+* 同名的组后登记的为准
+*/
+function defineTokens$1(groups) {
+	for (const [name, group] of Object.entries(groups)) registry.set(name, group);
+	return groups;
+}
+/** 整个值是 token 的短写时换成 token 变量；不是时原样返回，夹在值中间的短写报错 */
+function resolveToken(property, text) {
+	const match = text.charCodeAt(0) === 95 ? TOKEN.exec(text) : null;
+	if (!match) {
+		const embedded = text.includes("_") ? EMBEDDED.exec(text)?.[1] : void 0;
+		if (embedded) {
+			const path = embedded.includes(".") ? embedded.slice(1) : `组.${embedded.slice(1)}`;
+			throw new Error(`样式：${property} 的值 '${text}' 中间夹着 token ${embedded}，只有整个值是 token 时才换成变量；请写成模板字符串里的 \${t.${path}}`);
+		}
+		return text;
+	}
+	const [, qualified, name] = match;
+	const group = qualified ?? TOKEN_GROUP_OF.get(property);
+	if (!group) throw new Error(`样式：${property} 没有短写对应的 token 组，'${text}' 要写带组名的 '_组.${name}'`);
+	const value = registry.get(group)?.[name];
+	if (value === void 0) {
+		const hint = registry.size ? "" : "；主题 tokens 还没登记（defineTokens）";
+		throw new Error(`样式：找不到 token '${text}'（${property}，${group} 组）${hint}`);
+	}
+	return value;
+}
+//#endregion
+//#region src/styles/units.ts
+/**
+* 样式里数字值的单位规则（与 StyleX 相同）：样式引擎（declarations.ts 的 cssValue）与 CSS 注释生成（scripts/css-docs）共用。
+* 不依赖别的模块：生成脚本直接用 Node 读这个 .ts 文件
+*/
+/** 数字值不补单位的属性（其余补 px） */
+const UNITLESS = new Set("WebkitLineClamp animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth counterSet counterReset columnCount flex flexGrow flexShrink flexOrder gridRow gridRowStart gridRowEnd gridColumn gridColumnStart gridColumnEnd gridArea fontWeight hyphenateLimitChars lineClamp lineHeight maskBorderOutset maskBorderSlice maskBorderWidth opacity order orphans tabSize widows zIndex fillOpacity floodOpacity rotate scale shapeImageThreshold stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth mathDepth zoom".split(" "));
+/** 数字值补 ms 的属性 */
+const MILLISECONDS = /* @__PURE__ */ new Set([
+	"animationDelay",
+	"animationDuration",
+	"transitionDelay",
+	"transitionDuration",
+	"voiceDuration"
+]);
+/** camelCase → kebab-case；自定义属性（--x）原样 */
+const dashify = (property) => property.startsWith("--") ? property : property.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+/** 值转成 CSS 文本：token 短写换成 token 变量（tokens.ts），数字按属性补单位（四位小数） */
+function cssValue(property, value) {
+	if (typeof value === "string") return resolveToken(property, value.trim());
+	const rounded = String(Math.round(value * 1e4) / 1e4);
+	if (UNITLESS.has(property) || property.startsWith("--")) return rounded;
+	return rounded + (MILLISECONDS.has(property) ? "ms" : "px");
+}
+/** 条件别名表（见 ALIASES）；值保留字面量类型，伪类别名可以直接交给 `when.*`（它要 `:` 开头的选择器） */
+const CONDITIONS = {
+	_hover: ":hover",
+	_active: ":active",
+	_focus: ":focus",
+	_focusVisible: ":focus-visible",
+	_focusWithin: ":focus-within",
+	_disabled: ":is(:disabled,[aria-disabled=\"true\"],[data-disabled])",
+	_selected: ":is([aria-selected=\"true\"],[data-selected])",
+	_checked: ":is(:checked,[aria-checked=\"true\"],[data-state=\"checked\"])",
+	_indeterminate: ":is(:indeterminate,[aria-checked=\"mixed\"],[data-state=\"indeterminate\"])",
+	_pressed: ":is([aria-pressed=\"true\"],[data-pressed])",
+	_expanded: ":is([aria-expanded=\"true\"],[data-expanded])",
+	_open: ":is([open],[data-state=\"open\"])",
+	_current: ":is([aria-current]:not([aria-current=\"false\"]),[data-current])",
+	_invalid: ":is([aria-invalid=\"true\"],[data-invalid])",
+	_readonly: ":is([aria-readonly=\"true\"],[data-readonly])",
+	_highlighted: ":is([data-highlighted])",
+	_dragging: ":is([data-dragging])",
+	_placeholder: "::placeholder",
+	_forcedColors: "@media (forced-colors: active)",
+	_reducedMotion: "@media (prefers-reduced-motion: reduce)",
+	_rtl: ":dir(rtl)"
+};
+/** 是普通对象（条件对象、命名空间），不是数组 */
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** 条件键 → 选择器片段或 @ 规则；写错的别名、裸的属性选择器直接报错（否则会变成无条件样式） */
+function condition(property, key) {
+	const resolved = conditionOf(key);
+	if (!resolved) throw new Error(`样式：${property} 的条件 "${key}" 不是伪类、属性选择器、@ 规则或已知的别名`);
+	return resolved;
+}
+/**
+* 条件键 → 选择器片段或 @ 规则；不是条件时 undefined。属性选择器（'[data-hot]'、'[data-state="open"]'）
+* 包成 :is(…)：状态写在 DOM 属性上，状态变化只改属性、类名不变（同条件别名）
+*/
+function conditionOf(key) {
+	const resolved = CONDITIONS[key] ?? key;
+	if (resolved.startsWith(":") || resolved.startsWith("@")) return resolved;
+	if (resolved.startsWith("[") && resolved.endsWith("]")) return `:is(${resolved})`;
+}
+const texts = (property, value) => (Array.isArray(value) ? value : [value]).map((v) => cssValue(property, v));
+/** 属性键：变量组的 token（`[shimmerVars.highlight]: …`，键是 var(--…)）设置的是那个变量 */
+const propertyOf = (key) => key.startsWith("var(--") ? key.slice(4, -1) : key;
+/** 命名空间的每个叶子。顶层的条件块（'::before': {…}、':hover': {…}）展开成各属性的条件值 */
+function eachLeaf(namespace, visit) {
+	for (const [name, value] of Object.entries(namespace)) {
+		const resolved = conditionOf(name);
+		const key = propertyOf(name);
+		if (resolved && isObject(value)) for (const [nestedName, nested] of Object.entries(value)) {
+			const property = propertyOf(nestedName);
+			walk(property, nested, [resolved], (chain, leaf) => visit({
+				property,
+				replace: false,
+				chain,
+				texts: texts(property, leaf)
+			}));
+		}
+		else if (value === null || value === void 0) visit({
+			property: key,
+			replace: true,
+			chain: [],
+			texts: null
+		});
+		else {
+			const replace = !isObject(value);
+			walk(key, value, [], (chain, leaf) => visit({
+				property: key,
+				replace,
+				chain,
+				texts: texts(key, leaf)
+			}));
+		}
+	}
+}
+/** 叶子 → 声明表 */
+function tableOf(leaves) {
+	const table = /* @__PURE__ */ new Map();
+	for (const { property, replace, chain, texts } of leaves) {
+		const dashed = dashify(property);
+		let entry = table.get(dashed);
+		if (!entry) table.set(dashed, entry = {
+			replace,
+			values: /* @__PURE__ */ new Map()
+		});
+		if (texts) entry.values.set(chain.join("\0"), texts);
+	}
+	return table;
+}
+/** 命名空间 → 声明表 */
+function declarations(namespace) {
+	const leaves = [];
+	eachLeaf(namespace, (leaf) => leaves.push(leaf));
+	return tableOf(leaves);
+}
+/** 条件对象逐层展开到叶子；null / undefined 不产出（条件里的 null 表示“这个条件不改”） */
+function walk(property, value, chain, visit) {
+	if (value === null || value === void 0) return;
+	if (!isObject(value)) return visit(chain, value);
+	for (const [key, nested] of Object.entries(value)) walk(property, nested, key === "default" ? chain : [...chain, condition(property, key)], visit);
+}
+/** 合并几个片段的声明表（规则见文件开头），不改动片段本身 */
+function merge(tables) {
+	if (tables.length === 1) return tables[0];
+	const merged = /* @__PURE__ */ new Map();
+	for (const table of tables) for (const [property, entry] of table) {
+		const previous = merged.get(property);
+		if (!previous || entry.replace) merged.set(property, entry);
+		else merged.set(property, {
+			replace: false,
+			values: new Map([...previous.values, ...entry.values])
+		});
+	}
+	return merged;
+}
+/** 条件链的排序权重：伪类、@ 规则的优先级相加（同 StyleX 的规则顺序） */
+const chainWeight = (chain) => chain ? chain.split("\0").reduce((sum, part) => sum + getPriority(part), 0) : 0;
+/**
+* 声明表 → 规则文本（类名用 SELF 占位）。每个条件链一条规则：
+* @ 规则里的选择器按层数重复类名（.c.c），压过同级的伪类；when.*（:where）再重复一次，同 StyleX
+*/
+function serialize(table) {
+	const byChain = /* @__PURE__ */ new Map();
+	for (const [property, entry] of table) for (const [chain, values] of entry.values) {
+		let list = byChain.get(chain);
+		if (!list) byChain.set(chain, list = []);
+		list.push([property, values]);
+	}
+	return [...byChain].sort(([a], [b]) => chainWeight(a) - chainWeight(b)).map(([chain, list]) => {
+		const body = list.sort(([a], [b]) => getPriority(a) - getPriority(b)).flatMap(([property, values]) => values.map((value) => `${property}:${value}`)).join(";");
+		const parts = chain ? chain.split("\0") : [];
+		const atRules = parts.filter((part) => part.startsWith("@"));
+		const pseudos = parts.filter((part) => part.startsWith(":"));
+		const classes = pseudos.filter((part) => !part.startsWith("::")).join("");
+		const elements = pseudos.filter((part) => part.startsWith("::")).join("");
+		const selector = `.
`.repeat(1 + atRules.length + (classes.includes(":where(") ? 1 : 0)) + classes + elements;
+		return atRules.reduceRight((rule, atRule) => `${atRule}{${rule}}`, `${selector}{${body}}`);
+	});
+}
+//#endregion
+//#region src/styles/sheet.ts
+/**
+* 运行时样式引擎的样式表：一张 <style>，规则按名字（类名、关键帧名）登记，同样的内容只插一次；
+* 记下规则原文（SSR 输出、测试断言用），热更新时按名字换掉。
+*/
+/**
+* 插过的规则：类名（关键帧名、变量名）→ 规则原文与 CSSOM 里的规则。同样的内容只插一次；
+* 原文给 SSR 输出 <style>，也不依赖 CSSOM 的序列化（浏览器、测试用的 DOM 会丢掉不认识的声明）；
+* CSSOM 的规则留着，热更新时按类名换掉
+*/
+const inserted = /* @__PURE__ */ new Map();
+let sheet;
+/** 引擎自己的样式表：放在 head 最前面，宿主页面后加载的同等特异性的 CSS 能盖过组件库 */
+function styleSheet() {
+	if (sheet !== void 0) return sheet;
+	if (typeof document === "undefined") return sheet = null;
+	const element = document.createElement("style");
+	element.dataset.vueTsxPro = "";
+	document.head.prepend(element);
+	return sheet = element.sheet;
+}
+/** 插入一个名字的规则（已有时先删掉旧的：热更新改写规则） */
+function insert(name, texts) {
+	const target = styleSheet();
+	const previous = inserted.get(name);
+	if (previous && target) for (const rule of previous.rules) {
+		const index = Array.prototype.indexOf.call(target.cssRules, rule);
+		if (index >= 0) target.deleteRule(index);
+	}
+	const rules = [];
+	if (target) for (const text of texts) try {
+		rules.push(target.cssRules[target.insertRule(text, target.cssRules.length)]);
+	} catch {}
+	inserted.set(name, {
+		texts,
+		rules
+	});
+}
+/** 这个名字的规则插过没有 */
+const isInserted = (name) => inserted.has(name);
+/** 已插入的全部规则原文，一条一行（SSR 输出 <style> 用） */
+function styleText() {
+	return [...inserted.values()].flatMap((record) => record.texts).join("\n");
+}
+/** murmurhash2（同 @emotion/hash、StyleX 的 createHash），转 36 进制 */
+function hash(text) {
+	let h = 0;
+	let i = 0;
+	let length = text.length;
+	for (; length >= 4; ++i, length -= 4) {
+		let k = text.charCodeAt(i) & 255 | (text.charCodeAt(++i) & 255) << 8 | (text.charCodeAt(++i) & 255) << 16 | (text.charCodeAt(++i) & 255) << 24;
+		k = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
+		k ^= k >>> 24;
+		h = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+	}
+	if (length >= 3) h ^= (text.charCodeAt(i + 2) & 255) << 16;
+	if (length >= 2) h ^= (text.charCodeAt(i + 1) & 255) << 8;
+	if (length >= 1) {
+		h ^= text.charCodeAt(i) & 255;
+		h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+	}
+	h ^= h >>> 13;
+	h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+	return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+//#endregion
+//#region src/styles/fragment.ts
+/**
+* 片段与组合类：create 的每个命名空间是一个片段（声明表）；attrs 把一个元素的片段合成一个类，第一次出现时插入规则。
+* 记下“组合类 ← 片段”的关系，热更新换了片段的声明时按原类名改写规则。
+*/
+/** 片段上的声明表 */
+const FRAGMENT = Symbol("style fragment");
+/** 固定类（createTheme 的主题类、defineMarker 的标记类）上的 [去重键, 类名] */
+const CLASS = Symbol("style class");
+/** 动态样式的结果（[片段, 行内变量]）的标记 */
+const DYNAMIC = Symbol("style dynamic");
+/** css.bind 的结果的标记 */
+const BINDING = Symbol("style binding");
+/** 动态样式函数上的求值入口 */
+const EVALUATE = Symbol("style evaluate");
+/** 新的片段；声明表可写：热更新时换成新的（hotStyles），片段对象本身不变，用到它的缓存、已渲染的类照样有效 */
+const fragment = (table) => Object.defineProperty({}, FRAGMENT, {
+	value: table,
+	writable: true
+});
+/** 是 create 产出的片段 */
+const isFragment = (value) => typeof value === "object" && value !== null && FRAGMENT in value;
+/** 组合类 → 组成它的片段；片段 → 用到它的组合类（热更新改了片段时据此改写规则） */
+const composites = /* @__PURE__ */ new Map();
+const usedBy = /* @__PURE__ */ new WeakMap();
+/** 组合一组片段：类名是规则内容的哈希，第一次出现时插入 */
+function composite(fragments) {
+	const rules = serialize(merge(fragments.map((part) => part[FRAGMENT])));
+	if (!rules.length) return "";
+	const name = `x${hash(rules.join(""))}`;
+	if (!isInserted(name)) insert(name, rules.map((rule) => rule.replaceAll("
", name)));
+	if (!composites.has(name)) {
+		composites.set(name, fragments);
+		for (const part of fragments) {
+			let names = usedBy.get(part);
+			if (!names) usedBy.set(part, names = /* @__PURE__ */ new Set());
+			names.add(name);
+		}
+	}
+	return name;
+}
+/** 片段换成新的声明表，用到它的组合类按原类名重写规则 */
+function replaceFragment(target, table) {
+	target[FRAGMENT] = table;
+	for (const name of usedBy.get(target) ?? []) insert(name, serialize(merge(composites.get(name).map((part) => part[FRAGMENT]))).map((rule) => rule.replaceAll("
", name)));
+}
+//#endregion
+//#region src/styles/compose.ts
+/**
+* 一个元素的样式组合成类：片段合成一个组合类，固定类（主题、标记）原样挂上。
+* attrs 渲染时用它；元素上的绑定换了其中一段时也用它就地算出新类（bindings.ts）。
+*/
+const cache = {};
+/**
+* 一组样式（按书写顺序）→ 元素的类。按参与的对象逐层查缓存，命中时不拼字符串、不算哈希，
+* 同样的组合返回同一个结果对象（Vue 比对 class 相同就不碰 DOM）
+*/
+function compose(parts) {
+	let node = cache;
+	for (const part of parts) {
+		node.next ??= /* @__PURE__ */ new WeakMap();
+		let child = node.next.get(part);
+		if (!child) node.next.set(part, child = {});
+		node = child;
+	}
+	return node.result ??= resolve(parts);
+}
+/** 缓存没命中：片段合成一个类；固定类（主题、标记）按去重键后者覆盖前者 */
+function resolve(parts) {
+	const fragments = [];
+	const fixed = /* @__PURE__ */ new Map();
+	for (const part of parts) if (FRAGMENT in part) fragments.push(part);
+	else if (CLASS in part) {
+		const [key, className] = part[CLASS];
+		fixed.delete(key);
+		fixed.set(key, className);
+	} else throw new Error("attrs：不认识的样式，只收 create、createTheme、defineMarker 的结果");
+	const classes = [fragments.length ? composite(fragments) : "", ...fixed.values()].filter(Boolean);
+	return Object.freeze(classes.length ? { class: classes.join(" ") } : {});
+}
+//#endregion
+//#region src/styles/devtools.ts
+/** 开发模式（打包工具把 process.env.NODE_ENV 换成字面量，生产构建里这段代码被去掉） */
+const DEV = process.env.NODE_ENV !== "production";
+const LAYER = "vue-tsx-pro:style-bindings";
+/** 每个应用的时间线接口；载入中时为 Promise */
+const apis = /* @__PURE__ */ new WeakMap();
+/** 页面装了 devtools（扩展或独立版注入的全局钩子） */
+const hasDevtools = () => typeof window !== "undefined" && !!window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+function timeline(app) {
+	if (apis.has(app)) return apis.get(app);
+	const loading = import("@vue/devtools-api").then(({ setupDevtoolsPlugin }) => new Promise((resolve) => setupDevtoolsPlugin({
+		id: LAYER,
+		label: "vue-tsx-pro 样式",
+		packageName: "@zerodep-dev/vue-tsx-pro-tsx",
+		app,
+		enableEarlyProxy: true
+	}, (api) => {
+		api.addTimelineLayer({
+			id: LAYER,
+			label: "样式绑定",
+			color: 4372611
+		});
+		resolve(api);
+	}))).catch(() => null).then((api) => {
+		apis.set(app, api);
+		return api;
+	});
+	apis.set(app, loading);
+	return loading;
+}
+/** 记一条“样式绑定更新”：只在开发模式、装了 devtools 时调用有效 */
+function recordBindingUpdate(instance, element, change) {
+	if (!instance || !hasDevtools()) return;
+	const name = instance.type.name ?? instance.type.__name ?? "匿名组件";
+	const changed = Object.keys(change.variables).length;
+	const event = {
+		title: name,
+		subtitle: [change.className && "换类", changed && `改变量 ×${changed}`].filter(Boolean).join("，"),
+		data: {
+			组件: name,
+			元素: describe(element),
+			...change.className && { 换类: `${change.className[0]} → ${change.className[1]}` },
+			...changed && { 变量: change.variables }
+		}
+	};
+	const api = timeline(instance.appContext.app);
+	const add = (target) => target?.addTimelineEvent({
+		layerId: LAYER,
+		event: {
+			time: target.now(),
+			...event
+		}
+	});
+	if (api instanceof Promise) api.then(add);
+	else add(api);
+}
+/** 元素的简短描述：标签、id、使用方给的类（不含引擎生成的 x 开头的类） */
+function describe(element) {
+	const id = element.id ? `#${element.id}` : "";
+	const classes = [...element.classList].filter((name) => !/^x[0-9a-z]+$/.test(name)).map((name) => `.${name}`).join("");
+	return `<${element.tagName.toLowerCase()}${id}${classes}>`;
+}
+//#endregion
+//#region src/styles/bindings.ts
+/**
+* 元素上的响应式绑定（css.bind、css.select 交给 attrs 之后）：元素挂上时起一个 effect，参数变化时只改元素上的
+* CSS 变量；选中的样式或动态样式的形状变了时就地换组合类。组件不重新渲染；组件因别的原因重新渲染时复用元素上的
+* effect，卸载时停掉。开发模式下每次更新记到 Vue devtools 的时间线（devtools.ts）。
+*/
+const boundElements = /* @__PURE__ */ new WeakMap();
+/** 变了的绑定攒到同一个微任务里批量更新（同一轮里改几次参数只改一次 DOM） */
+const dirty = /* @__PURE__ */ new Set();
+function schedule(bound) {
+	if (!dirty.size) queueMicrotask(flush);
+	dirty.add(bound);
+}
+function flush() {
+	const batch = [...dirty];
+	dirty.clear();
+	for (const bound of batch) if (!bound.stopped) bound.effect.run();
+}
+/**
+* 读绑定的参数（effect 借此收集依赖）；参数没变的不再求值，变了的只改元素上变了的变量。
+* 选中的样式或形状变了（多出、少了属性）时按换过的那组样式重新组合，就地换掉元素上的类
+*/
+function apply(element, bound) {
+	let reshaped = false;
+	const change = DEV ? { variables: {} } : void 0;
+	for (const entry of bound.bindings) {
+		const args = entry.binding.args();
+		if (sameArgs(args, entry.args)) continue;
+		const { part, inline } = entry.binding.style[EVALUATE](args);
+		entry.args = args;
+		if (part !== bound.parts[entry.index]) {
+			bound.parts[entry.index] = part;
+			reshaped = true;
+		}
+		const previous = entry.inline;
+		entry.inline = inline;
+		for (const name in inline) {
+			if (previous[name] === inline[name]) continue;
+			element.style.setProperty(name, inline[name]);
+			if (change) change.variables[name] = inline[name];
+		}
+		for (const name in previous) {
+			if (name in inline || ownedByOthers(bound, entry, name)) continue;
+			element.style.removeProperty(name);
+			if (change) change.variables[name] = null;
+		}
+	}
+	if (reshaped) {
+		const before = bound.className;
+		swapClass(element, bound, compose(bound.parts).class ?? "");
+		if (change && before !== bound.className) change.className = [before, bound.className];
+	}
+	if (change && (change.className || Object.keys(change.variables).length)) recordBindingUpdate(bound.instance, element, change);
+}
+/** 同一元素上别的绑定也写着这个变量（同一个动态样式绑了两次）：不删 */
+const ownedByOthers = (bound, self, name) => bound.bindings.some((entry) => entry !== self && name in entry.inline);
+/**
+* 就地换类：只动引擎给的那几个类，元素上别的类（使用方的 class、过渡类）不碰。
+* Vue 的虚拟节点里还是渲染时的类；组件之后因别的原因重新渲染时按当时的状态算出类，与元素上的一致
+*/
+function swapClass(element, bound, next) {
+	const before = bound.className ? bound.className.split(" ") : [];
+	const after = next ? next.split(" ") : [];
+	const removed = before.filter((name) => !after.includes(name));
+	const added = after.filter((name) => !before.includes(name));
+	const pairs = Math.min(removed.length, added.length);
+	for (let index = 0; index < pairs; index++) element.classList.replace(removed[index], added[index]);
+	for (const name of removed.slice(pairs)) element.classList.remove(name);
+	for (const name of added.slice(pairs)) element.classList.add(name);
+	bound.className = next;
+}
+/**
+* 参数没变：每一项相同，并且都是原始值或样式本身。对象参数（动态样式读它的属性）即使是同一个也要重新求值，
+* 读它属性的那些依赖是求值时收集的
+*/
+function sameArgs(next, previous) {
+	if (next.length !== previous.length) return false;
+	for (let index = 0; index < next.length; index++) {
+		const value = next[index];
+		if (!Object.is(value, previous[index])) return false;
+		if (typeof value === "object" && value !== null && !(FRAGMENT in value) && !(CLASS in value)) return false;
+		if (typeof value === "function") return false;
+	}
+	return true;
+}
+/**
+* 元素的 ref：挂上时起一个 effect（Vue 公开的 ReactiveEffect，依赖变化时排进微任务）。第一次运行只为收集依赖：
+* 读到的参数与渲染时相同，就不再求值、不碰 DOM（挂载时参数只算一次）。
+* 组件重新渲染会给一个新的 ref 函数，同一个元素就复用原来的 effect，换上这次的样式与读取函数；读取函数读的来源
+* 可能变了（不稳定的绑定）时重跑一次重新收集依赖。卸载时 Vue 用 null 调用 ref，停掉 effect。
+* （ref 函数换了时 Vue 不会用 null 调旧的那个，所以状态按元素存）
+*/
+function watchBindings(bindings, parts, className) {
+	let current;
+	const instance = DEV ? getCurrentInstance() : null;
+	return (element) => {
+		if (!element) {
+			if (!current) return;
+			const bound = boundElements.get(current);
+			if (bound) {
+				bound.stopped = true;
+				bound.effect.stop();
+			}
+			boundElements.delete(current);
+			current = void 0;
+			return;
+		}
+		current = element;
+		const existing = boundElements.get(current);
+		if (existing) {
+			const same = sameSources(existing.bindings, bindings);
+			existing.bindings = bindings;
+			existing.parts = parts;
+			existing.className = className;
+			if (!same) existing.effect.run();
+			return;
+		}
+		const target = current;
+		const bound = {
+			bindings,
+			parts,
+			className,
+			stopped: false,
+			effect: new ReactiveEffect(() => apply(target, bound)),
+			instance: DEV ? instance : null
+		};
+		bound.effect.scheduler = () => schedule(bound);
+		boundElements.set(target, bound);
+		bound.effect.run();
+	};
+}
+/** 两次渲染的绑定读的是同一批来源：个数、求值入口都相同，而且读取函数都是稳定的 */
+function sameSources(previous, next) {
+	return previous.length === next.length && next.every(({ binding }, index) => binding.stable && previous[index].binding.style === binding.style);
+}
+//#endregion
+//#region src/styles/dynamic.ts
+/**
+* 动态样式（create 里写成函数的命名空间）与响应式绑定：css.bind 绑定动态样式的参数，css.select 绑定选哪段样式。
+*/
+/**
+* 动态样式的变量名：按属性与条件（同 StyleX 的 --x-属性）。不注册 @property：类里引用变量的元素，
+* 自己的行内一定写着这个变量（同一次求值产出类与值），不会用到祖先继承下来的值；注册反而让样式重算慢 15–20%
+*/
+const dynamicVar = (property, chain) => chain.length ? `--x-${property}-${hash(chain.join(""))}` : `--x-${property}`;
+/**
+* 动态样式：一直没变过的属性直接写进类里（多半是常量，同手写，元素上不挂变量）；
+* 值一旦和第一次不同，这个属性就永久转成变量（类里写 var(--x-属性)、值进行内样式）。
+* 一个动态命名空间最多产生“属性数 + 1”种类，不随取值增长；转成变量之后值怎么变类都不变。
+* StyleX 把动态命名空间的属性一律变成行内变量，每个元素多挂几个，样式重算更慢。
+* 响应式绑定遇到“这个属性刚开始变”（类还是写死的那种）时就地换成变量版的类（bindings.ts），之后只改变量
+*/
+function dynamic(factory) {
+	const first = /* @__PURE__ */ new Map();
+	const varying = /* @__PURE__ */ new Set();
+	const shapes = /* @__PURE__ */ new Map();
+	const memo = /* @__PURE__ */ new Map();
+	const evaluate = (args) => {
+		const key = memoKey(args);
+		const hit = key === void 0 ? void 0 : memo.get(key);
+		if (hit) return hit;
+		const before = varying.size;
+		const result = compute(args);
+		if (varying.size !== before || memo.size >= MEMO_LIMIT) memo.clear();
+		if (key !== void 0) memo.set(key, result);
+		return result;
+	};
+	const compute = (args) => {
+		const inline = {};
+		const leaves = [];
+		let shape = "";
+		eachLeaf(factory(...args), (leaf) => {
+			const key = leaf.chain.length ? `${leaf.property}\0${leaf.chain.join("\0")}` : leaf.property;
+			const text = leaf.texts?.join(", ") ?? "";
+			const seen = first.get(key);
+			if (seen === void 0) first.set(key, text);
+			else if (seen !== text) varying.add(key);
+			if (!leaf.texts || !varying.has(key)) {
+				shape += `${key}=${text};`;
+				leaves.push(leaf);
+				return;
+			}
+			const variable = dynamicVar(leaf.property, leaf.chain);
+			inline[variable] = text;
+			shape += `${key};`;
+			leaves.push({
+				...leaf,
+				texts: [`var(${variable})`]
+			});
+		});
+		let shared = shapes.get(shape);
+		if (!shared) shapes.set(shape, shared = fragment(tableOf(leaves)));
+		return {
+			part: shared,
+			inline
+		};
+	};
+	const style = (...args) => {
+		const { part, inline } = evaluate(args);
+		const result = [part, inline];
+		Object.defineProperty(result, DYNAMIC, { value: true });
+		return result;
+	};
+	return Object.assign(style, { [EVALUATE]: evaluate });
+}
+/** 每个动态样式最多记住多少组参数的结果 */
+const MEMO_LIMIT = 512;
+/** 参数都是原始值时的记忆键（带上类型，1 与 '1' 不同）；有对象参数时不记忆 */
+function memoKey(args) {
+	let key = "";
+	for (const arg of args) {
+		const type = typeof arg;
+		if (arg !== null && type !== "string" && type !== "number" && type !== "boolean" && type !== "undefined") return void 0;
+		key += `${type[0]}${String(arg)}\u0001`;
+	}
+	return key;
+}
+/**
+* 动态样式的响应式绑定：`css.bind(styles.bar, () => [item.width])`。交给 attrs / sx 后，
+* 参数变化时只改元素上的变量，不重新渲染组件。JSX 里写 `styles.bar(item.width)` 时编译器自动改写成它
+*/
+function bind$1(style, args, stable = false) {
+	return {
+		[BINDING]: true,
+		style,
+		args,
+		stable
+	};
+}
+const EMPTY = Object.freeze({});
+/** 没选中任何样式：空片段，参与组合但不产生声明 */
+const NONE = {
+	part: fragment(/* @__PURE__ */ new Map()),
+	inline: EMPTY
+};
+const selected = /* @__PURE__ */ new WeakMap();
+/** css.select 的求值：读到的样式原样参与组合，假值不选 */
+const SELECT = { [EVALUATE]: ([style]) => {
+	if (!style) return NONE;
+	if (typeof style !== "object" || !(FRAGMENT in style || CLASS in style)) throw new Error("css.select：读取函数要返回 create、createTheme、defineMarker 的结果，或假值");
+	let result = selected.get(style);
+	if (!result) selected.set(style, result = {
+		part: style,
+		inline: EMPTY
+	});
+	return result;
+} };
+/**
+* 按状态选样式的响应式绑定：`css.select(() => item.hot && styles.hot)`。交给 attrs / sx 后，渲染时不追踪读到的状态，
+* 状态变化时由元素上的 effect 就地换组合类，组件不重新渲染。JSX 里写 `item.hot && styles.hot`、
+* `active ? styles.on : styles.off`、`sizeStyles[size]` 时编译器自动改写成它（只在状态没有别处读、换类能省下渲染时）
+*/
+function select$1(read, stable = false) {
+	return {
+		[BINDING]: true,
+		style: SELECT,
+		args: () => [read()],
+		stable
+	};
+}
+//#endregion
+//#region src/styles/hot.ts
+/**
+* 样式的热更新原地生效：编译器把顶层的 create / recipe 包上 hotStyles（compiler/style-hot.ts），
+* 模块重新执行时新内容写进旧对象，用到的组合类按原类名改写规则，组件不重新渲染。
+*/
+/** 配方等自己管理状态的样式对象实现它：拿到同一 id 的新对象时把自己原地换成新的 */
+const HOT = Symbol("style hot");
+const hotObjects = /* @__PURE__ */ new Map();
+/**
+* 编译器包在顶层 `const 名 = css.create(…)` / `recipe(…)` 外面（开发服务器，compiler/style-hot.ts）：
+* 第一次登记；模块热更新重新执行时把新内容写进旧对象并返回旧对象——导入方手里拿的还是它，
+* 已插入的规则按原类名改写，组件不用重新渲染
+*/
+function hotStyles(id, value) {
+	const previous = hotObjects.get(id);
+	if (!previous) {
+		hotObjects.set(id, value);
+		return value;
+	}
+	if (HOT in previous) previous[HOT](value);
+	else hotUpdate(previous, value);
+	return previous;
+}
+/** create 的结果原地换成新的：已展开的片段换声明表并改写用到它的规则；动态样式、新加的命名空间直接换上 */
+function hotUpdate(previous, next) {
+	for (const name of Object.keys(next)) {
+		const value = next[name];
+		const current = Object.getOwnPropertyDescriptor(previous, name);
+		if (current && !current.get && isFragment(current.value) && isFragment(value)) replaceFragment(current.value, value[FRAGMENT]);
+		else Object.defineProperty(previous, name, {
+			value,
+			enumerable: true,
+			configurable: true
+		});
+	}
+}
+//#endregion
+//#region src/styles/vars.ts
+/**
+* CSS 变量组与主题、标记：defineVars 在 :root 上声明一组变量（主题 tokens、组件之间约定的变量），
+* createTheme 生成只改这组变量的类，defineMarker 给 when.* 标出被观察的祖先、兄弟。
+* 变量名、标记类名都由调用方给的名字决定（`--vtp-colors-accent`），源码、产物、SSR 一致，调试时也认得出来。
+*/
+/** 变量组上的组名（不可枚举：遍历 token 时不出现） */
+const VAR_GROUP = Symbol("style var group");
+/** 条件值按 @ 规则分开的声明：@ 规则链（无条件时为空串）→ 声明 */
+function byAtRule(entries) {
+	const blocks = /* @__PURE__ */ new Map();
+	for (const [variable, value] of entries) walk(variable, value, [], (chain, leaf) => {
+		const atRule = chain.join("");
+		let list = blocks.get(atRule);
+		if (!list) blocks.set(atRule, list = []);
+		list.push(`${variable}:${cssValue(variable, leaf)}`);
+	});
+	return blocks;
+}
+/**
+* 声明一组 CSS 变量：`defineVars('vtp-colors', { accent: '#3e63dd' })` → `:root{--vtp-colors-accent:#3e63dd}`，
+* 返回 `{ accent: 'var(--vtp-colors-accent)' }`。值可以按条件取（`{ default: '200ms', '@media (…)': '0ms' }`）。
+* 规则在调用时插入；同名再调用（热更新重新执行模块）时换成新的取值
+*/
+function defineVars$1(name, tokens) {
+	const group = {};
+	const values = [];
+	for (const [key, value] of Object.entries(tokens)) {
+		const variable = `--${name}-${dashify(key).replace(/^-/, "")}`;
+		group[key] = `var(${variable})`;
+		values.push([variable, value]);
+	}
+	const rules = [...byAtRule(values)].map(([atRule, list]) => {
+		const rule = `:root{${list.join(";")}}`;
+		return atRule ? `${atRule}{${rule}}` : rule;
+	});
+	insert(`--${name}`, rules);
+	Object.defineProperty(group, VAR_GROUP, { value: name });
+	return Object.freeze(group);
+}
+/**
+* 一套主题：只改一组变量的类（`.t.t, .t.t:root { --变量: 值 }`，压过 :root 上的默认值），值可以按条件取。
+* 同一组的主题在一次 attrs 里后者覆盖前者
+*/
+function createTheme$1(group, overrides) {
+	const values = [];
+	for (const [key, value] of Object.entries(overrides)) {
+		const variable = /^var\((--[^)]+)\)$/.exec(group[key] ?? "")?.[1];
+		if (!variable) throw new Error(`createTheme：${group[VAR_GROUP]} 组里没有 token '${key}'`);
+		values.push([variable, value]);
+	}
+	const rules = [...byAtRule(values)].map(([atRule, list]) => {
+		const rule = `.
.
,.
.
:root{${list.join(";")}}`;
+		return atRule ? `${atRule}{${rule}}` : rule;
+	});
+	const name = `x${hash(group[VAR_GROUP] + rules.join(""))}`;
+	if (!isInserted(name)) insert(name, rules.map((rule) => rule.replaceAll("
", name)));
+	return Object.freeze({ [CLASS]: [group[VAR_GROUP], name] });
+}
+/** 定义标记：`defineMarker('vtp-heading')`，类名就是这个名字 */
+const defineMarker$1 = (name) => Object.freeze({ [CLASS]: [name, name] });
+const markerClass = (marker) => marker[CLASS][1];
+/** when.*：按祖先、后代、兄弟的状态取样式的条件键（:where 不加特异性，同 StyleX） */
+const when$1 = {
+	/** 祖先处于某状态时：`[when.ancestor(':hover', marker)]: 1` */
+	ancestor: (pseudo, marker) => `:where(.${markerClass(marker)}${pseudo} *)`,
+	/** 有后代处于某状态时 */
+	descendant: (pseudo, marker) => `:where(:has(.${markerClass(marker)}${pseudo}))`,
+	/** 前面的兄弟处于某状态时 */
+	siblingBefore: (pseudo, marker) => `:where(.${markerClass(marker)}${pseudo} ~ *)`,
+	/** 后面的兄弟处于某状态时 */
+	siblingAfter: (pseudo, marker) => `:where(:has(~ .${markerClass(marker)}${pseudo}))`,
+	/** 任一兄弟处于某状态时 */
+	anySibling: (pseudo, marker) => `:where(.${markerClass(marker)}${pseudo} ~ *, :has(~ .${markerClass(marker)}${pseudo}))`
+};
+//#endregion
+//#region src/styles/runtime.ts
+/**
+* 运行时样式引擎：写法同 StyleX（create、attrs、createTheme、keyframes、when），实现同 Emotion / zerodep-css：
+* 一个元素一次 attrs 合成一个类，规则在第一次用到时插入；状态变化只改该改的那一处。
+*
+*   - create 只产出“片段”（声明表），不注入；命名空间第一次被读到时才展开。
+*   - attrs(片段…) 按片段对象逐层查缓存（WeakMap 链），命中时不拼字符串、不算哈希，返回同一个结果对象，
+*     Vue 比对 class 相同就不碰 DOM。未命中时合并成一个组合类：`.c{…} .c:hover{…} @media(…){.c.c{…}}`，
+*     类名是内容的哈希，同样的组合只插一次。一个元素只挂一个生成的类，没有原子类之间的优先级问题；
+*     块内按 StyleX 的属性优先级排序（简写在前、长属性在后），条件块按条件优先级排序（:hover < :active < @media）。
+*   - 合并语义：后面的普通值整体替换该属性（同 StyleX，含它的条件值）；条件对象按条件逐项合并，
+*     其中的 null 表示“这个条件不改”（不会像 StyleX 那样把前面的默认值清掉）；顶层的 null 去掉该属性。
+*   - 动态样式（create 里的函数）：一直没变过的属性写进类里；值变过的属性永久转成变量（类里写 var(--x-属性)、
+*     值进元素的行内样式），之后值怎么变类名都不变、不插新规则。
+*   - 响应式绑定（css.bind，编译器把 JSX 里的 `styles.bar(item.width)` 自动改写成它）：渲染时只算类名、不追踪依赖，
+*     元素挂上后由一个响应式 effect 直接改元素上的变量。值变化不重新渲染组件、不做 vdom 比对，只改那一个变量。
+*   - 按状态选样式（css.select，编译器把 `item.hot && styles.hot` 这类只在样式里读的状态改写成它）：同样不追踪，
+*     状态变化时 effect 换掉那一段样式、重新组合，就地换元素上的组合类（bindings.ts）。
+*   - 状态样式用条件别名（_selected、_disabled…）跟着 DOM 上的 aria / data 属性走：状态变化只改属性，类名不变。
+*   - 主题（createTheme，vars.ts）是一个只改变量的类，换主题只换这个类，组件不用重新渲染。
+*   - 热更新（hotStyles，编译器包在顶层 create / recipe 外面）：模块重新执行时新声明写进旧片段，
+*     用到它的组合类按原类名改写规则，组件不重新渲染。
+*
+* 分成几个模块：declarations（样式对象 → 声明表 → 规则文本）、sheet（样式表）、fragment（片段与组合类）、
+* compose（一个元素的样式 → 类，带缓存）、dynamic（动态样式与 bind、select）、bindings（元素上的响应式绑定）、vars（变量组、主题、标记）、tokens（主题 tokens 的短写）、
+* hot（热更新）；这里是对外的入口。
+*/
+/** css.create：命名空间第一次被读时展开（惰性）；函数是动态样式 */
+function create$1(namespaces) {
+	const result = {};
+	for (const [name, namespace] of Object.entries(namespaces)) {
+		if (typeof namespace === "function") {
+			result[name] = dynamic(namespace);
+			continue;
+		}
+		Object.defineProperty(result, name, {
+			enumerable: true,
+			configurable: true,
+			get() {
+				const value = fragment(declarations(namespace));
+				Object.defineProperty(result, name, {
+					value,
+					enumerable: true,
+					configurable: true
+				});
+				return value;
+			}
+		});
+	}
+	return result;
+}
+/** 直接写的样式对象（`sx={{ marginTop: '_md' }}`）→ 片段：同一个对象按对象记住，每次渲染新建的按内容记住 */
+const literalByObject = /* @__PURE__ */ new WeakMap();
+const literalByContent = /* @__PURE__ */ new Map();
+/** 按内容最多记住多少个（值一直在变的写法会不断出新内容，不无限增长；记不住时重新展开，规则照旧只插一次） */
+const LITERAL_LIMIT = 512;
+function literal(value) {
+	let result = literalByObject.get(value);
+	if (result) return result;
+	const key = JSON.stringify(value);
+	result = literalByContent.get(key);
+	if (!result) {
+		if (literalByContent.size >= LITERAL_LIMIT) literalByContent.clear();
+		literalByContent.set(key, result = fragment(declarations(value)));
+	}
+	literalByObject.set(value, result);
+	return result;
+}
+/**
+* 合并样式成元素属性 `{ class, style }`，后面的覆盖前面的；假值忽略，可以嵌套成数组，也可以直接写样式对象。
+* 只有静态片段时返回缓存的同一个对象；有动态样式时 class 走缓存，style 是这次的变量值；
+* 有响应式绑定（bind、select）时再带一个 ref：元素挂上后由 effect 改变量、换类（见 watchBindings）
+*/
+function attrs$1(...styles) {
+	const parts = [];
+	let inline;
+	let bindings;
+	const addInline = (values) => {
+		for (const _ in values) {
+			inline = Object.assign(inline ?? {}, values);
+			return;
+		}
+	};
+	const collect = (value) => {
+		if (!value || typeof value !== "object") return;
+		if (BINDING in value) {
+			const binding = value;
+			let args = [];
+			const { part, inline: values } = untrack(() => binding.style[EVALUATE](args = binding.args()));
+			(bindings ??= []).push({
+				binding,
+				index: parts.length,
+				args,
+				inline: values
+			});
+			parts.push(part);
+			addInline(values);
+			return;
+		}
+		if (Array.isArray(value)) {
+			if (DYNAMIC in value) {
+				parts.push(value[0]);
+				addInline(value[1]);
+			} else value.forEach(collect);
+			return;
+		}
+		parts.push(FRAGMENT in value || CLASS in value ? value : literal(value));
+	};
+	styles.forEach(collect);
+	const composed = compose(parts);
+	if (!inline && !bindings) return composed;
+	const result = inline ? {
+		...composed,
+		style: inline
+	} : { ...composed };
+	if (bindings) result.ref = watchBindings(bindings, parts, composed.class ?? "");
+	return result;
+}
+/** css.keyframes：返回动画名，规则第一次调用时插入 */
+function keyframes$1(frames) {
+	const body = Object.entries(frames).map(([step, declarations]) => `${step}{${Object.entries(declarations).filter(([, value]) => value !== null && value !== void 0).map(([property, value]) => `${dashify(property)}:${cssValue(property, value)}`).join(";")}}`).join("");
+	const name = `x${hash(body)}-B`;
+	if (!isInserted(name)) insert(name, [`@keyframes ${name}{${body}}`]);
+	return name;
+}
+//#endregion
+//#region src/styles/recipe.ts
+/** 定义配方（见文件开头） */
+function recipe(config) {
+	let state = build(config);
+	let cache = { results: /* @__PURE__ */ new Map() };
+	const resolve = (selection = {}, ...extensions) => {
+		let node = cache;
+		const added = [];
+		for (const extension of extensions) {
+			if (!extension) continue;
+			node.next ??= /* @__PURE__ */ new WeakMap();
+			let child = node.next.get(extension);
+			if (!child) node.next.set(extension, child = { results: /* @__PURE__ */ new Map() });
+			node = child;
+			added.push(extensionState(extension));
+		}
+		const names = added.length ? [.../* @__PURE__ */ new Set([...state.names, ...added.flatMap((extension) => extension.names)])] : state.names;
+		const picked = names.map((name) => {
+			const value = selection[name] ?? state.defaults[name];
+			return value === void 0 || value === null ? void 0 : String(value);
+		});
+		const key = picked.join("\0");
+		const hit = node.results.get(key);
+		if (hit) return hit;
+		const result = Object.fromEntries(state.parts.map((part) => [part, []]));
+		const push = (styles) => {
+			if (!styles) return;
+			for (const part of state.parts) if (part in styles) result[part].push(styles[part]);
+		};
+		const pushVariants = (segments) => names.forEach((name, index) => {
+			const value = picked[index];
+			if (value !== void 0) push(segments.get(`variant\0${name}\0${value}`));
+		});
+		push(state.segments.get("base"));
+		pushVariants(state.segments);
+		state.compound.forEach(({ when }, index) => {
+			if (Object.entries(when).every(([name, value]) => picked[names.indexOf(name)] === String(value))) push(state.segments.get(`compound\0${index}`));
+		});
+		for (const extension of added) {
+			push(extension.segments.get("base"));
+			pushVariants(extension.segments);
+		}
+		node.results.set(key, result);
+		return result;
+	};
+	Object.defineProperty(resolve, "parts", { get: () => state.parts });
+	Object.defineProperty(resolve, "name", {
+		value: config.name,
+		configurable: true
+	});
+	Object.defineProperty(resolve, HOT, { value: (next) => {
+		const incoming = next[STATE];
+		for (const [path, styles] of incoming.segments) {
+			const previous = state.segments.get(path);
+			if (!previous) continue;
+			hotUpdate(previous, styles);
+			incoming.segments.set(path, previous);
+		}
+		state = incoming;
+		cache = { results: /* @__PURE__ */ new Map() };
+	} });
+	Object.defineProperty(resolve, STATE, { get: () => state });
+	return resolve;
+}
+const STATE = Symbol("recipe state");
+const compile = (styles) => create$1(styles);
+/** 档位的每个取值各 create 一次（惰性：第一次用到时才展开） */
+function variantSegments(variants, segments) {
+	for (const [name, values] of Object.entries(variants)) for (const [value, styles] of Object.entries(values)) segments.set(`variant\0${name}\0${value}`, compile(styles));
+}
+/** 每段样式各 create 一次，之后按档位组合查表 */
+function build(config) {
+	const { parts, base = {}, variants = {}, compound = [], defaults = {} } = config;
+	const segments = /* @__PURE__ */ new Map([["base", compile(base)]]);
+	variantSegments(variants, segments);
+	compound.forEach((entry, index) => {
+		const { when, ...styles } = entry;
+		segments.set(`compound\0${index}`, compile(styles));
+	});
+	return {
+		parts,
+		names: Object.keys(variants),
+		defaults,
+		segments,
+		compound: compound.map(({ when }) => ({ when }))
+	};
+}
+const extensions = /* @__PURE__ */ new WeakMap();
+/** 扩展按对象展开一次 */
+function extensionState(extension) {
+	let result = extensions.get(extension);
+	if (!result) {
+		const segments = /* @__PURE__ */ new Map();
+		if (extension.base) segments.set("base", compile(extension.base));
+		variantSegments(extension.variants ?? {}, segments);
+		result = {
+			names: Object.keys(extension.variants ?? {}),
+			segments
+		};
+		extensions.set(extension, result);
+	}
+	return result;
+}
+//#endregion
+//#region src/styles/index.ts
+/**
+* 样式入口：运行时样式引擎（runtime.ts）加上中文注释的类型。
+*
+*   import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+*
+* create 的参数只让样式组名参与推导，组内属性的上下文类型固定为带注释的 DocumentedStyles，
+* 悬停、补全、跳转都能看到说明（整个参数做泛型推导时，TypeScript 悬停只显示推导出的字面量）。
+*/
+/** 定义样式（见 {@link Create}）：产出片段，attrs 合成一个类时才插入规则（runtime.ts） */
+const create = create$1;
+/**
+* 把多个样式合并成元素属性 `{ class, style }`，后面的覆盖前面的；
+* 假值（false、null、undefined）会被忽略，便于按条件组合。Vue 的 JSX 用它：
+* `<div {...css.attrs(styles.base, active && styles.active, sx)} />`
+*/
+const attrs = attrs$1;
+/**
+* 声明一组 CSS 变量（主题 tokens、组件之间约定的变量）：`defineVars('vtp-colors', { accent: '#3e63dd' })`
+* 在 :root 上声明 `--vtp-colors-accent`，返回 `{ accent: 'var(--vtp-colors-accent)' }`。
+* 名字决定变量名，带上自己的前缀免得和宿主页面的变量重名；值可以按条件取
+*/
+const defineVars = defineVars$1;
+/**
+* 登记主题 tokens，样式里才能写短写 `'_md'` 与 `'_space.md'`：组名 → defineVars 的结果，返回原对象。
+* 组名按 token-map.ts 的约定（space、colors、fontSizes…）；主题库调用一次，使用方一般不用
+*/
+const defineTokens = defineTokens$1;
+/** 基于 defineVars 定义的变量创建一套主题，作为样式应用在容器上即可覆盖内部的变量值。 */
+const createTheme = createTheme$1;
+/** 定义标记：`defineMarker('vtp-heading')`，挂到元素上（放进 attrs），子元素用 when.* 按它的状态取样式 */
+const defineMarker = defineMarker$1;
+/** 定义关键帧动画，返回动画名，作为 animationName 的值使用。 */
+const keyframes = keyframes$1;
+/** 按祖先、后代、兄弟（用 defineMarker 标记）的状态取样式：`[css.when.ancestor(':hover', marker)]: …` */
+const when = when$1;
+/**
+* 动态样式的响应式绑定：参数变化时只改元素上的变量，不重新渲染组件。
+* JSX 里写 `styles.bar(item.width)` 时编译器自动改写成 `css.bind(styles.bar, () => [item.width])`，
+* 一般不用手写；类型与直接调用动态样式的结果相同，能放进 attrs 与 sx
+*/
+const bind = bind$1;
+/**
+* 按状态选样式的响应式绑定：状态变化时由元素上的 effect 就地换类，不重新渲染组件。
+* JSX 里写 `item.hot && styles.hot`、`active ? styles.on : styles.off`、`sizeStyles[size]`（本文件顶层 create 的样式）
+* 且读到的状态在渲染里没有别处用到时，编译器自动改写成 `css.select(() => item.hot && styles.hot)`，一般不用手写
+*/
+const select = select$1;
+//#endregion
+export { attrs, bind, CONDITIONS as conditions, create, createTheme, defineMarker, defineTokens, defineVars, hotStyles, keyframes, recipe, select, styleText, when };