@pixelmatters/markup 1.23.0 → 1.24.0

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.23.0'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.24.0'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.23.0'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.24.0'
 
   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.23.0`).
+> **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.24.0`).
 
 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.23.0"
+  src="https://esm.sh/@pixelmatters/markup@1.24.0"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
@@ -273,6 +273,7 @@ The overflow menu's **Privacy & data** panel restates all of this for the person
 Capture degrades instead of failing outright:
 
 - **An image the browser won't hand over** comes through blank, and the rest of the page still captures. A third-party avatar served without CORS headers is the usual culprit. It used to abort the whole screenshot.
+- **Icons from an SVG sprite** are fetched and inlined before the capture. The capture renders your page as an SVG document, which is not allowed to load anything external, so a `<use href="/sprite.svg#icon">` would otherwise draw nothing — on a design system that ships its icons that way, every icon in the screenshot went missing. A sprite the widget can't read (cross-origin without CORS headers, or outside your `connect-src`) leaves those icons blank and the rest captures as before.
 - **An oversized capture** is re-encoded until it fits the server's 2 MB cap: quality drops first (0.85 → 0.6), then the raster shrinks (full → ¾ → ½), because a smaller sharp screenshot beats a full-size illegible one.
 - **If nothing works**, the composer reads _Screenshot unavailable_ and the comment posts without one. Previously the row just disappeared, which looked identical to screenshots being switched off for the project.
 
@@ -372,7 +373,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.23.0'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.24.0'
 
   init({
     apiUrl: '...',
@@ -388,7 +389,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.23.0"
+  src="https://esm.sh/@pixelmatters/markup@1.24.0"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."
@@ -420,11 +421,12 @@ If the host page ships a CSP, the widget needs:
 | ------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
 | `connect-src` | `https://<deployment>.convex.site`                                         | threads, comments, identity, screenshot upload, error reports                       |
 | `connect-src` | `wss://<deployment>.convex.cloud`                                          | live thread updates                                                                 |
+| `connect-src` | your own origin, if you serve icons from an SVG sprite                     | fetched so `<use href="/sprite.svg#icon">` icons aren't blank in screenshots        |
 | `img-src`     | wherever your team's profile pictures are hosted, plus `blob:` and `data:` | avatars, the screenshot preview thumbnail, and the capture pipeline                 |
 | `script-src`  | `https://esm.sh`                                                           | CDN path only; a bundled install needs nothing here                                 |
 | `style-src`   | `'unsafe-inline'`                                                          | the widget appends its stylesheet as a `<style>` element inside its own shadow root |
 
-Only `img-src` degrades gracefully: a blocked avatar falls back to initials, and a blocked image in a capture comes through blank. A missing `connect-src` entry stops the widget working at all, and a missing `style-src` one leaves it unstyled.
+Only `img-src` and the sprite entry degrade gracefully: a blocked avatar falls back to initials, and a blocked image or sprite in a capture comes through blank. A missing `connect-src` entry stops the widget working at all, and a missing `style-src` one leaves it unstyled.
 
 ## Browser support