@pixelmatters/markup 1.0.1 → 1.1.0

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
       />
@@ -131,7 +131,70 @@ The popup origin is validated against the project's `allowedDomains` before any
 1. Sign in to the Markup dashboard.
 2. Open your project → **Settings → API Keys**.
 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.
+4. Open **Settings → Domains** and add the host domain (`app.example.com`, `*.staging.example.com`). Production deployments do not auto-allow `localhost`; add it to the allowlist explicitly if you test against the deployment from `http://localhost`.
+
+## 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