@composy/keyboard-core 0.0.1 → 0.0.2

package/lib/managers/position-manager.cjs

@@ -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                    *
 * ***********************************
@@ -24,29 +24,48 @@ const DEFAULT_CONFIG = {
 	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) {
@@ -64,15 +83,17 @@ var PositionManager = class {
 	*/
 	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)"
 		};
 	}
@@ -82,8 +103,8 @@ var PositionManager = class {
 	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
@@ -125,16 +146,16 @@ var PositionManager = class {
 			}
 		}
 		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)
 		};
 	}
 	/**
@@ -147,11 +168,11 @@ var PositionManager = class {
 				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" };
@@ -160,7 +181,7 @@ var PositionManager = class {
 	/**
 	* 获取弹出层最终样式（动画结束）
 	*/
-	getFinalStyles(placement) {
+	getFinalStyles(_placement) {
 		return {
 			transform: "translateY(0)",
 			opacity: "1"
@@ -169,8 +190,8 @@ var PositionManager = class {
 	/**
 	* 获取弹出层退出样式
 	*/
-	getExitStyles(placement) {
-		return this.getInitialStyles(placement);
+	getExitStyles(_placement) {
+		return this.getInitialStyles(_placement);
 	}
 	/**
 	* 获取动画时长

package/lib/managers/position-manager.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"position-manager.cjs","names":[],"sources":["../../src/managers/position-manager.ts"],"sourcesContent":["/**\n * 弹出位置管理器\n * @module managers/position-manager\n */\n\nimport type {\n  BoundingRect,\n  PopupPlacement,\n  PopupPositionConfig,\n  PopupPositionResult,\n  Position,\n} from '../types'\nimport { getBoundingRect } from '../utils/dom'\nimport { getViewportInfo, isMobile } from '../utils/device'\n\n/**\n * 默认位置配置\n */\nconst DEFAULT_CONFIG: Required<PopupPositionConfig> = {\n  offset: { x: 0, y: 8 },\n  autoAdjust: true,\n  viewportPadding: 8,\n  desktopPlacement: 'bottom',\n  mobilePlacement: 'bottom-sheet',\n  showMask: true,\n  maskClosable: true,\n  animationDuration: 300,\n}\n\n/**\n * 位置管理器类\n * 计算键盘弹出层的位置，支持 PC 和移动端自适应\n */\nexport class PositionManager {\n  private config: Required<PopupPositionConfig>\n\n  constructor(config: PopupPositionConfig = {}) {\n    this.config = { ...DEFAULT_CONFIG, ...config }\n  }\n\n  /**\n   * 更新配置\n   */\n  updateConfig(config: Partial<PopupPositionConfig>): void {\n    Object.assign(this.config, config)\n  }\n\n  /**\n   * 获取配置\n   */\n  getConfig(): Readonly<Required<PopupPositionConfig>> {\n    return { ...this.config }\n  }\n\n  /**\n   * 计算弹出位置\n   * @param targetElement - 目标元素（如 input）\n   * @param popupSize - 弹出层尺寸\n   * @returns 位置计算结果\n   */\n  calculate(\n    targetElement: HTMLElement | null,\n    popupSize: { width: number; height: number },\n  ): PopupPositionResult {\n    const viewport = getViewportInfo()\n    const isMobileDevice = isMobile()\n\n    // 移动端使用 bottom-sheet\n    if (isMobileDevice && this.config.mobilePlacement === 'bottom-sheet') {\n      return this.calculateBottomSheet(viewport, popupSize)\n    }\n\n    // PC 端或移动端非 bottom-sheet\n    if (!targetElement) {\n      // 无目标元素，居中显示\n      return this.calculateCentered(viewport, popupSize)\n    }\n\n    const targetRect = getBoundingRect(targetElement)\n    const placement = isMobileDevice\n      ? this.config.mobilePlacement\n      : this.config.desktopPlacement\n\n    // bottom-sheet 已经在前面处理，这里只会是 'bottom' 或 'top'\n    const relativePlace = placement === 'bottom-sheet' ? 'bottom' : placement\n    return this.calculateRelativeToTarget(targetRect, popupSize, viewport, relativePlace)\n  }\n\n  /**\n   * 计算 bottom-sheet 位置（移动端从底部滑出）\n   */\n  private calculateBottomSheet(\n    viewport: { width: number; height: number; scrollY: number; safeArea?: { bottom: number } },\n    popupSize: { width: number; height: number },\n  ): PopupPositionResult {\n    const safeAreaBottom = viewport.safeArea?.bottom ?? 0\n\n    return {\n      position: {\n        x: 0,\n        y: viewport.height - popupSize.height - safeAreaBottom,\n      },\n      placement: 'bottom-sheet',\n      flipped: false,\n      maxHeight: viewport.height * 0.6, // 最大占屏幕高度的 60%\n      maxWidth: viewport.width,\n      transform: 'translateY(0)',\n    }\n  }\n\n  /**\n   * 计算居中位置\n   */\n  private calculateCentered(\n    viewport: { width: number; height: number },\n    popupSize: { width: number; height: number },\n  ): PopupPositionResult {\n    return {\n      position: {\n        x: (viewport.width - popupSize.width) / 2,\n        y: (viewport.height - popupSize.height) / 2,\n      },\n      placement: 'bottom',\n      flipped: false,\n    }\n  }\n\n  /**\n   * 计算相对于目标元素的位置\n   */\n  private calculateRelativeToTarget(\n    targetRect: BoundingRect,\n    popupSize: { width: number; height: number },\n    viewport: { width: number; height: number; scrollX: number; scrollY: number },\n    preferredPlacement: Exclude<PopupPlacement, 'bottom-sheet'>,\n  ): PopupPositionResult {\n    const { offset, viewportPadding, autoAdjust } = this.config\n\n    let position: Position\n    let placement = preferredPlacement\n    let flipped = false\n\n    // 计算 bottom 位置（左对齐）\n    const bottomPosition: Position = {\n      x: targetRect.x + (offset.x ?? 0),\n      y: targetRect.y + targetRect.height + (offset.y ?? 8),\n    }\n\n    // 计算 top 位置（左对齐）\n    const topPosition: Position = {\n      x: targetRect.x + (offset.x ?? 0),\n      y: targetRect.y - popupSize.height - (offset.y ?? 8),\n    }\n\n    if (preferredPlacement === 'bottom') {\n      position = bottomPosition\n\n      // 检查是否需要翻转到顶部\n      if (autoAdjust && position.y + popupSize.height > viewport.height - viewportPadding) {\n        // 检查顶部是否有足够空间\n        if (topPosition.y >= viewportPadding) {\n          position = topPosition\n          placement = 'top'\n          flipped = true\n        }\n      }\n    }\n    else {\n      position = topPosition\n\n      // 检查是否需要翻转到底部\n      if (autoAdjust && position.y < viewportPadding) {\n        // 检查底部是否有足够空间\n        if (bottomPosition.y + popupSize.height <= viewport.height - viewportPadding) {\n          position = bottomPosition\n          placement = 'bottom'\n          flipped = true\n        }\n      }\n    }\n\n    // 水平方向调整，确保不超出视口\n    if (autoAdjust) {\n      // 左边界检查\n      if (position.x < viewportPadding) {\n        position.x = viewportPadding\n      }\n\n      // 右边界检查\n      if (position.x + popupSize.width > viewport.width - viewportPadding) {\n        position.x = viewport.width - popupSize.width - viewportPadding\n      }\n    }\n\n    // 计算最大可用高度\n    const maxHeight = placement === 'bottom'\n      ? viewport.height - position.y - viewportPadding\n      : targetRect.y - viewportPadding\n\n    return {\n      position,\n      placement,\n      flipped,\n      maxHeight: Math.max(200, maxHeight), // 最小高度 200px\n      maxWidth: viewport.width - viewportPadding * 2,\n    }\n  }\n\n  /**\n   * 获取弹出层初始样式（用于动画）\n   */\n  getInitialStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration> {\n    switch (placement) {\n      case 'bottom-sheet':\n        return {\n          transform: 'translateY(100%)',\n          opacity: '1',\n        }\n      case 'bottom':\n        return {\n          transform: 'translateY(-10px)',\n          opacity: '0',\n        }\n      case 'top':\n        return {\n          transform: 'translateY(10px)',\n          opacity: '0',\n        }\n      default:\n        return {\n          opacity: '0',\n        }\n    }\n  }\n\n  /**\n   * 获取弹出层最终样式（动画结束）\n   */\n  getFinalStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration> {\n    return {\n      transform: 'translateY(0)',\n      opacity: '1',\n    }\n  }\n\n  /**\n   * 获取弹出层退出样式\n   */\n  getExitStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration> {\n    return this.getInitialStyles(placement)\n  }\n\n  /**\n   * 获取动画时长\n   */\n  getAnimationDuration(): number {\n    return this.config.animationDuration\n  }\n\n  /**\n   * 检查是否显示遮罩\n   */\n  shouldShowMask(): boolean {\n    return isMobile() && this.config.showMask\n  }\n\n  /**\n   * 检查遮罩是否可点击关闭\n   */\n  isMaskClosable(): boolean {\n    return this.config.maskClosable\n  }\n}\n\n/**\n * 创建位置管理器实例\n */\nexport function createPositionManager(config?: PopupPositionConfig): PositionManager {\n  return new PositionManager(config)\n}\n"],"mappings":"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"}
+{"version":3,"file":"position-manager.cjs","names":[],"sources":["../../src/managers/position-manager.ts"],"sourcesContent":["/**\r\n * 弹出位置管理器\r\n * @module managers/position-manager\r\n */\r\n\r\nimport type {\r\n  BoundingRect,\r\n  PopupPlacement,\r\n  PopupPositionConfig,\r\n  PopupPositionResult,\r\n  Position,\r\n} from '../types'\r\nimport { getViewportInfo, isMobile } from '../utils/device'\r\nimport { getBoundingRect } from '../utils/dom'\r\n\r\n/**\r\n * 默认位置配置\r\n */\r\nconst DEFAULT_CONFIG: Required<PopupPositionConfig> = {\r\n  offset: { x: 0, y: 8 },\r\n  autoAdjust: true,\r\n  viewportPadding: 8,\r\n  desktopPlacement: 'bottom',\r\n  mobilePlacement: 'bottom-sheet',\r\n  showMask: true,\r\n  maskClosable: true,\r\n  animationDuration: 300,\r\n}\r\n\r\nfunction mergeConfig(\r\n  config: PopupPositionConfig = {}\r\n): Required<PopupPositionConfig> {\r\n  return {\r\n    ...DEFAULT_CONFIG,\r\n    ...config,\r\n    offset: {\r\n      ...DEFAULT_CONFIG.offset,\r\n      ...config.offset,\r\n    },\r\n  }\r\n}\r\n\r\n/**\r\n * 位置管理器类\r\n * 计算键盘弹出层的位置，支持 PC 和移动端自适应\r\n */\r\nexport class PositionManager {\r\n  private config: Required<PopupPositionConfig>\r\n\r\n  constructor(config: PopupPositionConfig = {}) {\r\n    this.config = mergeConfig(config)\r\n  }\r\n\r\n  /**\r\n   * 更新配置\r\n   */\r\n  updateConfig(config: Partial<PopupPositionConfig>): void {\r\n    this.config = mergeConfig({\r\n      ...this.config,\r\n      ...config,\r\n      offset: { ...this.config.offset, ...config.offset },\r\n    })\r\n  }\r\n\r\n  /**\r\n   * 获取配置\r\n   */\r\n  getConfig(): Readonly<Required<PopupPositionConfig>> {\r\n    return { ...this.config, offset: { ...this.config.offset } }\r\n  }\r\n\r\n  /**\r\n   * 计算弹出位置\r\n   * @param targetElement - 目标元素（如 input）\r\n   * @param popupSize - 弹出层尺寸\r\n   * @param popupSize.width - Popup width\r\n   * @param popupSize.height - Popup height\r\n   * @returns 位置计算结果\r\n   */\r\n  calculate(\r\n    targetElement: HTMLElement | null,\r\n    popupSize: { width: number; height: number }\r\n  ): PopupPositionResult {\r\n    const viewport = getViewportInfo()\r\n    const isMobileDevice = isMobile()\r\n\r\n    // 移动端使用 bottom-sheet\r\n    if (isMobileDevice && this.config.mobilePlacement === 'bottom-sheet') {\r\n      return this.calculateBottomSheet(viewport, popupSize)\r\n    }\r\n\r\n    // PC 端或移动端非 bottom-sheet\r\n    if (!targetElement) {\r\n      // 无目标元素，居中显示\r\n      return this.calculateCentered(viewport, popupSize)\r\n    }\r\n\r\n    const targetRect = getBoundingRect(targetElement)\r\n    const placement = isMobileDevice\r\n      ? this.config.mobilePlacement\r\n      : this.config.desktopPlacement\r\n\r\n    // bottom-sheet 已经在前面处理，这里只会是 'bottom' 或 'top'\r\n    const relativePlace = placement === 'bottom-sheet' ? 'bottom' : placement\r\n    return this.calculateRelativeToTarget(\r\n      targetRect,\r\n      popupSize,\r\n      viewport,\r\n      relativePlace\r\n    )\r\n  }\r\n\r\n  /**\r\n   * 计算 bottom-sheet 位置（移动端从底部滑出）\r\n   */\r\n  private calculateBottomSheet(\r\n    viewport: {\r\n      width: number\r\n      height: number\r\n      scrollY: number\r\n      safeArea?: { bottom: number }\r\n    },\r\n    popupSize: { width: number; height: number }\r\n  ): PopupPositionResult {\r\n    const safeAreaBottom = viewport.safeArea?.bottom ?? 0\r\n    const maxHeight = Math.max(0, viewport.height * 0.6 - safeAreaBottom)\r\n    const visibleHeight = Math.min(Math.max(0, popupSize.height), maxHeight)\r\n\r\n    return {\r\n      position: {\r\n        x: 0,\r\n        y: Math.max(0, viewport.height - visibleHeight - safeAreaBottom),\r\n      },\r\n      placement: 'bottom-sheet',\r\n      flipped: false,\r\n      maxHeight,\r\n      maxWidth: Math.max(0, viewport.width),\r\n      transform: 'translateY(0)',\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 计算居中位置\r\n   */\r\n  private calculateCentered(\r\n    viewport: { width: number; height: number },\r\n    popupSize: { width: number; height: number }\r\n  ): PopupPositionResult {\r\n    return {\r\n      position: {\r\n        x: Math.max(0, (viewport.width - popupSize.width) / 2),\r\n        y: Math.max(0, (viewport.height - popupSize.height) / 2),\r\n      },\r\n      placement: 'bottom',\r\n      flipped: false,\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 计算相对于目标元素的位置\r\n   */\r\n  private calculateRelativeToTarget(\r\n    targetRect: BoundingRect,\r\n    popupSize: { width: number; height: number },\r\n    viewport: {\r\n      width: number\r\n      height: number\r\n      scrollX: number\r\n      scrollY: number\r\n    },\r\n    preferredPlacement: Exclude<PopupPlacement, 'bottom-sheet'>\r\n  ): PopupPositionResult {\r\n    const { offset, viewportPadding, autoAdjust } = this.config\r\n\r\n    let position: Position\r\n    let placement = preferredPlacement\r\n    let flipped = false\r\n\r\n    // 计算 bottom 位置（左对齐）\r\n    const bottomPosition: Position = {\r\n      x: targetRect.x + (offset.x ?? 0),\r\n      y: targetRect.y + targetRect.height + (offset.y ?? 8),\r\n    }\r\n\r\n    // 计算 top 位置（左对齐）\r\n    const topPosition: Position = {\r\n      x: targetRect.x + (offset.x ?? 0),\r\n      y: targetRect.y - popupSize.height - (offset.y ?? 8),\r\n    }\r\n\r\n    if (preferredPlacement === 'bottom') {\r\n      position = bottomPosition\r\n\r\n      // 检查是否需要翻转到顶部\r\n      if (\r\n        autoAdjust &&\r\n        position.y + popupSize.height > viewport.height - viewportPadding\r\n      ) {\r\n        // 检查顶部是否有足够空间\r\n        if (topPosition.y >= viewportPadding) {\r\n          position = topPosition\r\n          placement = 'top'\r\n          flipped = true\r\n        }\r\n      }\r\n    } else {\r\n      position = topPosition\r\n\r\n      // 检查是否需要翻转到底部\r\n      if (autoAdjust && position.y < viewportPadding) {\r\n        // 检查底部是否有足够空间\r\n        if (\r\n          bottomPosition.y + popupSize.height <=\r\n          viewport.height - viewportPadding\r\n        ) {\r\n          position = bottomPosition\r\n          placement = 'bottom'\r\n          flipped = true\r\n        }\r\n      }\r\n    }\r\n\r\n    // 水平方向调整，确保不超出视口\r\n    if (autoAdjust) {\r\n      const maxX = Math.max(\r\n        viewportPadding,\r\n        viewport.width - popupSize.width - viewportPadding\r\n      )\r\n      position.x = Math.min(Math.max(position.x, viewportPadding), maxX)\r\n    }\r\n\r\n    // 计算最大可用高度\r\n    const maxHeight =\r\n      placement === 'bottom'\r\n        ? viewport.height - position.y - viewportPadding\r\n        : targetRect.y - viewportPadding\r\n\r\n    return {\r\n      position,\r\n      placement,\r\n      flipped,\r\n      maxHeight: Math.max(0, maxHeight),\r\n      maxWidth: Math.max(0, viewport.width - viewportPadding * 2),\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取弹出层初始样式（用于动画）\r\n   */\r\n  getInitialStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration> {\r\n    switch (placement) {\r\n      case 'bottom-sheet':\r\n        return {\r\n          transform: 'translateY(100%)',\r\n          opacity: '1',\r\n        }\r\n      case 'bottom':\r\n        return {\r\n          transform: 'translateY(calc(-1 * var(--ld-px-10)))',\r\n          opacity: '0',\r\n        }\r\n      case 'top':\r\n        return {\r\n          transform: 'translateY(var(--ld-px-10))',\r\n          opacity: '0',\r\n        }\r\n      default:\r\n        return {\r\n          opacity: '0',\r\n        }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取弹出层最终样式（动画结束）\r\n   */\r\n  getFinalStyles(_placement: PopupPlacement): Partial<CSSStyleDeclaration> {\r\n    return {\r\n      transform: 'translateY(0)',\r\n      opacity: '1',\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取弹出层退出样式\r\n   */\r\n  getExitStyles(_placement: PopupPlacement): Partial<CSSStyleDeclaration> {\r\n    return this.getInitialStyles(_placement)\r\n  }\r\n\r\n  /**\r\n   * 获取动画时长\r\n   */\r\n  getAnimationDuration(): number {\r\n    return this.config.animationDuration\r\n  }\r\n\r\n  /**\r\n   * 检查是否显示遮罩\r\n   */\r\n  shouldShowMask(): boolean {\r\n    return isMobile() && this.config.showMask\r\n  }\r\n\r\n  /**\r\n   * 检查遮罩是否可点击关闭\r\n   */\r\n  isMaskClosable(): boolean {\r\n    return this.config.maskClosable\r\n  }\r\n}\r\n\r\n/**\r\n * 创建位置管理器实例\r\n */\r\nexport function createPositionManager(\r\n  config?: PopupPositionConfig\r\n): PositionManager {\r\n  return new PositionManager(config)\r\n}\r\n"],"mappings":"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"}

package/lib/managers/{position-manager.d.ts → position-manager.d.cts}

@@ -22,6 +22,8 @@ export declare class PositionManager {
      * 计算弹出位置
      * @param targetElement - 目标元素（如 input）
      * @param popupSize - 弹出层尺寸
+     * @param popupSize.width - Popup width
+     * @param popupSize.height - Popup height
      * @returns 位置计算结果
      */
     calculate(targetElement: HTMLElement | null, popupSize: {
@@ -47,11 +49,11 @@ export declare class PositionManager {
     /**
      * 获取弹出层最终样式（动画结束）
      */
-    getFinalStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration>;
+    getFinalStyles(_placement: PopupPlacement): Partial<CSSStyleDeclaration>;
     /**
      * 获取弹出层退出样式
      */
-    getExitStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration>;
+    getExitStyles(_placement: PopupPlacement): Partial<CSSStyleDeclaration>;
     /**
      * 获取动画时长
      */
@@ -69,4 +71,3 @@ export declare class PositionManager {
  * 创建位置管理器实例
  */
 export declare function createPositionManager(config?: PopupPositionConfig): PositionManager;
-//# sourceMappingURL=position-manager.d.ts.map

package/lib/themes/index.cjs

@@ -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                    *
 * ***********************************
@@ -50,6 +50,7 @@ function themeToCSS(theme) {
 		"--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

package/lib/themes/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/themes/index.ts"],"sourcesContent":["/**\n * 主题管理模块\n * @module themes\n */\n\nimport type { ThemeConfig, ThemeCSSVariables, ThemeName } from './types'\nimport { defaultTheme, presetThemes } from './presets'\n\nexport * from './types'\nexport * from './presets'\n\n/**\n * 自定义主题存储\n */\nconst customThemes: Map<string, ThemeConfig> = new Map()\n\n/**\n * 当前激活的主题\n */\nlet currentTheme: ThemeConfig = defaultTheme\n\n/**\n * 获取主题配置\n * @param name - 主题名称\n * @returns 主题配置，如果不存在则返回默认主题\n */\nexport function getTheme(name: ThemeName | string): ThemeConfig {\n  return customThemes.get(name) || presetThemes[name] || defaultTheme\n}\n\n/**\n * 注册自定义主题\n * @param theme - 主题配置\n */\nexport function registerTheme(theme: ThemeConfig): void {\n  customThemes.set(theme.name, theme)\n}\n\n/**\n * 获取所有可用主题\n * @returns 主题名称列表\n */\nexport function getAvailableThemes(): string[] {\n  return [...Object.keys(presetThemes), ...customThemes.keys()]\n}\n\n/**\n * 获取所有主题配置\n * @returns 主题配置列表\n */\nexport function getAllThemes(): ThemeConfig[] {\n  return [\n    ...Object.values(presetThemes),\n    ...customThemes.values(),\n  ]\n}\n\n/**\n * 设置当前主题\n * @param name - 主题名称\n */\nexport function setCurrentTheme(name: ThemeName | string): ThemeConfig {\n  currentTheme = getTheme(name)\n  return currentTheme\n}\n\n/**\n * 获取当前主题\n */\nexport function getCurrentTheme(): ThemeConfig {\n  return currentTheme\n}\n\n/**\n * 将主题配置转换为 CSS 变量\n * @param theme - 主题配置\n * @returns CSS 变量对象\n */\nexport function themeToCSS(theme: ThemeConfig): ThemeCSSVariables {\n  return {\n    '--keyboard-bg': theme.colors.background,\n    '--keyboard-key-bg': theme.colors.keyBackground,\n    '--keyboard-key-color': theme.colors.keyColor,\n    '--keyboard-key-active-bg': theme.colors.keyActiveBackground,\n    '--keyboard-fn-key-bg': theme.colors.fnKeyBackground,\n    '--keyboard-fn-key-color': theme.colors.fnKeyColor,\n    '--keyboard-fn-key-active-bg': theme.colors.fnKeyActiveBackground,\n    '--keyboard-primary-bg': theme.colors.primaryBackground,\n    '--keyboard-primary-active-bg': theme.colors.primaryActiveBackground,\n    '--keyboard-primary-color': theme.colors.primaryColor,\n    '--keyboard-key-height': `${theme.sizes.keyHeight}px`,\n    '--keyboard-key-radius': `${theme.sizes.keyRadius}px`,\n    '--keyboard-key-gap': `${theme.sizes.keyGap}px`,\n    '--keyboard-font-size': `${theme.sizes.fontSize}px`,\n    '--keyboard-fn-font-size': `${theme.sizes.fnFontSize}px`,\n    '--keyboard-padding': `${theme.sizes.padding}px`,\n    '--keyboard-key-shadow': theme.effects.keyShadow,\n    '--keyboard-transition-duration': `${theme.effects.transitionDuration}ms`,\n    '--keyboard-border-color': theme.colors.borderColor,\n    '--keyboard-divider-color': theme.colors.dividerColor,\n  }\n}\n\n/**\n * 将 CSS 变量应用到元素\n * @param element - 目标元素\n * @param theme - 主题配置\n */\nexport function applyTheme(element: HTMLElement, theme: ThemeConfig): void {\n  const cssVars = themeToCSS(theme)\n  Object.entries(cssVars).forEach(([key, value]) => {\n    if (value) {\n      element.style.setProperty(key, value)\n    }\n  })\n\n  // 添加主题类名\n  element.classList.remove('keyboard-theme-light', 'keyboard-theme-dark')\n  element.classList.add(theme.isDark ? 'keyboard-theme-dark' : 'keyboard-theme-light')\n  element.dataset.theme = theme.name\n}\n\n/**\n * 生成主题的内联样式字符串\n * @param theme - 主题配置\n * @returns 内联样式字符串\n */\nexport function generateThemeStyle(theme: ThemeConfig): string {\n  const cssVars = themeToCSS(theme)\n  return Object.entries(cssVars)\n    .filter(([, value]) => value)\n    .map(([key, value]) => `${key}: ${value}`)\n    .join('; ')\n}\n\n/**\n * 合并主题配置\n * @param base - 基础主题\n * @param overrides - 覆盖配置\n * @returns 合并后的主题\n */\nexport function mergeTheme(\n  base: ThemeConfig,\n  overrides: Partial<ThemeConfig>,\n): ThemeConfig {\n  return {\n    ...base,\n    ...overrides,\n    colors: { ...base.colors, ...overrides.colors },\n    sizes: { ...base.sizes, ...overrides.sizes },\n    effects: { ...base.effects, ...overrides.effects },\n  }\n}\n\n/**\n * 创建自定义主题\n * @param name - 主题名称\n * @param baseTheme - 基础主题名称\n * @param customization - 自定义配置\n */\nexport function createTheme(\n  name: string,\n  baseTheme: ThemeName | string,\n  customization: Partial<Omit<ThemeConfig, 'name'>>,\n): ThemeConfig {\n  const base = getTheme(baseTheme)\n  const theme = mergeTheme(base, {\n    ...customization,\n    name,\n  })\n  registerTheme(theme)\n  return theme\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,+BAAyC,IAAI,IAAI;AAKvD,IAAI,eAA4B,gBAAA;AAOzB,SAAS,SAAS,MAAuC;CAC9D,OAAO,aAAa,IAAI,IAAI,KAAK,gBAAA,aAAa,SAAS,gBAAA;AACzD;AAMO,SAAS,cAAc,OAA0B;CACtD,aAAa,IAAI,MAAM,MAAM,KAAK;AACpC;AAMO,SAAS,qBAA+B;CAC7C,OAAO,CAAC,GAAG,OAAO,KAAK,gBAAA,YAAY,GAAG,GAAG,aAAa,KAAK,CAAC;AAC9D;AAMO,SAAS,eAA8B;CAC5C,OAAO,CACL,GAAG,OAAO,OAAO,gBAAA,YAAY,GAC7B,GAAG,aAAa,OAAO,CACzB;AACF;AAMO,SAAS,gBAAgB,MAAuC;CACrE,eAAe,SAAS,IAAI;CAC5B,OAAO;AACT;AAKO,SAAS,kBAA+B;CAC7C,OAAO;AACT;AAOO,SAAS,WAAW,OAAuC;CAChE,OAAO;EACL,iBAAiB,MAAM,OAAO;EAC9B,qBAAqB,MAAM,OAAO;EAClC,wBAAwB,MAAM,OAAO;EACrC,4BAA4B,MAAM,OAAO;EACzC,wBAAwB,MAAM,OAAO;EACrC,2BAA2B,MAAM,OAAO;EACxC,+BAA+B,MAAM,OAAO;EAC5C,yBAAyB,MAAM,OAAO;EACtC,gCAAgC,MAAM,OAAO;EAC7C,4BAA4B,MAAM,OAAO;EACzC,yBAAyB,GAAG,MAAM,MAAM,UAAS;EACjD,yBAAyB,GAAG,MAAM,MAAM,UAAS;EACjD,sBAAsB,GAAG,MAAM,MAAM,OAAM;EAC3C,wBAAwB,GAAG,MAAM,MAAM,SAAQ;EAC/C,2BAA2B,GAAG,MAAM,MAAM,WAAU;EACpD,sBAAsB,GAAG,MAAM,MAAM,QAAO;EAC5C,yBAAyB,MAAM,QAAQ;EACvC,kCAAkC,GAAG,MAAM,QAAQ,mBAAkB;EACrE,2BAA2B,MAAM,OAAO;EACxC,4BAA4B,MAAM,OAAO;CAC3C;AACF;AAOO,SAAS,WAAW,SAAsB,OAA0B;CACzE,MAAM,UAAU,WAAW,KAAK;CAChC,OAAO,QAAQ,OAAO,CAAA,CAAE,SAAS,CAAC,KAAK,WAAW;EAChD,IAAI,OACF,QAAQ,MAAM,YAAY,KAAK,KAAK;CAExC,CAAC;CAGD,QAAQ,UAAU,OAAO,wBAAwB,qBAAqB;CACtE,QAAQ,UAAU,IAAI,MAAM,SAAS,wBAAwB,sBAAsB;CACnF,QAAQ,QAAQ,QAAQ,MAAM;AAChC;AAOO,SAAS,mBAAmB,OAA4B;CAC7D,MAAM,UAAU,WAAW,KAAK;CAChC,OAAO,OAAO,QAAQ,OAAO,CAAA,CAC1B,QAAQ,GAAG,WAAW,KAAK,CAAA,CAC3B,KAAK,CAAC,KAAK,WAAW,GAAG,IAAG,IAAK,OAAO,CAAA,CACxC,KAAK,IAAI;AACd;AAQO,SAAS,WACd,MACA,WACa;CACb,OAAO;EACL,GAAG;EACH,GAAG;EACH,QAAQ;GAAE,GAAG,KAAK;GAAQ,GAAG,UAAU;EAAO;EAC9C,OAAO;GAAE,GAAG,KAAK;GAAO,GAAG,UAAU;EAAM;EAC3C,SAAS;GAAE,GAAG,KAAK;GAAS,GAAG,UAAU;EAAQ;CACnD;AACF;AAQO,SAAS,YACd,MACA,WACA,eACa;CAEb,MAAM,QAAQ,WADD,SAAS,SACG,GAAM;EAC7B,GAAG;EACH;CACF,CAAC;CACD,cAAc,KAAK;CACnB,OAAO;AACT"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/themes/index.ts"],"sourcesContent":["/**\r\n * 主题管理模块\r\n * @module themes\r\n */\r\n\r\nimport type { ThemeConfig, ThemeCSSVariables, ThemeName } from './types'\r\nimport { defaultTheme, presetThemes } from './presets'\r\n\r\nexport * from './presets'\r\nexport * from './types'\r\n\r\n/**\r\n * 自定义主题存储\r\n */\r\nconst customThemes: Map<string, ThemeConfig> = new Map()\r\n\r\n/**\r\n * 当前激活的主题\r\n */\r\nlet currentTheme: ThemeConfig = defaultTheme\r\n\r\n/**\r\n * 获取主题配置\r\n * @param name - 主题名称\r\n * @returns 主题配置，如果不存在则返回默认主题\r\n */\r\nexport function getTheme(name: ThemeName | string): ThemeConfig {\r\n  return customThemes.get(name) || presetThemes[name] || defaultTheme\r\n}\r\n\r\n/**\r\n * 注册自定义主题\r\n * @param theme - 主题配置\r\n */\r\nexport function registerTheme(theme: ThemeConfig): void {\r\n  customThemes.set(theme.name, theme)\r\n}\r\n\r\n/**\r\n * 获取所有可用主题\r\n * @returns 主题名称列表\r\n */\r\nexport function getAvailableThemes(): string[] {\r\n  return [...Object.keys(presetThemes), ...customThemes.keys()]\r\n}\r\n\r\n/**\r\n * 获取所有主题配置\r\n * @returns 主题配置列表\r\n */\r\nexport function getAllThemes(): ThemeConfig[] {\r\n  return [...Object.values(presetThemes), ...customThemes.values()]\r\n}\r\n\r\n/**\r\n * 设置当前主题\r\n * @param name - 主题名称\r\n */\r\nexport function setCurrentTheme(name: ThemeName | string): ThemeConfig {\r\n  currentTheme = getTheme(name)\r\n  return currentTheme\r\n}\r\n\r\n/**\r\n * 获取当前主题\r\n */\r\nexport function getCurrentTheme(): ThemeConfig {\r\n  return currentTheme\r\n}\r\n\r\n/**\r\n * 将主题配置转换为 CSS 变量\r\n * @param theme - 主题配置\r\n * @returns CSS 变量对象\r\n */\r\nexport function themeToCSS(theme: ThemeConfig): ThemeCSSVariables {\r\n  return {\r\n    '--keyboard-bg': theme.colors.background,\r\n    '--keyboard-key-bg': theme.colors.keyBackground,\r\n    '--keyboard-key-color': theme.colors.keyColor,\r\n    '--keyboard-key-active-bg': theme.colors.keyActiveBackground,\r\n    '--keyboard-fn-key-bg': theme.colors.fnKeyBackground,\r\n    '--keyboard-fn-key-color': theme.colors.fnKeyColor,\r\n    '--keyboard-fn-key-active-bg': theme.colors.fnKeyActiveBackground,\r\n    '--keyboard-primary-bg': theme.colors.primaryBackground,\r\n    '--keyboard-primary-active-bg': theme.colors.primaryActiveBackground,\r\n    '--keyboard-primary-color': theme.colors.primaryColor,\r\n    '--keyboard-key-height': `${theme.sizes.keyHeight}px`,\r\n    '--keyboard-key-radius': `${theme.sizes.keyRadius}px`,\r\n    '--keyboard-key-gap': `${theme.sizes.keyGap}px`,\r\n    '--keyboard-font-size': `${theme.sizes.fontSize}px`,\r\n    '--keyboard-fn-font-size': `${theme.sizes.fnFontSize}px`,\r\n    '--keyboard-padding': `${theme.sizes.padding}px`,\r\n    '--keyboard-key-shadow': theme.effects.keyShadow,\r\n    '--keyboard-mask-bg':\r\n      'color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent))',\r\n    '--keyboard-transition-duration': `${theme.effects.transitionDuration}ms`,\r\n    '--keyboard-border-color': theme.colors.borderColor,\r\n    '--keyboard-divider-color': theme.colors.dividerColor,\r\n  }\r\n}\r\n\r\n/**\r\n * 将 CSS 变量应用到元素\r\n * @param element - 目标元素\r\n * @param theme - 主题配置\r\n */\r\nexport function applyTheme(element: HTMLElement, theme: ThemeConfig): void {\r\n  const cssVars = themeToCSS(theme)\r\n  Object.entries(cssVars).forEach(([key, value]) => {\r\n    if (value) {\r\n      element.style.setProperty(key, value)\r\n    }\r\n  })\r\n\r\n  // 添加主题类名\r\n  element.classList.remove('keyboard-theme-light', 'keyboard-theme-dark')\r\n  element.classList.add(\r\n    theme.isDark ? 'keyboard-theme-dark' : 'keyboard-theme-light'\r\n  )\r\n  element.dataset.theme = theme.name\r\n}\r\n\r\n/**\r\n * 生成主题的内联样式字符串\r\n * @param theme - 主题配置\r\n * @returns 内联样式字符串\r\n */\r\nexport function generateThemeStyle(theme: ThemeConfig): string {\r\n  const cssVars = themeToCSS(theme)\r\n  return Object.entries(cssVars)\r\n    .filter(([, value]) => value)\r\n    .map(([key, value]) => `${key}: ${value}`)\r\n    .join('; ')\r\n}\r\n\r\n/**\r\n * 合并主题配置\r\n * @param base - 基础主题\r\n * @param overrides - 覆盖配置\r\n * @returns 合并后的主题\r\n */\r\nexport function mergeTheme(\r\n  base: ThemeConfig,\r\n  overrides: Partial<ThemeConfig>\r\n): ThemeConfig {\r\n  return {\r\n    ...base,\r\n    ...overrides,\r\n    colors: { ...base.colors, ...overrides.colors },\r\n    sizes: { ...base.sizes, ...overrides.sizes },\r\n    effects: { ...base.effects, ...overrides.effects },\r\n  }\r\n}\r\n\r\n/**\r\n * 创建自定义主题\r\n * @param name - 主题名称\r\n * @param baseTheme - 基础主题名称\r\n * @param customization - 自定义配置\r\n */\r\nexport function createTheme(\r\n  name: string,\r\n  baseTheme: ThemeName | string,\r\n  customization: Partial<Omit<ThemeConfig, 'name'>>\r\n): ThemeConfig {\r\n  const base = getTheme(baseTheme)\r\n  const theme = mergeTheme(base, {\r\n    ...customization,\r\n    name,\r\n  })\r\n  registerTheme(theme)\r\n  return theme\r\n}\r\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,+BAAyC,IAAI,IAAI;AAKvD,IAAI,eAA4B,gBAAA;AAOzB,SAAS,SAAS,MAAuC;CAC9D,OAAO,aAAa,IAAI,IAAI,KAAK,gBAAA,aAAa,SAAS,gBAAA;AACzD;AAMO,SAAS,cAAc,OAA0B;CACtD,aAAa,IAAI,MAAM,MAAM,KAAK;AACpC;AAMO,SAAS,qBAA+B;CAC7C,OAAO,CAAC,GAAG,OAAO,KAAK,gBAAA,YAAY,GAAG,GAAG,aAAa,KAAK,CAAC;AAC9D;AAMO,SAAS,eAA8B;CAC5C,OAAO,CAAC,GAAG,OAAO,OAAO,gBAAA,YAAY,GAAG,GAAG,aAAa,OAAO,CAAC;AAClE;AAMO,SAAS,gBAAgB,MAAuC;CACrE,eAAe,SAAS,IAAI;CAC5B,OAAO;AACT;AAKO,SAAS,kBAA+B;CAC7C,OAAO;AACT;AAOO,SAAS,WAAW,OAAuC;CAChE,OAAO;EACL,iBAAiB,MAAM,OAAO;EAC9B,qBAAqB,MAAM,OAAO;EAClC,wBAAwB,MAAM,OAAO;EACrC,4BAA4B,MAAM,OAAO;EACzC,wBAAwB,MAAM,OAAO;EACrC,2BAA2B,MAAM,OAAO;EACxC,+BAA+B,MAAM,OAAO;EAC5C,yBAAyB,MAAM,OAAO;EACtC,gCAAgC,MAAM,OAAO;EAC7C,4BAA4B,MAAM,OAAO;EACzC,yBAAyB,GAAG,MAAM,MAAM,UAAS;EACjD,yBAAyB,GAAG,MAAM,MAAM,UAAS;EACjD,sBAAsB,GAAG,MAAM,MAAM,OAAM;EAC3C,wBAAwB,GAAG,MAAM,MAAM,SAAQ;EAC/C,2BAA2B,GAAG,MAAM,MAAM,WAAU;EACpD,sBAAsB,GAAG,MAAM,MAAM,QAAO;EAC5C,yBAAyB,MAAM,QAAQ;EACvC,sBACE;EACF,kCAAkC,GAAG,MAAM,QAAQ,mBAAkB;EACrE,2BAA2B,MAAM,OAAO;EACxC,4BAA4B,MAAM,OAAO;CAC3C;AACF;AAOO,SAAS,WAAW,SAAsB,OAA0B;CACzE,MAAM,UAAU,WAAW,KAAK;CAChC,OAAO,QAAQ,OAAO,CAAA,CAAE,SAAS,CAAC,KAAK,WAAW;EAChD,IAAI,OACF,QAAQ,MAAM,YAAY,KAAK,KAAK;CAExC,CAAC;CAGD,QAAQ,UAAU,OAAO,wBAAwB,qBAAqB;CACtE,QAAQ,UAAU,IAChB,MAAM,SAAS,wBAAwB,sBACzC;CACA,QAAQ,QAAQ,QAAQ,MAAM;AAChC;AAOO,SAAS,mBAAmB,OAA4B;CAC7D,MAAM,UAAU,WAAW,KAAK;CAChC,OAAO,OAAO,QAAQ,OAAO,CAAA,CAC1B,QAAQ,GAAG,WAAW,KAAK,CAAA,CAC3B,KAAK,CAAC,KAAK,WAAW,GAAG,IAAG,IAAK,OAAO,CAAA,CACxC,KAAK,IAAI;AACd;AAQO,SAAS,WACd,MACA,WACa;CACb,OAAO;EACL,GAAG;EACH,GAAG;EACH,QAAQ;GAAE,GAAG,KAAK;GAAQ,GAAG,UAAU;EAAO;EAC9C,OAAO;GAAE,GAAG,KAAK;GAAO,GAAG,UAAU;EAAM;EAC3C,SAAS;GAAE,GAAG,KAAK;GAAS,GAAG,UAAU;EAAQ;CACnD;AACF;AAQO,SAAS,YACd,MACA,WACA,eACa;CAEb,MAAM,QAAQ,WADD,SAAS,SACG,GAAM;EAC7B,GAAG;EACH;CACF,CAAC;CACD,cAAc,KAAK;CACnB,OAAO;AACT"}

package/lib/themes/{index.d.ts → index.d.cts}

@@ -3,8 +3,8 @@
  * @module themes
  */
 import type { ThemeConfig, ThemeCSSVariables, ThemeName } from './types';
-export * from './types';
 export * from './presets';
+export * from './types';
 /**
  * 获取主题配置
  * @param name - 主题名称
@@ -67,4 +67,3 @@ export declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeCo
  * @param customization - 自定义配置
  */
 export declare function createTheme(name: string, baseTheme: ThemeName | string, customization: Partial<Omit<ThemeConfig, 'name'>>): ThemeConfig;
-//# sourceMappingURL=index.d.ts.map

package/lib/themes/presets.cjs

@@ -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                    *
 * ***********************************

package/lib/themes/presets.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"presets.cjs","names":[],"sources":["../../src/themes/presets.ts"],"sourcesContent":["/**\n * 预设主题配置\n * @module themes/presets\n */\n\nimport type { ThemeConfig } from './types'\n\n/**\n * MIUI 小米风格主题（默认）\n * 特点：纯净、扁平、简洁、无多余装饰\n */\nexport const miuiTheme: ThemeConfig = {\n  name: 'miui',\n  displayName: 'MIUI',\n  description: '小米风格 - 纯净简洁',\n  isDark: false,\n  colors: {\n    background: '#f5f5f5',\n    keyBackground: '#ffffff',\n    keyColor: '#1a1a1a',\n    keyActiveBackground: '#e8e8e8',\n    fnKeyBackground: '#e0e0e0',\n    fnKeyColor: '#666666',\n    fnKeyActiveBackground: '#d0d0d0',\n    primaryBackground: '#ff6700', // 小米橙\n    primaryActiveBackground: '#e55d00',\n    primaryColor: '#ffffff',\n    borderColor: 'transparent',\n    dividerColor: '#eeeeee',\n  },\n  sizes: {\n    keyHeight: 46,\n    keyRadius: 8,\n    keyGap: 6,\n    fontSize: 18,\n    fnFontSize: 14,\n    padding: 8,\n  },\n  effects: {\n    keyShadow: 'none',\n    keyActiveShadow: 'none',\n    keyActiveScale: 0.96,\n    transitionDuration: 100,\n    enableBlur: false,\n    blurAmount: 0,\n    enableRipple: false,\n  },\n}\n\n/**\n * iOS 风格主题\n * 特点：毛玻璃、圆润阴影、精致\n */\nexport const iosTheme: ThemeConfig = {\n  name: 'ios',\n  displayName: 'iOS',\n  description: 'Apple 风格 - 精致优雅',\n  isDark: false,\n  colors: {\n    background: '#d1d3d9',\n    keyBackground: '#ffffff',\n    keyColor: '#000000',\n    keyActiveBackground: '#b8bac2',\n    fnKeyBackground: '#a8aab4',\n    fnKeyColor: '#000000',\n    fnKeyActiveBackground: '#9699a3',\n    primaryBackground: '#007aff',\n    primaryActiveBackground: '#0062cc',\n    primaryColor: '#ffffff',\n    borderColor: 'transparent',\n    dividerColor: '#c8cad0',\n  },\n  sizes: {\n    keyHeight: 43,\n    keyRadius: 5,\n    keyGap: 6,\n    fontSize: 22,\n    fnFontSize: 15,\n    padding: 4,\n  },\n  effects: {\n    keyShadow: '0 1px 0 rgba(0,0,0,0.35)',\n    keyActiveShadow: '0 0 0 rgba(0,0,0,0)',\n    keyActiveScale: 1,\n    transitionDuration: 80,\n    enableBlur: true,\n    blurAmount: 20,\n    enableRipple: false,\n  },\n}\n\n/**\n * Material Design 主题\n * 特点：深色、涟漪动效、层次感\n */\nexport const materialTheme: ThemeConfig = {\n  name: 'material',\n  displayName: 'Material',\n  description: 'Google 风格 - 深邃现代',\n  isDark: true,\n  colors: {\n    background: '#263238',\n    keyBackground: '#37474f',\n    keyColor: '#ffffff',\n    keyActiveBackground: '#455a64',\n    fnKeyBackground: '#455a64',\n    fnKeyColor: '#b0bec5',\n    fnKeyActiveBackground: '#546e7a',\n    primaryBackground: '#4caf50', // Material Green\n    primaryActiveBackground: '#43a047',\n    primaryColor: '#ffffff',\n    borderColor: 'transparent',\n    dividerColor: '#37474f',\n  },\n  sizes: {\n    keyHeight: 48,\n    keyRadius: 4,\n    keyGap: 4,\n    fontSize: 20,\n    fnFontSize: 14,\n    padding: 6,\n  },\n  effects: {\n    keyShadow: '0 1px 3px rgba(0,0,0,0.2)',\n    keyActiveShadow: '0 2px 6px rgba(0,0,0,0.3)',\n    keyActiveScale: 1,\n    transitionDuration: 150,\n    enableBlur: false,\n    blurAmount: 0,\n    enableRipple: true,\n  },\n}\n\n/**\n * 极简主题\n * 特点：无边框、超简洁、透明感\n */\nexport const minimalTheme: ThemeConfig = {\n  name: 'minimal',\n  displayName: 'Minimal',\n  description: '极简风格 - 轻盈透明',\n  isDark: false,\n  colors: {\n    background: 'rgba(250, 250, 250, 0.95)',\n    keyBackground: 'transparent',\n    keyColor: '#333333',\n    keyActiveBackground: 'rgba(0, 0, 0, 0.08)',\n    fnKeyBackground: 'transparent',\n    fnKeyColor: '#888888',\n    fnKeyActiveBackground: 'rgba(0, 0, 0, 0.08)',\n    primaryBackground: '#333333',\n    primaryActiveBackground: '#000000',\n    primaryColor: '#ffffff',\n    borderColor: '#eeeeee',\n    dividerColor: '#eeeeee',\n  },\n  sizes: {\n    keyHeight: 44,\n    keyRadius: 12,\n    keyGap: 8,\n    fontSize: 17,\n    fnFontSize: 13,\n    padding: 12,\n  },\n  effects: {\n    keyShadow: 'none',\n    keyActiveShadow: 'none',\n    keyActiveScale: 0.92,\n    transitionDuration: 120,\n    enableBlur: true,\n    blurAmount: 30,\n    enableRipple: false,\n  },\n}\n\n/**\n * 深色主题\n * 特点：护眼、现代、高对比\n */\nexport const darkTheme: ThemeConfig = {\n  name: 'dark',\n  displayName: 'Dark',\n  description: '深色模式 - 护眼舒适',\n  isDark: true,\n  colors: {\n    background: '#1c1c1e',\n    keyBackground: '#3a3a3c',\n    keyColor: '#ffffff',\n    keyActiveBackground: '#4a4a4c',\n    fnKeyBackground: '#2c2c2e',\n    fnKeyColor: '#ebebf5',\n    fnKeyActiveBackground: '#3c3c3e',\n    primaryBackground: '#0a84ff',\n    primaryActiveBackground: '#0070e0',\n    primaryColor: '#ffffff',\n    borderColor: '#3a3a3c',\n    dividerColor: '#3a3a3c',\n  },\n  sizes: {\n    keyHeight: 45,\n    keyRadius: 8,\n    keyGap: 6,\n    fontSize: 18,\n    fnFontSize: 14,\n    padding: 8,\n  },\n  effects: {\n    keyShadow: '0 1px 2px rgba(0,0,0,0.4)',\n    keyActiveShadow: '0 0 8px rgba(10,132,255,0.3)',\n    keyActiveScale: 0.97,\n    transitionDuration: 100,\n    enableBlur: true,\n    blurAmount: 20,\n    enableRipple: false,\n  },\n}\n\n/**\n * 所有预设主题\n */\nexport const presetThemes: Record<string, ThemeConfig> = {\n  miui: miuiTheme,\n  ios: iosTheme,\n  material: materialTheme,\n  minimal: minimalTheme,\n  dark: darkTheme,\n}\n\n/**\n * 默认主题\n */\nexport const defaultTheme = miuiTheme\n"],"mappings":"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"}
+{"version":3,"file":"presets.cjs","names":[],"sources":["../../src/themes/presets.ts"],"sourcesContent":["/**\r\n * 预设主题配置\r\n * @module themes/presets\r\n */\r\n\r\nimport type { ThemeConfig } from './types'\r\n\r\n/**\r\n * MIUI 小米风格主题（默认）\r\n * 特点：纯净、扁平、简洁、无多余装饰\r\n */\r\nexport const miuiTheme: ThemeConfig = {\r\n  name: 'miui',\r\n  displayName: 'MIUI',\r\n  description: '小米风格 - 纯净简洁',\r\n  isDark: false,\r\n  colors: {\r\n    background: '#f5f5f5',\r\n    keyBackground: '#ffffff',\r\n    keyColor: '#1a1a1a',\r\n    keyActiveBackground: '#e8e8e8',\r\n    fnKeyBackground: '#e0e0e0',\r\n    fnKeyColor: '#666666',\r\n    fnKeyActiveBackground: '#d0d0d0',\r\n    primaryBackground: '#ff6700', // 小米橙\r\n    primaryActiveBackground: '#e55d00',\r\n    primaryColor: '#ffffff',\r\n    borderColor: 'transparent',\r\n    dividerColor: '#eeeeee',\r\n  },\r\n  sizes: {\r\n    keyHeight: 46,\r\n    keyRadius: 8,\r\n    keyGap: 6,\r\n    fontSize: 18,\r\n    fnFontSize: 14,\r\n    padding: 8,\r\n  },\r\n  effects: {\r\n    keyShadow: 'none',\r\n    keyActiveShadow: 'none',\r\n    keyActiveScale: 0.96,\r\n    transitionDuration: 100,\r\n    enableBlur: false,\r\n    blurAmount: 0,\r\n    enableRipple: false,\r\n  },\r\n}\r\n\r\n/**\r\n * iOS 风格主题\r\n * 特点：毛玻璃、圆润阴影、精致\r\n */\r\nexport const iosTheme: ThemeConfig = {\r\n  name: 'ios',\r\n  displayName: 'iOS',\r\n  description: 'Apple 风格 - 精致优雅',\r\n  isDark: false,\r\n  colors: {\r\n    background: '#d1d3d9',\r\n    keyBackground: '#ffffff',\r\n    keyColor: '#000000',\r\n    keyActiveBackground: '#b8bac2',\r\n    fnKeyBackground: '#a8aab4',\r\n    fnKeyColor: '#000000',\r\n    fnKeyActiveBackground: '#9699a3',\r\n    primaryBackground: '#007aff',\r\n    primaryActiveBackground: '#0062cc',\r\n    primaryColor: '#ffffff',\r\n    borderColor: 'transparent',\r\n    dividerColor: '#c8cad0',\r\n  },\r\n  sizes: {\r\n    keyHeight: 43,\r\n    keyRadius: 5,\r\n    keyGap: 6,\r\n    fontSize: 22,\r\n    fnFontSize: 15,\r\n    padding: 4,\r\n  },\r\n  effects: {\r\n    keyShadow: '0 1px 0 rgba(0,0,0,0.35)',\r\n    keyActiveShadow: '0 0 0 rgba(0,0,0,0)',\r\n    keyActiveScale: 1,\r\n    transitionDuration: 80,\r\n    enableBlur: true,\r\n    blurAmount: 20,\r\n    enableRipple: false,\r\n  },\r\n}\r\n\r\n/**\r\n * Material Design 主题\r\n * 特点：深色、涟漪动效、层次感\r\n */\r\nexport const materialTheme: ThemeConfig = {\r\n  name: 'material',\r\n  displayName: 'Material',\r\n  description: 'Google 风格 - 深邃现代',\r\n  isDark: true,\r\n  colors: {\r\n    background: '#263238',\r\n    keyBackground: '#37474f',\r\n    keyColor: '#ffffff',\r\n    keyActiveBackground: '#455a64',\r\n    fnKeyBackground: '#455a64',\r\n    fnKeyColor: '#b0bec5',\r\n    fnKeyActiveBackground: '#546e7a',\r\n    primaryBackground: '#4caf50', // Material Green\r\n    primaryActiveBackground: '#43a047',\r\n    primaryColor: '#ffffff',\r\n    borderColor: 'transparent',\r\n    dividerColor: '#37474f',\r\n  },\r\n  sizes: {\r\n    keyHeight: 48,\r\n    keyRadius: 4,\r\n    keyGap: 4,\r\n    fontSize: 20,\r\n    fnFontSize: 14,\r\n    padding: 6,\r\n  },\r\n  effects: {\r\n    keyShadow: '0 1px 3px rgba(0,0,0,0.2)',\r\n    keyActiveShadow: '0 2px 6px rgba(0,0,0,0.3)',\r\n    keyActiveScale: 1,\r\n    transitionDuration: 150,\r\n    enableBlur: false,\r\n    blurAmount: 0,\r\n    enableRipple: true,\r\n  },\r\n}\r\n\r\n/**\r\n * 极简主题\r\n * 特点：无边框、超简洁、透明感\r\n */\r\nexport const minimalTheme: ThemeConfig = {\r\n  name: 'minimal',\r\n  displayName: 'Minimal',\r\n  description: '极简风格 - 轻盈透明',\r\n  isDark: false,\r\n  colors: {\r\n    background: 'rgba(250, 250, 250, 0.95)',\r\n    keyBackground: 'transparent',\r\n    keyColor: '#333333',\r\n    keyActiveBackground: 'rgba(0, 0, 0, 0.08)',\r\n    fnKeyBackground: 'transparent',\r\n    fnKeyColor: '#888888',\r\n    fnKeyActiveBackground: 'rgba(0, 0, 0, 0.08)',\r\n    primaryBackground: '#333333',\r\n    primaryActiveBackground: '#000000',\r\n    primaryColor: '#ffffff',\r\n    borderColor: '#eeeeee',\r\n    dividerColor: '#eeeeee',\r\n  },\r\n  sizes: {\r\n    keyHeight: 44,\r\n    keyRadius: 12,\r\n    keyGap: 8,\r\n    fontSize: 17,\r\n    fnFontSize: 13,\r\n    padding: 12,\r\n  },\r\n  effects: {\r\n    keyShadow: 'none',\r\n    keyActiveShadow: 'none',\r\n    keyActiveScale: 0.92,\r\n    transitionDuration: 120,\r\n    enableBlur: true,\r\n    blurAmount: 30,\r\n    enableRipple: false,\r\n  },\r\n}\r\n\r\n/**\r\n * 深色主题\r\n * 特点：护眼、现代、高对比\r\n */\r\nexport const darkTheme: ThemeConfig = {\r\n  name: 'dark',\r\n  displayName: 'Dark',\r\n  description: '深色模式 - 护眼舒适',\r\n  isDark: true,\r\n  colors: {\r\n    background: '#1c1c1e',\r\n    keyBackground: '#3a3a3c',\r\n    keyColor: '#ffffff',\r\n    keyActiveBackground: '#4a4a4c',\r\n    fnKeyBackground: '#2c2c2e',\r\n    fnKeyColor: '#ebebf5',\r\n    fnKeyActiveBackground: '#3c3c3e',\r\n    primaryBackground: '#0a84ff',\r\n    primaryActiveBackground: '#0070e0',\r\n    primaryColor: '#ffffff',\r\n    borderColor: '#3a3a3c',\r\n    dividerColor: '#3a3a3c',\r\n  },\r\n  sizes: {\r\n    keyHeight: 45,\r\n    keyRadius: 8,\r\n    keyGap: 6,\r\n    fontSize: 18,\r\n    fnFontSize: 14,\r\n    padding: 8,\r\n  },\r\n  effects: {\r\n    keyShadow: '0 1px 2px rgba(0,0,0,0.4)',\r\n    keyActiveShadow: '0 0 8px rgba(10,132,255,0.3)',\r\n    keyActiveScale: 0.97,\r\n    transitionDuration: 100,\r\n    enableBlur: true,\r\n    blurAmount: 20,\r\n    enableRipple: false,\r\n  },\r\n}\r\n\r\n/**\r\n * 所有预设主题\r\n */\r\nexport const presetThemes: Record<string, ThemeConfig> = {\r\n  miui: miuiTheme,\r\n  ios: iosTheme,\r\n  material: materialTheme,\r\n  minimal: minimalTheme,\r\n  dark: darkTheme,\r\n}\r\n\r\n/**\r\n * 默认主题\r\n */\r\nexport const defaultTheme = miuiTheme\r\n"],"mappings":";;;;;;;;;;;AAWO,MAAM,YAAyB;CACpC,MAAM;CACN,aAAa;CACb,aAAa;CACb,QAAQ;CACR,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,UAAU;EACV,qBAAqB;EACrB,iBAAiB;EACjB,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;EACnB,yBAAyB;EACzB,cAAc;EACd,aAAa;EACb,cAAc;CAChB;CACA,OAAO;EACL,WAAW;EACX,WAAW;EACX,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,SAAS;CACX;CACA,SAAS;EACP,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,YAAY;EACZ,YAAY;EACZ,cAAc;CAChB;AACF;AAMO,MAAM,WAAwB;CACnC,MAAM;CACN,aAAa;CACb,aAAa;CACb,QAAQ;CACR,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,UAAU;EACV,qBAAqB;EACrB,iBAAiB;EACjB,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;EACnB,yBAAyB;EACzB,cAAc;EACd,aAAa;EACb,cAAc;CAChB;CACA,OAAO;EACL,WAAW;EACX,WAAW;EACX,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,SAAS;CACX;CACA,SAAS;EACP,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,YAAY;EACZ,YAAY;EACZ,cAAc;CAChB;AACF;AAMO,MAAM,gBAA6B;CACxC,MAAM;CACN,aAAa;CACb,aAAa;CACb,QAAQ;CACR,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,UAAU;EACV,qBAAqB;EACrB,iBAAiB;EACjB,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;EACnB,yBAAyB;EACzB,cAAc;EACd,aAAa;EACb,cAAc;CAChB;CACA,OAAO;EACL,WAAW;EACX,WAAW;EACX,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,SAAS;CACX;CACA,SAAS;EACP,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,YAAY;EACZ,YAAY;EACZ,cAAc;CAChB;AACF;AAMO,MAAM,eAA4B;CACvC,MAAM;CACN,aAAa;CACb,aAAa;CACb,QAAQ;CACR,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,UAAU;EACV,qBAAqB;EACrB,iBAAiB;EACjB,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;EACnB,yBAAyB;EACzB,cAAc;EACd,aAAa;EACb,cAAc;CAChB;CACA,OAAO;EACL,WAAW;EACX,WAAW;EACX,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,SAAS;CACX;CACA,SAAS;EACP,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,YAAY;EACZ,YAAY;EACZ,cAAc;CAChB;AACF;AAMO,MAAM,YAAyB;CACpC,MAAM;CACN,aAAa;CACb,aAAa;CACb,QAAQ;CACR,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,UAAU;EACV,qBAAqB;EACrB,iBAAiB;EACjB,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;EACnB,yBAAyB;EACzB,cAAc;EACd,aAAa;EACb,cAAc;CAChB;CACA,OAAO;EACL,WAAW;EACX,WAAW;EACX,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,SAAS;CACX;CACA,SAAS;EACP,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,oBAAoB;EACpB,YAAY;EACZ,YAAY;EACZ,cAAc;CAChB;AACF;AAKO,MAAM,eAA4C;CACvD,MAAM;CACN,KAAK;CACL,UAAU;CACV,SAAS;CACT,MAAM;AACR;AAKO,MAAM,eAAe"}

package/lib/themes/{presets.d.ts → presets.d.cts}

@@ -36,4 +36,3 @@ export declare const presetThemes: Record<string, ThemeConfig>;
  * 默认主题
  */
 export declare const defaultTheme: ThemeConfig;
-//# sourceMappingURL=presets.d.ts.map

package/lib/themes/types.cjs

@@ -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                    *
 * ***********************************

package/{esm/themes/types.d.ts → lib/themes/types.d.cts}

@@ -111,8 +111,8 @@ export interface ThemeCSSVariables {
     '--keyboard-fn-font-size': string;
     '--keyboard-padding': string;
     '--keyboard-key-shadow': string;
+    '--keyboard-mask-bg'?: string;
     '--keyboard-transition-duration': string;
     '--keyboard-border-color'?: string;
     '--keyboard-divider-color'?: string;
 }
-//# sourceMappingURL=types.d.ts.map

package/lib/types/index.cjs

@@ -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                    *
 * ***********************************

package/{esm/types/index.d.ts → lib/types/index.d.cts}

@@ -4,4 +4,3 @@
  */
 export * from './keyboard';
 export * from './position';
-//# sourceMappingURL=index.d.ts.map

package/lib/types/keyboard.cjs

@@ -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                    *
 * ***********************************

package/{esm/types/keyboard.d.ts → lib/types/keyboard.d.cts}

@@ -250,4 +250,3 @@ export interface KeyboardOptions {
      */
     customLayouts?: Record<string, KeyboardConfig>;
 }
-//# sourceMappingURL=keyboard.d.ts.map

package/lib/types/position.cjs

@@ -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                    *
 * ***********************************

package/lib/types/{position.d.ts → position.d.cts}

@@ -136,4 +136,3 @@ export interface ViewportInfo {
         left: number;
     };
 }
-//# sourceMappingURL=position.d.ts.map

package/lib/utils/device.cjs

@@ -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                    *
 * ***********************************
@@ -13,10 +13,7 @@ const MOBILE_UA_REGEX = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Oper
 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;
 }
@@ -76,7 +73,14 @@ function getSafeAreaInsets() {
     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,
@@ -84,7 +88,7 @@ function getSafeAreaInsets() {
 		bottom: Number.parseFloat(computed.bottom) || 0,
 		left: Number.parseFloat(computed.left) || 0
 	};
-	document.body.removeChild(div);
+	body.removeChild(div);
 	return safeArea;
 }
 function supportsVibrate() {

package/lib/utils/device.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"device.cjs","names":[],"sources":["../../src/utils/device.ts"],"sourcesContent":["/**\n * 设备检测工具\n * @module utils/device\n */\n\nimport type { DeviceType, ViewportInfo } from '../types'\n\n/**\n * 移动设备 UA 正则\n */\nconst MOBILE_UA_REGEX = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\n\n/**\n * 触摸设备检测缓存\n */\nlet cachedIsTouchDevice: boolean | null = null\n\n/**\n * 检测是否为触摸设备\n */\nexport function isTouchDevice(): boolean {\n  if (cachedIsTouchDevice !== null) {\n    return cachedIsTouchDevice\n  }\n\n  if (typeof window === 'undefined') {\n    cachedIsTouchDevice = false\n    return false\n  }\n\n  cachedIsTouchDevice = (\n    'ontouchstart' in window\n    || navigator.maxTouchPoints > 0\n    // @ts-expect-error - msMaxTouchPoints is IE specific\n    || navigator.msMaxTouchPoints > 0\n  )\n\n  return cachedIsTouchDevice\n}\n\n/**\n * 检测是否为移动设备（基于 UA）\n */\nexport function isMobileUA(): boolean {\n  if (typeof navigator === 'undefined') {\n    return false\n  }\n  return MOBILE_UA_REGEX.test(navigator.userAgent)\n}\n\n/**\n * 检测是否为移动设备（综合判断）\n */\nexport function isMobile(): boolean {\n  if (typeof window === 'undefined') {\n    return false\n  }\n\n  // 优先使用 UA 判断\n  if (isMobileUA()) {\n    return true\n  }\n\n  // 其次使用屏幕宽度判断\n  const screenWidth = window.innerWidth || document.documentElement.clientWidth\n  if (screenWidth <= 768) {\n    return true\n  }\n\n  // 最后使用触摸检测\n  return isTouchDevice()\n}\n\n/**\n * 获取设备类型\n */\nexport function getDeviceType(): DeviceType {\n  return isMobile() ? 'mobile' : 'desktop'\n}\n\n/**\n * 获取视口信息\n */\nexport function getViewportInfo(): ViewportInfo {\n  if (typeof window === 'undefined') {\n    return {\n      width: 0,\n      height: 0,\n      scrollX: 0,\n      scrollY: 0,\n      isMobile: false,\n    }\n  }\n\n  const width = window.innerWidth || document.documentElement.clientWidth\n  const height = window.innerHeight || document.documentElement.clientHeight\n\n  // 获取安全区域（iOS 刘海屏等）\n  const safeArea = getSafeAreaInsets()\n\n  return {\n    width,\n    height,\n    scrollX: window.scrollX || window.pageXOffset,\n    scrollY: window.scrollY || window.pageYOffset,\n    isMobile: isMobile(),\n    safeArea,\n  }\n}\n\n/**\n * 获取安全区域边距\n */\nexport function getSafeAreaInsets(): ViewportInfo['safeArea'] {\n  if (typeof window === 'undefined' || typeof CSS === 'undefined' || !CSS.supports) {\n    return { top: 0, right: 0, bottom: 0, left: 0 }\n  }\n\n  // 检查是否支持 env() 函数\n  if (!CSS.supports('padding-top', 'env(safe-area-inset-top)')) {\n    return { top: 0, right: 0, bottom: 0, left: 0 }\n  }\n\n  // 创建临时元素获取安全区域值\n  const div = document.createElement('div')\n  div.style.cssText = `\n    position: fixed;\n    top: env(safe-area-inset-top);\n    right: env(safe-area-inset-right);\n    bottom: env(safe-area-inset-bottom);\n    left: env(safe-area-inset-left);\n    pointer-events: none;\n    visibility: hidden;\n  `\n  document.body.appendChild(div)\n\n  const computed = getComputedStyle(div)\n  const safeArea = {\n    top: Number.parseFloat(computed.top) || 0,\n    right: Number.parseFloat(computed.right) || 0,\n    bottom: Number.parseFloat(computed.bottom) || 0,\n    left: Number.parseFloat(computed.left) || 0,\n  }\n\n  document.body.removeChild(div)\n  return safeArea\n}\n\n/**\n * 检测是否支持震动 API\n */\nexport function supportsVibrate(): boolean {\n  return typeof navigator !== 'undefined' && 'vibrate' in navigator\n}\n\n/**\n * 触发震动反馈\n * @param pattern - 震动模式（毫秒）\n */\nexport function vibrate(pattern: number | number[] = 10): boolean {\n  if (supportsVibrate()) {\n    return navigator.vibrate(pattern)\n  }\n  return false\n}\n\n/**\n * 监听视口变化\n * @param callback - 回调函数\n * @returns 取消监听函数\n */\nexport function onViewportChange(callback: (info: ViewportInfo) => void): () => void {\n  if (typeof window === 'undefined') {\n    return () => {}\n  }\n\n  const handler = () => {\n    callback(getViewportInfo())\n  }\n\n  window.addEventListener('resize', handler)\n  window.addEventListener('orientationchange', handler)\n\n  return () => {\n    window.removeEventListener('resize', handler)\n    window.removeEventListener('orientationchange', handler)\n  }\n}\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,kBAAkB;AAKxB,IAAI,sBAAsC;AAKnC,SAAS,gBAAyB;CACvC,IAAI,wBAAwB,MAC1B,OAAO;CAGT,IAAI,OAAO,WAAW,aAAa;EACjC,sBAAsB;EACtB,OAAO;CACT;CAEA,sBACE,kBAAkB,UACf,UAAU,iBAAiB,KAE3B,UAAU,mBAAmB;CAGlC,OAAO;AACT;AAKO,SAAS,aAAsB;CACpC,IAAI,OAAO,cAAc,aACvB,OAAO;CAET,OAAO,gBAAgB,KAAK,UAAU,SAAS;AACjD;AAKO,SAAS,WAAoB;CAClC,IAAI,OAAO,WAAW,aACpB,OAAO;CAIT,IAAI,WAAW,GACb,OAAO;CAKT,KADoB,OAAO,cAAc,SAAS,gBAAgB,gBAC/C,KACjB,OAAO;CAIT,OAAO,cAAc;AACvB;AAKO,SAAS,gBAA4B;CAC1C,OAAO,SAAS,IAAI,WAAW;AACjC;AAKO,SAAS,kBAAgC;CAC9C,IAAI,OAAO,WAAW,aACpB,OAAO;EACL,OAAO;EACP,QAAQ;EACR,SAAS;EACT,SAAS;EACT,UAAU;CACZ;CAGF,MAAM,QAAQ,OAAO,cAAc,SAAS,gBAAgB;CAC5D,MAAM,SAAS,OAAO,eAAe,SAAS,gBAAgB;CAG9D,MAAM,WAAW,kBAAkB;CAEnC,OAAO;EACL;EACA;EACA,SAAS,OAAO,WAAW,OAAO;EAClC,SAAS,OAAO,WAAW,OAAO;EAClC,UAAU,SAAS;EACnB;CACF;AACF;AAKO,SAAS,oBAA8C;CAC5D,IAAI,OAAO,WAAW,eAAe,OAAO,QAAQ,eAAe,CAAC,IAAI,UACtE,OAAO;EAAE,KAAK;EAAG,OAAO;EAAG,QAAQ;EAAG,MAAM;CAAE;CAIhD,IAAI,CAAC,IAAI,SAAS,eAAe,0BAA0B,GACzD,OAAO;EAAE,KAAK;EAAG,OAAO;EAAG,QAAQ;EAAG,MAAM;CAAE;CAIhD,MAAM,MAAM,SAAS,cAAc,KAAK;CACxC,IAAI,MAAM,UAAU;;;;;;;;;CASpB,SAAS,KAAK,YAAY,GAAG;CAE7B,MAAM,WAAW,iBAAiB,GAAG;CACrC,MAAM,WAAW;EACf,KAAK,OAAO,WAAW,SAAS,GAAG,KAAK;EACxC,OAAO,OAAO,WAAW,SAAS,KAAK,KAAK;EAC5C,QAAQ,OAAO,WAAW,SAAS,MAAM,KAAK;EAC9C,MAAM,OAAO,WAAW,SAAS,IAAI,KAAK;CAC5C;CAEA,SAAS,KAAK,YAAY,GAAG;CAC7B,OAAO;AACT;AAKO,SAAS,kBAA2B;CACzC,OAAO,OAAO,cAAc,eAAe,aAAa;AAC1D;AAMO,SAAS,QAAQ,UAA6B,IAAa;CAChE,IAAI,gBAAgB,GAClB,OAAO,UAAU,QAAQ,OAAO;CAElC,OAAO;AACT;AAOO,SAAS,iBAAiB,UAAoD;CACnF,IAAI,OAAO,WAAW,aACpB,aAAa,CAAC;CAGhB,MAAM,gBAAgB;EACpB,SAAS,gBAAgB,CAAC;CAC5B;CAEA,OAAO,iBAAiB,UAAU,OAAO;CACzC,OAAO,iBAAiB,qBAAqB,OAAO;CAEpD,aAAa;EACX,OAAO,oBAAoB,UAAU,OAAO;EAC5C,OAAO,oBAAoB,qBAAqB,OAAO;CACzD;AACF"}
+{"version":3,"file":"device.cjs","names":[],"sources":["../../src/utils/device.ts"],"sourcesContent":["/**\r\n * 设备检测工具\r\n * @module utils/device\r\n */\r\n\r\nimport type { DeviceType, ViewportInfo } from '../types'\r\n\r\n/**\r\n * 移动设备 UA 正则\r\n */\r\nconst MOBILE_UA_REGEX =\r\n  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n\r\n/**\r\n * 触摸设备检测缓存\r\n */\r\nlet cachedIsTouchDevice: boolean | null = null\r\n\r\n/**\r\n * 检测是否为触摸设备\r\n */\r\nexport function isTouchDevice(): boolean {\r\n  if (cachedIsTouchDevice !== null) {\r\n    return cachedIsTouchDevice\r\n  }\r\n\r\n  if (typeof window === 'undefined') {\r\n    return false\r\n  }\r\n\r\n  cachedIsTouchDevice =\r\n    'ontouchstart' in window ||\r\n    navigator.maxTouchPoints > 0 ||\r\n    // @ts-expect-error - msMaxTouchPoints is IE specific\r\n    navigator.msMaxTouchPoints > 0\r\n\r\n  return cachedIsTouchDevice\r\n}\r\n\r\n/**\r\n * 检测是否为移动设备（基于 UA）\r\n */\r\nexport function isMobileUA(): boolean {\r\n  if (typeof navigator === 'undefined') {\r\n    return false\r\n  }\r\n  return MOBILE_UA_REGEX.test(navigator.userAgent)\r\n}\r\n\r\n/**\r\n * 检测是否为移动设备（综合判断）\r\n */\r\nexport function isMobile(): boolean {\r\n  if (typeof window === 'undefined') {\r\n    return false\r\n  }\r\n\r\n  // 优先使用 UA 判断\r\n  if (isMobileUA()) {\r\n    return true\r\n  }\r\n\r\n  // 其次使用屏幕宽度判断\r\n  const screenWidth = window.innerWidth || document.documentElement.clientWidth\r\n  if (screenWidth <= 768) {\r\n    return true\r\n  }\r\n\r\n  // 最后使用触摸检测\r\n  return isTouchDevice()\r\n}\r\n\r\n/**\r\n * 获取设备类型\r\n */\r\nexport function getDeviceType(): DeviceType {\r\n  return isMobile() ? 'mobile' : 'desktop'\r\n}\r\n\r\n/**\r\n * 获取视口信息\r\n */\r\nexport function getViewportInfo(): ViewportInfo {\r\n  if (typeof window === 'undefined') {\r\n    return {\r\n      width: 0,\r\n      height: 0,\r\n      scrollX: 0,\r\n      scrollY: 0,\r\n      isMobile: false,\r\n    }\r\n  }\r\n\r\n  const width = window.innerWidth || document.documentElement.clientWidth\r\n  const height = window.innerHeight || document.documentElement.clientHeight\r\n\r\n  // 获取安全区域（iOS 刘海屏等）\r\n  const safeArea = getSafeAreaInsets()\r\n\r\n  return {\r\n    width,\r\n    height,\r\n    scrollX: window.scrollX || window.pageXOffset,\r\n    scrollY: window.scrollY || window.pageYOffset,\r\n    isMobile: isMobile(),\r\n    safeArea,\r\n  }\r\n}\r\n\r\n/**\r\n * 获取安全区域边距\r\n */\r\nexport function getSafeAreaInsets(): ViewportInfo['safeArea'] {\r\n  if (\r\n    typeof window === 'undefined' ||\r\n    typeof CSS === 'undefined' ||\r\n    !CSS.supports\r\n  ) {\r\n    return { top: 0, right: 0, bottom: 0, left: 0 }\r\n  }\r\n\r\n  // 检查是否支持 env() 函数\r\n  if (!CSS.supports('padding-top', 'env(safe-area-inset-top)')) {\r\n    return { top: 0, right: 0, bottom: 0, left: 0 }\r\n  }\r\n\r\n  // 创建临时元素获取安全区域值\r\n  const div = document.createElement('div')\r\n  div.style.cssText = `\r\n    position: fixed;\r\n    top: env(safe-area-inset-top);\r\n    right: env(safe-area-inset-right);\r\n    bottom: env(safe-area-inset-bottom);\r\n    left: env(safe-area-inset-left);\r\n    pointer-events: none;\r\n    visibility: hidden;\r\n  `\r\n  const body = document.body\r\n  if (!body) return { top: 0, right: 0, bottom: 0, left: 0 }\r\n  body.appendChild(div)\r\n\r\n  const computed = getComputedStyle(div)\r\n  const safeArea = {\r\n    top: Number.parseFloat(computed.top) || 0,\r\n    right: Number.parseFloat(computed.right) || 0,\r\n    bottom: Number.parseFloat(computed.bottom) || 0,\r\n    left: Number.parseFloat(computed.left) || 0,\r\n  }\r\n\r\n  body.removeChild(div)\r\n  return safeArea\r\n}\r\n\r\n/**\r\n * 检测是否支持震动 API\r\n */\r\nexport function supportsVibrate(): boolean {\r\n  return typeof navigator !== 'undefined' && 'vibrate' in navigator\r\n}\r\n\r\n/**\r\n * 触发震动反馈\r\n * @param pattern - 震动模式（毫秒）\r\n */\r\nexport function vibrate(pattern: number | number[] = 10): boolean {\r\n  if (supportsVibrate()) {\r\n    return navigator.vibrate(pattern)\r\n  }\r\n  return false\r\n}\r\n\r\n/**\r\n * 监听视口变化\r\n * @param callback - 回调函数\r\n * @returns 取消监听函数\r\n */\r\nexport function onViewportChange(\r\n  callback: (info: ViewportInfo) => void\r\n): () => void {\r\n  if (typeof window === 'undefined') {\r\n    return () => {}\r\n  }\r\n\r\n  const handler = () => {\r\n    callback(getViewportInfo())\r\n  }\r\n\r\n  window.addEventListener('resize', handler)\r\n  window.addEventListener('orientationchange', handler)\r\n\r\n  return () => {\r\n    window.removeEventListener('resize', handler)\r\n    window.removeEventListener('orientationchange', handler)\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,kBACJ;AAKF,IAAI,sBAAsC;AAKnC,SAAS,gBAAyB;CACvC,IAAI,wBAAwB,MAC1B,OAAO;CAGT,IAAI,OAAO,WAAW,aACpB,OAAO;CAGT,sBACE,kBAAkB,UAClB,UAAU,iBAAiB,KAE3B,UAAU,mBAAmB;CAE/B,OAAO;AACT;AAKO,SAAS,aAAsB;CACpC,IAAI,OAAO,cAAc,aACvB,OAAO;CAET,OAAO,gBAAgB,KAAK,UAAU,SAAS;AACjD;AAKO,SAAS,WAAoB;CAClC,IAAI,OAAO,WAAW,aACpB,OAAO;CAIT,IAAI,WAAW,GACb,OAAO;CAKT,KADoB,OAAO,cAAc,SAAS,gBAAgB,gBAC/C,KACjB,OAAO;CAIT,OAAO,cAAc;AACvB;AAKO,SAAS,gBAA4B;CAC1C,OAAO,SAAS,IAAI,WAAW;AACjC;AAKO,SAAS,kBAAgC;CAC9C,IAAI,OAAO,WAAW,aACpB,OAAO;EACL,OAAO;EACP,QAAQ;EACR,SAAS;EACT,SAAS;EACT,UAAU;CACZ;CAGF,MAAM,QAAQ,OAAO,cAAc,SAAS,gBAAgB;CAC5D,MAAM,SAAS,OAAO,eAAe,SAAS,gBAAgB;CAG9D,MAAM,WAAW,kBAAkB;CAEnC,OAAO;EACL;EACA;EACA,SAAS,OAAO,WAAW,OAAO;EAClC,SAAS,OAAO,WAAW,OAAO;EAClC,UAAU,SAAS;EACnB;CACF;AACF;AAKO,SAAS,oBAA8C;CAC5D,IACE,OAAO,WAAW,eAClB,OAAO,QAAQ,eACf,CAAC,IAAI,UAEL,OAAO;EAAE,KAAK;EAAG,OAAO;EAAG,QAAQ;EAAG,MAAM;CAAE;CAIhD,IAAI,CAAC,IAAI,SAAS,eAAe,0BAA0B,GACzD,OAAO;EAAE,KAAK;EAAG,OAAO;EAAG,QAAQ;EAAG,MAAM;CAAE;CAIhD,MAAM,MAAM,SAAS,cAAc,KAAK;CACxC,IAAI,MAAM,UAAU;;;;;;;;;CASpB,MAAM,OAAO,SAAS;CACtB,IAAI,CAAC,MAAM,OAAO;EAAE,KAAK;EAAG,OAAO;EAAG,QAAQ;EAAG,MAAM;CAAE;CACzD,KAAK,YAAY,GAAG;CAEpB,MAAM,WAAW,iBAAiB,GAAG;CACrC,MAAM,WAAW;EACf,KAAK,OAAO,WAAW,SAAS,GAAG,KAAK;EACxC,OAAO,OAAO,WAAW,SAAS,KAAK,KAAK;EAC5C,QAAQ,OAAO,WAAW,SAAS,MAAM,KAAK;EAC9C,MAAM,OAAO,WAAW,SAAS,IAAI,KAAK;CAC5C;CAEA,KAAK,YAAY,GAAG;CACpB,OAAO;AACT;AAKO,SAAS,kBAA2B;CACzC,OAAO,OAAO,cAAc,eAAe,aAAa;AAC1D;AAMO,SAAS,QAAQ,UAA6B,IAAa;CAChE,IAAI,gBAAgB,GAClB,OAAO,UAAU,QAAQ,OAAO;CAElC,OAAO;AACT;AAOO,SAAS,iBACd,UACY;CACZ,IAAI,OAAO,WAAW,aACpB,aAAa,CAAC;CAGhB,MAAM,gBAAgB;EACpB,SAAS,gBAAgB,CAAC;CAC5B;CAEA,OAAO,iBAAiB,UAAU,OAAO;CACzC,OAAO,iBAAiB,qBAAqB,OAAO;CAEpD,aAAa;EACX,OAAO,oBAAoB,UAAU,OAAO;EAC5C,OAAO,oBAAoB,qBAAqB,OAAO;CACzD;AACF"}

package/{esm/utils/device.d.ts → lib/utils/device.d.cts}

@@ -42,4 +42,3 @@ export declare function vibrate(pattern?: number | number[]): boolean;
  * @returns 取消监听函数
  */
 export declare function onViewportChange(callback: (info: ViewportInfo) => void): () => void;
-//# sourceMappingURL=device.d.ts.map

package/lib/utils/dom.cjs

@@ -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                    *
 * ***********************************
@@ -73,16 +73,19 @@ function insertTextAtCursor(input, text, maxLength) {
 	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)
@@ -123,6 +126,21 @@ function createElement(tag, attrs, children) {
 	});
 	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);
 }
@@ -140,6 +158,7 @@ exports.isClickOutside = isClickOutside;
 exports.isElementInViewport = isElementInViewport;
 exports.onClickOutside = onClickOutside;
 exports.preventDefaultAndStopPropagation = preventDefaultAndStopPropagation;
+exports.sanitizeSvgIcon = sanitizeSvgIcon;
 exports.scrollIntoViewIfNeeded = scrollIntoViewIfNeeded;
 exports.setInputCursorPosition = setInputCursorPosition;
 exports.setStyles = setStyles;