@pixelmatters/markup 1.34.2 → 1.34.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelmatters/markup",
-  "version": "1.34.2",
+  "version": "1.34.4",
   "description": "Embeddable feedback widget for collecting visual bug reports, screenshots, and comments on live web apps.",
   "keywords": [
     "annotation",
@@ -60,7 +60,7 @@
     "@playwright/test": "^1.63.0",
     "@preact/preset-vite": "^2.10.6",
     "@preact/signals": "^2.11.3",
-    "@tanstack/intent": "^0.4.0",
+    "@tanstack/intent": "^0.5.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "convex": "^1.38.0",

package/skills/install-markup-widget/SKILL.md

@@ -7,7 +7,7 @@ sources:
   - 'Pixelmatters/markup:packages/widget/src/widget.ts'
 metadata:
   library: pixelmatters-markup
-  library_version: '1.34.2'
+  library_version: '1.34.4'
 ---
 
 `@pixelmatters/markup` is a Preact widget that runs inside a shadow DOM and talks to a hosted Convex backend at `https://<deployment>.convex.site`. The host page calls `init({ apiUrl, apiKey })` once at the app root and gets back a `destroy()` function. Everything else lives inside the widget bundle: pin anchoring, threads, mentions, identity, screenshots, real-time updates.
@@ -26,7 +26,7 @@ For a `<script>`-tag drop-in (no bundler / CMS / page-builder), use the inline E
 
 ```html
 <script type="module">
-  import { init } from 'https://esm.sh/@pixelmatters/markup@1.34.2'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.34.4'
   init({ apiUrl: '…', apiKey: '…' })
 </script>
 ```
@@ -36,7 +36,7 @@ If the host disallows inline JS, use the auto-init form. `data-markup-widget="tr
 ```html
 <script
   type="module"
-  src="https://esm.sh/@pixelmatters/markup@1.34.2"
+  src="https://esm.sh/@pixelmatters/markup@1.34.4"
   data-markup-widget="true"
   data-api-url="…"
   data-api-key="…"
@@ -60,7 +60,10 @@ import { init, destroy } from '@pixelmatters/markup'
 If `apiUrl` or `apiKey` is missing, `init` logs a `[markup]` console warning and returns a no-op `destroy` rather than mounting, which is worth knowing when debugging "nothing showed up."
 
 ```tsx
-// React: render <Markup /> once near the root. Add 'use client' on Next.js App Router.
+// React: render <Markup /> once near the root. Shown for Vite, whose templates
+// already carry this reference in src/vite-env.d.ts. On Next.js App Router, add
+// 'use client' and read process.env.NEXT_PUBLIC_MARKUP_API_URL / _API_KEY instead.
+/// <reference types="vite/client" />
 import { useMarkup } from '@pixelmatters/markup/react'
 
 export function Markup() {
@@ -168,7 +171,7 @@ Optional, and worth suggesting on a component-based app:
 
 ## Mentions & inbox
 
-Typing `@` in a composer opens a picker of project members and inserts a chip, and the stored `@[Display Name](userId)` form never reaches the screen. `↑`/`↓` move, `enter` or `tab` picks, `esc` dismisses. It works for anonymous visitors too; the member list is fetched with the API key when the visitor first starts a comment or opens a thread, not on page load, and a failed fetch degrades to "no picker, no chips" rather than blocking the widget.
+Typing `@` in a composer opens a picker of project members and inserts a chip, and the stored form, `@[Display Name]` followed by the member's id in parentheses, never reaches the screen. `↑`/`↓` move, `enter` or `tab` picks, `esc` dismisses. It works for anonymous visitors too; the member list is fetched with the API key when the visitor first starts a comment or opens a thread, not on page load, and a failed fetch degrades to "no picker, no chips" rather than blocking the widget.
 
 Mentioned teammates get a notification. **Signed-in** users read those from the inbox button on the toolbar, which carries an unread badge; anonymous visitors don't get the button. A mention that doesn't highlight means nobody was notified: the target isn't a project member, has left, or is the author themselves.
 
@@ -216,7 +219,7 @@ Walk these in order when the widget is misbehaving:
 - **Don't wrap in a provider component.** `init` is the whole public API.
 - **Don't call `init` inside a route component.** Mount at the app root once.
 - **Don't hardcode the API key.** Use env vars so rotations don't require a code change.
-- **Don't ship CDN URLs without a version pin.** `@pixelmatters/markup@1.34.2`, not `@pixelmatters/markup`.
+- **Don't ship CDN URLs without a version pin.** `@pixelmatters/markup@1.34.4`, not `@pixelmatters/markup`.
 - **Don't add `https://*.convex.site` to `connect-src` and assume that's the whole CSP story.** The deployment domain (`<your-deployment>.convex.site`) is what the widget hits over HTTP, and it must be listed explicitly. Live thread updates go to `wss://<your-deployment>.convex.cloud`, an origin the widget derives from `apiUrl`, so `connect-src` needs both. `img-src` needs `blob:`, `data:`, and the host serving profile pictures; `style-src` needs `'unsafe-inline'` only for Safari before 16.4 and Firefox before 101, where the widget falls back to a `<style>` element inside its shadow root; everywhere else it adopts a constructed stylesheet, which CSP doesn't block. Add `https://esm.sh` to `script-src` only if you took the CDN path.
 
 ## Versioning & releases