@pixelmatters/markup 1.0.0 → 1.0.2

package/README.md

@@ -74,7 +74,7 @@ export default function App() {
       {/* your app */}
       <MarkupWidget
         apiUrl={import.meta.env.VITE_MARKUP_API_URL}
-        apiKey={import.meta.env.VITE_MARKUP_KEY}
+        apiKey={import.meta.env.VITE_MARKUP_API_KEY}
         position="bottom-right" // optional
         theme="light" // optional
       />
@@ -133,6 +133,62 @@ The popup origin is validated against the project's `allowedDomains` before any
 3. Click **New key**, label it, and copy the raw key — it's shown once.
 4. Open **Settings → Domains** and add the host domain (`app.example.com`, `*.staging.example.com`). `localhost` is auto-allowed in dev.
 
+## AI prompt
+
+Paste the block below into Claude, ChatGPT, Cursor, or any other LLM and it'll wire the widget into your codebase end-to-end.
+
+````markdown
+You are helping me install the **`@pixelmatters/markup`** feedback widget into my web app.
+
+## What it is
+A drop-in feedback widget published on npm as `@pixelmatters/markup`. It mounts a floating action button that lets users pin threaded comments (and optional annotated screenshots) anywhere on the page. It runs inside a shadow DOM so it doesn't affect host CSS.
+
+## My credentials
+- `apiUrl`: `https://<MY_DEPLOYMENT>.convex.site`   ← replace with the value from Markup dashboard → Settings → Install
+- `apiKey`: `markup_...`                           ← replace with a key from Markup dashboard → Settings → API Keys
+Store these in environment variables (e.g. `VITE_MARKUP_API_URL`, `VITE_MARKUP_API_KEY`, or the equivalent for my framework). Do not hardcode them.
+
+## API
+```ts
+import { init, destroy } from '@pixelmatters/markup'
+// or:
+import { MarkupWidget } from '@pixelmatters/markup/react'
+
+init({
+  apiUrl: string,                            // required
+  apiKey: string,                            // required
+  position?: 'bottom-right' | 'bottom-left', // default 'bottom-right'
+  theme?: 'light' | 'dark' | 'auto',         // default 'auto'
+}) // returns a destroy() function — call it on unmount / logout / route teardown
+```
+
+For a `<script>` tag drop-in (no bundler), use:
+```html
+<script
+  type="module"
+  src="https://unpkg.com/@pixelmatters/markup"
+  data-markup-widget="true"
+  data-api-url="..."
+  data-api-key="..."
+  data-position="bottom-right"
+></script>
+```
+The `data-markup-widget="true"` attribute is required.
+
+## Your task
+1. Detect my framework (React, Vue, Svelte, Next.js, plain HTML, etc.) by inspecting the project.
+2. Install `@pixelmatters/markup` with the package manager already in use (pnpm/npm/yarn).
+3. Wire the widget into the **root layout / app shell** so it shows on every page.
+4. Read `apiUrl` and `apiKey` from environment variables; create `.env.example` entries and update `.gitignore` if needed.
+5. For SPAs, ensure the widget is mounted once at the root (not per route) and unmounted via `destroy()` on logout.
+6. Show me a diff of the changes and a one-line note on how to verify (e.g. "run dev server, click the button in the bottom-right").
+
+Constraints:
+- Do **not** add CSS imports or provider components — the widget needs neither.
+- Do **not** hardcode the key.
+- If the project has a CSP, add `https://unpkg.com` to `script-src` only if I'm using the `<script>` tag path.
+````
+
 ## Browser support
 
 Modern evergreen browsers (Chrome, Edge, Firefox, Safari) and their mobile equivalents. The widget uses native ESM, shadow DOM, and `IntersectionObserver` — no IE11 / legacy bundle.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelmatters/markup",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Embeddable feedback widget for collecting visual bug reports, screenshots, and comments on live web apps.",
   "keywords": [
     "annotation",
@@ -47,15 +47,13 @@
     "access": "public",
     "provenance": true
   },
-  "dependencies": {
-    "@medv/finder": "^4.0.2",
-    "convex": "^1.37.0",
-    "html-to-image": "^1.11.13",
-    "preact": "^10.25.0"
-  },
   "devDependencies": {
+    "@medv/finder": "^4.0.2",
     "@preact/preset-vite": "^2.10.5",
     "@types/react": "^19.2.14",
+    "convex": "^1.37.0",
+    "html-to-image": "^1.11.13",
+    "preact": "^10.25.0",
     "typescript": "^6.0.3",
     "vite": "^8.0.11",
     "vite-plugin-dts": "^5.0.0"