@qw-ui/core 0.3.0-next.8 → 0.3.0

package/dist/tabs/tabs.d.ts

@@ -1,4 +1,5 @@
-import type { Props as ZagTabsProps } from "@zag-js/tabs";
+import { type Api as ZagTabsApi, type Props as ZagTabsProps, type Service as ZagTabsService } from "@zag-js/tabs";
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
 /**
  * Tabs 契约 — 原型 B（有状态），core 包裹 zag.js tabs machine。
  * 行为 props 进 createTabsProps → zag context；视觉 props（level/variant/size）
@@ -46,13 +47,16 @@ export interface QwTabsProps {
     /** 字号，默认 "16"。仅 level=primary 生效。 */
     size?: TabsSize;
 }
-/**
- * 直接 re-export zag tabs 的 machine 与 connect —— 不包一层。
- * 用 re-export 保留原始可移植类型 (避免 TS2742)。
- */
-export { machine as tabsMachine, connect } from "@zag-js/tabs";
-/** rebrand zag 的 TabsApi 类型对外。 */
-export type { Api as QwTabsApi } from "@zag-js/tabs";
+/** The Zag machine remains the sole selected-value/focus owner. */
+export { machine as tabsMachine } from "@zag-js/tabs";
+/** Shared list-props transport; omitted item information keeps the original getter. */
+export type QwTabsApi<T extends PropTypes = PropTypes> = Omit<ZagTabsApi<T>, "getListProps"> & {
+    getListProps(items?: readonly {
+        disabled?: boolean;
+    }[]): T["element"];
+};
+/** Nonempty all-disabled lists retain native keyboard scrolling without activating a trigger. */
+export declare function connect<T extends PropTypes>(service: ZagTabsService, normalize: NormalizeProps<T>): QwTabsApi<T>;
 /**
  * 把 QwTabsProps 的行为 props 转成 zag tabs machine 的 props (默认值收口 + 命名 rebrand)。
  * 视觉 props（level/variant/size）不出现在返回值中——它们是适配层 data-* 属性。

package/dist/tag/index.js

@@ -1,6 +1,7 @@
+import { createMachine } from "@zag-js/core";
 //#region src/tag/tag.ts
 /**
-* Tag 契约 — 原型 A（无状态），core 无 machine，只承载双栈共享的类型契约。
+* Tag 契约 — 原型 A（无状态），Core 承载三栈共享的解析、属性和颜色契约。
 * 渲染契约：`data-scope="tag"`，`data-part="root"`；
 * `data-size` / `data-variant` / `data-bold` 摊平枚举。
 *
@@ -16,7 +17,127 @@ const TAG_SIZES = [
 const TAG_VARIANTS = ["solid", "outlined"];
 /** Tag 各渲染部位全集（data-part 取值）。 */
 const TAG_PARTS = ["root"];
+/** Resolve runtime enums while preserving the existing caller color domain. */
+function resolveTagState(props = {}) {
+	return {
+		size: TAG_SIZES.includes(props.size) ? props.size : "medium",
+		variant: TAG_VARIANTS.includes(props.variant) ? props.variant : "solid",
+		bold: props.bold === true,
+		bgcolor: props.bgcolor,
+		textcolor: props.textcolor,
+		borderColor: props.borderColor
+	};
+}
+/** Plain-text root attributes; no interactive or live-region semantics. */
+function getTagRootProps(state) {
+	return {
+		"data-scope": "tag",
+		"data-part": "root",
+		"data-size": state.size,
+		"data-variant": state.variant,
+		"data-bold": state.bold ? "true" : void 0
+	};
+}
+/** Existing color overrides; caller style is applied after these values. */
+function getTagStyle(state) {
+	const style = {};
+	if (state.bgcolor) style.background = state.bgcolor;
+	if (state.textcolor) style.color = state.textcolor;
+	if (state.variant === "outlined" && state.borderColor) style.borderColor = state.borderColor;
+	return style;
+}
+function createTagProps(props = {}) {
+	if ((props.selectable || props.closable) && (typeof props.id !== "string" || !props.id.trim())) throw new TypeError("Interactive Tag requires a stable nonempty id");
+	return { ...props };
+}
+const tagMachine = createMachine({
+	props: ({ props }) => createTagProps(props),
+	initialState: () => "idle",
+	context: ({ bindable, prop }) => ({
+		selected: bindable(() => ({
+			defaultValue: prop("defaultSelected") ?? false,
+			value: prop("selected"),
+			onChange: (value) => prop("onSelectedChange")?.(value)
+		})),
+		visible: bindable(() => ({
+			defaultValue: prop("defaultVisible") ?? true,
+			value: prop("visible"),
+			onChange: (value) => prop("onVisibleChange")?.(value)
+		}))
+	}),
+	states: { idle: {} }
+});
+/** Core owns the change requests, disabled guards, notification order and accepted-close focus. */
+function connectTag(service, normalize) {
+	const { prop, context, scope } = service;
+	const selected = context.get("selected"), visible = context.get("visible");
+	const selectable = prop("selectable") === true, closable = prop("closable") === true;
+	const rootId = `tag:${scope.id}:root`, labelId = `tag:${scope.id}:label`;
+	return {
+		selected,
+		visible,
+		selectable,
+		closable,
+		getRootProps() {
+			return normalize.element({
+				...getTagRootProps(resolveTagState({
+					size: prop("size"),
+					variant: prop("variant"),
+					bold: prop("bold")
+				})),
+				...selectable || closable ? {
+					id: rootId,
+					"data-interactive": true,
+					"data-selected": selected || void 0,
+					"data-disabled": prop("disabled") || void 0
+				} : {},
+				...!visible ? { hidden: true } : {}
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				"data-scope": "tag",
+				"data-part": "label",
+				id: labelId
+			});
+		},
+		getSelectionProps() {
+			return normalize.button({
+				"data-scope": "tag",
+				"data-part": "selection",
+				type: "button",
+				disabled: prop("disabled"),
+				"aria-pressed": selected,
+				"aria-label": prop("accessibleLabel"),
+				"aria-labelledby": prop("accessibleLabel") ? void 0 : labelId,
+				onClick(event) {
+					if (!selectable || prop("disabled") || !context.get("visible") || event?.currentTarget.matches(":disabled")) return;
+					context.set("selected", !context.get("selected"));
+				}
+			});
+		},
+		getCloseProps() {
+			return normalize.button({
+				"data-scope": "tag",
+				"data-part": "close",
+				type: "button",
+				disabled: prop("disabled"),
+				"aria-label": prop("closeLabel") ?? "Close tag",
+				onClick(event) {
+					if (!closable || prop("disabled") || !context.get("visible") || event?.currentTarget.matches(":disabled")) return;
+					const root = event?.currentTarget.closest("[data-scope=\"tag\"][data-part=\"root\"]") ?? scope.getById(rootId), focused = root?.contains(root.ownerDocument.activeElement);
+					context.set("visible", false);
+					prop("onClose")?.();
+					queueMicrotask(() => {
+						const target = prop("focusAfterCloseId");
+						if (!context.get("visible") && focused && target) scope.getById(target)?.focus({ preventScroll: true });
+					});
+				}
+			});
+		}
+	};
+}
 //#endregion
-export { TAG_PARTS, TAG_SIZES, TAG_VARIANTS };
+export { TAG_PARTS, TAG_SIZES, TAG_VARIANTS, connectTag, createTagProps, getTagRootProps, getTagStyle, resolveTagState, tagMachine };
 
 //# sourceMappingURL=index.js.map

package/dist/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/tag/tag.ts"],"sourcesContent":["/**\n * Tag 契约 — 原型 A（无状态），core 无 machine，只承载双栈共享的类型契约。\n * 渲染契约：`data-scope=\"tag\"`，`data-part=\"root\"`；\n * `data-size` / `data-variant` / `data-bold` 摊平枚举。\n *\n * 尺寸 / 变体 / 部位词表以运行时常量数组为唯一事实源（类型从常量推导），__test__ 直接锁死。\n */\n\n/** 尺寸全集：small（小）/ medium（中，默认）/ large（大）。 */\nexport const TAG_SIZES = [\"small\", \"medium\", \"large\"] as const;\n\n/** 变体全集：solid 填充（默认）/ outlined 框线。 */\nexport const TAG_VARIANTS = [\"solid\", \"outlined\"] as const;\n\n/** Tag 各渲染部位全集（data-part 取值）。 */\nexport const TAG_PARTS = [\"root\"] as const;\n\nexport type TagSize = (typeof TAG_SIZES)[number];\nexport type TagVariant = (typeof TAG_VARIANTS)[number];\nexport type TagPart = (typeof TAG_PARTS)[number];\n\n/**\n * QwTagProps — 双栈共享的行为契约（全字段可选）。\n * 颜色完全由业务方传入，组件不内置任何主题。\n */\nexport interface QwTagProps {\n  /** 尺寸，默认 medium。 */\n  size?: TagSize;\n  /** 变体，默认 solid。 */\n  variant?: TagVariant;\n  /** 文字是否加粗，默认 false。 */\n  bold?: boolean;\n  /** 背景色，未传入时使用默认中性灰。 */\n  bgcolor?: string;\n  /** 文字色，未传入时使用默认灰。 */\n  textcolor?: string;\n  /** 边框色，仅在 variant=\"outlined\" 时生效；未传入时使用默认灰。 */\n  borderColor?: string;\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,YAAY;CAAC;CAAS;CAAU;AAAO;;AAGpD,MAAa,eAAe,CAAC,SAAS,UAAU;;AAGhD,MAAa,YAAY,CAAC,MAAM"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tag/tag.ts"],"sourcesContent":["import { createMachine, type MachineSchema, type Service } from \"@zag-js/core\";\nimport type { PropTypes, NormalizeProps, JSX } from \"@zag-js/types\";\n\n/**\n * Tag 契约 — 原型 A（无状态），Core 承载三栈共享的解析、属性和颜色契约。\n * 渲染契约：`data-scope=\"tag\"`，`data-part=\"root\"`；\n * `data-size` / `data-variant` / `data-bold` 摊平枚举。\n *\n * 尺寸 / 变体 / 部位词表以运行时常量数组为唯一事实源（类型从常量推导），__test__ 直接锁死。\n */\n\n/** 尺寸全集：small（小）/ medium（中，默认）/ large（大）。 */\nexport const TAG_SIZES = [\"small\", \"medium\", \"large\"] as const;\n\n/** 变体全集：solid 填充（默认）/ outlined 框线。 */\nexport const TAG_VARIANTS = [\"solid\", \"outlined\"] as const;\n\n/** Tag 各渲染部位全集（data-part 取值）。 */\nexport const TAG_PARTS = [\"root\"] as const;\n\nexport type TagSize = (typeof TAG_SIZES)[number];\nexport type TagVariant = (typeof TAG_VARIANTS)[number];\nexport type TagPart = (typeof TAG_PARTS)[number];\n\n/**\n * QwTagProps — 双栈共享的行为契约（全字段可选）。\n * 颜色完全由业务方传入，组件不内置任何主题。\n */\nexport interface QwTagProps {\n  id?: string;\n  /** Beta: optional selection and independent close controls. */\n  selectable?: boolean;\n  closable?: boolean;\n  disabled?: boolean;\n  selected?: boolean;\n  defaultSelected?: boolean;\n  onSelectedChange?: (selected: boolean) => void;\n  visible?: boolean;\n  defaultVisible?: boolean;\n  onVisibleChange?: (visible: boolean) => void;\n  /** Notifies after the visibility request; owner may reject controlled close. */\n  onClose?: () => void;\n  accessibleLabel?: string;\n  closeLabel?: string;\n  /** Focus destination after accepted close when focus was inside this tag. */\n  focusAfterCloseId?: string;\n  /** 尺寸，默认 medium。 */\n  size?: TagSize;\n  /** 变体，默认 solid。 */\n  variant?: TagVariant;\n  /** 文字是否加粗，默认 false。 */\n  bold?: boolean;\n  /** 背景色，未传入时使用默认中性灰。 */\n  bgcolor?: string;\n  /** 文字色，未传入时使用默认灰。 */\n  textcolor?: string;\n  /** 边框色，仅在 variant=\"outlined\" 时生效；未传入时使用默认灰。 */\n  borderColor?: string;\n}\n\n/** Normalized passive Tag contract shared by every framework. */\nexport interface TagState {\n  readonly size: TagSize;\n  readonly variant: TagVariant;\n  readonly bold: boolean;\n  readonly bgcolor?: string;\n  readonly textcolor?: string;\n  readonly borderColor?: string;\n}\n\n/** Resolve runtime enums while preserving the existing caller color domain. */\nexport function resolveTagState(props: QwTagProps = {}): TagState {\n  return {\n    size: TAG_SIZES.includes(props.size as TagSize) ? props.size! : \"medium\",\n    variant: TAG_VARIANTS.includes(props.variant as TagVariant) ? props.variant! : \"solid\",\n    bold: props.bold === true,\n    bgcolor: props.bgcolor,\n    textcolor: props.textcolor,\n    borderColor: props.borderColor,\n  };\n}\n\n/** Plain-text root attributes; no interactive or live-region semantics. */\nexport function getTagRootProps(state: TagState) {\n  return {\n    \"data-scope\": \"tag\" as const,\n    \"data-part\": \"root\" as const,\n    \"data-size\": state.size,\n    \"data-variant\": state.variant,\n    \"data-bold\": state.bold ? \"true\" : undefined,\n  };\n}\n\n/** Existing color overrides; caller style is applied after these values. */\nexport function getTagStyle(state: TagState): Record<string, string> {\n  const style: Record<string, string> = {};\n  if (state.bgcolor) style.background = state.bgcolor;\n  if (state.textcolor) style.color = state.textcolor;\n  if (state.variant === \"outlined\" && state.borderColor) style.borderColor = state.borderColor;\n  return style;\n}\n\n/** Shared optional interaction props; old resolveTagState/getTagRootProps stay passive. */\nexport interface TagSchema extends MachineSchema {\n  props: QwTagProps;\n  context: { selected: boolean; visible: boolean };\n  state: \"idle\";\n  event: { type: \"NOP\" };\n}\nexport function createTagProps(props: QwTagProps = {}): QwTagProps {\n  if ((props.selectable || props.closable) && (typeof props.id !== \"string\" || !props.id.trim())) throw new TypeError(\"Interactive Tag requires a stable nonempty id\");\n  return { ...props };\n}\nexport const tagMachine = createMachine<TagSchema>({\n  props: ({ props }) => createTagProps(props),\n  initialState: () => \"idle\",\n  context: ({ bindable, prop }) => ({\n    selected: bindable(() => ({ defaultValue: prop(\"defaultSelected\") ?? false, value: prop(\"selected\"), onChange: value => prop(\"onSelectedChange\")?.(value) })),\n    visible: bindable(() => ({ defaultValue: prop(\"defaultVisible\") ?? true, value: prop(\"visible\"), onChange: value => prop(\"onVisibleChange\")?.(value) })),\n  }),\n  states: { idle: {} },\n});\nexport interface TagApi<T extends PropTypes = PropTypes> {\n  selected: boolean;\n  visible: boolean;\n  selectable: boolean;\n  closable: boolean;\n  getRootProps(): T[\"element\"];\n  getLabelProps(): T[\"element\"];\n  getSelectionProps(): T[\"button\"];\n  getCloseProps(): T[\"button\"];\n}\n/** Core owns the change requests, disabled guards, notification order and accepted-close focus. */\nexport function connectTag<T extends PropTypes>(service: Service<TagSchema>, normalize: NormalizeProps<T>): TagApi<T> {\n  const { prop, context, scope } = service;\n  const selected = context.get(\"selected\"), visible = context.get(\"visible\");\n  const selectable = prop(\"selectable\") === true, closable = prop(\"closable\") === true;\n  const rootId = `tag:${scope.id}:root`, labelId = `tag:${scope.id}:label`;\n  return {\n    selected, visible, selectable, closable,\n    getRootProps() {\n      return normalize.element({\n        ...getTagRootProps(resolveTagState({ size: prop(\"size\"), variant: prop(\"variant\"), bold: prop(\"bold\") })),\n        ...(selectable || closable ? { id: rootId, \"data-interactive\": true, \"data-selected\": selected || undefined, \"data-disabled\": prop(\"disabled\") || undefined } : {}),\n        ...(!visible ? { hidden: true } : {}),\n      });\n    },\n    getLabelProps() { return normalize.element({ \"data-scope\": \"tag\", \"data-part\": \"label\", id: labelId }); },\n    getSelectionProps() {\n      return normalize.button({\n        \"data-scope\": \"tag\", \"data-part\": \"selection\", type: \"button\", disabled: prop(\"disabled\"), \"aria-pressed\": selected,\n        \"aria-label\": prop(\"accessibleLabel\"), \"aria-labelledby\": prop(\"accessibleLabel\") ? undefined : labelId,\n        onClick(event?: JSX.MouseEvent<HTMLButtonElement>) {\n          if (!selectable || prop(\"disabled\") || !context.get(\"visible\") || event?.currentTarget.matches(\":disabled\")) return;\n          context.set(\"selected\", !context.get(\"selected\"));\n        },\n      });\n    },\n    getCloseProps() {\n      return normalize.button({\n        \"data-scope\": \"tag\", \"data-part\": \"close\", type: \"button\", disabled: prop(\"disabled\"), \"aria-label\": prop(\"closeLabel\") ?? \"Close tag\",\n        onClick(event?: JSX.MouseEvent<HTMLButtonElement>) {\n          if (!closable || prop(\"disabled\") || !context.get(\"visible\") || event?.currentTarget.matches(\":disabled\")) return;\n          const root = event?.currentTarget.closest<HTMLElement>('[data-scope=\"tag\"][data-part=\"root\"]') ?? scope.getById(rootId), focused = root?.contains(root.ownerDocument.activeElement);\n          context.set(\"visible\", false);\n          prop(\"onClose\")?.();\n          queueMicrotask(() => {\n            const target = prop(\"focusAfterCloseId\");\n            if (!context.get(\"visible\") && focused && target) scope.getById<HTMLElement>(target)?.focus({ preventScroll: true });\n          });\n        },\n      });\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/tag/tag.d.ts

@@ -1,5 +1,7 @@
+import { type MachineSchema, type Service } from "@zag-js/core";
+import type { PropTypes, NormalizeProps } from "@zag-js/types";
 /**
- * Tag 契约 — 原型 A（无状态），core 无 machine，只承载双栈共享的类型契约。
+ * Tag 契约 — 原型 A（无状态），Core 承载三栈共享的解析、属性和颜色契约。
  * 渲染契约：`data-scope="tag"`，`data-part="root"`；
  * `data-size` / `data-variant` / `data-bold` 摊平枚举。
  *
@@ -19,6 +21,23 @@ export type TagPart = (typeof TAG_PARTS)[number];
  * 颜色完全由业务方传入，组件不内置任何主题。
  */
 export interface QwTagProps {
+    id?: string;
+    /** Beta: optional selection and independent close controls. */
+    selectable?: boolean;
+    closable?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    /** Notifies after the visibility request; owner may reject controlled close. */
+    onClose?: () => void;
+    accessibleLabel?: string;
+    closeLabel?: string;
+    /** Focus destination after accepted close when focus was inside this tag. */
+    focusAfterCloseId?: string;
     /** 尺寸，默认 medium。 */
     size?: TagSize;
     /** 变体，默认 solid。 */
@@ -32,3 +51,50 @@ export interface QwTagProps {
     /** 边框色，仅在 variant="outlined" 时生效；未传入时使用默认灰。 */
     borderColor?: string;
 }
+/** Normalized passive Tag contract shared by every framework. */
+export interface TagState {
+    readonly size: TagSize;
+    readonly variant: TagVariant;
+    readonly bold: boolean;
+    readonly bgcolor?: string;
+    readonly textcolor?: string;
+    readonly borderColor?: string;
+}
+/** Resolve runtime enums while preserving the existing caller color domain. */
+export declare function resolveTagState(props?: QwTagProps): TagState;
+/** Plain-text root attributes; no interactive or live-region semantics. */
+export declare function getTagRootProps(state: TagState): {
+    "data-scope": "tag";
+    "data-part": "root";
+    "data-size": "large" | "medium" | "small";
+    "data-variant": "outlined" | "solid";
+    "data-bold": string | undefined;
+};
+/** Existing color overrides; caller style is applied after these values. */
+export declare function getTagStyle(state: TagState): Record<string, string>;
+/** Shared optional interaction props; old resolveTagState/getTagRootProps stay passive. */
+export interface TagSchema extends MachineSchema {
+    props: QwTagProps;
+    context: {
+        selected: boolean;
+        visible: boolean;
+    };
+    state: "idle";
+    event: {
+        type: "NOP";
+    };
+}
+export declare function createTagProps(props?: QwTagProps): QwTagProps;
+export declare const tagMachine: import("@zag-js/core").Machine<TagSchema>;
+export interface TagApi<T extends PropTypes = PropTypes> {
+    selected: boolean;
+    visible: boolean;
+    selectable: boolean;
+    closable: boolean;
+    getRootProps(): T["element"];
+    getLabelProps(): T["element"];
+    getSelectionProps(): T["button"];
+    getCloseProps(): T["button"];
+}
+/** Core owns the change requests, disabled guards, notification order and accepted-close focus. */
+export declare function connectTag<T extends PropTypes>(service: Service<TagSchema>, normalize: NormalizeProps<T>): TagApi<T>;

package/dist/textarea/index.d.ts

@@ -1 +1,3 @@
 export * from "./textarea.js";
+export { TextAreaClipboardReadError, attachTextAreaPlatform } from "./platform.js";
+export type { TextAreaPlatformHost } from "./platform.js";

package/dist/textarea/index.js

@@ -1,242 +1,2 @@
-import { createMachine } from "@zag-js/core";
-import { compact } from "@zag-js/utils";
-//#region src/textarea/textarea.ts
-/**
-* TextArea zag.js machine。
-* 所有交互逻辑唯一来源：value、focus、clear、pasteRecognize。
-*/
-const machine = createMachine({
-	props({ props }) {
-		return {
-			defaultValue: "",
-			disabled: false,
-			readOnly: false,
-			showActions: true,
-			autoSize: false,
-			rows: 4,
-			...props
-		};
-	},
-	initialState() {
-		return "idle";
-	},
-	context({ bindable, prop }) {
-		return {
-			value: bindable(() => {
-				const controlledValue = prop("value");
-				return {
-					defaultValue: prop("defaultValue") ?? "",
-					sync: true,
-					...controlledValue !== void 0 ? { value: controlledValue } : {},
-					onChange(value, prev) {
-						if (value !== prev) prop("onChange")?.(value);
-					}
-				};
-			}),
-			focused: bindable(() => ({ defaultValue: false }))
-		};
-	},
-	computed: {
-		charCount({ context }) {
-			return context.get("value").length;
-		},
-		hasMaxLength({ prop }) {
-			const max = prop("maxLength");
-			return max != null && max > 0;
-		},
-		showClear({ context, prop }) {
-			return context.get("value").length > 0 && !prop("disabled") && !prop("readOnly");
-		}
-	},
-	watch({ track, prop, context }) {
-		track([() => prop("value")], () => {
-			const external = prop("value");
-			if (external !== void 0 && external !== context.get("value")) context.set("value", external);
-		});
-	},
-	states: { idle: { on: {
-		"VALUE.SET": { actions: ["setValue"] },
-		"VALUE.CLEAR": { actions: ["clearValue", "invokeOnClear"] },
-		"FOCUS.SET": { actions: ["setFocused"] },
-		PASTE_RECOGNIZE: { actions: ["pasteValue", "invokeOnPasteRecognize"] }
-	} } },
-	implementations: { actions: {
-		setValue({ context, event, prop }) {
-			if (event.type === "VALUE.SET") {
-				const maxLength = prop("maxLength") ?? 0;
-				let next = event.value;
-				if (maxLength > 0 && next.length > maxLength) next = next.slice(0, maxLength);
-				context.set("value", next);
-			}
-		},
-		clearValue({ context }) {
-			context.set("value", "");
-		},
-		setFocused({ context, event, prop }) {
-			if (event.type === "FOCUS.SET") {
-				const next = event.focused;
-				const prev = context.get("focused");
-				context.set("focused", next);
-				if (next && !prev) prop("onFocus")?.();
-				if (!next && prev) prop("onBlur")?.();
-			}
-		},
-		invokeOnClear({ prop }) {
-			prop("onClear")?.();
-		},
-		pasteValue({ context, event, prop }) {
-			if (event.type === "PASTE_RECOGNIZE" && event.value !== void 0) {
-				const maxLength = prop("maxLength") ?? 0;
-				let next = event.value;
-				if (maxLength > 0 && next.length > maxLength) next = next.slice(0, maxLength);
-				context.set("value", next);
-			}
-		},
-		invokeOnPasteRecognize({ prop, event }) {
-			if (event.type === "PASTE_RECOGNIZE") prop("onPasteRecognize")?.(event.value ?? "");
-		},
-		invokeOnFocus() {},
-		invokeOnBlur() {}
-	} }
-});
-/**
-* connect：把 service 接成业务友好的 prop-getter。
-* 适配层只需调用 connect(service, normalizeProps)。
-*/
-function connect(service, normalizeProps) {
-	const { context, computed, prop, send } = service;
-	const value = context.get("value");
-	const focused = context.get("focused");
-	const charCount = computed("charCount");
-	const hasMaxLength = computed("hasMaxLength");
-	const showClear = computed("showClear");
-	const disabled = !!prop("disabled");
-	const readOnly = !!prop("readOnly");
-	const showActions = prop("showActions") ?? true;
-	const autoSize = !!prop("autoSize");
-	const maxLength = prop("maxLength");
-	const rows = prop("rows") ?? 4;
-	const isEmpty = value.length === 0;
-	return {
-		value,
-		focused,
-		charCount,
-		hasMaxLength,
-		showClear,
-		clear() {
-			send({ type: "VALUE.CLEAR" });
-		},
-		pasteRecognize(value) {
-			send({
-				type: "PASTE_RECOGNIZE",
-				value
-			});
-		},
-		getRootProps() {
-			return normalizeProps.element(compact({
-				"data-scope": "textarea",
-				"data-part": "root",
-				"data-focused": focused ? "true" : void 0,
-				"data-disabled": disabled ? "true" : void 0,
-				"data-readonly": readOnly ? "true" : void 0,
-				"data-show-actions": showActions ? "true" : "false",
-				"data-auto-size": autoSize ? "true" : void 0,
-				"data-empty": isEmpty ? "true" : "false"
-			}));
-		},
-		getTextareaProps() {
-			return normalizeProps.textarea(compact({
-				"data-scope": "textarea",
-				"data-part": "textarea",
-				value,
-				placeholder: prop("placeholder"),
-				disabled,
-				readOnly,
-				maxLength: maxLength && maxLength > 0 ? maxLength : void 0,
-				rows,
-				name: prop("name"),
-				"aria-disabled": disabled ? "true" : void 0,
-				"aria-readonly": readOnly ? "true" : void 0,
-				onFocus() {
-					send({
-						type: "FOCUS.SET",
-						focused: true
-					});
-				},
-				onBlur() {
-					send({
-						type: "FOCUS.SET",
-						focused: false
-					});
-				},
-				onChange(event) {
-					const target = event.target;
-					const isComposing = !!event.nativeEvent?.isComposing;
-					let next = target.value;
-					if (!isComposing) {
-						const maxLen = prop("maxLength") ?? 0;
-						if (maxLen > 0 && next.length > maxLen) next = next.slice(0, maxLen);
-					}
-					context.set("value", next);
-				}
-			}));
-		},
-		getBottomBarProps() {
-			return normalizeProps.element(compact({
-				"data-scope": "textarea",
-				"data-part": "bottom-bar",
-				"data-show-actions": showActions ? "true" : "false"
-			}));
-		},
-		getCounterProps() {
-			return normalizeProps.element(compact({
-				"data-scope": "textarea",
-				"data-part": "counter",
-				"data-has-max-length": hasMaxLength ? "true" : void 0,
-				"aria-live": "polite"
-			}));
-		},
-		getClearButtonProps() {
-			return normalizeProps.button(compact({
-				"data-scope": "textarea",
-				"data-part": "clear-button",
-				type: "button",
-				disabled: !showClear || disabled || readOnly,
-				"aria-label": "清除内容",
-				onClick() {
-					send({ type: "VALUE.CLEAR" });
-				}
-			}));
-		},
-		getPasteButtonProps() {
-			return normalizeProps.button(compact({
-				"data-scope": "textarea",
-				"data-part": "paste-button",
-				type: "button",
-				disabled,
-				"aria-label": "粘贴并识别",
-				onClick() {
-					send({ type: "PASTE_RECOGNIZE" });
-				}
-			}));
-		}
-	};
-}
-/**
-* 把 QwTextAreaProps 转成 machine context（默认值收口）。
-*/
-function createTextAreaProps(props = {}) {
-	return {
-		defaultValue: props.defaultValue ?? "",
-		disabled: props.disabled ?? false,
-		readOnly: props.readOnly ?? false,
-		showActions: props.showActions ?? true,
-		autoSize: props.autoSize ?? false,
-		rows: props.rows ?? 4,
-		...props
-	};
-}
-//#endregion
-export { connect, createTextAreaProps, machine };
-
-//# sourceMappingURL=index.js.map
+import { a as connect, i as computeTextAreaHeight, n as attachTextAreaPlatform, o as createTextAreaProps, r as clampUtf16, s as machine, t as TextAreaClipboardReadError } from "../textarea-qbnruDUG.js";
+export { TextAreaClipboardReadError, attachTextAreaPlatform, clampUtf16, computeTextAreaHeight, connect, createTextAreaProps, machine };

package/dist/textarea/platform.d.ts

@@ -0,0 +1,22 @@
+import type { TextAreaClipboardFailure, TextAreaPlatformSink } from "./textarea.js";
+/**
+ * TextArea 的平台装配：ref 之后的监听、测量和写回。
+ * 不判断接受、截断或组合 —— 那些仍然只在 Core 的 TextArea 状态机里。
+ * 各栈适配层只保留自己的生命周期胶水（React 的 ref callback、Vue 的 watch）。
+ */
+type ClipboardReason = Exclude<TextAreaClipboardFailure, "stale">;
+/** 平台拒绝。`stale` 只由 Core 在 ticket 过期时产生。 */
+export declare class TextAreaClipboardReadError extends Error {
+    readonly reason: ClipboardReason;
+    constructor(reason: ClipboardReason);
+}
+/** 宿主栈自己的写值前置动作。React 需要先推进它内部的 value tracker；其它栈不需要。 */
+export interface TextAreaPlatformHost {
+    trackValue?(target: HTMLTextAreaElement, value: string): void;
+}
+/**
+ * 只做 ref 之后的监听、测量和写回。不判断接受、截断或组合。
+ * 调用方在 target 与 sink 都可用之后再进入这里。
+ */
+export declare function attachTextAreaPlatform(target: HTMLTextAreaElement, getSink: () => TextAreaPlatformSink, host?: TextAreaPlatformHost): () => void;
+export {};