@composy/keyboard-core 0.0.1 → 0.0.2

package/dist/index.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/keyboard-core v0.0.1   *
 * Built with rollup               *
-* Build time: 2024-08-17 11:33:29 *
+* Build time: 2024-10-12 17:29:15 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -11,110 +11,6 @@
 	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignKeyboardCore = {}));
 })(this, function(exports) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-	//#region src/layouts/qwerty.ts
-	function createCharKey$4(char) {
-		return {
-			id: `char-${char.toLowerCase()}`,
-			type: "char",
-			label: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			},
-			value: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			}
-		};
-	}
-	const qwertyLayout = {
-		type: "qwerty",
-		name: "字母键盘",
-		supportShift: true,
-		defaultUpperCase: false,
-		switchable: ["number", "symbol"],
-		rows: [
-			{ keys: [
-				createCharKey$4("Q"),
-				createCharKey$4("W"),
-				createCharKey$4("E"),
-				createCharKey$4("R"),
-				createCharKey$4("T"),
-				createCharKey$4("Y"),
-				createCharKey$4("U"),
-				createCharKey$4("I"),
-				createCharKey$4("O"),
-				createCharKey$4("P")
-			] },
-			{ keys: [
-				createCharKey$4("A"),
-				createCharKey$4("S"),
-				createCharKey$4("D"),
-				createCharKey$4("F"),
-				createCharKey$4("G"),
-				createCharKey$4("H"),
-				createCharKey$4("J"),
-				createCharKey$4("K"),
-				createCharKey$4("L")
-			] },
-			{ keys: [
-				{
-					id: "shift",
-					type: "shift",
-					label: "⇧",
-					width: 1.5,
-					className: "key-shift"
-				},
-				createCharKey$4("Z"),
-				createCharKey$4("X"),
-				createCharKey$4("C"),
-				createCharKey$4("V"),
-				createCharKey$4("B"),
-				createCharKey$4("N"),
-				createCharKey$4("M"),
-				{
-					id: "backspace",
-					type: "backspace",
-					label: "⌫",
-					width: 1.5,
-					className: "key-backspace"
-				}
-			] },
-			{ keys: [
-				{
-					id: "switch-number",
-					type: "tab",
-					label: "123",
-					width: 1.5,
-					className: "key-switch",
-					data: { targetType: "number" }
-				},
-				{
-					id: "switch-symbol",
-					type: "tab",
-					label: "#+=",
-					width: 1.25,
-					className: "key-switch",
-					data: { targetType: "symbol" }
-				},
-				{
-					id: "space",
-					type: "space",
-					label: "空格",
-					value: " ",
-					width: 4,
-					className: "key-space"
-				},
-				{
-					id: "done",
-					type: "done",
-					label: "完成",
-					width: 2,
-					className: "key-done"
-				}
-			] }
-		]
-	};
-	//#endregion
 	//#region src/icons.ts
 	const ICON_DELETE = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/><path d="m12 9 6 6"/><path d="m18 9-6 6"/></svg>`;
 	const ICON_CLEAR = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
@@ -137,21 +33,20 @@
 		voice: ICON_VOICE
 	};
 	//#endregion
-	//#region src/layouts/number.ts
+	//#region src/layouts/amount.ts
 	function createNumberKey$6(num) {
 		return {
-			id: `num-${num}`,
+			id: `amount-${num}`,
 			type: "char",
 			label: num,
 			value: num,
 			className: "key-num"
 		};
 	}
-	const numberLayout = {
-		type: "number",
-		name: "数字键盘",
+	const amountLayout = {
+		type: "amount",
+		name: "金额键盘",
 		supportShift: false,
-		switchable: ["qwerty", "symbol"],
 		rows: [
 			{
 				className: "numpad-row",
@@ -190,10 +85,11 @@
 					createNumberKey$6("8"),
 					createNumberKey$6("9"),
 					{
-						id: "close",
-						type: "close",
-						label: "关闭",
-						className: "key-numpad-fn"
+						id: "double-zero",
+						type: "char",
+						label: "00",
+						value: "00",
+						className: "key-num"
 					}
 				]
 			},
@@ -217,13 +113,16 @@
 					}
 				]
 			}
-		]
+		],
+		data: {
+			inputType: "amount",
+			decimalPlaces: 2
+		}
 	};
-	const integerLayout = {
-		type: "integer",
-		name: "整数键盘",
+	const amountSimpleLayout = {
+		type: "amount-simple",
+		name: "金额键盘",
 		supportShift: false,
-		switchable: ["qwerty"],
 		rows: [
 			{
 				className: "numpad-row",
@@ -269,6 +168,92 @@
 					}
 				]
 			},
+			{
+				className: "numpad-row",
+				keys: [
+					{
+						id: "decimal",
+						type: "char",
+						label: ".",
+						value: ".",
+						className: "key-num"
+					},
+					createNumberKey$6("0"),
+					{
+						id: "done",
+						type: "done",
+						label: "确定",
+						width: 2,
+						className: "key-numpad-done"
+					}
+				]
+			}
+		],
+		data: {
+			inputType: "amount",
+			decimalPlaces: 2
+		}
+	};
+	//#endregion
+	//#region src/layouts/bankcard.ts
+	function createNumberKey$5(num) {
+		return {
+			id: `bankcard-${num}`,
+			type: "char",
+			label: num,
+			value: num,
+			className: "key-num"
+		};
+	}
+	const bankcardLayout = {
+		type: "bankcard",
+		name: "银行卡键盘",
+		supportShift: false,
+		rows: [
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$5("1"),
+					createNumberKey$5("2"),
+					createNumberKey$5("3"),
+					{
+						id: "backspace",
+						type: "backspace",
+						icon: ICON_DELETE,
+						label: "",
+						className: "key-numpad-fn"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$5("4"),
+					createNumberKey$5("5"),
+					createNumberKey$5("6"),
+					{
+						id: "clear",
+						type: "clear",
+						icon: ICON_CLEAR,
+						label: "",
+						className: "key-numpad-fn"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$5("7"),
+					createNumberKey$5("8"),
+					createNumberKey$5("9"),
+					{
+						id: "close",
+						type: "close",
+						label: "关闭",
+						className: "key-numpad-fn"
+					}
+				]
+			},
 			{
 				className: "numpad-row",
 				keys: [
@@ -279,7 +264,7 @@
 						className: "key-numpad-fn",
 						data: { targetType: "qwerty" }
 					},
-					createNumberKey$6("0"),
+					createNumberKey$5("0"),
 					{
 						id: "done",
 						type: "done",
@@ -289,78 +274,80 @@
 					}
 				]
 			}
-		]
+		],
+		data: {
+			maxLength: 19,
+			inputType: "bankcard"
+		}
 	};
 	//#endregion
-	//#region src/layouts/symbol.ts
-	function createSymbolKey(symbol, id) {
+	//#region src/layouts/email.ts
+	function createCharKey$4(char) {
 		return {
-			id: id || `symbol-${symbol.charCodeAt(0)}`,
+			id: `email-char-${char.toLowerCase()}`,
 			type: "char",
-			label: symbol,
-			value: symbol
+			label: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
+			},
+			value: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
+			}
 		};
 	}
-	const symbolLayout = {
-		type: "symbol",
-		name: "符号键盘",
-		supportShift: false,
-		switchable: ["qwerty", "number"],
+	function snippet$1(label, id) {
+		return {
+			id: id || `email-snippet-${label.replace(/[^a-z0-9]/gi, "")}`,
+			type: "char",
+			label,
+			value: label,
+			className: "key-snippet"
+		};
+	}
+	const EMAIL_SUFFIXES = [
+		"@qq.com",
+		"@163.com",
+		"@126.com",
+		"@gmail.com",
+		"@outlook.com",
+		"@hotmail.com",
+		"@sina.com",
+		"@sohu.com",
+		"@icloud.com",
+		"@foxmail.com",
+		"@yeah.net",
+		"@139.com"
+	];
+	const emailLayout = {
+		type: "email",
+		name: "邮箱键盘",
+		supportShift: true,
+		defaultUpperCase: false,
+		switchable: ["symbol", "number"],
 		rows: [
-			{ keys: [
-				createSymbolKey("1"),
-				createSymbolKey("2"),
-				createSymbolKey("3"),
-				createSymbolKey("4"),
-				createSymbolKey("5"),
-				createSymbolKey("6"),
-				createSymbolKey("7"),
-				createSymbolKey("8"),
-				createSymbolKey("9"),
-				createSymbolKey("0")
-			] },
-			{ keys: [
-				createSymbolKey("-"),
-				createSymbolKey("/"),
-				createSymbolKey(":"),
-				createSymbolKey(";"),
-				createSymbolKey("("),
-				createSymbolKey(")"),
-				createSymbolKey("¥", "yen"),
-				createSymbolKey("@"),
-				createSymbolKey("\"", "quote")
-			] },
+			{ keys: "qwertyuiop".split("").map(createCharKey$4) },
+			{ keys: "asdfghjkl".split("").map(createCharKey$4) },
 			{ keys: [
 				{
-					id: "switch-symbol-2",
-					type: "tab",
-					label: "#+= ",
+					id: "shift",
+					type: "shift",
+					icon: ICON_SHIFT,
+					label: "",
 					width: 1.5,
-					className: "key-switch",
-					data: { targetType: "symbol-2" }
+					className: "key-shift"
 				},
-				createSymbolKey("."),
-				createSymbolKey(","),
-				createSymbolKey("?"),
-				createSymbolKey("!"),
-				createSymbolKey("'", "apostrophe"),
+				..."zxcvbnm".split("").map(createCharKey$4),
 				{
 					id: "backspace",
 					type: "backspace",
-					label: "⌫",
+					icon: ICON_DELETE,
+					label: "",
 					width: 1.5,
 					className: "key-backspace"
 				}
 			] },
 			{ keys: [
-				{
-					id: "switch-qwerty",
-					type: "tab",
-					label: "ABC",
-					width: 1.5,
-					className: "key-switch",
-					data: { targetType: "qwerty" }
-				},
 				{
 					id: "switch-number",
 					type: "tab",
@@ -370,110 +357,129 @@
 					data: { targetType: "number" }
 				},
 				{
-					id: "space",
-					type: "space",
-					label: "空格",
-					value: " ",
-					width: 4,
-					className: "key-space"
-				},
-				{
-					id: "done",
-					type: "done",
-					label: "完成",
-					width: 2,
-					className: "key-done"
-				}
-			] }
-		]
-	};
-	const symbolLayout2 = {
-		type: "symbol",
-		name: "符号键盘2",
-		supportShift: false,
-		switchable: ["qwerty", "number"],
-		rows: [
-			{ keys: [
-				createSymbolKey("["),
-				createSymbolKey("]"),
-				createSymbolKey("{"),
-				createSymbolKey("}"),
-				createSymbolKey("#"),
-				createSymbolKey("%"),
-				createSymbolKey("^"),
-				createSymbolKey("*"),
-				createSymbolKey("+"),
-				createSymbolKey("=")
-			] },
-			{ keys: [
-				createSymbolKey("_"),
-				createSymbolKey("\\"),
-				createSymbolKey("|"),
-				createSymbolKey("~"),
-				createSymbolKey("<"),
-				createSymbolKey(">"),
-				createSymbolKey("€", "euro"),
-				createSymbolKey("$"),
-				createSymbolKey("&")
-			] },
-			{ keys: [
-				{
-					id: "switch-symbol-1",
-					type: "tab",
-					label: "123",
-					width: 1.5,
-					className: "key-switch",
-					data: { targetType: "symbol" }
+					id: "email-at",
+					type: "char",
+					label: "@",
+					value: "@",
+					className: "key-at"
 				},
-				createSymbolKey("`", "backtick"),
-				createSymbolKey("·", "middle-dot"),
-				createSymbolKey("…", "ellipsis"),
-				createSymbolKey("°", "degree"),
-				createSymbolKey("•", "bullet"),
-				{
-					id: "backspace",
-					type: "backspace",
-					label: "⌫",
-					width: 1.5,
-					className: "key-backspace"
-				}
-			] },
-			{ keys: [
 				{
-					id: "switch-qwerty",
-					type: "tab",
-					label: "ABC",
+					id: "email-suffix",
+					type: "char",
+					label: ".com",
+					value: "",
 					width: 1.5,
-					className: "key-switch",
-					data: { targetType: "qwerty" }
-				},
-				{
-					id: "switch-number",
-					type: "tab",
-					label: "123",
-					width: 1.25,
-					className: "key-switch",
-					data: { targetType: "number" }
+					className: "key-suffix",
+					options: EMAIL_SUFFIXES
 				},
+				snippet$1(".", "email-dot"),
+				snippet$1("-", "email-dash"),
+				snippet$1("_", "email-underscore"),
 				{
 					id: "space",
 					type: "space",
-					label: "空格",
+					label: "",
 					value: " ",
-					width: 4,
+					width: 2,
 					className: "key-space"
 				},
 				{
-					id: "done",
+					id: "email-done",
 					type: "done",
-					label: "完成",
-					width: 2,
+					label: "确定",
+					width: 1.5,
 					className: "key-done"
 				}
 			] }
 		]
 	};
 	//#endregion
+	//#region src/layouts/idcard.ts
+	function createNumberKey$4(num) {
+		return {
+			id: `idcard-${num}`,
+			type: "char",
+			label: num,
+			value: num,
+			className: "key-num"
+		};
+	}
+	const idcardLayout = {
+		type: "idcard",
+		name: "身份证键盘",
+		supportShift: false,
+		rows: [
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$4("1"),
+					createNumberKey$4("2"),
+					createNumberKey$4("3"),
+					{
+						id: "backspace",
+						type: "backspace",
+						icon: ICON_DELETE,
+						label: "",
+						className: "key-numpad-fn"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$4("4"),
+					createNumberKey$4("5"),
+					createNumberKey$4("6"),
+					{
+						id: "clear",
+						type: "clear",
+						icon: ICON_CLEAR,
+						label: "",
+						className: "key-numpad-fn"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$4("7"),
+					createNumberKey$4("8"),
+					createNumberKey$4("9"),
+					{
+						id: "idcard-x",
+						type: "char",
+						label: "X",
+						value: "X",
+						className: "key-num"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					{
+						id: "close",
+						type: "close",
+						label: "关闭",
+						className: "key-numpad-fn"
+					},
+					createNumberKey$4("0"),
+					{
+						id: "done",
+						type: "done",
+						label: "确定",
+						width: 2,
+						className: "key-numpad-done"
+					}
+				]
+			}
+		],
+		data: {
+			maxLength: 18,
+			inputType: "idcard"
+		}
+	};
+	//#endregion
 	//#region src/layouts/license-plate.ts
 	const PROVINCES = [
 		"京",
@@ -555,7 +561,7 @@
 			className: "key-plate-letter"
 		};
 	}
-	function createNumberKey$5(num) {
+	function createNumberKey$3(num) {
 		return {
 			id: `num-${num}`,
 			type: "char",
@@ -631,7 +637,7 @@
 		rows: [
 			{
 				className: "plate-keyboard-row",
-				keys: "1234567890".split("").map(createNumberKey$5)
+				keys: "1234567890".split("").map(createNumberKey$3)
 			},
 			{
 				className: "plate-keyboard-row",
@@ -751,27 +757,28 @@
 		rows: licensePlateProvinceLayout.rows
 	};
 	//#endregion
-	//#region src/layouts/idcard.ts
-	function createNumberKey$4(num) {
+	//#region src/layouts/number.ts
+	function createNumberKey$2(num) {
 		return {
-			id: `idcard-${num}`,
+			id: `num-${num}`,
 			type: "char",
 			label: num,
 			value: num,
 			className: "key-num"
 		};
 	}
-	const idcardLayout = {
-		type: "idcard",
-		name: "身份证键盘",
+	const numberLayout = {
+		type: "number",
+		name: "数字键盘",
 		supportShift: false,
+		switchable: ["qwerty", "symbol"],
 		rows: [
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$4("1"),
-					createNumberKey$4("2"),
-					createNumberKey$4("3"),
+					createNumberKey$2("1"),
+					createNumberKey$2("2"),
+					createNumberKey$2("3"),
 					{
 						id: "backspace",
 						type: "backspace",
@@ -784,9 +791,9 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$4("4"),
-					createNumberKey$4("5"),
-					createNumberKey$4("6"),
+					createNumberKey$2("4"),
+					createNumberKey$2("5"),
+					createNumberKey$2("6"),
 					{
 						id: "clear",
 						type: "clear",
@@ -799,28 +806,100 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$4("7"),
-					createNumberKey$4("8"),
-					createNumberKey$4("9"),
+					createNumberKey$2("7"),
+					createNumberKey$2("8"),
+					createNumberKey$2("9"),
 					{
-						id: "idcard-x",
+						id: "close",
+						type: "close",
+						label: "关闭",
+						className: "key-numpad-fn"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					{
+						id: "decimal",
 						type: "char",
-						label: "X",
-						value: "X",
+						label: ".",
+						value: ".",
 						className: "key-num"
+					},
+					createNumberKey$2("0"),
+					{
+						id: "done",
+						type: "done",
+						label: "确定",
+						width: 2,
+						className: "key-numpad-done"
+					}
+				]
+			}
+		]
+	};
+	const integerLayout = {
+		type: "integer",
+		name: "整数键盘",
+		supportShift: false,
+		switchable: ["qwerty"],
+		rows: [
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$2("1"),
+					createNumberKey$2("2"),
+					createNumberKey$2("3"),
+					{
+						id: "backspace",
+						type: "backspace",
+						icon: ICON_DELETE,
+						label: "",
+						className: "key-numpad-fn"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey$2("4"),
+					createNumberKey$2("5"),
+					createNumberKey$2("6"),
+					{
+						id: "clear",
+						type: "clear",
+						icon: ICON_CLEAR,
+						label: "",
+						className: "key-numpad-fn"
 					}
 				]
 			},
 			{
 				className: "numpad-row",
 				keys: [
+					createNumberKey$2("7"),
+					createNumberKey$2("8"),
+					createNumberKey$2("9"),
 					{
 						id: "close",
 						type: "close",
 						label: "关闭",
 						className: "key-numpad-fn"
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					{
+						id: "switch-qwerty",
+						type: "tab",
+						label: "ABC",
+						className: "key-numpad-fn",
+						data: { targetType: "qwerty" }
 					},
-					createNumberKey$4("0"),
+					createNumberKey$2("0"),
 					{
 						id: "done",
 						type: "done",
@@ -830,15 +909,11 @@
 					}
 				]
 			}
-		],
-		data: {
-			maxLength: 18,
-			inputType: "idcard"
-		}
+		]
 	};
 	//#endregion
 	//#region src/layouts/phone.ts
-	function createNumberKey$3(num) {
+	function createNumberKey$1(num) {
 		return {
 			id: `phone-${num}`,
 			type: "char",
@@ -855,9 +930,9 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$3("1"),
-					createNumberKey$3("2"),
-					createNumberKey$3("3"),
+					createNumberKey$1("1"),
+					createNumberKey$1("2"),
+					createNumberKey$1("3"),
 					{
 						id: "backspace",
 						type: "backspace",
@@ -870,9 +945,9 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$3("4"),
-					createNumberKey$3("5"),
-					createNumberKey$3("6"),
+					createNumberKey$1("4"),
+					createNumberKey$1("5"),
+					createNumberKey$1("6"),
 					{
 						id: "clear",
 						type: "clear",
@@ -885,9 +960,9 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$3("7"),
-					createNumberKey$3("8"),
-					createNumberKey$3("9"),
+					createNumberKey$1("7"),
+					createNumberKey$1("8"),
+					createNumberKey$1("9"),
 					{
 						id: "close",
 						type: "close",
@@ -906,7 +981,7 @@
 						value: "+",
 						className: "key-num"
 					},
-					createNumberKey$3("0"),
+					createNumberKey$1("0"),
 					{
 						id: "done",
 						type: "done",
@@ -930,9 +1005,9 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$3("1"),
-					createNumberKey$3("2"),
-					createNumberKey$3("3"),
+					createNumberKey$1("1"),
+					createNumberKey$1("2"),
+					createNumberKey$1("3"),
 					{
 						id: "backspace",
 						type: "backspace",
@@ -945,9 +1020,9 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$3("4"),
-					createNumberKey$3("5"),
-					createNumberKey$3("6"),
+					createNumberKey$1("4"),
+					createNumberKey$1("5"),
+					createNumberKey$1("6"),
 					{
 						id: "clear",
 						type: "clear",
@@ -960,9 +1035,9 @@
 			{
 				className: "numpad-row",
 				keys: [
-					createNumberKey$3("7"),
-					createNumberKey$3("8"),
-					createNumberKey$3("9"),
+					createNumberKey$1("7"),
+					createNumberKey$1("8"),
+					createNumberKey$1("9"),
 					{
 						id: "phone-hash",
 						type: "char",
@@ -982,7 +1057,7 @@
 						value: "*",
 						className: "key-num"
 					},
-					createNumberKey$3("0"),
+					createNumberKey$1("0"),
 					{
 						id: "done",
 						type: "done",
@@ -999,27 +1074,58 @@
 		}
 	};
 	//#endregion
-	//#region src/layouts/amount.ts
-	function createNumberKey$2(num) {
+	//#region src/layouts/punct.ts
+	function p(label, value) {
 		return {
-			id: `amount-${num}`,
+			id: `punct-${label}`,
 			type: "char",
-			label: num,
-			value: num,
+			label,
+			value: value ?? label,
 			className: "key-num"
 		};
 	}
-	const amountLayout = {
-		type: "amount",
-		name: "金额键盘",
+	const punctLayout = {
+		type: "punct",
+		name: "中文标点",
 		supportShift: false,
+		switchable: ["qwerty", "punct-en"],
 		rows: [
 			{
-				className: "numpad-row",
+				className: "virtual-keyboard__row",
 				keys: [
-					createNumberKey$2("1"),
-					createNumberKey$2("2"),
-					createNumberKey$2("3"),
+					"，",
+					"。",
+					"？",
+					"！",
+					"：",
+					"；",
+					"\"",
+					"\""
+				].map((s) => p(s))
+			},
+			{
+				className: "virtual-keyboard__row",
+				keys: [
+					"（",
+					"）",
+					"【",
+					"】",
+					"《",
+					"》",
+					"……",
+					"——"
+				].map((s) => p(s))
+			},
+			{
+				className: "virtual-keyboard__row",
+				keys: [
+					p("·"),
+					p("、"),
+					p("「"),
+					p("」"),
+					p("『"),
+					p("』"),
+					p("~"),
 					{
 						id: "backspace",
 						type: "backspace",
@@ -1030,357 +1136,171 @@
 				]
 			},
 			{
-				className: "numpad-row",
+				className: "virtual-keyboard__row",
 				keys: [
-					createNumberKey$2("4"),
-					createNumberKey$2("5"),
-					createNumberKey$2("6"),
 					{
-						id: "clear",
-						type: "clear",
-						icon: ICON_CLEAR,
-						label: "",
+						id: "switch-punct-en",
+						type: "tab",
+						label: "英",
+						data: { targetType: "punct-en" },
 						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey$2("7"),
-					createNumberKey$2("8"),
-					createNumberKey$2("9"),
+					},
 					{
-						id: "double-zero",
-						type: "char",
-						label: "00",
-						value: "00",
-						className: "key-num"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
+						id: "switch-qwerty",
+						type: "tab",
+						label: "ABC",
+						data: { targetType: "qwerty" },
+						className: "key-numpad-fn"
+					},
 					{
-						id: "decimal",
-						type: "char",
-						label: ".",
-						value: ".",
+						id: "space",
+						type: "space",
+						label: "空格",
+						value: " ",
+						width: 4,
 						className: "key-num"
 					},
-					createNumberKey$2("0"),
 					{
 						id: "done",
 						type: "done",
-						label: "确定",
+						icon: ICON_CHECK,
+						label: "",
 						width: 2,
 						className: "key-numpad-done"
 					}
 				]
 			}
-		],
-		data: {
-			inputType: "amount",
-			decimalPlaces: 2
-		}
+		]
 	};
-	const amountSimpleLayout = {
-		type: "amount-simple",
-		name: "金额键盘",
-		supportShift: false,
-		rows: [
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey$2("1"),
-					createNumberKey$2("2"),
-					createNumberKey$2("3"),
-					{
-						id: "backspace",
-						type: "backspace",
-						icon: ICON_DELETE,
-						label: "",
-						className: "key-numpad-fn"
-					}
-				]
+	//#endregion
+	//#region src/layouts/qwerty.ts
+	function createCharKey$3(char) {
+		return {
+			id: `char-${char.toLowerCase()}`,
+			type: "char",
+			label: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
 			},
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey$2("4"),
-					createNumberKey$2("5"),
-					createNumberKey$2("6"),
-					{
-						id: "clear",
-						type: "clear",
-						icon: ICON_CLEAR,
-						label: "",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey$2("7"),
-					createNumberKey$2("8"),
-					createNumberKey$2("9"),
-					{
-						id: "close",
-						type: "close",
-						label: "关闭",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					{
-						id: "decimal",
-						type: "char",
-						label: ".",
-						value: ".",
-						className: "key-num"
-					},
-					createNumberKey$2("0"),
-					{
-						id: "done",
-						type: "done",
-						label: "确定",
-						width: 2,
-						className: "key-numpad-done"
-					}
-				]
+			value: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
 			}
-		],
-		data: {
-			inputType: "amount",
-			decimalPlaces: 2
-		}
-	};
-	//#endregion
-	//#region src/layouts/bankcard.ts
-	function createNumberKey$1(num) {
-		return {
-			id: `bankcard-${num}`,
-			type: "char",
-			label: num,
-			value: num,
-			className: "key-num"
 		};
 	}
-	const bankcardLayout = {
-		type: "bankcard",
-		name: "银行卡键盘",
-		supportShift: false,
+	const qwertyLayout = {
+		type: "qwerty",
+		name: "字母键盘",
+		supportShift: true,
+		defaultUpperCase: false,
+		switchable: ["number", "symbol"],
 		rows: [
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey$1("1"),
-					createNumberKey$1("2"),
-					createNumberKey$1("3"),
-					{
-						id: "backspace",
-						type: "backspace",
-						icon: ICON_DELETE,
-						label: "",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey$1("4"),
-					createNumberKey$1("5"),
-					createNumberKey$1("6"),
-					{
-						id: "clear",
-						type: "clear",
-						icon: ICON_CLEAR,
-						label: "",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey$1("7"),
-					createNumberKey$1("8"),
-					createNumberKey$1("9"),
-					{
-						id: "close",
-						type: "close",
-						label: "关闭",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					{
-						id: "switch-qwerty",
-						type: "tab",
-						label: "ABC",
-						className: "key-numpad-fn",
-						data: { targetType: "qwerty" }
-					},
-					createNumberKey$1("0"),
-					{
-						id: "done",
-						type: "done",
-						label: "确定",
-						width: 2,
-						className: "key-numpad-done"
-					}
-				]
-			}
-		],
-		data: {
-			maxLength: 19,
-			inputType: "bankcard"
-		}
+			{ keys: [
+				createCharKey$3("Q"),
+				createCharKey$3("W"),
+				createCharKey$3("E"),
+				createCharKey$3("R"),
+				createCharKey$3("T"),
+				createCharKey$3("Y"),
+				createCharKey$3("U"),
+				createCharKey$3("I"),
+				createCharKey$3("O"),
+				createCharKey$3("P")
+			] },
+			{ keys: [
+				createCharKey$3("A"),
+				createCharKey$3("S"),
+				createCharKey$3("D"),
+				createCharKey$3("F"),
+				createCharKey$3("G"),
+				createCharKey$3("H"),
+				createCharKey$3("J"),
+				createCharKey$3("K"),
+				createCharKey$3("L")
+			] },
+			{ keys: [
+				{
+					id: "shift",
+					type: "shift",
+					label: "⇧",
+					width: 1.5,
+					className: "key-shift"
+				},
+				createCharKey$3("Z"),
+				createCharKey$3("X"),
+				createCharKey$3("C"),
+				createCharKey$3("V"),
+				createCharKey$3("B"),
+				createCharKey$3("N"),
+				createCharKey$3("M"),
+				{
+					id: "backspace",
+					type: "backspace",
+					label: "⌫",
+					width: 1.5,
+					className: "key-backspace"
+				}
+			] },
+			{ keys: [
+				{
+					id: "switch-number",
+					type: "tab",
+					label: "123",
+					width: 1.5,
+					className: "key-switch",
+					data: { targetType: "number" }
+				},
+				{
+					id: "switch-symbol",
+					type: "tab",
+					label: "#+=",
+					width: 1.25,
+					className: "key-switch",
+					data: { targetType: "symbol" }
+				},
+				{
+					id: "space",
+					type: "space",
+					label: "空格",
+					value: " ",
+					width: 4,
+					className: "key-space"
+				},
+				{
+					id: "done",
+					type: "done",
+					label: "完成",
+					width: 2,
+					className: "key-done"
+				}
+			] }
+		]
 	};
 	//#endregion
-	//#region src/layouts/verifycode.ts
-	function createNumberKey(num) {
+	//#region src/layouts/search.ts
+	function createCharKey$2(char) {
 		return {
-			id: `verify-${num}`,
+			id: `search-char-${char.toLowerCase()}`,
 			type: "char",
-			label: num,
-			value: num,
-			className: "key-num"
+			label: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
+			},
+			value: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
+			}
 		};
 	}
-	const verifycodeLayout = {
-		type: "verifycode",
-		name: "验证码键盘",
-		supportShift: false,
+	const searchLayout = {
+		type: "search",
+		name: "搜索键盘",
+		supportShift: true,
+		defaultUpperCase: false,
+		switchable: ["symbol", "number"],
 		rows: [
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey("1"),
-					createNumberKey("2"),
-					createNumberKey("3"),
-					{
-						id: "backspace",
-						type: "backspace",
-						icon: ICON_DELETE,
-						label: "",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey("4"),
-					createNumberKey("5"),
-					createNumberKey("6"),
-					{
-						id: "clear",
-						type: "clear",
-						icon: ICON_CLEAR,
-						label: "",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					createNumberKey("7"),
-					createNumberKey("8"),
-					createNumberKey("9"),
-					{
-						id: "close",
-						type: "close",
-						label: "关闭",
-						className: "key-numpad-fn"
-					}
-				]
-			},
-			{
-				className: "numpad-row",
-				keys: [
-					{
-						id: "empty",
-						type: "char",
-						label: "",
-						value: "",
-						disabled: true,
-						className: "key-numpad-empty"
-					},
-					createNumberKey("0"),
-					{
-						id: "done",
-						type: "done",
-						label: "确定",
-						width: 2,
-						className: "key-numpad-done"
-					}
-				]
-			}
-		],
-		data: {
-			maxLength: 6,
-			inputType: "verifycode"
-		}
-	};
-	//#endregion
-	//#region src/layouts/email.ts
-	function createCharKey$3(char) {
-		return {
-			id: `email-char-${char.toLowerCase()}`,
-			type: "char",
-			label: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			},
-			value: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			}
-		};
-	}
-	function snippet$1(label, id) {
-		return {
-			id: id || `email-snippet-${label.replace(/[^a-z0-9]/gi, "")}`,
-			type: "char",
-			label,
-			value: label,
-			className: "key-snippet"
-		};
-	}
-	const EMAIL_SUFFIXES = [
-		"@qq.com",
-		"@163.com",
-		"@126.com",
-		"@gmail.com",
-		"@outlook.com",
-		"@hotmail.com",
-		"@sina.com",
-		"@sohu.com",
-		"@icloud.com",
-		"@foxmail.com",
-		"@yeah.net",
-		"@139.com"
-	];
-	const emailLayout = {
-		type: "email",
-		name: "邮箱键盘",
-		supportShift: true,
-		defaultUpperCase: false,
-		switchable: ["symbol", "number"],
-		rows: [
-			{ keys: "qwertyuiop".split("").map(createCharKey$3) },
-			{ keys: "asdfghjkl".split("").map(createCharKey$3) },
+			{ keys: "qwertyuiop".split("").map(createCharKey$2) },
+			{ keys: "asdfghjkl".split("").map(createCharKey$2) },
 			{ keys: [
 				{
 					id: "shift",
@@ -1390,7 +1310,7 @@
 					width: 1.5,
 					className: "key-shift"
 				},
-				..."zxcvbnm".split("").map(createCharKey$3),
+				..."zxcvbnm".split("").map(createCharKey$2),
 				{
 					id: "backspace",
 					type: "backspace",
@@ -1410,148 +1330,252 @@
 					data: { targetType: "number" }
 				},
 				{
-					id: "email-at",
-					type: "char",
-					label: "@",
-					value: "@",
-					className: "key-at"
-				},
-				{
-					id: "email-suffix",
-					type: "char",
-					label: ".com",
-					value: "",
-					width: 1.5,
-					className: "key-suffix",
-					options: EMAIL_SUFFIXES
+					id: "switch-symbol",
+					type: "tab",
+					label: "#+=",
+					width: 1.25,
+					className: "key-switch",
+					data: { targetType: "symbol" }
 				},
-				snippet$1(".", "email-dot"),
-				snippet$1("-", "email-dash"),
-				snippet$1("_", "email-underscore"),
 				{
 					id: "space",
 					type: "space",
 					label: "",
 					value: " ",
-					width: 2,
+					width: 4,
 					className: "key-space"
 				},
 				{
-					id: "email-done",
+					id: "voice",
+					type: "custom",
+					icon: ICON_VOICE,
+					label: "",
+					width: 1,
+					className: "key-voice",
+					data: { action: "voice" }
+				},
+				{
+					id: "search-done",
 					type: "done",
-					label: "确定",
-					width: 1.5,
+					label: "搜索",
+					width: 2,
 					className: "key-done"
 				}
 			] }
 		]
 	};
 	//#endregion
-	//#region src/layouts/url.ts
-	function createCharKey$2(char) {
-		return {
-			id: `url-char-${char.toLowerCase()}`,
-			type: "char",
-			label: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			},
-			value: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			}
-		};
-	}
-	function snippet(label, width) {
+	//#region src/layouts/symbol.ts
+	function createSymbolKey(symbol, id) {
 		return {
-			id: `url-snippet-${label.replace(/[^a-z0-9]/gi, "") || label.split("").map((c) => c.charCodeAt(0)).join("")}`,
+			id: id || `symbol-${symbol.charCodeAt(0)}`,
 			type: "char",
-			label,
-			value: label,
-			width,
-			className: "key-snippet"
+			label: symbol,
+			value: symbol
 		};
 	}
-	const urlLayout = {
-		type: "url",
-		name: "网址键盘",
-		supportShift: true,
-		defaultUpperCase: false,
-		switchable: ["symbol", "number"],
+	const symbolLayout = {
+		type: "symbol",
+		name: "符号键盘",
+		supportShift: false,
+		switchable: ["qwerty", "number"],
 		rows: [
-			{ keys: "qwertyuiop".split("").map(createCharKey$2) },
-			{ keys: "asdfghjkl".split("").map(createCharKey$2) },
+			{ keys: [
+				createSymbolKey("1"),
+				createSymbolKey("2"),
+				createSymbolKey("3"),
+				createSymbolKey("4"),
+				createSymbolKey("5"),
+				createSymbolKey("6"),
+				createSymbolKey("7"),
+				createSymbolKey("8"),
+				createSymbolKey("9"),
+				createSymbolKey("0")
+			] },
+			{ keys: [
+				createSymbolKey("-"),
+				createSymbolKey("/"),
+				createSymbolKey(":"),
+				createSymbolKey(";"),
+				createSymbolKey("("),
+				createSymbolKey(")"),
+				createSymbolKey("¥", "yen"),
+				createSymbolKey("@"),
+				createSymbolKey("\"", "quote")
+			] },
 			{ keys: [
 				{
-					id: "shift",
-					type: "shift",
-					icon: ICON_SHIFT,
-					label: "",
+					id: "switch-symbol-2",
+					type: "tab",
+					label: "#+= ",
 					width: 1.5,
-					className: "key-shift"
+					className: "key-switch",
+					data: { targetType: "symbol-2" }
 				},
-				..."zxcvbnm".split("").map(createCharKey$2),
+				createSymbolKey("."),
+				createSymbolKey(","),
+				createSymbolKey("?"),
+				createSymbolKey("!"),
+				createSymbolKey("'", "apostrophe"),
 				{
 					id: "backspace",
 					type: "backspace",
-					icon: ICON_DELETE,
-					label: "",
+					label: "⌫",
 					width: 1.5,
 					className: "key-backspace"
 				}
 			] },
 			{ keys: [
+				{
+					id: "switch-qwerty",
+					type: "tab",
+					label: "ABC",
+					width: 1.5,
+					className: "key-switch",
+					data: { targetType: "qwerty" }
+				},
 				{
 					id: "switch-number",
 					type: "tab",
 					label: "123",
-					width: 1.2,
+					width: 1.25,
 					className: "key-switch",
 					data: { targetType: "number" }
 				},
-				snippet("/", .8),
-				snippet(".", .8),
-				snippet("-", .8),
-				snippet(".com", 1.5),
-				snippet(".cn", 1.2),
 				{
 					id: "space",
 					type: "space",
-					label: "",
+					label: "空格",
 					value: " ",
-					width: 1.5,
+					width: 4,
 					className: "key-space"
 				},
 				{
-					id: "url-go",
+					id: "done",
 					type: "done",
-					label: "前往",
-					width: 1.5,
+					label: "完成",
+					width: 2,
 					className: "key-done"
 				}
 			] }
 		]
 	};
-	//#endregion
-	//#region src/layouts/search.ts
-	function createCharKey$1(char) {
-		return {
-			id: `search-char-${char.toLowerCase()}`,
-			type: "char",
-			label: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			},
-			value: {
-				lower: char.toLowerCase(),
-				upper: char.toUpperCase()
-			}
-		};
-	}
-	const searchLayout = {
-		type: "search",
-		name: "搜索键盘",
-		supportShift: true,
+	const symbolLayout2 = {
+		type: "symbol",
+		name: "符号键盘2",
+		supportShift: false,
+		switchable: ["qwerty", "number"],
+		rows: [
+			{ keys: [
+				createSymbolKey("["),
+				createSymbolKey("]"),
+				createSymbolKey("{"),
+				createSymbolKey("}"),
+				createSymbolKey("#"),
+				createSymbolKey("%"),
+				createSymbolKey("^"),
+				createSymbolKey("*"),
+				createSymbolKey("+"),
+				createSymbolKey("=")
+			] },
+			{ keys: [
+				createSymbolKey("_"),
+				createSymbolKey("\\"),
+				createSymbolKey("|"),
+				createSymbolKey("~"),
+				createSymbolKey("<"),
+				createSymbolKey(">"),
+				createSymbolKey("€", "euro"),
+				createSymbolKey("$"),
+				createSymbolKey("&")
+			] },
+			{ keys: [
+				{
+					id: "switch-symbol-1",
+					type: "tab",
+					label: "123",
+					width: 1.5,
+					className: "key-switch",
+					data: { targetType: "symbol" }
+				},
+				createSymbolKey("`", "backtick"),
+				createSymbolKey("·", "middle-dot"),
+				createSymbolKey("…", "ellipsis"),
+				createSymbolKey("°", "degree"),
+				createSymbolKey("•", "bullet"),
+				{
+					id: "backspace",
+					type: "backspace",
+					label: "⌫",
+					width: 1.5,
+					className: "key-backspace"
+				}
+			] },
+			{ keys: [
+				{
+					id: "switch-qwerty",
+					type: "tab",
+					label: "ABC",
+					width: 1.5,
+					className: "key-switch",
+					data: { targetType: "qwerty" }
+				},
+				{
+					id: "switch-number",
+					type: "tab",
+					label: "123",
+					width: 1.25,
+					className: "key-switch",
+					data: { targetType: "number" }
+				},
+				{
+					id: "space",
+					type: "space",
+					label: "空格",
+					value: " ",
+					width: 4,
+					className: "key-space"
+				},
+				{
+					id: "done",
+					type: "done",
+					label: "完成",
+					width: 2,
+					className: "key-done"
+				}
+			] }
+		]
+	};
+	//#endregion
+	//#region src/layouts/url.ts
+	function createCharKey$1(char) {
+		return {
+			id: `url-char-${char.toLowerCase()}`,
+			type: "char",
+			label: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
+			},
+			value: {
+				lower: char.toLowerCase(),
+				upper: char.toUpperCase()
+			}
+		};
+	}
+	function snippet(label, width) {
+		return {
+			id: `url-snippet-${label.replace(/[^a-z0-9]/gi, "") || label.split("").map((c) => c.charCodeAt(0)).join("")}`,
+			type: "char",
+			label,
+			value: label,
+			width,
+			className: "key-snippet"
+		};
+	}
+	const urlLayout = {
+		type: "url",
+		name: "网址键盘",
+		supportShift: true,
 		defaultUpperCase: false,
 		switchable: ["symbol", "number"],
 		rows: [
@@ -1581,98 +1605,55 @@
 					id: "switch-number",
 					type: "tab",
 					label: "123",
-					width: 1.25,
+					width: 1.2,
 					className: "key-switch",
 					data: { targetType: "number" }
 				},
-				{
-					id: "switch-symbol",
-					type: "tab",
-					label: "#+=",
-					width: 1.25,
-					className: "key-switch",
-					data: { targetType: "symbol" }
-				},
+				snippet("/", .8),
+				snippet(".", .8),
+				snippet("-", .8),
+				snippet(".com", 1.5),
+				snippet(".cn", 1.2),
 				{
 					id: "space",
 					type: "space",
 					label: "",
 					value: " ",
-					width: 4,
+					width: 1.5,
 					className: "key-space"
 				},
 				{
-					id: "voice",
-					type: "custom",
-					icon: ICON_VOICE,
-					label: "",
-					width: 1,
-					className: "key-voice",
-					data: { action: "voice" }
-				},
-				{
-					id: "search-done",
+					id: "url-go",
 					type: "done",
-					label: "搜索",
-					width: 2,
+					label: "前往",
+					width: 1.5,
 					className: "key-done"
 				}
 			] }
 		]
 	};
 	//#endregion
-	//#region src/layouts/punct.ts
-	function p(label, value) {
+	//#region src/layouts/verifycode.ts
+	function createNumberKey(num) {
 		return {
-			id: `punct-${label}`,
+			id: `verify-${num}`,
 			type: "char",
-			label,
-			value: value ?? label,
+			label: num,
+			value: num,
 			className: "key-num"
 		};
 	}
-	const punctLayout = {
-		type: "punct",
-		name: "中文标点",
+	const verifycodeLayout = {
+		type: "verifycode",
+		name: "验证码键盘",
 		supportShift: false,
-		switchable: ["qwerty", "punct-en"],
 		rows: [
 			{
-				className: "virtual-keyboard__row",
-				keys: [
-					"，",
-					"。",
-					"？",
-					"！",
-					"：",
-					"；",
-					"\"",
-					"\""
-				].map((s) => p(s))
-			},
-			{
-				className: "virtual-keyboard__row",
-				keys: [
-					"（",
-					"）",
-					"【",
-					"】",
-					"《",
-					"》",
-					"……",
-					"——"
-				].map((s) => p(s))
-			},
-			{
-				className: "virtual-keyboard__row",
+				className: "numpad-row",
 				keys: [
-					p("·"),
-					p("、"),
-					p("「"),
-					p("」"),
-					p("『"),
-					p("』"),
-					p("~"),
+					createNumberKey("1"),
+					createNumberKey("2"),
+					createNumberKey("3"),
 					{
 						id: "backspace",
 						type: "backspace",
@@ -1683,65 +1664,84 @@
 				]
 			},
 			{
-				className: "virtual-keyboard__row",
+				className: "numpad-row",
 				keys: [
+					createNumberKey("4"),
+					createNumberKey("5"),
+					createNumberKey("6"),
 					{
-						id: "switch-punct-en",
-						type: "tab",
-						label: "英",
-						data: { targetType: "punct-en" },
+						id: "clear",
+						type: "clear",
+						icon: ICON_CLEAR,
+						label: "",
 						className: "key-numpad-fn"
-					},
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
+					createNumberKey("7"),
+					createNumberKey("8"),
+					createNumberKey("9"),
 					{
-						id: "switch-qwerty",
-						type: "tab",
-						label: "ABC",
-						data: { targetType: "qwerty" },
+						id: "close",
+						type: "close",
+						label: "关闭",
 						className: "key-numpad-fn"
-					},
+					}
+				]
+			},
+			{
+				className: "numpad-row",
+				keys: [
 					{
-						id: "space",
-						type: "space",
-						label: "空格",
-						value: " ",
-						width: 4,
-						className: "key-num"
+						id: "empty",
+						type: "char",
+						label: "",
+						value: "",
+						disabled: true,
+						className: "key-numpad-empty"
 					},
+					createNumberKey("0"),
 					{
 						id: "done",
 						type: "done",
-						icon: ICON_CHECK,
-						label: "",
+						label: "确定",
 						width: 2,
 						className: "key-numpad-done"
 					}
 				]
 			}
-		]
+		],
+		data: {
+			maxLength: 6,
+			inputType: "verifycode"
+		}
 	};
 	//#endregion
 	//#region src/layouts/index.ts
 	const builtinLayouts = {
-		"qwerty": qwertyLayout,
-		"number": numberLayout,
-		"integer": integerLayout,
-		"symbol": symbolLayout,
+		qwerty: qwertyLayout,
+		number: numberLayout,
+		integer: integerLayout,
+		symbol: symbolLayout,
 		"symbol-2": symbolLayout2,
 		"license-plate": licensePlateLayout,
 		"license-plate-province": licensePlateProvinceLayout,
 		"license-plate-letter": licensePlateLetterLayout,
 		"license-plate-alphanumeric": licensePlateAlphanumericLayout,
-		"idcard": idcardLayout,
-		"phone": phoneLayout,
+		idcard: idcardLayout,
+		phone: phoneLayout,
 		"phone-simple": phoneSimpleLayout,
-		"amount": amountLayout,
+		amount: amountLayout,
 		"amount-simple": amountSimpleLayout,
-		"bankcard": bankcardLayout,
-		"verifycode": verifycodeLayout,
-		"email": emailLayout,
-		"url": urlLayout,
-		"search": searchLayout,
-		"punct": punctLayout
+		bankcard: bankcardLayout,
+		verifycode: verifycodeLayout,
+		email: emailLayout,
+		url: urlLayout,
+		search: searchLayout,
+		punct: punctLayout
 	};
 	const customLayouts = {};
 	function registerLayout(name, layout) {
@@ -1773,102 +1773,12 @@
 		});
 	}
 	//#endregion
-	//#region src/utils/event-emitter.ts
-	var EventEmitter = class {
-		constructor() {
-			this.handlers = /* @__PURE__ */ new Map();
-		}
-		/**
-		* 订阅事件
-		*/
-		on(event, handler, options = {}) {
-			if (!this.handlers.has(event)) this.handlers.set(event, /* @__PURE__ */ new Set());
-			const handlers = this.handlers.get(event);
-			const wrapper = {
-				handler,
-				options
-			};
-			handlers.add(wrapper);
-			return () => {
-				handlers.delete(wrapper);
-				if (handlers.size === 0) this.handlers.delete(event);
-			};
-		}
-		/**
-		* 订阅事件（仅触发一次）
-		*/
-		once(event, handler, options = {}) {
-			return this.on(event, handler, {
-				...options,
-				once: true
-			});
-		}
-		/**
-		* 取消订阅事件
-		*/
-		off(event, handler) {
-			if (!handler) {
-				this.handlers.delete(event);
-				return;
-			}
-			const handlers = this.handlers.get(event);
-			if (handlers) {
-				handlers.forEach((wrapper) => {
-					if (wrapper.handler === handler) handlers.delete(wrapper);
-				});
-				if (handlers.size === 0) this.handlers.delete(event);
-			}
-		}
-		/**
-		* 发布事件
-		*/
-		emit(event, data) {
-			const handlers = this.handlers.get(event);
-			if (!handlers || handlers.size === 0) return;
-			const sortedHandlers = Array.from(handlers).sort((a, b) => {
-				const priorityA = a.options.priority ?? 0;
-				return (b.options.priority ?? 0) - priorityA;
-			});
-			const toRemove = [];
-			sortedHandlers.forEach((wrapper) => {
-				try {
-					wrapper.handler(data);
-					if (wrapper.options.once) toRemove.push(wrapper);
-				} catch (error) {
-					console.error(`[KeyboardEventEmitter] Error in event handler for "${String(event)}":`, error);
-				}
-			});
-			toRemove.forEach((wrapper) => handlers.delete(wrapper));
-			if (handlers.size === 0) this.handlers.delete(event);
-		}
-		/**
-		* 清除所有事件订阅
-		*/
-		clear() {
-			this.handlers.clear();
-		}
-		/**
-		* 获取事件订阅数量
-		*/
-		listenerCount(event) {
-			if (event !== void 0) return this.handlers.get(event)?.size ?? 0;
-			let count = 0;
-			this.handlers.forEach((handlers) => {
-				count += handlers.size;
-			});
-			return count;
-		}
-	};
-	//#endregion
 	//#region src/utils/device.ts
 	const MOBILE_UA_REGEX = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 	let cachedIsTouchDevice = null;
 	function isTouchDevice() {
 		if (cachedIsTouchDevice !== null) return cachedIsTouchDevice;
-		if (typeof window === "undefined") {
-			cachedIsTouchDevice = false;
-			return false;
-		}
+		if (typeof window === "undefined") return false;
 		cachedIsTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
 		return cachedIsTouchDevice;
 	}
@@ -1928,7 +1838,14 @@
     pointer-events: none;
     visibility: hidden;
   `;
-		document.body.appendChild(div);
+		const body = document.body;
+		if (!body) return {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		};
+		body.appendChild(div);
 		const computed = getComputedStyle(div);
 		const safeArea = {
 			top: Number.parseFloat(computed.top) || 0,
@@ -1936,7 +1853,7 @@
 			bottom: Number.parseFloat(computed.bottom) || 0,
 			left: Number.parseFloat(computed.left) || 0
 		};
-		document.body.removeChild(div);
+		body.removeChild(div);
 		return safeArea;
 	}
 	function supportsVibrate() {
@@ -2024,16 +1941,19 @@
 		const start = input.selectionStart ?? input.value.length;
 		const end = input.selectionEnd ?? input.value.length;
 		const currentValue = input.value;
-		let newValue = currentValue.substring(0, start) + text + currentValue.substring(end);
-		if (maxLength !== void 0 && newValue.length > maxLength) {
-			const allowedLength = maxLength - (currentValue.length - (end - start));
+		const normalizedMaxLength = maxLength === void 0 || !Number.isFinite(maxLength) ? void 0 : Math.max(0, Math.floor(maxLength));
+		let insertedText = text;
+		let newValue = currentValue.substring(0, start) + insertedText + currentValue.substring(end);
+		if (normalizedMaxLength !== void 0 && newValue.length > normalizedMaxLength) {
+			const allowedLength = normalizedMaxLength - (currentValue.length - (end - start));
 			if (allowedLength <= 0) return {
 				value: currentValue,
 				cursorPosition: start
 			};
-			newValue = currentValue.substring(0, start) + text.substring(0, allowedLength) + currentValue.substring(end);
+			insertedText = text.substring(0, allowedLength);
+			newValue = currentValue.substring(0, start) + insertedText + currentValue.substring(end);
 		}
-		const newCursorPosition = start + text.length;
+		const newCursorPosition = start + insertedText.length;
 		return {
 			value: newValue,
 			cursorPosition: Math.min(newCursorPosition, newValue.length)
@@ -2074,6 +1994,21 @@
 		});
 		return element;
 	}
+	function sanitizeSvgIcon(icon) {
+		if (typeof DOMParser === "undefined" || typeof XMLSerializer === "undefined") return "";
+		const document2 = new DOMParser().parseFromString(icon, "image/svg+xml");
+		const svg = document2.documentElement;
+		if (svg.tagName.toLowerCase() !== "svg" || document2.querySelector("parsererror")) return "";
+		svg.querySelectorAll("script, style, foreignObject").forEach((node) => node.remove());
+		svg.querySelectorAll("*").forEach((element) => {
+			Array.from(element.attributes).forEach((attribute) => {
+				const name = attribute.name.toLowerCase();
+				const value = attribute.value.trim();
+				if (name.startsWith("on") || (name === "href" || name === "xlink:href") && !value.startsWith("#")) element.removeAttribute(attribute.name);
+			});
+		});
+		return new XMLSerializer().serializeToString(svg);
+	}
 	function toggleClass(element, className, force) {
 		element.classList.toggle(className, force);
 	}
@@ -2081,6 +2016,94 @@
 		Object.assign(element.style, styles);
 	}
 	//#endregion
+	//#region src/utils/event-emitter.ts
+	var EventEmitter = class {
+		constructor() {
+			this.handlers = /* @__PURE__ */ new Map();
+		}
+		/**
+		* 订阅事件
+		*/
+		on(event, handler, options = {}) {
+			if (!this.handlers.has(event)) this.handlers.set(event, /* @__PURE__ */ new Set());
+			const handlers = this.handlers.get(event);
+			if (!handlers) return () => void 0;
+			const wrapper = {
+				handler,
+				options
+			};
+			handlers.add(wrapper);
+			return () => {
+				handlers.delete(wrapper);
+				if (handlers.size === 0) this.handlers.delete(event);
+			};
+		}
+		/**
+		* 订阅事件（仅触发一次）
+		*/
+		once(event, handler, options = {}) {
+			return this.on(event, handler, {
+				...options,
+				once: true
+			});
+		}
+		/**
+		* 取消订阅事件
+		*/
+		off(event, handler) {
+			if (!handler) {
+				this.handlers.delete(event);
+				return;
+			}
+			const handlers = this.handlers.get(event);
+			if (handlers) {
+				handlers.forEach((wrapper) => {
+					if (wrapper.handler === handler) handlers.delete(wrapper);
+				});
+				if (handlers.size === 0) this.handlers.delete(event);
+			}
+		}
+		/**
+		* 发布事件
+		*/
+		emit(event, data) {
+			const handlers = this.handlers.get(event);
+			if (!handlers || handlers.size === 0) return;
+			const sortedHandlers = Array.from(handlers).sort((a, b) => {
+				const priorityA = a.options.priority ?? 0;
+				return (b.options.priority ?? 0) - priorityA;
+			});
+			const toRemove = [];
+			sortedHandlers.forEach((wrapper) => {
+				try {
+					wrapper.handler(data);
+					if (wrapper.options.once) toRemove.push(wrapper);
+				} catch (error) {
+					console.error(`[KeyboardEventEmitter] Error in event handler for "${String(event)}":`, error);
+				}
+			});
+			toRemove.forEach((wrapper) => handlers.delete(wrapper));
+			if (handlers.size === 0) this.handlers.delete(event);
+		}
+		/**
+		* 清除所有事件订阅
+		*/
+		clear() {
+			this.handlers.clear();
+		}
+		/**
+		* 获取事件订阅数量
+		*/
+		listenerCount(event) {
+			if (event !== void 0) return this.handlers.get(event)?.size ?? 0;
+			let count = 0;
+			this.handlers.forEach((handlers) => {
+				count += handlers.size;
+			});
+			return count;
+		}
+	};
+	//#endregion
 	//#region src/managers/keyboard-manager.ts
 	const DEFAULT_OPTIONS = {
 		type: "qwerty",
@@ -2092,14 +2115,28 @@
 		enableVibrate: true,
 		customLayouts: {}
 	};
+	function normalizeMaxLength(value) {
+		if (value === void 0 || !Number.isFinite(value)) return void 0;
+		return Math.max(0, Math.floor(value));
+	}
+	function clampValue(value, maxLength) {
+		return maxLength === void 0 ? value : value.slice(0, maxLength);
+	}
 	var KeyboardManager = class extends EventEmitter {
 		constructor(options = {}) {
 			super();
 			/** 当前布局配置 */
 			this.currentLayout = null;
+			this.destroyed = false;
+			const maxLength = normalizeMaxLength(options.maxLength);
 			this.options = {
 				...DEFAULT_OPTIONS,
-				...options
+				...options,
+				maxLength,
+				customLayouts: {
+					...DEFAULT_OPTIONS.customLayouts,
+					...options.customLayouts ?? {}
+				}
 			};
 			if (options.customLayouts) Object.entries(options.customLayouts).forEach(([name, layout]) => {
 				this.options.customLayouts[name] = layout;
@@ -2108,8 +2145,8 @@
 				visible: false,
 				type: this.options.type,
 				isUpperCase: this.options.defaultUpperCase,
-				value: this.options.value,
-				cursorPosition: this.options.value.length,
+				value: clampValue(this.options.value, this.options.maxLength),
+				cursorPosition: clampValue(this.options.value, this.options.maxLength).length,
 				maxLength: this.options.maxLength,
 				inputElement: null
 			};
@@ -2131,7 +2168,10 @@
 		* 获取配置选项
 		*/
 		getOptions() {
-			return { ...this.options };
+			return {
+				...this.options,
+				customLayouts: { ...this.options.customLayouts }
+			};
 		}
 		/**
 		* 加载键盘布局
@@ -2151,7 +2191,11 @@
 		* 显示键盘
 		*/
 		show(inputElement) {
-			if (this.state.visible) return;
+			if (this.destroyed) return;
+			if (this.state.visible) {
+				if (inputElement && this.state.inputElement !== inputElement) this.bindInput(inputElement);
+				return;
+			}
 			this.state.visible = true;
 			this.state.inputElement = inputElement ?? null;
 			if (inputElement) {
@@ -2165,6 +2209,7 @@
 		* 隐藏键盘
 		*/
 		hide() {
+			if (this.destroyed) return;
 			if (!this.state.visible) return;
 			const prevType = this.state.type;
 			this.state.visible = false;
@@ -2176,6 +2221,7 @@
 		* 切换键盘显示/隐藏
 		*/
 		toggle(inputElement) {
+			if (this.destroyed) return;
 			if (this.state.visible) this.hide();
 			else this.show(inputElement);
 		}
@@ -2183,6 +2229,7 @@
 		* 切换键盘类型
 		*/
 		switchType(type) {
+			if (this.destroyed) return;
 			if (this.state.type === type) return;
 			const fromType = this.state.type;
 			if (!this.loadLayout(type)) return;
@@ -2197,6 +2244,7 @@
 		* 切换大小写
 		*/
 		toggleShift() {
+			if (this.destroyed) return;
 			if (!this.currentLayout?.supportShift) return;
 			this.state.isUpperCase = !this.state.isUpperCase;
 			this.emitStateChange();
@@ -2206,6 +2254,7 @@
 		* 设置大小写状态
 		*/
 		setShift(isUpperCase) {
+			if (this.destroyed) return;
 			if (!this.currentLayout?.supportShift) return;
 			if (this.state.isUpperCase === isUpperCase) return;
 			this.state.isUpperCase = isUpperCase;
@@ -2216,6 +2265,7 @@
 		* 处理按键
 		*/
 		handleKey(key) {
+			if (this.destroyed) return;
 			if (this.options.enableVibrate && isMobile()) vibrate(10);
 			this.emit("keypress", {
 				key,
@@ -2261,12 +2311,15 @@
 				setInputCursorPosition(input, result.cursorPosition);
 				this.state.value = result.value;
 				this.state.cursorPosition = result.cursorPosition;
-				input.dispatchEvent(new Event("input", { bubbles: true }));
+				this.dispatchInputEvent(input);
 			} else {
-				if (this.state.maxLength && this.state.value.length >= this.state.maxLength) return;
-				const newValue = this.state.value.slice(0, this.state.cursorPosition) + keyValue + this.state.value.slice(this.state.cursorPosition);
+				if (this.state.maxLength !== void 0 && this.state.value.length >= this.state.maxLength) return;
+				const availableLength = this.state.maxLength === void 0 ? keyValue.length : this.state.maxLength - this.state.value.length;
+				const valueToInsert = keyValue.slice(0, Math.max(0, availableLength));
+				if (!valueToInsert) return;
+				const newValue = this.state.value.slice(0, this.state.cursorPosition) + valueToInsert + this.state.value.slice(this.state.cursorPosition);
 				this.state.value = newValue;
-				this.state.cursorPosition += keyValue.length;
+				this.state.cursorPosition += valueToInsert.length;
 			}
 			this.emitStateChange();
 			this.emit("input", {
@@ -2286,7 +2339,7 @@
 				setInputCursorPosition(input, result.cursorPosition);
 				this.state.value = result.value;
 				this.state.cursorPosition = result.cursorPosition;
-				input.dispatchEvent(new Event("input", { bubbles: true }));
+				this.dispatchInputEvent(input);
 				this.emitStateChange();
 				this.emit("backspace", {
 					deletedChar: result.deletedChar,
@@ -2325,7 +2378,7 @@
 			const previousValue = this.state.value;
 			if (this.state.inputElement) {
 				this.state.inputElement.value = "";
-				this.state.inputElement.dispatchEvent(new Event("input", { bubbles: true }));
+				this.dispatchInputEvent(this.state.inputElement);
 			}
 			this.state.value = "";
 			this.state.cursorPosition = 0;
@@ -2367,11 +2420,14 @@
 		* 设置值
 		*/
 		setValue(value) {
-			this.state.value = value;
-			this.state.cursorPosition = value.length;
+			if (this.destroyed) return;
+			const nextValue = clampValue(value, this.state.maxLength);
+			this.state.value = nextValue;
+			this.state.cursorPosition = nextValue.length;
 			if (this.state.inputElement) {
-				this.state.inputElement.value = value;
-				setInputCursorPosition(this.state.inputElement, value.length);
+				this.state.inputElement.value = nextValue;
+				setInputCursorPosition(this.state.inputElement, nextValue.length);
+				this.dispatchInputEvent(this.state.inputElement);
 			}
 			this.emitStateChange();
 			this.autoSwitchLicensePlate();
@@ -2380,6 +2436,7 @@
 		* 追加值（在光标位置插入文本）
 		*/
 		appendValue(text) {
+			if (this.destroyed) return;
 			if (!text) return;
 			const input = this.state.inputElement;
 			if (input) {
@@ -2388,55 +2445,360 @@
 				setInputCursorPosition(input, result.cursorPosition);
 				this.state.value = result.value;
 				this.state.cursorPosition = result.cursorPosition;
-				input.dispatchEvent(new Event("input", { bubbles: true }));
+				this.dispatchInputEvent(input);
 			} else {
-				if (this.state.maxLength && this.state.value.length + text.length > this.state.maxLength) text = text.slice(0, this.state.maxLength - this.state.value.length);
+				if (this.state.maxLength !== void 0) text = text.slice(0, Math.max(0, this.state.maxLength - this.state.value.length));
+				if (!text) return;
 				const newValue = this.state.value.slice(0, this.state.cursorPosition) + text + this.state.value.slice(this.state.cursorPosition);
 				this.state.value = newValue;
 				this.state.cursorPosition += text.length;
 			}
-			this.emitStateChange();
-		}
-		/**
-		* 设置最大长度
-		*/
-		setMaxLength(maxLength) {
-			this.state.maxLength = maxLength;
-			this.emitStateChange();
-		}
-		/**
-		* 绑定输入框
-		*/
-		bindInput(input) {
-			this.state.inputElement = input;
-			this.state.value = input.value;
-			this.state.cursorPosition = getInputCursorPosition(input);
-			this.emitStateChange();
-		}
-		/**
-		* 解绑输入框
-		*/
-		unbindInput() {
-			this.state.inputElement = null;
-			this.emitStateChange();
-		}
-		/**
-		* 发送状态变化事件
-		*/
-		emitStateChange() {
-			this.emit("stateChange", { ...this.state });
-		}
-		/**
-		* 销毁
-		*/
-		destroy() {
-			this.hide();
-			this.clear();
-			this.state.inputElement = null;
-		}
-	};
-	function createKeyboardManager(options) {
-		return new KeyboardManager(options);
+			this.emitStateChange();
+		}
+		/**
+		* 设置最大长度
+		*/
+		setMaxLength(maxLength) {
+			if (this.destroyed) return;
+			const normalizedMaxLength = normalizeMaxLength(maxLength);
+			this.state.maxLength = normalizedMaxLength;
+			const nextValue = clampValue(this.state.value, normalizedMaxLength);
+			const changed = nextValue !== this.state.value;
+			this.state.value = nextValue;
+			this.state.cursorPosition = Math.min(this.state.cursorPosition, nextValue.length);
+			if (this.state.inputElement && this.state.inputElement.value !== nextValue) {
+				this.state.inputElement.value = nextValue;
+				setInputCursorPosition(this.state.inputElement, this.state.cursorPosition);
+				this.dispatchInputEvent(this.state.inputElement);
+			}
+			this.emitStateChange();
+			if (changed) this.autoSwitchLicensePlate();
+		}
+		/**
+		* 绑定输入框
+		*/
+		bindInput(input) {
+			if (this.destroyed) return;
+			this.state.inputElement = input;
+			const nextValue = clampValue(input.value, this.state.maxLength);
+			if (input.value !== nextValue) input.value = nextValue;
+			this.state.value = nextValue;
+			this.state.cursorPosition = Math.min(getInputCursorPosition(input), nextValue.length);
+			this.emitStateChange();
+		}
+		/**
+		* 解绑输入框
+		*/
+		unbindInput() {
+			if (this.destroyed) return;
+			this.state.inputElement = null;
+			this.emitStateChange();
+		}
+		/**
+		* 发送状态变化事件
+		*/
+		emitStateChange() {
+			this.emit("stateChange", { ...this.state });
+		}
+		dispatchInputEvent(input) {
+			const EventConstructor = input.ownerDocument.defaultView?.Event ?? Event;
+			input.dispatchEvent(new EventConstructor("input", { bubbles: true }));
+		}
+		/**
+		* 销毁
+		*/
+		destroy() {
+			if (this.destroyed) return;
+			this.hide();
+			this.clear();
+			this.state.inputElement = null;
+			this.destroyed = true;
+		}
+	};
+	function createKeyboardManager(options) {
+		return new KeyboardManager(options);
+	}
+	//#endregion
+	//#region src/themes/presets.ts
+	const miuiTheme = {
+		name: "miui",
+		displayName: "MIUI",
+		description: "小米风格 - 纯净简洁",
+		isDark: false,
+		colors: {
+			background: "#f5f5f5",
+			keyBackground: "#ffffff",
+			keyColor: "#1a1a1a",
+			keyActiveBackground: "#e8e8e8",
+			fnKeyBackground: "#e0e0e0",
+			fnKeyColor: "#666666",
+			fnKeyActiveBackground: "#d0d0d0",
+			primaryBackground: "#ff6700",
+			primaryActiveBackground: "#e55d00",
+			primaryColor: "#ffffff",
+			borderColor: "transparent",
+			dividerColor: "#eeeeee"
+		},
+		sizes: {
+			keyHeight: 46,
+			keyRadius: 8,
+			keyGap: 6,
+			fontSize: 18,
+			fnFontSize: 14,
+			padding: 8
+		},
+		effects: {
+			keyShadow: "none",
+			keyActiveShadow: "none",
+			keyActiveScale: .96,
+			transitionDuration: 100,
+			enableBlur: false,
+			blurAmount: 0,
+			enableRipple: false
+		}
+	};
+	const iosTheme = {
+		name: "ios",
+		displayName: "iOS",
+		description: "Apple 风格 - 精致优雅",
+		isDark: false,
+		colors: {
+			background: "#d1d3d9",
+			keyBackground: "#ffffff",
+			keyColor: "#000000",
+			keyActiveBackground: "#b8bac2",
+			fnKeyBackground: "#a8aab4",
+			fnKeyColor: "#000000",
+			fnKeyActiveBackground: "#9699a3",
+			primaryBackground: "#007aff",
+			primaryActiveBackground: "#0062cc",
+			primaryColor: "#ffffff",
+			borderColor: "transparent",
+			dividerColor: "#c8cad0"
+		},
+		sizes: {
+			keyHeight: 43,
+			keyRadius: 5,
+			keyGap: 6,
+			fontSize: 22,
+			fnFontSize: 15,
+			padding: 4
+		},
+		effects: {
+			keyShadow: "0 1px 0 rgba(0,0,0,0.35)",
+			keyActiveShadow: "0 0 0 rgba(0,0,0,0)",
+			keyActiveScale: 1,
+			transitionDuration: 80,
+			enableBlur: true,
+			blurAmount: 20,
+			enableRipple: false
+		}
+	};
+	const materialTheme = {
+		name: "material",
+		displayName: "Material",
+		description: "Google 风格 - 深邃现代",
+		isDark: true,
+		colors: {
+			background: "#263238",
+			keyBackground: "#37474f",
+			keyColor: "#ffffff",
+			keyActiveBackground: "#455a64",
+			fnKeyBackground: "#455a64",
+			fnKeyColor: "#b0bec5",
+			fnKeyActiveBackground: "#546e7a",
+			primaryBackground: "#4caf50",
+			primaryActiveBackground: "#43a047",
+			primaryColor: "#ffffff",
+			borderColor: "transparent",
+			dividerColor: "#37474f"
+		},
+		sizes: {
+			keyHeight: 48,
+			keyRadius: 4,
+			keyGap: 4,
+			fontSize: 20,
+			fnFontSize: 14,
+			padding: 6
+		},
+		effects: {
+			keyShadow: "0 1px 3px rgba(0,0,0,0.2)",
+			keyActiveShadow: "0 2px 6px rgba(0,0,0,0.3)",
+			keyActiveScale: 1,
+			transitionDuration: 150,
+			enableBlur: false,
+			blurAmount: 0,
+			enableRipple: true
+		}
+	};
+	const minimalTheme = {
+		name: "minimal",
+		displayName: "Minimal",
+		description: "极简风格 - 轻盈透明",
+		isDark: false,
+		colors: {
+			background: "rgba(250, 250, 250, 0.95)",
+			keyBackground: "transparent",
+			keyColor: "#333333",
+			keyActiveBackground: "rgba(0, 0, 0, 0.08)",
+			fnKeyBackground: "transparent",
+			fnKeyColor: "#888888",
+			fnKeyActiveBackground: "rgba(0, 0, 0, 0.08)",
+			primaryBackground: "#333333",
+			primaryActiveBackground: "#000000",
+			primaryColor: "#ffffff",
+			borderColor: "#eeeeee",
+			dividerColor: "#eeeeee"
+		},
+		sizes: {
+			keyHeight: 44,
+			keyRadius: 12,
+			keyGap: 8,
+			fontSize: 17,
+			fnFontSize: 13,
+			padding: 12
+		},
+		effects: {
+			keyShadow: "none",
+			keyActiveShadow: "none",
+			keyActiveScale: .92,
+			transitionDuration: 120,
+			enableBlur: true,
+			blurAmount: 30,
+			enableRipple: false
+		}
+	};
+	const darkTheme = {
+		name: "dark",
+		displayName: "Dark",
+		description: "深色模式 - 护眼舒适",
+		isDark: true,
+		colors: {
+			background: "#1c1c1e",
+			keyBackground: "#3a3a3c",
+			keyColor: "#ffffff",
+			keyActiveBackground: "#4a4a4c",
+			fnKeyBackground: "#2c2c2e",
+			fnKeyColor: "#ebebf5",
+			fnKeyActiveBackground: "#3c3c3e",
+			primaryBackground: "#0a84ff",
+			primaryActiveBackground: "#0070e0",
+			primaryColor: "#ffffff",
+			borderColor: "#3a3a3c",
+			dividerColor: "#3a3a3c"
+		},
+		sizes: {
+			keyHeight: 45,
+			keyRadius: 8,
+			keyGap: 6,
+			fontSize: 18,
+			fnFontSize: 14,
+			padding: 8
+		},
+		effects: {
+			keyShadow: "0 1px 2px rgba(0,0,0,0.4)",
+			keyActiveShadow: "0 0 8px rgba(10,132,255,0.3)",
+			keyActiveScale: .97,
+			transitionDuration: 100,
+			enableBlur: true,
+			blurAmount: 20,
+			enableRipple: false
+		}
+	};
+	const presetThemes = {
+		miui: miuiTheme,
+		ios: iosTheme,
+		material: materialTheme,
+		minimal: minimalTheme,
+		dark: darkTheme
+	};
+	const defaultTheme = miuiTheme;
+	//#endregion
+	//#region src/themes/index.ts
+	const customThemes = /* @__PURE__ */ new Map();
+	let currentTheme = defaultTheme;
+	function getTheme(name) {
+		return customThemes.get(name) || presetThemes[name] || defaultTheme;
+	}
+	function registerTheme(theme) {
+		customThemes.set(theme.name, theme);
+	}
+	function getAvailableThemes() {
+		return [...Object.keys(presetThemes), ...customThemes.keys()];
+	}
+	function getAllThemes() {
+		return [...Object.values(presetThemes), ...customThemes.values()];
+	}
+	function setCurrentTheme(name) {
+		currentTheme = getTheme(name);
+		return currentTheme;
+	}
+	function getCurrentTheme() {
+		return currentTheme;
+	}
+	function themeToCSS(theme) {
+		return {
+			"--keyboard-bg": theme.colors.background,
+			"--keyboard-key-bg": theme.colors.keyBackground,
+			"--keyboard-key-color": theme.colors.keyColor,
+			"--keyboard-key-active-bg": theme.colors.keyActiveBackground,
+			"--keyboard-fn-key-bg": theme.colors.fnKeyBackground,
+			"--keyboard-fn-key-color": theme.colors.fnKeyColor,
+			"--keyboard-fn-key-active-bg": theme.colors.fnKeyActiveBackground,
+			"--keyboard-primary-bg": theme.colors.primaryBackground,
+			"--keyboard-primary-active-bg": theme.colors.primaryActiveBackground,
+			"--keyboard-primary-color": theme.colors.primaryColor,
+			"--keyboard-key-height": `${theme.sizes.keyHeight}px`,
+			"--keyboard-key-radius": `${theme.sizes.keyRadius}px`,
+			"--keyboard-key-gap": `${theme.sizes.keyGap}px`,
+			"--keyboard-font-size": `${theme.sizes.fontSize}px`,
+			"--keyboard-fn-font-size": `${theme.sizes.fnFontSize}px`,
+			"--keyboard-padding": `${theme.sizes.padding}px`,
+			"--keyboard-key-shadow": theme.effects.keyShadow,
+			"--keyboard-mask-bg": "color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent))",
+			"--keyboard-transition-duration": `${theme.effects.transitionDuration}ms`,
+			"--keyboard-border-color": theme.colors.borderColor,
+			"--keyboard-divider-color": theme.colors.dividerColor
+		};
+	}
+	function applyTheme(element, theme) {
+		const cssVars = themeToCSS(theme);
+		Object.entries(cssVars).forEach(([key, value]) => {
+			if (value) element.style.setProperty(key, value);
+		});
+		element.classList.remove("keyboard-theme-light", "keyboard-theme-dark");
+		element.classList.add(theme.isDark ? "keyboard-theme-dark" : "keyboard-theme-light");
+		element.dataset.theme = theme.name;
+	}
+	function generateThemeStyle(theme) {
+		const cssVars = themeToCSS(theme);
+		return Object.entries(cssVars).filter(([, value]) => value).map(([key, value]) => `${key}: ${value}`).join("; ");
+	}
+	function mergeTheme(base, overrides) {
+		return {
+			...base,
+			...overrides,
+			colors: {
+				...base.colors,
+				...overrides.colors
+			},
+			sizes: {
+				...base.sizes,
+				...overrides.sizes
+			},
+			effects: {
+				...base.effects,
+				...overrides.effects
+			}
+		};
+	}
+	function createTheme(name, baseTheme, customization) {
+		const theme = mergeTheme(getTheme(baseTheme), {
+			...customization,
+			name
+		});
+		registerTheme(theme);
+		return theme;
 	}
 	//#endregion
 	//#region src/managers/position-manager.ts
@@ -2453,29 +2815,48 @@
 		maskClosable: true,
 		animationDuration: 300
 	};
+	function mergeConfig(config = {}) {
+		return {
+			...DEFAULT_CONFIG,
+			...config,
+			offset: {
+				...DEFAULT_CONFIG.offset,
+				...config.offset
+			}
+		};
+	}
 	var PositionManager = class {
 		constructor(config = {}) {
-			this.config = {
-				...DEFAULT_CONFIG,
-				...config
-			};
+			this.config = mergeConfig(config);
 		}
 		/**
 		* 更新配置
 		*/
 		updateConfig(config) {
-			Object.assign(this.config, config);
+			this.config = mergeConfig({
+				...this.config,
+				...config,
+				offset: {
+					...this.config.offset,
+					...config.offset
+				}
+			});
 		}
 		/**
 		* 获取配置
 		*/
 		getConfig() {
-			return { ...this.config };
+			return {
+				...this.config,
+				offset: { ...this.config.offset }
+			};
 		}
 		/**
 		* 计算弹出位置
 		* @param targetElement - 目标元素（如 input）
 		* @param popupSize - 弹出层尺寸
+		* @param popupSize.width - Popup width
+		* @param popupSize.height - Popup height
 		* @returns 位置计算结果
 		*/
 		calculate(targetElement, popupSize) {
@@ -2493,15 +2874,17 @@
 		*/
 		calculateBottomSheet(viewport, popupSize) {
 			const safeAreaBottom = viewport.safeArea?.bottom ?? 0;
+			const maxHeight = Math.max(0, viewport.height * .6 - safeAreaBottom);
+			const visibleHeight = Math.min(Math.max(0, popupSize.height), maxHeight);
 			return {
 				position: {
 					x: 0,
-					y: viewport.height - popupSize.height - safeAreaBottom
+					y: Math.max(0, viewport.height - visibleHeight - safeAreaBottom)
 				},
 				placement: "bottom-sheet",
 				flipped: false,
-				maxHeight: viewport.height * .6,
-				maxWidth: viewport.width,
+				maxHeight,
+				maxWidth: Math.max(0, viewport.width),
 				transform: "translateY(0)"
 			};
 		}
@@ -2511,8 +2894,8 @@
 		calculateCentered(viewport, popupSize) {
 			return {
 				position: {
-					x: (viewport.width - popupSize.width) / 2,
-					y: (viewport.height - popupSize.height) / 2
+					x: Math.max(0, (viewport.width - popupSize.width) / 2),
+					y: Math.max(0, (viewport.height - popupSize.height) / 2)
 				},
 				placement: "bottom",
 				flipped: false
@@ -2554,16 +2937,16 @@
 				}
 			}
 			if (autoAdjust) {
-				if (position.x < viewportPadding) position.x = viewportPadding;
-				if (position.x + popupSize.width > viewport.width - viewportPadding) position.x = viewport.width - popupSize.width - viewportPadding;
+				const maxX = Math.max(viewportPadding, viewport.width - popupSize.width - viewportPadding);
+				position.x = Math.min(Math.max(position.x, viewportPadding), maxX);
 			}
 			const maxHeight = placement === "bottom" ? viewport.height - position.y - viewportPadding : targetRect.y - viewportPadding;
 			return {
 				position,
 				placement,
 				flipped,
-				maxHeight: Math.max(200, maxHeight),
-				maxWidth: viewport.width - viewportPadding * 2
+				maxHeight: Math.max(0, maxHeight),
+				maxWidth: Math.max(0, viewport.width - viewportPadding * 2)
 			};
 		}
 		/**
@@ -2576,11 +2959,11 @@
 					opacity: "1"
 				};
 				case "bottom": return {
-					transform: "translateY(-10px)",
+					transform: "translateY(calc(-1 * var(--ld-px-10)))",
 					opacity: "0"
 				};
 				case "top": return {
-					transform: "translateY(10px)",
+					transform: "translateY(var(--ld-px-10))",
 					opacity: "0"
 				};
 				default: return { opacity: "0" };
@@ -2589,323 +2972,43 @@
 		/**
 		* 获取弹出层最终样式（动画结束）
 		*/
-		getFinalStyles(placement) {
+		getFinalStyles(_placement) {
 			return {
 				transform: "translateY(0)",
-				opacity: "1"
-			};
-		}
-		/**
-		* 获取弹出层退出样式
-		*/
-		getExitStyles(placement) {
-			return this.getInitialStyles(placement);
-		}
-		/**
-		* 获取动画时长
-		*/
-		getAnimationDuration() {
-			return this.config.animationDuration;
-		}
-		/**
-		* 检查是否显示遮罩
-		*/
-		shouldShowMask() {
-			return isMobile() && this.config.showMask;
-		}
-		/**
-		* 检查遮罩是否可点击关闭
-		*/
-		isMaskClosable() {
-			return this.config.maskClosable;
-		}
-	};
-	function createPositionManager(config) {
-		return new PositionManager(config);
-	}
-	//#endregion
-	//#region src/themes/presets.ts
-	const miuiTheme = {
-		name: "miui",
-		displayName: "MIUI",
-		description: "小米风格 - 纯净简洁",
-		isDark: false,
-		colors: {
-			background: "#f5f5f5",
-			keyBackground: "#ffffff",
-			keyColor: "#1a1a1a",
-			keyActiveBackground: "#e8e8e8",
-			fnKeyBackground: "#e0e0e0",
-			fnKeyColor: "#666666",
-			fnKeyActiveBackground: "#d0d0d0",
-			primaryBackground: "#ff6700",
-			primaryActiveBackground: "#e55d00",
-			primaryColor: "#ffffff",
-			borderColor: "transparent",
-			dividerColor: "#eeeeee"
-		},
-		sizes: {
-			keyHeight: 46,
-			keyRadius: 8,
-			keyGap: 6,
-			fontSize: 18,
-			fnFontSize: 14,
-			padding: 8
-		},
-		effects: {
-			keyShadow: "none",
-			keyActiveShadow: "none",
-			keyActiveScale: .96,
-			transitionDuration: 100,
-			enableBlur: false,
-			blurAmount: 0,
-			enableRipple: false
-		}
-	};
-	const iosTheme = {
-		name: "ios",
-		displayName: "iOS",
-		description: "Apple 风格 - 精致优雅",
-		isDark: false,
-		colors: {
-			background: "#d1d3d9",
-			keyBackground: "#ffffff",
-			keyColor: "#000000",
-			keyActiveBackground: "#b8bac2",
-			fnKeyBackground: "#a8aab4",
-			fnKeyColor: "#000000",
-			fnKeyActiveBackground: "#9699a3",
-			primaryBackground: "#007aff",
-			primaryActiveBackground: "#0062cc",
-			primaryColor: "#ffffff",
-			borderColor: "transparent",
-			dividerColor: "#c8cad0"
-		},
-		sizes: {
-			keyHeight: 43,
-			keyRadius: 5,
-			keyGap: 6,
-			fontSize: 22,
-			fnFontSize: 15,
-			padding: 4
-		},
-		effects: {
-			keyShadow: "0 1px 0 rgba(0,0,0,0.35)",
-			keyActiveShadow: "0 0 0 rgba(0,0,0,0)",
-			keyActiveScale: 1,
-			transitionDuration: 80,
-			enableBlur: true,
-			blurAmount: 20,
-			enableRipple: false
-		}
-	};
-	const materialTheme = {
-		name: "material",
-		displayName: "Material",
-		description: "Google 风格 - 深邃现代",
-		isDark: true,
-		colors: {
-			background: "#263238",
-			keyBackground: "#37474f",
-			keyColor: "#ffffff",
-			keyActiveBackground: "#455a64",
-			fnKeyBackground: "#455a64",
-			fnKeyColor: "#b0bec5",
-			fnKeyActiveBackground: "#546e7a",
-			primaryBackground: "#4caf50",
-			primaryActiveBackground: "#43a047",
-			primaryColor: "#ffffff",
-			borderColor: "transparent",
-			dividerColor: "#37474f"
-		},
-		sizes: {
-			keyHeight: 48,
-			keyRadius: 4,
-			keyGap: 4,
-			fontSize: 20,
-			fnFontSize: 14,
-			padding: 6
-		},
-		effects: {
-			keyShadow: "0 1px 3px rgba(0,0,0,0.2)",
-			keyActiveShadow: "0 2px 6px rgba(0,0,0,0.3)",
-			keyActiveScale: 1,
-			transitionDuration: 150,
-			enableBlur: false,
-			blurAmount: 0,
-			enableRipple: true
-		}
-	};
-	const minimalTheme = {
-		name: "minimal",
-		displayName: "Minimal",
-		description: "极简风格 - 轻盈透明",
-		isDark: false,
-		colors: {
-			background: "rgba(250, 250, 250, 0.95)",
-			keyBackground: "transparent",
-			keyColor: "#333333",
-			keyActiveBackground: "rgba(0, 0, 0, 0.08)",
-			fnKeyBackground: "transparent",
-			fnKeyColor: "#888888",
-			fnKeyActiveBackground: "rgba(0, 0, 0, 0.08)",
-			primaryBackground: "#333333",
-			primaryActiveBackground: "#000000",
-			primaryColor: "#ffffff",
-			borderColor: "#eeeeee",
-			dividerColor: "#eeeeee"
-		},
-		sizes: {
-			keyHeight: 44,
-			keyRadius: 12,
-			keyGap: 8,
-			fontSize: 17,
-			fnFontSize: 13,
-			padding: 12
-		},
-		effects: {
-			keyShadow: "none",
-			keyActiveShadow: "none",
-			keyActiveScale: .92,
-			transitionDuration: 120,
-			enableBlur: true,
-			blurAmount: 30,
-			enableRipple: false
+				opacity: "1"
+			};
 		}
-	};
-	const darkTheme = {
-		name: "dark",
-		displayName: "Dark",
-		description: "深色模式 - 护眼舒适",
-		isDark: true,
-		colors: {
-			background: "#1c1c1e",
-			keyBackground: "#3a3a3c",
-			keyColor: "#ffffff",
-			keyActiveBackground: "#4a4a4c",
-			fnKeyBackground: "#2c2c2e",
-			fnKeyColor: "#ebebf5",
-			fnKeyActiveBackground: "#3c3c3e",
-			primaryBackground: "#0a84ff",
-			primaryActiveBackground: "#0070e0",
-			primaryColor: "#ffffff",
-			borderColor: "#3a3a3c",
-			dividerColor: "#3a3a3c"
-		},
-		sizes: {
-			keyHeight: 45,
-			keyRadius: 8,
-			keyGap: 6,
-			fontSize: 18,
-			fnFontSize: 14,
-			padding: 8
-		},
-		effects: {
-			keyShadow: "0 1px 2px rgba(0,0,0,0.4)",
-			keyActiveShadow: "0 0 8px rgba(10,132,255,0.3)",
-			keyActiveScale: .97,
-			transitionDuration: 100,
-			enableBlur: true,
-			blurAmount: 20,
-			enableRipple: false
+		/**
+		* 获取弹出层退出样式
+		*/
+		getExitStyles(_placement) {
+			return this.getInitialStyles(_placement);
+		}
+		/**
+		* 获取动画时长
+		*/
+		getAnimationDuration() {
+			return this.config.animationDuration;
+		}
+		/**
+		* 检查是否显示遮罩
+		*/
+		shouldShowMask() {
+			return isMobile() && this.config.showMask;
+		}
+		/**
+		* 检查遮罩是否可点击关闭
+		*/
+		isMaskClosable() {
+			return this.config.maskClosable;
 		}
 	};
-	const presetThemes = {
-		miui: miuiTheme,
-		ios: iosTheme,
-		material: materialTheme,
-		minimal: minimalTheme,
-		dark: darkTheme
-	};
-	const defaultTheme = miuiTheme;
-	//#endregion
-	//#region src/themes/index.ts
-	const customThemes = /* @__PURE__ */ new Map();
-	let currentTheme = defaultTheme;
-	function getTheme(name) {
-		return customThemes.get(name) || presetThemes[name] || defaultTheme;
-	}
-	function registerTheme(theme) {
-		customThemes.set(theme.name, theme);
-	}
-	function getAvailableThemes() {
-		return [...Object.keys(presetThemes), ...customThemes.keys()];
-	}
-	function getAllThemes() {
-		return [...Object.values(presetThemes), ...customThemes.values()];
-	}
-	function setCurrentTheme(name) {
-		currentTheme = getTheme(name);
-		return currentTheme;
-	}
-	function getCurrentTheme() {
-		return currentTheme;
-	}
-	function themeToCSS(theme) {
-		return {
-			"--keyboard-bg": theme.colors.background,
-			"--keyboard-key-bg": theme.colors.keyBackground,
-			"--keyboard-key-color": theme.colors.keyColor,
-			"--keyboard-key-active-bg": theme.colors.keyActiveBackground,
-			"--keyboard-fn-key-bg": theme.colors.fnKeyBackground,
-			"--keyboard-fn-key-color": theme.colors.fnKeyColor,
-			"--keyboard-fn-key-active-bg": theme.colors.fnKeyActiveBackground,
-			"--keyboard-primary-bg": theme.colors.primaryBackground,
-			"--keyboard-primary-active-bg": theme.colors.primaryActiveBackground,
-			"--keyboard-primary-color": theme.colors.primaryColor,
-			"--keyboard-key-height": `${theme.sizes.keyHeight}px`,
-			"--keyboard-key-radius": `${theme.sizes.keyRadius}px`,
-			"--keyboard-key-gap": `${theme.sizes.keyGap}px`,
-			"--keyboard-font-size": `${theme.sizes.fontSize}px`,
-			"--keyboard-fn-font-size": `${theme.sizes.fnFontSize}px`,
-			"--keyboard-padding": `${theme.sizes.padding}px`,
-			"--keyboard-key-shadow": theme.effects.keyShadow,
-			"--keyboard-transition-duration": `${theme.effects.transitionDuration}ms`,
-			"--keyboard-border-color": theme.colors.borderColor,
-			"--keyboard-divider-color": theme.colors.dividerColor
-		};
-	}
-	function applyTheme(element, theme) {
-		const cssVars = themeToCSS(theme);
-		Object.entries(cssVars).forEach(([key, value]) => {
-			if (value) element.style.setProperty(key, value);
-		});
-		element.classList.remove("keyboard-theme-light", "keyboard-theme-dark");
-		element.classList.add(theme.isDark ? "keyboard-theme-dark" : "keyboard-theme-light");
-		element.dataset.theme = theme.name;
-	}
-	function generateThemeStyle(theme) {
-		const cssVars = themeToCSS(theme);
-		return Object.entries(cssVars).filter(([, value]) => value).map(([key, value]) => `${key}: ${value}`).join("; ");
-	}
-	function mergeTheme(base, overrides) {
-		return {
-			...base,
-			...overrides,
-			colors: {
-				...base.colors,
-				...overrides.colors
-			},
-			sizes: {
-				...base.sizes,
-				...overrides.sizes
-			},
-			effects: {
-				...base.effects,
-				...overrides.effects
-			}
-		};
-	}
-	function createTheme(name, baseTheme, customization) {
-		const theme = mergeTheme(getTheme(baseTheme), {
-			...customization,
-			name
-		});
-		registerTheme(theme);
-		return theme;
+	function createPositionManager(config) {
+		return new PositionManager(config);
 	}
 	//#endregion
 	//#region src/managers/keyboard-renderer.ts
+	const rendererStyles = /* @__PURE__ */ new WeakMap();
 	var KeyboardRenderer = class {
 		constructor(options = {}) {
 			/** DOM 元素 */
@@ -2916,10 +3019,14 @@
 			this.targetEl = null;
 			/** 清理函数 */
 			this.cleanupFns = [];
+			this.inputCleanupFns = /* @__PURE__ */ new Set();
+			this.styleDocument = null;
 			/** 是否已销毁 */
 			this.destroyed = false;
 			this.options = options;
-			this.container = options.container || document.body;
+			const container = options.container ?? (typeof document !== "undefined" ? document.body : null);
+			if (!container) throw new Error("[KeyboardRenderer] A DOM container is required in non-browser environments");
+			this.container = container;
 			this.manager = new KeyboardManager(options);
 			this.positionManager = new PositionManager(options.position);
 			if (typeof options.theme === "string") this.theme = getTheme(options.theme);
@@ -2941,17 +3048,12 @@
 			this.manager.on("confirm", ({ value }) => {
 				this.options.onConfirm?.(value);
 			});
-			this.manager.on("switch", () => {
-				if (this.manager.getState().visible) this.render();
-			});
-			this.manager.on("shift", () => {
-				if (this.manager.getState().visible) this.render();
-			});
 		}
 		/**
 		* 打开键盘
 		*/
 		open(target) {
+			if (this.destroyed) return;
 			this.targetEl = target ?? null;
 			this.manager.show(target);
 		}
@@ -2959,19 +3061,23 @@
 		* 关闭键盘
 		*/
 		close() {
+			if (this.destroyed) return;
+			const wasVisible = this.manager.getState().visible;
 			this.manager.hide();
-			this.options.onClose?.();
+			if (wasVisible) this.options.onClose?.();
 		}
 		/**
 		* 切换键盘类型
 		*/
 		switchType(type) {
+			if (this.destroyed) return;
 			this.manager.switchType(type);
 		}
 		/**
 		* 设置主题
 		*/
 		setTheme(theme) {
+			if (this.destroyed) return;
 			if (typeof theme === "string") this.theme = getTheme(theme);
 			else this.theme = theme;
 			if (this.manager.getState().visible) this.render();
@@ -2986,12 +3092,14 @@
 		* 设置值
 		*/
 		setValue(value) {
+			if (this.destroyed) return;
 			this.manager.setValue(value);
 		}
 		/**
 		* 渲染键盘 DOM
 		*/
 		render() {
+			if (this.destroyed) return;
 			const layout = this.manager.getLayout();
 			if (!layout) return;
 			this.unmount();
@@ -3001,14 +3109,18 @@
 			if (isMobileDevice) {
 				this.maskEl = document.createElement("div");
 				this.maskEl.className = "lk-mask";
-				this.maskEl.addEventListener("click", () => this.close());
+				this.maskEl.addEventListener("click", () => {
+					if (this.positionManager.isMaskClosable()) this.close();
+				});
 				this.rootEl.appendChild(this.maskEl);
 			}
 			this.keyboardEl = document.createElement("div");
 			this.keyboardEl.className = `lk-popup lk-popup--${isMobileDevice ? "mobile" : "desktop"}`;
 			const cssVars = themeToCSS(this.theme);
+			const keyboardElement = this.keyboardEl;
+			if (!keyboardElement) return;
 			Object.entries(cssVars).forEach(([key, value]) => {
-				if (value) this.keyboardEl.style.setProperty(key, value);
+				if (value) keyboardElement.style.setProperty(key, value);
 			});
 			const contentEl = this.renderKeyboard(layout);
 			this.keyboardEl.appendChild(contentEl);
@@ -3037,7 +3149,7 @@
 			});
 			if (this.options.closeOnClickOutside !== false && this.keyboardEl) {
 				const cleanup = onClickOutside(this.keyboardEl, (event) => {
-					if (this.targetEl && this.targetEl.contains(event.target)) return;
+					if (this.targetEl && event.target instanceof Node && this.targetEl.contains(event.target)) return;
 					this.close();
 				});
 				this.cleanupFns.push(cleanup);
@@ -3069,8 +3181,11 @@
 					btnEl.type = "button";
 					btnEl.className = this.getKeyClass(key, state.isUpperCase);
 					if (key.disabled) btnEl.disabled = true;
-					if (key.icon) btnEl.innerHTML = key.icon;
-					else btnEl.textContent = typeof key.label === "string" ? key.label : state.isUpperCase ? key.label.upper : key.label.lower;
+					if (key.icon) {
+						const safeIcon = sanitizeSvgIcon(key.icon);
+						if (safeIcon) btnEl.innerHTML = safeIcon;
+						else btnEl.textContent = key.icon;
+					} else btnEl.textContent = typeof key.label === "string" ? key.label : state.isUpperCase ? key.label.upper : key.label.lower;
 					const handler = (e) => {
 						e.preventDefault();
 						e.stopPropagation();
@@ -3110,49 +3225,67 @@
 		* 注入样式（单例）
 		*/
 		injectStyles() {
-			if (document.getElementById("lk-renderer-styles")) return;
-			const style = document.createElement("style");
-			style.id = "lk-renderer-styles";
+			const styleDocument = this.container.ownerDocument;
+			if (this.styleDocument === styleDocument) return;
+			const existing = rendererStyles.get(styleDocument);
+			if (existing) {
+				existing.users += 1;
+				this.styleDocument = styleDocument;
+				return;
+			}
+			const style = styleDocument.createElement("style");
 			style.textContent = `
-      .lk-renderer-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
-      .lk-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9999; opacity: 0; transition: opacity 0.3s ease; }
+      .lk-renderer-root { font-family: var(--ld-font-family); }
+      .lk-mask { position: fixed; inset: 0; z-index: 9999; background: var(--keyboard-mask-bg); opacity: 0; transition: opacity var(--ld-duration-fast); }
       .lk-mask--visible { opacity: 1; }
-      .lk-popup { background: var(--keyboard-bg, #d1d5db); box-shadow: 0 -2px 16px rgba(0,0,0,0.15); overflow: hidden; transform: translateY(20px); opacity: 0; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease; }
+      .lk-popup { overflow: hidden; background: var(--keyboard-bg); box-shadow: var(--ld-shadow-md, none); transform: translateY(var(--ld-px-20)); opacity: 0; transition: transform var(--ld-duration-fast), opacity var(--ld-duration-fast); }
       .lk-popup--visible { transform: translateY(0); opacity: 1; }
-      .lk-popup--desktop { border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1); min-width: 320px; }
-      .lk-popup--mobile { border-top-left-radius: 16px; border-top-right-radius: 16px; padding-bottom: env(safe-area-inset-bottom, 0); }
-      .lk-keyboard { display: flex; flex-direction: column; gap: var(--keyboard-key-gap, 6px); padding: var(--keyboard-padding, 6px); user-select: none; -webkit-user-select: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }
-      .lk-row { display: flex; justify-content: center; gap: var(--keyboard-key-gap, 6px); padding: 0 2px; }
+      .lk-popup--desktop { min-width: var(--ld-px-280); border-radius: var(--ld-radius-lg); box-shadow: var(--ld-shadow-lg, none); }
+      .lk-popup--mobile { border-top-left-radius: var(--ld-radius-lg); border-top-right-radius: var(--ld-radius-lg); padding-bottom: env(safe-area-inset-bottom, var(--ld-px-0)); }
+      .lk-keyboard { display: flex; flex-direction: column; gap: var(--keyboard-key-gap); padding: var(--keyboard-padding); user-select: none; -webkit-user-select: none; font-family: var(--ld-font-family); }
+      .lk-row { display: flex; justify-content: center; gap: var(--keyboard-key-gap); padding: 0 var(--ld-px-2); }
       .lk-row.numpad-row { justify-content: stretch; }
       .lk-row.numpad-row .lk-key-wrapper { flex: 1; }
       .lk-key-wrapper { position: relative; display: inline-flex; }
-      .lk-key { display: inline-flex; align-items: center; justify-content: center; height: var(--keyboard-key-height, 42px); min-width: 32px; width: 100%; padding: 0 6px; border: none; border-radius: var(--keyboard-key-radius, 6px); background: var(--keyboard-key-bg, #fff); color: var(--keyboard-key-color, #333); font-size: var(--keyboard-font-size, 16px); font-weight: 500; cursor: pointer; touch-action: manipulation; box-shadow: var(--keyboard-key-shadow, 0 1px 3px rgba(0,0,0,0.1)); transition: background-color 0.1s, transform 0.1s; }
-      .lk-key:active { background: var(--keyboard-key-active-bg, #e0e0e0); transform: scale(0.95); }
+      .lk-key { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: var(--ld-px-32); height: var(--keyboard-key-height); padding: 0 var(--ld-spacing-xs); border: 0; border-radius: var(--keyboard-key-radius); background: var(--keyboard-key-bg); color: var(--keyboard-key-color); font-size: var(--keyboard-font-size); font-weight: 500; cursor: pointer; touch-action: manipulation; box-shadow: var(--keyboard-key-shadow); transition: background-color var(--ld-duration-fast), transform var(--ld-duration-fast); }
+      .lk-key:active { background: var(--keyboard-key-active-bg); transform: scale(0.95); }
       .lk-key--disabled { opacity: 0.4; cursor: not-allowed; }
-      .lk-key--disabled:active { transform: none; background: var(--keyboard-key-bg, #fff); }
-      .lk-key--backspace, .lk-key--shift, .lk-key--tab, .lk-key--clear, .lk-key--close { background: var(--keyboard-fn-key-bg, #d4d6dc); color: var(--keyboard-fn-key-color, #333); font-size: var(--keyboard-fn-font-size, 14px); }
-      .lk-key--backspace:active, .lk-key--shift:active, .lk-key--tab:active, .lk-key--clear:active, .lk-key--close:active { background: var(--keyboard-fn-key-active-bg, #b8bac0); }
-      .lk-key--active { background: var(--keyboard-key-active-bg, #007aff) !important; color: #fff !important; }
-      .lk-key--done, .lk-key--enter { background: var(--keyboard-primary-bg, #007aff); color: var(--keyboard-primary-color, #fff); font-size: var(--keyboard-fn-font-size, 14px); }
-      .lk-key--done:active, .lk-key--enter:active { background: var(--keyboard-primary-active-bg, #0062cc); }
-      .lk-key--space { background: var(--keyboard-key-bg, #fff); }
+      .lk-key--disabled:active { transform: none; background: var(--keyboard-key-bg); }
+      .lk-key--backspace, .lk-key--shift, .lk-key--tab, .lk-key--clear, .lk-key--close { background: var(--keyboard-fn-key-bg); color: var(--keyboard-fn-key-color); font-size: var(--keyboard-fn-font-size); }
+      .lk-key--backspace:active, .lk-key--shift:active, .lk-key--tab:active, .lk-key--clear:active, .lk-key--close:active { background: var(--keyboard-fn-key-active-bg); }
+      .lk-key--active { background: var(--keyboard-key-active-bg) !important; color: var(--ld-text-inverse) !important; }
+      .lk-key--done, .lk-key--enter { background: var(--keyboard-primary-bg); color: var(--keyboard-primary-color); font-size: var(--keyboard-fn-font-size); }
+      .lk-key--done:active, .lk-key--enter:active { background: var(--keyboard-primary-active-bg); }
+      .lk-key--space { background: var(--keyboard-key-bg); }
       .lk-key svg { pointer-events: none; }
     `;
-			document.head.appendChild(style);
+			style.id = "lk-renderer-styles";
+			styleDocument.head?.appendChild(style);
+			rendererStyles.set(styleDocument, {
+				element: style,
+				users: 1
+			});
+			this.styleDocument = styleDocument;
 		}
 		/**
 		* 绑定到输入框（聚焦时自动打开键盘）
 		*/
 		bindInput(input) {
+			if (this.destroyed) return () => void 0;
 			const handleFocus = () => this.open(input);
 			input.addEventListener("focus", handleFocus);
 			input.setAttribute("readonly", "readonly");
 			input.style.caretColor = "transparent";
-			return () => {
+			let cleaned = false;
+			const cleanup = () => {
+				if (cleaned) return;
+				cleaned = true;
 				input.removeEventListener("focus", handleFocus);
 				input.removeAttribute("readonly");
 				input.style.caretColor = "";
 			};
+			this.inputCleanupFns.add(cleanup);
+			return cleanup;
 		}
 		/**
 		* 销毁渲染器
@@ -3161,15 +3294,71 @@
 			if (this.destroyed) return;
 			this.destroyed = true;
 			this.unmount();
+			this.inputCleanupFns.forEach((cleanup) => cleanup());
+			this.inputCleanupFns.clear();
 			this.manager.destroy();
-			const styleEl = document.getElementById("lk-renderer-styles");
-			if (styleEl) styleEl.remove();
+			if (this.styleDocument) {
+				const entry = rendererStyles.get(this.styleDocument);
+				if (entry) {
+					entry.users -= 1;
+					if (entry.users <= 0) {
+						entry.element.remove();
+						rendererStyles.delete(this.styleDocument);
+					}
+				}
+				this.styleDocument = null;
+			}
 		}
 	};
 	function createKeyboardRenderer(options) {
 		return new KeyboardRenderer(options);
 	}
 	//#endregion
+	//#region src/utils/formatters.ts
+	function formatPhone(value) {
+		const digits = value.replace(/\D/g, "").slice(0, 11);
+		if (digits.length <= 3) return digits;
+		if (digits.length <= 7) return `${digits.slice(0, 3)} ${digits.slice(3)}`;
+		return `${digits.slice(0, 3)} ${digits.slice(3, 7)} ${digits.slice(7)}`;
+	}
+	function formatBankCard(value) {
+		return value.replace(/\D/g, "").slice(0, 19).replace(/(\d{4})(?=\d)/g, "$1 ");
+	}
+	function formatAmount(value, decimalPlaces = 2) {
+		let result = value.replace(/[^\d.]/g, "");
+		const parts = result.split(".");
+		if (parts.length > 2) result = `${parts[0]}.${parts.slice(1).join("")}`;
+		if (parts.length === 2 && parts[1].length > decimalPlaces) result = `${parts[0]}.${parts[1].slice(0, decimalPlaces)}`;
+		if (result.length > 1 && result.startsWith("0") && result[1] !== ".") result = result.replace(/^0+/, "") || "0";
+		return result;
+	}
+	function formatIdCard(value) {
+		return value.replace(/[^\dX]/gi, "").slice(0, 18).toUpperCase();
+	}
+	function formatLicensePlate(value) {
+		return value.toUpperCase().slice(0, 8);
+	}
+	function formatVerifyCode(value, length = 6) {
+		return value.replace(/\D/g, "").slice(0, length);
+	}
+	const formatters = /* @__PURE__ */ new Map([
+		["phone", formatPhone],
+		["bankcard", formatBankCard],
+		["idcard", formatIdCard],
+		["license-plate", formatLicensePlate],
+		["verifycode", formatVerifyCode]
+	]);
+	function registerFormatter(name, formatter) {
+		formatters.set(name, formatter);
+	}
+	function getFormatter(name) {
+		return formatters.get(name);
+	}
+	function applyFormatter(name, value) {
+		const formatter = formatters.get(name);
+		return formatter ? formatter(value) : value;
+	}
+	//#endregion
 	//#region src/utils/random.ts
 	function shuffleArray(array) {
 		const result = [...array];
@@ -3228,7 +3417,7 @@
 	}
 	function createRandomNumberLayout(options) {
 		const { keysPerRow = 3, includeBackspace = true, includeDone = true, includeClear = false } = options || {};
-		const rows = chunkArray(getRandomNumbers().map((n, i) => createCharKey(n, i)), keysPerRow).map((keys, index) => ({
+		const rows = chunkArray(getRandomNumbers().map((n, i) => createCharKey(n, i)), keysPerRow).map((keys) => ({
 			className: "numpad-row",
 			keys
 		}));
@@ -3450,51 +3639,6 @@
 		}
 	}
 	//#endregion
-	//#region src/utils/formatters.ts
-	function formatPhone(value) {
-		const digits = value.replace(/\D/g, "").slice(0, 11);
-		if (digits.length <= 3) return digits;
-		if (digits.length <= 7) return `${digits.slice(0, 3)} ${digits.slice(3)}`;
-		return `${digits.slice(0, 3)} ${digits.slice(3, 7)} ${digits.slice(7)}`;
-	}
-	function formatBankCard(value) {
-		return value.replace(/\D/g, "").slice(0, 19).replace(/(\d{4})(?=\d)/g, "$1 ");
-	}
-	function formatAmount(value, decimalPlaces = 2) {
-		let result = value.replace(/[^\d.]/g, "");
-		const parts = result.split(".");
-		if (parts.length > 2) result = parts[0] + "." + parts.slice(1).join("");
-		if (parts.length === 2 && parts[1].length > decimalPlaces) result = parts[0] + "." + parts[1].slice(0, decimalPlaces);
-		if (result.length > 1 && result.startsWith("0") && result[1] !== ".") result = result.replace(/^0+/, "") || "0";
-		return result;
-	}
-	function formatIdCard(value) {
-		return value.replace(/[^\dXx]/g, "").slice(0, 18).toUpperCase();
-	}
-	function formatLicensePlate(value) {
-		return value.toUpperCase().slice(0, 8);
-	}
-	function formatVerifyCode(value, length = 6) {
-		return value.replace(/\D/g, "").slice(0, length);
-	}
-	const formatters = /* @__PURE__ */ new Map([
-		["phone", formatPhone],
-		["bankcard", formatBankCard],
-		["idcard", formatIdCard],
-		["license-plate", formatLicensePlate],
-		["verifycode", formatVerifyCode]
-	]);
-	function registerFormatter(name, formatter) {
-		formatters.set(name, formatter);
-	}
-	function getFormatter(name) {
-		return formatters.get(name);
-	}
-	function applyFormatter(name, value) {
-		const formatter = formatters.get(name);
-		return formatter ? formatter(value) : value;
-	}
-	//#endregion
 	exports.EMAIL_SUFFIXES = EMAIL_SUFFIXES;
 	exports.EventEmitter = EventEmitter;
 	exports.ICONS = ICONS;
@@ -3585,6 +3729,7 @@
 	exports.registerLayout = registerLayout;
 	exports.registerLayouts = registerLayouts;
 	exports.registerTheme = registerTheme;
+	exports.sanitizeSvgIcon = sanitizeSvgIcon;
 	exports.scrollIntoViewIfNeeded = scrollIntoViewIfNeeded;
 	exports.searchLayout = searchLayout;
 	exports.setCurrentTheme = setCurrentTheme;