@pixelmatters/markup 1.0.2 → 1.1.0

package/README.md

@@ -131,7 +131,7 @@ 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
 
@@ -141,14 +141,17 @@ Paste the block below into Claude, ChatGPT, Cursor, or any other LLM and it'll w
 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.
+
+- `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:
@@ -163,6 +166,7 @@ init({
 ```
 
 For a `<script>` tag drop-in (no bundler), use:
+
 ```html
 <script
   type="module"
@@ -173,9 +177,11 @@ For a `<script>` tag drop-in (no bundler), use:
   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.
@@ -184,6 +190,7 @@ The `data-markup-widget="true"` attribute is required.
 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.