open-index/open-npm huggingface dataset:
npm package: @meldscience/collab-spec
Description: Specification for Meld Science collaboration interfaces
Author: Meld Science
Latest version: 0.3.0

# Collab Spec

Core types and adapters for building collaborative AI modules.

## For Module Developers

This package provides:
- Type definitions for building collaborative AI modules
- Adapters for external SDK compatibility
- Comprehensive documentation for module development

### Getting Started

1. Install the package:
```bash
npm install @collab-spec
```

2. Read `src/docs/init/SETUP.md` for instructions on setting up your development environment, including how to link the spec documentation into your module.

### Documentation

The `src/docs` directory contains comprehensive documentation for module developers:
- `init/SETUP.md`: Initial setup and documentation structure
- `TYPES.md`: Type system guide and SDK adapter usage
- `PATTERNS.md`: Common patterns and best practices for module development

We recommend symlinking these docs into your module's documentation directory - see `init/SETUP.md` for details.

## Contributing

See `docs/CONTRIBUTING.md` for information about contributing to the spec.
npm package: @meleon/lock
Description: 实现九宫格锁屏效果，可以在 PC 或 H5 中使用
Author: meleon
Latest version: 1.0.10

## Description

实现九宫格锁屏效果，可以在 PC 或 H5 中使用

## Installation

```bash
npm install @meleon/lock
```

## Options

| Field      | Feat.                  | Type                      |
| ---------- | ---------------------- | ------------------------- |
| chooseType | 设置点阵数量           | 3 \| 4 \| 5【default: 3】 |
| mode       | 解锁模式或设置密码模式 | GestureLockMode           |
| canvasId   | 绘制canvas的容器ID     | String                    |
| titleId    | 填入描述信息的容器ID   | String                    |
| width      | canvas容器的宽度       | Number【default: 320】    |
| height     | canvas容器的高度       | Number【default: 320】    |
| colorMap   | 自定义不同状态的颜色   | Partial<ColorMap>         |

## Example

在 Vue3 项目中使用

```ts
import { defineComponent, onMounted, ref } from 'vue'
import { GestureLock, GestureLockMode, GestureEvents } from '@meleon/lock'
import style from './index.module.less'

export default defineComponent({
  setup() {
    const lockInstance = ref<GestureLock>()
    onMounted(() => {
      // 初始化 GestureLock 实例
      lockInstance.value = lock = new GestureLock({
        chooseType: 3,
        mode: GestureLockMode.INPUT_PASSWORD,
        canvasId: 'gesture-canvas',
        titleId: 'gesture-title',
        width: 300,
        height: 300,
        colorMap: {
          '--primary-color': '#175fff'
        },
      })
      
      // 设置密码
      lockInstance.value.setPassword('1235789')
        
      // 监听响应事件
      lockInstance.value.on(GestureEvents.PASS, (val: string) => {
        console.log('passed value', val)
      })
      lockInstance.value.on(GestureEvents.SETTLE, (val: string) => {
        console.log('settled value', val)
      })
      lockInstance.value.on(GestureEvents.VERIFY_FAILED, (val: string) => {
        console.log('failed value', val)
      })
    })

    return () => (
      <div class={style['test-wrapper']}>
        <div class={style['test-wrapper-frame']}>
          <div id="gesture-title" class={style['test-wrapper-frame--title']}></div>
          <div class={style['test-wrapper-frame--content']}>
            <canvas id="gesture-canvas"></canvas>
          </div>
        </div>
      </div>
    )
  }
})
```

## License

`MIT`

## Keywords

`web` 	`app` 	`lock`	 `meleon`