open-index/open-npm huggingface dataset:
npm package: @sofast/blocks
Description: 区块物料
Latest version: 0.0.22

# Arco 物料项目

[物料平台文档中心](https://arco.design/docs/material/guide)

## 快速开始

```
# 开发
npm run dev

# 构建
npm run build

# 发布前预览
npm run prepublishOnly && arco preview

# 发布至物料平台（需先发布 NPM 包）
arco sync
```


## 提供 Demo

Demo 目录位于 `src/demo`。你可以在此目录中加入多个 Demo，它们将被展示在物料平台的预览页。在 `src/demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。

```javascript
// src/demo/index.js

/**
 * @file
 * @title 名称
 * @memberOf 数据录入
 * @description 一段对于物料的描述。
 * @author 物料作者
 */

/**
 * @title 基础用法
 * @description 一个物料最基本的使用方式。
 */
export { default as Basic } from './basic';
```

## 测试

测试目录位于 `src/__test__`。你可以在 `index.test.tsx` 中编写你的测试用例。

`npm run test` 命令允许你传入任何 `jest` 的命令行参数，例如 `npm run test -- --u` `npm run test -- --no-cache`。
npm package: @sofast/components
Description: 业务组件物料
Latest version: 0.0.2

# Arco 物料项目

[物料平台文档中心](https://arco.design/docs/material/guide)

## 快速开始

```
# 开发
npm run dev

# 构建
npm run build

# 发布前预览
npm run prepublishOnly && arco preview

# 发布至物料平台（需先发布 NPM 包）
arco sync
```

## 提供 Demo

Demo 目录位于 `src/demo`。你可以在此目录中加入多个 Demo，它们将被展示在物料平台的预览页。在 `src/demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。

```javascript
// src/demo/index.js

/**
 * @file
 * @title 名称
 * @memberOf 数据录入
 * @description 一段对于物料的描述。
 * @author 物料作者
 */

/**
 * @title 基础用法
 * @description 一个物料最基本的使用方式。
 */
export { default as Basic } from './basic';
```

## API 文档

**为了帮助他人更好地使用你的组件，请提供详细的 API 文档。**

### 书写注释

我们提供了自动化的文档生成工具，它从 TS 接口定义中提取注释自动生成属性文档。按照以下指引使用，为接口书写 tsDoc 类型的注释：

```typescript
/**
 * @title Button (必填，带有 `title` 描述的接口或者类型才会被收集)
 */
interface ButtonProps {
  /**
   * @zh 按钮尺寸 (属性的中文描述)
   * @en Size of Button (属性的英文描述)
   * @version 1.2.0 (可选，新增的属性在哪个版本开始支持)
   * @defaultValue 'default' (可选，属性的默认值)
   */
  size?: 'mini' | 'small' | 'default' | 'large';
  /**
   * @zh 按钮状态
   * @en Status of Button
   */
  status?: 'danger' | 'error' | 'success';
}
```

### 扩展 TEMPLATE.md

`TEMPLATE.md` 是用于自动文档生成的模板，你可以修改此文件添加更多组件的使用帮助信息，但请不要删除其原有的内容，否则可能导致内容替换失败。

```markdown
// TEMPLATE.md
---
file: index,interface (可以指定多个文档提取的入口文件，使用逗号隔开)
---

# Components

## 属性/Props

%%Props%%

### OtherProps

在这里你可以书写更多组件帮助文档。

## Demos

%%Demos%%
```

## 测试

测试目录位于 `src/__test__`。你可以在 `index.test.tsx` 中编写你的测试用例。

`npm run test` 命令允许你传入任何 `jest` 的命令行参数，例如 `npm run test -- --u` `npm run test -- --no-cache`。
npm package: @sofast/core
Description: 组件物料
Latest version: 0.0.24

# Arco 物料库

[物料平台文档中心](https://arco.design/docs/material/guide)

## 快速开始

**在 `npm run dev` 前，请运行 `npm run add:component -- ComponentName` 创建第一个组件，否则 dev 将会因缺少 Story 入口而报错。**

```
# 添加组件
npm run add:component -- YourComponentName

# 开发模式
npm run dev

# 构建
npm run build

# 发布至物料平台（需先发布 NPM 包）
arco sync
```

## 样式

在 `components/style` 下，你可以编写全局样式。

`components/*/style/index.tsx` 用于组件样式的按需加载，你需要在此文件中声明该组件依赖的其他组件样式。 例如：组件 A 内使用到了组件 B，则按需加载 A 的样式时同样需要加载 B 的样式，故需要在 `components/A/style/index.tsx` 中声明 `import '../../B/style'`。


## 提供 Demo

Demo 目录位于 `components/*/demo`。在 `demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。

```javascript
// src/demo/index.js

/**
 * @file
 * @title 名称
 * @memberOf 数据录入
 * @description 一段对于物料的描述。
 * @author 物料作者
 */

/**
 * @title 基础用法
 * @description 一个物料最基本的使用方式。
 */
export { default as Basic } from './basic';
```

## API 文档

**为了帮助他人更好地使用你的组件，请提供详细的 API 文档。**

### 书写注释

我们提供了自动化的文档生成工具，它从 TS 接口定义中提取注释自动生成属性文档。按照以下指引使用，为接口书写 tsDoc 类型的注释：

```typescript
/**
 * @title Button (必填，带有 `title` 描述的接口或者类型才会被收集)
 */
interface ButtonProps {
  /**
   * @zh 按钮尺寸 (属性的中文描述)
   * @en Size of Button (属性的英文描述)
   * @version 1.2.0 (可选，新增的属性在哪个版本开始支持)
   * @defaultValue 'default' (可选，属性的默认值)
   */
  size?: 'mini' | 'small' | 'default' | 'large';
  /**
   * @zh 按钮状态
   * @en Status of Button
   */
  status?: 'danger' | 'error' | 'success';
}
```

### 扩展 TEMPLATE.md

`TEMPLATE.md` 是用于自动文档生成的模板，你可以修改此文件添加更多组件的使用帮助信息，但请不要删除其原有的内容，否则可能导致内容替换失败。

```markdown
// TEMPLATE.md
---
file: index,interface (可以指定多个文档提取的入口文件，使用逗号隔开)
---

# TooltipButton

## 属性/Props

%%Props%%

### OtherProps

在这里你可以书写更多组件帮助文档。

## Demos

%%Demos%%
```

## 测试

测试目录位于 `components/*/__test__`。你可以在 `index.test.tsx` 中编写你的测试用例，在 `demo.test.tsx` 中可以进行基于 Demo 的快照测试。

`npm run test` 命令允许你传入任何 `jest` 的命令行参数，例如 `npm run test -- --u` `npm run test -- --no-cache`。
npm package: @sofast/icons
Description: 图标物料
Latest version: 0.0.4

# Arco 物料项目

[物料平台文档中心](https://arco.design/docs/material/guide)

## 快速开始

```
# 开发
npm run dev

# 构建
npm run build

# 发布前预览
npm run prepublishOnly && arco preview

# 发布至物料平台（需先发布 NPM 包）
arco sync
```

## 提供 Demo

Demo 目录位于 `src/demo`。你可以在此目录中加入多个 Demo，它们将被展示在物料平台的预览页。在 `src/demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。

```javascript
// src/demo/index.js

/**
 * @file
 * @title 名称
 * @memberOf 数据录入
 * @description 一段对于物料的描述。
 * @author 物料作者
 */

/**
 * @title 基础用法
 * @description 一个物料最基本的使用方式。
 */
export { default as Basic } from './basic';
```

## API 文档

**为了帮助他人更好地使用你的组件，请提供详细的 API 文档。**

### 书写注释

我们提供了自动化的文档生成工具，它从 TS 接口定义中提取注释自动生成属性文档。按照以下指引使用，为接口书写 tsDoc 类型的注释：

```typescript
/**
 * @title Button (必填，带有 `title` 描述的接口或者类型才会被收集)
 */
interface ButtonProps {
  /**
   * @zh 按钮尺寸 (属性的中文描述)
   * @en Size of Button (属性的英文描述)
   * @version 1.2.0 (可选，新增的属性在哪个版本开始支持)
   * @defaultValue 'default' (可选，属性的默认值)
   */
  size?: 'mini' | 'small' | 'default' | 'large';
  /**
   * @zh 按钮状态
   * @en Status of Button
   */
  status?: 'danger' | 'error' | 'success';
}
```

### 扩展 TEMPLATE.md

`TEMPLATE.md` 是用于自动文档生成的模板，你可以修改此文件添加更多组件的使用帮助信息，但请不要删除其原有的内容，否则可能导致内容替换失败。

```markdown
// TEMPLATE.md
---
file: index,interface (可以指定多个文档提取的入口文件，使用逗号隔开)
---

# Icons

## 属性/Props

%%Props%%

### OtherProps

在这里你可以书写更多组件帮助文档。

## Demos

%%Demos%%
```

## 测试

测试目录位于 `src/__test__`。你可以在 `index.test.tsx` 中编写你的测试用例。

`npm run test` 命令允许你传入任何 `jest` 的命令行参数，例如 `npm run test -- --u` `npm run test -- --no-cache`。
npm package: @sofast/pages
Description: 页面物料
Latest version: 0.0.22

# Arco 物料项目

[物料平台文档中心](https://arco.design/docs/material/guide)

## 快速开始

```
# 开发
npm run dev

# 构建
npm run build

# 发布前预览
npm run prepublishOnly && arco preview

# 发布至物料平台（需先发布 NPM 包）
arco sync
```


## 提供 Demo

Demo 目录位于 `src/demo`。你可以在此目录中加入多个 Demo，它们将被展示在物料平台的预览页。在 `src/demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。

```javascript
// src/demo/index.js

/**
 * @file
 * @title 名称
 * @memberOf 数据录入
 * @description 一段对于物料的描述。
 * @author 物料作者
 */

/**
 * @title 基础用法
 * @description 一个物料最基本的使用方式。
 */
export { default as Basic } from './basic';
```

## 测试

测试目录位于 `src/__test__`。你可以在 `index.test.tsx` 中编写你的测试用例。

`npm run test` 命令允许你传入任何 `jest` 的命令行参数，例如 `npm run test -- --u` `npm run test -- --no-cache`。
npm package: @sofast/utils
Description: 工具物料
Latest version: 0.0.22

# 工具库物料

[物料平台文档中心](https://arco.design/docs/material/guide)

## 快速开始

```
# 添加组件
npm run add:util -- YourUtilName

# 开发模式
npm run dev

# 构建
npm run build

# 发布至物料平台（需先发布 NPM 包）
arco sync
```

## 提供 Demo

Demo 目录位于 `src/*/demo`。在 `demo/index.js` 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。

```javascript
// src/demo/index.js

/**
 * @file
 * @name add
 * @memberOf 函数分类，例如：数组处理
 * @description 描述你的函数。
 * @author 物料作者
 */
import add from '../index';

/**
 * @name 基本用法
 * @description 描述你的例子
 */
export const basic = {
  exec: () => add(),
  result: null,
};
```

## API 文档

**为了帮助他人更好地使用你的组件，请提供详细的 API 文档。**

### 书写注释

我们提供了自动化的文档生成工具，它从 TS 接口定义中提取注释自动生成属性文档。按照以下指引使用，为接口书写 tsDoc 类型的注释：

```typescript
/**
 * @title Add (必填，带有 `title` 描述的接口或者类型才会被收集)
 */
type Add = (
  /**
   * @zh 加数
   * @en Base number
   * @version 1.2.0 (可选，新增的参数在哪个版本开始支持)
   * @defaultValue 'default' (可选，参数的默认值)
   */
  a: number,
  /**
   * @zh 被加数
   * @en Number added
   */
  b: number
) => number;

```

### 扩展 TEMPLATE.md

`TEMPLATE.md` 是用于自动文档生成的模板，你可以修改此文件添加更多组件的使用帮助信息，但请不要删除其原有的内容，否则可能导致内容替换失败。

```markdown
// TEMPLATE.md
---
file: index,interface (可以指定多个文档提取的入口文件，使用逗号隔开)
---

# Add

## 属性/Props

%%Props%%

### OtherProps

在这里你可以书写更多组件帮助文档。
```

## 测试

测试目录位于 `src/*/__test__`。默认情况下会根据 Demo 中的声明进行测试，你也可以在 `index.test.tsx` 中补充你的测试用例，。

`npm run test` 命令允许你传入任何 `jest` 的命令行参数，例如 `npm run test -- --u` `npm run test -- --no-cache`。
npm package: @sofastapp/api
Description: Sofast SDK for building plugins and integrations.
Author: Sofast
Latest version: 0.0.3

# @sofastapp/api

Sofast 插件/集成开发 SDK。提供基础类型与最小工具函数，帮助插件在 view(no-view 后续扩展) 模式下与宿主交互。

## 安装

在工作区中（建议使用 pnpm workspace 管理），将本包作为依赖添加：

```bash
npx pnpm -w add @sofastapp/api
```

> 注意：本仓库内该包为源码包，首次需要在包目录下安装开发依赖并构建。

## 开发

```bash
# 在本包目录下（extensions/packages/api）
npx pnpm i
npx pnpm build
```

## API 概览

- `inSofastIframe()`：检测是否处于 Sofast 的 iframe 环境
- `getCurrentCommand()`：获取当前 URL 上的 `cmd` 参数
- `getSessionId()`：获取当前 URL 上的 `sid` 参数
- `loadManifest(pkg)`：从 `package.json` 的 `sofast` 字段读取并校验 Manifest
- `postToHost(message)`：向宿主发送消息（postMessage）
- `subscribeHostMessage(handler)`：订阅来自宿主的消息


## 构建

使用 tsup 生成 ESM + CJS + 类型声明：

```bash
npx pnpm build
```
npm package: @sofather/tiny
Description: Removes all spaces from a string
Latest version: 2.0.0

# @bamblehorse/tiny

[![npm (scoped)](https://img.shields.io/npm/v/@bamblehorse/tiny.svg)](https://www.npmjs.com/package/@bamblehorse/tiny)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@bamblehorse/tiny.svg)](https://www.npmjs.com/package/@bamblehorse/tiny)

Removes all spaces from a string.

## Install

```
$ npm install @bamblehorse/tiny
```

## Usage

```js
const tiny = require("@bamblehorse/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
```
npm package: @sofe/stream-md5
Description: MD5 implementation in JS that allows progressive hashing and is binary safe
Author: James Hartig
Latest version: 0.0.2

Allows you to stream md5 data and hash at the very end which is very efficient when working with files.
This file is based off Joseph Myers' version found at http://www.myersdaily.org/joseph/javascript/md5-text.html.

The progressive portion is based off PHP's implementation. See http://php.net/manual/en/function.hash-init.php

## Notes

* If you pass an array, we look at the first element to determine if its an array of characters or of bytes.
* Buffers are assumed to contain bytes.
* You cannot mix types in a progressive state. (This will be fixed in a later version)

## Examples

```JS
//to hash a single string
var hash = StreamMD5.hash("test")
//098f6bcd4621d373cade4e832627b4f6
```

```JS
//for streaming data
var state = StreamMD5.init();
while (something) {
    StreamMD5.update(state, string);
}
var hash = StreamMD5.finalize(state);
```

## Todo

* Support streams
npm package: @sofent/rainbowkit
Description: The best way to connect a wallet
Author: Rainbow
Latest version: 2.0.0-beta.3

<a href="https://rainbowkit.com">
  <img alt="rainbowkit" src="https://user-images.githubusercontent.com/372831/168174718-685980e0-391e-4621-94a1-29bf83979fa5.png" />
</a>

# RainbowKit

**The best way to connect a wallet 🌈**

RainbowKit is a [React](https://reactjs.org/) library that makes it easy to add wallet connection to your dapp.

- 🔥 Out-of-the-box wallet management
- ✅ Easily customizable
- 🦄 Built on top of [wagmi](https://wagmi.sh) and [viem](https://viem.sh)

## Quick start

You can scaffold a new RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) app with one of the following commands, using your package manager of choice:

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

## Documentation

For full documentation, visit [rainbowkit.com](https://rainbowkit.com).

### Try it out

You can use the CodeSandbox links below to try out RainbowKit:

- with [Create React App](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-create-react-app)
- with [Next.js](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next)
- with [Next.js App Router](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-next-app)
- with [Remix](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-remix)
- with [Vite](https://codesandbox.io/p/sandbox/github/rainbow-me/rainbowkit/tree/main/examples/with-vite)

## Examples

The following examples are provided in the [examples](./examples/) folder of this repo.

- `with-create-react-app`
- `with-next`
- `with-next-app`
- `with-next-custom-button`
- `with-next-mint-nft`
- `with-next-siwe-next-auth`
- `with-next-siwe-iron-session`
- `with-remix`
- `with-vite`

### Running examples

To run an example locally, install dependencies.

```bash
pnpm install
```

Then go into an example directory, eg: `with-next`.

```bash
cd examples/with-next
```

Then run the dev script.

```bash
pnpm run dev
```

## Contributing

Please follow our [contributing guidelines](./.github/CONTRIBUTING.md).

## License

Licensed under the MIT License, Copyright © 2022-present [Rainbow](https://rainbow.me).

See [LICENSE](./LICENSE) for more information.
npm package: @sofer1445/angular-image-editor
Description: Angular 20 Image Editor with Fabric.js support - עורך תמונות מתקדם לאנגולר
Author: sofer1445
Latest version: 0.0.2

# Angular Image Editor (@sofer1445/angular-image-editor)

A powerful and easy-to-use image editor component for Angular applications, built with Fabric.js.
This library provides a full-featured editor with drawing tools, shapes, text, filters, and image adjustments.

## Features

*   🎨 **Free Drawing**: Draw freely on the canvas with customizable brush size and color.
*   ➡️ **Arrows**: Draw arrows to highlight specific areas.
*   📝 **Text**: Add text with customizable font family, size, color, bold, and italic styles.
*   ⬜ **Shapes**: Add rectangles, circles, and triangles with custom fill and stroke settings.
*   🖼️ **Filters**: Apply image filters including Grayscale, Sepia, Vintage, Invert, and Blur.
*   ☀️ **Adjustments**: Fine-tune image brightness and contrast.
*   💾 **Export**: Save the edited result as a high-quality base64 image.
*   🇮🇱 **RTL Support**: The interface is designed with RTL support (Hebrew UI).

## Installation

Install the library using npm:

```bash
npm install @sofer1445/angular-image-editor
```

## Usage

### 1. Import the Component

Import `EditorComponent` in your Angular standalone component (or module):

```typescript
import { Component } from '@angular/core';
import { EditorComponent } from '@sofer1445/angular-image-editor';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [EditorComponent],
  template: `
    <div style="height: 600px; width: 100%;">
      <lib-editor 
        [imageSrc]="imageSource" 
        (saved)="onSave($event)" 
        (closed)="onClose()">
      </lib-editor>
    </div>
  `
})
export class ExampleComponent {
  imageSource = 'path/to/image.jpg'; // URL or Base64 string

  onSave(editedImage: string) {
    console.log('Edited image base64:', editedImage);
    // Handle the saved image (e.g., upload to server)
  }

  onClose() {
    console.log('Editor closed');
  }
}
```

### 2. API Reference

#### Inputs

| Input | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `imageSrc` | `string \| null` | `null` | The source of the image to load into the editor. Can be a URL or a Base64 data string. |

#### Outputs

| Output | Event Type | Description |
| :--- | :--- | :--- |
| `saved` | `EventEmitter<string>` | Emitted when the user clicks the "Save" button. The payload is the edited image as a Base64 string (PNG). |
| `closed` | `EventEmitter<void>` | Emitted when the user clicks the "Back" button. |

## Dependencies

This library depends on:
*   Angular (>=17.0.0)
*   Fabric.js

## License

MIT