From d0a15a3d3164edb45ab5fb2468102d2c5f3058aa Mon Sep 17 00:00:00 2001
From: Lumios Digital
Date: Fri, 23 Jan 2026 23:19:24 -0300
Subject: [PATCH] Add vanilla JS bundle for script tag usage
- Add src/vanilla.ts entry point that auto-initializes on page load
- Update tsup.config.ts with vanilla ESM and IIFE builds
- Bundle React internally for standalone use (~240KB)
- Add CSS reset to prevent global styles from breaking toolbar
- Update README with vanilla JS usage examples (Shopify, WordPress, CDN)
---
README.md | 138 +-
.../page-toolbar-css/styles.module.scss | 1485 +++++++++++++++++
src/vanilla.ts | 22 +
tsup.config.ts | 122 ++
4 files changed, 1766 insertions(+), 1 deletion(-)
create mode 100644 src/components/page-toolbar-css/styles.module.scss
create mode 100644 src/vanilla.ts
create mode 100644 tsup.config.ts
diff --git a/README.md b/README.md
index cf161ec..85dd565 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@ npm install agentation -D
## Usage
+### React Component
+
```tsx
import { Agentation } from 'agentation';
@@ -25,6 +27,70 @@ function App() {
The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it.
+### Vanilla JS / Script Tag
+
+For non-React projects, use the bundled script that works on any website. Perfect for adding visual feedback to Shopify themes, WordPress sites, or any HTML page.
+
+#### CDN / Script Tag
+
+Add this one line anywhere in your HTML:
+
+```html
+
+```
+
+The script auto-initializes on page load. No configuration needed.
+
+#### Shopify Theme
+
+Load only in the Theme Editor for design-time feedback:
+
+```liquid
+{% if request.design_mode %}
+
+{% endif %}
+```
+
+Add this to `layout/theme.liquid` before the closing ` ` tag.
+
+#### WordPress
+
+Load only for logged-in editors:
+
+```php
+
+
+
+```
+
+Add this to your theme's `footer.php` or use `wp_enqueue_script` in `functions.php`.
+
+#### Any HTML Page
+
+Just add the script tag to your HTML:
+
+```html
+
+
+