astro-annotate 0.1.0

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.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 jnikolov
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,84 @@
1
+ # astro-annotate
2
+
3
+ Visual annotation overlay for Astro staging sites. Clients and stakeholders annotate HTML elements directly in the browser. Annotations are stored as structured JSON, readable by developers and LLMs.
4
+
5
+ > **Status:** Phase 1 (MVP) — local dev mode. Works with `astro dev`.
6
+
7
+ ## Features
8
+
9
+ - **Element-based annotations** — hover to highlight, click to annotate any HTML element
10
+ - **CSS selector tracking** — annotations reference elements by robust CSS selectors (IDs, data-testid, tag+class)
11
+ - **JSON storage** — annotations saved as `annotations.json`, directly readable by developers and LLMs (Claude Code, Cursor, etc.)
12
+ - **Shadow DOM isolation** — overlay UI is fully isolated from your site's styles
13
+ - **Zero dependencies** — vanilla TypeScript client, ~24KB bundle
14
+ - **Device detection** — automatically tags annotations as mobile/tablet/desktop
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npx astro add astro-annotate
20
+ ```
21
+
22
+ Or manually:
23
+
24
+ ```bash
25
+ npm install astro-annotate
26
+ ```
27
+
28
+ ```js
29
+ // astro.config.mjs
30
+ import { defineConfig } from 'astro/config';
31
+ import annotate from 'astro-annotate';
32
+
33
+ export default defineConfig({
34
+ integrations: [annotate()],
35
+ });
36
+ ```
37
+
38
+ ## Usage
39
+
40
+ 1. Start `astro dev`
41
+ 2. Click the annotation button (bottom-right corner)
42
+ 3. Hover over elements to highlight them, click to annotate
43
+ 4. Annotations are saved to `annotations.json` in your project root
44
+
45
+ ### Reading annotations
46
+
47
+ The `annotations.json` file is structured for both humans and machines:
48
+
49
+ ```json
50
+ {
51
+ "version": "1.0",
52
+ "annotations": [
53
+ {
54
+ "id": "abc123",
55
+ "page": "/",
56
+ "selector": "h1.hero-title",
57
+ "text": "Make this headline shorter",
58
+ "author": "Client Name",
59
+ "status": "open",
60
+ "device": "desktop",
61
+ "viewport": { "width": 1440, "height": 900 }
62
+ }
63
+ ]
64
+ }
65
+ ```
66
+
67
+ ## Configuration
68
+
69
+ ```js
70
+ annotate({
71
+ enabled: true, // default: true in dev
72
+ storage: 'local', // default: 'local' (JSON file)
73
+ annotationsPath: './annotations.json', // default
74
+ })
75
+ ```
76
+
77
+ ## Roadmap
78
+
79
+ - **Phase 2:** Deployed mode on Cloudflare Pages with password auth
80
+ - **Phase 3:** Screenshots, CLI export, mobile UX, docs
81
+
82
+ ## License
83
+
84
+ MIT
@@ -0,0 +1,18 @@
1
+ // src/constants.ts
2
+ var API_BASE = "/api/astro-annotate";
3
+ var API_ANNOTATIONS = `${API_BASE}/annotations`;
4
+ var SHADOW_ROOT_ID = "astro-annotate-root";
5
+ var DEFAULT_ANNOTATIONS_PATH = "./annotations.json";
6
+ var ANNOTATIONS_VERSION = "0.1";
7
+ var VIRTUAL_MODULE_ID = "virtual:astro-annotate/config";
8
+ var RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
9
+
10
+ export {
11
+ API_ANNOTATIONS,
12
+ SHADOW_ROOT_ID,
13
+ DEFAULT_ANNOTATIONS_PATH,
14
+ ANNOTATIONS_VERSION,
15
+ VIRTUAL_MODULE_ID,
16
+ RESOLVED_VIRTUAL_MODULE_ID
17
+ };
18
+ //# sourceMappingURL=chunk-QG2SIJB2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const API_BASE = '/api/astro-annotate';\nexport const API_ANNOTATIONS = `${API_BASE}/annotations`;\n\nexport const SHADOW_ROOT_ID = 'astro-annotate-root';\nexport const CSS_PREFIX = 'aa-';\n\nexport const DEFAULT_ANNOTATIONS_PATH = './annotations.json';\nexport const ANNOTATIONS_VERSION = '0.1';\n\nexport const VIRTUAL_MODULE_ID = 'virtual:astro-annotate/config';\nexport const RESOLVED_VIRTUAL_MODULE_ID = '\\0' + VIRTUAL_MODULE_ID;\n"],"mappings":";AAAO,IAAM,WAAW;AACjB,IAAM,kBAAkB,GAAG,QAAQ;AAEnC,IAAM,iBAAiB;AAGvB,IAAM,2BAA2B;AACjC,IAAM,sBAAsB;AAE5B,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B,OAAO;","names":[]}