@pixelmatters/markup 1.4.0 → 1.5.0

package/README.md

@@ -35,9 +35,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.4.0'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.5.0'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.4.0'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.5.0'
 
   init({
     apiUrl: 'https://your-deployment.convex.site',
@@ -49,14 +49,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 — a future major release will break your page silently. Always pin (`@pixelmatters/markup@1.4.0`).
+> **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm — a future major release will break your page silently. Always pin (`@pixelmatters/markup@1.5.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.4.0"
+  src="https://esm.sh/@pixelmatters/markup@1.5.0"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
@@ -178,6 +178,34 @@ Unmounts the widget and removes the host element. Safe to call when nothing is m
 | 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 |
 
+## Screenshots & privacy
+
+By default, the widget captures the visible viewport as a JPEG before you submit a thread. Sensitive fields are blacked out **before** the image is produced — the live DOM is mutated only for the duration of the capture and immediately restored. No image content leaves the browser until the user explicitly attaches the screenshot and posts.
+
+**Auto-scrubbed (zero config):**
+
+- `input[type="password"]`
+- Any `<input>` whose `autocomplete` attribute contains `cc-number`, `cc-csc`, `cc-exp`, `cc-name`, `cc-type`, `current-password`, `new-password`, or `one-time-code`
+
+**Attribute API** — add to any element to control capture:
+
+| Attribute             | Behaviour                                                              |
+| --------------------- | ---------------------------------------------------------------------- |
+| `data-markup-private` | Always mask — contents 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.                      |
+
+**`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`  | —       | Custom CSS selector — matched elements are always masked.  |
+
+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.
+
 ## How it works
 
 - The widget mounts `<div id="markup-widget">` on `document.body` and attaches an open shadow root.
@@ -244,7 +272,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.4.0'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.5.0'
 
   init({
     apiUrl: '...',
@@ -261,7 +289,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.4.0"
+  src="https://esm.sh/@pixelmatters/markup@1.5.0"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."

package/dist/widget.d.ts

@@ -1,5 +1,13 @@
 export type WidgetTheme = 'light' | 'dark' | 'auto';
 export type WidgetFab = 'default' | 'icon-only';
+export interface ScreenshotsConfig {
+    /** Disable screenshot capture entirely. Default: enabled. */
+    enabled?: boolean;
+    /** Also masks all inputs/selects/textareas in addition to the default sensitive set. Default: false. */
+    strictScrub?: boolean;
+    /** Custom CSS selector — matched elements are always masked. */
+    redactSelector?: string;
+}
 export interface WidgetConfig {
     /** Convex deployment site URL, e.g. `https://your-deployment.convex.site` */
     apiUrl: string;
@@ -22,6 +30,8 @@ export interface WidgetConfig {
      * Defaults to `'default'`.
      */
     fab?: WidgetFab;
+    /** Screenshot capture and PII-scrub options. */
+    screenshots?: ScreenshotsConfig;
 }
 /**
  * Mounts the feedback widget on the page. Idempotent — calling init again