@pixelmatters/markup 1.31.1 → 1.31.2

package/README.md

@@ -37,9 +37,9 @@ CDN drop-in, no build step. Paste this just before `</body>`:
 ```html
 <script type="module">
   // Pin the exact version; esm.sh resolves it from npm
-  import { init } from 'https://esm.sh/@pixelmatters/markup@1.31.1'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.31.2'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.31.1'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.31.2'
 
   init({
     apiUrl: 'https://your-deployment.convex.site',
@@ -50,14 +50,14 @@ CDN drop-in, no build step. Paste this just before `</body>`:
 </script>
 ```
 
-> **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm, so a future major release will break your page with no warning. Always pin (`@pixelmatters/markup@1.31.1`).
+> **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm, so a future major release will break your page with no warning. Always pin (`@pixelmatters/markup@1.31.2`).
 
 If your platform doesn't allow inline JS (some CMS / page-builder editors), use the auto-init form instead. Point a `<script src=…>` at the bundle and pass config via `data-*` attributes:
 
 ```html
 <script
   type="module"
-  src="https://esm.sh/@pixelmatters/markup@1.31.1"
+  src="https://esm.sh/@pixelmatters/markup@1.31.2"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
@@ -405,6 +405,7 @@ to start from `anchorSource` and confirm it, not to trust it blindly.
 - The widget mounts `<div id="markup-widget">` on `document.body` and attaches an open shadow root. It does so once the page is idle, or 2 s after `init()` on a page that never is, so `init()` returns before the element exists.
 - All UI lives in that shadow root, with `:host { all: initial }` blocking style inheritance.
 - The host element is `position: fixed; inset: 0; pointer-events: none`, so the widget paints over the entire viewport without blocking the host's clicks; only the toolbar and active popovers opt back in to pointer events.
+- A modal on your page, such as a Radix or Base UI dialog, doesn't lock the widget out. Focus, wheel and touch events inside the widget are not passed on to your page, so a focus trap or scroll lock never sees them. A field of yours still gets its `focusout` when focus moves into the widget, without a `relatedTarget`. The widget also removes the `aria-hidden` or `inert` a modal puts on it, so screen readers can reach it. A Base UI popup that allows presses outside it still closes on a click in the widget, and a native `<dialog>` opened with `showModal()` makes the widget inert.
 - Pins are anchored as `(x, y)` fractions of the document plus a CSS path from the nearest landmark (a stable `id`, `data-testid`, `main`, `form`, `table`, …) and the element's text. The path wins when it still resolves, relaxing from the top if a wrapper changed, and a match whose text differs is rejected; the fraction is the fallback so pins survive layout changes.
 - Live thread updates come over a WebSocket to the deployment's `*.convex.cloud` origin, which the widget derives from `apiUrl`. Everything else, meaning comments, identity, screenshots and error reports, goes to `*.convex.site` over HTTP.
 - Identity lives in **host-page** `localStorage` under `markup.identity`, keyed to the top-level site. On first load the widget mints a server-signed anonymous JWT via `POST /widget/anon-identity` so the backend can verify the `authorClientId` on every anon write. Tampering with the cached `clientId` invalidates the signature. Verified identities upgrade to a `Bearer` JWT via the popup flow described below.
@@ -496,7 +497,7 @@ For a `<script>` tag drop-in (no bundler), use the inline ESM form and **pin the
 
 ```html
 <script type="module">
-  import { init } from 'https://esm.sh/@pixelmatters/markup@1.31.1'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.31.2'
 
   init({
     apiUrl: '...',
@@ -512,7 +513,7 @@ If inline JS is disallowed (some CMS / page-builder editors), use the auto-init
 ```html
 <script
   type="module"
-  src="https://esm.sh/@pixelmatters/markup@1.31.1"
+  src="https://esm.sh/@pixelmatters/markup@1.31.2"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."