open-index/open-npm huggingface dataset:
npm package: @paget/ui
Description: Paget AI - Page automation agent UI with bookmarklet support
Latest version: 0.1.3

# @paget/ui

**Vue 3 聊天界面 / Vue 3 Chat UI**

Paget 的用户入口模块，提供悬浮按钮（FAB）、聊天对话框、设置面板等交互界面。该包将嵌入到生产系统中，需严格遵循设计规范。

The user-facing entry module of Paget. Provides floating action button (FAB), chat dialog, settings panel and other interactive UI. This package is embedded into production systems, so it must follow design specifications strictly.

## 功能 / Features

### 悬浮按钮（FAB）/ Floating Action Button

- 可拖拽、fixed 定位 / Draggable with fixed positioning
- 贴边吸附（靠近窗口边缘时半隐藏）/ Edge snapping (half-hidden when near viewport edge)
- 点击展开对话框，位置感知（自动选择展开方向）/ Click to expand dialog with position-aware expansion
- AI 运行时切换为动态图标 / Animated icon when AI is processing

### 聊天对话框 / Chat Dialog

- 消息历史列表（支持 Markdown 渲染）/ Message history with Markdown rendering
- 工具栏（附件、设置）/ Toolbar (attachment, settings)
- 输入框 + 发送/停止按钮 / Input field + send/stop buttons
- 活动指示器（思考中动画、执行状态）/ Activity indicator (typing animation, execution status)

### 设置面板 / Settings Panel

- 语言切换（zh-CN / en-US）/ Language toggle
- 遮罩层、暗色模式、通知、自动翻译等开关 / Mask, dark mode, notification, auto-translate toggles
- 草稿-保存模式（编辑临时副本，保存时应用）/ Draft-then-save pattern

## 组件结构 / Component Structure

```
src/
├── components/
│   ├── FloatingButton.vue        # FAB 悬浮按钮
│   ├── ChatPanel/                # 聊天对话框
│   │   ├── ChatPanel.vue         # 主组件（整合 WS、Agent、Chat）
│   │   ├── ChatHeader.vue        # 头部
│   │   └── ChatFooter.vue        # 底部（工具栏 + 输入框）
│   ├── MessageList/              # 消息列表
│   │   ├── MessageList.vue       # 列表容器
│   │   ├── MessageItem.vue       # 单条消息
│   │   └── ActivityIndicator.vue # 活动指示器
│   └── ConfigPanel/              # 设置面板
│       └── ConfigPanel.vue       # 设置弹窗
├── composables/                  # 组合式函数
│   ├── useWebSocket.ts           # WebSocket 通信
│   ├── useAgent.ts               # Agent 状态管理
│   ├── useChat.ts                # 聊天消息
│   ├── useConfig.ts              # 用户配置
│   └── useDrag.ts                # 拖拽行为
├── stores/                       # Pinia 状态
├── styles/                       # CSS 设计令牌
└── i18n/                         # 国际化
```

## 规则 / Rules

- Composition API + `<script setup>` only
- CSS 使用 `--paget-*` 自定义属性 / CSS uses `--paget-*` custom properties
- 不使用第三方 UI 库 / No third-party UI library
- 所有用户可见文本需添加 i18n 条目 / All user-visible strings need i18n entries
- Composable 封装有状态逻辑，组件专注渲染 / Composables for stateful logic, components for rendering

## 开发 / Development

```bash
pnpm --filter @paget/ui dev       # Vite dev server (port 5173)
pnpm --filter @paget/ui build     # Production build
```
npm package: @paget96/paragraph
Description: Paragraph Tool for Editor.js
Author: CodeX
Latest version: 2.10.1

![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Paragraph Tool for Editor.js

Basic text Tool for the [Editor.js](https://ifmo.su/editor).

## Installation

### Install via NPM

Get the package

```shell
npm i --save @editorjs/paragraph
```

Include module at your application

```javascript
const Paragraph = require('@editorjs/paragraph');
```

### Download to your project's source dir

1. Upload folder `dist` from repository
2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can also load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/paragraph).

`https://cdn.jsdelivr.net/npm/@editorjs/paragraph@2.0.2`

Then require this script on page with Editor.js.

```html
<script src="..."></script>
```

## Usage

The Paragraph tool is included at editor.js by default. So you don't need to connect it manually.
If you want to connect your customized version of this tool, do not forget to use the [`defaultBlock`](https://editorjs.io/configuration#change-the-default-block)
option of the editor config.

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
var editor = EditorJS({
  ...

  tools: {
    ...
    paragraph: {
      class: Paragraph,
      inlineToolbar: true,
    },
  }

  ...
});
```

## Config Params

The Paragraph Tool supports these configuration parameters:

| Field | Type     | Description        |
| ----- | -------- | ------------------ |
| placeholder | `string` | The placeholder. Will be shown only in the first paragraph when the whole editor is empty.  |
| preserveBlank | `boolean` | (default: `false`) Whether or not to keep blank paragraphs when saving editor data |

## Output data

| Field  | Type     | Description      |
| ------ | -------- | ---------------- |
| text   | `string` | paragraph's text |
| alignment | `left|center|right|justify` | paragraph's alignment |

```json
{
    "type" : "paragraph",
    "data" : {
        "text" : "Check out our projects on a <a href=\"https://github.com/codex-team\">GitHub page</a>.",
        "alignment": "left"
    }
}
```
npm package: @pagetree/pagetree
Description: A simple yet versatile page tree drag&drop library.
Author: @jhohlfeld
Latest version: 0.2.1

<h1>
  <img src="./pagetree.svg" alt="pagetree brand icon" style="height: 1em;" />
  Pagetree &ndash; page building library
</h1>

pagetree is a drag & drop library that lets you build your own page building application. pagetree is meant for developers who want to render large numbers of pages, using

* their own components
* their own rendering strategy (SSR?)

At the core, pagetree is simply a Javascript Object tree, which is manipulated with a little React app. pagetree can be embedded in any (React) application.

pagetree comes with very few direct dependencies:

* react
* styled-components
* nanoid

That said, there is a range of [examples](./packages/example) and integrations readily available to get started immediately. Just use one of the examples to start building right away!

## The idea behing pagetree

The main idea behind pagetree is a page building tool that lets you to decide how your components are constructed and how your pages are rendered.

It simply creates a Javascript Object, representing a page tree. In the page tree, you find references to your components, the place where they should go and which properties they should have.

Based on the page tree, it is very easy to render a page: 

1. take your data source of choice
2. combine it with your own React components (using the page tree)
3. turn it into a page

This works well with static site generators as NextJS and Gatsby.

## Getting started

This project uses [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces).

To get started, first install the project with all it's dependencies:

```bash
npm run install
```

This will install all dependencies of all packages.

Now build the project and run the first basic example:

```bash
npm run build
npm start -w @pagetree/example-basic
```

This builds the core library (packages/builder) and starts the first example in [packages/example/basic](packages/example/basic).

To start developing, run `npm run dev` or `npm test`, to work with the ui components, run `npm run storybook`.

## List of available commands

Tasks at the root level:

```bash
npm install
npm test
npm run lint
npm run build
npm run storybook
```

Examples:

```bash
# @pagetree/example-basic
npm start -w @pagetree/example-basic

# @pagetree/example-strapi
npm run strapi -w @pagetree/example-strapi
npm start -w @pagetree/example-strapi
```
npm package: @pagevitals/pagevitals-cli
Description: A command-line interface for interacting with the PageVitals API
Author: PageVitals ApS
Latest version: 1.1.5

# PageVitals CLI

PageVitals CLI is a command-line interface tool for interacting with the PageVitals API, allowing you to run performance tests and manage your PageVitals account from the terminal.

## Installation

```bash
npm install -g pagevitals-cli
```

## Usage

### Setting API Token

Before using the CLI, you need to set your API token. You can do this by running:

```bash
pagevitals token <your_api_token>
```

Note that you can also use the parameter `--token` directly in your requests if that suits your workflow better.

### Listing Websites

To list all websites associated with your account and their IDs:

```bash
pagevitals list-websites
```

### Listing Pages

To list all pages for a specific website:

```bash
pagevitals list-pages --website <website_id>
```

### Running Tests

To run performance tests for a website, use the following command:

```bash
pagevitals run-tests --website <website_id>
```

If you want to limit the pages and devices you're testing, use the --page command like this:

```bash
pagevitals run-tests --website <website_id> --page <page_id1>,<device1> --page <page_id2,<device2> ...
```

For more information on available commands, use:

```bash
pagevitals --help
```

## Contributing

We welcome contributions! Please read our [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests to us.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## About PageVitals

PageVitals is a comprehensive web performance monitoring and optimization platform. Learn more at [https://pagevitals.com](https://pagevitals.com).

## Changelog

For a detailed changelog, please see [CHANGELOG.md](CHANGELOG.md).

## Security

If you discover any security-related issues, please email security@pagevitals.com instead of using the issue tracker.
npm package: @pageworks/state-manager
Description: Manages custom pushState, replaceState, and popstates.
Author: Pageworks
Latest version: 1.0.2

# State Manager

A TypeScript module for building custom pushStates, replaceStates, and popstates.

### Installation

Download State Manager via NPM:

```
npm i --save @pageworks/state-manager
```

Once the package is installed import the package:

```
import Pjax from '@pageworks/state-manager';
```

### Using The State Manager

Start by instantiating a new `StateManager` class with `new StateManager();`. The State Manager class take two optional parameters. First is a boolean for enabling debug mode, by default this value is `false`. The second value is a boolean telling State Manager if an initial `window.replaceState` needs to happen, by default this value is `false`.

The State Manager offers two static functions that can be called to handle the windows push states and replace states.

| Function            | Role                                                                          |
| ------------------- |:----------------------------------------------------------------------------- |
| `doPush`            | Creates a custom state object before calling the `window.pushState` method    |
| `doReplace`         | Creates a custom state object before calling the `window.replaceState` method |
npm package: @pageworld/freezoom
Description: ## Installation
Author: yebofengqiao
Latest version: 1.0.1

# @pageworld/freezoom v1.0.0

## Installation

Using pnpm:

```shell
pnpm i @pageworld/freezoom
```

## Types

```ts
/* the four corner of a rect */
enum Corner {
  topLeft = 1,
  topRight = 2,
  bottomRight = -1,
  bottomLeft = -2,
}

enum Edge {
  top = 'top',
  right = 'right',
  bottom = 'bottom',
  left = 'left',
}

type Rect = {
  width: number;
  height: number;
  left: number;
  top: number;
  ro: number;
}
```

## Using

### zoomFreeCornerFree

```ts
declare function zoomFreeCornerFree(corner: Corner, curPoint: Dot, rect: Rect): Rect;
```

### zoomLockCornerFree

```ts
declare function zoomLockCornerFree(corner: Corner, curPoint: Dot, rect: Rect): Rect;
```
### zoomEdgeFree

```ts
declare function zoomEdgeFree(edge: Edge, curPoint: Dot, rect: Rect): Rect;
```