open-index/open-npm huggingface dataset:
npm package: @opensig/open-analytics
Description: opendesign analytics
Latest version: 1.0.1

# analytics for open-design

# TODO

1. 支持在 html 引入；
2. 支持错误告警上报；

# 1.0.1

1. ua-parser-js版本升级至1.0.37

# 1.0.0

1. 固定依赖版本
    - ua-parser-js": 1.0.37
    - uuid: 11.1.0,
    - web-vitals: 3.5.2

# 0.0.8

1. 支持内部事件传递自定义数据

# 0.0.7

1. 支持服务端执行，解决 SSR\SSG 构建报错
2. 移除 enable 标识记忆功能，通过调用者控制 enableReporting 确认是否上报

# 0.0.6

1. 内置事件字段添加前缀"$"
2. cid,sid 使用 uuid 生成

## 0.0.5-sp.4

1. `web-vitals`版本升级为`3.5.2`

## 0.0.5-sp.2

1. `ua-parser-js`版本固定为`1.0.34`，`web-vitals`版本固定为`3.5.0`

# 0.0.5

1. 事件数据字段从 data 更改为 properties；
2. 修复导入时自运行 storage，导致服务端渲染报错问题；

## 0.0.5

1. 事件数据字段从 data 更改为 properties；
2. 修复导入时自运行 storage，导致服务端渲染报错问题；

## 0.0.4

1. 新增内部事件：PageClick 页面点击事件；可用于热力图分析；
2. client 信息默认不提供，通过插件函数方式配置；
3. report 接口参数 event 不能为空；

# 0.0.3

1. 基础性能数据增加网络信息
# 0.0.2

1. 内部采集事件支持性能数据。事件名：OpenEventKeys.PageBasePerformance\OpenEventKeys.LCP\OpenEventKeys.INP

# 0.0.1

1. 内部采集事件支持 PV 数据，事件名：OpenEventKeys.PV
npm package: @opensig/open-scripts
Description: opendesign component Scripts
Latest version: 1.0.6

<h1 align="center">open-scripts</h1>
<p align="center">用于构件opendesign组件库、图标库</p>

## 特性


### 组件构建

支持构建vue组件库，编译样式文件

### 图标构建

支持将svg文件构建为vue组件


### token构建

支持基于配置文件生成token文件


## 安装

### npm

使用 npm/pnpm 安装。

```bash
# npm
npm i @opensig/open-scripts

#pnpm 
pnpm add @opensig/open-scripts

```


## 许可

opendesign 使用 [MIT license](https://opensource.org/licenses/MIT) 许可证书。
npm package: @opensig/opendesign
Description: <p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
Latest version: 1.2.2

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p>
<h1 align="center">opendesign</h1>
<p align="center">一个 Vue 3 组件库</p>
<p align="center"><b>皮肤可定制，使用 TypeScript</b></p>


## 特性


### 皮肤可定制

提供组件变量体系，可以快速定义一套新皮肤

### 使用 TypeScript

opendesign 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。


## 安装

### npm

使用 npm/pnpm 安装。

```bash
# npm
npm i @opensig/opendesign

#pnpm 
pnpm add @opensig/opendesign

```


## 使用

### 引入皮肤文件
```
import '@opensig/opendesign-token/themes/e.token.scss'
```

### 引入样式文件
```
import '@opensig/opendesign/es/index.scss'
```

### 使用组件
```
<script setup lang="ts">
import { OButton } from '../../locale';

</script>
<template>
    <OButton variant="outline">Outline Button</OButton>
</template>
```


## 许可

opendesign 使用 [MIT license](https://opensource.org/licenses/MIT) 许可证书。
npm package: @opensig/opendesign-token
Description: Theme tokens for opendesign design sistem
Latest version: 0.0.10

<p align="center">opendesign 设计系统变量Token</p>
<p align="center"><b>已包含多套皮肤Token</b></p>

## 安装

使用 npm/pnpm 安装。

```bash
# npm
npm i @opensig/opendesign-token

#pnpm
pnpm add @opensig/opendesign-token

```

## 调用皮肤变量

- 选择一套皮肤，引入对应 token 文件

```js
import '@opensig/opendesign-token/themes/e.token.css';
```

- 如果需要使用深色、浅色皮肤，或深浅模式切换，可导入对应 token 文件。 并通过 在根容器（一般为根 html 或 body）添加`data-o-theme="[light|x-dark]"`属性 控制

```js
// 浅色皮肤 data-o-theme=“e.light”
import "@opensig/opendesign-token/themes/e.light.token.css";
// 深色皮肤 data-o-theme=“e.dark
import "@opensig/opendesign-token/themes/e.dark.token.css";
```
`data-o-theme`取值如下：
| 皮肤      | 浅色    | 深色   |
| --------- | ------- | ------ |
| Ascend    | a-light | a-dark |
| Kunpneg   | k-light | k-dark |
| OpenEuler | e-light | e-dark |
| Mindspore | m-light | m-dark |
| openUBMC  | u-light | u-dark |
| openGauss | u-light | u-dark |

## 调用鸿蒙字体
opendesign设计系统字体默认为鸿蒙字体，支持400、600字重，可以引入对应字体文件

```js
import '@opensig/opendesign-token/fonts/css';
```

## 调用响应式变量

引入任意皮肤 token 后，响应式变量（`--o-r-*`, 其中的 `r` 指的是 **responsive**）会自动生效，无需额外导入。变量会根据视口宽度在不同断点自动切换取值。

数据源：`tokens/responsive-token.json`（字号、行高、间距）、`tokens/grid-token.json`（栅格系统）。

### 字号 / 行高

```css
.title {
  font-size: var(--o-r-font_size-h1);
  line-height: var(--o-r-line_height-h1);
}
```

### 间距

```css
.section {
  padding: var(--o-r-gap-6) var(--o-r-gap-4);
}
```

### 栅格
使用内置的栅格容器类：

```vue
<template>
  <div class="o-r-grid-container">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</template>

<style>
  .child1 {
    width: var(--o-r-grid-3); // 占据3栅格
  }
</style>
```


## 许可

opendesign 使用 [MIT license](https://opensource.org/licenses/MIT) 许可证书。

## 变更日志

### 0.0.10

- 增加响应式字号、行高、间距、栅格变量

### 0.0.9

- 默认字体刷新为Harmony snas sc

### 0.0.8

- fix：修复openeuler皮肤变量命名拼写错误：`o-color-mian1` -> `o-color-main1`

### 0.0.7

- 新增字体、字重变量

### 0.0.3

- 新增鸿蒙字体定义

### 0.0.2

- 新增-o-color-main2 渐变色变量，同时新增-o-color-main2-angle，可定制渐变方向

### 0.0.1

- 新增皮肤变量
npm package: @opensign/angular
Description: This package helps you easily integrate OpenSign into your Angular apps.
Author: OpenSign Labs
Latest version: 1.0.8

This package helps you easily integrate OpenSign into your Angular apps.

## Installation

```
npm install @opensign/angular
```

---

## Usage

Create public template from [https://www.opensignlabs.com](https://www.opensignlabs.com)

![](https://raw.githubusercontent.com/OpenSignLabs/OpenSign/feat-docs/docs/static/img/npm-public-demo.gif)

```js
import { Component } from "@angular/core";
import { OpensignComponent } from "@opensign/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [OpensignComponent],
  template: `<opensign templateId="#templateid" baseUrl="#baseUrl" appId="#appId" (onLoad)="handleLoad()" (onLoadError)="handleError($event)"></opensign> `,
})
export class AppComponent {
  handleLoad() {
    console.log("success");
  }

  handleError(error: string) {
    console.log(error);
  }
}
```

---

## Demo

[🚀Try this Demo](https://opensign.me/publicsign?templateid=yBhJ7Jc1Xx)

![](https://raw.githubusercontent.com/OpenSignLabs/OpenSign/feat-docs/docs/static/img/opensign-demo.gif)

---

# License

MIT
npm package: @opensign/react
Description: This package helps you easily integrate OpenSign into your React/NextJS apps.
Author: OpenSign Labs
Latest version: 1.0.3

This package helps you easily integrate OpenSign into your React/NextJS apps.

## Installation

```
npm install @opensign/react
```

---

## Usage

Create public template from [https://www.opensignlabs.com](https://www.opensignlabs.com)

![](https://raw.githubusercontent.com/OpenSignLabs/OpenSign/feat-docs/docs/static/img/npm-public-demo.gif)

```js
import React from "react";
import Opensign from "@opensign/react";

export function App() {
  return (
    <div className="app">
      <Opensign
        onLoad={() => console.log("success")}
        onLoadError={(error) => console.log(error)}
        templateId="#templateid"
        baseUrl="#baseUrl"
        appId="#appId"
      />
    </div>
  );
}
```

---

## Demo

[🚀Try this Demo](https://opensign.me/publicsign?templateid=yBhJ7Jc1Xx)

![](https://raw.githubusercontent.com/OpenSignLabs/OpenSign/feat-docs/docs/static/img/opensign-demo.gif)

---
# License

MIT
npm package: @opensky/setup
Description: Post-scaffold configuration tool for SvelteKit projects
Author: notnotjake
Latest version: 1.4.3

# @opensky/setup

Post-scaffold configuration tool for SvelteKit projects. Automates common setup tasks after running `bunx sv create`.

## Usage

```bash
# After running sv create to start a project
bunx @opensky/setup
```

Interactive CLI lets you select which features to configure:

- **SvelteKit** - Project structure, hooks, error page
- **Prettier** - Code formatting configuration
- **Bits UI** - Component library installation
- **Gitignore** - Essential ignore rules
- **Tailwind** - Theme structure and CSS organization
- **Drizzle** - Database setup with schema organization
- **Meta** - SEO setup with @opensky/seo
- **Resend** - Email service with React Email
- **Utils** - Utility functions (clsx, tailwind-merge)
- **Environment** - PUBLIC\_\* variables setup

## Features

- **Non-destructive** - Preserves existing files and configurations
- **Template-based** - Uses actual files instead of code generation
- **Modular** - Select only the features you need
- **TypeScript-first** - All generated code is TypeScript
- **Production-ready** - Follows SvelteKit best practices

## What it does

- Creates project directories and moves files to proper locations
- Installs required dependencies automatically
- Configures svelte.config.js with aliases and settings
- Sets up environment files with proper variables
- Copies utility functions and templates
- Runs Prettier formatting when complete

## Requirements

- SvelteKit project (created with `bunx sv create`)
- Bun or npm/yarn/pnpm
- Git repository (recommended)

## Examples

```bash
# Select all features
bunx @opensky/setup
# Press 'a' to select all

# Select specific features
bunx @opensky/setup
# Use arrow keys and space to select
```

The tool preserves existing configurations and only adds what's missing, making it safe to run multiple times.
npm package: @openslop/openslop
Description: Coding agent in your terminal
Latest version: 1.2.1

# OpenSlop

Coding agent in your terminal

## Installation

```bash
npm install -g @openslop/openslop
```

> The package publishes a CLI binary `openslop` that you can run from any directory.

## Quick Start

1. **Setup the agent**

   ```bash
   openslop setup
   ```

   This command sets up a configuration file (`.openslop/config.json`) in the home directory. You can edit this file using setup command.

2. **Run the agent**
   ```bash
   openslop
   ```
   You can then type natural‑language instructions and the agent will execute them, creating or editing files in your project.

## Configuration

The generated `.openslop/config.json` looks like this:

```json
{
	"apiKey": "string",
	"baseUrl": "string",
	"model": "string"
}
```

- **apiKey** – API key for authentication.
- **baseUrl** – Base URL of the provider e.g. google, openai, anthropic, etc.
- **model** – Underlying LLM model used for generation.

## Example Workflow

```bash
# Create a new project folder
mkdir my‑project && cd my‑project
# Start OpenSlop
openslop
# Ask OpenSlop to scaffold a basic Express server
```

## Troubleshooting

- **Command not found** – Ensure the global npm bin path is in your `PATH`. Run `npm root -g` to see where the binary is installed.
- **Permission errors** – On Unix systems you might need `sudo npm install -g openslop` if your global npm directory requires elevated privileges.

## Contributing

We welcome contributions! Fork the repository, make your changes, and open a pull request.

## License

MIT © OpenSlop Team