@tdh-keyboard/react 1.0.0

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2025 dusionlike
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,278 @@
+# 中文键盘 React 组件库
+
+这是一个 React 的中文键盘组件库，支持拼音输入和手写输入。
+
+## 功能特点
+
+- 🔌 即插即用，自动绑定输入框
+- ✨ 支持拼音输入，带候选词选择功能
+- ✏️ 支持手写输入识别，支持连笔和简写
+- 🔧 可自定义手写识别算法
+- 📏 键盘大小可自定义缩放，灵活适配各种界面布局
+- 🌐 纯前端实现，可作为静态网页部署，无需服务端支持
+
+## 安装
+
+```bash
+npm install @tdh-keyboard/react
+# 或者
+yarn add @tdh-keyboard/react
+# 或者
+pnpm add @tdh-keyboard/react
+```
+
+## 属性
+
+### Props
+
+| 属性名           | 类型                              | 默认值    | 说明                                |
+| --------------- | --------------------------------- | -------- | ---------------------------------- |
+| defaultMode     | 'en' \| 'zh' \| 'hand' \| 'num'  | 'en'     | 默认的键盘模式                      |
+| enableHandwriting| boolean                          | false    | 是否启用手写输入                    |
+| position        | 'static' \| 'float' \| 'bottom'  | 'static' | 键盘定位模式                       |
+| floatMarginTop  | number                            | 0        | 浮动模式下键盘与输入框的距离         |
+| disableWhenNoFocus | boolean                       | true     | 当没有输入框获得焦点时是否禁用键盘   |
+| manual          | boolean                           | false    | 是否启用手动打开模式                |
+| numKeys         | string[][]                   | -        | 数字键盘的行配置                    |
+
+### 事件
+
+| 事件名 | 参数类型 | 说明 |
+| ------ | -------- | ---- |
+| onKey  | KeyEvent | 当用户在键盘上点击按键时触发 |
+
+## 基本使用
+
+### 全局配置
+
+可以在项目入口文件中设置全局配置：
+
+```typescript
+import { setKeyboardConfig } from '@tdh-keyboard/react'
+
+setKeyboardConfig({
+  defaultMode: 'zh',
+  enableHandwriting: true,
+  position: 'float'
+})
+```
+
+### 基础用法
+
+- 为了防止移动端设备弹出系统默认的键盘，建议在输入框上设置 `inputMode="none"` 属性。
+- 此外，可以通过在输入框上设置 `data-inputmode` 属性来指定组件默认打开的键盘类型 (可选值为 `'en'`, `'zh'`, `'hand'`, `'num'`)，具体键盘模式的说明请参考 `defaultMode` 属性。
+
+```tsx
+import { TdhKeyboard } from '@tdh-keyboard/react'
+import { useState } from 'react'
+import '@tdh-keyboard/react/style.css'
+
+function App() {
+  const [inputText, setInputText] = useState('')
+
+  return (
+    <div>
+      <input
+        value={inputText}
+        onChange={e => setInputText(e.target.value)}
+        data-inputmode="en_cap"
+        inputMode="none"
+        placeholder="点击使用键盘输入"
+      />
+
+      {/* 静态定位的键盘 */}
+      <TdhKeyboard />
+
+      {/* 浮动定位的键盘（跟随输入框） */}
+      <TdhKeyboard position="float" />
+
+      {/* 底部固定的键盘 */}
+      <TdhKeyboard position="bottom" />
+
+      {/* 启用手写输入的键盘 */}
+      <TdhKeyboard enableHandwriting={true} />
+
+      {/* 数字键盘 */}
+      <TdhKeyboard defaultMode="num" />
+    </div>
+  )
+}
+
+export default App
+```
+
+### 手动打开模式
+
+设置 `manual` 后，键盘不会再根据输入框焦点自动显示，需要通过 `ref` 手动控制：
+
+```tsx
+import type { KeyboardInstance } from '@tdh-keyboard/react'
+import { TdhKeyboard } from '@tdh-keyboard/react'
+import { useRef } from 'react'
+
+function App() {
+  const keyboardRef = useRef<KeyboardInstance>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <>
+      <input ref={inputRef} inputMode="none" />
+      <button onClick={() => keyboardRef.current?.open(inputRef.current)}>打开键盘</button>
+      <button onClick={() => keyboardRef.current?.close()}>关闭键盘</button>
+      <button onClick={() => keyboardRef.current?.destroy()}>销毁键盘</button>
+      <TdhKeyboard ref={keyboardRef} manual position="bottom" />
+    </>
+  )
+}
+```
+
+实例方法说明：
+
+- `open(target?)`：打开键盘，可选传入当前要写入的 `input` / `textarea`
+- `close()`：关闭键盘
+- `destroy()`：销毁当前键盘状态并清空绑定的输入框
+
+## 拼音引擎初始化
+
+### 使用 RIME WASM 拼音引擎
+
+拼音输入功能需要初始化拼音引擎。推荐使用基于 RIME WASM 的拼音引擎：
+
+```typescript
+import { createRimePinyinEngine } from '@tdh-keyboard/pinyin'
+import { registerPinyinEngine } from '@tdh-keyboard/react'
+
+// 注册 RIME 拼音引擎
+registerPinyinEngine(new RimePinyinEngine({
+  wasmDir: '/data',
+}))
+```
+
+worker写法参考 `examples`。
+
+### WASM 文件部署
+
+需要将以下文件发布到 `public/data/` 目录：
+
+- `rime-api.wasm` - RIME 引擎本体
+- `default.yaml` - 默认配置
+- `luna_pinyin.schema.yaml` - 拼音方案
+- `luna_pinyin.table.bin` 、`luna_pinyin.prism.bin` 、`luna_pinyin.reverse.bin` - 词典文件
+
+这些文件来自 `@tdh-keyboard/pinyin` 包的 `data/` 目录。
+```
+
+## 输入模式
+
+### 拼音输入模式 (zh)
+
+拼音输入模式支持单字拼音输入，具有以下特性：
+
+- 支持单字模糊拼音匹配
+- 使用内置词库进行单字匹配
+- 支持中英文快速切换
+
+> 注：目前仅支持单个汉字的拼音输入，连续词组输入功能正在开发中
+
+### 英文输入模式 (en)
+
+标准的英文键盘布局，支持英文字母、数字和常用符号的输入。
+
+### 手写输入模式 (hand)
+
+手写输入模式允许用户通过手写输入汉字，启用此模式需要设置 `enableHandwriting` 为 `true`。
+
+### 数字输入模式 (num)
+
+数字输入模式提供一个数字和小数点键盘，方便用户输入数字、金额等。
+
+## 手写识别
+
+组件库支持自定义手写识别服务。您可以注册自己的手写识别服务来处理用户的手写输入。
+
+### 手写识别接口
+
+手写识别服务需要实现以下接口：
+
+```typescript
+interface HandwritingRecognizer {
+  /**
+   * 初始化手写识别服务
+   * @returns 返回是否初始化成功
+   */
+  initialize(): Promise<boolean>
+
+  /**
+   * 识别手写笔迹
+   * @param strokeData 笔迹数据，格式为 x y c x y c ...，其中x和y是坐标，c表示是否为笔画的最后一点(1表示是，0表示否)
+   * @returns 识别结果列表
+   */
+  recognize(strokeData: number[]): Promise<string[]>
+
+  /**
+   * 关闭手写识别服务
+   */
+  close(): Promise<void>
+}
+```
+
+### 笔迹数据格式
+
+笔迹数据以数组形式存储，格式为 `[x1, y1, c1, x2, y2, c2, ...]`，其中：
+- `x`、`y` 是坐标点
+- `c` 表示是否为笔画的最后一点：1表示是最后一点，0表示不是
+
+例如，一个简单的笔画可能是：`[100, 150, 0, 101, 151, 0, 102, 152, 1]`，表示三个点的笔画，最后一个点是笔画的结束点。
+
+### 注册手写识别服务
+
+```typescript
+import { registerHandwritingRecognizer } from '@tdh-keyboard/react'
+import { MyHandwritingRecognizer } from './MyHandwritingRecognizer'
+
+// 创建并注册您的手写识别服务
+const recognizer = new MyHandwritingRecognizer()
+registerHandwritingRecognizer(recognizer)
+```
+
+### 示例实现
+
+以下是一个简单的手写识别服务示例实现：
+
+```typescript
+import type { HandwritingRecognizer } from '@tdh-keyboard/react'
+
+export class MyHandwritingRecognizer implements HandwritingRecognizer {
+  private initialized = false
+
+  async initialize(): Promise<boolean> {
+    console.log('初始化手写识别服务...')
+    // 在实际应用中，这里可能需要加载模型或连接到服务器
+    this.initialized = true
+    return true
+  }
+
+  async recognize(strokeData: number[]): Promise<string[]> {
+    if (!this.initialized) {
+      throw new Error('手写识别服务未初始化')
+    }
+
+    console.log('识别笔迹数据:', strokeData)
+
+    // 这里调用您的手写识别API
+    // 返回识别结果
+    return ['你', '我', '他', '好', '的']
+  }
+
+  async close(): Promise<void> {
+    console.log('关闭手写识别服务')
+    this.initialized = false
+  }
+}
+```
+
+## 生命周期
+
+1. 当手写输入组件挂载时，会自动调用手写识别服务的 `initialize()` 方法
+2. 当用户完成一个笔画时，会调用 `recognize()` 方法进行识别
+3. 当手写输入组件卸载时，会调用 `close()` 方法关闭手写识别服务

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/CandidateBar.d.ts

@@ -0,0 +1,12 @@
+import { KeyEvent } from '../types';
+interface CandidateBarProps {
+    currentPinyin: string;
+    onKey: (payload: KeyEvent) => void;
+    onInput: (text: string) => void;
+    setCurrentPinyin: (pinyin: string) => void;
+}
+export interface CandidateBarRef {
+    handleSelection: (globalIndex: number) => Promise<void>;
+}
+declare const CandidateBar: import('react').ForwardRefExoticComponent<CandidateBarProps & import('react').RefAttributes<CandidateBarRef>>;
+export default CandidateBar;

package/dist/components/CandidateList.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface CandidateListProps {
+    candidates: string[];
+    onSelect: (index: number) => void;
+}
+declare const CandidateList: React.FC<CandidateListProps>;
+export default CandidateList;

package/dist/components/CandidateSelection.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface CandidateSelectionProps {
+    candidates: string[];
+    onSelect: (index: number) => void;
+    onClose: () => void;
+}
+declare const CandidateSelection: React.FC<CandidateSelectionProps>;
+export default CandidateSelection;

package/dist/components/HandwritingInput.d.ts

@@ -0,0 +1,12 @@
+import { KeyEvent } from '../types';
+import { default as React } from 'react';
+interface HandwritingInputProps {
+    recognizerInitialized: boolean;
+    recognizerProgress: number;
+    onKey: (payload: KeyEvent) => void;
+    onCollapse: () => void;
+    onSwitchToSymbol: () => void;
+    onToggleKeyboard: () => void;
+}
+declare const HandwritingInput: React.FC<HandwritingInputProps>;
+export default HandwritingInput;

package/dist/components/KeyboardBase.d.ts

@@ -0,0 +1,14 @@
+import { KeyBoardMode, KeyEvent } from '../types';
+import { default as React } from 'react';
+interface KeyboardBaseProps {
+    enableHandwriting?: boolean;
+    capsReturnToChinese: boolean;
+    mode: KeyBoardMode;
+    onKey: (payload: KeyEvent) => void;
+    onCollapse: () => void;
+    onToggleKeyboard: () => void;
+    setCapsReturnToChinese: (value: boolean) => void;
+    setMode: (mode: KeyBoardMode) => void;
+}
+declare const KeyboardBase: React.FC<KeyboardBaseProps>;
+export default KeyboardBase;

package/dist/components/KeyboardToolbar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface KeyboardToolbarProps {
+    enableHandwriting?: boolean;
+    isHandwritingMode?: boolean;
+    onToggleKeyboard: () => void;
+    onCollapse: () => void;
+}
+declare const KeyboardToolbar: React.FC<KeyboardToolbarProps>;
+export default KeyboardToolbar;

package/dist/components/NumericKeyboard.d.ts

@@ -0,0 +1,9 @@
+import { KeyEvent } from '../types';
+import { default as React } from 'react';
+interface NumericKeyboardProps {
+    onKey: (payload: KeyEvent) => void;
+    onExit: () => void;
+    keyboardRows?: string[][];
+}
+declare const NumericKeyboard: React.FC<NumericKeyboardProps>;
+export default NumericKeyboard;

package/dist/components/SymbolKeyboard.d.ts

@@ -0,0 +1,8 @@
+import { KeyEvent } from '../types';
+import { default as React } from 'react';
+interface SymbolKeyboardProps {
+    onKey: (payload: KeyEvent) => void;
+    onExit: () => void;
+}
+declare const SymbolKeyboard: React.FC<SymbolKeyboardProps>;
+export default SymbolKeyboard;

package/dist/components/TdhKeyboard.d.ts

@@ -0,0 +1,16 @@
+import { KeyBoardMode, KeyEvent, KeyboardInstance } from '../types';
+import { default as React } from 'react';
+export interface TdhKeyboardProps {
+    defaultMode?: KeyBoardMode;
+    enableHandwriting?: boolean;
+    position?: 'static' | 'float' | 'bottom';
+    floatMarginTop?: number;
+    disableWhenNoFocus?: boolean;
+    manual?: boolean;
+    onKey?: (payload: KeyEvent) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    numKeys?: string[][];
+}
+declare const TdhKeyboard: React.ForwardRefExoticComponent<TdhKeyboardProps & React.RefAttributes<KeyboardInstance>>;
+export default TdhKeyboard;

package/dist/hooks/useActiveElement.d.ts

@@ -0,0 +1,6 @@
+/**
+ * React hook for tracking `document.activeElement`
+ *
+ * @returns 当前激活的元素
+ */
+export declare function useActiveElement<T extends HTMLElement>(): T | null | undefined;

package/dist/hooks/useInit.d.ts

@@ -0,0 +1 @@
+export declare function useInit(fn: () => void): void;

package/dist/hooks/useKeyRepeater.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare function useKeyRepeater(): {
+    startRepeat: (e: React.PointerEvent, action: () => void) => void;
+    stopRepeat: () => void;
+};

package/dist/lib.d.ts

@@ -0,0 +1,5 @@
+import { default as TdhKeyboard } from './components/TdhKeyboard';
+export * from '@tdh-keyboard/core';
+export type * from './types';
+export { TdhKeyboard };
+export default TdhKeyboard;

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/style.css

@@ -0,0 +1,2 @@
+.tdhk-candidate-list{gap:var(--gap);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;flex:1;min-width:0;display:flex;overflow-x:auto}.tdhk-candidate-list::-webkit-scrollbar{display:none}.tdhk-candidate-list__item{font-size:var(--candidate-font-size);min-width:var(--candidate-font-size);padding:0 calc(var(--candidate-font-size) * .35);color:var(--key-text-color,#333);cursor:pointer;white-space:nowrap;background-color:#0000;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;transition:all .1s;display:flex}.tdhk-candidate-list__item:first-child{color:var(--primary-color,#0076f5);font-weight:500}.tdhk-candidate-list__item:hover{background-color:#0000000d}.tdhk-toolbar{align-items:center;gap:clamp(8px, var(--keyboard-height) / 18, 18px);width:100%;min-height:100%;padding:0 clamp(8px, var(--keyboard-height) / 18, 18px);border-radius:calc(var(--key-border-radius,6px) * 1.5);background-color:var(--background-color,#f7f8f9);box-sizing:border-box;display:flex}.tdhk-toolbar__button{color:#5e6773;width:clamp(34px, var(--keyboard-header-height) * .9, 46px);height:clamp(26px, var(--keyboard-header-height) * .72, 34px);cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;padding:0;transition:background-color .12s,transform .12s,opacity .12s;display:inline-flex}.tdhk-toolbar__button:hover{background-color:#5e677314}.tdhk-toolbar__button:active{background-color:#5e67731f;transform:translateY(1px)}.tdhk-toolbar__button:disabled{cursor:not-allowed;opacity:.45;background-color:#0000;transform:none}.tdhk-toolbar__button--collapse{width:clamp(40px, var(--keyboard-header-height) * 1.05, 50px)}.tdhk-toolbar__icon{width:clamp(20px, var(--keyboard-header-height) * .5, 26px);height:clamp(20px, var(--keyboard-header-height) * .5, 26px);object-fit:contain;display:block}.tdhk-toolbar__spacer{flex:1}.tdhk-toolbar__divider{background:linear-gradient(#c4cad200 0%,#c4cad2e6 50%,#c4cad200 100%);align-self:stretch;width:1px;margin:4px 0}.handwriting-input{background:var(--background-color,#f5f5f5);height:100%;padding:var(--gap);gap:var(--keyboard-stack-gap);box-sizing:border-box;flex-direction:column;display:flex}.handwriting-input__header{flex:0 0 var(--keyboard-header-height);height:var(--keyboard-header-height);min-height:var(--keyboard-header-height);display:flex;overflow:hidden}.handwriting-input__candidates{box-sizing:border-box;background-color:var(--background-color,#f7f8f9);border-radius:calc(var(--key-border-radius,6px) * 1.5);flex:1;align-items:center;min-width:0;height:100%;padding:0 8px;display:flex;overflow:hidden}.handwriting-input .handwriting-content{flex:1 0 var(--keyboard-body-min-height);justify-content:center;align-items:flex-start;gap:var(--gap);flex-flow:row;min-height:0;display:flex;overflow:hidden}.handwriting-input .handwriting-canvas-container{background:#fff;flex:4;justify-content:center;align-items:center;height:100%;font-size:0;display:flex}.handwriting-input .handwriting-canvas-container .handwriting-loading{width:100%;height:100%;padding:calc(var(--gap) * 2);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;display:flex}.handwriting-input .handwriting-canvas-container .handwriting-loading .loading-text{color:var(--text-color,#333);margin-bottom:calc(var(--gap) * 2);text-align:center;font-size:16px}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar{background-color:var(--border-color,#dcdcdc);width:80%;height:8px;margin-bottom:var(--gap);border-radius:4px;overflow:hidden}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar .progress-fill{background-color:var(--primary-color,#007bff);border-radius:4px;height:100%;transition:width .3s}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-text{color:var(--text-color,#666);font-size:14px;font-weight:500}.handwriting-input .handwriting-canvas{touch-action:none;width:100%;height:100%;display:block}.handwriting-input .handwriting-buttons{justify-content:space-between;gap:var(--gap);max-width:calc(var(--keyboard-height) / 4);flex-direction:column;flex:1;height:100%;display:flex}.handwriting-input .handwriting-btn{padding:var(--gap);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--function-key-color,#e4e7ea);box-shadow:var(--key-shadow,0 1px 2px #0000001a);cursor:pointer;white-space:nowrap;width:100%;font-size:var(--key-font-size);color:#555;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:1;justify-content:center;align-items:center;font-weight:500;transition:all .12s;display:flex}.handwriting-input .handwriting-btn:hover{filter:brightness(98%)}.handwriting-input .handwriting-btn:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#cdd3d8;transform:translateY(1px)}.handwriting-input .handwriting-btn--function img{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));object-fit:contain;flex-shrink:0}.tdhk-selection{z-index:2;width:100%;height:100%;padding:var(--gap);justify-content:center;align-items:flex-start;gap:var(--gap);box-sizing:border-box;background:#f5f5f5;flex-wrap:nowrap;display:flex;position:absolute;top:0;left:0}.tdhk-selection__list{grid-template-columns:repeat(auto-fit, minmax(calc(var(--keyboard-height) / 7), 1fr));background-color:var(--key-background-color,#fff);border-radius:8px;flex:5;min-width:0;max-height:100%;display:grid;overflow:hidden auto;box-shadow:0 1px 4px #0000000d}.tdhk-selection__list::-webkit-scrollbar{width:4px}.tdhk-selection__list::-webkit-scrollbar-thumb{background-color:var(--border-color,#d1d5da);border-radius:2px}.tdhk-selection__list::-webkit-scrollbar-track{background-color:#0000}.tdhk-selection__text{font-size:var(--candidate-font-size);border-bottom:1px solid var(--border-color,#f0f0f0);border-right:1px solid var(--border-color,#f0f0f0);color:var(--key-text-color,#333);cursor:pointer;justify-content:center;align-items:center;padding:12px 8px;transition:background-color .12s;display:inline-flex}.tdhk-selection__text:hover{color:var(--primary-color,#0076f5);z-index:1;background-color:#f5f8ff}.tdhk-selection__text--span-2{grid-column:span 2}.tdhk-selection__text--span-3{grid-column:span 3}.tdhk-selection__func{flex:1;justify-content:flex-end;display:flex}.tdhk-selection__func-btn{width:100%;font-size:var(--key-font-size);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--function-key-color,#e4e7ea);cursor:pointer;color:#555;white-space:nowrap;padding:12px 0;font-weight:500;transition:all .12s;box-shadow:0 1px 2px #0000000d}.tdhk-selection__func-btn:hover{background-color:#dbdfe3}.tdhk-selection__func-btn:active{box-shadow:none;transform:translateY(1px)}.tdhk-candidate{box-sizing:border-box;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.tdhk-candidate__container{background-color:var(--background-color,#f7f8f9);border-radius:calc(var(--key-border-radius,6px) * 1.5);flex-direction:column;flex:1;width:100%;min-width:0;height:100%;padding:0 8px;display:flex;overflow:hidden}.tdhk-candidate__pinyin{font-size:var(--candidate-pinyin-font-size,14px);color:var(--primary-color,#0076f5);letter-spacing:.5px;box-sizing:border-box;flex:1;align-items:center;padding-left:4px;display:flex}.tdhk-candidate__bottom-container{align-items:center;gap:var(--gap);flex:3;width:100%;display:flex}.tdhk-candidate__more{cursor:pointer;width:clamp(30px, var(--keyboard-header-height) * .62, 38px);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.tdhk-base{height:100%;padding:var(--gap);box-sizing:border-box;flex-direction:column;display:flex}.tdhk-base__row{flex:1 0 var(--keyboard-row-min-height);min-height:var(--keyboard-row-min-height);justify-content:center;gap:var(--gap);margin-bottom:var(--keyboard-stack-gap);display:flex}.tdhk-base__row:last-child{margin-bottom:0}.tdhk-base__row--header{flex:0 0 var(--keyboard-header-height);height:var(--keyboard-header-height);min-height:var(--keyboard-header-height);overflow:hidden}.tdhk-base__key{width:var(--key-width);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--key-background-color,#fff);min-height:36px;box-shadow:var(--key-shadow,0 1px 2px #0000001a);color:var(--key-text-color,#333);font-size:var(--key-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:none;justify-content:center;align-items:center;padding:0 5px;transition:all .12s;display:flex}.tdhk-base__key:hover{filter:brightness(98%);border-color:#c3c8cf}.tdhk-base__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.tdhk-base__key--function{width:var(--key-width);min-width:var(--key-min-width-function);background-color:var(--function-key-color,#e4e7ea);color:#555;flex:none;font-weight:500}.tdhk-base__key--function:active{background-color:#cdd3d8}.tdhk-base__key--shift,.tdhk-base__key--delete{flex:1;width:auto}.tdhk-base__key--space{flex:1;width:auto;min-width:20px}.tdhk-base__key--active{background-color:var(--primary-color,#0076f5);border-color:var(--primary-color,#0076f5);color:#fff}.tdhk-base__key--active:hover{filter:brightness(110%)}.tdhk-base__key--active:active{background-color:#005dc2}.tdhk-base__key--active .tdhk-base__key-icon{filter:brightness(0)invert()}.tdhk-base__key--disabled{background-color:var(--disabled-key-color,#f5f5f5);border-color:var(--disabled-key-border-color,#e0e0e0);color:var(--disabled-key-text-color,#bdbdbd);cursor:not-allowed}.tdhk-base__key--disabled .tdhk-base__key-icon{filter:brightness(.7)}.tdhk-base__key-icon{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));vertical-align:middle;object-fit:contain;flex-shrink:0;display:inline-block}.tdhk-base__toggle-main{font-size:max(14px, var(--keyboard-height) / 30)}.tdhk-base__toggle-sub{font-size:max(12px, var(--keyboard-height) / 40);color:var(--toggle-sub-color,#888);margin-left:2px}.num-keyboard{box-sizing:border-box;flex-direction:column;height:100%;padding:8px;display:flex}.num-keyboard__container{gap:8px;height:100%;display:flex}.num-keyboard__left{flex-direction:column;flex:3;display:flex}.num-keyboard__right{flex-direction:column;flex:1;justify-content:space-between;gap:6px;display:flex}.num-keyboard__rows{gap:var(--gap);flex-direction:column;flex:1;display:flex}.num-keyboard__row{gap:var(--gap);flex:1;display:flex}.num-keyboard__key{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);box-shadow:var(--key-shadow,0 1px 2px #0000001a);font-size:var(--key-font-size);color:var(--key-text-color,#333);cursor:pointer;flex:1;justify-content:center;align-items:center;font-weight:500;transition:all .12s;display:flex}.num-keyboard__key:hover{filter:brightness(98%)}.num-keyboard__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.num-keyboard__key--function{background-color:var(--function-key-color,#e4e7ea);height:calc(25% - 6px);font-size:var(--key-font-size);color:#555;font-weight:500}.num-keyboard__key--function:active{background-color:#cdd3d8}.num-keyboard__key--back{font-size:var(--key-font-size);background-color:var(--function-key-color,#e4e7ea)}.num-keyboard__key--back:active{background-color:#cdd3d8}.num-keyboard__key--space{font-size:var(--key-font-size)}.num-keyboard__key-icon{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));object-fit:contain;flex-shrink:0;display:inline-block}.symbol-keyboard{--key-size:max(45px, calc(var(--keyboard-height,220px) / 5));--lang-btn-size:var(--key-size);--gap:max(4px, calc(var(--keyboard-height,220px) / 75));--function-width:var(--key-size);--symbol-min-size:calc(var(--key-size) * .85);box-sizing:border-box;flex-direction:column;height:100%;padding:10px;display:flex}.symbol-keyboard__content{gap:var(--gap);flex:1;height:100%;display:flex}.symbol-keyboard__functions{justify-content:space-between;gap:var(--gap);width:var(--function-width);flex-direction:column;display:flex}.symbol-keyboard__lang-selector{height:calc(var(--lang-btn-size) * 2 + var(--gap));flex-direction:column;display:flex}.symbol-keyboard__lang-btn{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);font-size:max(12px, var(--key-font-size,1rem) * .8);cursor:pointer;box-sizing:border-box;width:var(--lang-btn-size);flex:1 0;justify-content:center;align-items:center;margin:0;padding:10px 0;transition:all .12s;display:flex}.symbol-keyboard__lang-btn:first-child{border-radius:var(--key-border-radius,6px) var(--key-border-radius,6px) 0 0}.symbol-keyboard__lang-btn:last-child{border-radius:0 0 var(--key-border-radius,6px) var(--key-border-radius,6px);margin-top:-1px}.symbol-keyboard__lang-btn:hover{filter:brightness(98%)}.symbol-keyboard__lang-btn--active{background-color:var(--primary-color,#0076f5);color:#fff;border-color:var(--primary-color,#0076f5);z-index:1;position:relative}.symbol-keyboard__lang-btn--active:hover{filter:brightness(110%)}.symbol-keyboard__control-group{gap:calc(var(--gap) + 2px);flex-direction:column;display:flex}.symbol-keyboard__symbols-container{flex:1;width:100%;height:100%;padding-right:5px;overflow-y:auto}.symbol-keyboard__symbols-container::-webkit-scrollbar{width:4px}.symbol-keyboard__symbols-container::-webkit-scrollbar-track{background:#0000000d;border-radius:2px}.symbol-keyboard__symbols-container::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.symbol-keyboard__symbols-container::-webkit-scrollbar-thumb:hover{background:#00000040}.symbol-keyboard__symbols-grid{grid-template-columns:repeat(auto-fit, minmax(var(--symbol-min-size), 1fr));gap:var(--gap);width:100%;max-height:100%;padding-bottom:10px;display:grid}.symbol-keyboard__key{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);box-shadow:var(--key-shadow,0 1px 2px #0000001a);font-size:max(18px, var(--key-font-size,1rem));color:var(--key-text-color,#333);cursor:pointer;box-sizing:border-box;min-width:var(--symbol-min-size);max-width:var(--key-size);width:100%;height:var(--key-size);aspect-ratio:1;flex-shrink:0;justify-content:center;align-items:center;margin:0;font-weight:400;transition:all .12s;display:flex}.symbol-keyboard__key:hover{filter:brightness(98%)}.symbol-keyboard__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.symbol-keyboard__key--function{background-color:var(--function-key-color,#e4e7ea);width:var(--function-width);height:var(--key-size);aspect-ratio:auto;color:#555;font-weight:500}.symbol-keyboard__key--function:active{background-color:#cdd3d8}.symbol-keyboard__key--lock{justify-content:center;align-items:center;padding:10px 0;font-size:18px;font-weight:700;display:flex}.symbol-keyboard__key--lock img{width:24px;height:24px}.symbol-keyboard__key--locked{background-color:var(--primary-color,#0076f5);color:#fff;border-color:var(--primary-color,#0076f5)}.symbol-keyboard__key--locked:hover{filter:brightness(110%)}.symbol-keyboard__key--locked:active{background-color:#005dc2}.symbol-keyboard__key--back{padding:10px 0;font-size:18px;font-weight:700;display:flex}.tdhk{--keyboard-scale-height:max(220px, var(--keyboard-height));--key-font-size:max(1rem, calc(var(--keyboard-scale-height) / 20));--candidate-font-size:clamp(18px, calc(var(--keyboard-scale-height) / 13.5), 22px);--candidate-pinyin-font-size:clamp(13px, calc(var(--keyboard-scale-height) / 16), 16px);--gap:clamp(4px, calc(var(--keyboard-scale-height) / 75), 6px);--keyboard-stack-gap:var(--gap);--keyboard-header-height:clamp(42px, calc(var(--keyboard-scale-height) / 4.8), 52px);--keyboard-row-min-height:clamp(36px, calc(var(--keyboard-scale-height) / 6.1), 42px);--keyboard-body-min-height:calc(var(--keyboard-row-min-height) * 4 + var(--keyboard-stack-gap) * 3);--key-width:calc((100% - 9 * var(--gap)) / 10);--key-min-width-function:45px;--key-icon-size:calc(var(--key-font-size) * 1.2);--keyboard-shell-radius:var(--key-border-radius,6px);--key-shadow:0 1px 2px #0000001a;--key-active-shadow:0 0px 1px #0000000d;border-radius:var(--keyboard-shell-radius);-webkit-user-select:none;user-select:none;background-color:#f7f8f9;width:320px;min-width:320px;max-width:1080px;height:220px;min-height:220px;font-family:PingFang SC,Microsoft YaHei,-apple-system,sans-serif;position:relative;overflow:hidden;box-shadow:0 8px 30px #0000001a}.tdhk--disabled{opacity:.7}.tdhk--floating{z-index:9999;position:fixed;box-shadow:0 4px 20px #0003}.tdhk--bottom{width:100%;min-width:min(var(--keyboard-height) + 100px, 100%);z-index:9999;border-radius:var(--keyboard-shell-radius) var(--keyboard-shell-radius) 0 0;max-width:100%;position:fixed;bottom:0;left:0;box-shadow:0 -2px 10px #0000001a}.tdhk__disabled-overlay{z-index:10;border-radius:var(--keyboard-shell-radius);background-color:#f5f5f5cc;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.tdhk__disabled-overlay span{color:#666;background-color:#e0e0e0;border-radius:5px;padding:15px 30px;font-size:16px}
+/*$vite$:1*/