@pixelmatters/markup 1.0.2 → 1.2.0

package/README.md

@@ -89,23 +89,25 @@ export default function App() {
 
 Mounts the widget. Idempotent: re-calling with the same config is a no-op; calling with a different config tears down the previous instance first. Returns the `destroy` function.
 
-| Option     | Type                              | Default          | Description                                                                                             |
-| ---------- | --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------- |
-| `apiUrl`   | `string`                          | required         | Convex deployment site URL (`https://*.convex.site`)                                                    |
-| `apiKey`   | `string`                          | required         | Project API key — mint one in the dashboard                                                             |
-| `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Where the floating action button sits                                                                   |
-| `theme`    | `'light' \| 'dark' \| 'auto'`     | `'auto'`         | Visual theme — `'light'` or `'dark'`, or `'auto'` (default) to follow the host's `prefers-color-scheme` |
+| Option     | Type                              | Default          | Description                                                                                                              |
+| ---------- | --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `apiUrl`   | `string`                          | required         | Convex deployment site URL (`https://*.convex.site`)                                                                     |
+| `apiKey`   | `string`                          | required         | Project API key — mint one in the dashboard                                                                              |
+| `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Initial corner for the floating action button — users can drag it across the viewport midline to flip corners at runtime |
+| `theme`    | `'light' \| 'dark' \| 'auto'`     | `'auto'`         | Visual theme — `'light'` or `'dark'`, or `'auto'` (default) to follow the host's `prefers-color-scheme`                  |
 
 ### `destroy()`
 
 Unmounts the widget and removes the host element. Safe to call when nothing is mounted.
 
-### Keyboard
+### Keyboard & mouse
 
-| Shortcut           | Action                                          |
-| ------------------ | ----------------------------------------------- |
-| `cmd/ctrl + .`     | Toggle HUD visibility                           |
-| `cmd/ctrl + click` | Click the FAB to hide the HUD with a hint toast |
+| Shortcut              | Action                                                                 |
+| --------------------- | ---------------------------------------------------------------------- |
+| `cmd/ctrl + .`        | Toggle HUD visibility                                                  |
+| `cmd/ctrl + click`    | Click the FAB to hide the HUD with a hint toast                        |
+| Drag the FAB          | Snap it to whichever bottom corner the pointer ends in                 |
+| Drag a popover header | Move the open thread / new-thread popover; resets to the pin on reopen |
 
 ## How it works
 
@@ -131,7 +133,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 +143,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 +168,7 @@ init({
 ```
 
 For a `<script>` tag drop-in (no bundler), use:
+
 ```html
 <script
   type="module"
@@ -173,9 +179,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 +192,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.