@astryx-vue/lab 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,4016 @@
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onScopeDispose, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/circular-progress.css";
+import { AlertDialog, BottomSheet, Button, CheckboxIndicator, ComplexSelector, EmptyState, Field, FieldStatus, Icon, IconButton, Item, List, Text, TextInput, Token, Tooltip, VisuallyHidden, useAnnounce, useTranslator } from "@astryx-vue/core";
+import "../styles/info-tip.css";
+import "../styles/list-input.css";
+import "../styles/log-stream.css";
+import "../styles/mobile-tokenizer.css";
+import "../styles/stat.css";
+import "../styles/svg-icon.css";
+import "../styles/transfer-list.css";
+import "../styles/transfer-list-selector.css";
+//#region src/CircularProgress/types.ts
+/** Ring geometry per size: outer diameter and stroke width in px. */
+const SIZE_CONFIG = {
+	sm: {
+		diameter: 32,
+		strokeWidth: 3
+	},
+	md: {
+		diameter: 48,
+		strokeWidth: 4
+	},
+	lg: {
+		diameter: 64,
+		strokeWidth: 5
+	}
+};
+/** Default center label: the rounded percentage of the filled range. */
+function defaultFormatValueLabel(value, max) {
+	return `${max > 0 ? Math.round(value / max * 100) : 0}%`;
+}
+//#endregion
+//#region src/CircularProgress/CircularProgress.vue
+const _hoisted_1$11 = ["data-size", "data-variant"];
+const _hoisted_2$10 = { class: "astryx-circular-progress__ring" };
+const _hoisted_3$9 = [
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuetext",
+	"width",
+	"height",
+	"viewBox"
+];
+const _hoisted_4$8 = [
+	"data-variant",
+	"cx",
+	"cy",
+	"r",
+	"stroke-width"
+];
+const _hoisted_5$7 = [
+	"data-variant",
+	"cx",
+	"cy",
+	"r",
+	"stroke-width"
+];
+const _hoisted_6$6 = [
+	"data-variant",
+	"cx",
+	"cy",
+	"r",
+	"stroke-width",
+	"stroke-dasharray",
+	"stroke-dashoffset"
+];
+const _hoisted_7$4 = {
+	key: 0,
+	class: "astryx-circular-progress__center"
+};
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxCircularProgress",
+	inheritAttrs: false,
+	__name: "CircularProgress",
+	props: {
+		value: { default: 0 },
+		max: { default: 100 },
+		label: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: true
+		},
+		hasValueLabel: {
+			type: Boolean,
+			default: false
+		},
+		formatValueLabel: {
+			type: Function,
+			default: defaultFormatValueLabel
+		},
+		size: { default: "md" },
+		variant: { default: "accent" },
+		isIndeterminate: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const labelId = `astryx-circular-progress-${useId()}`;
+		const geometry = computed(() => {
+			const { diameter, strokeWidth } = SIZE_CONFIG[props.size];
+			const radius = (diameter - strokeWidth) / 2;
+			return {
+				diameter,
+				strokeWidth,
+				radius,
+				circumference: 2 * Math.PI * radius,
+				center: diameter / 2
+			};
+		});
+		const safeValue = computed(() => Number.isFinite(props.value) ? props.value : 0);
+		const safeMax = computed(() => Number.isFinite(props.max) ? props.max : 0);
+		const clampedValue = computed(() => Math.min(Math.max(0, safeValue.value), safeMax.value));
+		const percentage = computed(() => safeMax.value > 0 ? clampedValue.value / safeMax.value : 0);
+		const dashoffset = computed(() => geometry.value.circumference * (1 - percentage.value));
+		const valueText = computed(() => props.formatValueLabel(clampedValue.value, safeMax.value));
+		const showLabel = computed(() => !props.isLabelHidden);
+		const showValueLabel = computed(() => props.hasValueLabel && !props.isIndeterminate);
+		const hasCenterContent = computed(() => showValueLabel.value);
+		const fillVariant = computed(() => props.isDisabled ? "disabled" : props.variant);
+		const trackVariant = computed(() => props.isDisabled ? "neutral" : props.variant);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(unref(attrs), {
+				class: ["astryx-circular-progress", [_ctx.$attrs.class, { "astryx-circular-progress--labelled": showLabel.value }]],
+				"data-size": __props.size,
+				"data-variant": __props.variant
+			}), [createElementVNode("span", {
+				id: labelId,
+				class: normalizeClass(["astryx-circular-progress__label", {
+					"astryx-circular-progress__visually-hidden": !showLabel.value,
+					"astryx-circular-progress__label--disabled": showLabel.value && __props.isDisabled
+				}])
+			}, toDisplayString(__props.label), 3), createElementVNode("div", _hoisted_2$10, [(openBlock(), createElementBlock("svg", {
+				class: normalizeClass(["astryx-circular-progress__svg", { "astryx-circular-progress__svg--indeterminate": __props.isIndeterminate }]),
+				role: "progressbar",
+				"aria-labelledby": labelId,
+				"aria-valuenow": __props.isIndeterminate ? void 0 : clampedValue.value,
+				"aria-valuemin": __props.isIndeterminate ? void 0 : 0,
+				"aria-valuemax": __props.isIndeterminate ? void 0 : safeMax.value,
+				"aria-valuetext": __props.isIndeterminate ? void 0 : valueText.value,
+				width: geometry.value.diameter,
+				height: geometry.value.diameter,
+				viewBox: `0 0 ${geometry.value.diameter} ${geometry.value.diameter}`
+			}, [createElementVNode("circle", {
+				class: "astryx-circular-progress__track",
+				"data-variant": trackVariant.value,
+				cx: geometry.value.center,
+				cy: geometry.value.center,
+				r: geometry.value.radius,
+				"stroke-width": geometry.value.strokeWidth
+			}, null, 8, _hoisted_4$8), __props.isIndeterminate ? (openBlock(), createElementBlock("circle", {
+				key: 0,
+				class: "astryx-circular-progress__fill astryx-circular-progress__fill--indeterminate",
+				"data-variant": fillVariant.value,
+				cx: geometry.value.center,
+				cy: geometry.value.center,
+				r: geometry.value.radius,
+				"stroke-width": geometry.value.strokeWidth
+			}, null, 8, _hoisted_5$7)) : (openBlock(), createElementBlock("circle", {
+				key: 1,
+				class: "astryx-circular-progress__fill",
+				"data-variant": fillVariant.value,
+				cx: geometry.value.center,
+				cy: geometry.value.center,
+				r: geometry.value.radius,
+				"stroke-width": geometry.value.strokeWidth,
+				"stroke-dasharray": geometry.value.circumference,
+				"stroke-dashoffset": dashoffset.value
+			}, null, 8, _hoisted_6$6))], 10, _hoisted_3$9)), _ctx.$slots.default || hasCenterContent.value ? (openBlock(), createElementBlock("div", _hoisted_7$4, [renderSlot(_ctx.$slots, "default", {}, () => [hasCenterContent.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(["astryx-circular-progress__value", { "astryx-circular-progress__value--disabled": __props.isDisabled }])
+			}, toDisplayString(valueText.value), 3)) : createCommentVNode("v-if", true)])])) : createCommentVNode("v-if", true)])], 16, _hoisted_1$11);
+		};
+	}
+});
+//#endregion
+//#region src/InfoTip/InfoTip.vue
+const _hoisted_1$10 = ["aria-label"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxInfoTip",
+	__name: "InfoTip",
+	props: {
+		content: { default: void 0 },
+		label: { default: "More information" },
+		size: { default: "sm" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode("\n    触发器是个真按钮，Tooltip 的 `auto` 触摸规则会把点击让给控件、不弹气泡。\n    这里的按钮唯一目的就是弹气泡，所以用 `tap` 让点击总能打开，\n    否则手机上的用户永远看不到说明。\n  "), createVNode(unref(Tooltip), {
+				content: __props.content,
+				"touch-trigger": "tap"
+			}, createSlots({
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: "astryx-info-tip",
+					"aria-label": __props.label
+				}, [createVNode(unref(Icon), {
+					icon: "info",
+					size: __props.size
+				}, null, 8, ["size"])], 8, _hoisted_1$10)]),
+				_: 2
+			}, [_ctx.$slots.content ? {
+				name: "content",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
+				key: "0"
+			} : void 0]), 1032, ["content"])], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/ListInput/columns.ts
+/** 比例列没有指定最小宽度时的兜底值。 */
+const DEFAULT_MIN_COLUMN_WIDTH_PX = 140;
+/** 把列宽配置翻成一条 CSS grid 轨道。 */
+function resolveColumnTrack(width) {
+	if (width?.type === "pixel") return `${width.value}px`;
+	const proportion = width?.value ?? 1;
+	return `minmax(${width?.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH_PX}px, ${proportion}fr)`;
+}
+/** 所有列拼成 `grid-template-columns`。 */
+function resolveGridTemplate(columns) {
+	return columns.map((column) => resolveColumnTrack(column.width)).join(" ");
+}
+/** 把 `fromIndex` 那一项挪到 `toIndex`，返回新数组。 */
+function moveItem$1(value, fromIndex, toIndex) {
+	if (fromIndex === toIndex) return [...value];
+	const nextValue = [...value];
+	const [item] = nextValue.splice(fromIndex, 1);
+	nextValue.splice(toIndex, 0, item);
+	return nextValue;
+}
+//#endregion
+//#region src/TransferList/icons.ts
+/**
+* 加号。语义图标表里没有 `add`，所以自己画一个，
+* 仍然交给 core `Icon` 渲染，尺寸和颜色走同一条管线。
+*/
+const PlusIcon = () => h("svg", {
+	"viewBox": "0 0 24 24",
+	"fill": "none",
+	"stroke": "currentColor",
+	"stroke-width": "1.5",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, [h("path", { d: "M5 12h14" }), h("path", { d: "M12 5v14" })]);
+/** 拖动手柄。语义图标表里没有 `grip`，同样自己画。 */
+const GripVerticalIcon = () => h("svg", {
+	"viewBox": "0 0 24 24",
+	"fill": "none",
+	"stroke": "currentColor",
+	"stroke-width": "1.5",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+}, [
+	5,
+	12,
+	19
+].flatMap((cy) => [9, 15].map((cx) => h("circle", {
+	cx,
+	cy,
+	r: 1
+}))));
+//#endregion
+//#region src/ListInput/ListInputCell.ts
+/**
+* 把调用方给的 `renderInput` 函数当组件渲染。
+*
+* 渲染函数必须在渲染阶段调用，所以这里包一层：单元格的壳子留在模板里，
+* 壳子里只剩这一层转发。
+*/
+var ListInputCell_default = defineComponent({
+	name: "AstryxListInputCell",
+	props: {
+		render: {
+			type: Function,
+			required: true
+		},
+		context: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => props.render(props.context);
+	}
+});
+//#endregion
+//#region src/ListInput/ListInputRow.vue
+const _hoisted_1$9 = [
+	"data-list-input-motion-key",
+	"data-list-input-drop-target",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-posinset",
+	"aria-setsize"
+];
+const _hoisted_2$9 = ["data-list-input-reorder-source", "data-list-input-row"];
+const _hoisted_3$8 = ["data-list-input-cell"];
+const _hoisted_4$7 = ["data-list-input-column-label", "data-list-input-repeated"];
+const _hoisted_5$6 = { class: "astryx-list-input__cell-content" };
+const _hoisted_6$5 = { class: "astryx-list-input__control-cell" };
+const _hoisted_7$3 = {
+	key: 0,
+	class: "astryx-list-input__control-cell astryx-list-input__control-cell--reorder"
+};
+const _sfc_main$11 = /*@__PURE__*/ defineComponent({
+	name: "AstryxListInputRow",
+	__name: "ListInputRow",
+	props: {
+		item: {},
+		index: {},
+		total: {},
+		columns: {},
+		gridTemplate: {},
+		itemKey: {},
+		itemName: {},
+		isDisabled: { type: Boolean },
+		isLoading: { type: Boolean },
+		isReorderable: { type: Boolean },
+		isReorderSource: { type: Boolean },
+		isPointerSource: { type: Boolean },
+		isKeyboardActive: { type: Boolean },
+		dropPosition: {},
+		fieldStatus: { type: Function },
+		itemStatus: {},
+		itemStatusId: {},
+		reorderInstructionsId: {},
+		labels: {},
+		handlers: {}
+	},
+	setup(__props) {
+		const props = __props;
+		/** 每条记录的单元格上下文。行堆叠时列名要带上这是第几条。 */
+		function cellContext(column, columnIndex) {
+			const label = props.index === 0 ? column.header : props.labels.fieldLabel(column.header, props.index + 1, props.total);
+			return {
+				item: props.item,
+				index: props.index,
+				label,
+				isLabelHidden: true,
+				status: props.fieldStatus?.(column.key),
+				statusVariant: "tooltip",
+				isDisabled: props.isDisabled || props.isLoading,
+				isLoading: props.isLoading,
+				updateItem: (nextItem, columnKey) => props.handlers.updateItem(props.item, props.index, nextItem, columnKey ?? props.columns[columnIndex]?.key)
+			};
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", {
+				"data-list-input-motion-key": `item:${__props.itemKey}`,
+				"data-list-input-drop-target": __props.dropPosition ?? void 0,
+				"aria-describedby": __props.itemStatusId,
+				"aria-invalid": __props.itemStatus?.type === "error" || void 0,
+				"aria-posinset": __props.index + 1,
+				"aria-setsize": __props.total,
+				class: "astryx-list-input__item"
+			}, [createElementVNode("div", {
+				"data-list-input-reorder-source": __props.isReorderSource || void 0,
+				"data-list-input-row": __props.itemKey,
+				class: normalizeClass(["astryx-list-input__row", { "astryx-list-input__row--dragging": __props.isPointerSource }])
+			}, [
+				createElementVNode("div", {
+					class: "astryx-list-input__fields",
+					style: normalizeStyle({ gridTemplateColumns: __props.gridTemplate })
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, columnIndex) => {
+					return openBlock(), createElementBlock("div", {
+						key: column.key,
+						class: "astryx-list-input__cell",
+						"data-list-input-cell": String(columnIndex)
+					}, [createElementVNode("span", {
+						class: "astryx-list-input__column-label",
+						"aria-hidden": "true",
+						"data-list-input-column-label": __props.index === 0 ? "primary" : "responsive",
+						"data-list-input-repeated": __props.index === 0 ? void 0 : ""
+					}, toDisplayString(column.header), 9, _hoisted_4$7), createElementVNode("div", _hoisted_5$6, [createVNode(unref(ListInputCell_default), {
+						render: column.renderInput,
+						context: cellContext(column, columnIndex)
+					}, null, 8, ["render", "context"])])], 8, _hoisted_3$8);
+				}), 128))], 4),
+				createElementVNode("div", _hoisted_6$5, [createVNode(unref(IconButton), {
+					label: __props.labels.remove(__props.index + 1),
+					tooltip: __props.isDisabled || __props.isLoading ? __props.labels.removeUnavailable() : __props.labels.remove(__props.index + 1),
+					size: "md",
+					variant: "ghost",
+					"is-disabled": __props.isDisabled || __props.isLoading,
+					"data-list-input-remove": "",
+					onClick: _cache[0] || (_cache[0] = ($event) => __props.handlers.remove(__props.item))
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "close",
+						size: "sm"
+					})]),
+					_: 1
+				}, 8, [
+					"label",
+					"tooltip",
+					"is-disabled"
+				])]),
+				__props.isReorderable ? (openBlock(), createElementBlock("div", _hoisted_7$3, [createVNode(unref(IconButton), {
+					class: "astryx-list-input__reorder-handle",
+					label: __props.labels.reorder(__props.index + 1),
+					"aria-describedby": __props.reorderInstructionsId,
+					"aria-pressed": __props.isKeyboardActive || void 0,
+					size: "md",
+					variant: "ghost",
+					"is-disabled": __props.isDisabled || __props.isLoading,
+					"data-list-input-reorder": "",
+					onKeydown: _cache[1] || (_cache[1] = ($event) => __props.handlers.keydown($event, __props.item, __props.index)),
+					onBlur: _cache[2] || (_cache[2] = ($event) => __props.handlers.blur(__props.item)),
+					onPointerdown: _cache[3] || (_cache[3] = ($event) => __props.handlers.pointerdown($event, __props.item, __props.index)),
+					onPointermove: _cache[4] || (_cache[4] = ($event) => __props.handlers.pointermove($event)),
+					onPointerup: _cache[5] || (_cache[5] = ($event) => __props.handlers.pointerup($event)),
+					onPointercancel: _cache[6] || (_cache[6] = ($event) => __props.handlers.pointercancel($event)),
+					onLostpointercapture: _cache[7] || (_cache[7] = ($event) => __props.handlers.lostpointercapture($event))
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: unref(GripVerticalIcon),
+						size: "sm"
+					}, null, 8, ["icon"])]),
+					_: 1
+				}, 8, [
+					"label",
+					"aria-describedby",
+					"aria-pressed",
+					"is-disabled"
+				])])) : createCommentVNode("v-if", true),
+				__props.itemStatus?.message ? (openBlock(), createBlock(unref(FieldStatus), {
+					key: 1,
+					id: __props.itemStatusId,
+					type: __props.itemStatus.type,
+					message: __props.itemStatus.message,
+					variant: "detached",
+					"data-list-input-item-status": "",
+					class: "astryx-list-input__item-status"
+				}, null, 8, [
+					"id",
+					"type",
+					"message"
+				])) : createCommentVNode("v-if", true)
+			], 10, _hoisted_2$9)], 8, _hoisted_1$9);
+		};
+	}
+});
+//#endregion
+//#region src/ListInput/useListReorder.ts
+/** 指针要移动这么远才算真的在拖。 */
+const POINTER_DRAG_THRESHOLD_PX$1 = 5;
+/**
+* 记录列表的重排状态机。
+*
+* 两种起点、两种提交时机，和上游一致：
+* - 手柄没拿起时按上下方向键：立刻挪一位，马上提交，读屏能听到新位置。
+* - 空格或回车先拿起，之后方向键只改预览，再按空格或回车才提交，Escape 放弃。
+* - 指针拖动过程中不动数据，松手才提交一次。
+*/
+function useListReorder(options) {
+	const state = ref(null);
+	function setState(next) {
+		state.value = next;
+	}
+	const displayValue = computed(() => {
+		const current = state.value;
+		if (current == null || current.mode === "pointer") return options.currentValue();
+		return current.fromIndex === current.toIndex ? current.originalValue : moveItem$1(current.originalValue, current.fromIndex, current.toIndex);
+	});
+	const sourceKey = computed(() => state.value?.mode === "pointer" ? state.value.itemKey : null);
+	const keyboardKey = computed(() => state.value?.mode === "keyboard" ? state.value.itemKey : null);
+	const pointerDrop = computed(() => {
+		const current = state.value;
+		if (current?.mode !== "pointer" || !current.hasPointerMoved || current.toIndex === current.fromIndex) return null;
+		const remaining = current.originalValue.filter((_, index) => index !== current.fromIndex);
+		const before = remaining[current.toIndex];
+		if (before != null) return {
+			itemKey: String(options.getItemKey(before)),
+			position: "before"
+		};
+		const after = remaining.at(-1);
+		return after == null ? null : {
+			itemKey: String(options.getItemKey(after)),
+			position: "after"
+		};
+	});
+	const previewStyle = computed(() => {
+		const current = state.value;
+		if (current?.mode !== "pointer" || current.pointerClientX == null || current.pointerClientY == null || current.pointerOffsetX == null || current.pointerOffsetY == null || current.previewWidth == null) return null;
+		return {
+			top: `${current.pointerClientY - current.pointerOffsetY}px`,
+			left: `${current.pointerClientX - current.pointerOffsetX}px`,
+			width: `${current.previewWidth}px`
+		};
+	});
+	function startReorder(item, index, mode, geometry) {
+		if (options.isBlocked() || !options.isReorderable()) return;
+		setState({
+			itemKey: String(options.getItemKey(item)),
+			fromIndex: index,
+			toIndex: index,
+			originalValue: [...options.currentValue()],
+			mode,
+			...geometry,
+			hasPointerMoved: false
+		});
+		options.announce(options.messages.grabbed(index + 1));
+	}
+	function previewReorder(toIndex) {
+		const current = state.value;
+		if (current == null) return;
+		const bounded = Math.max(0, Math.min(toIndex, current.originalValue.length - 1));
+		if (bounded === current.toIndex) return;
+		setState({
+			...current,
+			toIndex: bounded
+		});
+		options.announce(options.messages.movedToPosition(bounded + 1, current.originalValue.length));
+	}
+	function cancelReorder() {
+		if (state.value == null) return;
+		setState(null);
+		options.announce(options.messages.reorderCancelled());
+	}
+	function commitReorder() {
+		const current = state.value;
+		if (current == null) return;
+		if (current.mode === "pointer" && !current.hasPointerMoved) {
+			setState(null);
+			return;
+		}
+		const nextValue = moveItem$1(current.originalValue, current.fromIndex, current.toIndex);
+		const item = current.originalValue[current.fromIndex];
+		const hasChanged = current.fromIndex !== current.toIndex;
+		setState(null);
+		if (!hasChanged) {
+			options.announce(options.messages.returnedToPosition(current.fromIndex + 1));
+			return;
+		}
+		options.emitReorder(nextValue, {
+			type: "reorder",
+			item,
+			fromIndex: current.fromIndex,
+			toIndex: current.toIndex
+		});
+		options.announce(options.messages.dropped(current.toIndex + 1, current.originalValue.length));
+	}
+	function moveWithArrowKey(item, fromIndex, offset) {
+		const value = options.currentValue();
+		const toIndex = Math.max(0, Math.min(fromIndex + offset, value.length - 1));
+		if (toIndex === fromIndex) {
+			options.announce(options.messages.alreadyAtBoundary(offset < 0 ? "first" : "last"));
+			return;
+		}
+		const nextValue = moveItem$1(value, fromIndex, toIndex);
+		options.emitReorder(nextValue, {
+			type: "reorder",
+			item,
+			fromIndex,
+			toIndex
+		});
+		options.announce(options.messages.movedToPosition(toIndex + 1, value.length));
+	}
+	function onHandleKeydown(event, item, index) {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		const current = state.value;
+		const isActivationKey = event.key === " " || event.key === "Enter";
+		if (current == null) {
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				moveWithArrowKey(item, index, -1);
+				return;
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				moveWithArrowKey(item, index, 1);
+				return;
+			}
+			if (isActivationKey) {
+				event.preventDefault();
+				startReorder(item, index, "keyboard");
+			}
+			return;
+		}
+		if (current.itemKey !== String(options.getItemKey(item))) return;
+		if (isActivationKey) {
+			event.preventDefault();
+			commitReorder();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			cancelReorder();
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			previewReorder(current.toIndex - 1);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			previewReorder(current.toIndex + 1);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			previewReorder(0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			previewReorder(current.originalValue.length - 1);
+		}
+	}
+	function onHandlePointerDown(event, item, index) {
+		if (event.button !== 0 || options.isBlocked()) return;
+		const itemKey = String(options.getItemKey(item));
+		const sourceRow = options.rowElement(itemKey);
+		if (sourceRow == null) return;
+		const bounds = sourceRow.getBoundingClientRect();
+		event.currentTarget?.setPointerCapture?.(event.pointerId);
+		startReorder(item, index, "pointer", {
+			pointerId: event.pointerId,
+			pointerStartX: event.clientX,
+			pointerStartY: event.clientY,
+			pointerOffsetX: event.clientX - bounds.left,
+			pointerOffsetY: event.clientY - bounds.top,
+			pointerClientX: event.clientX,
+			pointerClientY: event.clientY,
+			previewWidth: bounds.width
+		});
+	}
+	function onHandlePointerMove(event) {
+		const current = state.value;
+		if (current?.mode !== "pointer" || current.pointerId !== event.pointerId) return;
+		const horizontalDistance = event.clientX - (current.pointerStartX ?? event.clientX);
+		const verticalDistance = event.clientY - (current.pointerStartY ?? event.clientY);
+		const hasCrossedThreshold = current.hasPointerMoved === true || Math.hypot(horizontalDistance, verticalDistance) >= POINTER_DRAG_THRESHOLD_PX$1;
+		const remaining = current.originalValue.filter((_, index) => index !== current.fromIndex);
+		let targetIndex = current.fromIndex;
+		if (hasCrossedThreshold) {
+			event.preventDefault();
+			targetIndex = remaining.length;
+			for (let index = 0; index < remaining.length; index += 1) {
+				const row = options.rowElement(String(options.getItemKey(remaining[index])));
+				if (row == null) continue;
+				const bounds = row.getBoundingClientRect();
+				if (event.clientY < bounds.top + bounds.height / 2) {
+					targetIndex = index;
+					break;
+				}
+			}
+		}
+		const nextState = {
+			...current,
+			pointerClientX: event.clientX,
+			pointerClientY: event.clientY,
+			hasPointerMoved: hasCrossedThreshold,
+			toIndex: targetIndex
+		};
+		if (current.pointerClientX === nextState.pointerClientX && current.pointerClientY === nextState.pointerClientY && current.hasPointerMoved === nextState.hasPointerMoved && current.toIndex === nextState.toIndex) return;
+		setState(nextState);
+		if (hasCrossedThreshold && current.toIndex !== targetIndex) options.announce(options.messages.movedToPosition(targetIndex + 1, current.originalValue.length));
+	}
+	function onHandlePointerUp(event) {
+		const current = state.value;
+		if (current?.mode !== "pointer" || current.pointerId !== event.pointerId) return;
+		commitReorder();
+		const target = event.currentTarget;
+		if (target?.hasPointerCapture?.(event.pointerId)) target.releasePointerCapture?.(event.pointerId);
+	}
+	function onHandlePointerCancel(event) {
+		const current = state.value;
+		if (current?.mode !== "pointer" || current.pointerId !== event.pointerId) return;
+		cancelReorder();
+		const target = event.currentTarget;
+		if (target?.hasPointerCapture?.(event.pointerId)) target.releasePointerCapture?.(event.pointerId);
+	}
+	function onHandleLostPointerCapture(event) {
+		const current = state.value;
+		if (current?.mode === "pointer" && current.pointerId === event.pointerId) cancelReorder();
+	}
+	/** 键盘拿起时焦点跑掉就放弃，避免留下一个看不见的预览顺序。 */
+	function onHandleBlur(item) {
+		const current = state.value;
+		if (current?.mode === "keyboard" && current.itemKey === String(options.getItemKey(item))) cancelReorder();
+	}
+	watch(() => state.value?.mode === "pointer" ? state.value.itemKey : null, async (itemKey) => {
+		if (itemKey == null) {
+			options.previewHost.value?.replaceChildren();
+			return;
+		}
+		await nextTick();
+		const host = options.previewHost.value;
+		if (host == null) return;
+		const sourceRow = options.rowElement(itemKey);
+		if (sourceRow == null) return;
+		const clone = sourceRow.cloneNode(true);
+		host.style.direction = getComputedStyle(sourceRow).direction;
+		clone.style.opacity = "1";
+		clone.removeAttribute("data-list-input-reorder-source");
+		clone.removeAttribute("data-list-input-drop-target");
+		clone.removeAttribute("data-list-input-reorder");
+		clone.removeAttribute("data-list-input-remove");
+		clone.removeAttribute("data-list-input-row");
+		clone.setAttribute("aria-hidden", "true");
+		for (const element of [clone, ...clone.querySelectorAll("*")]) {
+			element.removeAttribute("id");
+			element.removeAttribute("aria-describedby");
+			element.removeAttribute("aria-labelledby");
+			element.removeAttribute("name");
+			element.removeAttribute("data-list-input-reorder-source");
+			element.removeAttribute("data-list-input-drop-target");
+			element.removeAttribute("data-list-input-reorder");
+			element.removeAttribute("data-list-input-remove");
+			element.setAttribute("tabindex", "-1");
+		}
+		host.replaceChildren(clone);
+	});
+	return {
+		state,
+		sourceKey,
+		keyboardKey,
+		pointerDrop,
+		previewStyle,
+		displayValue,
+		startReorder,
+		cancelReorder,
+		commitReorder,
+		moveWithArrowKey,
+		previewReorder,
+		onHandleKeydown,
+		onHandlePointerDown,
+		onHandlePointerMove,
+		onHandlePointerUp,
+		onHandlePointerCancel,
+		onHandleLostPointerCapture,
+		onHandleBlur
+	};
+}
+//#endregion
+//#region src/ListInput/ListInput.vue
+const _hoisted_1$8 = [
+	"aria-describedby",
+	"aria-disabled",
+	"aria-busy",
+	"data-reorderable",
+	"data-state"
+];
+const _hoisted_2$8 = ["aria-describedby"];
+const _hoisted_3$7 = {
+	key: 0,
+	"data-list-input-motion-key": "state:empty",
+	class: "astryx-list-input__empty-item"
+};
+const _hoisted_4$6 = {
+	"data-list-input-motion-key": "action:add",
+	class: "astryx-list-input__action-row"
+};
+const _hoisted_5$5 = {
+	"data-list-input-add-content": "",
+	class: "astryx-list-input__action-content"
+};
+const focusableFieldSelector = "[data-list-input-cell] input, [data-list-input-cell] select, [data-list-input-cell] textarea, [data-list-input-cell] button, [data-list-input-cell] [tabindex]:not([tabindex=\"-1\"])";
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxListInput",
+	inheritAttrs: false,
+	__name: "ListInput",
+	props: {
+		label: {},
+		description: { default: void 0 },
+		modelValue: { default: () => [] },
+		getItemKey: {},
+		createItem: {},
+		columns: {},
+		itemName: { default: "item" },
+		status: { default: void 0 },
+		getItemStatus: {
+			type: Function,
+			default: void 0
+		},
+		getFieldStatus: {
+			type: Function,
+			default: void 0
+		},
+		isReorderable: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		maxItems: { default: void 0 },
+		isLabelHidden: {
+			type: Boolean,
+			default: false
+		},
+		isOptional: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useTranslator();
+		const announce = useAnnounce();
+		const groupId = `list-input-${useId()}`;
+		const labelId = `${groupId}-label`;
+		const descriptionId = computed(() => props.description ? `${groupId}-description` : void 0);
+		const statusId = computed(() => props.status?.message ? `${groupId}-status` : void 0);
+		const reorderInstructionsId = `${groupId}-reorder-instructions`;
+		const groupRef = useTemplateRef("groupRef");
+		const addButtonRef = useTemplateRef("addButtonRef");
+		const previewHost = ref(null);
+		const itemKeyOf = (item) => String(props.getItemKey(item));
+		const mutationsDisabled = computed(() => props.isDisabled || props.isLoading);
+		const hasReachedMax = computed(() => props.maxItems != null && props.modelValue.length >= props.maxItems);
+		const gridTemplate = computed(() => resolveGridTemplate(props.columns));
+		/** 提交之后 props 才会回来，中间的连点读不到最新值，这里留一份同步的顺序。 */
+		const liveValue = ref([...props.modelValue]);
+		watch(() => props.modelValue, (next) => {
+			liveValue.value = [...next];
+		});
+		const announceMessages = {
+			grabbed: (position) => t("@astryx.listInput.announceGrabbed", {
+				itemName: props.itemName,
+				position
+			}),
+			movedToPosition: (position, total) => t("@astryx.listInput.announceMovedToPosition", {
+				itemName: props.itemName,
+				position,
+				total
+			}),
+			reorderCancelled: () => t("@astryx.listInput.announceReorderCancelled"),
+			returnedToPosition: (position) => t("@astryx.listInput.announceReturnedToPosition", {
+				itemName: props.itemName,
+				position
+			}),
+			dropped: (position, total) => t("@astryx.listInput.announceDropped", {
+				itemName: props.itemName,
+				position,
+				total
+			}),
+			alreadyAtBoundary: (boundary) => t("@astryx.listInput.announceAlreadyAtBoundary", {
+				itemName: props.itemName,
+				boundary
+			})
+		};
+		const labels = {
+			remove: (position) => t("@astryx.listInput.removeItem", {
+				itemName: props.itemName,
+				position
+			}),
+			removeUnavailable: () => t("@astryx.listInput.removeUnavailable", { itemName: props.itemName }),
+			reorder: (position) => t("@astryx.listInput.reorderItem", {
+				itemName: props.itemName,
+				position
+			}),
+			fieldLabel: (header, position, total) => t("@astryx.listInput.fieldLabelWithPosition", {
+				header,
+				itemName: props.itemName,
+				position,
+				total
+			})
+		};
+		function emitValue(nextValue, change) {
+			liveValue.value = [...nextValue];
+			emit("update:modelValue", nextValue);
+			emit("change", nextValue, change);
+		}
+		function rowElement(itemKey) {
+			return groupRef.value?.querySelector(`[data-list-input-row="${itemKey}"]`) ?? null;
+		}
+		const reorder = useListReorder({
+			currentValue: () => liveValue.value,
+			getItemKey: (item) => props.getItemKey(item),
+			isReorderable: () => props.isReorderable,
+			isBlocked: () => mutationsDisabled.value,
+			rowElement,
+			previewHost,
+			emitReorder: (nextValue, change) => emitValue(nextValue, change),
+			announce,
+			messages: announceMessages
+		});
+		watch(mutationsDisabled, (blocked) => {
+			if (blocked && reorder.state.value != null) {
+				reorder.state.value = null;
+				announce(announceMessages.reorderCancelled());
+			}
+		});
+		let pendingFocus = null;
+		watch(() => props.modelValue, () => {
+			const pending = pendingFocus;
+			if (pending == null) return;
+			pendingFocus = null;
+			let target = null;
+			if (pending.target === "add") target = addButtonRef.value?.element ?? null;
+			else if (pending.itemKey != null) {
+				const row = rowElement(pending.itemKey);
+				const selector = pending.target === "remove" ? "[data-list-input-remove]" : focusableFieldSelector;
+				target = row?.querySelector(selector) ?? null;
+			}
+			target?.focus();
+		}, { flush: "post" });
+		function handleAdd() {
+			if (mutationsDisabled.value || hasReachedMax.value) return;
+			const item = props.createItem();
+			const nextValue = [...props.modelValue, item];
+			pendingFocus = {
+				itemKey: itemKeyOf(item),
+				target: "first-field"
+			};
+			emitValue(nextValue, {
+				type: "add",
+				item,
+				index: props.modelValue.length
+			});
+			announce(t("@astryx.listInput.announceAdded", {
+				itemName: props.itemName,
+				position: props.modelValue.length + 1
+			}));
+		}
+		function handleUpdate(item, index, nextItem, columnKey) {
+			if (mutationsDisabled.value) return;
+			const nextValue = [...props.modelValue];
+			nextValue[index] = nextItem;
+			emitValue(nextValue, {
+				type: "update",
+				item: nextItem,
+				previousItem: item,
+				index,
+				columnKey
+			});
+		}
+		function handleRemove(item) {
+			if (mutationsDisabled.value) return;
+			const itemKey = itemKeyOf(item);
+			const index = props.modelValue.findIndex((candidate) => itemKeyOf(candidate) === itemKey);
+			if (index < 0) return;
+			const nextValue = props.modelValue.filter((_, itemIndex) => itemIndex !== index);
+			const nextFocusItem = nextValue[Math.min(index, nextValue.length - 1)];
+			pendingFocus = nextFocusItem == null ? { target: "add" } : {
+				itemKey: itemKeyOf(nextFocusItem),
+				target: "remove"
+			};
+			emitValue(nextValue, {
+				type: "remove",
+				item: props.modelValue[index],
+				index
+			});
+			announce(t("@astryx.listInput.announceRemoved", {
+				itemName: props.itemName,
+				position: index + 1
+			}));
+		}
+		const handlers = {
+			updateItem: (item, index, nextItem, columnKey) => handleUpdate(item, index, nextItem, columnKey),
+			remove: (item) => handleRemove(item),
+			keydown: (event, item, index) => reorder.onHandleKeydown(event, item, index),
+			blur: (item) => reorder.onHandleBlur(item),
+			pointerdown: (event, item, index) => reorder.onHandlePointerDown(event, item, index),
+			pointermove: (event) => reorder.onHandlePointerMove(event),
+			pointerup: (event) => reorder.onHandlePointerUp(event),
+			pointercancel: (event) => reorder.onHandlePointerCancel(event),
+			lostpointercapture: (event) => reorder.onHandleLostPointerCapture(event)
+		};
+		const fieldStatusFor = (item, index) => (columnKey) => props.getFieldStatus?.(item, columnKey, index);
+		const describedBy = computed(() => [descriptionId.value, statusId.value].filter(Boolean).join(" ") || void 0);
+		watch([
+			() => props.modelValue,
+			() => props.columns,
+			() => props.getItemKey
+		], () => {
+			const itemKeys = /* @__PURE__ */ new Set();
+			for (const item of props.modelValue) {
+				const key = itemKeyOf(item);
+				if (itemKeys.has(key)) {
+					console.warn(`ListInput: getItemKey returned duplicate key "${key}". Keys must be unique and stable.`);
+					break;
+				}
+				itemKeys.add(key);
+			}
+			const columnKeys = /* @__PURE__ */ new Set();
+			for (const column of props.columns) {
+				if (columnKeys.has(column.key)) {
+					console.warn(`ListInput: columns contains duplicate key "${column.key}". Column keys must be unique.`);
+					break;
+				}
+				columnKeys.add(column.key);
+			}
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				label: __props.label,
+				description: __props.description,
+				"input-id": groupId,
+				"label-id": labelId,
+				"description-id": descriptionId.value,
+				"is-group-label": "",
+				"is-label-hidden": __props.isLabelHidden,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				"is-disabled": __props.isDisabled,
+				status: __props.status == null ? void 0 : {
+					...__props.status,
+					messageId: statusId.value
+				},
+				"status-variant": "detached"
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					id: groupId,
+					ref_key: "groupRef",
+					ref: groupRef,
+					role: "group",
+					"aria-labelledby": labelId,
+					"aria-describedby": describedBy.value,
+					"aria-disabled": __props.isDisabled || void 0,
+					"aria-busy": __props.isLoading || void 0,
+					class: "astryx-list-input",
+					"data-reorderable": __props.isReorderable ? "true" : void 0,
+					"data-state": __props.isLoading ? "loading" : __props.isDisabled ? "disabled" : void 0
+				}, [
+					createElementVNode("ol", {
+						"aria-labelledby": labelId,
+						"aria-describedby": describedBy.value,
+						class: "astryx-list-input__list"
+					}, [unref(reorder).displayValue.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_3$7, [createVNode(unref(EmptyState), {
+						title: unref(t)("@astryx.listInput.emptyTitle", { itemName: __props.itemName }),
+						description: unref(t)("@astryx.listInput.emptyDescription", { itemName: __props.itemName }),
+						"is-compact": ""
+					}, null, 8, ["title", "description"])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(reorder).displayValue.value, (item, index) => {
+						return openBlock(), createBlock(_sfc_main$11, {
+							key: itemKeyOf(item),
+							item,
+							index,
+							total: unref(reorder).displayValue.value.length,
+							columns: __props.columns,
+							"grid-template": gridTemplate.value,
+							"item-key": itemKeyOf(item),
+							"item-name": __props.itemName,
+							"is-disabled": __props.isDisabled,
+							"is-loading": __props.isLoading,
+							"is-reorderable": __props.isReorderable,
+							"is-reorder-source": unref(reorder).state.value?.itemKey === itemKeyOf(item),
+							"is-pointer-source": unref(reorder).sourceKey.value === itemKeyOf(item),
+							"is-keyboard-active": unref(reorder).keyboardKey.value === itemKeyOf(item),
+							"drop-position": unref(reorder).pointerDrop.value?.itemKey === itemKeyOf(item) ? unref(reorder).pointerDrop.value.position : null,
+							"field-status": fieldStatusFor(item, index),
+							"item-status": __props.getItemStatus?.(item, index),
+							"item-status-id": __props.getItemStatus?.(item, index)?.message ? `${groupId}-item-${index}-status` : void 0,
+							"reorder-instructions-id": reorderInstructionsId,
+							labels,
+							handlers
+						}, null, 8, [
+							"item",
+							"index",
+							"total",
+							"columns",
+							"grid-template",
+							"item-key",
+							"item-name",
+							"is-disabled",
+							"is-loading",
+							"is-reorderable",
+							"is-reorder-source",
+							"is-pointer-source",
+							"is-keyboard-active",
+							"drop-position",
+							"field-status",
+							"item-status",
+							"item-status-id",
+							"handlers"
+						]);
+					}), 128))], 8, _hoisted_2$8),
+					createElementVNode("div", _hoisted_4$6, [createElementVNode("div", _hoisted_5$5, [createVNode(unref(Button), {
+						ref_key: "addButtonRef",
+						ref: addButtonRef,
+						label: unref(t)("@astryx.listInput.addItem", { itemName: __props.itemName }),
+						variant: "secondary",
+						size: "md",
+						width: "100%",
+						"is-disabled": __props.isDisabled || hasReachedMax.value,
+						"is-loading": __props.isLoading,
+						onClick: handleAdd
+					}, null, 8, [
+						"label",
+						"is-disabled",
+						"is-loading"
+					])])]),
+					__props.isReorderable ? (openBlock(), createBlock(unref(VisuallyHidden), {
+						key: 0,
+						id: reorderInstructionsId,
+						as: "div"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("@astryx.listInput.reorderInstructions")), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true)
+				], 8, _hoisted_1$8), (openBlock(), createBlock(Teleport, { to: "body" }, [unref(reorder).previewStyle.value != null ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "previewHost",
+					ref: previewHost,
+					class: "astryx-list-input__drag-preview",
+					"data-list-input-drag-preview": "",
+					"aria-hidden": "true",
+					style: normalizeStyle(unref(reorder).previewStyle.value)
+				}, null, 4)) : createCommentVNode("v-if", true)]))]),
+				_: 1
+			}, 8, [
+				"label",
+				"description",
+				"description-id",
+				"is-label-hidden",
+				"is-optional",
+				"is-required",
+				"is-disabled",
+				"status"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/LogStream/LogStreamRow.vue
+const _hoisted_1$7 = ["data-level", "data-cols"];
+const _hoisted_2$7 = {
+	key: 0,
+	class: "astryx-log-stream__time"
+};
+const _hoisted_3$6 = { class: "astryx-log-stream__level" };
+const _hoisted_4$5 = ["title"];
+const _hoisted_5$4 = { class: "astryx-log-stream__message" };
+const _hoisted_6$4 = [
+	"data-level",
+	"data-cols",
+	"aria-expanded"
+];
+const _hoisted_7$2 = {
+	key: 0,
+	class: "astryx-log-stream__time"
+};
+const _hoisted_8$2 = { class: "astryx-log-stream__level" };
+const _hoisted_9$2 = ["title"];
+const _hoisted_10$2 = { class: "astryx-log-stream__message" };
+const _hoisted_11 = {
+	key: 0,
+	class: "astryx-log-stream__detail"
+};
+const _sfc_main$10 = /*@__PURE__*/ defineComponent({
+	name: "AstryxLogStreamRow",
+	__name: "LogStreamRow",
+	props: {
+		entry: {},
+		hasTimestamps: { type: Boolean },
+		hasSource: { type: Boolean },
+		isExpanded: { type: Boolean }
+	},
+	emits: ["toggle"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const isExpandable = computed(() => props.entry.detail != null);
+		const cols = computed(() => {
+			if (props.hasTimestamps) return props.hasSource ? "full" : "no-source";
+			return props.hasSource ? "no-timestamp" : "message-only";
+		});
+		const detailText = computed(() => props.entry.detail);
+		return (_ctx, _cache) => {
+			return !isExpandable.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "astryx-log-stream__row",
+				"data-level": __props.entry.level,
+				"data-cols": cols.value
+			}, [
+				__props.hasTimestamps ? (openBlock(), createElementBlock("span", _hoisted_2$7, toDisplayString(__props.entry.timestamp), 1)) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_3$6, toDisplayString(__props.entry.level), 1),
+				__props.hasSource ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: "astryx-log-stream__source",
+					title: __props.entry.source
+				}, toDisplayString(__props.entry.source), 9, _hoisted_4$5)) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_5$4, toDisplayString(__props.entry.message), 1)
+			], 8, _hoisted_1$7)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+				type: "button",
+				class: "astryx-log-stream__row astryx-log-stream__row--button",
+				"data-level": __props.entry.level,
+				"data-cols": cols.value,
+				"aria-expanded": __props.isExpanded,
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle"))
+			}, [
+				__props.hasTimestamps ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(__props.entry.timestamp), 1)) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_8$2, toDisplayString(__props.entry.level), 1),
+				__props.hasSource ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: "astryx-log-stream__source",
+					title: __props.entry.source
+				}, toDisplayString(__props.entry.source), 9, _hoisted_9$2)) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_10$2, toDisplayString(__props.entry.message), 1)
+			], 8, _hoisted_6$4), __props.isExpanded ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "detail", { entry: __props.entry }, () => [createTextVNode(toDisplayString(detailText.value), 1)])])) : createCommentVNode("v-if", true)], 64));
+		};
+	}
+});
+//#endregion
+//#region src/LogStream/useLogFollow.ts
+/** 离底部多远以内算「还在跟随最新一行」。 */
+const FOLLOW_THRESHOLD_PX = 24;
+/**
+* 日志跟滚：跟随最新一行、用户往回滚就取消跟随、点「跳到最新」再跟上。
+*
+* 跟随状态下直接写 `scrollTop`（不用平滑滚动），这样连续追加的行不会堆起
+* 互相打断的动画。取消跟随只在视口离开底部时发生，程序化滚动落到底部时
+* 不会触发，所以不需要「这是不是我自己滚的」这类保护。
+*/
+function useLogFollow(options) {
+	const scrollerRef = ref(null);
+	const isAtBottom = ref(true);
+	function setFollowing(next) {
+		if (next === options.following.value) return;
+		options.following.value = next;
+		options.onFollowChange(next);
+	}
+	function pinToBottom() {
+		const el = scrollerRef.value;
+		if (el == null) return;
+		el.scrollTop = el.scrollHeight;
+		isAtBottom.value = true;
+	}
+	watch([options.following, options.entryCount], ([isFollowing]) => {
+		if (isFollowing) nextTick(pinToBottom);
+	});
+	function handleScroll() {
+		const el = scrollerRef.value;
+		if (el == null) return;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD_PX;
+		isAtBottom.value = atBottom;
+		if (options.following.value && !atBottom) setFollowing(false);
+	}
+	function jumpToLatest() {
+		setFollowing(true);
+		pinToBottom();
+	}
+	return {
+		scrollerRef,
+		isAtBottom,
+		handleScroll,
+		jumpToLatest
+	};
+}
+//#endregion
+//#region src/LogStream/LogStream.vue
+const _hoisted_1$6 = ["data-variant"];
+const _hoisted_2$6 = ["aria-label", "aria-live"];
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	name: "AstryxLogStream",
+	inheritAttrs: false,
+	__name: "LogStream",
+	props: /*@__PURE__*/ mergeModels({
+		entries: {},
+		variant: { default: "default" },
+		isFollowing: { type: Boolean },
+		maxHeight: { default: void 0 },
+		hasTimestamps: {
+			type: Boolean,
+			default: true
+		},
+		label: { default: "Log stream" }
+	}, {
+		"isFollowing": {
+			type: Boolean,
+			default: false
+		},
+		"isFollowingModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["followChange"], ["update:isFollowing"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const following = useModel(__props, "isFollowing");
+		const hasSource = computed(() => props.entries.some((entry) => entry.source != null));
+		const scrollerStyle = computed(() => props.maxHeight == null ? void 0 : { maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight });
+		const rootAttrs = computed(() => {
+			const { class: _class, style: _style, ...rest } = attrs;
+			return rest;
+		});
+		const rootClass = computed(() => attrs.class);
+		const rootStyle = computed(() => attrs.style);
+		const { scrollerRef, isAtBottom, handleScroll, jumpToLatest } = useLogFollow({
+			following,
+			onFollowChange: (next) => emit("followChange", next),
+			entryCount: () => props.entries.length
+		});
+		function setScroller(el) {
+			scrollerRef.value = el instanceof HTMLElement ? el : null;
+		}
+		const expandedIds = ref(/* @__PURE__ */ new Set());
+		function toggleExpanded(id) {
+			const next = new Set(expandedIds.value);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			expandedIds.value = next;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(rootAttrs.value, {
+				class: ["astryx-log-stream", rootClass.value],
+				"data-variant": __props.variant,
+				style: rootStyle.value
+			}), [
+				createCommentVNode("\n      role=\"log\" 隐含 aria-live=\"polite\"：繁忙的日志流每追加一行都会念给读屏软件，\n      很吵（WCAG 2.2.2 / 4.1.3）。跟随状态顺便当静音开关——用户不在尾部时\n      改成 aria-live=\"off\"，点「跳到最新」恢复念。\n    "),
+				createElementVNode("div", {
+					ref: setScroller,
+					class: "astryx-log-stream__scroller",
+					role: "log",
+					"aria-label": __props.label,
+					"aria-live": following.value ? "polite" : "off",
+					style: normalizeStyle(scrollerStyle.value),
+					onScrollPassive: _cache[0] || (_cache[0] = (...args) => unref(handleScroll) && unref(handleScroll)(...args))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.entries, (entry) => {
+					return renderSlot(_ctx.$slots, "entry", { entry }, () => [createVNode(_sfc_main$10, {
+						entry,
+						"has-timestamps": __props.hasTimestamps,
+						"has-source": hasSource.value,
+						"is-expanded": expandedIds.value.has(entry.id),
+						onToggle: ($event) => toggleExpanded(entry.id)
+					}, createSlots({ _: 2 }, [_ctx.$slots.detail ? {
+						name: "detail",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "detail", mergeProps({ ref_for: true }, slotProps))]),
+						key: "0"
+					} : void 0]), 1032, [
+						"entry",
+						"has-timestamps",
+						"has-source",
+						"is-expanded",
+						"onToggle"
+					])], void 0, entry.id);
+				}), 128))], 44, _hoisted_2$6),
+				!following.value && !unref(isAtBottom) && __props.entries.length > 0 ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "astryx-log-stream__jump",
+					onClick: _cache[1] || (_cache[1] = (...args) => unref(jumpToLatest) && unref(jumpToLatest)(...args))
+				}, " Jump to latest ↓ ")) : createCommentVNode("v-if", true)
+			], 16, _hoisted_1$6);
+		};
+	}
+});
+//#endregion
+//#region src/MobileTokenizer/icons.ts
+/** 搜索框前面的放大镜。core 的 `TextInput.startIcon` 要的是组件，不是名字。 */
+const SearchIcon = () => h(Icon, { icon: "search" });
+/** 空列表时用的项目符号图标，语义图标表里没有对应的名字。 */
+const ListBulletIcon = () => h("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none"
+}, [h("path", {
+	"d": "M8.5 6h11M8.5 12h11M8.5 18h11",
+	"stroke": "currentColor",
+	"stroke-width": "1.5",
+	"stroke-linecap": "round"
+}), ...[
+	6,
+	12,
+	18
+].map((cy) => h("circle", {
+	cx: 4.5,
+	cy,
+	r: 1,
+	fill: "currentColor"
+}))]);
+function useSheetSearch(options) {
+	const results = ref([]);
+	const isSearching = ref(false);
+	const renderedCount = ref(50);
+	let sequence = 0;
+	let timer;
+	let lastLoadScrollHeight = null;
+	function resetWindow() {
+		lastLoadScrollHeight = null;
+		renderedCount.value = 50;
+	}
+	const visibleItems = computed(() => {
+		const normalized = options.query.value.trim().toLowerCase();
+		const matches = (item) => normalized === "" || item.label.toLowerCase().includes(normalized);
+		const selectedAtOpenMatches = options.selectedAtOpen().filter(matches);
+		const selectedAtOpenIds = new Set(selectedAtOpenMatches.map((item) => item.id));
+		const resultIds = new Set(results.value.map((item) => item.id));
+		const selectedMissingFromResults = options.selectedNow().filter((item) => !selectedAtOpenIds.has(item.id) && !resultIds.has(item.id) && matches(item));
+		return [
+			...selectedAtOpenMatches,
+			...selectedMissingFromResults,
+			...results.value.filter((item) => !selectedAtOpenIds.has(item.id))
+		];
+	});
+	const renderedItems = computed(() => visibleItems.value.slice(0, renderedCount.value));
+	function search() {
+		if (!options.isOpen()) return;
+		const current = ++sequence;
+		const run = async () => {
+			isSearching.value = true;
+			try {
+				const source = options.searchSource();
+				const trimmed = options.query.value.trim();
+				let items;
+				if (trimmed === "") items = source.bootstrap ? await source.bootstrap() : await source.search("");
+				else if (trimmed.length < options.minQueryLength()) items = [];
+				else items = await source.search(options.query.value);
+				if (sequence === current) results.value = items.slice(0, options.maxMenuItems());
+			} finally {
+				if (sequence === current) isSearching.value = false;
+			}
+		};
+		if (timer != null) clearTimeout(timer);
+		const delay = options.debounceMs();
+		if (delay > 0) timer = setTimeout(() => void run(), delay);
+		else run();
+	}
+	watch([
+		options.isOpen,
+		options.query,
+		options.searchSource,
+		options.minQueryLength,
+		options.maxMenuItems,
+		options.debounceMs
+	], () => {
+		resetWindow();
+		search();
+	}, { immediate: true });
+	onScopeDispose(() => {
+		if (timer != null) clearTimeout(timer);
+	});
+	/** 滚到离底部 200px 以内就多画一批；同一个 scrollHeight 只触发一次。 */
+	function handleScroll(event) {
+		const list = event.currentTarget;
+		if (list == null) return;
+		if (list.scrollHeight - list.scrollTop - list.clientHeight > 200 || lastLoadScrollHeight === list.scrollHeight) return;
+		lastLoadScrollHeight = list.scrollHeight;
+		renderedCount.value = Math.min(renderedCount.value + 50, visibleItems.value.length);
+	}
+	return {
+		results,
+		isSearching,
+		visibleItems,
+		renderedItems,
+		renderedCount,
+		resetWindow,
+		handleScroll
+	};
+}
+//#endregion
+//#region src/MobileTokenizer/MobileTokenizer.vue
+const _hoisted_1$5 = [
+	"aria-expanded",
+	"aria-label",
+	"disabled"
+];
+const _hoisted_2$5 = {
+	key: 1,
+	class: "astryx-mobile-tokenizer__trigger-placeholder"
+};
+const _hoisted_3$5 = { class: "astryx-mobile-tokenizer__sheet-body" };
+const _hoisted_4$4 = { class: "astryx-mobile-tokenizer__filter-row" };
+const _hoisted_5$3 = [
+	"aria-label",
+	"data-rendered-count",
+	"data-total-count"
+];
+const _hoisted_6$3 = {
+	key: 0,
+	class: "astryx-mobile-tokenizer__create-row",
+	"data-testid": "mobile-tokenizer-create-row"
+};
+const _hoisted_7$1 = { class: "astryx-mobile-tokenizer__create-label" };
+const _hoisted_8$1 = [
+	"aria-checked",
+	"aria-label",
+	"disabled",
+	"onClick"
+];
+const _hoisted_9$1 = { class: "astryx-mobile-tokenizer__row-label" };
+const _hoisted_10$1 = {
+	key: 0,
+	class: "astryx-mobile-tokenizer__footer"
+};
+const CREATABLE_ID_PREFIX = "__xds_create__";
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	name: "AstryxMobileTokenizer",
+	inheritAttrs: false,
+	__name: "MobileTokenizer",
+	props: {
+		label: {},
+		searchSource: {},
+		modelValue: {},
+		placeholder: {},
+		description: {},
+		isOptional: { type: Boolean },
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		hasCreate: {
+			type: Boolean,
+			default: false
+		},
+		maxEntries: {},
+		maxMenuItems: { default: 10 },
+		minQueryLength: { default: 1 },
+		debounceMs: { default: 150 },
+		emptySearchResultsText: { default: "No results found" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:query",
+		"changeQuery",
+		"openChange"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const triggerId = `astryx-mobile-tokenizer-${useId()}`;
+		const isOpen = ref(false);
+		const isClearConfirmationOpen = ref(false);
+		const query = ref("");
+		/** 打开那一刻的选中项，决定列表开头那一段的顺序。 */
+		const selectedAtOpen = ref([]);
+		const selected = computed(() => props.modelValue);
+		const selectedIds = computed(() => new Set(selected.value.map((item) => item.id)));
+		const isAtMax = computed(() => props.maxEntries != null && selected.value.length >= props.maxEntries);
+		const sheet = useSheetSearch({
+			isOpen: () => isOpen.value,
+			query,
+			searchSource: () => props.searchSource,
+			minQueryLength: () => props.minQueryLength,
+			maxMenuItems: () => props.maxMenuItems,
+			debounceMs: () => props.debounceMs,
+			selectedAtOpen: () => selectedAtOpen.value,
+			selectedNow: () => selected.value
+		});
+		const visibleItems = sheet.visibleItems;
+		const renderedItems = sheet.renderedItems;
+		/** 输入的文字还不在任何选项里时，给一行 `Create "…"` 和后面的加一项按钮。 */
+		const creatableItem = computed(() => {
+			const trimmed = query.value.trim();
+			if (!props.hasCreate || trimmed === "" || isAtMax.value) return null;
+			const lowered = trimmed.toLowerCase();
+			if (selectedIds.value.has(trimmed) || selected.value.some((item) => item.label.toLowerCase() === lowered) || sheet.results.value.some((item) => item.label.toLowerCase() === lowered)) return null;
+			return {
+				id: `${CREATABLE_ID_PREFIX}${trimmed}`,
+				label: `Create "${trimmed}"`
+			};
+		});
+		function commit(items, change) {
+			emit("update:modelValue", items);
+			emit("change", items, change);
+		}
+		function handleAdd(item) {
+			if (isAtMax.value || selectedIds.value.has(item.id)) return;
+			if (props.hasCreate && item.id.startsWith(CREATABLE_ID_PREFIX)) {
+				const created = item.id.slice(14);
+				if (selectedIds.value.has(created)) return;
+				const createdItem = {
+					id: created,
+					label: created
+				};
+				commit([...selected.value, createdItem], {
+					item: createdItem,
+					type: "create"
+				});
+				return;
+			}
+			commit([...selected.value, item], {
+				item,
+				type: "add"
+			});
+		}
+		function handleRemove(item) {
+			commit(selected.value.filter((candidate) => candidate.id !== item.id), {
+				item,
+				type: "remove"
+			});
+		}
+		function handleClearAll() {
+			if (selected.value.length === 0) return;
+			commit([], {
+				item: selected.value[selected.value.length - 1],
+				type: "remove"
+			});
+		}
+		function openSheet() {
+			selectedAtOpen.value = [...selected.value];
+			sheet.resetWindow();
+			isOpen.value = true;
+			emit("openChange", true);
+		}
+		function handleOpenChange(next) {
+			isOpen.value = next;
+			emit("openChange", next);
+		}
+		function handleQueryInput(next) {
+			query.value = next;
+			emit("update:query", next);
+			emit("changeQuery", next);
+		}
+		function handleCreate() {
+			const item = creatableItem.value;
+			if (item == null) return;
+			handleAdd(item);
+			query.value = "";
+			sheet.resetWindow();
+		}
+		function handleDone() {
+			query.value = "";
+			handleOpenChange(false);
+		}
+		function confirmClear() {
+			handleClearAll();
+			isClearConfirmationOpen.value = false;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				label: __props.label,
+				description: __props.description,
+				"is-optional": __props.isOptional,
+				"is-disabled": __props.isDisabled,
+				"input-id": triggerId
+			}, {
+				default: withCtx(() => [createElementVNode("button", {
+					id: triggerId,
+					type: "button",
+					class: "astryx-mobile-tokenizer__trigger",
+					"aria-haspopup": "dialog",
+					"aria-expanded": isOpen.value,
+					"aria-label": __props.label,
+					disabled: __props.isDisabled,
+					onClick: openSheet
+				}, [selected.value.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selected.value, (item) => {
+					return openBlock(), createBlock(unref(Token), {
+						key: item.id,
+						label: item.label,
+						disabled: __props.isDisabled
+					}, null, 8, ["label", "disabled"]);
+				}), 128)) : (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.placeholder ?? ""), 1))], 8, _hoisted_1$5), !__props.isDisabled ? (openBlock(), createBlock(unref(BottomSheet), {
+					key: 0,
+					"is-open": isOpen.value,
+					label: __props.label,
+					height: "tall",
+					padding: 0,
+					onOpenChange: handleOpenChange
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_3$5, [
+						createElementVNode("div", _hoisted_4$4, [createVNode(unref(TextInput), {
+							"model-value": query.value,
+							label: `Search ${__props.label}`,
+							"is-label-hidden": "",
+							placeholder: "Search...",
+							"start-icon": unref(SearchIcon),
+							size: "lg",
+							width: "100%",
+							"has-clear": "",
+							"control-class": "astryx-mobile-tokenizer__filter-input",
+							"onUpdate:modelValue": handleQueryInput
+						}, null, 8, [
+							"model-value",
+							"label",
+							"start-icon"
+						])]),
+						createElementVNode("div", {
+							class: "astryx-mobile-tokenizer__list",
+							role: "group",
+							"aria-label": __props.label,
+							"data-testid": "mobile-tokenizer-list",
+							"data-rendered-count": unref(renderedItems).length,
+							"data-total-count": unref(visibleItems).length,
+							onScroll: _cache[0] || (_cache[0] = (...args) => unref(sheet).handleScroll && unref(sheet).handleScroll(...args))
+						}, [creatableItem.value != null ? (openBlock(), createElementBlock("div", _hoisted_6$3, [createElementVNode("span", _hoisted_7$1, [createVNode(unref(Text), { type: "body" }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(creatableItem.value.label), 1)]),
+							_: 1
+						})]), createVNode(unref(Button), {
+							label: `Add ${query.value.trim()}`,
+							variant: "secondary",
+							size: "lg",
+							onClick: handleCreate
+						}, null, 8, ["label"])])) : createCommentVNode("v-if", true), !unref(sheet).isSearching.value && unref(visibleItems).length === 0 && creatableItem.value == null ? (openBlock(), createBlock(unref(EmptyState), {
+							key: 1,
+							class: "astryx-mobile-tokenizer__empty",
+							"is-compact": "",
+							title: query.value.trim() === "" ? "No items available" : __props.emptySearchResultsText,
+							description: query.value.trim() === "" ? "There are no items to choose from." : "Try a different search."
+						}, {
+							icon: withCtx(() => [createVNode(unref(Icon), {
+								icon: query.value.trim() === "" ? unref(ListBulletIcon) : "search",
+								size: "lg",
+								color: "secondary"
+							}, null, 8, ["icon"])]),
+							_: 1
+						}, 8, ["title", "description"])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(renderedItems), (item) => {
+							return openBlock(), createElementBlock("button", {
+								key: item.id,
+								type: "button",
+								role: "checkbox",
+								class: "astryx-mobile-tokenizer__row",
+								"aria-checked": selectedIds.value.has(item.id),
+								"aria-label": item.label,
+								disabled: !selectedIds.value.has(item.id) && isAtMax.value,
+								onClick: ($event) => selectedIds.value.has(item.id) ? handleRemove(item) : handleAdd(item)
+							}, [createElementVNode("span", _hoisted_9$1, [createVNode(unref(Text), { type: "body" }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+								_: 2
+							}, 1024)]), createVNode(unref(CheckboxIndicator), {
+								state: selectedIds.value.has(item.id) ? "checked" : "unchecked",
+								size: "md",
+								"is-disabled": !selectedIds.value.has(item.id) && isAtMax.value
+							}, null, 8, ["state", "is-disabled"])], 8, _hoisted_8$1);
+						}), 128))], 40, _hoisted_5$3),
+						query.value.trim() === "" ? (openBlock(), createElementBlock("div", _hoisted_10$1, [createVNode(unref(Button), {
+							class: "astryx-mobile-tokenizer__footer-action",
+							label: "Clear all",
+							variant: "secondary",
+							size: "lg",
+							"is-disabled": selected.value.length === 0,
+							onClick: _cache[1] || (_cache[1] = ($event) => isClearConfirmationOpen.value = true)
+						}, null, 8, ["is-disabled"]), createVNode(unref(Button), {
+							class: "astryx-mobile-tokenizer__footer-action",
+							label: "Done",
+							variant: "primary",
+							size: "lg",
+							onClick: handleDone
+						})])) : createCommentVNode("v-if", true),
+						createVNode(unref(AlertDialog), {
+							"is-open": isClearConfirmationOpen.value,
+							title: "Clear all selected items?",
+							description: `This removes all selected items from ${__props.label}.`,
+							"action-label": "Clear selection",
+							onOpenChange: _cache[2] || (_cache[2] = ($event) => isClearConfirmationOpen.value = $event),
+							onAction: confirmClear
+						}, null, 8, ["is-open", "description"])
+					])]),
+					_: 1
+				}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, [
+				"label",
+				"description",
+				"is-optional",
+				"is-disabled"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/Stat/types.ts
+/** Default direction-to-sentiment mapping (up=good, down=bad). */
+const DIRECTION_SENTIMENT = {
+	up: "positive",
+	down: "negative",
+	flat: "neutral"
+};
+/** Screen-reader text announced after the delta value. */
+const DIRECTION_TEXT = {
+	up: "trending up",
+	down: "trending down",
+	flat: "flat"
+};
+/** Inline glyph paths (12x12 viewBox): up-right arrow, down-right arrow, dash. */
+const DELTA_GLYPH_PATHS = {
+	up: "M3.5 8.5L8.5 3.5M8.5 3.5H4.75M8.5 3.5V7.25",
+	down: "M3.5 3.5L8.5 8.5M8.5 8.5H4.75M8.5 8.5V4.75",
+	flat: "M2.5 6H9.5"
+};
+//#endregion
+//#region src/Stat/Stat.vue
+const _hoisted_1$4 = ["data-size"];
+const _hoisted_2$4 = { class: "astryx-stat__label" };
+const _hoisted_3$4 = { class: "astryx-stat__value-row" };
+const _hoisted_4$3 = { class: "astryx-stat__value" };
+const _hoisted_5$2 = ["data-sentiment"];
+const _hoisted_6$2 = {
+	class: "astryx-stat__delta-glyph",
+	"aria-hidden": "true",
+	viewBox: "0 0 12 12",
+	width: "12",
+	height: "12",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": 1.5,
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+const _hoisted_7 = ["d"];
+const _hoisted_8 = { class: "astryx-stat__sr-only" };
+const _hoisted_9 = {
+	key: 0,
+	class: "astryx-stat__description"
+};
+const _hoisted_10 = {
+	key: 1,
+	class: "astryx-stat__media"
+};
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	name: "AstryxStat",
+	inheritAttrs: false,
+	__name: "Stat",
+	props: {
+		label: {},
+		value: { default: void 0 },
+		delta: { default: void 0 },
+		description: { default: void 0 },
+		size: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const sentiment = computed(() => {
+			if (props.delta == null) return null;
+			return props.delta.sentiment ?? DIRECTION_SENTIMENT[props.delta.direction];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(unref(attrs), {
+				class: ["astryx-stat", unref(attrs).class],
+				"data-size": __props.size
+			}), [
+				createElementVNode("span", _hoisted_2$4, toDisplayString(__props.label), 1),
+				createElementVNode("span", _hoisted_3$4, [createElementVNode("span", _hoisted_4$3, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.value), 1)])]), __props.delta != null && sentiment.value != null ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "astryx-stat__delta",
+					"data-sentiment": sentiment.value
+				}, [
+					(openBlock(), createElementBlock("svg", _hoisted_6$2, [createElementVNode("path", { d: unref(DELTA_GLYPH_PATHS)[__props.delta.direction] }, null, 8, _hoisted_7)])),
+					createTextVNode(" " + toDisplayString(__props.delta.value) + " ", 1),
+					createElementVNode("span", _hoisted_8, "(" + toDisplayString(unref(DIRECTION_TEXT)[__props.delta.direction]) + ")", 1)
+				], 8, _hoisted_5$2)) : createCommentVNode("v-if", true)]),
+				__props.description != null ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.description), 1)) : createCommentVNode("v-if", true),
+				_ctx.$slots.media ? (openBlock(), createElementBlock("div", _hoisted_10, [renderSlot(_ctx.$slots, "media")])) : createCommentVNode("v-if", true)
+			], 16, _hoisted_1$4);
+		};
+	}
+});
+//#endregion
+//#region src/SVGIcon/icons.ts
+/** Simple stroke-only: X / Close — both lines are stroke-role */
+const xIcon = {
+	name: "X",
+	primary: [{
+		type: "line",
+		attrs: {
+			x1: "18",
+			y1: "6",
+			x2: "6",
+			y2: "18"
+		},
+		role: "stroke"
+	}, {
+		type: "line",
+		attrs: {
+			x1: "6",
+			y1: "6",
+			x2: "18",
+			y2: "18"
+		},
+		role: "stroke"
+	}]
+};
+/** Simple stroke-only: Check */
+const checkIcon = {
+	name: "Check",
+	primary: [{
+		type: "path",
+		attrs: { d: "M20 6 9 17l-5-5" },
+		role: "stroke"
+	}]
+};
+/** Two-layer with mixed roles: Bell body is fill, clapper is stroke */
+const bellIcon = {
+	name: "Bell",
+	primary: [{
+		type: "path",
+		attrs: { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" },
+		role: "fill"
+	}],
+	secondary: [{
+		type: "path",
+		attrs: { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" },
+		role: "stroke"
+	}]
+};
+/**
+* Two-layer: Home — house outline is fill, door is fill (secondary).
+* In bold mode the door gets masked out of the house body.
+*/
+const homeIcon = {
+	name: "Home",
+	primary: [{
+		type: "path",
+		attrs: { d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" },
+		role: "fill"
+	}],
+	secondary: [{
+		type: "path",
+		attrs: { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" },
+		role: "fill"
+	}]
+};
+/** Complex: Settings — gear body is fill, center circle is fill (secondary, masked in bold) */
+const settingsIcon = {
+	name: "Settings",
+	primary: [{
+		type: "path",
+		attrs: { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" },
+		role: "fill"
+	}],
+	secondary: [{
+		type: "circle",
+		attrs: {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		},
+		role: "fill"
+	}]
+};
+/** Mixed roles: Calendar frame is fill, pegs are stroke, divider line is stroke */
+const calendarIcon = {
+	name: "Calendar",
+	primary: [
+		{
+			type: "rect",
+			attrs: {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "4",
+				rx: "2"
+			},
+			role: "fill"
+		},
+		{
+			type: "line",
+			attrs: {
+				x1: "16",
+				y1: "2",
+				x2: "16",
+				y2: "6"
+			},
+			role: "stroke"
+		},
+		{
+			type: "line",
+			attrs: {
+				x1: "8",
+				y1: "2",
+				x2: "8",
+				y2: "6"
+			},
+			role: "stroke"
+		}
+	],
+	secondary: [{
+		type: "line",
+		attrs: {
+			x1: "3",
+			y1: "10",
+			x2: "21",
+			y2: "10"
+		},
+		role: "stroke"
+	}]
+};
+/** Stroke-only: Menu / Hamburger — all lines are stroke-role */
+const menuIcon = {
+	name: "Menu",
+	primary: [
+		{
+			type: "line",
+			attrs: {
+				x1: "4",
+				y1: "6",
+				x2: "20",
+				y2: "6"
+			},
+			role: "stroke"
+		},
+		{
+			type: "line",
+			attrs: {
+				x1: "4",
+				y1: "12",
+				x2: "20",
+				y2: "12"
+			},
+			role: "stroke"
+		},
+		{
+			type: "line",
+			attrs: {
+				x1: "4",
+				y1: "18",
+				x2: "20",
+				y2: "18"
+			},
+			role: "stroke"
+		}
+	]
+};
+/** Single curved path: Heart */
+const heartIcon = {
+	name: "Heart",
+	primary: [{
+		type: "path",
+		attrs: { d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" },
+		role: "fill"
+	}]
+};
+/** Nested shapes: Eye — outer shape (fill) + pupil (fill, secondary) */
+const eyeIcon = {
+	name: "Eye",
+	primary: [{
+		type: "path",
+		attrs: { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" },
+		role: "fill"
+	}],
+	secondary: [{
+		type: "circle",
+		attrs: {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		},
+		role: "fill"
+	}]
+};
+/** Complex single path: Star */
+const starIcon = {
+	name: "Star",
+	primary: [{
+		type: "path",
+		attrs: { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" },
+		role: "fill"
+	}]
+};
+/** Single panel: Folder */
+const folderIcon = {
+	name: "Folder",
+	primary: [{
+		type: "path",
+		attrs: { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" },
+		role: "fill"
+	}]
+};
+/** Single path: Shield */
+const shieldIcon = {
+	name: "Shield",
+	primary: [{
+		type: "path",
+		attrs: { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" },
+		role: "fill"
+	}]
+};
+/** Mixed: Search — glass (fill) + handle (stroke, secondary) */
+const searchIcon = {
+	name: "Search",
+	primary: [{
+		type: "circle",
+		attrs: {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		},
+		role: "stroke"
+	}, {
+		type: "path",
+		attrs: { d: "m21 21-4.34-4.34" },
+		role: "stroke"
+	}]
+};
+/** Mixed: Mail — body (fill) + flap line (stroke, secondary) */
+const mailIcon = {
+	name: "Mail",
+	primary: [{
+		type: "rect",
+		attrs: {
+			x: "2",
+			y: "4",
+			width: "20",
+			height: "16",
+			rx: "2"
+		},
+		role: "fill"
+	}],
+	secondary: [{
+		type: "path",
+		attrs: { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" },
+		role: "stroke"
+	}]
+};
+/** Mixed: Lock — body (fill) + shackle (stroke) */
+const lockIcon = {
+	name: "Lock",
+	primary: [{
+		type: "rect",
+		attrs: {
+			width: "18",
+			height: "11",
+			x: "3",
+			y: "11",
+			rx: "2"
+		},
+		role: "fill"
+	}, {
+		type: "path",
+		attrs: { d: "M7 11V7a5 5 0 0 1 10 0v4" },
+		role: "stroke"
+	}]
+};
+/** All starter icons for convenience */
+const starterIcons = [
+	xIcon,
+	checkIcon,
+	bellIcon,
+	homeIcon,
+	settingsIcon,
+	calendarIcon,
+	menuIcon,
+	heartIcon,
+	eyeIcon,
+	starIcon,
+	folderIcon,
+	shieldIcon,
+	searchIcon,
+	mailIcon,
+	lockIcon
+];
+//#endregion
+//#region src/SVGIcon/pathTransforms/parse.ts
+/**
+* Parse an SVG path d-string into an array of absolute commands.
+* Normalizes H/V → L for uniform processing.
+*/
+function parsePath(d) {
+	const commands = [];
+	const re = /([MLHVCSQTAZ])([^MLHVCSQTAZ]*)/gi;
+	let cx = 0;
+	let cy = 0;
+	let sx = 0;
+	let sy = 0;
+	for (let match = re.exec(d); match !== null; match = re.exec(d)) {
+		const cmd = match[1];
+		const args = (match[2].match(/-?[\d.]+(?:e[+-]?\d+)?/gi) || []).map(Number);
+		switch (cmd) {
+			case "M":
+				cx = args[0];
+				cy = args[1];
+				sx = cx;
+				sy = cy;
+				commands.push({
+					type: "M",
+					x: cx,
+					y: cy
+				});
+				for (let i = 2; i < args.length; i += 2) {
+					cx = args[i];
+					cy = args[i + 1];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "m":
+				cx += args[0];
+				cy += args[1];
+				sx = cx;
+				sy = cy;
+				commands.push({
+					type: "M",
+					x: cx,
+					y: cy
+				});
+				for (let i = 2; i < args.length; i += 2) {
+					cx += args[i];
+					cy += args[i + 1];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "L":
+				for (let i = 0; i < args.length; i += 2) {
+					cx = args[i];
+					cy = args[i + 1];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "l":
+				for (let i = 0; i < args.length; i += 2) {
+					cx += args[i];
+					cy += args[i + 1];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "H":
+				for (let i = 0; i < args.length; i++) {
+					cx = args[i];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "h":
+				for (let i = 0; i < args.length; i++) {
+					cx += args[i];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "V":
+				for (let i = 0; i < args.length; i++) {
+					cy = args[i];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "v":
+				for (let i = 0; i < args.length; i++) {
+					cy += args[i];
+					commands.push({
+						type: "L",
+						x: cx,
+						y: cy
+					});
+				}
+				break;
+			case "C":
+				for (let i = 0; i < args.length; i += 6) {
+					commands.push({
+						type: "C",
+						x1: args[i],
+						y1: args[i + 1],
+						x2: args[i + 2],
+						y2: args[i + 3],
+						x: args[i + 4],
+						y: args[i + 5]
+					});
+					cx = args[i + 4];
+					cy = args[i + 5];
+				}
+				break;
+			case "c":
+				for (let i = 0; i < args.length; i += 6) {
+					commands.push({
+						type: "C",
+						x1: cx + args[i],
+						y1: cy + args[i + 1],
+						x2: cx + args[i + 2],
+						y2: cy + args[i + 3],
+						x: cx + args[i + 4],
+						y: cy + args[i + 5]
+					});
+					cx += args[i + 4];
+					cy += args[i + 5];
+				}
+				break;
+			case "Q":
+				for (let i = 0; i < args.length; i += 4) {
+					commands.push({
+						type: "Q",
+						cx: args[i],
+						cy: args[i + 1],
+						x: args[i + 2],
+						y: args[i + 3]
+					});
+					cx = args[i + 2];
+					cy = args[i + 3];
+				}
+				break;
+			case "q":
+				for (let i = 0; i < args.length; i += 4) {
+					commands.push({
+						type: "Q",
+						cx: cx + args[i],
+						cy: cy + args[i + 1],
+						x: cx + args[i + 2],
+						y: cy + args[i + 3]
+					});
+					cx += args[i + 2];
+					cy += args[i + 3];
+				}
+				break;
+			case "A":
+			case "a": {
+				const rel = cmd === "a";
+				for (let i = 0; i < args.length; i += 7) {
+					const nx = rel ? cx + args[i + 5] : args[i + 5];
+					const ny = rel ? cy + args[i + 6] : args[i + 6];
+					commands.push({
+						type: "A",
+						rx: args[i],
+						ry: args[i + 1],
+						rotation: args[i + 2],
+						large: args[i + 3],
+						sweep: args[i + 4],
+						x: nx,
+						y: ny
+					});
+					cx = nx;
+					cy = ny;
+				}
+				break;
+			}
+			case "S":
+			case "s": break;
+			case "T":
+			case "t": break;
+			case "Z":
+			case "z":
+				commands.push({ type: "Z" });
+				cx = sx;
+				cy = sy;
+		}
+	}
+	return commands;
+}
+function dist(a, b) {
+	return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2);
+}
+function lerp(a, b, t) {
+	return {
+		x: a.x + (b.x - a.x) * t,
+		y: a.y + (b.y - a.y) * t
+	};
+}
+function angleBetween(v1, v2) {
+	const dot = v1.x * v2.x + v1.y * v2.y;
+	const mag1 = Math.sqrt(v1.x ** 2 + v1.y ** 2);
+	const mag2 = Math.sqrt(v2.x ** 2 + v2.y ** 2);
+	if (mag1 === 0 || mag2 === 0) return Math.PI;
+	return Math.acos(Math.max(-1, Math.min(1, dot / (mag1 * mag2))));
+}
+function getEndpoint(cmd) {
+	if (cmd.type === "Z") return null;
+	return {
+		x: cmd.x,
+		y: cmd.y
+	};
+}
+function n(v) {
+	return Number(v.toFixed(3)).toString();
+}
+function serializePath(cmds) {
+	return cmds.map((cmd) => {
+		switch (cmd.type) {
+			case "M": return `M${n(cmd.x)} ${n(cmd.y)}`;
+			case "L": return `L${n(cmd.x)} ${n(cmd.y)}`;
+			case "C": return `C${n(cmd.x1)} ${n(cmd.y1)} ${n(cmd.x2)} ${n(cmd.y2)} ${n(cmd.x)} ${n(cmd.y)}`;
+			case "Q": return `Q${n(cmd.cx)} ${n(cmd.cy)} ${n(cmd.x)} ${n(cmd.y)}`;
+			case "A": return `A${n(cmd.rx)} ${n(cmd.ry)} ${n(cmd.rotation)} ${cmd.large} ${cmd.sweep} ${n(cmd.x)} ${n(cmd.y)}`;
+			case "Z": return "Z";
+			default: return "";
+		}
+	}).join(" ");
+}
+//#endregion
+//#region src/SVGIcon/pathTransforms/transforms.ts
+/**
+* Round corners at L→L junctions by inserting quadratic bezier curves.
+*
+* @param d - SVG path d-string
+* @param cornerRounding - 0-1 percentile. 0 = sharp (no change). 1 = max rounding.
+* @returns Modified d-string with rounded corners
+*/
+function roundCorners(d, cornerRounding) {
+	if (cornerRounding <= 0) return d;
+	cornerRounding = Math.min(1, cornerRounding);
+	const cmds = parsePath(d);
+	const result = [];
+	for (let i = 0; i < cmds.length; i++) {
+		const prev = i > 0 ? cmds[i - 1] : null;
+		const curr = cmds[i];
+		const next = i < cmds.length - 1 ? cmds[i + 1] : null;
+		if (curr.type === "Z" && prev && (prev.type === "L" || prev.type === "Q")) {
+			let mIdx = i - 1;
+			while (mIdx >= 0 && cmds[mIdx].type !== "M") mIdx--;
+			if (mIdx >= 0) {
+				const mCmd = cmds[mIdx];
+				const mPt = getEndpoint(mCmd);
+				const prevPt = getEndpoint(prev);
+				if (!mPt || !prevPt) {
+					result.push(curr);
+					continue;
+				}
+				let firstL = mIdx + 1;
+				while (firstL < cmds.length && cmds[firstL].type !== "L") firstL++;
+				if (firstL < cmds.length) {
+					const firstLPt = getEndpoint(cmds[firstL]);
+					if (!firstLPt) {
+						result.push(curr);
+						continue;
+					}
+					const d1 = dist(prevPt, mPt);
+					const d2 = dist(mPt, firstLPt);
+					const maxR = Math.min(d1, d2) / 2;
+					const sharp = 1 - angleBetween({
+						x: prevPt.x - mPt.x,
+						y: prevPt.y - mPt.y
+					}, {
+						x: firstLPt.x - mPt.x,
+						y: firstLPt.y - mPt.y
+					}) / Math.PI;
+					const r = maxR * cornerRounding * sharp * .85;
+					if (r >= .1) {
+						const t1 = r / d1;
+						const t2 = r / d2;
+						const pb1 = lerp(mPt, prevPt, t1);
+						const pb2 = lerp(mPt, firstLPt, t2);
+						result.push({
+							type: "L",
+							x: pb1.x,
+							y: pb1.y
+						});
+						result.push({
+							type: "Q",
+							cx: mPt.x,
+							cy: mPt.y,
+							x: pb2.x,
+							y: pb2.y
+						});
+						result.push({ type: "Z" });
+						continue;
+					}
+				}
+			}
+			result.push(curr);
+			continue;
+		}
+		if (curr.type === "L" && prev && (prev.type === "L" || prev.type === "M" || prev.type === "Q") && next && (next.type === "L" || next.type === "Z")) {
+			const prevPt = getEndpoint(prev);
+			if (!prevPt) {
+				result.push(curr);
+				continue;
+			}
+			const cornerPt = {
+				x: curr.x,
+				y: curr.y
+			};
+			let nextPt;
+			if (next.type === "Z") {
+				const mCmd = cmds.find((c) => c.type === "M");
+				nextPt = mCmd ? getEndpoint(mCmd) : null;
+			} else nextPt = getEndpoint(next);
+			if (!nextPt) {
+				result.push(curr);
+				continue;
+			}
+			const d1 = dist(prevPt, cornerPt);
+			const d2 = dist(cornerPt, nextPt);
+			const maxRadius = Math.min(d1, d2) / 2;
+			const sharpness = 1 - angleBetween({
+				x: prevPt.x - cornerPt.x,
+				y: prevPt.y - cornerPt.y
+			}, {
+				x: nextPt.x - cornerPt.x,
+				y: nextPt.y - cornerPt.y
+			}) / Math.PI;
+			const radius = maxRadius * cornerRounding * sharpness * .85;
+			if (radius < .1) {
+				result.push(curr);
+				continue;
+			}
+			const t1 = radius / d1;
+			const t2 = radius / d2;
+			const pullBack1 = lerp(cornerPt, prevPt, t1);
+			const pullBack2 = lerp(cornerPt, nextPt, t2);
+			result.push({
+				type: "L",
+				x: pullBack1.x,
+				y: pullBack1.y
+			});
+			result.push({
+				type: "Q",
+				cx: cornerPt.x,
+				cy: cornerPt.y,
+				x: pullBack2.x,
+				y: pullBack2.y
+			});
+		} else result.push(curr);
+	}
+	return serializePath(result);
+}
+/**
+* Bow straight line segments by replacing L with Q.
+*
+* @param d - SVG path d-string
+* @param curvature - 0-1 percentile. 0 = straight. 1 = max bow.
+* @returns Modified d-string with curved segments
+*/
+function addCurvature(d, curvature) {
+	if (curvature <= 0) return d;
+	curvature = Math.min(1, curvature);
+	const cmds = parsePath(d);
+	const result = [];
+	for (let i = 0; i < cmds.length; i++) {
+		const prev = i > 0 ? cmds[i - 1] : null;
+		const curr = cmds[i];
+		if (curr.type === "L" && prev) {
+			const prevPt = getEndpoint(prev);
+			if (!prevPt) {
+				result.push(curr);
+				continue;
+			}
+			const endPt = {
+				x: curr.x,
+				y: curr.y
+			};
+			const segLen = dist(prevPt, endPt);
+			if (segLen < 2) {
+				result.push(curr);
+				continue;
+			}
+			const mid = lerp(prevPt, endPt, .5);
+			const dx = endPt.x - prevPt.x;
+			const perpX = -(endPt.y - prevPt.y) / segLen;
+			const perpY = dx / segLen;
+			const offset = segLen * curvature * .25;
+			const cp = {
+				x: mid.x + perpX * offset,
+				y: mid.y + perpY * offset
+			};
+			result.push({
+				type: "Q",
+				cx: cp.x,
+				cy: cp.y,
+				x: endPt.x,
+				y: endPt.y
+			});
+		} else result.push(curr);
+	}
+	return serializePath(result);
+}
+/**
+* Adjust tension on existing bezier curves.
+*
+* @param d - SVG path d-string
+* @param tension - 0-1. 0 = loose (curves balloon). 0.5 = unchanged. 1 = tight.
+* @returns Modified d-string
+*/
+function adjustTension(d, tension) {
+	if (tension === .5) return d;
+	const cmds = parsePath(d);
+	const result = [];
+	const scale = 1.5 - tension;
+	for (let i = 0; i < cmds.length; i++) {
+		const prev = i > 0 ? cmds[i - 1] : null;
+		const curr = cmds[i];
+		if (curr.type === "C" && prev) {
+			const start = getEndpoint(prev) || {
+				x: 0,
+				y: 0
+			};
+			const end = {
+				x: curr.x,
+				y: curr.y
+			};
+			const cp1 = {
+				x: start.x + (curr.x1 - start.x) * scale,
+				y: start.y + (curr.y1 - start.y) * scale
+			};
+			const cp2 = {
+				x: end.x + (curr.x2 - end.x) * scale,
+				y: end.y + (curr.y2 - end.y) * scale
+			};
+			result.push({
+				type: "C",
+				x1: cp1.x,
+				y1: cp1.y,
+				x2: cp2.x,
+				y2: cp2.y,
+				x: end.x,
+				y: end.y
+			});
+		} else if (curr.type === "Q" && prev) {
+			const start = getEndpoint(prev) || {
+				x: 0,
+				y: 0
+			};
+			const end = {
+				x: curr.x,
+				y: curr.y
+			};
+			const mid = lerp(start, end, .5);
+			const cp = {
+				x: mid.x + (curr.cx - mid.x) * scale,
+				y: mid.y + (curr.cy - mid.y) * scale
+			};
+			result.push({
+				type: "Q",
+				cx: cp.x,
+				cy: cp.y,
+				x: end.x,
+				y: end.y
+			});
+		} else result.push(curr);
+	}
+	return serializePath(result);
+}
+/**
+* Apply all personality transforms to a path d-string.
+* Order: corner rounding → segment curvature → tension.
+*/
+function applyPersonality(d, personality) {
+	let result = d;
+	if (personality.cornerRounding != null && personality.cornerRounding > 0) result = roundCorners(result, personality.cornerRounding);
+	if (personality.segmentCurvature != null && personality.segmentCurvature > 0) result = addCurvature(result, personality.segmentCurvature);
+	if (personality.tension != null && personality.tension !== .5) result = adjustTension(result, personality.tension);
+	return result;
+}
+//#endregion
+//#region src/SVGIcon/SVGIcon.vue
+const _hoisted_1$3 = [
+	"viewBox",
+	"data-variation",
+	"data-size",
+	"data-color"
+];
+const _hoisted_2$3 = { key: 0 };
+const _hoisted_3$3 = ["mask"];
+const _hoisted_4$2 = {
+	key: 2,
+	class: "astryx-svg-icon__layer astryx-svg-icon__layer--primary-stroke"
+};
+const _hoisted_5$1 = {
+	key: 0,
+	class: "astryx-svg-icon__layer astryx-svg-icon__layer--secondary-fill"
+};
+const _hoisted_6$1 = {
+	key: 1,
+	class: "astryx-svg-icon__layer astryx-svg-icon__layer--secondary-stroke"
+};
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	name: "AstryxSvgIcon",
+	inheritAttrs: false,
+	__name: "SVGIcon",
+	props: {
+		icon: {},
+		variation: { default: "linear" },
+		size: { default: "md" },
+		color: { default: "primary" },
+		strokeWidth: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const viewBox = computed(() => props.icon.viewBox ?? "0 0 24 24");
+		const maskId = `astryx-svg-icon-${useId().replace(/\W/g, "")}-mask`;
+		/** 按角色把一层图形拆成「填充组」和「描边组」。 */
+		function splitByRole(shapes) {
+			const fill = [];
+			const stroke = [];
+			for (const shape of shapes) if (shape.role === "stroke") stroke.push(shape);
+			else fill.push(shape);
+			return {
+				fill,
+				stroke
+			};
+		}
+		const primary = computed(() => splitByRole(props.icon.primary));
+		const secondary = computed(() => {
+			const shapes = props.icon.secondary ?? [];
+			return shapes.length > 0 ? splitByRole(shapes) : {
+				fill: [],
+				stroke: []
+			};
+		});
+		const hasSecondary = computed(() => (props.icon.secondary?.length ?? 0) > 0);
+		const useMask = computed(() => props.variation === "bold" && primary.value.fill.length > 0 && secondary.value.fill.length + secondary.value.stroke.length > 0);
+		const knockoutShapes = computed(() => [...secondary.value.fill, ...secondary.value.stroke]);
+		const a11yAttrs = computed(() => {
+			if (attrs["aria-hidden"] != null || attrs.role != null) return {};
+			return attrs["aria-label"] != null || attrs["aria-labelledby"] != null ? { role: "img" } : { "aria-hidden": "true" };
+		});
+		const mergedAttrs = computed(() => ({
+			...a11yAttrs.value,
+			...attrs
+		}));
+		const svgStyle = computed(() => {
+			const style = attrs.style ?? {};
+			if (props.strokeWidth == null) return style;
+			return {
+				...style,
+				"--astryx-icon-stroke-width": String(props.strokeWidth)
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", mergeProps({
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: viewBox.value,
+				class: ["astryx-svg-icon", [unref(attrs).class, `astryx-svg-icon--${__props.variation}`]],
+				"data-variation": __props.variation,
+				"data-size": __props.size,
+				"data-color": __props.color
+			}, mergedAttrs.value, { style: svgStyle.value }), [
+				createCommentVNode(" 遮罩：把次层的填充形状从主层里挖出带间隙的洞。 "),
+				useMask.value ? (openBlock(), createElementBlock("defs", _hoisted_2$3, [createElementVNode("mask", { id: maskId }, [_cache[0] || (_cache[0] = createElementVNode("rect", {
+					width: "24",
+					height: "24",
+					fill: "white"
+				}, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(knockoutShapes.value, (shape, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(shape.type), mergeProps({ key: `knockout-${index}` }, { ref_for: true }, shape.attrs, {
+						fill: (shape.role ?? "fill") === "fill" ? "black" : "none",
+						stroke: "black",
+						"stroke-width": (shape.role ?? "fill") === "stroke" ? "calc(var(--astryx-icon-stroke-width, 1.5) + var(--astryx-icon-gap, 0.75) * 2)" : "var(--astryx-icon-gap, 0.75)",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "var(--astryx-icon-gap-linejoin, round)"
+					}), null, 16, ["fill", "stroke-width"]);
+				}), 128))])])) : createCommentVNode("v-if", true),
+				createCommentVNode(" 主层：填充组（bold 下带遮罩）、描边组。 "),
+				primary.value.fill.length > 0 ? (openBlock(), createElementBlock("g", {
+					key: 1,
+					class: "astryx-svg-icon__layer astryx-svg-icon__layer--primary-fill",
+					mask: useMask.value ? `url(#${maskId})` : void 0
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(primary.value.fill, (shape, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(shape.type), mergeProps({ key: `primary-fill-${index}` }, { ref_for: true }, shape.attrs), null, 16);
+				}), 128))], 8, _hoisted_3$3)) : createCommentVNode("v-if", true),
+				primary.value.stroke.length > 0 ? (openBlock(), createElementBlock("g", _hoisted_4$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(primary.value.stroke, (shape, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(shape.type), mergeProps({ key: `primary-stroke-${index}` }, { ref_for: true }, shape.attrs), null, 16);
+				}), 128))])) : createCommentVNode("v-if", true),
+				createCommentVNode(" 次层：bold + 遮罩时整层不画，它只作为挖洞存在。 "),
+				hasSecondary.value && !useMask.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [secondary.value.fill.length > 0 ? (openBlock(), createElementBlock("g", _hoisted_5$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(secondary.value.fill, (shape, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(shape.type), mergeProps({ key: `secondary-fill-${index}` }, { ref_for: true }, shape.attrs), null, 16);
+				}), 128))])) : createCommentVNode("v-if", true), secondary.value.stroke.length > 0 ? (openBlock(), createElementBlock("g", _hoisted_6$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(secondary.value.stroke, (shape, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(shape.type), mergeProps({ key: `secondary-stroke-${index}` }, { ref_for: true }, shape.attrs), null, 16);
+				}), 128))])) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true)
+			], 16, _hoisted_1$3);
+		};
+	}
+});
+//#endregion
+//#region src/SVGIcon/xif-examples.ts
+const xifCheck = {
+	name: "check",
+	paths: [{
+		type: "path",
+		attrs: { d: "M5 13l4 4L19 7" },
+		role: "stroke"
+	}],
+	tags: ["action", "confirm"]
+};
+const xifHome = {
+	name: "home",
+	paths: [{
+		type: "path",
+		attrs: { d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" },
+		role: "fill",
+		layer: "primary"
+	}, {
+		type: "path",
+		attrs: { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" },
+		role: "fill",
+		layer: "secondary"
+	}],
+	tags: ["navigation"]
+};
+const xifFile = {
+	name: "file",
+	paths: [{
+		type: "path",
+		attrs: { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" },
+		role: "fill",
+		layer: "primary"
+	}, {
+		type: "path",
+		attrs: { d: "M14 2v4a2 2 0 0 0 2 2h4" },
+		role: "stroke",
+		layer: "secondary"
+	}],
+	slots: [{
+		name: "badge",
+		position: {
+			x: .5,
+			y: .65
+		},
+		size: .35
+	}],
+	tags: ["file", "document"]
+};
+const xifShield = {
+	name: "shield",
+	paths: [{
+		type: "path",
+		attrs: { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" },
+		role: "fill",
+		layer: "primary"
+	}],
+	slots: [{
+		name: "badge",
+		position: "center",
+		size: .42
+	}],
+	tags: ["security", "protection"]
+};
+const xifBell = {
+	name: "bell",
+	paths: [{
+		type: "path",
+		attrs: { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" },
+		role: "fill",
+		layer: "primary",
+		animate: {
+			type: "scale",
+			sequence: 1
+		}
+	}, {
+		type: "path",
+		attrs: { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" },
+		role: "stroke",
+		layer: "secondary",
+		animate: {
+			type: "draw",
+			sequence: 2
+		}
+	}],
+	tags: ["notification", "alert"]
+};
+const xifStar = {
+	name: "star",
+	paths: [{
+		type: "path",
+		attrs: { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" },
+		role: "fill",
+		layer: "primary",
+		personality: { cornerRounding: 0 }
+	}],
+	tags: ["rating", "favorite"]
+};
+const xifBellOverride = {
+	name: "bell-override",
+	paths: [{
+		type: "path",
+		attrs: { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" },
+		role: "fill",
+		layer: "primary"
+	}, {
+		type: "path",
+		attrs: { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" },
+		role: "stroke",
+		layer: "secondary"
+	}],
+	overrides: { bold: [{
+		type: "path",
+		attrs: { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" },
+		role: "fill",
+		layer: "primary"
+	}, {
+		type: "path",
+		attrs: { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" },
+		role: "fill",
+		layer: "secondary"
+	}] },
+	tags: ["notification"]
+};
+const xifExamples = [
+	xifCheck,
+	xifHome,
+	xifFile,
+	xifShield,
+	xifBell,
+	xifStar,
+	xifBellOverride
+];
+//#endregion
+//#region src/TransferList/transferItems.ts
+/** 把 `fromIndex` 那一项挪到 `toIndex`，返回新数组。 */
+function moveItem(value, fromIndex, toIndex) {
+	const nextValue = [...value];
+	const [item] = nextValue.splice(fromIndex, 1);
+	nextValue.splice(toIndex, 0, item);
+	return nextValue;
+}
+/**
+* 一行是否匹配搜索词。大小写折叠不跟语言走，和 Selector、MultiSelector、
+* CommandPalette 保持一致。`description` 只有是纯文字时才参与匹配。
+*/
+function matchesQuery(option, query) {
+	if (query === "") return true;
+	const description = typeof option.description === "string" ? option.description : "";
+	return [
+		option.label,
+		description,
+		option.group ?? ""
+	].some((part) => part.toLowerCase().includes(query));
+}
+/** 按 `group` 把可选条目分段，保持出现顺序；没分组的归到空字符串那一段。 */
+function groupOptions(options) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		const group = option.group ?? "";
+		const items = groups.get(group);
+		if (items) items.push(option);
+		else groups.set(group, [option]);
+	}
+	return [...groups.entries()];
+}
+/**
+* 这一项能挪到的范围。遇到 `isReorderDisabled` 的邻居就停，
+* 所以被锁住的条目位置不动，别人也跨不过去。
+*/
+function movableRange(optionByValue, optionValue, orderedValue) {
+	const index = orderedValue.indexOf(optionValue);
+	let start = 0;
+	let end = orderedValue.length - 1;
+	for (let cursor = index - 1; cursor >= 0; cursor -= 1) {
+		const option = optionByValue.get(orderedValue[cursor]);
+		if (option == null || option.isReorderDisabled) {
+			start = cursor + 1;
+			break;
+		}
+	}
+	for (let cursor = index + 1; cursor < orderedValue.length; cursor += 1) {
+		const option = optionByValue.get(orderedValue[cursor]);
+		if (option == null || option.isReorderDisabled) {
+			end = cursor - 1;
+			break;
+		}
+	}
+	return {
+		index,
+		start,
+		end
+	};
+}
+//#endregion
+//#region src/TransferList/TransferListPanel.vue
+const _hoisted_1$2 = ["data-side", "aria-labelledby"];
+const _hoisted_2$2 = { class: "astryx-transfer-list-panel__header" };
+const _hoisted_3$2 = ["disabled"];
+const _hoisted_4$1 = ["data-transfer-list-panel-body"];
+const _hoisted_5 = {
+	key: 0,
+	role: "presentation",
+	class: "astryx-transfer-list-panel__group-heading"
+};
+const _hoisted_6 = ["data-transfer-list-empty"];
+const _sfc_main$9 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTransferListPanel",
+	__name: "TransferListPanel",
+	props: {
+		side: {},
+		headingId: {},
+		label: {},
+		showAction: { type: Boolean },
+		actionLabel: {},
+		isActionDisabled: { type: Boolean },
+		groups: {},
+		showGroupHeadings: { type: Boolean },
+		ungroupedLabel: {},
+		emptyText: {},
+		isReorderable: { type: Boolean },
+		draggingValue: {},
+		grabbedValue: {},
+		dropTarget: {},
+		reorderInstructionsId: {},
+		labels: {},
+		handlers: {}
+	},
+	emits: [
+		"action",
+		"add",
+		"remove"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/** 分组壳子在、但一行都没有时也要走空状态。 */
+		const hasRows = computed(() => props.groups.some((group) => group.options.length > 0));
+		function dropPositionOf(option) {
+			return props.dropTarget?.value === option.value ? props.dropTarget.position : void 0;
+		}
+		function rowState(option) {
+			if (option.isTransferDisabled || option.isReorderDisabled) return "disabled";
+			if (props.draggingValue === option.value || props.grabbedValue === option.value) return "reordering";
+			return "enabled";
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-transfer-list-panel",
+				"data-side": __props.side,
+				role: "group",
+				"aria-labelledby": __props.headingId,
+				tabindex: "-1"
+			}, [createElementVNode("div", _hoisted_2$2, [createVNode(unref(Text), {
+				id: __props.headingId,
+				type: "label",
+				color: "secondary"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+				_: 1
+			}, 8, ["id"]), __props.showAction ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				type: "button",
+				class: "astryx-transfer-list-header-action",
+				"data-transfer-list-header-action": "true",
+				disabled: __props.isActionDisabled,
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("action"))
+			}, toDisplayString(__props.actionLabel), 9, _hoisted_3$2)) : createCommentVNode("v-if", true)]), createElementVNode("div", {
+				class: "astryx-transfer-list-panel__body",
+				"data-transfer-list-panel-body": __props.side
+			}, [hasRows.value ? (openBlock(), createBlock(unref(List), {
+				key: 0,
+				density: "compact"
+			}, {
+				header: withCtx(() => [createVNode(unref(VisuallyHidden), null, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+					_: 1
+				})]),
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (group) => {
+					return openBlock(), createElementBlock(Fragment, { key: group.group || "ungrouped" }, [__props.showGroupHeadings && (group.group !== "" || __props.groups.length > 1) ? (openBlock(), createElementBlock("li", _hoisted_5, [createVNode(unref(Text), {
+						type: "body",
+						weight: "bold",
+						color: "primary"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(group.group || __props.ungroupedLabel), 1)]),
+						_: 2
+					}, 1024)])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.options, (row) => {
+						return openBlock(), createBlock(unref(Item), {
+							key: row.option.value,
+							as: "li",
+							density: "compact",
+							class: "astryx-transfer-list-item",
+							"data-transfer-list-row": __props.side === "selected" ? row.option.value : void 0,
+							"data-transfer-list-reorder-source": __props.draggingValue === row.option.value || void 0,
+							"data-transfer-list-drop-target": dropPositionOf(row.option),
+							"data-transfer-list-index": __props.side === "selected" ? String(row.index) : void 0,
+							"data-side": __props.side,
+							"data-state": rowState(row.option)
+						}, createSlots({
+							label: withCtx(() => [renderSlot(_ctx.$slots, "option", { option: row.option }, () => [createTextVNode(toDisplayString(row.option.label), 1)])]),
+							endContent: withCtx(() => [__props.side === "available" ? (openBlock(), createBlock(unref(IconButton), {
+								key: 0,
+								class: "astryx-transfer-list-row-action",
+								label: __props.labels.addOption(row.option.label),
+								size: "sm",
+								variant: "ghost",
+								"is-disabled": row.option.isTransferDisabled === true,
+								tooltip: row.option.isTransferDisabled === true ? row.option.disabledMessage ?? __props.labels.transferDisabled(row.option.label) : void 0,
+								"data-transfer-list-action": "available",
+								onClick: ($event) => emit("add", row.option, row.index)
+							}, {
+								default: withCtx(() => [createVNode(unref(Icon), {
+									icon: unref(PlusIcon),
+									size: "sm"
+								}, null, 8, ["icon"])]),
+								_: 1
+							}, 8, [
+								"label",
+								"is-disabled",
+								"tooltip",
+								"onClick"
+							])) : (openBlock(), createBlock(unref(IconButton), {
+								key: 1,
+								class: "astryx-transfer-list-row-action",
+								label: __props.labels.removeOption(row.option.label),
+								size: "sm",
+								variant: "ghost",
+								"is-disabled": row.option.isTransferDisabled === true,
+								tooltip: row.option.isTransferDisabled === true ? row.option.disabledMessage ?? __props.labels.transferDisabled(row.option.label) : void 0,
+								"data-transfer-list-action": "selected",
+								onClick: ($event) => emit("remove", row.option, row.index)
+							}, {
+								default: withCtx(() => [createVNode(unref(Icon), {
+									icon: "close",
+									size: "sm"
+								})]),
+								_: 1
+							}, 8, [
+								"label",
+								"is-disabled",
+								"tooltip",
+								"onClick"
+							]))]),
+							_: 2
+						}, [__props.side === "selected" ? {
+							name: "startContent",
+							fn: withCtx(() => [__props.isReorderable ? (openBlock(), createBlock(unref(IconButton), {
+								key: 0,
+								class: "astryx-transfer-list-reorder-handle",
+								label: __props.labels.reorderOption(row.option.label),
+								"aria-describedby": __props.reorderInstructionsId,
+								"aria-pressed": __props.grabbedValue === row.option.value || void 0,
+								"is-disabled": row.option.isReorderDisabled === true,
+								tooltip: row.option.isReorderDisabled === true ? row.option.disabledMessage ?? __props.labels.reorderDisabled(row.option.label) : void 0,
+								size: "sm",
+								variant: "ghost",
+								onClick: ($event) => __props.handlers.click(row.option),
+								onKeydown: ($event) => __props.handlers.keydown($event, row.option),
+								onPointerdown: ($event) => __props.handlers.pointerdown($event, row.option),
+								onPointermove: ($event) => __props.handlers.pointermove($event, row.option),
+								onPointerup: ($event) => __props.handlers.pointerup($event, row.option),
+								onPointercancel: ($event) => __props.handlers.pointercancel($event, row.option),
+								onLostpointercapture: _cache[1] || (_cache[1] = ($event) => __props.handlers.lostpointercapture($event))
+							}, {
+								default: withCtx(() => [createVNode(unref(Icon), {
+									icon: unref(GripVerticalIcon),
+									size: "sm"
+								}, null, 8, ["icon"])]),
+								_: 1
+							}, 8, [
+								"label",
+								"aria-describedby",
+								"aria-pressed",
+								"is-disabled",
+								"tooltip",
+								"onClick",
+								"onKeydown",
+								"onPointerdown",
+								"onPointermove",
+								"onPointerup",
+								"onPointercancel"
+							])) : createCommentVNode("v-if", true)]),
+							key: "0"
+						} : void 0]), 1032, [
+							"data-transfer-list-row",
+							"data-transfer-list-reorder-source",
+							"data-transfer-list-drop-target",
+							"data-transfer-list-index",
+							"data-side",
+							"data-state"
+						]);
+					}), 128))], 64);
+				}), 128))]),
+				_: 3
+			})) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: "astryx-transfer-list-panel__empty",
+				"data-transfer-list-empty": __props.side
+			}, [createVNode(unref(Text), {
+				type: "supporting",
+				color: "secondary"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.emptyText), 1)]),
+				_: 1
+			})], 8, _hoisted_6))], 8, _hoisted_4$1)], 8, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/TransferList/useTransferReorder.ts
+/** 松手前先要跨过这么远的竖直距离，才算真的在拖。 */
+const POINTER_DRAG_THRESHOLD_PX = 5;
+/**
+* 已选栏的重排状态机：键盘拿起／放下、指针拖动、读屏播报，都在这里。
+*
+* 键盘走「每一步立刻提交」，指针走「松手才提交」，和上游一致：
+* 键盘用户按一次方向键就该听到新位置，鼠标用户拖动过程中不该改动数据。
+*/
+function useTransferReorder(options) {
+	const session = ref(null);
+	const liveValue = ref([...options.currentValue()]);
+	let suppressClick = false;
+	watch(options.currentValue, (next) => {
+		liveValue.value = [...next];
+	});
+	function commit(next) {
+		liveValue.value = [...next];
+		options.commit(next);
+	}
+	function setSession(next) {
+		session.value = next;
+	}
+	function begin(option, mode, geometry) {
+		if (option.isReorderDisabled || !options.isReorderable()) return;
+		const index = liveValue.value.indexOf(option.value);
+		if (index < 0 || mode === "pointer" && geometry == null) return;
+		setSession({
+			value: option.value,
+			label: option.label,
+			mode,
+			originalValue: [...liveValue.value],
+			fromIndex: index,
+			toIndex: index,
+			...geometry,
+			hasPointerMoved: false
+		});
+		if (mode === "keyboard") options.announce(options.messages.grabbed(option.label, index + 1, liveValue.value.length));
+	}
+	function finish(cancelled) {
+		const current = session.value;
+		if (current == null) return;
+		if (current.mode === "pointer") {
+			if (cancelled || !current.hasPointerMoved) {
+				setSession(null);
+				if (cancelled) options.announce(options.messages.moveCancelled(current.label));
+				return;
+			}
+			const hasChanged = current.fromIndex !== current.toIndex;
+			const nextValue = moveItem(current.originalValue, current.fromIndex, current.toIndex);
+			setSession(null);
+			if (hasChanged) {
+				commit(nextValue);
+				options.announce(options.messages.dropped(current.label, current.toIndex + 1, current.originalValue.length));
+			} else options.announce(options.messages.returned(current.label, current.fromIndex + 1));
+			return;
+		}
+		if (cancelled) {
+			commit(current.originalValue);
+			options.announce(options.messages.moveCancelled(current.label));
+		} else {
+			const index = liveValue.value.indexOf(current.value);
+			options.announce(options.messages.dropped(current.label, index + 1, liveValue.value.length));
+		}
+		setSession(null);
+	}
+	function moveTo(option, requestedIndex) {
+		const nextValue = [...liveValue.value];
+		const { index, start, end } = movableRange(options.optionByValue(), option.value, nextValue);
+		if (index < 0) return false;
+		const target = Math.max(start, Math.min(end, requestedIndex));
+		if (target === index) return false;
+		nextValue.splice(index, 1);
+		nextValue.splice(target, 0, option.value);
+		commit(nextValue);
+		return true;
+	}
+	function onHandleClick(option) {
+		if (suppressClick) {
+			suppressClick = false;
+			return;
+		}
+		if (session.value?.value === option.value) finish(false);
+		else begin(option, "keyboard");
+	}
+	function onHandleKeydown(event, option) {
+		const current = session.value;
+		if (current?.value !== option.value || current.mode !== "keyboard") return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			finish(true);
+			return;
+		}
+		if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			finish(false);
+			return;
+		}
+		const { index, start, end } = movableRange(options.optionByValue(), option.value, liveValue.value);
+		const target = {
+			ArrowUp: index - 1,
+			ArrowDown: index + 1,
+			Home: start,
+			End: end
+		}[event.key];
+		if (target == null) return;
+		event.preventDefault();
+		if (moveTo(option, target)) {
+			const nextIndex = liveValue.value.indexOf(option.value);
+			options.announce(options.messages.movedToPosition(option.label, nextIndex + 1, liveValue.value.length));
+		}
+	}
+	function onHandlePointerDown(event, option) {
+		if (event.button !== 0 || option.isReorderDisabled) return;
+		const sourceRow = options.rowElement(option.value);
+		if (sourceRow == null) return;
+		const bounds = sourceRow.getBoundingClientRect();
+		suppressClick = true;
+		event.currentTarget?.setPointerCapture?.(event.pointerId);
+		begin(option, "pointer", {
+			pointerId: event.pointerId,
+			pointerStartY: event.clientY,
+			pointerOffsetY: event.clientY - bounds.top,
+			pointerClientY: event.clientY,
+			previewX: bounds.left,
+			previewWidth: bounds.width
+		});
+	}
+	function onHandlePointerMove(event, option) {
+		const current = session.value;
+		if (current?.value !== option.value || current.mode !== "pointer" || current.pointerId !== event.pointerId) return;
+		const verticalDistance = event.clientY - (current.pointerStartY ?? event.clientY);
+		const hasCrossedThreshold = current.hasPointerMoved === true || Math.abs(verticalDistance) >= POINTER_DRAG_THRESHOLD_PX;
+		let targetIndex = current.fromIndex;
+		if (hasCrossedThreshold) {
+			event.preventDefault();
+			const { start, end } = movableRange(options.optionByValue(), current.value, current.originalValue);
+			const remainingValues = current.originalValue.filter((optionValue) => optionValue !== current.value);
+			const candidates = current.originalValue.map((optionValue, originalIndex) => ({
+				optionValue,
+				originalIndex
+			})).filter((candidate) => candidate.optionValue !== current.value && candidate.originalIndex >= start && candidate.originalIndex <= end).map((candidate) => ({
+				row: options.rowElement(candidate.optionValue),
+				targetIndex: remainingValues.indexOf(candidate.optionValue)
+			})).filter((candidate) => candidate.row != null);
+			if (candidates.length > 0) {
+				targetIndex = candidates[candidates.length - 1].targetIndex + 1;
+				for (const candidate of candidates) {
+					const candidateBounds = candidate.row.getBoundingClientRect();
+					if (event.clientY < candidateBounds.top + candidateBounds.height / 2) {
+						targetIndex = candidate.targetIndex;
+						break;
+					}
+				}
+				targetIndex = Math.max(start, Math.min(end, targetIndex));
+			}
+		}
+		setSession({
+			...current,
+			pointerClientY: event.clientY,
+			hasPointerMoved: hasCrossedThreshold,
+			toIndex: targetIndex
+		});
+		if (hasCrossedThreshold && current.toIndex !== targetIndex) options.announce(options.messages.movedToPosition(option.label, targetIndex + 1, current.originalValue.length));
+	}
+	function onHandlePointerUp(event, option) {
+		const current = session.value;
+		if (current?.mode !== "pointer" || current.pointerId !== event.pointerId) return;
+		if (current.value !== option.value) return;
+		suppressClick = false;
+		finish(false);
+		const target = event.currentTarget;
+		if (target?.hasPointerCapture?.(event.pointerId)) target.releasePointerCapture?.(event.pointerId);
+	}
+	function onHandlePointerCancel(event, option) {
+		const current = session.value;
+		if (current?.mode !== "pointer" || current.pointerId !== event.pointerId) return;
+		if (current.value !== option.value) return;
+		suppressClick = false;
+		finish(true);
+		const target = event.currentTarget;
+		if (target?.hasPointerCapture?.(event.pointerId)) target.releasePointerCapture?.(event.pointerId);
+	}
+	function onHandleLostPointerCapture(event) {
+		const current = session.value;
+		if (current?.mode === "pointer" && current.pointerId === event.pointerId) {
+			suppressClick = false;
+			finish(true);
+		}
+	}
+	const draggingValue = computed(() => session.value?.mode === "pointer" ? session.value.value : null);
+	const grabbedValue = computed(() => session.value?.mode === "keyboard" ? session.value.value : null);
+	const pointerPlacement = computed(() => {
+		const current = session.value;
+		if (current?.mode !== "pointer" || !current.hasPointerMoved || current.toIndex === current.fromIndex) return null;
+		const remainingValues = current.originalValue.filter((optionValue) => optionValue !== current.value);
+		const beforeValue = remainingValues[current.toIndex];
+		if (beforeValue != null) return {
+			value: beforeValue,
+			position: "before"
+		};
+		const afterValue = remainingValues.at(-1);
+		return afterValue == null ? null : {
+			value: afterValue,
+			position: "after"
+		};
+	});
+	const previewStyle = computed(() => {
+		const current = session.value;
+		if (current?.mode !== "pointer" || current.pointerClientY == null || current.pointerOffsetY == null || current.previewX == null || current.previewWidth == null) return null;
+		return {
+			top: `${current.pointerClientY - current.pointerOffsetY}px`,
+			left: `${current.previewX}px`,
+			width: `${current.previewWidth}px`
+		};
+	});
+	watch(() => session.value?.mode === "pointer" ? session.value.value : null, async (cloneValue) => {
+		if (cloneValue == null) return;
+		await nextTick();
+		const host = options.previewHost.value;
+		if (host == null) return;
+		const sourceRow = options.rowElement(cloneValue);
+		if (sourceRow == null) return;
+		const clone = sourceRow.cloneNode(true);
+		host.style.direction = getComputedStyle(sourceRow).direction;
+		clone.style.opacity = "1";
+		clone.setAttribute("aria-hidden", "true");
+		for (const element of [clone, ...clone.querySelectorAll("*")]) {
+			element.removeAttribute("id");
+			element.removeAttribute("aria-describedby");
+			element.removeAttribute("aria-labelledby");
+			element.removeAttribute("name");
+			for (const attribute of [...element.attributes]) if (attribute.name.startsWith("data-transfer-list-")) element.removeAttribute(attribute.name);
+			element.setAttribute("tabindex", "-1");
+		}
+		host.replaceChildren(clone);
+	});
+	watch(() => session.value?.mode === "pointer" ? session.value.value : null, (cloneValue) => {
+		if (cloneValue != null) return;
+		options.previewHost.value?.replaceChildren();
+	});
+	return {
+		session,
+		draggingValue,
+		grabbedValue,
+		pointerPlacement,
+		previewStyle,
+		onHandleClick,
+		onHandleKeydown,
+		onHandlePointerDown,
+		onHandlePointerMove,
+		onHandlePointerUp,
+		onHandlePointerCancel,
+		onHandleLostPointerCapture
+	};
+}
+//#endregion
+//#region src/TransferList/TransferList.vue
+const _hoisted_1$1 = [
+	"role",
+	"aria-labelledby",
+	"aria-describedby"
+];
+const _hoisted_2$1 = { class: "astryx-transfer-list__heading" };
+const _hoisted_3$1 = {
+	key: 0,
+	class: "astryx-transfer-list__controls"
+};
+const _hoisted_4 = { class: "astryx-transfer-list-collection" };
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTransferList",
+	inheritAttrs: false,
+	__name: "TransferList",
+	props: {
+		label: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: false
+		},
+		description: {},
+		options: {},
+		modelValue: { default: () => [] },
+		selectedLabel: {},
+		availableLabel: {},
+		hasSearch: {
+			type: Boolean,
+			default: false
+		},
+		searchLabel: {},
+		searchPlaceholder: {},
+		isReorderable: {
+			type: Boolean,
+			default: true
+		},
+		hasSelectAll: {
+			type: Boolean,
+			default: false
+		},
+		hasClear: {
+			type: Boolean,
+			default: false
+		},
+		selectedEmptyText: {},
+		availableEmptyText: {},
+		noResultsText: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const { t } = useTranslator();
+		const announce = useAnnounce();
+		const labelId = `astryx-transfer-list-label-${useId()}`;
+		const descriptionId = `astryx-transfer-list-description-${useId()}`;
+		const selectedHeadingId = `astryx-transfer-list-selected-${useId()}`;
+		const availableHeadingId = `astryx-transfer-list-available-${useId()}`;
+		const reorderInstructionsId = `astryx-transfer-list-reorder-${useId()}`;
+		const rootRef = useTemplateRef("rootRef");
+		const searchRef = useTemplateRef("searchRef");
+		const previewHost = ref(null);
+		const query = ref("");
+		/** 提交之后 props 才会回来，中间的连点读不到最新值，这里留一份同步的顺序。 */
+		const liveValue = ref([...props.modelValue]);
+		watch(() => props.modelValue, (next) => {
+			liveValue.value = [...next];
+		});
+		function commit(next) {
+			liveValue.value = [...next];
+			emit("update:modelValue", next);
+			emit("change", next);
+		}
+		const selectedLabel = computed(() => props.selectedLabel ?? t("@astryx.transferList.selectedLabel"));
+		const availableLabel = computed(() => props.availableLabel ?? t("@astryx.transferList.availableLabel"));
+		const searchLabel = computed(() => props.searchLabel ?? t("@astryx.transferList.searchLabel", { label: props.label }));
+		const searchPlaceholder = computed(() => props.searchPlaceholder ?? t("@astryx.transferList.searchPlaceholder"));
+		const selectedEmptyText = computed(() => props.selectedEmptyText ?? t("@astryx.transferList.selectedEmpty"));
+		const availableEmptyText = computed(() => props.availableEmptyText ?? t("@astryx.transferList.availableEmpty"));
+		const noResultsText = computed(() => props.noResultsText ?? t("@astryx.transferList.noResults"));
+		const optionByValue = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			for (const option of props.options) map.set(option.value, option);
+			return map;
+		});
+		const normalizedQuery = computed(() => query.value.trim().toLowerCase());
+		const selectedOptions = computed(() => props.modelValue.map((optionValue) => optionByValue.value.get(optionValue)).filter((option) => option != null && matchesQuery(option, normalizedQuery.value)));
+		const availableOptions = computed(() => {
+			const selectedValues = new Set(props.modelValue);
+			return props.options.filter((option) => !selectedValues.has(option.value) && matchesQuery(option, normalizedQuery.value));
+		});
+		const selectedGroups = computed(() => [{
+			group: "",
+			options: selectedOptions.value.map((option, index) => ({
+				option,
+				index
+			}))
+		}]);
+		const availableGroups = computed(() => groupOptions(availableOptions.value).map(([group, options]) => ({
+			group,
+			options: options.map((option) => ({
+				option,
+				index: availableOptions.value.indexOf(option)
+			}))
+		})));
+		function rowElement(value) {
+			const rows = rootRef.value?.querySelectorAll("[data-transfer-list-row]");
+			if (rows == null) return null;
+			for (const row of rows) if (row.dataset.transferListRow === value) return row;
+			return null;
+		}
+		const reorder = useTransferReorder({
+			isReorderable: () => props.isReorderable,
+			currentValue: () => liveValue.value,
+			optionByValue: () => optionByValue.value,
+			rowElement,
+			previewHost,
+			commit,
+			announce,
+			messages: {
+				grabbed: (label, position, total) => t("@astryx.transferList.announceGrabbed", {
+					label,
+					position,
+					total
+				}),
+				moveCancelled: (label) => t("@astryx.transferList.announceMoveCancelled", { label }),
+				dropped: (label, position, total) => t("@astryx.transferList.announceDropped", {
+					label,
+					position,
+					total
+				}),
+				returned: (label, position) => t("@astryx.transferList.announceReturned", {
+					label,
+					position
+				}),
+				movedToPosition: (label, position, total) => t("@astryx.transferList.announceMovedToPosition", {
+					label,
+					position,
+					total
+				})
+			}
+		});
+		/** 转移之后把焦点交回同侧的下一行，没有可聚焦的就退回搜索框或面板本身。 */
+		function focusAfterTransfer(side, index) {
+			const moveFocus = () => {
+				const panel = rootRef.value?.querySelector(`.astryx-transfer-list-panel[data-side="${side}"]`);
+				const actions = panel?.querySelectorAll(`[data-transfer-list-action="${side}"]:not([disabled]):not([aria-disabled="true"])`);
+				if (actions != null && actions.length > 0) actions[Math.min(index, actions.length - 1)]?.focus();
+				else if (props.hasSearch) searchRef.value?.focus();
+				else panel?.focus();
+			};
+			if (typeof requestAnimationFrame === "function") requestAnimationFrame(moveFocus);
+			else setTimeout(moveFocus, 0);
+		}
+		function addOption(option, index) {
+			if (option.isTransferDisabled || liveValue.value.includes(option.value)) return;
+			const nextValue = [...liveValue.value, option.value];
+			commit(nextValue);
+			announce(t("@astryx.transferList.announceAdded", {
+				label: option.label,
+				count: nextValue.length
+			}));
+			focusAfterTransfer("available", index);
+		}
+		function removeOption(option, index) {
+			if (option.isTransferDisabled) return;
+			const nextValue = liveValue.value.filter((item) => item !== option.value);
+			commit(nextValue);
+			announce(t("@astryx.transferList.announceRemoved", {
+				label: option.label,
+				count: nextValue.length
+			}));
+			focusAfterTransfer("selected", index);
+		}
+		function addAll() {
+			const additions = props.options.filter((option) => !option.isTransferDisabled && !liveValue.value.includes(option.value)).map((option) => option.value);
+			if (additions.length === 0) return;
+			commit([...liveValue.value, ...additions]);
+			announce(t("@astryx.transferList.announceBulkAdded", { count: additions.length }));
+		}
+		function clearSelected() {
+			const nextValue = liveValue.value.filter((optionValue) => {
+				const option = optionByValue.value.get(optionValue);
+				return option == null || option.isTransferDisabled;
+			});
+			const removed = liveValue.value.length - nextValue.length;
+			if (removed === 0) return;
+			commit(nextValue);
+			announce(t("@astryx.transferList.announceBulkRemoved", { count: removed }));
+		}
+		function handleSearch(nextQuery) {
+			query.value = nextQuery;
+			const normalized = nextQuery.trim().toLowerCase();
+			if (normalized === "") {
+				announce("");
+				return;
+			}
+			const count = props.options.filter((option) => matchesQuery(option, normalized)).length;
+			announce(t("@astryx.transferList.announceSearchResults", { count }));
+		}
+		const isClearDisabled = computed(() => !props.modelValue.some((optionValue) => !optionByValue.value.get(optionValue)?.isTransferDisabled));
+		const isAddAllDisabled = computed(() => !props.options.some((option) => !option.isTransferDisabled && !props.modelValue.includes(option.value)));
+		const describedBy = computed(() => {
+			const ids = [attrs["aria-describedby"], props.description != null ? descriptionId : void 0].filter(Boolean);
+			return ids.length > 0 ? ids.join(" ") : void 0;
+		});
+		const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => ![
+			"class",
+			"style",
+			"role",
+			"aria-labelledby",
+			"aria-describedby"
+		].includes(key))));
+		const labels = {
+			addOption: (label) => t("@astryx.transferList.addOption", { label }),
+			removeOption: (label) => t("@astryx.transferList.removeOption", { label }),
+			reorderOption: (label) => t("@astryx.transferList.reorderOption", { label }),
+			transferDisabled: (label) => t("@astryx.transferList.transferDisabled", { label }),
+			reorderDisabled: (label) => t("@astryx.transferList.reorderDisabled", { label })
+		};
+		const handlers = {
+			click: reorder.onHandleClick,
+			keydown: reorder.onHandleKeydown,
+			pointerdown: reorder.onHandlePointerDown,
+			pointermove: reorder.onHandlePointerMove,
+			pointerup: reorder.onHandlePointerUp,
+			pointercancel: reorder.onHandlePointerCancel,
+			lostpointercapture: reorder.onHandleLostPointerCapture
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "rootRef",
+				ref: rootRef
+			}, rootAttrs.value, {
+				class: ["astryx-transfer-list", unref(attrs).class],
+				style: unref(attrs).style,
+				role: unref(attrs).role ?? "group",
+				"aria-labelledby": unref(attrs)["aria-labelledby"] ?? labelId,
+				"aria-describedby": describedBy.value
+			}), [
+				createElementVNode("div", _hoisted_2$1, [__props.isLabelHidden ? (openBlock(), createBlock(unref(VisuallyHidden), {
+					key: 0,
+					id: labelId
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+					_: 1
+				})) : (openBlock(), createBlock(unref(Text), {
+					key: 1,
+					id: labelId,
+					type: "label",
+					display: "block"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.label), 1)]),
+					_: 1
+				})), __props.description != null ? (openBlock(), createBlock(unref(Text), {
+					key: 2,
+					id: descriptionId,
+					type: "supporting",
+					display: "block"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.description), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true)]),
+				__props.hasSearch ? (openBlock(), createElementBlock("div", _hoisted_3$1, [createVNode(unref(TextInput), {
+					"model-value": query.value,
+					role: "searchbox",
+					label: searchLabel.value,
+					"is-label-hidden": "",
+					placeholder: searchPlaceholder.value,
+					"start-icon": unref(SearchIcon),
+					"has-clear": "",
+					width: "100%",
+					"control-class": "astryx-transfer-list__search",
+					"onUpdate:modelValue": handleSearch
+				}, null, 8, [
+					"model-value",
+					"label",
+					"placeholder",
+					"start-icon"
+				])])) : createCommentVNode("v-if", true),
+				createVNode(unref(VisuallyHidden), { id: reorderInstructionsId }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("@astryx.transferList.reorderInstructions")), 1)]),
+					_: 1
+				}),
+				createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$9, {
+					side: "selected",
+					"heading-id": selectedHeadingId,
+					label: selectedLabel.value,
+					"show-action": __props.hasClear,
+					"action-label": unref(t)("@astryx.transferList.clear"),
+					"is-action-disabled": isClearDisabled.value,
+					groups: selectedGroups.value,
+					"show-group-headings": false,
+					"ungrouped-label": unref(t)("@astryx.transferList.ungroupedLabel"),
+					"empty-text": normalizedQuery.value === "" ? selectedEmptyText.value : noResultsText.value,
+					"is-reorderable": __props.isReorderable,
+					"dragging-value": unref(reorder).draggingValue.value,
+					"grabbed-value": unref(reorder).grabbedValue.value,
+					"drop-target": unref(reorder).pointerPlacement.value,
+					"reorder-instructions-id": reorderInstructionsId,
+					labels,
+					handlers,
+					onAction: clearSelected,
+					onRemove: removeOption
+				}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
+					name: "option",
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, "option", { option: scope.option })]),
+					key: "0"
+				} : void 0]), 1032, [
+					"label",
+					"show-action",
+					"action-label",
+					"is-action-disabled",
+					"groups",
+					"ungrouped-label",
+					"empty-text",
+					"is-reorderable",
+					"dragging-value",
+					"grabbed-value",
+					"drop-target"
+				]), createVNode(_sfc_main$9, {
+					side: "available",
+					"heading-id": availableHeadingId,
+					label: availableLabel.value,
+					"show-action": __props.hasSelectAll,
+					"action-label": unref(t)("@astryx.transferList.addAll"),
+					"is-action-disabled": isAddAllDisabled.value,
+					groups: availableGroups.value,
+					"show-group-headings": true,
+					"ungrouped-label": unref(t)("@astryx.transferList.ungroupedLabel"),
+					"empty-text": normalizedQuery.value === "" ? availableEmptyText.value : noResultsText.value,
+					"is-reorderable": false,
+					"dragging-value": null,
+					"grabbed-value": null,
+					"drop-target": null,
+					"reorder-instructions-id": reorderInstructionsId,
+					labels,
+					handlers,
+					onAction: addAll,
+					onAdd: addOption
+				}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
+					name: "option",
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, "option", { option: scope.option })]),
+					key: "0"
+				} : void 0]), 1032, [
+					"label",
+					"show-action",
+					"action-label",
+					"is-action-disabled",
+					"groups",
+					"ungrouped-label",
+					"empty-text"
+				])]),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [unref(reorder).previewStyle.value != null ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "previewHost",
+					ref: previewHost,
+					class: "astryx-transfer-list-drag-preview",
+					"data-transfer-list-drag-preview": "",
+					"aria-hidden": "true",
+					style: normalizeStyle(unref(reorder).previewStyle.value)
+				}, null, 4)) : createCommentVNode("v-if", true)]))
+			], 16, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/TransferList/TransferListSelector.vue
+const _hoisted_1 = ["aria-busy", "data-busy"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = {
+	key: 0,
+	class: "astryx-transfer-list-selector__footer"
+};
+const DEFAULT_SELECTOR_WIDTH = "min(41rem, calc(100vw - 32px))";
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTransferListSelector",
+	__name: "TransferListSelector",
+	props: {
+		label: {},
+		modelValue: { default: () => [] },
+		options: {},
+		description: {},
+		isLabelHidden: { type: Boolean },
+		isOptional: { type: Boolean },
+		isRequired: { type: Boolean },
+		isDisabled: { type: Boolean },
+		isLoading: { type: Boolean },
+		labelTooltip: {},
+		status: {},
+		statusVariant: {},
+		size: {},
+		width: {},
+		placement: {},
+		triggerLabel: {},
+		selectedLabel: {},
+		availableLabel: {},
+		hasSearch: { type: Boolean },
+		searchLabel: {},
+		searchPlaceholder: {},
+		isReorderable: {
+			type: Boolean,
+			default: void 0
+		},
+		hasSelectAll: { type: Boolean },
+		hasClear: { type: Boolean },
+		selectedEmptyText: {},
+		availableEmptyText: {},
+		noResultsText: {},
+		commitBehavior: { default: "immediate" },
+		applyLabel: {},
+		cancelLabel: {}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"changeAction",
+		"openChange"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/** 弹层和字段的默认宽度：留出 32px 的视口空隙，再宽不超过 41rem。 */
+		const { t } = useTranslator();
+		const applyLabel = computed(() => props.applyLabel ?? t("@astryx.transferListSelector.apply"));
+		const cancelLabel = computed(() => props.cancelLabel ?? t("@astryx.transferListSelector.cancel"));
+		const triggerLabel = computed(() => props.triggerLabel ?? t("@astryx.transferListSelector.triggerLabel", { count: props.modelValue.length }));
+		const resolvedWidth = computed(() => typeof props.width === "number" ? `${props.width}px` : props.width ?? DEFAULT_SELECTOR_WIDTH);
+		/** 弹层内容和字段同宽、去掉内边距，两栏贴到弹层边上；高度留出视口空隙，自己不滚。 */
+		const contentStyle = computed(() => ({
+			width: resolvedWidth.value,
+			maxWidth: resolvedWidth.value,
+			maxHeight: "calc(100vh - 32px)",
+			padding: "0",
+			overflow: "hidden",
+			borderRadius: "inherit"
+		}));
+		/** 分段提交时先放在这里，按 Apply 才真正提交。 */
+		const draftValue = ref([...props.modelValue]);
+		const draftSource = {
+			value: [...props.modelValue],
+			commitBehavior: props.commitBehavior
+		};
+		const isOpen = ref(false);
+		function areOrderedValuesEqual(first, second) {
+			return first.length === second.length && first.every((item, index) => item === second[index]);
+		}
+		function resetDraft() {
+			draftValue.value = [...props.modelValue];
+		}
+		watch(() => [props.modelValue, props.commitBehavior], () => {
+			if (!areOrderedValuesEqual(draftSource.value, props.modelValue) || draftSource.commitBehavior !== props.commitBehavior) {
+				draftSource.value = [...props.modelValue];
+				draftSource.commitBehavior = props.commitBehavior;
+				resetDraft();
+			}
+		}, {
+			flush: "sync",
+			deep: false
+		});
+		function onOpenChange(next) {
+			if (isOpen.value && !next) resetDraft();
+			isOpen.value = next;
+			emit("openChange", next);
+		}
+		function handleTransferChange(nextValue, commit, isBusy) {
+			if (isBusy) return;
+			if (props.commitBehavior === "staged") {
+				draftValue.value = [...nextValue];
+				return;
+			}
+			commit([...nextValue]);
+		}
+		function applyStaged(commit, close) {
+			if (!areOrderedValuesEqual(draftValue.value, props.modelValue)) commit([...draftValue.value]);
+			close();
+		}
+		function cancelStaged(close) {
+			resetDraft();
+			close();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ComplexSelector), {
+				label: __props.label,
+				"model-value": __props.modelValue,
+				"trigger-label": triggerLabel.value,
+				description: __props.description,
+				"is-label-hidden": __props.isLabelHidden,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				"is-disabled": __props.isDisabled,
+				"is-loading": __props.isLoading,
+				"label-tooltip": __props.labelTooltip,
+				status: __props.status,
+				"status-variant": __props.statusVariant,
+				size: __props.size,
+				width: resolvedWidth.value,
+				placement: __props.placement,
+				"popup-width": resolvedWidth.value,
+				"content-style": contentStyle.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
+				onChange: _cache[1] || (_cache[1] = ($event) => emit("change", $event)),
+				onChangeAction: _cache[2] || (_cache[2] = ($event) => emit("changeAction", $event)),
+				onOpenChange
+			}, {
+				default: withCtx(({ value: appliedValue, commit, close, state }) => [createElementVNode("div", {
+					"aria-busy": state.isBusy || void 0,
+					"data-busy": state.isBusy || void 0,
+					class: "astryx-transfer-list-selector__surface"
+				}, [createElementVNode("fieldset", {
+					class: "astryx-transfer-list-selector__fieldset",
+					disabled: __props.isDisabled
+				}, [createVNode(_sfc_main$7, {
+					label: __props.label,
+					"is-label-hidden": "",
+					options: __props.options,
+					"model-value": __props.commitBehavior === "staged" ? draftValue.value : appliedValue,
+					"selected-label": __props.selectedLabel,
+					"available-label": __props.availableLabel,
+					"has-search": __props.hasSearch,
+					"search-label": __props.searchLabel,
+					"search-placeholder": __props.searchPlaceholder,
+					"is-reorderable": __props.isReorderable,
+					"has-select-all": __props.hasSelectAll,
+					"has-clear": __props.hasClear,
+					"selected-empty-text": __props.selectedEmptyText,
+					"available-empty-text": __props.availableEmptyText,
+					"no-results-text": __props.noResultsText,
+					onChange: ($event) => handleTransferChange($event, commit, state.isBusy)
+				}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
+					name: "option",
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, "option", { option: scope.option })]),
+					key: "0"
+				} : void 0]), 1032, [
+					"label",
+					"options",
+					"model-value",
+					"selected-label",
+					"available-label",
+					"has-search",
+					"search-label",
+					"search-placeholder",
+					"is-reorderable",
+					"has-select-all",
+					"has-clear",
+					"selected-empty-text",
+					"available-empty-text",
+					"no-results-text",
+					"onChange"
+				])], 8, _hoisted_2), __props.commitBehavior === "staged" ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(Button), {
+					label: cancelLabel.value,
+					variant: "ghost",
+					size: "sm",
+					onClick: ($event) => cancelStaged(close)
+				}, null, 8, ["label", "onClick"]), createVNode(unref(Button), {
+					label: applyLabel.value,
+					variant: "primary",
+					size: "sm",
+					"is-disabled": __props.isDisabled || state.isBusy,
+					"is-loading": state.isBusy,
+					onClick: ($event) => applyStaged(commit, close)
+				}, null, 8, [
+					"label",
+					"is-disabled",
+					"is-loading",
+					"onClick"
+				])])) : createCommentVNode("v-if", true)], 8, _hoisted_1)]),
+				_: 3
+			}, 8, [
+				"label",
+				"model-value",
+				"trigger-label",
+				"description",
+				"is-label-hidden",
+				"is-optional",
+				"is-required",
+				"is-disabled",
+				"is-loading",
+				"label-tooltip",
+				"status",
+				"status-variant",
+				"size",
+				"width",
+				"placement",
+				"popup-width",
+				"content-style"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as CircularProgress, _sfc_main$1 as InfoTip, _sfc_main$2 as ListInput, _sfc_main$3 as LogStream, _sfc_main$4 as MobileTokenizer, _sfc_main$5 as SVGIcon, _sfc_main$6 as Stat, _sfc_main$7 as TransferList, _sfc_main$8 as TransferListSelector, addCurvature, adjustTension, applyPersonality, bellIcon, calendarIcon, checkIcon, eyeIcon, folderIcon, heartIcon, homeIcon, lockIcon, mailIcon, menuIcon, roundCorners, searchIcon, settingsIcon, shieldIcon, starIcon, starterIcons, xIcon, xifBell, xifBellOverride, xifCheck, xifExamples, xifFile, xifHome, xifShield, xifStar };