open-index/open-npm huggingface dataset:
npm package: @splice-cad/embed
Description: Embed Splice harness diagrams on your website
Author: Splice CAD
Latest version: 0.1.0-beta.2

# @splice-cad/embed

Embed Splice harness diagrams on your website with a simple JavaScript library.

## Installation

### CDN (Recommended)

```html
<script src="https://cdn.jsdelivr.net/npm/@splice-cad/embed@0.1.0-beta.2/dist/splice-embed.iife.js"></script>
```

### NPM

```bash
npm install @splice-cad/embed
```

## Quick Start

### Simple Usage (Public Harness)

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@splice-cad/embed@0.1.0-beta.2/dist/splice-embed.iife.js"></script>
</head>
<body>
  <div id="harness-container"></div>

  <script>
    Splice.embed('harness-container', 'your-harness-id', {
      width: '800px',
      height: '600px',
      showBOM: true
    });
  </script>
</body>
</html>
```

### Private Harness

```javascript
Splice.embed('harness-container', 'your-harness-id', {
  token: 'your-share-token', // Get from harness settings
  theme: 'dark',
  showBOM: true
});
```

### With Custom Styling

```javascript
Splice.embed('harness-container', 'your-harness-id', {
  styles: {
    backgroundColor: '#1e1e1e',
    textColor: '#e0e0e0',
    connectorFill: '#2a2a2a'
  }
});
```

## Features

- 🚀 Simple CDN-based loading
- 🎨 Fully customizable styling (CSS variables, JS options, web component attributes)
- 📱 Responsive and mobile-friendly
- 🔍 Interactive pan and zoom
- 📋 Optional BOM table display
- 🌓 Built-in theme presets (light, dark, high-contrast, blueprint)
- 🔒 Secure with share tokens
- 📦 Tiny bundle size (<100KB gzipped)

## API Reference

### `Splice.embed(containerId, harnessId, options)`

Creates an embedded harness viewer.

**Parameters:**
- `containerId` (string): ID of the container element
- `harnessId` (string): UUID of the harness to display
- `options` (object): Configuration options

**Options:**
- `token` (string): Share token for private harnesses
- `width` (string): Width of the container (default: '100%')
- `height` (string): Height of the container (default: '600px')
- `theme` ('light' | 'dark' | 'auto'): Theme preset
- `showBOM` (boolean): Display BOM table
- `showTitle` (boolean): Display harness title
- `interactive` (boolean): Enable pan/zoom controls
- `styles` (object): Custom style overrides
- `onLoad` (function): Callback when harness loads
- `onError` (function): Callback on error

**Returns:** Controller object with methods:
- `zoomIn()`: Zoom in
- `zoomOut()`: Zoom out
- `fitToView()`: Fit harness to viewport
- `destroy()`: Remove the embed
- `update(options)`: Update options dynamically

## Documentation

- [Full Documentation](https://splice-cad.com/#/docs)
- [Examples](./examples)

## Development

```bash
# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run build

# Type check
npm run type-check
```

## License

MIT © Splice CAD

## Support

- [GitHub Issues](https://github.com/splice-cad/splice-embed/issues)
- [Documentation](https://splice-cad.com/#/docs)
- [Main Website](https://splice-cad.com)
npm package: @spliceglobal/react-native-ducis-leave-attendence
Description: test
Author: saurabh_000
Latest version: 0.2.0

# react-native-ducis-leave-attendence

This is the package for leave and attendence

## Installation

```sh
npm install react-native-ducis-leave-attendence
```

## Usage

```js
import { LeaveComponent } from '@spliceglobal/react-native-ducis-leave-attendence';

// ...

<LeaveComponent
          //DropDown

          data={data}
          placeHolderDropDown={'Leave Type'}
          valueDropDown={selectedType}
          onChangeDropDownValue={(txt)=>setSelectedType(txt?.value)}
          dropDownIconColor={'black'}
          dropDownBackgroundColor={'red'}
          dropDownHeight={50}
          dropDownBorderRadius={30}


          //Start Date
          valueStartDateTimePicker={startDate}
          onSelectStartDateTimePicker={(date)=>setStartDate(date)}
          visibleLeftIconStartDateTimePicker={true}
          leftIconStartDatePicker={<Image source={require('./icons/calendar.png')} style={{height:16,width:16}}/>}
          placeHolderStartDatePicker={'Start Date'}
          startDateBackgroundColor={'green'}
          startDateHeight={50}
          startDateBorderRadius={30}

          //End Date
          valueEndDateTimePicker={endDate}
          onSelectEndDateTimePicker={(date)=>setEndDate(date)}
          visibleLeftIconEndDateTimePicker={true}
          leftIconEndDatePicker={<Image source={require('./icons/calendar.png')} style={{height:16,width:16}}/>}
          placeHolderEndDatePicker={'End Date'}
          endDateBackgroundColor={'yellow'}
          endDateHeight={50}
          endDateBorderRadius={30}

          //Aditional notes
          placeHolderAdditionalNote={'Aditional note'}
          valueAdditonalNote={note}
          onChangeAdditionalNoteValue={(text)=>setNote(text)}
          additionalNoteBackgroundColor={'cyan'}
          additionalNoteHeight={50}
          additionalNoteBorderRadius={20}

          //submit button 
          buttonName={'Submit'}
          buttonStyle={{borderRadius:20}}
          onPressButton={onPressButton}

        />
```

## Note

See the example folder for implemntation

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @splicer97/react-native-mytracker
Description: This is unofficial React Native wrapper for myTrackerSDK
Author: Nikita Kovantsov
Latest version: 2.1.0

# react-native-mytracker [![npm version](https://img.shields.io/npm/v/@splicer97/react-native-mytracker.svg?style=flat)](https://www.npmjs.com/package/@splicer97/react-native-mytracker) [![Downloads](https://img.shields.io/npm/dm/@splicer97/react-native-mytracker.svg)](http://www.npmtrends.com/@splicer97/react-native-mytracker)

This is unofficial React Native wrapper for myTrackerSDK

## React Native Support

Since version 1.0.0 the library can only be used on the new architecture

| version | react-native version |
| ------- | -------------------- |
| < 1.0.0 | < 0.76.0             |
| 1.0.0   | 0.76.*               |
| 2.0.0+  | 0.77.0+              |

## Installation

```sh
npm install @splicer97/react-native-mytracker
```

or

```sh
yarn add @splicer97/react-native-mytracker
```

then install pod

```sh
cd ios && pod install
```

## Usage

```js
import MyTracker from '@splicer97/react-native-mytracker';

// ...

MyTracker.initTracker('SDK_KEY');

//MyTracker Parameters
MyTracker.setCustomUserId('USER_ID');

//MyTracker Configurations
MyTracker.trackLaunchEnable(true);

MyTracker.autotrackPurchase(true);

MyTracker.trackLaunchTimeout(30);

MyTracker.bufferingPeriod(30);

MyTracker.forcingPeriod(30);

// 0  — location is not tracked
// 1  — uses the system's cached value
// 2  — uses a request for the current location (default)
MyTracker.trackLocation(0);

MyTracker.setDebugMode(false);

//MyTracker Events
MyTracker.trackEvent('name');

MyTracker.trackEventWithParams('name', {
  param1: 'name1',
  param2: 'name2',
});

MyTracker.trackLoginEvent('userId', 'vkConnectId');

MyTracker.trackLoginEventWithParams('userId', 'vkConnectId', {
  param1: 'name1',
  param2: 'name2',
});

MyTracker.trackInviteEvent();

MyTracker.trackInviteEventWithParams({
  param1: 'name1',
  param2: 'name2',
});

MyTracker.flush();

MyTracker.trackRegistrationEvent('userId', 'vkConnectId');

MyTracker.trackRegistrationEventWithParams('userId', 'vkConnectId', {
  param1: 'name1',
  param2: 'name2',
});

MyTracker.trackLevel();

MyTracker.trackLevelWithLevel(1);

MyTracker.trackLevelWithLevelWithParams(1, {
  param1: 'name1',
  param2: 'name2',
});

const instanceId = MyTracker.getInstanceId();
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @splicetree/adapter-vue
Description: 提供响应式 `items` 与操作方法，自动监听核心事件刷新视图。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/adapter-vue

提供响应式 `items` 与操作方法，自动监听核心事件刷新视图。

## 简介

SpliceTree Vue 适配层，将核心 `items()` 适配为 `shallowRef` 响应式数据，并复用核心 API。

[![version](https://img.shields.io/npm/v/@splicetree/adapter-vue.svg?label=version)](https://www.npmjs.com/package/@splicetree/adapter-vue)
[![downloads](https://img.shields.io/npm/dm/@splicetree/adapter-vue.svg)](https://npmcharts.com/compare/%40splicetree%2Fadapter-vue?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/adapter-vue.svg)](https://www.npmjs.com/package/@splicetree/adapter-vue)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 官方文档

文档与示例位于 [https://www.splicetree.dev](https://www.splicetree.dev)

## 安装

```sh
pnpm add @splicetree/adapter-vue
```

## 使用

```ts
import { useSpliceTree } from '@splicetree/adapter-vue'

const { items, expand, collapse, toggleExpand } = useSpliceTree(data, {
  defaultExpanded: ['a'],
})

// 在组件中渲染
// <template>
//   <div v-for="n in items" :key="n.id">{{ n.original.title }}</div>
// </template>
```

## 返回值

- `items: ShallowRef<SpliceTreeNode[]>` 响应式可见节点列表
- 其余方法属性与核心一致（除 `items()`）

## 选项（继承 Core）

| 名称              | 类型                 | 默认值     | 说明         |
| ----------------- | -------------------- | ---------- | ------------ |
| `keyField`        | `string`             | `'id'`     | 主键字段名   |
| `parentField`     | `string`             | `'parent'` | 父级字段名   |
| `plugins`         | `SpliceTreePlugin[]` | `[]`       | 插件列表     |
| `defaultExpanded` | `string[]`           | `[]`       | 初始展开集合 |

## License

[MIT](https://github.com/michaelcocova/splicetree/blob/main/LICENSE)，仓库地址 [https://github.com/michaelcocova/splicetree](https://github.com/michaelcocova/splicetree)
npm package: @splicetree/core
Description: SpliceTree 是一个 Headless 树运行时，面向扁平数据构建可操作的树结构，提供精简 API，并通过插件扩展搜索、拖拽、懒加载、键盘导航等能力。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/core

SpliceTree 是一个 Headless 树运行时，面向扁平数据构建可操作的树结构，提供精简 API，并通过插件扩展搜索、拖拽、懒加载、键盘导航等能力。

为扁平数据提供轻量、可扩展的树运行时。支持插件扩展事件与能力。

[![version](https://img.shields.io/npm/v/@splicetree/core.svg?label=version)](https://www.npmjs.com/package/@splicetree/core)
[![downloads](https://img.shields.io/npm/dm/@splicetree/core.svg)](https://npmcharts.com/compare/%40splicetree%2Fcore?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/core.svg)](https://www.npmjs.com/package/@splicetree/core)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 官方文档

文档与示例位于 [https://www.splicetree.dev](https://www.splicetree.dev)

## 安装

```sh
pnpm add @splicetree/core
```

## 使用

```ts
import { createSpliceTree } from '@splicetree/core'

const data = [
  { id: 'a' },
  { id: 'b', parent: 'a' },
]

const { items } = createSpliceTree(data, {
  keyField: 'id',
  parentField: 'parent',
  defaultExpanded: ['a'],
})

// 渲染可见节点
for (const node of items()) {
  console.log(node.id, node.level)
}
```

## 选项

| 名称              | 类型                 | 默认值     | 说明                         |
| ----------------- | -------------------- | ---------- | ---------------------------- |
| `keyField`        | `string`             | `'id'`     | 主键字段名                   |
| `parentField`     | `string`             | `'parent'` | 父级字段名                   |
| `plugins`         | `SpliceTreePlugin[]` | `[]`       | 插件列表（可扩展实例与节点） |
| `defaultExpanded` | `string[]`           | `[]`       | 初始展开的节点 id 集合       |

## 实例 API

- `items()` 返回当前可见节点序列
- `getNode(id)` 通过 id 获取节点
- `events` 事件总线（`on/emit`）
- `expand/collapse/toggleExpand(id)` 展开/收起/切换
- `appendChildren(parentId, children)` 追加子节点（支持追加到根）
- `moveNode(id, newParentId, beforeId?)` 移动到新父级，并指定插入位置

## 节点 API

- `id/original/level`
- `isExpanded()` 当前是否展开
- `hasChildren()` 是否存在子节点（懒加载插件可覆盖）
- `getParent()/getChildren()` 父子节点查询

## License

[MIT](https://github.com/michaelcocova/splicetree/blob/main/LICENSE)，仓库地址 [https://github.com/michaelcocova/splicetree](https://github.com/michaelcocova/splicetree)
npm package: @splicetree/plugin-checkable
Description: 为树节点提供勾选与半选能力，支持向下级联与向上计算半选。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/plugin-checkable

为树节点提供勾选与半选能力，支持向下级联与向上计算半选。

[![version](https://img.shields.io/npm/v/@splicetree/plugin-checkable.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-checkable)
[![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-checkable.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-checkable?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/plugin-checkable.svg)](https://www.npmjs.com/package/@splicetree/plugin-checkable)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 安装

`pnpm add @splicetree/plugin-checkable`

## 使用

```ts
import { createSpliceTree } from '@splicetree/core'
import checkable from '@splicetree/plugin-checkable'

const tree = createSpliceTree(data, {
  plugins: [checkable],
  configuration: {
    checkable: {
      defaultChecked: ['a'],
      // 可选：点击节点即切换勾选
      triggerByClick: true,
    },
  },
})
```

## Api

### Configuration

- `configuration.checkable.defaultChecked: string[]` 初始勾选集合
- `configuration.checkable.triggerByClick: boolean` 点击节点切换勾选

### Events

- `checked` 负载：`{ keys: string[] }` 勾选状态变化时触发

### 实例方法

- `checkedKeys` 当前勾选集合
- `indeterminateKeys` 当前半选集合

### 节点方法

- `isChecked(): boolean` 是否勾选
- `isIndeterminate(): boolean` 是否半选
- `toggleCheck(checked?: boolean)` 切换或显式设置
npm package: @splicetree/plugin-keyboard
Description: 提供快捷键导航能力：上下移动、展开与收起。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/plugin-keyboard

提供快捷键导航能力：上下移动、展开与收起。

[![version](https://img.shields.io/npm/v/@splicetree/plugin-keyboard.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-keyboard)
[![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-keyboard.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-keyboard?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/plugin-keyboard.svg)](https://www.npmjs.com/package/@splicetree/plugin-keyboard)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 安装

`pnpm add @splicetree/plugin-keyboard`

## 使用

```ts
import { createSpliceTree } from '@splicetree/core'
import keyboardNavigation from '@splicetree/plugin-keyboard'

const tree = createSpliceTree(data, {
  plugins: [keyboardNavigation],
  configuration: {
    keyboard: {
      autoListen: true,
      target: '.keyboard-wrap',
      keymap: { up: 'ArrowUp', down: 'ArrowDown', left: 'ArrowLeft', right: 'ArrowRight' },
    },
  },
})
```

## Api

### Configuration

- `configuration.keyboard.autoListen: boolean` 是否自动监听键盘（默认 `true`）
- `configuration.keyboard.target: HTMLElement | string | (() => HTMLElement | null)` 监听目标
- `configuration.keyboard.keymap: { up?: string; down?: string; left?: string; right?: string }` 快捷键映射

### 实例方法

- `activeId?: string` 当前激活节点 id（与选择插件协同）

### 节点方法

- 无（键盘插件不扩展节点方法，专注输入事件）
npm package: @splicetree/plugin-lazy-load
Description: 提供懒加载子节点能力，在首次展开时动态加载并追加到树。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/plugin-lazy-load

提供懒加载子节点能力，在首次展开时动态加载并追加到树。

[![version](https://img.shields.io/npm/v/@splicetree/plugin-lazy-load.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-lazy-load)
[![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-lazy-load.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-lazy-load?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/plugin-lazy-load.svg)](https://www.npmjs.com/package/@splicetree/plugin-lazy-load)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 安装

`pnpm add @splicetree/plugin-lazy-load`

## 使用

```ts
import { createSpliceTree } from '@splicetree/core'
import lazyLoad from '@splicetree/plugin-lazy-load'

const tree = createSpliceTree(data, {
  plugins: [lazyLoad],
  loadChildren: async (node) => {
    const resp = await fetch(`/api/children?parent=${node.id}`)
    const children = await resp.json()
    return children
  },
})
```

## Api

### 实例方法

| 名称                | 参数                      | 说明                       |
| ------------------- | ------------------------- | -------------------------- |
| `loadedKeys`        | `无`                      | 已加载集合                 |
| `isLoaded(id)`      | `id: string`              | 是否已加载                 |
| `load(id)`          | `id: string`              | 手动加载                   |
| `expand(ids)`       | `ids: string \| string[]` | 覆盖：未加载时先加载再展开 |
| `toggleExpand(ids)` | `ids: string \| string[]` | 覆盖：未加载时先加载再切换 |

### 节点方法

| 名称            | 参数 | 说明                                          |
| --------------- | ---- | --------------------------------------------- |
| `isLoaded()`    | `无` | 当前节点是否已加载                            |
| `hasChildren()` | `无` | 重写：未加载返回 `true`，加载后根据子节点判断 |
npm package: @splicetree/plugin-pointer
Description: 采集节点点击事件，统一派发 `input:node-click` 语义事件，供行为插件消费（如 `@splicetree/plugin-selectable`、`@splicetree/plugin-checkable`）。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/plugin-pointer

采集节点点击事件，统一派发 `input:node-click` 语义事件，供行为插件消费（如 `@splicetree/plugin-selectable`、`@splicetree/plugin-checkable`）。

[![version](https://img.shields.io/npm/v/@splicetree/plugin-pointer.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-pointer)
[![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-pointer.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-pointer?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/plugin-pointer.svg)](https://www.npmjs.com/package/@splicetree/plugin-pointer)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 安装

`pnpm add @splicetree/plugin-pointer`

## 使用

```ts
import { createSpliceTree } from '@splicetree/core'
import pointer from '@splicetree/plugin-pointer'

const tree = createSpliceTree(data, {
  plugins: [pointer],
})

// 在视图中调用
// inputNodeClick(nodeId, e) 会派发 input:node-click 事件（包含修饰键）
tree.inputNodeClick('a', mouseEvent)
```

## Api

- 事件派发
  - `inputNodeClick(nodeId, e: MouseEvent)` 派发 `input:node-click`
- 事件负载
  - `nodeId: string`
  - `modifiers: { shift: boolean; ctrl: boolean; meta: boolean; alt: boolean }`
npm package: @splicetree/plugin-search
Description: 为树提供搜索匹配能力，可自定义匹配器。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/plugin-search

为树提供搜索匹配能力，可自定义匹配器。

[![version](https://img.shields.io/npm/v/@splicetree/plugin-search.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-search)
[![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-search.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-search?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/plugin-search.svg)](https://www.npmjs.com/package/@splicetree/plugin-search)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 安装

`pnpm add @splicetree/plugin-search`

## 使用

```ts
import { createSpliceTree } from '@splicetree/core'
import search from '@splicetree/plugin-search'

const tree = createSpliceTree(data, {
  plugins: [search],
  matcher: (node, q) => String(node.original.title ?? '').toLowerCase().includes(q.toLowerCase()),
})

tree.search('readme')
```

## Api

### Options

| 选项      | 类型                                               | 默认值                                     | 说明         |
| --------- | -------------------------------------------------- | ------------------------------------------ | ------------ |
| `matcher` | `(node: SpliceTreeNode, query: string) => boolean` | `JSON.stringify(original).includes(query)` | 自定义匹配器 |

### Events

| 事件     | 负载                                | 说明         |
| -------- | ----------------------------------- | ------------ |
| `search` | `{ keys: string[], query: string }` | 搜索完成事件 |

### 实例方法

| 名称            | 参数            | 说明         |
| --------------- | --------------- | ------------ |
| `matchedKeys`   | `无`            | 匹配集合     |
| `isMatched(id)` | `id: string`    | 节点是否匹配 |
| `search(query)` | `query: string` | 执行搜索     |

### 节点方法

| 名称          | 参数 | 说明             |
| ------------- | ---- | ---------------- |
| `isMatched()` | `无` | 当前节点是否匹配 |
npm package: @splicetree/plugin-selectable
Description: 提供选择与激活能力，支持单选/多选与 Shift 范围选择；消费 `input:node-click` 与 `input:direction` 语义事件。
Author: Michael Cocova
Latest version: 3.1.1

# @splicetree/plugin-selectable

提供选择与激活能力，支持单选/多选与 Shift 范围选择；消费 `input:node-click` 与 `input:direction` 语义事件。

[![version](https://img.shields.io/npm/v/@splicetree/plugin-selectable.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-selectable)
[![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-selectable.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-selectable?minimal=true)
[![license](https://img.shields.io/npm/l/@splicetree/plugin-selectable.svg)](https://www.npmjs.com/package/@splicetree/plugin-selectable)
[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)

## 安装

`pnpm add @splicetree/plugin-selectable`

## 使用

```ts
import { createSpliceTree } from '@splicetree/core'
import keyboard from '@splicetree/plugin-keyboard'
import pointer from '@splicetree/plugin-pointer'
import selectable from '@splicetree/plugin-selectable'

const tree = createSpliceTree(data, {
  plugins: [keyboard, pointer, selectable],
  configuration: {
    selectable: {
      multiple: true,
      defaultSelected: ['a'],
    },
    keyboard: {
      autoListen: true,
      target: '.keyboard-wrap',
    },
  },
})
```

## Api

- Configuration

| 选项                                       | 类型       | 默认值  | 说明                 |
| ------------------------------------------ | ---------- | ------- | -------------------- |
| `configuration.selectable.multiple`        | `boolean`  | `false` | 是否启用多选         |
| `configuration.selectable.defaultSelected` | `string[]` | `[]`    | 初始选中节点 id 集合 |

- 行为
  - 单选：点击选中当前节点
  - 多选：
    - 普通点击采用单选语义：清空其它选中，仅选中当前节点；再次点击已选中节点则取消选中
    - `Ctrl/Cmd` 切换选中；`Shift` 范围选择
- 实例
  - `selectedKeys: Set<string>` 当前选中集合
  - `lastSelectedKey?: string` 最近一次选中的 id
  - `activeId?: string` 当前激活 id（用于键盘导航）
  - `isSelected(id: string): boolean`
  - `toggleSelect(id: string, selected?: boolean): void`
- 节点
  - `isSelected(): boolean`
  - `toggleSelect(selected?: boolean): void`
- 配置（`configuration.selectable`）
  - `multiple?: boolean` 是否多选
  - `defaultSelected?: string[]` 默认选中集合
npm package: @splicr/mcp-server
Description: Splicr MCP server — route what you read to what you're building
Latest version: 0.14.2

# @splicr/mcp-server

Route what you read to what you're building. Splicr captures knowledge from anywhere — articles, tweets, docs, code snippets — and surfaces it inside your coding agent exactly when you need it.

## Quick Start

```bash
npx @splicr/mcp-server setup
```

That's it. This will:

1. Open your browser to sign in (email + verification code, no password)
2. Auto-detect your coding agents (Claude Code, Cursor, Codex, Cline, Antigravity)
3. Configure Splicr in each one

One-time login. Token never expires.

## Commands

| Command | Description |
|---------|-------------|
| `npx @splicr/mcp-server setup` | One-time setup: sign in + auto-configure all agents |
| `npx @splicr/mcp-server login` | Re-authenticate (opens browser) |
| `npx @splicr/mcp-server uninstall` | Remove Splicr from all agents + delete credentials |
| `npx @splicr/mcp-server help` | Show all commands |

## Manual Configuration

If you prefer to configure manually, or use an agent that isn't auto-detected, add this to your agent's MCP settings:

```json
{
  "mcpServers": {
    "splicr": {
      "command": "npx",
      "args": ["-y", "@splicr/mcp-server"]
    }
  }
}
```

**Config file locations:**

| Agent | Config Path |
|-------|-------------|
| Claude Code | Run `claude mcp add --scope user splicr -- npx -y @splicr/mcp-server` |
| Cursor | `~/.cursor/mcp.json` |
| Cline (VS Code) | VS Code settings > Cline MCP |
| Antigravity | `~/.gemini/antigravity/mcp_config.json` |
| Codex | Run `codex mcp add splicr -- npx -y @splicr/mcp-server` |

## MCP Tools

Once connected, your coding agent gets these tools:

| Tool | Description |
|------|-------------|
| `search_knowledge` | Semantic search across your saved knowledge |
| `get_project_context` | New captures since last session (watermark-based) |
| `get_recent_insights` | Cross-project view of recent saves |
| `save_from_agent` | Save knowledge back to Splicr from your agent |
| `retry_failed` | Retry captures that failed processing |

## How to Capture

- **Telegram**: Send any link to [@splicr_bot](https://t.me/splicr_bot)
- **Browser**: Chrome extension (coming soon)
- **Mobile**: Share sheet app (coming soon)

AI automatically distills each save into an insight, routes it to your active projects, and generates embeddings for semantic search.

## Auth

Splicr uses passwordless authentication:

1. `setup` opens your browser
2. Enter your email, get a 6-digit verification code
3. Enter the code — done. Permanent API token saved to `~/.splicr/auth.json`

No passwords. No token refresh. No expiry.

## Links

- Website: [splicr.dev](https://splicr.dev)
- Telegram bot: [@splicr_bot](https://t.me/splicr_bot)
- GitHub: [github.com/c0ncepT23/Splicr](https://github.com/c0ncepT23/Splicr)
npm package: @splidejs/react-splide
Description: The React component for Splide.
Author: Naotoshi Fujita
Latest version: 0.7.12

<div align="center">
  <a href="https://splidejs.com" target="_blank">
      <img width="70" src="images/logo.svg">
  </a>
  <a href="https://reactjs.org/" target="_blank">
      <img width="70" src="images/react-logo.svg">
  </a>

  <h1>React Splide</h1>

  <p>
    React Splide is the React component for the
    <a href="https://github.com/Splidejs/splide">Splide</a> slider/carousel.
  </p>

  <p>
    <a href="https://splidejs.com/integration/react-splide/">Getting Started</a>
    <br>
    <a href="https://splidejs.com/">Demo</a>
    <br>
    <a href="https://github.com/Splidejs/splide/discussions">Discussions</a>
  </p>
</div>

## Quick Start
Get the latest version from NPM:
```
$ npm install @splidejs/react-splide
```

Import CSS and components:

```jsx
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/react-splide/css';

export function Slider() {
  return (
    <Splide options={ { rewind: true } } aria-label="React Splide Example">
      <SplideSlide>
        <img src="image1.jpg" alt="Image 1"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image2.jpg" alt="Image 2"/>
      </SplideSlide>
    </Splide>
  );
}
```

Visit [here](https://splidejs.com/integration/react-splide/) for more details.


## Support Splide

Please support the project if you like it!
- [GitHub Sponsors](https://github.com/sponsors/NaotoshiFujita)


## License
React Splide and Splide are released under the MIT license.
© 2021 Naotoshi Fujita
npm package: @splidejs/splide-extension-auto-scroll
Description: The Splide extension for continuously scrolling the slider.
Author: Naotoshi Fujita
Latest version: 0.5.3

<div align="center">
<a href="https://splidejs.com">
  <img alt="Splide" src="./images/logo.svg" width="70">
</a>

<h1>Auto Scroll - Splide Extension</h1>

<p>
The extension for continuously scrolling the <a href="https://github.com/Splidejs/splide">Splide</a> slider.
</p>

<p>
  <a href="https://splidejs.com/extensions/auto-scroll/#overview">Demo</a>
  <br>
  <a href="https://splidejs.com/extensions/auto-scroll/#installation">Getting Started</a>
  <br>
  <a href="https://splidejs.com/extensions/auto-scroll/#options">Options</a>
  <br>
  <a href="https://splidejs.com/">Splide</a>
</p>
</div>

## Packages

The package is available on NPM and [jsDelivr](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-auto-scroll).

```
$ npm install @splidejs/splide-extension-auto-scroll
```

Or download files from the dist directory.

## License
Splide is released under the MIT license.
© 2022 Naotoshi Fujita
npm package: @splidejs/splide-extension-grid
Description: The extension of Splide for creating grid inside slides.
Author: Naotoshi Fujita
Latest version: 0.4.1

<div align="center">
<a href="https://splidejs.com">
  <img alt="Splide" src="./images/logo.svg" width="70">
</a>

<h1>Grid - Splide Extension</h1>

<p>
The extension for creating rows and cols in a <a href="https://github.com/Splidejs/splide">Splide</a> slider.
</p>

[![](https://data.jsdelivr.com/v1/package/npm/@splidejs/splide-extension-grid/badge)](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-grid)

<p>
  <a href="https://splidejs.com/extensions/grid/#overview">Demo</a>
  <br>
  <a href="https://splidejs.com/extensions/grid/">Getting Started</a>
  <br>
  <a href="https://splidejs.com/extensions/grid/#options">Options</a>
  <br>
  <a href="https://splidejs.com/">Splide</a>
</p>
</div>

## Packages

The package is available on NPM and [jsDelivr](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-grid).

```
$ npm install @splidejs/splide-extension-grid
```

Or download files from the dist directory.

## License
Splide is released under the MIT license.
© 2021 Naotoshi Fujita
npm package: @splidejs/splide-extension-intersection
Description: The Splide extension for observing the intersection of the slider with the viewport.
Author: Naotoshi Fujita
Latest version: 0.2.0

<div align="center">
<a href="https://splidejs.com">
  <img alt="Splide" src="./images/logo.svg" width="70">
</a>

<h1>Intersection - Splide Extension</h1>

<p>
The extension for controlling the <a href="https://github.com/Splidejs/splide">Splide</a> slider when it enters or exits the viewport. For example, you can enable autoplay only when the slider is visible.
</p>

<p>
  <a href="https://splidejs.com/extensions/intersection/#overview">Demo</a>
  <br>
  <a href="https://splidejs.com/extensions/intersection/#installation">Getting Started</a>
  <br>
  <a href="https://splidejs.com/extensions/intersection/#options">Options</a>
  <br>
  <a href="https://splidejs.com/">Splide</a>
</p>
</div>

## Packages

The package is available on NPM and [jsDelivr](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-intersection).

```
$ npm install @splidejs/splide-extension-intersection
```

Or download files from the dist directory.


## Caveats

This extension does not support IE because of Intersection Observer.
You need to install a polyfill to make it work in IE.


## License
Splide is released under the MIT license.
© 2021 Naotoshi Fujita
npm package: @splidejs/splide-extension-url-hash
Description: The extension of Splide for URL hash navigation.
Author: Naotoshi Fujita
Latest version: 0.3.0

<div align="center">
<a href="https://splidejs.com">
  <img alt="Splide" src="./images/logo.svg" width="70">
</a>

<h1>URL Hash - Splide Extension</h1>

<p>
The extension for syncing a <a href="https://github.com/Splidejs/splide">Splide</a> slider with URL hash.
</p>

[![](https://data.jsdelivr.com/v1/package/npm/@splidejs/splide-extension-url-hash/badge)](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-url-hash)

<p>
  <a href="https://splidejs.com/extensions/url-hash/#overview">Demo</a>
  <br>
  <a href="https://splidejs.com/extensions/url-hash/">Getting Started</a>
  <br>
  <a href="https://splidejs.com/">Splide</a>
</p>
</div>

## Packages

The package is available on NPM and [jsDelivr](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-url-hash).

```
$ npm install @splidejs/splide-extension-url-hash
```

## License
Splide is released under the MIT license.
© 2022 Naotoshi Fujita
npm package: @splidejs/splide-extension-video
Description: The Splide extension for embedding videos.
Author: Naotoshi Fujita
Latest version: 0.8.0

<div align="center">
<a href="https://splidejs.com">
  <img alt="Splide" src="./images/logo.svg" width="70">
</a>

<h1>Video - Splide Extension</h1>

<p>
The extension for assigning HTML, YouTube and Vimeo videos to slides in a <a href="https://github.com/Splidejs/splide">Splide</a> slider and controlling play/pause on slide change.
</p>

[![](https://data.jsdelivr.com/v1/package/npm/@splidejs/splide-extension-video/badge)](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-video)

<p>
  <a href="https://splidejs.com/extensions/video/#overview">Demo</a>
  <br>
  <a href="https://splidejs.com/extensions/video/">Getting Started</a>
  <br>
  <a href="https://splidejs.com/extensions/video/#options">Options</a>
  <br>
  <a href="https://splidejs.com/">Splide</a>
</p>
</div>

## Packages

The package is available on NPM and [jsDelivr](https://www.jsdelivr.com/package/npm/@splidejs/splide-extension-video).

```
$ npm install @splidejs/splide-extension-video
```

Or download files from the dist directory.

## License
Splide is released under the MIT license.
© 2021 Naotoshi Fujita
npm package: @splidejs/svelte-splide
Description: Svelte component for the Splide slider/carousel.
Author: Naotoshi Fujita
Latest version: 0.2.9

<div align="center">
  <a href="https://splidejs.com">
      <img width="70" src="images/logo.svg">
  </a>
  <a href="https://svelte.dev/">
      <img width="70" src="images/svelte-logo.svg">
  </a>

  <h1>Svelte Splide</h1>

  <p>
    Svelte Splide is the Svelte component for the
    <a href="https://github.com/Splidejs/splide">Splide</a> slider/carousel.
  </p>

  <p>
    <a href="https://splidejs.com/integration/svelte-splide">Getting Started</a>
    <br>
    <a href="https://splidejs.com/">Demo</a>
    <br>
    <a href="https://github.com/Splidejs/splide/discussions">Discussions</a>
  </p>
</div>

## Quick Start
Get the latest version from NPM:
```
$ npm install @splidejs/svelte-splide
```

Import CSS and components:

```svelte
<script>
import { Splide, SplideSlide } from '@splidejs/svelte-splide';
import '@splidejs/svelte-splide/css';
</script>

<Splide options={ { rewind: true } } aria-label="Svelte Splide Example">
  <SplideSlide>
    <img src="image1.jpg" alt="Image 1"/>
  </SplideSlide>
  <SplideSlide>
    <img src="image2.jpg" alt="Image 2"/>
  </SplideSlide>
</Splide>
```

Visit [this page](https://splidejs.com/integration/svelte-splide) for more details.


## Support Splide

Please support the project if you like it!
- [GitHub Sponsors](https://github.com/sponsors/NaotoshiFujita)


## License
Svelte Splide and Splide are released under the MIT license.
© 2021 Naotoshi Fujita
npm package: @splidejs/vue-splide
Description: The Splide component for Vue.
Author: Naotoshi Fujita
Latest version: 0.6.12

<div align="center">
  <a href="https://splidejs.com" target="_blank">
      <img width="70" src="images/logo.svg">
  </a>
  <a href="https://v3.vuejs.org/" target="_blank">
      <img width="70" src="images/vue-logo.svg">
  </a>

  <h1>Vue Splide</h1>

  <p>
    Vue Splide is the Vue component for the
    <a href="https://github.com/Splidejs/splide">Splide</a> slider/carousel.
  </p>

  <p>
    <a href="https://splidejs.com/integration/vue-splide/">Getting Started</a>
    <br>
    <a href="https://splidejs.com/">Demo</a>
    <br>
    <a href="https://github.com/Splidejs/splide/discussions">Discussions</a>
  </p>
</div>

## Caveat

The latest version only supports **Vue 3**.
You have to use the old version (0.3.5) for Vue 2, but the Splide version is also outdated.


## Quick Start
Get the latest version from NPM:
```
$ npm install @splidejs/vue-splide
```

Import CSS and components:

```vue
<template>
  <Splide :options="{ rewind: true }" aria-label="Vue Splide Example">
    <SplideSlide>
      <img src="image1.jpg" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Sample 2">
    </SplideSlide>
  </Splide>
</template>

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { defineComponent } from 'vue';
import '@splidejs/vue-splide/css';

export default defineComponent( {
  components: { Splide, SplideSlide },
} );
</script>
```

Visit [here](https://splidejs.com/integration/vue-splide/) for more details.


## Support Splide

Please support the project if you like it!
- [GitHub Sponsors](https://github.com/sponsors/NaotoshiFujita)


## License
Vue Splide and Splide are released under the MIT license.
© 2022 Naotoshi Fujita
npm package: @splightplatform/splight-lib-ts
Description: ![npm](https://img.shields.io/npm/v/@splightplatform/splight-lib-ts) ![build](https://github.com/splightplatform/splight-lib-ts/actions/workflows/build.yml/badge.svg 'build') ![lint](https://github.com/splightplatform/splight-lib-ts/actions/workflows/lint
Latest version: 0.0.7-248

# Splight TypeScript Library

![npm](https://img.shields.io/npm/v/@splightplatform/splight-lib-ts)
![build](https://github.com/splightplatform/splight-lib-ts/actions/workflows/build.yml/badge.svg 'build')
![lint](https://github.com/splightplatform/splight-lib-ts/actions/workflows/lint.yml/badge.svg 'lint')
![test](https://github.com/splightplatform/splight-lib-ts/actions/workflows/test.yml/badge.svg 'test')
![npm](https://img.shields.io/npm/dw/@splightplatform/splight-lib-ts)

The Splight TypeScript library provides convenient access to the Splight API from applications written in TypeScript both in the client and the server.

## Release

IMPORTANT MESSAGE: Try to avoid changing directly the package.json version to release. Use the `npm version` command as follows

```sh
npm version prerelease
```

This will generate a prerelease version (X.X.X-1) and when you push the package.json changes will be reflected automatically. In case you found an error try with a directory without changes in progress.

```sh
git reset
git stash
npm version prerelease
git stash apply
```

## Usage

First, import setup from @splightplatform/splight-lib-ts. Then, you can create a splight object by calling setup.configure(). Optionally, you may pass the authentication headers to be used for making requests to the API. If running in Node, configure will try to read your authentication keys from the SPLIGHT_ACCESS_ID and SPLIGHT_ACCESS_KEY environment variables.

```typescript
import setup from '@splightplatform/splight-lib-ts';

const splight = setup.configure();

const attribute = await splight.engine.attributes.create({
  name: 'test attribute',
});

const { results: assets, next: nextAssetPage } =
  await splight.engine.assets.list();
```