agentation-vue3 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +141 -140
  2. package/dist/index.js +38 -13
  3. package/dist/index.mjs +1308 -1011
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,140 +1,141 @@
1
- # agentation-vue3
2
-
3
- [中文](#中文) | [English](#english)
4
-
5
- ---
6
-
7
- ## 中文
8
-
9
- > **作者 [binyy](https://github.com/408460486)**，基于 [Benji Taylor](https://x.com/benjitaylor)、[Dennis Jin](https://x.com/seldom) 和 [Alex Vanderzon](https://x.com/alexvanderzon) 的 React 版本
10
- >
11
- > 原始 React 版本：[GitHub](https://github.com/benjitaylor/agentation) · [NPM](https://www.npmjs.com/package/agentation)
12
-
13
- Agentation 是一个与 AI 工具无关的 Vue 3 可视化反馈工具。点击页面上的元素，添加注释，然后复制结构化输出，帮助 AI 编程助手找到您所指的确切代码。
14
-
15
- ### 安装
16
-
17
- ```bash
18
- npm install agentation-vue3 -D
19
- ```
20
-
21
- ### 使用方法
22
-
23
- ```vue
24
- <script setup>
25
- import { Agentation } from 'agentation-vue3'
26
- import 'agentation-vue3/dist/style.css'
27
- </script>
28
-
29
- <template>
30
- <YourApp />
31
- <Agentation />
32
- </template>
33
- ```
34
-
35
- 工具栏出现在右下角。点击激活，然后点击任意元素进行标注。
36
-
37
- ### 属性
38
-
39
- | 属性 | 类型 | 默认值 | 描述 |
40
- |------|------|--------|------|
41
- | `accentColor` | `string` | `'#3c82f7'` | 自定义强调色（十六进制） |
42
- | `copyToClipboard` | `boolean` | `true` | 点击复制按钮时是否复制到剪贴板 |
43
- | `lightMode` | `boolean` | `false` | 浅色模式样式 |
44
- | `zIndex` | `number` | `2147483647` | 工具栏的 z-index |
45
-
46
- ### 功能特性
47
-
48
- - **点击标注** – 点击任意元素，自动识别选择器
49
- - **文本选择** – 选择文本以标注特定内容
50
- - **动画暂停** – 冻结 CSS 动画以捕获特定状态
51
- - **结构化输出** – 复制包含选择器、位置和上下文的 markdown
52
- - **深色/浅色模式** – 匹配您的偏好或手动设置
53
- - **可拖拽工具栏** – 将工具栏重新定位到屏幕任意位置
54
- - **键盘快捷键** – 按 ESC 关闭工具栏
55
- - **零依赖** – 纯 CSS 动画，无运行时库
56
-
57
- ### 工作原理
58
-
59
- Agentation 捕获类名、选择器和元素位置，以便 AI 助手可以 `grep` 搜索您所指的确切代码。您不再需要描述"侧边栏中的蓝色按钮"，而是直接给 AI 助手提供 `.sidebar > button.primary` 和您的反馈。
60
-
61
- ### 系统要求
62
-
63
- - Vue 3.3+
64
- - 桌面浏览器（不支持移动端）
65
-
66
- ### 文档
67
-
68
- 完整文档请访问 [agentation.dev](https://agentation.dev)
69
-
70
- ---
71
-
72
- ## English
73
-
74
- > **Made by [binyy](https://github.com/408460486)**, forked from [Benji Taylor](https://x.com/benjitaylor), [Dennis Jin](https://x.com/seldom), and [Alex Vanderzon](https://x.com/alexvanderzon)'s React version
75
- >
76
- > Original React Version: [GitHub](https://github.com/benjitaylor/agentation) · [NPM](https://www.npmjs.com/package/agentation)
77
-
78
- Agentation is an agent-agnostic visual feedback tool for Vue 3. Click elements on your page, add notes, and copy structured output that helps AI coding agents find the exact code you're referring to.
79
-
80
- ### Install
81
-
82
- ```bash
83
- npm install agentation-vue3 -D
84
- ```
85
-
86
- ### Usage
87
-
88
- ```vue
89
- <script setup>
90
- import { Agentation } from 'agentation-vue3'
91
- import 'agentation-vue3/dist/style.css'
92
- </script>
93
-
94
- <template>
95
- <YourApp />
96
- <Agentation />
97
- </template>
98
- ```
99
-
100
- The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it.
101
-
102
- ### Props
103
-
104
- | Prop | Type | Default | Description |
105
- |------|------|---------|-------------|
106
- | `accentColor` | `string` | `'#3c82f7'` | Custom accent color (hex) |
107
- | `copyToClipboard` | `boolean` | `true` | Whether to copy to clipboard when the copy button is clicked |
108
- | `lightMode` | `boolean` | `false` | Light mode styling |
109
- | `zIndex` | `number` | `2147483647` | z-index for the toolbar |
110
-
111
- ### Features
112
-
113
- - **Click to annotate** – Click any element with automatic selector identification
114
- - **Text selection** – Select text to annotate specific content
115
- - **Animation pause** – Freeze CSS animations to capture specific states
116
- - **Structured output** – Copy markdown with selectors, positions, and context
117
- - **Dark/light mode** – Matches your preference or set manually
118
- - **Draggable toolbar** – Reposition the toolbar anywhere on screen
119
- - **Keyboard shortcuts** – Press ESC to close the toolbar
120
- - **Zero dependencies** – Pure CSS animations, no runtime libraries
121
-
122
- ### How it works
123
-
124
- Agentation captures class names, selectors, and element positions so AI agents can `grep` for the exact code you're referring to. Instead of describing "the blue button in the sidebar," you give the agent `.sidebar > button.primary` and your feedback.
125
-
126
- ### Requirements
127
-
128
- - Vue 3.3+
129
- - Desktop browser (mobile not supported)
130
-
131
- ### Docs
132
-
133
- Full documentation at [agentation.dev](https://agentation.dev)
134
-
135
- ---
136
-
137
- ## License
138
-
139
- © 2026 Binyy
140
- Licensed under PolyForm Shield 1.0.0
1
+ # agentation-vue3
2
+
3
+ [中文](#中文) | [English](#english)
4
+
5
+ ---
6
+
7
+ ## 中文
8
+
9
+ > **作者 [binyy](https://github.com/408460486)**，基于 [Benji Taylor](https://x.com/benjitaylor)、[Dennis Jin](https://x.com/seldom) 和 [Alex Vanderzon](https://x.com/alexvanderzon) 的 React 版本
10
+ >
11
+ > 原始 React 版本：[GitHub](https://github.com/benjitaylor/agentation) · [NPM](https://www.npmjs.com/package/agentation)
12
+
13
+ Agentation 是一个与 AI 工具无关的 Vue 3 可视化反馈工具。点击页面上的元素，添加注释，然后复制结构化输出，帮助 AI 编程助手找到您所指的确切代码。
14
+
15
+ ### 安装
16
+
17
+ ```bash
18
+ npm install agentation-vue3 -D
19
+ pnpm add agentation-vue3 -D
20
+ ```
21
+
22
+ ### 使用方法
23
+
24
+ ```vue
25
+ <script setup>
26
+ import { Agentation } from 'agentation-vue3'
27
+ import 'agentation-vue3/dist/style.css'
28
+ </script>
29
+
30
+ <template>
31
+ <YourApp />
32
+ <Agentation />
33
+ </template>
34
+ ```
35
+
36
+ 工具栏出现在右下角。点击激活，然后点击任意元素进行标注。
37
+
38
+ ### 属性
39
+
40
+ | 属性 | 类型 | 默认值 | 描述 |
41
+ |------|------|--------|------|
42
+ | `accentColor` | `string` | `'#3c82f7'` | 自定义强调色（十六进制） |
43
+ | `copyToClipboard` | `boolean` | `true` | 点击复制按钮时是否复制到剪贴板 |
44
+ | `lightMode` | `boolean` | `false` | 浅色模式样式 |
45
+ | `zIndex` | `number` | `2147483647` | 工具栏的 z-index |
46
+
47
+ ### 功能特性
48
+
49
+ - **点击标注** – 点击任意元素，自动识别选择器
50
+ - **文本选择** – 选择文本以标注特定内容
51
+ - **动画暂停** – 冻结 CSS 动画以捕获特定状态
52
+ - **结构化输出** – 复制包含选择器、位置和上下文的 markdown
53
+ - **深色/浅色模式** – 匹配您的偏好或手动设置
54
+ - **可拖拽工具栏** – 将工具栏重新定位到屏幕任意位置
55
+ - **键盘快捷键** – 按 ESC 关闭工具栏
56
+ - **零依赖** – 纯 CSS 动画，无运行时库
57
+
58
+ ### 工作原理
59
+
60
+ Agentation 捕获类名、选择器和元素位置，以便 AI 助手可以 `grep` 搜索您所指的确切代码。您不再需要描述"侧边栏中的蓝色按钮"，而是直接给 AI 助手提供 `.sidebar > button.primary` 和您的反馈。
61
+
62
+ ### 系统要求
63
+
64
+ - Vue 3.3+
65
+ - 桌面浏览器（不支持移动端）
66
+
67
+ ### 文档
68
+
69
+ 完整文档请访问 [agentation.dev](https://agentation-vue3.starpipi.eu.org/)
70
+
71
+ ---
72
+
73
+ ## English
74
+
75
+ > **Made by [binyy](https://github.com/408460486)**, forked from [Benji Taylor](https://x.com/benjitaylor), [Dennis Jin](https://x.com/seldom), and [Alex Vanderzon](https://x.com/alexvanderzon)'s React version
76
+ >
77
+ > Original React Version: [GitHub](https://github.com/benjitaylor/agentation) · [NPM](https://www.npmjs.com/package/agentation)
78
+
79
+ Agentation is an agent-agnostic visual feedback tool for Vue 3. Click elements on your page, add notes, and copy structured output that helps AI coding agents find the exact code you're referring to.
80
+
81
+ ### Install
82
+
83
+ ```bash
84
+ npm install agentation-vue3 -D
85
+ ```
86
+
87
+ ### Usage
88
+
89
+ ```vue
90
+ <script setup>
91
+ import { Agentation } from 'agentation-vue3'
92
+ import 'agentation-vue3/dist/style.css'
93
+ </script>
94
+
95
+ <template>
96
+ <YourApp />
97
+ <Agentation />
98
+ </template>
99
+ ```
100
+
101
+ The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it.
102
+
103
+ ### Props
104
+
105
+ | Prop | Type | Default | Description |
106
+ |------|------|---------|-------------|
107
+ | `accentColor` | `string` | `'#3c82f7'` | Custom accent color (hex) |
108
+ | `copyToClipboard` | `boolean` | `true` | Whether to copy to clipboard when the copy button is clicked |
109
+ | `lightMode` | `boolean` | `false` | Light mode styling |
110
+ | `zIndex` | `number` | `2147483647` | z-index for the toolbar |
111
+
112
+ ### Features
113
+
114
+ - **Click to annotate** – Click any element with automatic selector identification
115
+ - **Text selection** – Select text to annotate specific content
116
+ - **Animation pause** – Freeze CSS animations to capture specific states
117
+ - **Structured output** – Copy markdown with selectors, positions, and context
118
+ - **Dark/light mode** – Matches your preference or set manually
119
+ - **Draggable toolbar** – Reposition the toolbar anywhere on screen
120
+ - **Keyboard shortcuts** – Press ESC to close the toolbar
121
+ - **Zero dependencies** – Pure CSS animations, no runtime libraries
122
+
123
+ ### How it works
124
+
125
+ Agentation captures class names, selectors, and element positions so AI agents can `grep` for the exact code you're referring to. Instead of describing "the blue button in the sidebar," you give the agent `.sidebar > button.primary` and your feedback.
126
+
127
+ ### Requirements
128
+
129
+ - Vue 3.3+
130
+ - Desktop browser (mobile not supported)
131
+
132
+ ### Docs
133
+
134
+ Full documentation at [agentation.dev](https://agentation-vue3.starpipi.eu.org/)
135
+
136
+ ---
137
+
138
+ ## License
139
+
140
+ © 2026 Binyy
141
+ Licensed under PolyForm Shield 1.0.0