@pixelmatters/markup 1.31.6 → 1.32.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.31.6'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.32.0'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.31.6'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.32.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.31.6`).
+> **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.32.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.31.6"
+  src="https://esm.sh/@pixelmatters/markup@1.32.0"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
@@ -190,9 +190,9 @@ The floating action button was replaced by the toolbar pill in 1.15.0, and a pil
 
 ### Product telemetry
 
-The widget reports counts of its own interactions, such as a comment
-started, a comment submitted, or a screenshot captured, so we can tell
-which parts of it earn their place. Turn it off with `analytics: false`, or
+The widget reports counts of its own interactions, such as a pin placed,
+a comment submitted or abandoned, or a toolbar setting changed, so we can
+tell which parts of it earn their place. Turn it off with `analytics: false`, or
 `data-analytics="false"` on the script tag.
 
 What it is not, concretely:
@@ -201,7 +201,8 @@ What it is not, concretely:
   `convex.site`, the same origin the widget already talks to. Nothing new
   for your CSP, and no vendor SDK on your page.
 - **No identifier for your users.** Events are keyed on the Markup
-  project, not the person. The session id is generated per page load, held
+  project, not the person. They say whether the visitor was anonymous or
+  signed in, never who. The session id is generated per page load, held
   in memory, and gone when the tab closes.
 - **No cookie, no `localStorage`.** Telemetry adds nothing to your page's
   storage.
@@ -268,7 +269,7 @@ close.
 
 ## Screenshots & privacy
 
-By default, the widget captures the visible viewport as a WebP image before you submit a thread (JPEG on browsers that can't encode WebP). Sensitive fields are blacked out **before** the image is produced. The live DOM is mutated only for the duration of the capture, then restored. No image content leaves the browser until the user explicitly attaches the screenshot and posts.
+By default, the widget captures the visible viewport as a WebP image before you submit a thread (JPEG on browsers that can't encode WebP). Sensitive fields are blacked out **before** the image is produced. Each masked element becomes one solid black block covering its box, with nothing inside it showing: no text, images, icons or child elements, even where they overflow the box. Masking a `<canvas>`, `<video>` or `<iframe>` also blacks out any image beside it in the same parent. The mask is applied to the copy of the page the capture renders, so the page itself never shows it. No image content leaves the browser until the user explicitly attaches the screenshot and posts.
 
 **Auto-scrubbed (zero config):**
 
@@ -277,20 +278,22 @@ By default, the widget captures the visible viewport as a WebP image before you
 
 **Attribute API.** Add any of these to an element to control capture:
 
-| Attribute             | Behaviour                                                              |
-| --------------------- | ---------------------------------------------------------------------- |
-| `data-markup-private` | Always mask; contents are replaced with a solid block.                 |
-| `data-markup-redact`  | Alias for `data-markup-private`.                                       |
-| `data-markup-safe`    | Exempts descendants from the default auto-detect rules (escape hatch). |
-| `data-markup-skip`    | Removes the element from the screenshot entirely.                      |
+| Attribute             | Behaviour                                                                                                            |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `data-markup-private` | Always mask: the element and everything inside it become a solid block.                                              |
+| `data-markup-redact`  | Alias for `data-markup-private`.                                                                                     |
+| `data-markup-safe`    | Exempts descendants (not the element itself) from auto-detection, `redactSelector` and `strictScrub` (escape hatch). |
+| `data-markup-skip`    | Removes the element from the screenshot entirely.                                                                    |
+
+**Web components.** Masking reaches into open shadow roots, nested ones included, because the capture shows their content. A `data-markup-safe` on a component's host, or on any element around it, exempts the fields in its shadow root, as it does any other descendant. `redactSelector` is matched inside each shadow root on its own, so a selector can't span a shadow boundary: `.card-field` reaches into a component, `checkout-form .card-field` doesn't. A closed shadow root's own content never appears in the screenshot; light-DOM children slotted into it still do, and are masked like any other element.
 
 **`init()` `screenshots` config:**
 
-| Option                       | Type      | Default | Description                                                |
-| ---------------------------- | --------- | ------- | ---------------------------------------------------------- |
-| `screenshots.enabled`        | `boolean` | `true`  | Set to `false` to disable capture entirely.                |
-| `screenshots.strictScrub`    | `boolean` | `false` | Also masks all `input`, `select`, and `textarea` elements. |
-| `screenshots.redactSelector` | `string`  | none    | Custom CSS selector; matched elements are always masked.   |
+| Option                       | Type      | Default | Description                                                                                  |
+| ---------------------------- | --------- | ------- | -------------------------------------------------------------------------------------------- |
+| `screenshots.enabled`        | `boolean` | `true`  | Set to `false` to disable capture entirely.                                                  |
+| `screenshots.strictScrub`    | `boolean` | `false` | Also masks all `input`, `select`, and `textarea` elements.                                   |
+| `screenshots.redactSelector` | `string`  | none    | Custom CSS selector; matched elements are masked unless inside a `data-markup-safe` element. |
 
 When a screenshot is attached in the composer, a chip shows how many fields were redacted. Clicking it expands the list of CSS selectors that were masked.
 
@@ -303,8 +306,9 @@ 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.
+- **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. One that hasn't answered within 3 seconds leaves them blank in that screenshot only; the next one asks again.
 - **Captures are sized for storage, not for zooming.** The raster is capped at 1.5x device pixel ratio, so a 2x or 3x display doesn't bank detail nobody looks at in a lightbox. The image is then encoded down a ladder — quality drops first (0.85 → 0.6), then the raster shrinks (full → ¾ → ½) — until it lands under roughly 400 KB. A page that can't get there at any rung keeps the sharpest version that still fits the server's 2 MB hard cap, because a smaller sharp screenshot beats a full-size illegible one but not by any margin. A 640px-wide thumbnail of the same redacted image is uploaded alongside it for the inline preview in a thread, so the full screenshot downloads only when someone opens it.
+- **A font or image that never answers**, behind a blackholing proxy or a stalled CDN, is given up on after 3 seconds and treated like one the browser refuses: an image comes through blank, a font falls back to the next one in its stack. The next screenshot asks for it again, and waits for it again. An image the browser refuses outright is not asked for again until the page reloads. A capture still unfinished after 30 seconds is abandoned as unavailable, rather than leaving the composer on _Capturing…_.
 - **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.
 
 ## Routing
@@ -497,7 +501,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.6'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.32.0'
 
   init({
     apiUrl: '...',
@@ -513,7 +517,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.6"
+  src="https://esm.sh/@pixelmatters/markup@1.32.0"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."

package/dist/react.js

@@ -1,2 +1,2 @@
-"use client";import{init as e,t}from"./widget.js";import{t as n}from"./shared-mount-B9ij4vuL.js";import{useEffect as r}from"react";function i(i){let{enabled:a=!0,...o}=i,s=a?t(o):null;r(()=>{if(s!==null)return n(s,e)},[s])}export{i as useMarkup};
+"use client";import{init as e,n as t,t as n}from"./widget.js";import{t as r}from"./shared-mount-B9ij4vuL.js";import{useEffect as i}from"react";function a(a){let{enabled:o=!0,...s}=a,c=o?n(s):null;i(()=>{if(c!==null)return t(`react`),r(c,e)},[c])}export{a as useMarkup};
 //# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","names":[],"sources":["../src/react.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport { configKey } from './runtime/config-key'\nimport { acquireMount } from './runtime/shared-mount'\nimport { init, type WidgetConfig } from './widget'\n\nexport type { WidgetConfig } from './widget'\n\nexport type UseMarkupOptions = WidgetConfig & {\n  /**\n   * `false` unmounts the widget, or never mounts it. Drive it from your build\n   * environment to keep the widget off production.\n   *\n   * @default true\n   */\n  enabled?: boolean\n}\n\n/**\n * Mounts the widget for as long as the calling component is mounted. Call it\n * once near your app root.\n *\n * An inline options object is fine: the widget remounts only when a value\n * changes, not when the object is recreated. Two components using the same\n * options share one widget, and it stays until both unmount. Server rendering\n * mounts nothing.\n */\nexport function useMarkup(options: UseMarkupOptions): void {\n  const { enabled = true, ...config } = options\n  const key = enabled ? configKey(config) : null\n\n  useEffect(() => {\n    if (key === null) return\n    return acquireMount(key, init)\n  }, [key])\n}\n"],"mappings":"mIA6BA,SAAgB,EAAU,EAAiC,CACzD,GAAM,CAAE,UAAU,GAAM,GAAG,GAAW,EAChC,EAAM,EAAU,EAAU,CAAM,EAAI,KAE1C,MAAgB,CACV,OAAQ,KACZ,OAAO,EAAa,EAAK,CAAI,CAC/B,EAAG,CAAC,CAAG,CAAC,CACV"}
+{"version":3,"file":"react.js","names":[],"sources":["../src/react.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport { setInstallEntry } from './runtime/analytics'\nimport { configKey } from './runtime/config-key'\nimport { acquireMount } from './runtime/shared-mount'\nimport { init, type WidgetConfig } from './widget'\n\nexport type { WidgetConfig } from './widget'\n\nexport type UseMarkupOptions = WidgetConfig & {\n  /**\n   * `false` unmounts the widget, or never mounts it. Drive it from your build\n   * environment to keep the widget off production.\n   *\n   * @default true\n   */\n  enabled?: boolean\n}\n\n/**\n * Mounts the widget for as long as the calling component is mounted. Call it\n * once near your app root.\n *\n * An inline options object is fine: the widget remounts only when a value\n * changes, not when the object is recreated. Two components using the same\n * options share one widget, and it stays until both unmount. Server rendering\n * mounts nothing.\n */\nexport function useMarkup(options: UseMarkupOptions): void {\n  const { enabled = true, ...config } = options\n  const key = enabled ? configKey(config) : null\n\n  useEffect(() => {\n    if (key === null) return\n    setInstallEntry('react')\n    return acquireMount(key, init)\n  }, [key])\n}\n"],"mappings":"+IA8BA,SAAgB,EAAU,EAAiC,CACzD,GAAM,CAAE,UAAU,GAAM,GAAG,GAAW,EAChC,EAAM,EAAU,EAAU,CAAM,EAAI,KAE1C,MAAgB,CACV,OAAQ,KAEZ,OADA,EAAgB,OAAO,EAChB,EAAa,EAAK,CAAI,CAC/B,EAAG,CAAC,CAAG,CAAC,CACV"}

package/dist/vue.js

@@ -1,2 +1,2 @@
-import{init as e,t}from"./widget.js";import{t as n}from"./shared-mount-B9ij4vuL.js";import{computed as r,onBeforeUnmount as i,onMounted as a,toValue as o,watch as s}from"vue";function c(c){let l=r(()=>{let{enabled:e=!0,...n}=o(c);return e?t(n):null}),u=null,d=t=>{u?.(),u=t===null?null:n(t,e)},f=null;a(()=>{d(l.value),f=s(l,d)}),i(()=>{f?.(),d(null)})}export{c as useMarkup};
+import{init as e,n as t,t as n}from"./widget.js";import{t as r}from"./shared-mount-B9ij4vuL.js";import{computed as i,onBeforeUnmount as a,onMounted as o,toValue as s,watch as c}from"vue";function l(l){let u=i(()=>{let{enabled:e=!0,...t}=s(l);return e?n(t):null}),d=null,f=n=>{d?.(),n!==null&&t(`vue`),d=n===null?null:r(n,e)},p=null;o(()=>{f(u.value),p=c(u,f)}),a(()=>{p?.(),f(null)})}export{l as useMarkup};
 //# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","names":[],"sources":["../src/vue.ts"],"sourcesContent":["import { computed, onBeforeUnmount, onMounted, toValue, watch, type MaybeRefOrGetter } from 'vue'\n\nimport { configKey } from './runtime/config-key'\nimport { acquireMount } from './runtime/shared-mount'\nimport { init, type WidgetConfig } from './widget'\n\nexport type { WidgetConfig } from './widget'\n\nexport type UseMarkupOptions = WidgetConfig & {\n  /**\n   * `false` unmounts the widget, or never mounts it. Drive it from your build\n   * environment to keep the widget off production.\n   *\n   * @default true\n   */\n  enabled?: boolean\n}\n\n/**\n * Mounts the widget for as long as the calling component is mounted. Call it\n * once from your root component's `setup`.\n *\n * Pass a plain object, a ref, or a getter. The widget remounts only when a\n * value changes, not when the object is replaced by an equal one. Two\n * components using the same options share one widget, and it stays until\n * both unmount. Nothing mounts during server rendering, since mounting waits\n * for `onMounted`.\n */\nexport function useMarkup(options: MaybeRefOrGetter<UseMarkupOptions>): void {\n  const key = computed(() => {\n    const { enabled = true, ...config } = toValue(options)\n    return enabled ? configKey(config) : null\n  })\n\n  let release: (() => void) | null = null\n  const apply = (next: string | null) => {\n    release?.()\n    release = next === null ? null : acquireMount(next, init)\n  }\n\n  let stopWatching: (() => void) | null = null\n  onMounted(() => {\n    apply(key.value)\n    stopWatching = watch(key, apply)\n  })\n  onBeforeUnmount(() => {\n    stopWatching?.()\n    apply(null)\n  })\n}\n"],"mappings":"+KA4BA,SAAgB,EAAU,EAAmD,CAC3E,IAAM,EAAM,MAAe,CACzB,GAAM,CAAE,UAAU,GAAM,GAAG,GAAW,EAAQ,CAAO,EACrD,OAAO,EAAU,EAAU,CAAM,EAAI,IACvC,CAAC,EAEG,EAA+B,KAC7B,EAAS,GAAwB,CACrC,IAAU,EACV,EAAU,IAAS,KAAO,KAAO,EAAa,EAAM,CAAI,CAC1D,EAEI,EAAoC,KACxC,MAAgB,CACd,EAAM,EAAI,KAAK,EACf,EAAe,EAAM,EAAK,CAAK,CACjC,CAAC,EACD,MAAsB,CACpB,IAAe,EACf,EAAM,IAAI,CACZ,CAAC,CACH"}
+{"version":3,"file":"vue.js","names":[],"sources":["../src/vue.ts"],"sourcesContent":["import { computed, onBeforeUnmount, onMounted, toValue, watch, type MaybeRefOrGetter } from 'vue'\n\nimport { setInstallEntry } from './runtime/analytics'\nimport { configKey } from './runtime/config-key'\nimport { acquireMount } from './runtime/shared-mount'\nimport { init, type WidgetConfig } from './widget'\n\nexport type { WidgetConfig } from './widget'\n\nexport type UseMarkupOptions = WidgetConfig & {\n  /**\n   * `false` unmounts the widget, or never mounts it. Drive it from your build\n   * environment to keep the widget off production.\n   *\n   * @default true\n   */\n  enabled?: boolean\n}\n\n/**\n * Mounts the widget for as long as the calling component is mounted. Call it\n * once from your root component's `setup`.\n *\n * Pass a plain object, a ref, or a getter. The widget remounts only when a\n * value changes, not when the object is replaced by an equal one. Two\n * components using the same options share one widget, and it stays until\n * both unmount. Nothing mounts during server rendering, since mounting waits\n * for `onMounted`.\n */\nexport function useMarkup(options: MaybeRefOrGetter<UseMarkupOptions>): void {\n  const key = computed(() => {\n    const { enabled = true, ...config } = toValue(options)\n    return enabled ? configKey(config) : null\n  })\n\n  let release: (() => void) | null = null\n  const apply = (next: string | null) => {\n    release?.()\n    if (next !== null) setInstallEntry('vue')\n    release = next === null ? null : acquireMount(next, init)\n  }\n\n  let stopWatching: (() => void) | null = null\n  onMounted(() => {\n    apply(key.value)\n    stopWatching = watch(key, apply)\n  })\n  onBeforeUnmount(() => {\n    stopWatching?.()\n    apply(null)\n  })\n}\n"],"mappings":"2LA6BA,SAAgB,EAAU,EAAmD,CAC3E,IAAM,EAAM,MAAe,CACzB,GAAM,CAAE,UAAU,GAAM,GAAG,GAAW,EAAQ,CAAO,EACrD,OAAO,EAAU,EAAU,CAAM,EAAI,IACvC,CAAC,EAEG,EAA+B,KAC7B,EAAS,GAAwB,CACrC,IAAU,EACN,IAAS,MAAM,EAAgB,KAAK,EACxC,EAAU,IAAS,KAAO,KAAO,EAAa,EAAM,CAAI,CAC1D,EAEI,EAAoC,KACxC,MAAgB,CACd,EAAM,EAAI,KAAK,EACf,EAAe,EAAM,EAAK,CAAK,CACjC,CAAC,EACD,MAAsB,CACpB,IAAe,EACf,EAAM,IAAI,CACZ,CAAC,CACH"}

package/dist/widget.d.ts

@@ -20,7 +20,8 @@ export interface ScreenshotsConfig {
      */
     strictScrub?: boolean;
     /**
-     * Custom CSS selector — matched elements are always masked.
+     * Custom CSS selector. Matched elements are masked unless a `data-markup-safe` element contains them.
+     * It is matched inside each open shadow root on its own, so it can't span a shadow boundary.
      *
      * @default undefined
      */